Топ-5 принципов проектирования пользовательского интерфейса, которые необходимо знать

Привет!

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

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

Если вы заинтересованы в том, чтобы освоить новую профессию, то мы советуем вам обратить свое внимание на курс от образовательной платформы Netology «UX/UI-дизайнер». По итогам данного курса вы освоите ИТ-профессию без программирования и будете работать удалённо или на фрилансе, научитесь создавать креативный и интуитивно понятный дизайн веб- и мобильных интерфейсов, а также сможете начать поиск работы уже через 3 месяца обучения.

Что же такое принципы проектирования пользовательского интерфейса?

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

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

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

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

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

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

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

Навигация

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

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

Указатели

Ворчание пользователя «Где я?» или «Как я сюда попал?» – признаки неудачного дизайна пользовательского интерфейса. Четкие указатели могут гарантировать, что наши друзья-пользователи никогда не останутся в недоумении относительно своей ориентации в интерфейсе. 

Логичные визуальные подсказки, встроенные в архитектуру страницы, такие как заголовки страниц и выделение недавно выбранных вариантов навигации, обеспечивают такую ориентацию.

Обратная связь

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

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

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

Отменить

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

Это очень распространено в сфере пользовательского интерфейса графического дизайна, например, кнопки Undo и Redo в Photoshop. Простые кнопки «Назад» и «Вперед» в онлайн-формах обеспечивают такое же чувство безопасности.

Ярлыки

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

Классическим примером экономящего время навигационного сочетания клавиш является включение компанией Microsoft в Windows примерно в 1992 году сочетаний Ctrl+Z, Ctrl+X, Ctrl+C и Ctrl+V для отмены, вырезания, копирования и вставки. Хотя такие команды, как «копировать» и «вставить», вошли в обиход, комбинации непонятных сочетаний клавиш все еще предлагают глубокие уровни управления, недоступные обычным пользователям.

Уменьшите нагрузку

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

Разбивка на части

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

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

Магическое число 7

Просмотрите любое приложение или веб-сайт, и вы почти наверняка увидите «карусель» в действии. В таких приложениях, как eBay или Netflix, например, необычно видеть карусель из более чем семи изображений одновременно.

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

Разработка эффективного макета

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

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

Подчеркивание

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

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

Визуальная иерархия

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

Белое пространство

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

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

Быть последовательным

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

Предсказуемость

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

Ключом к достижению этого состояния является предсказуемость действий. Включите визуальные подсказки в свой пользовательский интерфейс, чтобы пользователи не задавались вопросом «Должен ли я нажать эту кнопку?» или «Закончил ли я свою задачу?».

Знакомство

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

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

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

Направляйте диалог на завершение

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

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

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

Выводы

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

Вкратце, вот основные выводы из нашего списка пяти лучших принципов:

1. Контроль – это ключ. Отличный дизайн пользовательского интерфейса ставит пользователя на место водителя продукта, давая ему комфорт и уверенность в том, что он может управлять и осваивать опыт с самого начала.
2. Хорошие указатели и обратная связь позволяют пользователю успешно ориентироваться в вашем продукте.
3. Пользователи не должны бояться играть, исследовать или ломать продукт. Тревожный пользовательский интерфейс ограничит навигацию и замедлит освоение интерфейса. 
4. Внедрение таких методов взаимодействия, как кнопки «назад» или «отмена», снизит риск ошибок в вашем пользовательском интерфейсе, освобождая пользователя для экспериментов и прогресса.
5. Не нагружайте когнитивную нагрузку пользователя слишком большим количеством информации – помните о законе Миллера и магическом числе семь.
6. Эффективная компоновка страницы имеет решающее значение для хорошего дизайна пользовательского интерфейса.
7. Используйте такие приемы, как выделение, визуальная иерархия и белое пространство, чтобы помочь направить взгляд пользователя на нужные элементы вашего продукта.
8. Не изобретайте колесо: последовательность, предсказуемость и знакомость – ключевые составляющие успешного пользовательского интерфейса.
9. Будь то в конце раздела или в завершении всего продукта, используйте приведенные выше приемы и советы, чтобы направить диалог к завершению.

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

До новых встреч!