Исправляем типографику в Steam
Похоже, что астрологи объявили неделю Гейба и количество постов о редизайне Стима удвоилось. Тем не менее хочу рассказать и показать наглядно простую идею: с помощью базовых правил типографики можно решить множество проблем в интерфейсе.
Предисловие
В очередной раз открыв Стим я, почему-то, взглянул на интерфейс именно с точки зрения дизайна, которым занимаюсь довольно давно. Увидел очевидные ошибки и тут же сел в редактор, чтобы просто попробовать их быстро и эффективно исправить. Но начать нужно, конечно же, с анализа.
Текущие проблемы
При регулярной работе с интерфейсом Steam становится очевидно, что необходим полный редизайн архитектуры приложения. Однако зачастую даже самое простое применение базовых правил типографики может повысить скорость и удобство работы в системе. Для начала разберём основные и самые явные проблемы текущего дизайна Steam.
Верхний и нижний бар навигации
Используются слишком маленькие и неконтрастные пункты верхнего меню, а в главном меню, напротив, все пункты набраны прописными буквами — все это здорово мешает читаемости. Помимо этого текущий выбранный пункт выделен не слишком очевидно, а всем пунктам недостает индикации выпадающего списка:
Посмотрим на список игр
Здесь полная каша: кнопки и иконки малого того, что разного размера, так еще и разного стиля. Унифицируем все кнопки и иконки, а настройки фильтрации и сортировки прячем под единой кнопкой:
Элементы управления игрой
Здесь у нас кнопки управления игрой разнесены по разным частям экрана, во всем блоке используются иконки разных стилей, а контрастность горизонтального блока с ссылками оставляет желать лучшего. А еще все подзаголовки в блоке (как и много где еще) набраны прописными буквами, для этого нет причин. Приведем все в порядок: сконцентрируем все управление в левой части блока, унифицируем иконки, приведем в порядок контрастность текста:
Собираем юай-кит
Всю текущую неаккуратность и неразбериху в Стиме можно, на самом деле, решить очень просто: за счет выстроенного юай-кита (про дизайн-систему мы еще даже не заикаемся, тут далеко). Соберем все наши решения в набор стилей текста, иконок и кнопок, в дальнейшем сможем быстро или переработать что-то или вообще собрать новые экраны для новых разделов:
Результат
С помощью простых действий можно очень быстро построить иерархию и консистеность всех элементов интерфейса. Пользователь (а это вы и я) меньше ломает голову, пытаясь рассмотреть текст или догадаться о значении кнопок — а это и есть наша цель.
Напишите в комментариях — стало лучше или нет? Я не касался здесь (только если чуть-чуть) UX, так как его проектирование займет год исследований и понимания глубинных проблем и решений. Короче, напиши мне, норм или не?
Имхо, стало только хуже. Зачем делать контрастный цвет текста на редкоюзаемых кнопках? (Воркшоп и прочее) Теперь вместо одной большой кнопки плей, выделяются другие. Кнопкам сверху ты убрал капслок, зачем? Это основный кнопки, в чем магия сделать их менее заметными? Так же с синей кнопкой инсталл/плей.
В общем не понял я твоих претензий и изменений, что-то уровня апдейта недавнем в дискорде, подсветим не нужное, уберем воздух, выведем малоюзаемое и вуаля, все просят бэкнуть.
В чем магия капслока?
То же с Play, огромная выделяющаяся кнопка на сером фоне.
Контрастный цвет текста на любых активных кнопках (и вообще элементах управления) — хорошо. Человек должен иметь возможность прочитать текст на любом элементе управления без лишних проблем. То, что они используются реже, чем кнопка запуска игры или табы в верхнем меню, можно прекрасно показать, сделав у них разные размеры, не жертвуя контрастностью.
Кнопка плэй никуда не делась, а все кнопки, имеющие отношение к игре, теперь стоят рядом. Если я хочу поиграть в игру — очевидно, где это сделать. А если я хочу удалить игру — я почему-то должен идти в самый правый угол и искать это действие там. Почему? По акцентам так же очевидно, какие из этих кнопок второстепенные.
Про капслок сверху снизу уже писал — если коротко, то он усложняет читаемость верхнего меню.
Плюсую, хуета.
А еще заменим звездочку в качестве избранного на сердечкоАга, и испортим семантику, ведь теперь люди будут думать, что ставят лайк игре, а не добавляют её в избранное.
настройки фильтрации и сортировки прячем под единой кнопкойЁбаные бутерброды из веб-дизайна понемногу перебираются в настольные приложения. Почитай про импакт подобных решений, юзеры это не одобряют, если там больше 2 кликов до функции - сложно.
очень просто: за счет выстроенного юай-китаГде-то я уже видел этот ю а й к и т. Чем текущая кнопка "скачать" (которая синяя) хуже той, что ты сделал? Она как-то даже получше, чем твой бутстрап-стайл.
На твоём скриншоте такая же каша, как и сейчас в стиме. Это субъективный взгляд со стороны. Мне кажется, у приложения стима не со шрифтами проблема, а с композицией всего вообще.
1. И в чем же существенная разница между избранным и лайком? Чем список лайков не равен списку избранного? Почему то, что я поставил лайк игре не равно тому, что я выделяю эту игру и добавляю ее в некий отдельный список?
2. Я перенес все родственные элементы (фильтрация и сортировка) в одно подменю, они и так были, но два разных по размещению, но одинаковых по сути.
3. Юай-кит это же не уникальная штука, особенно сегодня. Юай-кит — централизованное хранение элементов интерфейса, только и всего.
У Стима уже есть лайки в виде положительных отзывов, поэтому никто его с сердечком не перепутает.