Фидбэк на «Редизайн мобильного приложения Steam»

When one comment is not enough.

Во-первых, хочется порадоваться за человека: видно, что навыки он свои прокачал за этот год и продолжает заниматься тем, что ему нравится. Круто же!

Я начал было писать коммент, но понял, что отдельные свои высказывания хотел бы сопроводить скрином, поэтому решил быстренько напилить пост. Спойлер: быстренько не получилось. На суперподробный разбор не рассчитывай, @Henke, но надеюсь, что мой взгляд со стороны поможет тебе стать ещё лучше как профессионалу.

В целом, к логину каких-то особых претензий нет, кроме одной: анимированный бэкграунд. Ну просто зачеееееееееем? Эта хренота мало того, что мешает читать текст, так ещё и отвлекает от ввода информации.

А главное — она там не нужна, ведь она не служит никакой цели, а просто является свистоперделкой. Не, не поймите непрально, я люблю всякие свистоперделки в дизайне, но это уже как-то слишком. Так сказать, «не только не помогает, но даже немножечко вредит».

Сюда же заметку лично для @Henke по поводу оформления кейса на бихансе. Ты очень сильно промахнулся со шрифтом для подписей. Вот это вот читать невозможно, все буквы слипаются в одно слово (я сначала подумал, что это какая-то «рыба»):

Зачем? Как по мне — это лишний визуальный мусор, который ничему не служит, а только загрязняет пространство. Какой-нибудь аккуратный круг рамочкой мог бы служить дополнительным визуальным индикатором. А вот эта вот сфера… Ну как-то не…

Из-за этой же сферы, между прочим, текст «you logged as» плохо читается (да, я сделал скидку на шакалов из видео):

А вот идея с таймером — хорошая, мне нравится больше текущего прогрессбара. Лучше показывает, сколько времени осталось.

Ещё одна претензия — к выбору цвета. Когда текст становится красным, он хреново читается из-за двух факторов:

На выходе получаем совсем плохо читаемый текст, особенно мелкий текст таймера:

Также, на мой взгляд, зря ты взял серые иконки. В сочетании с синим фоном они дают эффект «грязи». Но это может мои личные заморочки, не знаю. Но я бы сделал их белыми или накинул в них совсем немного акцентного синего — так, чтобы это не бросалось в глаза, но чтобы они не были настолько депрессивно-серыми. Не понял также, зачем вообще иконки были взяты отличного от цвета текста.

Между прочим, «шевронов» справа вообще не видно — это косяк:

Там же на таббаре иконки почему-то выполнены в разных стилях. Плюс активность/неактивность передана как-то аляповато:

Текст у неактивных элементов остаётся таким же белым, но при этом иконки меняют цвет. Зато текст у активного элемента меняет свою жирность, а вот иконка — нет. Если совместить эти два подхода — могло бы получиться неплохо: при активации пункта иконка бы становилась «заполненной», а текст — жирным. Но это в любом случае оверкилл, имхо. В общем:

В общем и целом раздел достаточно чистый. Меня смущает разве что размер шрифта. Такое ощущение, что он здесь 14 или даже меньше, особенно на превьюшках сообщений.

В мобилках, несмотря на то, что места, казалось бы, мало, мельчить не нужно, и использовать для основного текста рекомендуемый системными гайдлайнами размер (16+). А всё что меньше, должно уходить на всякую ненужную херню или мета-инфу. Но не до такой степени, конечно:

Количество уведомлений плохо видно из-за контраста между фоном и цветом текста и размера текста, ровно как и в случае с таймстампом. Шрифт выглядит ну прямо мизерным. Места ведь дофига, зачем так ужимать?

Особенно странно мелкий текст ника/сообщения смотрится рядом с огромными аватарками. Они действительно настолько важнее?

Ну и, конечно, очевидно плохой контраст исходящих сообщений. Фон нужно менять:

Ещё странно, что голосовушка выбивается из общего стиля сообщений (нет фона). Почему?

Ну и опять иконки. Иконка More… справа вверху и иконка стикеров/смайликов снова «жирные», хотя большая часть иконок — тонкие аутлайновые.

Видно, что с большими объёмами информации ты научился работать лучше, но проблема с типографикой до конца не ушла.

