Принципы мобильного UX-дизайна

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

Даже в такой зонтичной категории, как «мобильный UX-дизайн», существуют различия между дизайном приложения и дизайном мобильного веб-сайта. Когда пользователи загружают приложение, им нужна не только мобильная версия сайта. Им нужен уникальный опыт, который оправдывает время, которое они потратили на загрузку приложения (а также место, которое оно занимает на их телефоне). Пользователи без колебаний удаляют приложение, которое они не считают нужным — 75% загрузок приложений открываются только один раз.

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

Ставьте пользователя на первое место

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

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

Сделайте навигацию интуитивно понятной

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

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

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

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

Беспроблемный опыт не только упрощает работу людей, использующих веб-сайт или приложение, но и укрепляет доверие к бренду.

Сосредоточьтесь на целях пользователя

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

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

Разрешить персонализацию

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

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

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

Всегда делайте вещи проще

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

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

Другие вещи, такие как указание типа ввода в полях формы (так, чтобы, например, когда адрес электронной почты является ожидаемым вводом, символ @ и «.com» всплывали на главном экране клавиатуры).

Надлежащая практика адаптации

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

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

Используйте привычные жесты

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

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

Дизайн мобильной верстки

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

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

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

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

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

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

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

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

Лучшие практики мобильного UX

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

Сосредоточьтесь на скорости

Несмотря на широкую доступность данных 4G, мобильные сети по-прежнему в целом медленнее, чем Wi-Fi или широкополосные услуги. И во многих частях мира 4G не существует, и мобильные пользователи застряли либо с 3G, либо с более низкой скоростью передачи данных.

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

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

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

Предоставление обратной связи пользователям

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

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

Минимизируйте ввод данных

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

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

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

Заключение

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

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

Дальнейшее чтение в блоге Toptal Design:

• Мобильный UX-дизайн — лучшие практики, ограничения и работа с разработчиками
• Удерживайте пользователей с помощью этих идей для адаптации мобильных приложений
• Фундаментальное руководство по удобству использования мобильных устройств
• Эвристические принципы для мобильных интерфейсов
• UX электронной коммерции для мобильных устройств