Исправляем типографику в Steam

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

Исправляем типографику в Steam

Предисловие

В очередной раз открыв Стим я, почему-то, взглянул на интерфейс именно с точки зрения дизайна, которым занимаюсь довольно давно. Увидел очевидные ошибки и тут же сел в редактор, чтобы просто попробовать их быстро и эффективно исправить. Но начать нужно, конечно же, с анализа.

Текущие проблемы

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

<i>Нет никакой системности в элементах управления, а общая контрастность текста слишком низкая, это попросту неудобно читать</i>
Нет никакой системности в элементах управления, а общая контрастность текста слишком низкая, это попросту неудобно читать

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

<i>​И еще разберемся с кашей справа сверху: приведем ее к привычному по многим другим приложениям виду</i>
​И еще разберемся с кашей справа сверху: приведем ее к привычному по многим другим приложениям виду

Посмотрим на список игр
Здесь полная каша: кнопки и иконки малого того, что разного размера, так еще и разного стиля. Унифицируем все кнопки и иконки, а настройки фильтрации и сортировки прячем под единой кнопкой:

<i>Мне было лень искать все иконки для всех игр или ачивок, поэтому пусть будут цветные квадратики</i>
Мне было лень искать все иконки для всех игр или ачивок, поэтому пусть будут цветные квадратики

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

<i>​А еще заменим звездочку в качестве избранного на сердечко, ведь мы же люди, а значит игра может попасть в самое сердечко</i>
​А еще заменим звездочку в качестве избранного на сердечко, ведь мы же люди, а значит игра может попасть в самое сердечко

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

<i>Работа с текстом и консистентность — наше все, позволяет решать многие проблемы без масштабного редизайна</i>
Работа с текстом и консистентность — наше все, позволяет решать многие проблемы без масштабного редизайна

Результат

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

Напишите в комментариях — стало лучше или нет? Я не касался здесь (только если чуть-чуть) UX, так как его проектирование займет год исследований и понимания глубинных проблем и решений. Короче, напиши мне, норм или не?

173173
202 комментария

Имхо, стало только хуже. Зачем делать контрастный цвет текста на редкоюзаемых кнопках? (Воркшоп и прочее) Теперь вместо одной большой кнопки плей, выделяются другие. Кнопкам сверху ты убрал капслок, зачем? Это основный кнопки, в чем магия сделать их менее заметными? Так же с синей кнопкой инсталл/плей.

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

108
Ответить

В чем магия капслока? 
То же с Play, огромная выделяющаяся кнопка на сером фоне. 

11
Ответить

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

Кнопка плэй никуда не делась, а все кнопки, имеющие отношение к игре, теперь стоят рядом. Если я хочу поиграть в игру — очевидно, где это сделать. А если я хочу удалить игру — я почему-то должен идти в самый правый угол и искать это действие там. Почему? По акцентам так же очевидно, какие из этих кнопок второстепенные.

Про капслок сверху снизу уже писал — если коротко, то он усложняет читаемость верхнего меню.

2
Ответить

Плюсую, хуета.

1
Ответить

 ​А еще заменим звездочку в качестве избранного на сердечкоАга, и испортим семантику, ведь теперь люди будут думать, что ставят лайк игре, а не добавляют её в избранное.
 настройки фильтрации и сортировки прячем под единой кнопкойЁбаные бутерброды из веб-дизайна понемногу перебираются в настольные приложения. Почитай про импакт подобных решений, юзеры это не одобряют, если там больше 2 кликов до функции - сложно.
очень просто: за счет выстроенного юай-китаГде-то я уже видел этот ю а й к и т. Чем текущая кнопка "скачать" (которая синяя) хуже той, что ты сделал? Она как-то даже получше, чем твой бутстрап-стайл.

На твоём скриншоте такая же каша, как и сейчас в стиме. Это субъективный взгляд со стороны. Мне кажется, у приложения стима не со шрифтами проблема, а с композицией всего вообще.

41
Ответить

1. И в чем же существенная разница между избранным и лайком? Чем список лайков не равен списку избранного? Почему то, что я поставил лайк игре не равно тому, что я выделяю эту игру и добавляю ее в некий отдельный список?
2. Я перенес все родственные элементы (фильтрация и сортировка) в одно подменю, они и так были, но два разных по размещению, но одинаковых по сути.
3. Юай-кит это же не уникальная штука, особенно сегодня. Юай-кит — централизованное хранение элементов интерфейса, только и всего.

1
Ответить

У Стима уже есть лайки в виде положительных отзывов, поэтому никто его с сердечком не перепутает.

1
Ответить