В мае минувшего года Google объявили что поисковый трафик с мобильных устройств наконец превысил трафик со стационарных компьютеров. Это произошло впервые. Мобильные устройства теперь являются форматом по умолчанию для большинства пользователей.

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

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

Ограничьте количество вводимого текста

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

Даже пользователи с большими экранами во время ввода чувствуют себя менее комфортно чем пользователи ПК. Сократить количество вводимого текста можно различными способами.

• Альтернативные методы ввода информации, такие как слайдеры, выпадающие меню и пр.
• Авторизация по протоколу OAuth

Реальный пример: Приложение Uber потрясающе решили вопрос с вводом адреса. Приложение определяет местонахождение пользователя по GPS и затем просят отметить место их проживания. Это позволяет пользователям намного быстрее забронировать поездку.

Текстовые элементы интерфейса

Текстовые элементы в мобильном интерфейсе должны быть сведены к минимуму. Заменяйте их иконками. К примеру, вы можете использовать иконку мусорного ведра вместо надписи «Delete» и т. д. Однако важно помнить что иконки должны быть одинаковы во всем приложении и, конечно, предельно понятны пользователю.

Реальный пример: Приложение iOS's Photos использует иконки и текстовые элементы в идеальной пропорции. Символы Delete, Like и Share одинаковы во всем UI, их значение ясно любому пользователю, даже если он впервые видит приложение.

Переходы между экранами

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

Такое расположение поможет пользователям быстрее переключаться между разными частями приложения.

Chrome в iOS позволяет «листать страницы» при помощи большого пальца, выполняя по соответствующим жестам команды Вперед и Назад.

Реальный пример: В приложении Twitter кнопки перемещения расположены в нижней части экрана. Это помогает большому пальцу быстро достичь таких «направлений» как Home, Notifications, Messages и Me. Если бы кнопки располагались наверху, сделать это было бы сложнее.

Больше всегда хуже

Дизайн UI/UX для мобильных устройств в целом должен быть минималистичным, и экран не должен быть переполнен. Тяжелая анимация вообще не рассматривается.

В современных философиях дизайна, таких как Google's Material Design, основной акцент делает на минималистичный подход. На целевой странице приложения пользователь получает первое впечатление и перенасыщенный UI может дезориентировать и снизить шансы на продолжение.

Реальный пример: Google Inbox сделали отличную работу, применив шаблон Material Design, сохранив простоту и интуитивно-понятный UI. Экран не становится перенасыщенным, переходы плавные, и вы видите интересную картинку, когда ящик пуст. Несмотря на упрощенный UI, у пользователей не возникает проблем с поиском необходимого функционала.

Итоги

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

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

Автор урока Tanay Pant

Перевод — Дежурка

Смотрите также:

• Дизайн для различных состояний страниц приложений
• Как стандарты расположения кнопок влияют на привычки пользователей
• Как найти и исправить проблемы с юзабилити