Принципы создания пользовательских интерфейсов: Принципы и правила проектирования пользовательского интерфейса

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



Исследование человеко-машинных интерфейсов — область, которая активно развивается и объединяет достижения многих наук, таких как эргономика, когнитивная психология, психология труда, информатика, теория автоматического управления, usability engineering (проектирование ПО и компьютерных систем), техническая эстетика, управления процессами и промышленный дизайн и др. Она имеет дело с разработкой, развитием и применением одного из класса человеко- машинных интерфейсов — интерфейсами информационных (компьютерных) систем с точки зрения требований пользователя, а также с изучением окружающих явлений.

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

В настоящее время проблема человеко-машинного взаимодействия — одна из центральных в области создания автоматизированных систем.

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

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

Делайте это проще, но не примитивнее.

Альберт Эйнштейн

Золотое правило проектировщика гласит: «Никогда не делай другим того, что они сделали тебе. Вспомните, что вам не нравится в программном обеспечении, которым вы пользуетесь. И не делайте того же самого в программе, над которой работаете».

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

Три принципа разработки пользовательского интерфейса формулируются так:

1.Контроль пользователем интерфейса;

2.Уменьшение загрузки памяти пользователя;

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

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

Первый (краткий) список принципов проектирования принадлежит Элвину Харви Хансен (Alvin Harvey Hansen).

Принципы звучат так:

– знание пользователя;

– сокращение запоминания;

– оптимизация операций;

– устранение ошибок.

В 1984 г. вышла в свет классическая книга по взаимодействию человека и компьютера, содержащая более полный и обобщающий список принципов проектирования. Работа принадлежала Рубинштейну и Хершу (Rubenstein and Hersch), и представляла 93 принципа разработки: от «Проектировщики создают мифы, пользователи создают концептуальные модели» до «Снимайте на видео настоящих, действительных пользователей».

[3]

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

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

Правило 1: дайте контроль пользователю

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

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

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

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

Принципы, которые дают пользователю контроль над системой:

1. Благоразумное использование режимов.

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

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

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

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

«Пользователь должен иметь возможность производить действия спрограммой как спомощью мыши, так ис помощью клавиатуры»— так гласитодин из ключевых принципов организации Common User Access (CUA).

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

3. Сфокусируйте внимание пользователя.

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

4. Демонстрация сообщений, окажется полезной ипоможет вработе.

Во всем интерфейсе используйте понятные для пользователя термины. Они не обязаны знать о битах и байтах!

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

5. Необходимы условия для отработки немедленных и обратимых действий, атакже предоставления обратной связи.

Каждый программный продукт должен включать в себя функции отменить и повторить (UNDO/REDO).

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

6. Предоставьте пользователю понятные пути ивозможность ориентироваться

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

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

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

Не «жертвуйте» опытными пользователями во благо обычных. Вы должны предусмотреть для них быстрый доступ к функциям программы. Не утомляйте их прохождением многочисленных шагов для выполнения какого-либо действия, если они привыкли пользоваться одной макрокомандой. [2]

8. Облегчите работу пользователя синтерфейсом сделав его понятным и «прозрачным».

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

9. Дайте пользователю возможность приспособиться инастроить интерфейс по своему вкусу.

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

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

10. Разрешите пользователю напрямую манипулировать объектами интерфейса.

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

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

11. Позвольте пользователю думать, что он контролирует ситуацию

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

Правило 2: уменьшите нагрузку на память пользователя

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

1. Не загружайте кратковременную память.

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

2. Полагайтесь на распознавание, ане на повторение.

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

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

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

Когда пользователи находятся в каком-то режиме или работают мышью, это должно отражаться на экране. Индикация должна сообщать пользователю о режиме, в котором он находится. Форма курсора может меняться для указания текущего режима или действия, а индикатор — включаться и отключаться. Тест на визуальную информативность продукта: отойдите от компьютера во время выполнения задачи и позднее вернитесь к работе. Обратите внимание на визуальные подсказки интерфейса, которые должны информировать о том, с чем вы работали, где находились и что делали.

4. Предусмотрите функции отмены последнего действия, его повтора, атакже установки по умолчанию

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

5. Предусмотрите «быстрые» пути.

После достаточно хорошего освоения программного продукта, пользователи испытывают потребность, (которую не стоит игнорировать, однако при разработке следует действовать в соответствии со стандартами) — потребность в ускорителях! [2]

6. Активизируйте синтаксис действий собъектами.

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

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

7. Используйте метафоры из реального мира.

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

8. Применяйте раскрытие иобъяснение понятий идействий.

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

9. Увеличьте визуальную ясность.

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

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

Избегайте случайной группировки и ненужных выделений. Визуальная дезорганизация мешает использованию и восприятию. [3]

