Обучение ui/ux дизайну

Мобильный UX дизайн: главные принципы

Главное, что необходимо иметь в виду при создании мобильного приложения — это убедиться, что оно одновременно и интуитивное, и полезное.

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

Качественный дизайн UI решает эти проблемы:

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

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

1. Устраните беспорядок

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

Мобильный UX дизайн: главные принципы

Беспорядок – это очень плохо для веб-сайтов и десктопного приложения, тем не менее, на мобильном устройстве все в сотни раз хуже.

Есть известная цитата Антуана де Сент-Экзюпери: «Совершенство достигается, если уже нечего отнять» В современном мобильном дизайне необходимо быстро избавляться от всего, что не обладает первостепенной необходимостью. Существенное снижение беспорядка обязательно улучшит понимание пользователя.

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

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

Мобильный UX дизайн: главные принципы

Одно из главных правил качественного UX — это сокращение прилагаемых пользователем усилий для достижения конкретных целей.

2. Сделайте навигацию самоочевидной

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

1-jgedy6hwyby9ohjeawf3sg

Вот главные принципы качественной мобильной навигации:

  • Мобильная навигация обязательно должна быть последовательной. Чтобы навигация не требовала каких-то объяснений вам нужно использовать правильные признаки (то есть, правильные визуальные метафоры), а также хорошо убедиться, что каждый элемент навигации (к примеру, значок), ведет к необходимому месту назначения.
  • Мобильная навигация обязательно должна быть плотной. Не перемещайте различные элементы навигации на новое место, а также не скрывайте их на разных страничках. Это просто дезориентирует пользователей.
  • Мобильная навигация должна уведомлять о текущем местоположении. Невыполнение данного условия, наверное, наиболее частая ошибка, которую допускают в меню. «Где я?» Является одним из главных вопросов, на который пользователь должен быть в состоянии ответить, чтобы быстро и успешно ориентироваться.

3. Создайте бесшовный опыт

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

Мобильный UX дизайн: главные принципы

Возьмите, к примеру, Apple Music. Вы можете создать на Mac плейлист, и он сразу станет полностью доступен на вашем iPhone. Компания Apple хорошо понимает, что хотя дизайн мобильной программы важен, создание бесшовного опыта на iPhone, IPad и десктопе так же важно для пользователя.

4. Применяйте правильные размеры целей нажатия (тэп таргеты)

По маленьким тэп таргетам сложнее попасть, нежели по большим. При разработке мобильного интерфейса тэп таргеты желательно делать достаточно большими, чтобы по ним можно было проще попасть.

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

Мобильный UX дизайн: главные принципы

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

Вдобавок, убедитесь в том, что между тэп таргетами есть достаточно свободного места.

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

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

Главное правило современных мобильных устройств гласит: размер текста должен быть не меньше 11, чтобы его можно было разобрать на стандартном расстоянии без увеличения.

Мобильный UX дизайн: главные принципы

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

Мобильный UX дизайн: главные принципы

В хорошем пользовательском интерфейсе всегда есть достаточно места.

6. Все элементы интерфейса должны быть хорошо видны

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

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

  • У небольшого текста коэффициент контрастности должен быть не меньше 4,5: 1 к его фону.
  • Крупный текст (14 пт жирным шрифтом, 18 пт обычным, и больше) должен иметь коэффициент контрастности не меньше 3:1 к его фону.

Мобильный UX дизайн: главные принципы

Текст, который не соответствует данным рекомендациям читать довольно сложно.

Немаловажно использовать достаточно контраста: пользователь может находиться на улице, с весьма низкой контрастностью из-за освещения.

Мобильный UX дизайн: главные принципы

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

Иконки и прочие важные элементы также должны использовать указанные выше показатели контрастности.

Мобильный UX дизайн: главные принципы

Иконки, которые не используют рекомендации соотношения контраста сложно различить на фоне.

7. Создайте управление, которое будет основано на расположении руки

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

Мобильный UX дизайн: главные принципы

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

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

Мобильный UX дизайн: главные принципы

8. Снизьте потребность в наборе текста

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

Мобильный UX дизайн: главные принципы

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

Мобильный UX дизайн: главные принципы

9. Протестируйте свой дизайн

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

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

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

Вывод

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

Перевод

Понравилось? Расскажите друзьям:






Комментарии:

(напишите, что вы думаете об этом)