Руководство по дизайну пользовательского интерфейса: 10 правил Якоба Нильсена

Руководство по дизайну пользовательского интерфейса: 10 правил Якоба Нильсена

Научитесь создавать проекты, которые полностью удовлетворят потребности и запросы вашего клиента, применяя рекомендации Якоба Нильсена (Jakob Nielsen) и Рольфа Молика (Rolf Molich) по улучшению пользовательского интерфейса. Данные методы отразились во многих продуктах, разработанных успешными компаниями, такими как: Apple, Google, и Adobe. Еще одним, ярким доказательством того, что команда проектировщиков в этих компаниях учитывает и применяет данные правила, являются опубликованные и распространенные ими, рекомендации по дизайну пользовательского интерфейса. В этой статье вы узнаете, как придерживаться 10 эмпирических правил, для улучшения удобства использования, практичности и привлекательности ваших проектов.

10 правил Нильсена (Nielsen) и Молика (Molich) по дизайну пользовательского интерфейса

В 1990 году Якоб Нильсен (Jakob Nielsen) – известный консультант по веб-дизайну и партнер в Nielsen Norman Group, вместе с Рольф Моликом (Rolf Molich) – еще один выдающийся эксперт по вопросам использования продуктов и доступности проектов, обнародовали список из 10 правил, которые помогут в разработке удобного интерфейса для пользователя. Обратите внимание, что между методами Нильсена – Молика (Nielsen-Molich) и работой “8 золотых правил” Бена Шнейдермана (Ben Shneiderman) – много общего! Кроме того, спустя 4 года после первоначальной публикации Шнейдермана (Shneiderman), эти 10 общепринятых рекомендации повторили и дополнили 8 золотых правил Бена Шнейдермана (Ben Shneiderman).

• Видимость системного статуса

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

• Соответствие системы и реального мира

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

• Пользовательский контроль и свобода действий

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

• Логичность и стандарты

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

• Предотвращение ошибок

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

1. Воспринять, а не запомнить

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

• Гибкость и эффективность использования

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

• Эстетический и минималистский дизайн

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

• Помогите пользователям распознать, диагностировать и оправиться после ошибки

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

• Помощь и документация

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

Корпорация Google – многомиллиардная технологическая компания, безусловно, создает проекты, которые отражают вышеупомянутые методы. Джон Уайли (Jon Wiley) – главный дизайнер поисковика Google в 2012 году сказал:

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

Вышеупомянутые рекомендации Нильсена – Молика (Nielsen-Molich) по созданию удобного интерфейса для пользователя, также включают в себя эти три ключевые компонента. Это означает, что вы можете улучшить впечатление пользователя о вашем дизайне и проекте в целом, используя и применяя данные руководства.

Пример того, как Adobe удачно интегрирует эвристики Нильсена и Молика

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

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

1. Видимость системного статуса

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

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

2. Соответствие системы реальному миру

Яркий пример того, как Photoshop имитирует реальный мир в терминах и представлениях, которые понимают их целевые пользователи – это использование информационной структуры и терминологии, такой же как мы привыкли слышать в реальном мире, в сфере фотографии и печатных СМИ. Привычные концепции и термины, такие как RGB, Hue / Saturation / Brightness и CMYK, используются для представления цвета, в то время, как различные инструменты, такие как  “Осветлитель” (англ. – “dodge tool”)  и “Затемнитель” (англ. – “burn tool”), имитируют традиционную технику темной комнаты для фотографий.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Такие инструменты фотошопа как Dodge Tool и Burn Tool имитируют традиционную технику темной комнаты для фотографий.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Заметим, что Photoshop использует термин «экспозиция», так же как обычно им пользуются в мире фотографии.

3. Пользовательский контроль и свобода действий

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

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

Пользователи все контролируют, они могут сделать шаг назад/шаг вперед в меню «Правка» или использовать быстрые клавиши Photoshop – Alt + Ctrl + Z.

4. Логичность и стандарты