Правило 3: сделайте интерфейс совместимым

Одним из основных преимуществ совместимости является то, что пользователи могут перенести свои знания и навыки из старой программы, (которой они пользовались раньше), в новую.

Принципы создания совместимого интерфейса:

1. Проектирование последовательного интерфейса.

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

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

2. Общая совместимость всех программ.

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

– подача информации (подразумевается, что пользователи могут воспринимать информацию и объекты в похожем логическом, визуальном и физическом виде во всем программном продукте;

– поведение программы;

– техника взаимодействия. [5]

3. Сохранение результатов взаимодействия.

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

4. Эстетическая привлекательность ицельность.

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

5. Поощрение изучения.

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

Современные интерфейсы — более интуитивно понятны, предсказуемы, дружественны и привлекательны. Возрастание спроса на CD-ROM продукты, нашествие браузеров Internet, домашних страниц и прикладных программ подарило пользователям компьютеров целый мир.

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

Литература:

1. Логунова О. С. Человеко-машинное взаимодействие: теория и практика: Учебное пособие / О. С. Логунова, И. М. Ячиков, Е. А. Ильина. — Ростов: Феникс, 2006. — 285 с.

2. Головач В. Дизайн пользовательского интерфейса / первая книга

3. Купер А., Рейманн Р., Кронин Д., Носсел К. –Интерфейс. Основы проектирования взаимодействия. 4 изд. — Питер, 2017. — 720 с.

4. Тидвелл Д. Разработка пользовательских интерфейсов. 2 изд. — Питер, 2011. -480 с.

5. Акчурин Э. А. Человеко-машинное взаимодействие: Учебное пособие. — Москва: СОЛОН-ПРЕСС, 2009. — 94 с.

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

Принципы разработки пользовательского интерфейса | by Olga Zholudova | Начинающему UX-дизайнеру

Вы читаете перевод статьи Джошуа Портера “Principles of User Interface Design”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.

“Проектирование — это гораздо больше, чем просто компоновка, организация и даже редактирование; проектировать — значит придавать ценность и смысл, вносить ясность, упрощать и пояснять, преобразовывать, придавать лоск, привлекать внимание, убеждать и даже, возможно, развлекать” — Пол Рэнд

Интересуетесь свежими статьями по дизайну? Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

Ищите системное погружение в тему? Загляните в блог для дизайнеров.

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

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

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

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

Интерфейсы — это не памятники самим себе. Интерфейсы выполняют конкретные задачи, их эффективность измерима.

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

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

Не нужно замусоривать боковую панель приложения отвлекающими картинками … помните о ключевом назначении интерфейса.

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

breezzly.ru

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

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

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

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

Стремитесь к прямому управлению … спроектируйте максимально естественный интерфейс, словно его не касалась рука человека.

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

В основе каждого экрана нашего интерфейса должно лежать одно значимое для пользователя действие. Такой интерфейс проще изучать и использовать, а также его проще дополнить и расширить (при необходимости).

Экраны, в которых заложено два или более основных действий, быстро сбивают с толку.

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

Когда в основе экрана лежит одно основное действие, вы также можете добавить несколько второстепенных действий — но они должны выглядеть как второстепенные!

Смысл существования вашей статьи не в том, чтобы люди могли поделиться ею в Твиттере… смысл в том, чтобы люди ее прочли и поняли.

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

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

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

Сначала функция, потом форма.

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

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

А вот если элементы работают одинаково, то и выглядеть должны одинаково.

Но не менее важно, чтобы разные по сути элементы и выглядели по-разному — в то время как похожие будут внешне согласованы.

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

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

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

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

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

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

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

Цвета физических объектов могут меняться в зависимости от освещения. Дерево при дневном цвете и дерево на закате воспринимается совершенно по-разному.

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

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

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

Не стоит пускаться в лишние подробности или стараться рассказать все и сразу.

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

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

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

Пустое состояние — это не просто пустой экран … на этом этапе важно направить пользователя, подсказать, как использовать дизайн максимально эффективно.

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

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

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

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

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

Даже если дисциплина на первый взгляд не имеет отношения к дизайну — какие-то принципы могут “выстрелить” … что полезного мы можем привнести в дизайн из издательского или переплётного дела, программирования или скейтбординга, карате или тушения пожаров?

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

Если вам понравилась статья и перевод, дайте нам знать — нажмите 👏 (можно “хлопать” несколько раз!)

А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Нас можно найти в Facebook: Ольга Жолудова и Ринат Шайхутдинов.

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

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

Скачать приложение в Appstore →

https://itunes.apple.com/ru/app/mental-notes/id993592407?l=ru&ls=1&mt=8

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

Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!

Посмотреть каталог курсов →

breezzly. ru

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

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

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

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

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

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

1) Поместите пользователей в центр

