При разработке дизайна для мобильных устройств необходимо учитывать множество факторов. Мы уверены, что это подробное руководство избавит вас от головной боли при создании приложений.
Сегодня более чем когда-либо люди взаимодействуют со своими телефонами в критические моменты. Средний пользователь из США проводит 5 часов в день за мобильным телефоном. Подавляющее большинство этого времени тратится на приложения и на веб-сайты.
Разница между хорошим и плохим приложением обычно заключается в качестве пользовательского опыта (UX). Хороший UX – это то, что отличает успешные приложения от неудачных. Сегодня мобильные пользователи много ожидают от приложения: быстрое время загрузки, простота использования и удовольствие от взаимодействия. Если вы хотите, чтобы ваше приложение было успешным, вы должны считать UX не просто второстепенным аспектом дизайна, но важным компонентом стратегии продукта.
Есть много вещей, которые следует учитывать при разработке мобильных приложений. В этой статье я обобщил множество практических рекомендаций, которые вы можете применить к своему дизайну.
Минимизируйте когнитивную нагрузку
Когнитивная нагрузка относится к количеству умственных способностей, необходимых для использования приложения. Человеческий мозг имеет ограниченную вычислительную мощность, и когда приложение одновременно предоставляет слишком много информации, оно может ошеломить пользователя и заставить его отказаться от выполнения этой задачи.
Наведение порядка
Избавление от беспорядка – одна из главных рекомендаций статьи «10 Do’s and Don’ts of Mobile UX Design». Беспорядок – один из худших врагов хорошего дизайна. Загромождая интерфейс, вы перегружаете пользователей слишком большим объемом информации: каждая добавленная кнопка, изображение и иконка усложняют экран.
Беспорядок на ПК ужасен, но на мобильном устройстве он намного хуже (просто потому, что у нас не так много полезного пространства экрана, как на ПК и ноутбуках). В мобильном дизайне важно избавиться от всего, что не является абсолютно необходимым, потому что уменьшение беспорядка улучшит понимание. Техника функционального минимализма может помочь вам решить проблему загроможденного пользовательского интерфейса:
- Сократите контент до минимума (предоставьте пользователю только то, что ему нужно знать).
- Сохраняйте минимум элементов интерфейса. С простым дизайном пользователю легче взаимодействовать с продуктом.
Чистая панель вкладок (справа) намного лучше, чем загроможденная (слева). (Изображение: Apple)
- Используйте метод прогрессивного раскрытия, чтобы показать больше вариантов.
Интерфейс показывает больше возможностей после взаимодействия. (Изображение: Ramotion)
Упрощайте задачи
Ищите в дизайне все, что требует усилий пользователя (это может быть ввод данных, принятие решения и т. д.), и ищите альтернативные пути. Например, в некоторых случаях вы можете повторно использовать ранее введенные данные вместо того, чтобы просить пользователя ввести их повторно, или использовать уже имеющуюся информацию для установки умного значения по умолчанию.
Разбивайте задачи на небольшие куски
Если задача содержит много шагов и действий, требуемых от пользователя, лучше разделить ее на несколько подзадач. Этот принцип чрезвычайно важен в мобильном дизайне, потому что вы не хотите создавать слишком много сложности для пользователя за один раз. Хороший пример – пошаговый процесс оформления заказа в приложении электронной коммерции, когда дизайнер разбивает сложную задачу оформления заказа на куски, каждый из которых требует действий пользователя.
Разбивка задачи делает форму менее загруженной, особенно когда вы запрашиваете у пользователя много информации. (Изображение: Murat Mutlu)
Разделение на блоки также может помочь соединить два разных действия (например, просмотр и покупка). Когда сценарий представлен в виде ряда шагов, логически связанных друг с другом, пользователю может быть легче его выполнить.
Поиск фильма и покупка билетов в кинотеатр. (Изображение: Anton Skvortsov)
Используйте знакомые экраны
Знакомые экраны – это экраны, которые пользователи видят во многих приложениях. Такие экраны, как «Начало работы», «Что нового» и «Результаты поиска», де-факто стали стандартами для мобильных приложений. Они не требуют дополнительных объяснений, потому что пользователи уже знакомы с ними. Это позволяет пользователям использовать предыдущий опыт взаимодействия с приложением без необходимости обучения.
Экран профиля пользователя в приложении Quora
Для получения дополнительной информации о знакомых экранах. Прочтите статью «11 экранов, которые вы найдете во многих самых успешных мобильных приложениях».
Минимизируйте ввод информации пользователем
Набор текста на маленьком мобильном экране – не самое удобное занятие. На самом деле, оно часто подвержено ошибкам. И наиболее распространенным случаем ввода данных пользователем является заполнение формы. Вот несколько практических рекомендаций по упрощению этого процесса:
- Делайте формы максимально короткими, удаляя ненужные поля. Приложение должно запрашивать у пользователя только минимальный объем информации.
Основное правило в дизайне форм – чем короче, тем лучше. Объедините несколько полей в одно удобное для заполнения поле. (Изображение: Luke W.)
- Предоставьте маски ввода. Маски полей – это метод, который помогает пользователям форматировать введенный текст. Маска появляется, когда пользователь фокусируется на поле, и автоматически форматирует текст по мере заполнения поля, помогая пользователям сосредоточиться на необходимых данных и легче заметить ошибки.
(Изображение: Josh Morony)
- Используйте такие интеллектуальные функции, как автозаполнение. Например, заполнение поля адреса часто является наиболее проблемной частью любой регистрационной формы. Использование таких инструментов, как Place Autocomplete Address Form(который использует как географическое местоположение, так и предварительное заполнение адреса для предоставления точных предложений, основанных на точном местоположении пользователя), позволяет пользователям вводить свой адрес с меньшим количеством нажатий клавиш, чем при обычном поле ввода.
- Динамическая проверка значения полей. Это печально, когда после отправки данных вам приходится возвращаться и исправлять ошибки. По возможности, проверяйте значения полей сразу после ввода данных, чтобы пользователи могли их мгновенно исправить.
Встроенная проверка (Изображение: Baymard)
- Кастомизируйте клавиатуру для типа запроса. При запросе номера телефона отобразите цифровую клавиатуру и добавьте кнопку @ при запросе адреса электронной почты. Убедитесь, что эта функция реализована последовательно во всем приложении, а не только для определенных форм.
Подберите клавиатуру для ввода требуемого текста. (Изображение: ThinkWithGoogle)
Предвосхищайте потребности пользователя
Проактивно ищите шаги в путешествии пользователя, где ему может понадобиться помощь. Например, на снимке экрана ниже показана часть, где пользователям необходимо предоставить конкретную информацию.
Не очевидно, где пользователь может найти штрих-код. Краткая справка рядом с полем ввода будет очень полезной. (Изображение: Hotjar)
Используйте визуальный вес, чтобы подчеркнуть важность
Самый важный элемент на экране должен иметь наибольший визуальный вес. Добавление большего веса к элементу возможно посредством изменения веса, размера и цвета шрифта.
Большие предметы привлекают внимание и кажутся более важными, чем мелкие. Кнопка «Request Lyft» привлечет внимание пользователя
Избегайте жаргона
Четкое общение всегда должно быть главным приоритетом в любом мобильном приложении. Используйте то, что вы знаете о своей целевой аудитории, чтобы определить, подходят ли определенные слова или фразы.
Неизвестные термины или фразы увеличат когнитивную нагрузку на пользователя. (Изображение: ThinkWithGoogle)
Сделайте дизайн последовательным
Последовательность является основополагающим принципом дизайна. Она устраняет путаницу. Поддержание общего согласованного внешнего вида во всем приложении имеет важное значение. Что касается мобильного приложения, последовательность означает следующее:
- Визуальная согласованность Шрифты, кнопки и метки должны быть последовательными во всем приложении.
- Функциональная последовательность Интерактивные элементы должны работать одинаково во всех частях вашего приложения.
- Внешняя согласованность Дизайн должен быть последовательным для нескольких продуктов. Таким образом, пользователь может применить ранее полученные знания при использовании другого продукта.
Вот несколько практических рекомендаций по созданию последовательного дизайна:
- Соблюдайте стандарты платформы. Каждая мобильная ОС имеет стандартные рекомендации по дизайну интерфейса: Human Interface Guidelines от Apple и Material Design Guidelines от Google. При проектировании для нативных платформ соблюдайте дизайн-рекомендации ОС для обеспечения максимального качества. Причина, по которой важно следовать дизайн-рекомендациям, проста: пользователи знакомятся с паттернами взаимодействия каждой ОС, и все, что противоречит руководящим принципам, вызывает проблемы.
- Не имитируйте элементы интерфейса с других платформ. При создании приложения для Android или iOS не переносите элементы интерфейса с других платформ. Иконки, функциональные элементы (поля ввода, флажки, переключатели) и шрифты должны выглядеть естественно. Максимально используйте нативные компоненты, чтобы люди доверяли вашему приложению.
- Следите, чтобы мобильное приложение соответствовало веб-сайту. Это пример внешней согласованности. Если у вас есть веб-сервис и мобильное приложение, убедитесь, что оба они имеют сходные характеристики. Это позволит пользователям совершать беспроблемные переходы между мобильным приложением и мобильным сайтом. Несоответствие в дизайне (например, другая навигационная схема или другая цветовая схема) может привести к путанице.
Предоставьте пользователю контроль
Сделайте интерактивные элементы знакомыми и прогнозируемыми
Предсказуемость является фундаментальным принципом UX дизайна. Когда все работает так, как предсказывают пользователи, они чувствуют сильное чувство контроля. В отличие от ПК, где пользователи могут использовать эффекты при наведении курсора, чтобы понять, является ли элемент интерактивным или нет, на мобильном телефоне пользователи могут проверять интерактивность, только нажав на элемент. Вот почему важно подумать о том, как дизайн кнопок и других интерактивных элементов передает доступность. Как пользователи понимают, что элемент – это кнопка? Форма должна следовать за функцией: внешний вид объекта говорит пользователям, как его использовать. Визуальные элементы, которые выглядят как кнопки, но не нажимаются, легко запутают пользователей.
Кнопка Назад» должна работать правильно
Неправильно созданная кнопка «назад» может вызвать много проблем у пользователей. Не допустите ситуаций, когда нажатие кнопки «назад» в многошаговом процессе вернет пользователей обратно к начальному экрану.
Хороший дизайн облегчает пользователям возврат и внесение исправлений. Когда пользователи знают, что могут еще раз взглянуть на предоставленные ими данные или выбранные параметры, это позволяет им с легкостью действовать.
Информативные сообщения об ошибках
Человеку свойственно ошибаться. Ошибки возникают, когда люди взаимодействуют с приложениями. Иногда они случаются по вине пользователя. Иногда они случаются из-за сбоя приложения. Независимо от причины ошибки, способы ее обработки имеют огромное влияние на UX. Плохая обработка ошибок в сочетании с бесполезными сообщениями об ошибках может вызвать у пользователей разочарование и стать причиной, по которой пользователи покинут ваше приложение. Возьмем в качестве примера экран состояния ошибки из Spotify. Он не помогает пользователям понять контекст или найти ответ на вопрос: «Что я могу с этим поделать?»
Экран ошибок Spotify просто говорит: «Произошла ошибка» и не дает каких-либо конструктивных советов о том, как решить проблему
Не думайте, что пользователи достаточно разбираются в технологиях, чтобы самостоятельно понять причину ошибки. Всегда говорите людям, что не так на простом языке. Каждое сообщение об ошибке должно сообщать пользователям:
- что пошло не так и, возможно, почему,
- какой следующий шаг должен предпринять пользователь, чтобы исправить ошибку.
Для получения дополнительной информации об обработке ошибок прочтите статью «Как проектировать состояния ошибок для мобильных приложений».
Проектируйте доступный интерфейс
Доступный дизайн позволяет пользователям с разными возможностями успешно использовать продукты. Подумайте, как пользователи с потерей зрения, потерей слуха и другими нарушениями могут взаимодействовать с вашим приложением.
Учитывайте цветовую слепоту
4.5% населения мира страдают дальтонизмом (это 1 из 12 мужчин и 1 из 200 женщин), 4% страдают слабым зрением (1 из 30 человек) и 0,6% являются слепыми (1 из 188 человек). Легко забыть, что мы проектируем для этой группы пользователей, потому что большинство дизайнеров не сталкиваются с такими проблемами.
Позвольте мне привести простой пример. Сообщения об успехах и ошибках в мобильных формах часто окрашиваются в зеленый и красный цвета соответственно. Но красный и зеленый – это цвета, наиболее подверженные дефициту цветового зрения (эти цвета трудно различать людям с дейтеранопией или протанопией). Скорее всего, вы видели следующее сообщение об ошибке при заполнении формы: «Поля, отмеченные красным, обязательны для заполнения»? Хотя это может показаться не очень важным, это сообщение об ошибке в сочетании с формой в приведенном ниже примере может быть крайне разочаровывающим для людей с дефицитом цветового зрения.
Дизайн поля формы опирается только на красный и зеленый цвета для обозначения полей с ошибкой и без нее. Дальтоники не могут различать поля, выделенные красным
Как указано в рекомендациях W3C, цвет не должен использоваться в качестве единственного визуального средства передачи информации, указания действия, запроса ответа или различения визуального элемента. Важно использовать другие визуальные индикаторы, чтобы убедиться, что пользователи смогут взаимодействовать с интерфейсом.
Использование иконок и подписей, чтобы показать, какие поля содержат ошибку, лучше передает информацию дальтонику
Сделайте анимации отключаемыми
Пользователи, которые страдают от укачивания, часто отключают анимационные эффекты в настройках ОС. Если в настройках доступности включена опция уменьшения движения, ваше приложение должно минимизировать или устранить анимации.
Сделайте навигацию простой
Помощь пользователям в навигации должна быть приоритетной задачей любого приложения. Все интересные функции и привлекательный контент не имеют значения, если люди не могут их найти. Кроме того, если потребуется слишком много времени или усилий, чтобы понять, как ориентироваться в вашем продукте, скорее всего, вы просто потеряете пользователей. Пользователи должны иметь возможность исследовать приложение интуитивно и выполнять все основные задачи без каких-либо объяснений.
Используйте стандартные компоненты навигации
Лучше использовать стандартные паттерны навигации, такие как панель вкладок (для iOS) и навигационный ящик (для Android). Большинство пользователей знакомы с обоими паттернами навигации и интуитивно знают, как использовать ваше приложение.
Side drawer (Android). (Изображение: Material Design)
Панель вкладок (iOS). (Изображение: Ramotion)
Подробнее о паттернах навигации читайте в статье «Основные паттерны мобильной навигации: за и против».
Приоритизация навигационных опций
Расставьте приоритеты навигации в зависимости от того, как пользователи взаимодействуют с вашим приложением. Назначьте различные уровни приоритета (высокий, средний, низкий) для общих пользовательских задач. Выделите в интерфейсе пути и пункты назначения с высоким уровнем приоритета и частым использованием. Используйте эти пути для определения вашей навигации. Организуйте свою информационную структуру таким образом, чтобы требовалось минимальное количество нажатий, свайпов и экранов.
Не смешивайте навигационные паттерны
Когда вы выбираете основной паттерн навигации для своего приложения, используйте его последовательно. Не должно быть ситуации, в которой часть вашего приложения имеет панель вкладок, а другая часть имеет боковой ящик.
Сделайте навигацию заметной
Как говорит Якоб Нильсен, распознать что-либо легче, чем запомнить. Минимизируйте нагрузку на память пользователя, делая действия и параметры заметными. Навигация должна быть доступна всегда, а не только, когда мы считаем, что она нужна пользователю.
Сообщайте текущее местоположение
Неспособность указать текущее местоположение – очень распространенная проблема многих меню мобильных приложений. «Где я?» – один из фундаментальных вопросов, на которые пользователи должны ответить, чтобы успешно ориентироваться. В любой момент люди должны знать, где они находятся в вашем приложении.
Приложение «Здоровье» (от Apple) предоставляет информацию о текущем разделе (выделена опция навигации «Медданные») и подразделе (заголовок «Активность» отображается в верхней части макета)
Используйте функциональную анимацию для прояснения навигационных переходов
Анимация – лучший инструмент для описания переходов между состояниями. Она помогает пользователям понять изменение состояния в макете страницы, что вызвало изменение и как заново инициировать изменение при необходимости.
Функциональная анимация может эффективно направлять внимание пользователя и облегчать понимание сложных переходов. (Изображение: Jae-seong, Jeong)
Будьте осторожны с использованием жестов в интерфейсе
Использование жестов в интерактивном дизайне может быть заманчивым. Но в большинстве случаев лучше избегать этого искушения. Когда жесты используются в качестве основного варианта навигации, они могут стать причиной ужасного UX. Почему? Потому что жесты – это скрытые элементы управления.
Как отмечает Томас Джус в своей статье «За пределами кнопки: использование интерфейса, управляемого жестами», самым большим недостатком использования жестов в интерфейсе является кривая обучения. Всякий раз, когда видимый элемент управления заменяется жестом, кривая обучения приложения увеличивается. Это происходит потому, что жесты сложнее обнаружить – они всегда скрыты, и люди должны иметь возможность идентифицировать эти параметры, чтобы использовать их. Вот почему важно использовать только общепринятые жесты (те, которые пользователи ожидают найти в вашем приложении).
Когда дело доходит до использования жестов в интерфейсе, следуйте нескольким простым правилам:
- Используйте стандартные жесты. Под «стандартными» я подразумеваю жесты, наиболее естественные для приложения вашей категории. Люди знакомы со стандартными жестами, поэтому для их обнаружения и запоминания не требуется никаких дополнительных усилий.
- Предлагайте жесты в качестве дополнения, а не замены визуальных опций навигации. Жесты могут работать как горячие клавиши для навигации, но не как полная замена визуальных меню. Таким образом, всегда предлагайте простой, наглядный способ навигации, даже если это означает несколько дополнительных действий.
Для получения дополнительных сведений об использовании жестов в пользовательском интерфейсе прочтите статью «Жесты в приложениях и мобильный UX».
Сфокусируйтесь на первом опыте
Первый опыт может уничтожить мобильное приложение. У вас всего один шанс на создание первого впечатления. И если вы потерпите неудачу, есть большая вероятность, что пользователи больше не запустят ваше приложение. (Исследования Localytics показывают, что 24% пользователей никогда не возвращаются в приложение после первого использования).
Избегайте обязательного входа в учетную запись
Обязательная регистрация перед использованием приложения создает стену перед пользователем (sign-in wall). Это распространенная проблема для пользователей и одна из причин, по которой они отказываются использовать приложение. Количество пользователей, которые отказываются от процесса регистрации, особенно важно для приложений с низкой узнаваемостью бренда или тех, в которых ценностное предложение неясно.
Pinterest просит пользователей создать новую учетную запись или войти в имеющуюся при первой загрузке
Как правило, просите пользователей зарегистрироваться, если это необходимо (например, если основные функции вашего приложения доступны только после завершения регистрации). И даже в этом случае лучше откладывать регистрацию, как можно дольше – дайте пользователям возможность немного поработать в приложении, и только потом осторожно напомните им о необходимости регистрации. Это даст пользователям ощутить вкус опыта, и они будут более склонны к нему.
Проектируйте хороший опыт обучения новых пользователей
В контексте мобильного UX предоставление отличного опыта обучения является основой для удержания пользователей. Цель обучения – показать ценность, которую обеспечивает ваше приложение.
Среди множества стратегий обучения новых пользователей особенно эффективно контекстное обучения. Контекстное обучение означает, что инструкции предоставляются только тогда, когда они нужны пользователю. Duolingo – отличный пример. Это приложение сочетает в себе интерактивный тур с прогрессивным раскрытием, чтобы показать пользователям, как работает приложение. Пользователям предлагают начать и пройти быстрый тест на выбранном языке. Это делает обучение веселым.
У Duolingo есть пользовательский тур, который состоит из быстрого теста
Еще одна вещь, которая может быть очень полезна во время регистрации – это пустое состояние. Пустое состояние – это экран состояния по умолчанию, который требует от пользователей пройти один или несколько шагов, чтобы заполнить его данными. Помимо информирования пользователя о том, какой контент ожидать на странице, пустое состояние также может научить людей, как использовать приложение. Даже если процесс регистрации состоит из одного шага, руководство убедит пользователей в том, что они поступают правильно.
Пустое состояние в Expensify успокаивает пользователей, сообщая им, с чего начать
Для получения дополнительной информации об обучении новых пользователей рекомендуем к прочтению статью «Роль пустых состояний в обучении пользователя».
Не спрашивайте информацию о настройке заранее
Обязательный этап настройки вызывает проблемы и может привести к отказу от использования приложения. Когда пользователи запускают приложение, они ожидают, что оно будет работать. Таким образом, разработайте свое приложение для большинства пользователей, и пусть те, кто хочет иметь другую конфигурацию, смогут в любое время изменить настройки в соответствии со своими потребностями.
Совет: попытайтесь определить, что вам нужно от системы. Если вам нужна информация о пользователе, устройстве или среде, по возможности обращайтесь к системе, а не к пользователю.
Избегайте с самого начала просить разрешения
Избегайте ситуации, в которой первое, что видит пользователь при запуске приложения, - это диалоговое окно с запросом разрешения. Как и при обязательном входе в учетную запись или на этапе предварительной настройки, запрос разрешения при запуске должен выполняться только тогда, когда это необходимо для основной функции вашего приложения. Этот запрос не будет беспокоить пользователей, если очевидно, что работа вашего приложения зависит от этого разрешения (например, понятно, почему редактор фотографий запрашивает доступ к фотографиям).
Паттерны запросов на разрешение, предложенные Google. (Изображение: Material Design)
Но в любых других случаях просите разрешение в контексте. Пользователи с большей вероятностью предоставят разрешение, если их спросят во время выполнения соответствующей задачи.
Приложения должны запрашивать разрешения в контексте и сообщать ценность предоставления доступа. Предлагайте пользователям дать разрешение только тогда, когда они пытаются использовать эту функцию. (Изображение: Cluster)
Советы:
- Просите только о том, что явно необходимо вашему приложению. Не просите все возможные разрешения. Было бы подозрительно, если бы приложение запрашивало то, в чем оно не нуждается. Например, будильник, запрашивающий разрешение на доступ к списку контактов, может вызвать подозрения.
- Объясните, зачем вашему приложению нужна информация, если это неочевидно. Иногда вам нужно предоставить больше контекста для вашего запроса. По этой причине вы можете создать кастомное предупреждение для запроса разрешения.
Сделайте ваше приложение быстрым и отзывчивым
Время загрузки чрезвычайно важно для UX. По мере развития технологий мы становимся все более нетерпеливыми, и сегодня 47% пользователей ожидают, что страница загрузится за 2 секунды или меньше.
Чем быстрее ваше приложение, тем лучше будет опыт. (Изображение: Google)
Если загрузка страницы занимает больше времени, посетители могут расстроиться и уйти. Вот почему скорость должна быть приоритетом при создании мобильного приложения. Но независимо от того, насколько быстрым вы сделаете приложение, для обработки некоторых вещей потребуется время. Медленный ответ может быть вызван плохим подключением к Интернету или операция может занять много времени. Но даже если вы не можете сократить время ожидания, по крайней мере, попытайтесь сделать его более приятным.
Сосредоточьтесь на загрузке контента в заметной области экрана
Загрузите достаточно контента, чтобы заполнить экран при открытии страницы. Контент, доступный при скроллинге, должен продолжать загружаться в фоновом режиме. Преимущество этого подхода состоит в том, что пользователи будут заняты чтением исходного контента и, в некоторых случаях, даже не заметят, что контент все еще загружается.
Сделайте понятным, когда закончится загрузка
Пустой или статичный экран, который видят пользователи при загрузке контента, может создать впечатление, что ваше приложение зависло, что приводит к путанице и разочарованию, и люди могут покинуть ваше приложение. Как минимум, покажите спиннер загрузки, который даст понять, что что-то происходит. Для более длительного времени ожидания (более 10 секунд) важно отобразить индикатор выполнения, чтобы пользователь мог оценить, как долго он будет ждать.
Для получения дополнительной информации об индикаторах загрузки прочите статью «Лучшие примеры анимированных индикаторов прогресса».
Предлагайте визуальное отвлечение
Если приложение дает пользователям что-то интересное во время ожидания, пользователи будут обращать меньше внимания на само ожидание. Таким образом, чтобы люди не скучали в ожидании чего-то, предложите им отвлечься. Прекрасный анимированный индикатор ожидания может удерживать внимание пользователей, пока они ждут.
Внимание к тонким движениям может приятно удивить пользователя. (Изображение: UI8)
Совет: помните о долголетии. Даже хорошая анимация может раздражать, когда она чрезмерно используется. Создавая анимацию спросите себя: «Будет ли анимация раздражать при сотом использовании или она универсальна и ненавязчива?»
Каркасные экраны (Skeleton Screens)
Каркасные экраны (то есть временные информационные контейнеры) по сути являются пустой версией страницы, в которую постепенно загружается информация.
Каркасный экран показывает экран сразу. Плейсхолдеры заменяют любые элементы макета, содержимое которых еще не доступно. (Изображение: Slack)
Каркасный экран появится в тот момент, когда ваше приложение начнет загружать данные, создавая у пользователей впечатление, что ваше приложение быстрое и отзывчивое. В отличие от индикатора загрузки, который просто сообщает, что что-то происходит, каркасный экран фокусируется на реальном прогрессе.
Каркасный экран заполняет интерфейс по мере загрузки контента. (Изображение: Tandem Seven)
Оптимизация контента для мобильных устройств
Контент играет значительную роль в дизайне. В большинстве случаев основной причиной, по которой люди используют приложение, является его контент. Но недостаточно просто иметь четкий, хорошо продуманный контент. Контент должен легко усваиваться.
Сделайте текст читабельным и разборчивым
Когда мы думаем о контенте, в большинстве случаев мы имеем в виду типографику. Как говорит Оливер Райхенштейн в своем эссе «Веб-дизайн – это на 95% типографика»:
«Оптимизация типографики – это удобочитаемость, доступность, юзабилити (!), общий графический баланс».
Ключ к мобильной типографике – удобочитаемость и разборчивость. Если пользователи не могут прочитать ваш контент, нет смысла предлагать его.
Сначала несколько практических рекомендаций по читабельности:
- Размер шрифта Как правило, все, что меньше 16 пикселей (или 11 точек), сложно читать на любом экране.
- Семейство шрифтов Большинство пользователей предпочитают четкий, легкий для чтения шрифт. Проверенный вариант – использовать системный шрифт по умолчанию (Apple iOS использует шрифт San Francisco; Google Android использует Roboto).
- Контрастность Светлый текст (например, светло-серый) может выглядеть эстетически привлекательным, но пользователям будет трудно читать его, особенно на светлом фоне. Убедитесь, что между шрифтом и фоном большой контраст для удобства чтения. В руководстве по доступу к веб-контенту WC3 представлены рекомендации по соотношению контрастности для изображений и текста.
Даже высококонтрастный текст трудно читать при ярком свете, но низкоконтрастный текст почти невозможно прочитать
А теперь несколько рекомендаций по удобочитаемости:
- Избегайте текста, написанного только заглавными буквами. Весь текст из заглавных букв подходит для контекстов, которые не требуют внимательного чтения (например, аббревиатур и логотипов), но избегайте его, когда ваше сообщение требует интенсивного чтения.
- Ограничьте длину текстовых строк. Хорошее практическое правило – использовать для мобильных устройств от 30 до 40 символов в строке.
Слева: текст слишком мал, чтобы его можно было прочитать на маленьком устройстве без масштабирования. Справа: текст удобно читать на экране мобильного телефона
- Не сжимайте строчки. Добавление пространства между текстом помогает пользователю в чтении и создает ощущение, что не так много информации для восприятия.
Слишком плотно, слишком много и в самый раз. Добавляя правильное количество пространства к тексту – как между строками, так и на полях – вы помогаете пользователям лучше усваивать слова
HD-качество изображений и правильное соотношение сторон
Рост числа устройств с экранами высокого разрешения устанавливает планку качества изображений. Изображения не должны отображаться в пикселях на экранах с высоким разрешением.
Изображения всегда должны отображаться в правильном соотношении сторон, чтобы они не выглядели искаженными. Изображения, которые слишком растянуты в ширину или длину, чтобы уместиться в пространстве, будут выглядеть непривлекательными и неуместными.
Последней проблемой, с которой сталкиваются многие мобильные дизайнеры, является оптимизация UX для iPhone X. Проектирование для iPhone X требует артборд другого размера, чем для любого другого iPhone (вам понадобятся изображения с разрешением 375 x 812 точек при коэффициенте увеличения 3x).
(Изображение: Apple)
Чтобы узнать больше о проектировании для iPhone X рекомендуем к прочтению статью «Проектирование приложений для iPhone X: Что каждый UX дизайнер должен знать о последнем устройстве Apple».
Видеоконтент, оптимизированный для портретной ориентации
Видео быстро становится стандартным методом потребления контента для многих пользователей. По данным YouTube, потребление видео с мобильных устройств растет на 100% каждый год. К 2020 году свыше 75% мирового трафика мобильных данных будет составлять видеоконтент. Это означает, что важно оптимизировать видеоконтент для портретного режима.
По данным ScientiaMobile, 94% пользователей используют свои мобильные устройства в портретном режиме. Если ваше приложение предоставляет видеоконтент, его следует оптимизировать, чтобы пользователи могли просматривать его в портретном режиме.
Facebook Live позволяет смотреть видео на временной шкале Facebook. (Изображение: Giphy)
Проектирование для сенсорных экранов
Цель разработки для сенсорного экрана – уменьшить количество неправильных вводов данных и сделать взаимодействие с приложением более удобным.
Проектируйте для пальцев, а не для курсора
Когда вы разрабатываете интерактивные элементы в мобильном интерфейсе, очень важно сделать цели достаточно большими, чтобы пользователям было легко их касаться. Ошибочные нажатия часто случаются из-за небольших сенсорных элементов управления.
Небольшая сенсорная цель увеличивает вероятность ложного выбора. (Изображение: Apple)
При разработке сенсорной цели вы можете положиться на исследование MIT Touch Lab (PDF), чтобы выбрать подходящий размер интерактивных элементов. Это исследование показало, что средний размер подушечек пальцев составляет от 10 до 14 мм, а кончиков пальцев – от 8 до 10 мм, что делает 10 на 10 мм хорошим минимальным размером цели касания.
10 на 10 мм – это хороший минимальный размер сенсорной цели. (Изображение: UXmag)
Важен не только размер цели, но и правильное расстояние между целями. Если несколько сенсорных целей находятся рядом друг с другом (например, кнопки «Согласен» и «Не согласен»), убедитесь, что между ними имеется достаточно места.
Пример пробела между кнопками. (Изображение: Material Design)
Учитывайте зону большого пальца
Проектирование для больших пальцев — значит не только сделать цели достаточно большими, но также учитывать, как мы держим наши устройства. Многие пользователи держат свой телефон одной рукой. Только часть экрана легко достать большим пальцем. Эта территория называется естественной зоной большого пальца (natural thumb zone). Другие зоны требуют растяжение пальцев или даже смена хвата, чтобы добраться до них. Ниже вы можете увидеть, как выглядит безопасная зона на современном мобильном устройстве.
Зоны большого пальца, согласно исследованию Скотта Херфа. (Изображение: Smashing Magazine)
Чем больше дисплей, тем большая часть экрана менее доступна.
Зона большого пальца для правши, согласно исследованию Скотта Херфа
При проектировании для мобильных устройств учитывайте все зоны:
- Зеленая зона – лучшее место для параметров навигации или частых интерактивных действий (например, кнопок призыва к действию).
- Красная зона – лучшее место для потенциально опасных опций (например, «Удалить» или «Стереть»). Пользователи с меньшей вероятностью случайно активируют эту опцию.
Фидбек на взаимодействие
В физическом мире объекты реагируют на наше взаимодействие. Люди ожидают такого же уровня отзывчивости от цифровых элементов управления интерфейса. Вам нужно будет предоставить мгновенный отзыв на каждое взаимодействие пользователя. Если ваше приложение не обеспечивает обратную связь, пользователь задумается, не зависло ли оно. Фидбек может быть визуальным (выделение нажатой кнопки) или тактильной (вибрация устройства).
Пользователям не надо гадать, когда приложения предоставляют визуальную анимацию или другой тип визуальных эффектов. (Изображение: Vadim Gromov)
Делайте цифровой опыт человечным
UX заключается не только в удобстве использования. Он в основном касается чувств. И когда мы думаем о том, что заставляет нас чувствовать себя прекрасно, мы часто думаем о хорошо продуманном дизайне.
Персонализированный опыт
Сегодня персонализация является одним из наиболее важных аспектов мобильных приложений. Это возможность связаться с пользователями и предоставить необходимую им информацию таким образом, который кажется подлинным.
Существует бесчисленное множество способов улучшить мобильный UX с помощью персонализации. Можно предложить персонализированный контент в зависимости от местоположения пользователя, истории поиска и его прошлых покупок. Например, если ваши пользователи предпочитают приобретать определенные группы продуктов каждый месяц, приложение может отслеживать это и предлагать им специальные предложения для этих товаров.
Мобильное приложение Starbucks – отличный пример такого подхода. Приложение использует информацию, предоставленную пользователями (например, тип кофе, который они обычно заказывают) для создания специальных предложений.
Starbucks предоставляет предложения и услуги с учетом индивидуальных предпочтений клиентов
Восхитительная анимация
В отличие от функциональной анимации, которая используется для улучшения ясности интерфейса, восхитительная анимация используется для того, чтобы интерфейс ощущался человечным. Этот тип анимации проясняет, что люди, создавшие приложение, заботятся о своих пользователях.
Использование восхитительных деталей – это возможность создать эмоциональную связь с вашими пользователями. (Изображение: Serhii Hanushchak)
Оптимизируйте Push-уведомления
Раздражающие уведомления – причина номер 1, по которой люди удаляют мобильные приложения (по мнению 71% респондентов).
(Изображение: Appiterate Survey)
Не отправляйте push-уведомления только потому, что можете. Каждое уведомление должно быть ценным и своевременным.
Ценные уведомления
Когда пользователь начинает использовать ваше приложение, он не будет возражать против получения уведомлений, если полученная ценность будет больше, чем негатив от того, что его отвлекло уведомление. Почти 50% пользователей благодарны за уведомления, которые их интересуют. Персонализация контента для вдохновения и восхищения имеет решающее значение. Netflix является отличным примером компании, которая «повышает ценность». Он тщательно использует просмотр данных, чтобы представить рекомендации, которые выглядят индивидуально.
Netflix делает большую работу по персонализации своих push-уведомлений, давая пользователям знать, когда их любимые шоу доступны
Не отправляйте много уведомлений за короткий период времени
Слишком большое количество уведомлений, доставленных за короткий промежуток времени, может привести к ситуации, известной как переизбыток уведомлений, когда пользователь не может обработать информацию и просто пропускает ее. Ограничьте общее количество уведомлений, объединяя различные сообщения.
Правильно подбирайте время для уведомлений
Важно не только то, что вы говорите, но и когда вы это говорите. Не отправляйте push-уведомления в странные часы (например, среди ночи). Лучшее время для push-уведомлений – часы пиковой нагрузки на мобильные устройства: с 18:00 до 22:00.
Рассмотрите другие каналы, доставки сообщений
Push-уведомления – не единственный способ доставить сообщение. Используйте электронную почту, уведомления в приложении и рассылку новостей, чтобы уведомлять пользователей о важных событиях в соответствии с уровнем срочности и типом контента, которым вы хотите поделиться.
Выберите правильный тип уведомления в зависимости от срочности и контента. (Изображение: Appboy)
Оптимизация для мобильных устройств
Проектируйте с учетом прерываний
Мы живем в мире прерываний. Что-то постоянно пытается отвлечь нас и направить наше внимание в другое место. Не говоря уже о том, что многие мобильные сеансы проходят, когда пользователи в пути. Например, пользователи могут использовать ваше приложение ожидая поезд. Такие сеансы могут быть прерваны в любое время. Пользователи будут разочарованы, если приложение забывает их текущий прогресс, как только они закрывают его.
В случае прерывания сеанса ваше приложение должно сохранить текущее состояние (контекст) и позволить пользователям продолжать работу с того места, где они остановились. Это облегчит пользователям повторное взаимодействие с приложением, когда они вернутся к нему после перерыва.
Используйте преимущества возможностей устройства
Мобильные устройства имеют много датчиков (камера, отслеживание местоположения, акселерометр), которые можно использовать для улучшения UX. Вот лишь несколько функций, которые вы можете использовать для этого:
- Камера Можно упростить операции ввода данных с помощью камеры. Например, вы можете использовать цифровую камеру для автоматического считывания номеров кредитных карт.
(Изображение: Business Insider)
- Осведомленность о местоположении
Приложения могут использовать данные о местоположении устройства для предоставления контента, относящегося к местоположению пользователя или для упрощения определенных операций. Например, если вы проектируете приложение для доставки еды, вместо того, чтобы просить пользователя указать адрес для доставки, вы можете автоматически определить его текущее местоположение и попросить подтвердить, что он хочет получить доставку в это место.
Такие приложения, как Uber Eat, уже использует это свойство, чтобы уменьшить количество действий, требуемых от пользователя
- Биометрическая аутентификация Можно минимизировать количество шагов, необходимых для входа в приложение, используя такие функции, как вход по отпечатку пальца или идентификации лица.
Приложение Chase Mobile обеспечивает вход в систему одним касанием
Совет: Практические рекомендации по использованию Apple Face ID можно найти в нашей статье « Проектирование приложений для iPhone X: что нужно знать каждому UX-дизайнеру о новейшем устройстве Apple».
Используйте Face ID при входе в систему на iPhone X (в качестве замены пароля). (Изображение: Tesco)
Стремитесь создать многоканальный опыт
Не думайте, что ваше мобильное приложение является изолированным. Когда дело доходит до создания пользовательского путешествия, конечной целью является создание неразрывного опыта на всех устройствах. Пользователи должны иметь возможность переключиться на другую среду и продолжить путешествие.
Согласно Appticles, 37% пользователей ищут товары на мобильных устройствах, но переключаются на настольные компьютеры, чтобы совершить покупку. Таким образом, если вы проектируете приложение для электронной коммерции, мобильные пользователи должны иметь возможность переключиться на ПК или ноутбук, чтобы продолжить путешествие. Синхронизация пользовательского прогресса между устройствами является ключевым приоритетом для создания неразрывного опыта. Это заставляет пользователей чувствовать, что их рабочий процесс непрерывен.
Адаптируйте мобильный дизайн к развивающимся рынкам
По данным Google, в ближайшие пару лет ожидается появление миллиарда новых пользователей онлайн. И подавляющее большинство из них будут с развивающихся рынков (или так называемых стран, ориентированных на мобильные устройства, таких как Индия, Индонезия, Бразилия и Нигерия). Они получат доступ к Интернету через мобильный телефон. Эти пользователи будут иметь опыт и ожидания, отличные от тех, кто проживает в США и Европе.
Если вы хотите стать глобальным, важно учитывать их опыт.
Плохое интернет соединение
В США и Европе пользователи привыкли к возможности повсеместного подключения к сети. Но так, безусловно, не во всем мире. Продукты на развивающихся рынках должны иметь возможность работать с медленным или прерывистым Интернет-соединением. В зависимости от местоположения человека, сеть может переключаться с Wi-Fi на 3G, на 2G или вообще пропасть, и ваш продукт должен это учитывать.
Если вы планируете проектировать для такого рынка, учитывайте следующее:
- Убедитесь, что ваш продукт работает, когда он вообще не подключен к Интернету. Разрешите кеширование данных.
- Оптимизируйте свой продукт для быстрой загрузки. Минимизируйте размер страницы, сводя к минимуму изображения и другой весомый контент; и уменьшите размер этого контента.
YouTube Go – превосходный пример мобильного приложения, созданного с учетом ограничений на подключение к Интернету. Приложение было спроектировано так, чтобы оно работало в автономном режиме (это означает, что им можно пользоваться, даже если оно не подключено к Интернету). Приложение позволяет пользователям предварительно просматривать видео и выбрать размер файла, прежде чем сохранять его в автономном режиме, чтобы просмотреть его позже. Оно также имеет отличную функцию, которая позволяет пользователям легко обмениваться видео с друзьями и близкими без использования каких-либо данных.
YouTube Go позволяет пользователям отправлять и получать видео, когда они вместе, используя peer-to-peer обмен в автономном режиме
Google News & Weather – еще один прекрасный пример приложения, учитывающего плохое Интернет-соединение. В приложении есть функция «Lite mode» для людей, подключенных к сети с низкой пропускной способностью. Когда этот режим активирован, он оставляет только основной контент, чтобы приложение загружалось быстрее. По данным Google, этот режим использует менее трети обычных данных, и он автоматически активируется, когда приложение обнаруживает медленную сеть.
Ограниченные данные
Приблизительно на 95% развивающихся рынков, люди почти полностью полагаются на дорогие мобильные данные с предоплатой. Люди покупают фиксированный объем данных, и многие могут позволить себе только около 250 МБ данных в месяц.
Эти пользователи ценят прозрачность, когда дело доходит до понимания количества потребленных данных. Они также ценят возможность контролировать, загружается ли продукт через Wi-Fi или мобильный интернет.
Ниже вы можете увидеть еще один пример с YouTube Go. После выбора видео пользователи могут выбрать качество видео. Приложение позволяет им заранее знать, сколько данных они потратят, прежде чем совершить действие.
YouTube Go позволяет предварительно просматривать видео и выбирать размер файла, прежде чем сохранять его в автономном режиме, чтобы посмотреть позже
Ограниченные возможности устройства
Смартфоны в странах, ориентированных на мобильные устройства, значительно отличаются от популярных в США моделей Google Pixel и iPhone. Большинство устройств на развивающихся рынках стоят менее $100 и могут поставляться с ограниченными объемом памяти и возможностями обработки. Убедитесь, что проектируемый вами продукт работает со старыми недорогими устройствами и программным обеспечением.
Местная эстетика
Минималистский дизайн, который сегодня популярен в западном мире, может показаться слишком обнаженным для других культур. Если вы хотите, чтобы ваш продукт имел успех на развивающихся рынках, обратите внимание на культурную эстетику. Вы можете найти вдохновение в региональных продуктах или нанять местных дизайнеров, которые знакомы с предпочтениями пользователей. Дизайн, соответствующий местной эстетике, сделает ваш продукт более привлекательным.
Региональные особенности
Когда Google адаптировал Google Карты для Индии, он учел, что Индия является крупнейшим рынком двухколесных транспортных средств в мире, и миллионы мотоциклистов и скутеристов испытывают иные потребности, чем водители автомобилей. Он выпустил двухколесный режим в своем приложении. В этом режиме отображаются маршруты поездок с использованием кратчайших путей, недоступных для легковых и грузовых автомобилей.
Тестирование и фидбек
Все принципы, которые вы только что прочитали, могут помочь вам создать лучший интерфейс для мобильных устройств, но они не заменят потребности в исследованиях и тестировании пользователей. Вам все еще нужно протестировать свое решение с реальными пользователями, чтобы понять, какие части интерфейса нуждаются в улучшении.
Фидбек
Поощряйте отзывы пользователей при любой возможности. Чтобы собрать ценный фидбек, вам нужно, чтобы пользователи могли легко его оставить. Таким образом, встройте механизм фидбека прямо в ваш продукт. Это может быть просто форма с пометкой «Оставить отзыв». Просто убедитесь, что она работает без проблем для ваших пользователей.
Дизайн – это бесконечный процесс
Справедливо сказать, что дизайн – это процесс постоянного совершенствования. Мы, продуктовые дизайнеры, используем аналитику и отзывы пользователей, чтобы постоянно улучшать опыт.
Полезные инструменты и ресурсы для дизайнеров
Color Contrast Checker
Удивительно, сколько мобильных приложений не проходят тест АА. Не будьте одним из них! Важно проверить доступность цветового контраста. Используйте Color Contrast Checker от WebAIM для проверки контраста цветовых комбинаций.
Color Contrast Checker от WebAIM
Наборы элементов интерфейса для Adobe XD
Хорошо спроектированный интерфейс сделает ваше приложение великолепным. Замечательно, когда вы можете создавать интерфейс не с нуля, а используя такой прочный фундамент, как набор элементов интерфейса (UI kit). У Adobe XD есть пять наборов элементов интерфейса, которые вы можете скачать абсолютно бесплатно. Эти наборы повысят вашу креативность и помогут создавать визуально интересные дизайны интерфейса.
Navigo Transportation UI Kit (Изображение: Adobe)
Вывод
Отличный дизайн – это идеальное сочетание красоты и функциональности, и это именно то, к чему вы должны стремиться при создании приложения. Но не пытайтесь с первой попытки создать идеальное приложение. Это почти невозможно. Вместо этого относитесь к своему приложению, как к постоянно развивающемуся проекту и используйте данные сессий тестирования и отзывы пользователей, чтобы постоянно улучшать пользовательский опыт.
Перевод статьи Nick Babich
Найстарші коментарі (0)