kazminaviktoriya1
Перейти в профиль
Выйти из профиля
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42"><rect fill-opacity="0"/></svg>)
Добавить аккаунт
Принципы проектирования пользовательского интерфейса
В этом уроке вы узнаете, что такое хороший пользовательский интерфейс и каких принципов стоит придерживаться при его проектировании.
Процесс проектирования пользовательского интерфейса начинается с того, что команда разработки стремится понять пользователей ПО.
Пользователи — это в первую очередь люди. Независимо от профессии и уровня компьютерной грамотности им свойственны определённое поведение и особенности восприятия информации. Исследование этих особенностей позволило сформулировать принципы, которым должен соответствовать любой пользовательский интерфейс.
Проектирование пользовательского интерфейса — не просто определение набора кнопок и распределение информации по экрану.
Проектирование пользовательского интерфейса — это проектирование взаимодействия пользователя с интерфейсом и ПО в целом.
При работе с ПО пользователь сталкивается с когнитивным сопротивлением.
Когнитивное сопротивление — это ощущение, которое возникает, когда человек пытается разобраться в сложной системе.
При взаимодействии с программами показатель когнитивного сопротивления становится высоким. Взаимодействие с физическими устройствами, пусть даже сложными, как правило, вызывает более низкое сопротивление. Всё потому, что механические устройства обычно имеют ограниченное количество состояний по сравнению с количеством внешних воздействий. Что это значит? Например, у пульта от кондиционера определённое количество кнопок и сигналов, а его интерфейс не меняется (кнопки не превращаются во что-то другое, и пользователь работает с понятными элементами). Графический интерфейс может меняться в зависимости от взаимодействия с ним. Например, в ночное время приложение может автоматически включить тёмную тему.
Принципы, которые используются для проектирования любых интерфейсов, универсальны и направлены на устранение когнитивного сопротивления при работе с пользовательским интерфейсом.
Принципы проектирования пользовательского интерфейса
Есть семь важных принципов проектирования интерфейса. Если соблюдать эти принципы, можно получить UI, который будет нравиться пользователю.
KISS
KISS (Keep It Simple and Straightforward или Keep It Short and Simple. Неофициальный вариант: Keep it simple, stupid — «делай просто, глупец»). Суть этого принципа полностью отражает его название — «делай просто и понятно».
Именно хороший интерфейс — простой и интуитивно-понятный в использовании. Он должен решать определённую задачу пользователя при минимальном количестве усилий. Элементы интерфейса, которые не влияют на решение задачи пользователя, стоит без раздумий убирать.
Хороший дизайн — это как можно меньше дизайна. Концентрируйтесь на основных задачах продукта и не перегружайте его множеством дополнительных функций. Дитер Рамс, дизайнер компании Braun
Нужно бороться с желанием продемонстрировать все возможности ПО в одном месте. Каждый новый элемент интерфейса отвлекает пользователя от основной задачи, повышает вероятность того, что он совершит ошибку и получит негативный опыт. Всё это приводит к тому, что пользователь не будет в полной мере удовлетворён опытом взаимодействия с ПО.
Например, человек использует самокат, чтобы добраться из точки А в точку Б. Дополнительные элементы самоката усложняют эту базовую задачу — повышают уровень сложности использования самоката, поднимают «порог входа» для новых пользователей, повышают риск ошибки в процессе эксплуатации. В результате пользователь будет вымотан, растерян или даже попадёт в ДТП, то есть не получит удовольствия от поездки, будет реже пользоваться самокатом.
Хорошо, если пользователь может отказаться от использования неудобного ПО. Но нельзя свыкаться с мыслью, что пользователю придётся приспособиться к нему и использовать ПО вопреки своему удобству из-за отсутствия других вариантов.
Предсказуемость и привычность (Expectation effect and Familiarity)
С KISS тесно связан следующий принцип проектирования UI: интерфейс должен быть предсказуемым и привычным.
У большинства пользователей уже есть опыт взаимодействия с другими ПО. Если новый интерфейс потребует много усилий для того, чтобы научиться с ним работать, это не принесёт пользователю удовлетворения. Иными словами, не заставляйте пользователя слишком много думать.
Идеальным интерфейсом легко начать пользоваться, а разобраться в его базовых функциях очень просто.
Например, нам привычно, что мигающие красные лампочки на устройствах сообщают о неисправности или о чём-то предупреждают. Поэтому не стоит использовать их для того, чтобы сообщить пользователю об удачной настройке прибора.
Интерфейс должен соответствовать современным тенденциям, но решение задач пользователей и заинтересованных лиц всегда в приоритете.
Если же следование трендам — одно из ключевых требований к ПО, то соответствие последним тенденциям оправданно. В остальных случаях стоит задать себе вопрос: «С какой целью мы используем этот популярный элемент интерфейса? Как это повлияет на опыт пользователя или решение задач заинтересованных лиц?». Необычное дизайнерское решение может привлечь новых пользователей, но бывает и так, что никто не может объяснить, зачем нужен некий элемент интерфейса и что он даёт.
В 2011 году стало модным использовать на сайтах параллакс-эффект. При таком эффекте во время прокручивания страницы элементы сайта двигаются с разной скоростью. Пример параллакс-эффекта вы найдёте по ссылке. Параллакс может произвести впечатление на пользователя, но мешает эффективной работе с сайтом. Например, пользователю, скорее всего, неудобно заполнять длинную форму на сайте с неравномерно движущимися элементами.
Терпимость к ошибкам (Mistakes tolerance)
Ошибки в интерфейсе могут появляться по самым разным причинам. Например:
- Созданный интерфейс непривычен для пользователя — он случайно нажимает не ту кнопку.
- Пользователь ошибся при вводе данных, то есть непреднамеренно совершил ошибку.
- В системе произошла ошибка, и интерфейс сообщает об этом пользователю (ошибки в системе бывают, но важно, чтобы интерфейс пояснял пользователю, что случилось и как с этим быть)
UI должен помогать пользователям избегать ошибок. Если ошибки всё-таки произошли, их последствия должны сводиться к минимуму.
Пример терпимости (толерантности) к ошибкам — возможность три раза ошибиться в пин-коде от банковской карты прежде, чем она заблокируется.
Ещё один пример: подсказка о том, что у пользователя включилась функция Caps Lock, при которой все буквы становятся прописными. Интерфейс может отображать такую подсказку, когда пользователь вводит на сайте пароль.
Если ошибка всё-таки произошла, не стоит оставлять пользователя с ней один на один. Неважно, почему случилась ошибка (пользователь ли сделал что-то не так, или в системе произошёл сбой), нужно понятно объяснить пользователю, что случилось и какие действия ему нужно предпринять.
Важно помнить, что ошибка в интерфейсе — это не ошибка пользователя, и нельзя обвинять его в этом. Нужно помогать пользователю избегать ошибок, позволить ему исправить ошибку и максимально защищать от них в дальнейшем.
Закон Фиттса (Fitt’s Law)
Закон Фиттса гласит: «Чем меньше цель и больше расстояние до неё, тем больше времени требуется, чтобы попасть в цель». В контексте интерфейса этот закон говорит о том, что чем меньше объект интерфейса и чем дальше он находится от области, на которой сосредоточено внимание пользователя, тем больше времени ему потребуется, чтобы совершить действие с этим объектом (кликнуть по кнопке, выделить поле, просмотреть контент).
Закон Фиттса важно учитывать при проектировании UI. Если элементы интерфейса используются часто, они должны быть достаточно большими, заметными, а ещё должны находиться у пользователя в быстром доступе. И наоборот: если элементы интерфейса используются редко или создают сложности при их случайной активации, такие элементы стоит удалить или сделать менее заметными, уменьшив их размер.
Иерархия и группировка (Hierarchy & Group)
Хороший интерфейс не заставляет пользователя блуждать в поисках нужной информации или функции ПО.
Чтобы направить взгляд пользователя в необходимом направлении, используется визуальная иерархия элементов. Элементы группируются по важности для пользователя и всех заинтересованных лиц (от наиболее важных к наименее важным). Это повышает удовлетворённость от использования.
Несколько рекомендаций по группировке элементов интерфейса:
- Группируйте важные элементы, чтобы облегчить их поиск.
- Чем важнее информация, тем больше места в интерфейсе она должна занимать.
- Не пренебрегайте выравниванием элементов (по левому, правому краю или по центру). Это создаёт ощущение порядка и организованности. Пользователь будет избегать ПО, которое вызывает у него ощущение хаоса.
Поддержание контекста использования (Content awareness)
Пользователь должен понимать, где находится, на каждом этапе взаимодействия с интерфейсом. Это называется контекст использования. И хороший UI должен этот контекст поддерживать.
Этот принцип нужно соблюдать при создании навигации пользователя во время использования ПО.
Например, когда пользователь бронирует билет на сайте, он выполняет множество разных действий: вводит данные паспорта, выбирает дополнительные услуги, меняет дату обратного билета. В каждый момент времени он должен понимать, на каком этапе покупки билета находится, какие данные он уже ввёл, как меняется цена в зависимости от выбора дополнительных услуг. Пользователь быстро устанет, если ему придётся держать в голове весь контекст: какие даты он выбрал несколько минут назад, какую сумму нужно прибавить к стоимости билета, если ему нужно оплатить дополнительный багаж и прочее.
Если интерфейс поддерживает контекст, пользователь будет чувствовать уверенность в своих действиях и получит позитивный опыт от использования ПО.
Эстетика (Estetics)
Эстетичный интерфейс — то, что позволяет получить удовольствие от использования ПО. Если интерфейс хорошо решает задачи, пользователь будет доволен, а если интерфейс при этом ещё и красивый, пользователь такое ПО полюбит.
Интерфейс можно считать эстетичным, если в нём соблюдаются графические принципы, такие как контрастность, типографика, баланс информации и другие. Создание эстетичного интерфейса — это зона ответственности дизайнера. При этом вся команда разработки, включая системного аналитика, должны понимать важность эстетики при создании ПО.
Не всем правилам нужно следовать
В веб-дизайне есть правило трёх кликов: пользователь должен делать не больше трёх кликов, чтобы получить желаемый результат. Если пользователю требуется больше трёх кликов мыши для решения своей задачи, он с большей вероятностью уйдёт с сайта.
Не всегда это правило стоит воспринимать буквально. Например, форму заявки на кредит можно заполнить в два клика, но для того, чтобы их сделать, нужно прочитать много сложно написанного текста мелким шрифтом, а значит, нужно приложить много усилий.
Поэтому, принимая решение о том, сколько кликов должен предполагать интерфейс, не нужно гнаться за количеством. Куда важнее обращать внимание на объём усилий, которые пользователь должен приложить для совершения каждого клика.
Принципы проектирования GUI для сенсорных экранов
За последнее десятилетие сильно выросла популярность сенсорных экранов, где вместо мыши пользуются пальцем. Сенсорный экран, или тачскрин (touchscreen), сегодня используется не только в смартфонах и банкоматах, но и в приборных панелях автомобиля, информационных стойках торговых центров. Прикосновение к экрану отличается от клика мыши, и это стоит учитывать при проектировании:
- Размер кнопок должен быть достаточно большим для выполнения нужного действия (закон Фиттса). Согласно рекомендации по разработке пользовательских интерфейсов (Human Interface Guidelines, HIG), минимальный размер кнопки на тачскрине должен составлять 44х44 px.
- Группировке и иерархии элементов нужно уделять больше внимания, чтобы пользователю не приходилось тянуться рукой до нужных элементов. Владельцы смартфонов с большими экранами будут благодарны, если им не придётся постоянно перехватывать другой рукой устройство, чтобы дотянуться до нужных кнопок.
- При работе с сенсорным экраном вероятность ошибки повышается, ведь пользователь может промахнуться и попасть большим пальцем по маленькой кнопке.
- Навигация в интерфейсе должна быть адаптирована под действия рук, а не под работу с колёсиком мышки.
- Текст всегда понятнее иконки, но обычно на экране не так много пространства, чтобы вместо иконок отображался текст. Поэтому стоит вдумчиво подходить к этому элементу интерфейса и использовать знакомые пользователю изображения, которые можно однозначно интерпретировать. Хороший пример — иконка, напоминающая сэндвич (её ещё называют бургер-меню), за которой скрывается меню.
Подведём итоги
Проектирование интерфейса — это проектирование взаимодействия пользователя с интерфейсом и ПО в целом.
Можно выделить семь принципов проектирования UI:
- KISS (Keep It Simple and Straightforward): делайте просто и понятно.
- Предсказуемость и привычность: не заставляйте пользователя слишком много думать.
- Толерантность к ошибкам: уменьшайте вероятность ошибок при использовании интерфейса и помогайте пользователю их предотвращать.
- Закон Фиттса: чем меньше объект интерфейса и чем дальше он расположен, тем больше времени потребуется пользователю, чтобы добраться до него и совершить с ним действие.
- Группировка и иерархия: элементы интерфейса нужно группировать по важности и частоте использования.
- Поддержка контекста: на каждом этапе взаимодействия с интерфейсом пользователь должен понимать, где он находится и что происходит.
- Эстетика: эстетичный интерфейс — это «вишенка на торте», которая даёт возможность получить максимальное удовольствие от использования ПО.
Важное правило: интерфейс нужно проектировать для пользователя, а не для себя. То, что удобно вам, не обязательно будет удобно пользователю.