Как всегда, первый принцип дизайна пользовательского интерфейса — сосредоточиться на людях (или «пользователях», как мы все говорим). Хороший пользовательский интерфейс прост и естественен в использовании, не сбивает пользователя с толку и делает то, что ему нужно.

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

2) Стремитесь к ясности

Цель пользовательского интерфейса — позволить пользователю взаимодействовать с веб-сайтом или приложением (или, в более широком смысле, с любым продуктом). Избегайте всего, что смущает людей или не помогает им взаимодействовать.

3)

Минимизация действий и шагов на экране

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

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

4) Стремитесь к простоте

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

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

5)

Будьте последовательны Насколько неприятно было бы сесть за руль автомобиля, если тормоз находится справа, а педаль газа слева? Или заполните веб-форму с помощью кнопки «Отправить» красного цвета и кнопки «Удалить» зеленого цвета.

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

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

Дизайн-система — отличный способ обеспечить согласованность дизайна пользовательского интерфейса.

Попробуйте слияние диспетчера компонентов

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

Попробуйте Merge Component Manager и откройте для себя возможности полнофункционального масштабируемого прототипирования. Запрос доступа!

6)

Ваша цель: сделать дизайн пользовательского интерфейса невидимым

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

7)

Предоставление полезной обратной связи

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

Обратная связь помогает ответить на вопросы в четырех областях: 

1. Местоположение: Вы здесь.
2. Статус: Что происходит? Это все еще продолжается?
3. Будущий статус: что дальше?
4. Исходы и результаты: Эй, что случилось?

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

8)

Снижение когнитивной нагрузки

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

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

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

9)

Сделайте его доступным

Дизайн пользовательского интерфейса должен учитывать проблемы доступности. В Интернете это часто означает, что люди с нарушениями зрения могут получить доступ к продукту и использовать его. Не стоит забывать и о дальтонизме. Примерно 1 из 12 мужчин (около 8%) и 1 из 200 женщин (около 0,5%) в той или иной степени дальтоники. Используйте цвет, чтобы подчеркнуть и подчеркнуть, но не полагайтесь полностью на цвет для передачи информации.

10)

Включить обратную связь с пользователем в пользовательский интерфейс

Не проектируйте в вакууме. Тестируйте и проверяйте выбор пользовательского интерфейса, собирая отзывы пользователей. Наблюдайте, как пользователи пытаются использовать ваш дизайн (без обучения их). Они в замешательстве? Могут ли они легко достичь желаемого результата? Делайте это как в процессе проектирования, так и постоянно оценивайте после запуска (тепловые карты — это один из способов отследить, насколько эффективен пользовательский интерфейс; другой — это A/B-тестирование).

11)

Гибкость

Создайте пользовательский интерфейс, который будет отлично работать и выглядеть на разных платформах. Конечно, его, возможно, придется настраивать в зависимости от форм-фактора устройства и его операционной системы (например, Android и iOS), но он должен быть достаточно гибким, чтобы работать на чем угодно.

12)

Визуальная структура

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

13)

Диалоги должны приводить к закрытию

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

14)

Предусмотреть четкий следующий шаг

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

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

Создать пользовательский интерфейс в UXPin очень просто. Работайте в браузере, получайте обратную связь в режиме реального времени и сотрудничайте со всей командой онлайн. С UXPin вы будете создавать, тестировать и повторять дизайн пользовательского интерфейса быстрее, чем когда-либо. Откройте для себя возможности UXPin для дизайна пользовательского интерфейса; кликните сюда.

Нашли это полезным? Поделиться с

6 ключевых принципов дизайна пользовательского интерфейса

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

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

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

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

Золотые правила дизайна пользовательского интерфейса

В своей книге «Проектирование пользовательского интерфейса» Бен Шнайдерман описывает восемь золотых правил дизайна пользовательского интерфейса. Давайте рассмотрим их подробно:

1.

Сделайте пользовательские интерфейсы согласованными

Майк Гилфиллан, технический ведущий разработчик Edge of the Web, говорит: «Единообразие является ключевым фактором — несколько цветов, шрифтов и стилей могут создать путаницу, в то время как согласованность создает знакомство».

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

2. Разрешить пользователям легко перемещаться с помощью ярлыков

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

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

3. Предоставьте информативную обратную связь

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

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

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

Создание учетной записи в Dropbox

Итак, я создал довольно сложный пароль с несколькими цифрами и символами:

Создание учетной записи в Dropbox

4. Дизайн диалогового окна для закрытия

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

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

5. Максимально предотвращайте ошибки

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

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

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

6. Дайте пользователям возможность легко отменить свои действия

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

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

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

7. Поддержка внутреннего локуса контроля

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

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

