Как проектировать нестандартные UI-решения без ущерба для юзабилити

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

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

Отойдите от этих стандартных шаблонов, и вы выйдете за рамки типовых решений. Ваши данные, панели навигации и табличные списки не будут ограничены фиксированной структурой.

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

Раскрывайте информационные слои

Стандартные UI-шаблоны — это отображение данных в простом, линейном виде. К примеру, на картинке мы видим название салата, а ниже перечислены все ингредиенты. Пользователь может прочитать этот текст и сделать заказ. Однако подобное линейное представление данных не дает должного эффекта, поскольку не раскрывает более глубокие информационные слои.

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

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

Первоначально все опции отображались в виде списка во вкладке “Салаты”. Но мы можем сделать UX насыщеннее, если раскроем более глубокие информационные слои. Вместо того чтобы показывать стандартный список, можно выделить "Самые популярные" или "Сезонные" салаты. Раскрытие этого информационного слоя позволит пользователям делать более обдуманный выбор, опираясь на представленные детали.

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

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

Обратите внимание: все эти информационные слои существуют, хотя и скрыты в стандартных UI-шаблонах. Новый дизайн делает их видимыми, благодаря чему UX получается более насыщенным.

Откажитесь от табличных списков

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

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

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

Кроме того, мы видим совершенно другую структуру. Вертикальный список меняется на горизонтальный. Благодаря такому динамическому расположению пользователи видят самые популярные салаты иначе, чем сезонные. Это позволяет сделать акцент на их различиях и привлекает внимание аудитории к уникальным информационным слоям.

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

Откажитесь от панели навигации

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

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

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

Отходите от стандартных UI-решений

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

Спросите себя, является ли стандартное решение наиболее подходящим для вашего контента и данных. Каким образом можно раскрыть более глубокие информационные слои? Как сделать лейаут более органичным и менее статичным? Другими словами, направьте свои усилия на создание насыщенного опыта взаимодействия и не соглашайтесь на меньшее.