Лучшие практики мобильного UX дизайна

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

1. Навигационная панель и гамбургерное меню

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

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

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

2. Модальность интерфейса

Помните тот надоедливый экран с предупреждением, который будит вас каждое утро? В дизайне, такое взаимодействие называется модальностью. Модальность, как часть iOS Human Interface Guidelines, играет важную роль при создании диалога интерфейс-пользователь. Этот термин значит, что какое-либо сообщение накладывается поверх экрана приложения, и пользователь, в свою очередь, должен сделать выбор — закрыть его или прочитать. Также, такие сообщения сопровождаются символом «х», нажатие на который закрывают модальное окно. Значок «х» очень важен, так как пользователь должен иметь очевидный вариант закрытия окна. Также, модальность может быть представлена в 4 вариантах:

  • Полноэкранная модальность (покрывающая весь экран)
  • Страничная модальность (частично закрывающая экран)
  • Формальная модальность (расположенная по центру экрана)
  • Контекстная модальность (закрывающая область интересующего контента)

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

Вот пример того, как нужно применять модальные окна в мобильном UX дизайне:

Еще одна рекомендация: не делайте свои модальные окна слишком навязчивыми — пользователь может отключить их навсегда. Далее: http://uxgu.ru/mobile-ux-best-practices/

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.