Критика в четверг: экран на стене, четверо вокруг
Критика макетов, четверг, полчаса
Дизайнер Цель на первом слайде: человек доходит до сохранённого фильтра, ни разу не открыв настройки. Вариантов два.
Второй дизайнер Первое, что мешает, — вес. На левом всё набрано одинаково, глаз начинает с верхнего угла и сдаётся.
Дизайнер Строка нажимается по всей длине, в этом и был смысл.
Второй дизайнер Нажимается — да, а сказать об этом некому. Поставь шеврон или тень. Пока единственная подсказка — та, что у тебя в голове.
Разработчик На правом варианте человеку сразу подсовывают три незнакомые вещи. Для первого запуска это много.
Дизайнер Тогда продвинутое прячем и достаём по просьбе, а на входе оставляем два пункта.
Редактор На главной кнопке написано «Сохранить и продолжить», а экран только сохраняет. Кто-нибудь заведёт на это баг.
Второй дизайнер И почему это окно поверх всего. Оно закрывает тот самый перечень, который человек фильтрует: он закроет окно, чтобы посмотреть, и потеряет форму.
Дизайнер Значит, панель снизу. Перечень остаётся за ней.
Разработчик У крестика зона нажатия двадцать четыре пункта. Растяну область, рисунок оставлю как есть.
Редактор И на пустом экране сейчас стоит «Тут ничего», хотя это первое, что видит новый человек.
Второй дизайнер Последнее, и я назову вещи своими именами: галочка внизу проставлена заранее — это тёмный паттерн. Снимай или убирай совсем.
Дизайнер Снимаю. Панель снизу, шеврон, две строки на пустом экране — в четверг приношу снова.
Полчаса, четверо, один экран. Каждая фраза в комнате — про вещь, у которой есть имя, и именно имена отделяют разбор работы от разговора о вкусах.
Критика идёт от того, что делает глаз, к тому, чего экран требует от человека
Начинают с разглядывания: вес, размер, видно ли вообще, что тут можно действовать. Потом переходят к нагрузке: сколько человека просят держать в голове разом и что подождёт. Кончается всё там, где неловкий интерфейс становится нечестным.
Критика макетовDesign critique
Встреча, где дизайнеры дают обратную связь по заявленным целям работы, а не по личному вкусу.
Несём на критику макетов в четверг, первым слайдом — формулировка задачи.
Встреча, ради которой всё и затевается, и причина, по которой это ремесло, а не круг мнений. Потеряли из виду цель работы — её место занимает вкус.
Визуальная иерархияVisual hierarchy
Расстановка размеров, насыщенности и пустот, которая говорит глазу, что читать первым.
Визуальная иерархия плоская, всё кричит одинаково громко.
На неё реагируют первой и почти никогда не зовут по имени. «Пёстро» и «перегружено» — про неё, сказанное тем, у кого нет для неё слова.
АффордансAffordance
Свойство объекта, которое делает действие возможным; в интерфейсе — то, что элемент позволяет с ним сделать.
Аффорданс нажатия у всей строки целиком, а не только у шеврона в конце.
Что вещь на деле позволяет с собой сделать — догадается об этом человек или нет. Половина споров в комнате из-за того, что его путают с намёком на него.
СигнификаторSignifier
Видимая подсказка — тень, стрелка, подпись, — которая говорит, где и как можно действовать.
Тут нужен сигнификатор: шеврон, тень, хоть что-то, что намекает на движение.
Вторая половина того же спора, и та, которую забывают нарисовать. Кнопка бывает безупречно нажимаемой и совершенно незаметной.
Когнитивная нагрузкаCognitive load
Сколько думать приходится за один раз; интерфейс либо добавляет этой нагрузки, либо забирает её на себя.
Три новых понятия на одном экране — слишком большая когнитивная нагрузка.
Причина, по которой формально готовый макет отправляют переделывать. В комнате её никто не меряет, а чувствуют все.
Прогрессивное раскрытиеProgressive disclosure
Показывать только то, что нужно сейчас, а продвинутое открывать тогда, когда человек его попросит.
Продвинутые настройки уберём в прогрессивное раскрытие, а не в одну длинную форму.
Обычный ответ на «сделано верно, но всего сразу многовато». С пряткой путают: одно ждёт, когда попросят, другое надеется, что не заметят.
МодалкаModal
Окно, которое блокирует остальной интерфейс, пока с ним не разберутся.
Три модалки подряд на первом запуске — неудивительно, что люди уходят.
Выбирают её куда чаще, чем защищают этот выбор. Она отнимает у человека то, с чем он пришёл, — потому её и вытесняют.
Боттом-шитBottom sheet
Панель, выезжающая снизу мобильного экрана поверх содержимого, а не вместо него.
Фильтры уберём в боттом-шит, чтобы список оставался виден.
Чем на телефоне и вытесняют. Разница в том, что за этим выбором стоит привычка, а не решение.
Пустое состояниеEmpty state
То, что экран показывает, когда данных ещё нет; часто это первое настоящее впечатление о продукте.
В пустом состоянии написано «Ничего нет», и первый экран потрачен впустую.
С чего большинство начинает знакомство и что команды пишут последним. Целый разговор с новым человеком, а сказано там одно слово.
МикрокопиMicrocopy
Мелкие тексты интерфейса — подписи кнопок, подсказки, сообщения об ошибках, — которые ведут человека.
Микрокопи на этой кнопке обещает то, чего экран не делает.
Самый мелкий текст в продукте и самый обещающий. Когда он расходится с экраном, поддержка узнаёт об этом раньше команды.
Тач-таргетTouch target
Область элемента, по которой можно попасть пальцем; она должна быть достаточно крупной.
Тач-таргет 24 пункта, увеличим зону нажатия, не трогая саму иконку.
Место, где спор о дизайне превращается в измерение, а рисунок при этом можно и не трогать.
Тёмный паттернDark pattern
Интерфейс, обманом ведущий человека к выбору, которого он не хотел: скрытая цена, спрятанная отмена.
Серая мелкая отписка — это тёмный паттерн, и юристы скажут то же самое.
Черта, которую комната ищет, когда замолкает. Нарочно её переходят редко — чаще так выходит из-за метрики, которую попросили слишком твёрдо.
В четверг экран принесут снова
С шевроном, панелью вместо окна и двумя строками там, где была одна. Слова прозвучат те же. Показывать будет тот, кто рисовал.
Вопросы и ответы
А остальные слова про продукт?
На странице колоды, все 150. Здесь двенадцать — те, что прозвучали на одной критике.
Почему два языка на одной странице?
Словарь интерфейсов ездит по миру по-английски, и «аффорданс» нигде толком не перевели. Обе формы стоят на одной карточке.
Откуда взяты определения?
Из колоды «Продукт и UX» — тех же карточек, что и в приложении.
На следующей критике прозвучат другие двенадцать.
В колоде «Продукт и UX» их 150 — в приложении они идут по нескольку в день.