Photoshop придерживается стандартного формата и внешнего вида, когда дело доходит до строки меню. Они также используют общеизвестную терминологию, такую как: «Новый …», «Открыть …», «Сохранить как …» и т. д.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Меню «Файл» в Photoshop включает в себя множество знакомых опций.

5. Предотвращение ошибок

Чтобы пользователи не делали ошибок, Photoshop дает краткое описание или обозначение инструментов, при наведении на них курсором. Таким образом, человек понимает, подходит ему инструмент или нет.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Пользователь наводит на значок ластика и Photoshop отображает метку «Ластик».

6. Восприятие, а не запоминание

Абсолютно не важно, какое действие будет выполнять пользователь, будь то добавление фильтров или открытие нового файла, Photoshop поможет человеку сделать правильный выбор! Это позволяет пользователю визуально распознавать то, что они ищут, вместо того, чтобы вспоминать имя или искать что-то в поиске фотошопа. Возможно, вы сталкивались с другими программами редактирования фотографий, которые просили вспоминать и вводить имя нужного вам файла. На самом деле, довольно-таки сложно вспомнить название файла, так как в основном оно выглядит подобным образом: 29412_09342.JPG

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Пользователю легко визуально распознать изображение заката по миниатюре и выбрать его.

7. Гибкость и эффективность использования

Одна из многих причин, почему пользователи любят Photoshop – это простота и эффективность использования данной программы! Люди могут легко использовать гибкость фотошопа: настраивать рабочую область, сохранять файлы, редактировать их снова, улучшать эффективность работы и тд.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

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

8. Эстетический и минималистский дизайн

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

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Панель инструментов Photoshop минималистична! Она позволяет избежать беспорядка, отображая инструменты только в виде иконок.

9. Помощь пользователю в распознании, диагностике и восстановлению после ошибки

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

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

В этом сообщении об ошибке, Photoshop объясняет, что пошло не так, какая причина и как устранить неполадки.

10. Помощь и документация

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

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

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

10 шагов для улучшения удобства использования, полезности и востребовательности проекта, путем применения рекомендаций Нильсена и Молика ( Nielsen and Molich’s Interface Design Guidelines)

Как разработчик, вы должны уметь оценивать и критиковать дизайн собственных проектов так же хорошо, как и работу других разработчиков, опираясь на обоснованные доводы и знания! Применение 10 общепринятых правил Нильсена и Молика  (Nielsen and Molich’s Guidelines), при оценке дизайна вашего интерфейса, поможет лучше понять и увидеть потенциальные проблемы, создать прекрасные впечатления пользователя от вашего проекта. Ниже вы найдете рабочую таблицу где сможете практиковаться, как только научитесь распознавать, применялись ли данные правила и когда они были нарушены. Ну что ж… Наконец-то пришло время улучшить сайт или приложение, применяя 10 известных правил.

Напоследок…

Опираясь на инструкции по интерфейсу Нильсена и Молика (Nielsen and Molich), вы должны всегда помнить об удобстве использования, полезности и целесообразности вашего проекта для пользователя! Ровным счетом, так же как и дизайнеры успешных компаний (Apple, Google и Adobe), при разработке проекта, вы будете поддерживать свои решения с эвристикой и убеждаться в том, что создаете полезный и красивый дизайн! Чтобы практиковать распознавание этих 10 эмпирических правил, продолжайте работу и выполните упражнение, описанное в прикрепленном файле.

Рекомендации:

Чтобы просмотреть «Исследование удобства использования Adobe Photoshop», перейдите по ссылке:
https://courses.cs.washington.edu/courses/cse595/98wi/projects/photoshop.html

Чтобы найти дополнительную информацию о работе Якоба Нильсена (Jakob Nielsen) «Повышение объяснительной силы юзабилити », см.

https://static.aminer.org/pdf/PDF/000/089/679/enhancing_the_explanatory_power_of_usability_heuristics.pdf

Чтобы просмотреть дополнительную информацию о дизайнерском мышлении Джона Вилей (Jon Wiley), пожалуйста, перейдите по ссылке:

https://www.fastcodesign.com/1671425/how-googles-designers-are-quietly-overhauling-search