10 важных проблем юзабилити и практических рекомендаций, которых следует избегать при работе над мобильным дизайном.
1. Визуальный беспорядок
Беспорядок – один из злейших врагов хорошего дизайна. Загромождая свой интерфейс, вы перегружаете пользователей слишком большим количеством информации. По сравнению с мониторами компьютеров, мобильные устройства имеют относительно небольшой экран. И каждый дополнительный раздел контента, изображение или кнопка делает макет более загруженным.
Уменьшение беспорядка улучшит понимание.
Как решить эту проблему:
- Обрежьте весь «жир». Решите, какая информация достаточно важна, чтобы показать ее вашему пользователю, а какую информацию можно удалить. Избавьтесь от всего ненужного.
Минимализм – лучший друг дизайнера.
- Установите приоритетность контента. Сосредоточьтесь на целях пользователя. Подумайте, чего на самом деле хочет достичь пользователь с помощью вашего приложения. Визуализируйте флоу пользователя шаг за шагом и предлагайте информацию / функции, которые ему нужны на каждом этапе.
Юзерфлоу/Impression Map. Изображение Nicole Love
- Проектируйте для сканирования. Никто не любит читать на телефоне большие блоки текста. Можно сделать контент более читабельным, используя короткие абзацы и добавляя маркированные или нумерованные списки.
- Используйте прогрессивное раскрытие, чтобы раскрыть больше контента / функций. Предоставьте пользователям доступ к дополнительной информации по запросу.
Интерфейс показывает больше возможностей после взаимодействия. Изображение Ramotion
2. Нечеткая навигация
Помощь пользователям в навигации должна быть приоритетом для каждого приложения. Когда пользователям приходится думать о навигации, они, скорее всего, переключаются на приложение конкурента, которое предлагает лучший опыт.
Навигация должна быть четкой и интуитивно понятной.
Пользователи должны понимать, как быстро работать с мобильным приложением.
Как решить эту проблему:
- Не изобретайте велосипед. Предсказуемость – фундаментальный принцип UX-дизайна. Когда все работает так, как предсказывают пользователи, у них усиливается чувство контроля. Вот почему лучше использовать знакомые паттерны навигации, такие как гамбургер-меню или нижняя панель вкладок.
- Стремитесь к простой навигации. Сведите к минимуму общее количество параметров навигации. Например, панель вкладок не должна содержать более пяти.
Слишком много параметров и подходящее количество параметров. Изображение Apple
- Определите приоритетность параметров навигации (в зависимости от того, как пользователи взаимодействуют с вашим приложением). Назначьте разные уровни приоритета (высокий, средний, низкий) для общих пользовательских задач. Выделите в интерфейсе юзерфлоу с высоким уровнем приоритета и частым использованием (например, поместив их в меню верхнего уровня).
- Сообщите текущее местоположение. Пользователь должен ответить на вопрос «Где я?», просто глядя на экран. Он должен всегда знать, где находится в вашем приложении.
Twitter использует цветовой контраст, чтобы выделить текущее местоположение
- Используйте узнаваемые иконки. Значение иконок должно быть понятно вашим пользователям. Используйте знакомые значки, такие как иконка «Дом», обозначающая главный экран, или иконка «Увеличительное стекло», обозначающая поиск.
3. Крошечный текст и функциональные элементы
Крошечный текст и функциональные элементы увеличивают количество неправильного ввода данных и делают взаимодействие с приложением менее комфортным.
Как решить эту проблему:
- Стремитесь к хорошей разборчивости и удобочитаемости. Выбирайте шрифты, которые хорошо подходят для разных размеров и плотности (хорошие варианты – San Franciso и Roboto). Кроме того, размер шрифтов для основного текста должен быть не менее 11pt для iOS и 14sp для Android, чтобы обеспечить удобочитаемость на этих платформах.
- Создавайте удобные для пальцев цели касания. Средний размер кончика пальца человека составляет 8–10 мм, что делает 9 мм x 9 мм оптимальным минимальным размером цели касания.
Подходящий размер цели. Изображение UXMag
- Добавьте хорошие отступы между сенсорными целями. Добавьте достаточное расстояние между интерактивными элементами.
Отступ между сенсорными целями. Изображение Microsoft
4. Низкоконтрастный текст и функциональные элементы
Светлый текст (например, светло-серый) может выглядеть эстетично, но пользователям будет сложно его прочитать. Люди часто взаимодействуют со своими мобильными устройствами далеко не в идеальных условиях. Яркий солнечный свет может сделать элементы на экране плохо различимыми. Но правильный контраст может сделать элементы более заметными.
Как решить эту проблему:
- Используйте правильный коэффициент контрастности. Что касается цветового контраста, в Руководстве по обеспечению доступности веб-контента (WCAG) указано, что текст и изображения c текстом должны иметь коэффициент контрастности не менее 4,5:1. Используйте инструмент WebAIM Contrast Checker Tool, чтобы проверить коэффициент контрастности.
Изображение WebAIM Contrast Checker Tool
5. Слишком много кликов для выполнения задач
Когда человек запускает приложение на мобильном устройстве, он хочет выполнить поставленную задачу как можно быстрее. Минимизируя уровень сложностей, с которыми сталкиваются пользователи, вы делаете мобильный дизайн более эффективным.
Как решить эту проблему:
- Просмотрите основные пользовательские юзерфлоу. Поймите, как пользователи взаимодействуют с вашим продуктом, и найдите области, которые можно оптимизировать.
- Предлагайте альтернативные способы выполнения задач. Например, предоставьте голосовой интерфейс вместе с набором текста, чтобы пользователи могли выполнять ряд действий с помощью голоса.
6. Плохая обработка ошибок
Плохая обработка ошибок в сочетании с бесполезными сообщениями об ошибках может вызвать у пользователей разочарование и привести к тому, что пользователи покинут ваше приложение.
Как решить эту проблему:
- Используйте встроенную проверку в формах. Обидно, когда после отправки данных приходится возвращаться и исправлять ошибки. По возможности проверяйте значения полей сразу после ввода, чтобы пользователи могли сразу их исправить.
Пример встроенной проверки. Подход «вознаграждать рано, наказывать поздно». Изображение Mihael Konjević
- Напишите сообщения об ошибках. Сообщение об ошибке должно объяснять основную причину проблемы и информировать пользователей, как ее решить.
Это сообщение об ошибке мало что говорит обычным пользователям. Его написал разработчик для разработчика.
7. Необходимость вводить слишком много данных
Ввод данных – сложный и подверженный ошибкам процесс. Чем больше данных нужно вводить в приложении, тем менее приятным становится взаимодействие.
Как решить эту проблему:
- Не спрашивайте дополнительных подробностей. Спрашивайте только то, что действительно важно для использования приложения. Повторно используйте ранее введенные данные вместо того, чтобы просить пользователя ввести их еще раз.
- Выберите подходящую клавиатуру. Если пользователю нужно ввести номер телефона или почтовый индекс, вам потребуется цифровая клавиатура.
Подберите клавиатуру к требуемому вводу текста. Изображение ThinkWithGoogle
- Используйте возможности устройства для ввода данных. Например, приложения электронной коммерции могут предлагать использовать камеру для ввода информации о кредитной карте.
Использование камеры устройства для сбора информации о кредитной карте. Изображение Business Insider
- Предлагайте автодополнение и автозаполнение. Заполнение поля адреса часто является самой проблемной частью любой регистрационной формы. Такие инструменты, как Place Autocomplete Address Form(который использует как геолокацию, так и предварительное заполнение адреса для предложений на основе точного местоположения пользователя), помогают пользователям вводить свой адрес с меньшим количеством нажатий клавиш.
Автозаполнение адреса. Изображение formassembly
8. Нетрадиционные жесты
Когда дизайнер решает отклониться от общепринятого жеста, это обычно плохо заканчивается. Самый большой недостаток использования в интерфейсе нетрадиционных жестов – это высокая кривая обучения. Людям нужно учить новые жесты и запоминать их.
Как решить эту проблему:
- Используйте обычные жесты. Самые распространенные жесты – это скролл, свайп, щипковый жест для изменения масштаба.
Обычные жесты. Изображение James DeBrock
- Предлагайте жесты в качестве дополнения к видимым параметрам навигации, а не вместо них. Жесты могут работать как горячие клавиши для навигации, но не как полная замена видимых меню.
Этот мобильный интерфейс предлагает пользователям два варианта ввода пункта назначения – касание или голос. Изображение Sang Nguyen
9. Отсутствие визуальной обратной связи
Отсутствие обратной связи может сбить с толку пользователей и заставить их задуматься, работает приложение или нет.
Как решить эту проблему:
- Предоставляйте фидбек на взаимодействия. Обеспечьте визуальную, звуковую или тактильную обратную связь на взаимодействия пользователей.
Визуальный фидбек для кнопки загрузки. Изображение Aaron Iker
10. Раздражающие уведомления
Раздражающие push-уведомления – одна из главных причин, по которой люди удаляют мобильные приложения.
Как решить эту проблему:
- Только важные push-уведомления. Убедитесь, что каждое уведомление, которое вы отправляете своему пользователю, представляет для него ценность.
Выберите подходящий тип уведомления в зависимости от срочности и содержания. Изображение Appboy
- Не забрасывайте пользователей уведомлениями. Не отправляйте слишком много уведомлений за короткий период.
11. Раздражающие визуальные эффекты
Слишком много мобильных приложений используют ненужные визуальные эффекты. Хотя у них добрые намерения (радовать пользователей), они зачастую создают приложения, которые слишком раздражают.
Как решить эту проблему:
- Избегайте использования слишком большого количества чисто декоративных иллюстраций. Потому что они не приносят большой пользы для пользовательского опыта.
- Оцените долгосрочный эффект от использования анимации. Даже хорошая анимация может раздражать, когда ею злоупотребляют. При проектировании анимации спросите себя: «Будет ли анимация раздражать после сотого использования?»
Эта анимация может быть отличной во время онбординга, но в повседневной жизни она может раздражать. Изображение Cuberto
- Предложите возможность отключить анимацию. Пользователи, страдающие укачиванием, часто отключают анимированные эффекты в настройках ОС. Если в настройках специальных возможностей устройства включена опция уменьшения движения, ваше приложение должно отключить или, по крайней мере, минимизировать собственные анимации.
Перевод статьи uxplanet.org
Найстарші коментарі (0)