1 5 - 10 эвристических принципов для мобильных интерфейсов

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

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

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

Эвристика юзабилити начинается с потребностей пользователя

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

Бен Терретт, директор по дизайну проекта, начал с набора принципов дизайна интерфейса, которые варьировались от стратегии продукта до подходов визуального дизайна. Самый первый принцип стал путеводной звездой к успеху продукта: «Всегда начинайте с потребностей пользователей. Если вы не знаете, что нужно пользователю, вы не создадите правильный продукт. Проводите исследования, анализируйте данные, общайтесь с пользователями. Не делайте предположений. Имейте сочувствие к пользователям и помните, что то, что они просят, не всегда то, что им нужно».

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

1. Понятность структуры системы

Делайте определенные элементы и структуры визуально заметными, чтобы пользователь имел достаточное понимание контекста.

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

0_BAE8DM_ocDtJZg-c
Навигационное меню превращается в гамбургер-меню, указывая, где информацию можно найти позже. (Дизайн Gal Shir)

2. Моментальный фидбек на действия

Ответ на действие пользователя, подтверждающий, что система получила запрос.

Любое действие пользователя должно вызывать моментальную реакцию интерфейса. Мгновенный фидбек убеждает пользователя в том, что система выполняет необходимые действия. Nick Babich, специалист по UX в Smashing Magazine, использует индикатор прогресса, как хороший пример понятного статуса действия. Он визуально информирует пользователя о том, что его действие было принято, и система вскоре сообщит о следующем действии. Без индикатора пользователь остается неуверенным и разочарованным, из-за чего он может покинуть сайт или приложение.

0_9VP-bybmPpAQo8Ns
Простая анимация подтверждает, что действие «потяните, чтобы обновить» было принято, а контент ниже обновлен. (Дизайн jiangxiaobei)

3. Информирование об ошибках

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

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

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

0_uPupo3gf8fjFHJTD
Пустое состояние в этом мобильном интерфейсе объясняет, почему пользователь видит этот экран, и предлагает два действия, которые устранят ошибку. (Дизайн Murat Mutlu)

4. Гибкость использования

Интерфейс, который пользователи с различным диапазоном опыта могут интуитивно и эффективно использовать.

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

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

Принципы когнитивной инженерии от Jill Gerhardt-Powal «обеспечивают многократное кодирование данных, когда это необходимо – система должна предоставлять данные в различных форматах и ​​/ или уровнях детализации для обеспечения гибкости когнитивных функций и удовлетворения предпочтений пользователя». Интерфейс перегружающий или ограничивающий пользователя обеспечит неприятный опыт.

5
Новый пользователь должен познакомиться с функциональностью инструмента, но опытный пользователь никогда не увидит подсказки для действий, которые он регулярно совершает. (Дизайн Lakshmi Karuppiah)

5. Знакомство с универсальным опытом

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

История графического пользовательского интерфейса (GUI) началась, когда Apple использовала реальные ссылки в первом удобном дизайне компьютерного интерфейса. «Lisa» была разработана с такими элементами, как иконка папки, чтобы указать файловую организацию. Эти физические ссылки были полезны, когда цифровые взаимодействия были незнакомы большинству людей, но с ростом цифровой грамотности универсальные ссылки больше не должны быть такими буквальными.

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

6
Эти две иконки мгновенно узнаваемы и четко обозначают действие, понятное большинству пользователей. (Дизан Mohammad Amiri)

6. Ограничение информации и эстетики дизайна

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

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

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

7
The British Government Digital Services разбило информацию, чтобы определить, что нужно знать пользователям, и разработало визуальный дизайн, который исключил все ненужное для обеспечения ясности информации. (Дизайн Government Digital Services)

7. Функция имеет более высокий приоритет над формой

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

«Если вы думаете, что ваша идея умная и изощрённая, будьте осторожны – это, вероятно, самообман», – Дон Норман, продуктовый дизайнер и автор книги «Дизайн привычных вещей».

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

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

8
Этот цифровой посадочный талон учитывает, какая информация понадобится путешественнику, и использует визуальные методы, чтобы сделать информацию функциональной. (Дизайн Marin Begovic)

8. Доступность информации

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

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

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

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

9
Приложение Uber предоставляет три уровня услуг такси и делает каждый вариант легко доступным для пользователя в момент необходимости. (Дизайн Uber)

9. Надежность согласованности

Использование последовательных и стандартизированных элементов, таких как слова, ситуации и действия, для создания единого опыта.

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

«Это не смирительная рубашка или книга правил. Бывают разные обстоятельства». Принципы проектирования GOV.UK гласят, что интерфейс должен быть согласованным, но не единообразным. Jill Gerhardt-Powal им вторит: «Новая информация должна быть представлена ​​в привычных формах (например, схемах, метафорах, повседневных терминах), чтобы ее было легче усваивать».

10
Повышенное внимание Google к дизайну проявляется в подробных рекомендациях по всем дизайнам пользовательского интерфейса. (Дизайн Material)

10. Разумное резервирование

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

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

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

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

5 UX способов начать разработку дизайна правильно

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

OOUX: Основа дизайна взаимодействий

Свой подход “Объектно-ориентированного UX” (Object-Oriented UX – OOUX) я представил в прошлом году на A List Apart. Подход подразумевает дизайн объектов перед проработкой действий.

Полное руководство по процессу продукт-дизайна

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