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

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

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

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

Уменьшение когнитивной нагрузки

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

Удаление ненужного

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

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

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

• Используйте технику прогрессивного раскрытия, чтобы показать больше вариантов.

Уменьшение количества задач

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

Разбейте большие задачи на более мелкие

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

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

ИСПОЛЬЗУЙТЕ ПОДОБНЫЕ ЭКРАНЫ

Подобные экраны - это экраны, которые пользователи видят во многих приложениях. Такие экраны, как «Начало работы», «Что нового» и «Результаты поиска», стали стандартами де-факто для мобильных приложений. Они не требуют дополнительного объяснения, потому что пользователи уже знакомы с ними. Это позволяет им использовать предыдущий опыт для взаимодействия с приложением, без дополнительного обучения.

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

• Делайте формы как можно короче, удалив ненужные поля. Приложение должно запрашивать у пользователя только минимум информации.

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

• Используйте интеллектуальные функции, такие как автозаполнение. Например, заполнение поля адреса часто является наиболее проблематичной частью любой регистрационной формы. Использование такого инструмента, как Place Autocomplete Address Form (который использует как геопозиционирование, так и предварительное заполнение адресов для предоставления точных предложений на основе точного местоположения пользователя), позволяет пользователям вводить свой адрес с меньшим количеством нажатий клавиш, чем при обычном вводе.
• Динамическая проверка значения полей. Досадно, когда после отправки данных вам нужно вернуться и исправить ошибки. По возможности проверяйте значения полей сразу после ввода, чтобы пользователи могли сразу их откорректировать.

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

УКАЗАТЬ ДАННЫЕ ПОТРЕБИТЕЛЕЙ

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

Не всегда ясно, где пользователь может найти штрих-код. Краткий справочный текст рядом с полем ввода будет очень полезен. (Источник изображения: Hotjar)

ИСПОЛЬЗУЙТЕ ВИЗУАЛЬНЫЙ РАЗМЕР ДЛЯ ВАШЕГО ЗНАЧЕНИЯ

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

Большие предметы бросаются в глаза и кажутся более важными, чем мелкие. Кнопка «Запросить Lyft» привлечет внимание пользователей.

ИЗБЕГАЙТЕ ЖАРГОНА

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

Неизвестные термины или фразы увеличивают когнитивную нагрузку для пользователя. (Источник изображения: ThinkWithGoogle)

СДЕЛАЙТЕ КОНСУЛЬТАНТ ДИЗАЙНА

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

• Визуальная согласованность

Поверхности, кнопки и ярлыки должны быть согласованы в приложении.

• Функциональная согласованность

Интерактивные элементы должны работать одинаково во всех частях вашего приложения.

• Внешняя согласованность

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

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

• Уважайте правила платформы.

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

• Не иммитируйте элементы пользовательского интерфейса с других платформ.

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

• Храните мобильное приложение в соответствии с веб-сайтом.

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

СОХРАНЯЙТЕ ИНТЕРАКТИВНЫЕ ЭЛЕМЕНТЫ

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

КНОПКА «НАЗАД» ДОЛЖНА РАБОТАТЬ ПРАВИЛЬНО

Неправильно созданная кнопка «назад» может вызвать множество проблем для пользователей. Многократное нажатие кнопки «назад» в многоэтапном процессе приведет к возврату на главный экран.

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

СООБЩЕНИЯ ОБ ОШИБКАХ

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

В качестве примера возьмем экран состояния ошибки из Spotify. Он не может помочь пользователям понять контекст и найти ответ на вопрос: «Что я могу сделать с этим?»

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

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

Дизайн доступного интерфейса

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

ПОЗАБОТЬТЕСЬ О ЦВЕТОРАЗДЕЛЕНИИ

4,5% мирового населения страдают от цветной слепоты (это 1 из 12 мужчин и 1 из 200 женщин), 4% страдают от низкого зрения (1 из 30 человек), а 0,6% - слепые (1 из 188 человек). Не забывайте, что мы проектируем и для этой группы пользователей.

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

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

НЕОБХОДИМЫЕ АНИМАЦИИ

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

Сделайте навигацию простой

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

ИСПОЛЬЗУЙТЕ СТАНДАРТНЫЕ НАВИГАЦИОННЫЕ КОМПОНЕНТЫ

Лучше всего использовать стандартные шаблоны навигации, такие, как панель вкладок (для iOS) и навигационный ящик (для Android). Большинство пользователей знакомы с обоими шаблонами навигации и будут интуитивно знать, как работать в вашем приложение.