8. Минимизируйте нагрузку на память

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

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

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

Создавайте проекты, которые ваши пользователи (по-настоящему) любят

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

6 основных принципов дизайна пользовательского интерфейса

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

Ясность

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

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

Итак, когда вы создаете свой продукт, задайте себе следующие вопросы:

• Является ли ваша навигация интуитивно понятной? Направлены ли пользователи и поощряются ли они легко переходить с одной страницы на другую?
• Использовали ли вы хорошо заметные кнопки, побуждающие пользователей нажимать на них?
• Является ли цель каждого элемента вашего продукта, веб-сайта или приложения ясной и понятной?

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

Знакомство

Вы автоматически ищете меню в верхней части главной страницы нового веб-сайта?

Почему? Потому что именно так мы воспринимаем меню.

Отображение меню веб-сайта вверху — отличный способ включить в дизайн принцип знакомства, как Sephora делает здесь

Лучшие интерфейсы знакомы пользователям.

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

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

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

Внедрение в продукт принципа знакомства с пользовательским интерфейсом дает несколько преимуществ:

• Повышает удержание пользователей

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

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

• Проще для дизайнеров пользовательского интерфейса

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

• Сокращает кривую обучения пользователей

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

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

Управление пользователями

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

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

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

Аналогичным образом, при использовании оверлеев на своем веб-сайте убедитесь, что кнопка выхода {x} не заблокирована. В противном случае пользователи могут нажать кнопку «Назад» в браузере и вернуться на два шага назад вместо того, чтобы просто выйти из оверлея.

Посмотрите, как здесь четко видна и сразу заметна маленькая кнопка x.

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

Но вы можете найти кнопку выхода на этом экране?

5″ color=»#000000″> Невидимая кнопка выхода на оверлее может легко запутать и расстроить пользователей

Иерархия

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

Как говорит Паскаль Потвин, ведущий дизайнер IBM, «[…] Визуальная иерархия создает порядок важности визуальных элементов, чтобы привлечь внимание пользователя и упростить восприятие информации».

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

• Цвет

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

Monese и Mailchimp прекрасно используют цвет в своих проектах.

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

• Размер

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

• Шрифты

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

Odoo использует шрифты разного размера для создания визуальной иерархии

Обратите внимание, что основной заголовок, который точно объясняет, о чем идет речь, имеет самый крупный размер шрифта, а два основных слова («реальный» и «CRM») выделены жирным шрифтом чтобы подчеркнуть его сообщение.

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

• Негативное пространство

Дайте вашим элементам передышку — не втискивайте все объекты и элементы в кучу на экране. Негативное пространство выделяет важные элементы. Swaggar отлично использует пустое пространство на главной странице своего сайта.

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

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

Гибкость

«Гибкость не просто следует линейному пути, она заключается в том, чтобы знать своих клиентов и обеспечивать гибкость для различных намерений клиентов», — объясняет Брук Коулинг, соучредитель и директор по маркетингу Digital of Things.

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

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

• Ярлыки для выполнения часто используемых действий одним щелчком мыши
• Расширенные функции поиска
• Включение панелей фильтров

И подумайте о мультимодальности.

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

«Многие пользователи в основном или полностью зависят от мобильного доступа; оптимизировать пользовательский интерфейс для сильных сторон каждого устройства. Помните, что опыт пользователей может распространяться на разные устройства и способы взаимодействия (телефон, электронная почта, мобильное устройство, рабочий стол, личное общение) — разрабатывайте опыт для этих режимов, чтобы удовлетворить их потребности», — делится Джон Фукуда, соучредитель и директор в Лимина, лидер индустрии дизайна и UX.

Доступность

Очень важно разработать веб-сайт для всех пользователей. По данным ВОЗ, около 285 миллионов человек имеют нарушения зрения, от 110 до 19 миллионов человек.0 миллионов взрослых имеют значительные трудности с передвижением, а 360 миллионов человек во всем мире страдают инвалидизирующей потерей слуха.

Джесси Хауслер, главный специалист по доступности в Salesforce, пишет: «Доступность не заставит вас сделать продукт уродливым, скучным или загроможденным. Это введет набор ограничений, которые вы должны учитывать при рассмотрении своего дизайна».

При разработке продуктов и веб-сайтов убедитесь, что вы соответствуете требованиям WCAG (Рекомендации по обеспечению доступности веб-контента).

Несколько простых способов внедрить принцип доступности при разработке продуктов:

• Используйте средство проверки цветового контраста WebAim для создания сильных цветовых контрастов
• Убедитесь, что все ваши изображения имеют соответствующие атрибуты alt веб-сайте с помощью клавиши Tab на клавиатуре

Создавайте и повторяйте дизайны, которые действительно нравятся вашим пользователям

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

No related posts.