Простые рекомендации при разработке дизайна для мобильных устройств

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

UniwexSoft — разрабатываем уникальные сайты, smart-контракты, мобильные приложения в сфере Blockchain, собираем IT-отделы под ключ для реализации вашего проекта, заменим CTO или сильно облегчим ему жизнь.

Если вам нужен сайт, мобильное приложение, NFT маркетплейс или крипто игра, напишите нам.

Три типа мобильных менталитетов в дизайне мобильных устройств

Джош Кларк, автор книги “Tapworthy: Designing Great iPhone Apps“, описывает три типа мобильных менталитетов:

• “Я микрозадачник“: Когда пользователь взаимодействует со своим устройством в течение коротких, но бешеных периодов активности. Подумайте о том, как можно удовлетворить пользователей, которые торопятся. Сделайте часто повторяющиеся задачи максимально эффективными.
• “Я местный“: Когда пользователь хочет знать, что происходит вокруг него. Используйте преимущества датчиков мобильных устройств, таких как местоположение, ориентация устройства и окружающее освещение, чтобы персонализировать опыт там, где это необходимо (и, конечно же, с разрешения пользователя!).
• “Мне скучно“: Когда пользователь хочет развлечься, не ограничивайтесь функциями, ориентированными на решение конкретных задач. Что вы можете предложить пользователям, когда они неторопливо просматривают страницы?

Еще пара дополнительных типов

Мы можем добавить еще несколько категорий, появившихся с тех пор, как Джош написал эту книгу в начале эры смартфонов:

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

Уважение к фокусу

В этой последней категории Microsoft предлагает набор рекомендаций под названием “Уважение к фокусу“.

Они подразделяются на пять основных областей:

1. Понимание срочности и носителя: Технологии передают информацию различными способами: всплывающими окнами, мигающими лампочками, звуками и вибрациями. Все ли они необходимы? Сопоставьте срочность уведомления со срочностью сообщения.
2. Адаптация к поведению клиента: Со временем поведение клиента при взаимодействии с каждой функцией или частью вашего сервиса будет меняться.
3. Адаптация к контексту: Мы все фокусируемся, фильтруем и потребляем информацию уникальным образом. Мы отфильтровываем разную информацию. Эти предпочтения и возможности могут быстро меняться в зависимости от контекста. В связи с этим меняется и взаимодействие человека с каждой функцией или частью опыта. Может ли ваша система учиться на примере взаимодействия с людьми и изменять способы взаимодействия?
4. Дайте клиенту возможность адаптироваться: Личный опыт должен подходить каждому человеку. Настраиваемые функции помогают потребителю почувствовать себя хозяином положения и контролировать свои устройства. Многие оповещения на компьютерах сегодня трудно отключить или выключить. Если несколько приложений одновременно посылают оповещения, это может привести к чрезмерной нагрузке. Более совершенные системы позволяют пользователям контролировать тип и время оповещений.
5. Снижение психологических затрат: Впечатления выходят за пределы экранов, вовлекая и погружая человека в мир чувств. Каждое из этих новых взаимодействий создает новые потенциальные точки трения.

Основные аспекты дизайна для мобильных устройств

Маленькие экраны

У мобильных устройств не так много площади экрана, как у ПК и ноутбуков. Это означает, что обычно приходится разрабатывать дизайн для экранов разных размеров. Помните, что следует ориентироваться на подход “mobile first“, то есть разрабатывать дизайн для самых маленьких мобильных платформ и усложнять его по мере роста сложности.

Оптимальным процессом является следующий:

• Сгруппируйте типы устройств по схожим размерам экранов и постарайтесь, чтобы эти группы не превышали допустимый размер.
• Определите правила адаптации контента и дизайна, которые позволят вам сделать чистый макет на каждой группе устройств.
• Максимально придерживаться веб-стандартов (W3, Material Design и т.д.).

Установите приоритет основной задачи

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

Считайте это мерой срочности задачи.

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

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

Сохраняйте простоту навигации

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

Поэтому постарайтесь воплотить в дизайн для мобильных устройств следующее:

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

• Убедитесь, что ссылки визуально различимы, и дайте понять, что пользователи активизировали их.
• Обеспечьте простоту “перехода” между мобильным и настольным сайтами и по возможности сохраняйте преемственность задач на разных устройствах.
• Предлагайте навигационные ссылки в нижнем колонтитуле страницы (если это мобильный сайт), а также функцию “возврата к началу“. Эта функция помогает снизить усталость от прокрутки, так как пользователям не нужно прокручивать страницу до самого верха. Кроме того, устройствам чтения с экрана (для незрячих пользователей) необходимы повторяющиеся ссылки нижнего колонтитула, чтобы у них был путь вперед.
• Убедитесь, что “гамбургер-меню“ (значок меню с тремя горизонтальными линиями) визуально различимы (не предполагайте, что пользователи знают, что это такое). Используйте соответствующие атрибуты ARIA для идентификации гамбургер-меню с целью обеспечения доступности.

Были проведены различные исследования доступности дизайна отображения меню (гамбургера) для мобильных устройств. Исследование, проведенное разработчиком Джеймсом Фостером, показало, что словесное меню с рамкой имеет гораздо более высокий коэффициент конверсии, чем меню без рамки, и это без гамбургера!

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

Особенно в мобильных играх можно найти хорошее применение гамбургер-меню, однако следует помнить об их сильных и слабых сторонах.

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

Сведите содержание дизайна для мобильных устройств к минимуму

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

Сократите количество необходимых действий со стороны пользователя

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

Рассмотрим, как это сделать:

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

Помните, что мобильные соединения не являются стабильными

Мобильные соединения могут стать огромной проблемой в районах с нестабильной связью. Не усложняйте жизнь пользователям.

Постарайтесь:

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

Непрерывный интегрированный опыт

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

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

Вывод из статьи Дизайн для мобильных устройств в 2023 году

Мобильная версия отличается от традиционной настольной.

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

Статья переведена на русский язык компанией UniwexSoft.

UniwexSoft — разрабатываем уникальные сайты, smart-контракты, мобильные приложения в сфере Blockchain, собираем IT-отделы под ключ для реализации вашего проекта, заменим CTO или сильно облегчим ему жизнь.

Если вам нужен сайт, мобильное приложение, NFT маркетплейс или крипто игра, напишите нам.

Дополнительные материалы по теме Дизайн для мобильных устройств в 2023 году