Текст прям очень мелкий. На реальном телефоне для чтения текста придётся брать лупу:

Да и весь остальной текст спокойно можно увеличить. Я не знаю размеры, которые ты использовал, но достаточно большими кажутся только ники и названия новостей (и игр, к которым они относятся). Всё остальное — маленькое. Или очень маленькое.

Чтобы создать правильную иерархию, размер можно не использовать вообще. Или сделать основные элементы типа заголовков или ников крупнее, чтобы сопроводительный текст не приходилось читать с лупой.

К проблемам с типографикой можно отнести и правильный выбор line-height. Кажется, что элементам паддинги заданы вручную, хотя например в случае вот этих карточек игр расстояние между заголовками и описанием отлично могло бы контролироваться интерлиньяжем. Если влом придумывать «на глаз», могу посоветовать вот этот генератор, например. Я для себя обычно использую 130% для заголовков и 150% для текста где-то, но зависит от гарнитуры, конечно.

Подобные проблемы с типографикой наблюдаются и на других экранах, я уже не буду к ним возвращаться, просто имей в виду, что они не только здесь. Просто здесь они заметнее всего.

Также в целом активность довольно странно свёрстана, мне вот потребовалось некоторое время, чтобы понять, что в этом блоке происходит и что к чему относится:

А всё из-за того, что картинка игры забирает на себя всё внимание и давит своей «важностью» из-за своих размеров, скрадывая твоё разделение элементов этого фида паддингом.

Также странным на мой взгляд решением было сделать кликабельную ссылку Read More в мобильном приложении. Это ведь прям десктопный паттерн (причём не очень хороший):

Получается слишком мелкий для мобилки элемент, который будет неудобно кликать. Я бы наверное вхреначил кнопку после новости или сделал весь элемент кликабельной карточкой.

Я так понимаю, всякие фильтры ты вынес в кнопку «настроек». Меня она смущает. Во-первых, она не квадратная. Почему?) За что ты её так пожал? Во-вторых (хотя на самом деле во-первых), она — самый яркий элемент и воспринимается как основная кнопка действия на первом экране:

Имхо, на её месте должна быть кнопка поиска, а фильтр выполнен в виде «чипов»: самые популярные 2-3 фильтра + кнопка тонкой настройки под полем поиска.

Также я прям удивился стилю выбранных предметов на странице Confirmations. Это ээээ... Что это такое? Откуда внезапно взялся этот стиль с невнятным размытым бэкграундом?

У тебя же буквально на предыдущем экране есть отличный чёткий стиль для активного айтима:

Ну и почему кнопка Select All выглядит так, будто она неактивна?

А вот что происходит на следующем экране я не особо понимаю. Может, сказывается отсутствие опыта торговли с другими игроками, но… Что делает крестик справа вверху? Чем он отличается от Decline? Он «сворачивает» открытую для просмотра сделку? Имхо, в таком случе стоило бы сделать просмотр сделки в модальном окне, чтоб ничто другое не мешалось в принципе.

Ну и мне опять совсем не нравится это визуальное решение отделять один айтим от другого этим странным размытым фоном — я так понимаю именно это сделано, и снизу там вытарчивает следующая сделка:

Кстати, иконки здесь. Если у тебя иконка «развернуть», то должна быть и иконка «свернуть», по логике. Но у тебя иконка «закрыть» — нелогично.

И последнее в этом разделе. Чем объясняется такой цветовой «зоопарк» кнопок?

И это если забыть, что есть ещё «главный» стиль большой кнопки.

В общем-то, не знаю, где ты нашёл эти сотни игр в мобильной версии и чем она принципиально отличается от того, что изобразил ты. Для сравнения:

В целом, главная страница выглядит достаточно чисто и опрятно (исключая проблему с крошечным шрифтом, но я обещал не возвращаться к ней особо). Единственное что, положение блоков на всех этих коммерческих страницах скрее всего не случайно, поэтому я бы не стал его менять и оставил бы тем же, что сейчас в актуальной версии приложения. Включая все эти «Ваши списки рекомендаций», «Нравится игрокам похожим на вас» и т.д. Оно всё там не просто так — выверено маркетинговым отделом Стима и подстёгивает юзеров на покупки. А задача дизайна конкретно этой страницы — продавать игры.

Здесь опять есть проблемы с контрастом — названия игр/цены не очень хорошо читаются на голубом полупрозрачном фоне. Я уже молчу про жанры и цену до скидок, которые вообще практически не видно.

Ну и белый текст на светло-сером фоне — тоже спорное решение, как с эстетической, так и с точки зрения доступности:

Погнали на страницу игры. Первое, что бросается в глаза — это вот этот зелёный квадратик кнопки покупки внутри квадратика с ценой. Максимально странное решение как по лейауту, так и по цветовой гамме.

Можно же было целиком сделать этот блок зелёной кнопкой покупки, например.

А вот элементам отзывов не хватает какой-то целостности. Как-то всё разорвано; особенно надпись XX people found this review helpful ощущается оторванной от отзыва, будто и не к нему принадлежит:

Кнопки голосования Yes/No выглядят чужеродными здесь — у них внезапно, в отличие от всего остального, что есть в блоке с отзывами, есть фон. Причём им катастрофически не хватает воздуха, иконки прямо упираются в границы элементов.

Из-за того, что этот блок нарушает принцип повторения, в нём нет перекликающихся элементов. Он не воспринимается как нечто единое целое, а как набор отдельных, не связанных друг с другом элементов.

Как уже говорили, в корзине не хватает возможности удаления товара. Но я допускаю, что ты подразумевал этот функционал по аналогии с магазином — удаление по свайпу. Но в таком случае стоило бы это изобразить

Неплохим решением было сделать покупку гифта в виде свитча.

Можно было бы ещё докопаться до того, что в корзине есть айтим со скидкой, но итоговая цена показана без скидки, но ладно уж 😀

А вот что я совсем не понял, так это вот этого дизайна «невидимого» прогрессбара прогресса ачивментов:

Полоска же совсем не контрастирует с фоном, вообще нифига не видно, есть там какой-то прогресс или нет. Очень плохое решение.

А вот чего очень не хватает в библиотеке, так это строчки с поиском. Одной сортировкой ты не обойдёшься всё-таки.

А ещё всё очень плотно, прям не хватает воздуха — особенно картинки будто сплошным вертикальным массивом идут.

Честно говоря, профиль не понравился вообще 🙁

Страница выглядит как что-то, сделанное программистом для своего стартапа. Как у этих ребят примерно... Вот прям плохо 🙁

Решение сделать навигацию по страницам типа активность/комменты/скрины и т.д. как часть страницы и не иметь к нему быстрого доступа — очень странное:

При таком лейауте мне при просмотре активности, чтобы перейти в, например, скриншоты, придётся сначала прокрутить эту активность обратно наверх, и там тыкнуть в скрины. В текущем лейауте стима оба раздела всегда доступны в боковом меню.

Вот такие вот «боковые» кнопки ещё могут существовать в каком-нибудь десктопном варианте, но в мобильном им точно не место, их нужно менять на что-то более крупное и доступное (см.скрин актуальной версии ниже):

В общем, текущий вид профиля, который просто является мобильной адаптацией десктопного вида (хелоу респонсив), мне нравится намного больше. Он аккуратный.

Но я согласен с тем, что профили сейчас можно сделать трёхкилометровыми, и их можно будет листать три дня, поэтому какие-то горизонтальные разделы сделать было бы неплохо в мобильном (да и десктопном тоже) виде.

Я бы скорее поставил 👎 этому проекту, потому что уж слишком много недочётов, а где-то и прям косяков. В релиз я бы точно такое не пустил.

Основных проблем две, на мой взгляд:

Есть и неплохие идеи, но, к сожалению, то ли не туда смотрел, то ли слишком поздно уже, но большей частью не увидел, какие существующие проблемы решает этот редизайн. Воспринимается он как редизайн ради редизайна, а оттого выглядит ещё слабее.

Но, повторюсь — приятно видеть прогресс. По сравнению с прошлогодним редизайном мобильного EGS он прям очевидный. Rock on 🤘

#рандомное #фидбек #дезигн #отзыв #дизайн #steam #мобильный #mobile