AFINA agency
webflow

10 основных советов по дизайну пользовательского

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

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

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

1. Знай своих пользователей

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

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

Каковы их цели?
Что мешает им достичь этих целей?
Как веб-сайт может помочь им преодолеть эти трудности?

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

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

2. Определите, как люди используют ваш интерфейс

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

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

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

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

  • Pping Нажав кнопку
  • Смахивание карты
  • Перетаскивание элемента кончиком пальца

Примеры косвенных взаимодействий

  • Указывая и щелкая мышью
  • Использование ключевых команд / сочетаний клавиш
  • Ввод в поле формы
  • Рисование на планшете Wacom
«Иногда взаимодействие слишком просто.
Кто ваши пользователи и какие устройства они используют, должны глубоко информировать ваши решения здесь. Если вы разрабатываете для пожилых людей или других людей с ограниченной ловкостью рук, вы не хотите полагаться на смахивание. Если вы разрабатываете для писателей или программистов, которые в основном взаимодействуют с приложениями через клавиатуру, вы захотите поддерживать все распространенные сочетания клавиш, чтобы минимизировать время работы с мышью.

3. Установите ожидания

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

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

Устанавливая ожидания с дизайном

  • Подсветка кнопки, которая соответствует желаемому действию
  • Использование широко понятного символа (например, мусорной корзины для кнопки удаления, знака плюс для добавления чего-либо или увеличительного стекла для поиска) в сочетании с копией
  • Выбор цвета с соответствующим значением (зеленый для кнопки «идти», красный для «остановки»)
In В InVision нажатие на значок корзины не приводит к немедленному удалению экрана. Вместо этого он спрашивает, уверены ли вы, и сообщает, что его нельзя отменить.

4. Предвидеть ошибки

> Ошибаться - это человечно; прощать, божественно.

Люди делают ошибки, но они не должны (всегда) страдать от последствий. Есть два способа уменьшить влияние человеческих ошибок:

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

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

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

Когда вы пишете сообщения об ошибках, убедитесь, что они делают две вещи:

  1. Объясните проблему. Например, «Вы сказали, что родились на Марсе, который люди не колонизировали. Еще."
  2. Объясните, как это исправить. Например, «Пожалуйста, введите место рождения здесь, на Земле».
Обратите внимание, что вы можете взять страницу из этой же книги для ситуаций без ошибок. Например, если я что-то удаляю, но это можно восстановить, дайте мне знать, что со строкой копирования, например «Вы всегда можете восстановить удаленные элементы, перейдя в корзину и нажав« Восстановить ».

Принцип ожидания ошибки пользователя называется принципом пока-ига. Poka-yoke - это японский термин, который переводится как «защита от ошибок».

5. Оставьте отзыв - быстро

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

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

Так что дай мне эту анимацию загрузки. Прикоснитесь к этой кнопке и верните ее назад, когда я нажму ее, но не слишком сильно. И дай мне виртуальную пятерку, когда я что-то сделаю, и я согласен, что это круто. (Спасибо, MailChimp.)
C MailChimp предлагает как обратную связь, так и поддержку, когда вы планируете или отправляете электронное письмо.
Просто убедитесь, что все происходит быстро. Usability.gov определяет любую задержку на 1 секунду как прерывание. За 10 секунд срыв. И последний щедрый: примерно для половины населения США трех секунд достаточно, чтобы вызвать отскок.

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

6. Тщательно продумайте расположение и размер элемента

Закон Фиттса, основополагающий принцип взаимодействия человека с компьютером (HCI), гласит:

Время достижения цели зависит от расстояния до цели и ее размера.

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

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

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

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

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

7. Не игнорируйте стандарты

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

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

Это практическое правило объясняет, почему в строке меню Google Docs есть почти все те же параметры, что и в Microsoft Word до Vista:
Bar Строка меню Microsoft Word до Vista.
Строка меню DGoogle Docs, 2015
HИзменение одной кнопки в соответствии с шаблонами дизайна Android увеличило вероятность использования Pocket новыми пользователями на 23%.
До осени 2013 года кнопка архива находилась в верхнем левом углу экрана - там, где в спецификациях Android-дизайна говорилось о кнопке «Вверх». Pocket хотел сосредоточить внимание людей на опыте чтения, а не дублировать существующий аппаратный элемент управления, но из-за непоследовательного размещения новые пользователи случайно закрыли и заархивировали статью, которую они читали, вместо того, чтобы просто вернуться в свой список чтения, как ожидалось.

Это крошечное изменение «увеличило вероятность того, что [новые пользователи] будут продолжать использовать Pocket с этого момента на 23%».

8. Сделайте ваши интерфейсы легкими в изучении

Когда речь заходит о простоте, люди часто ссылаются на статью психолога Гарварда Джорджа Миллера, которая называется «Магическое число семь, плюс или минус два: некоторые ограничения нашей способности обрабатывать информацию». В статье предполагается, что люди могут держать только 5–9. вещи в их кратковременной памяти с любой надежностью. Сам Миллер назвал это совпадением, но, похоже, это никого не удерживает от цитирования.

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

Эта идея согласуется с Законом сохранения сложности Теслера, который гласит, что дизайнеры пользовательского интерфейса должны максимально упрощать свои интерфейсы. Это может означать маскирование сложности приложения за упрощенным интерфейсом, когда это возможно. Популярным примером того, как продукт не соответствует этому закону, является Microsoft Word.

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

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

Совет для профессионалов: избегайте использования «узнать больше» и аналогичного неспецифического текста в ссылках и кнопках. Почему? Потому что это не говорит пользователям, о чем они «узнают больше». Часто люди просто просматривают страницу в поисках ссылки, которая ведет их туда, куда они хотят, и «узнать больше», повторенный 15 раз, не помогает. Это особенно актуально для пользователей программ чтения с экрана.

9. Сделайте процесс принятия решений простым

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

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

Это влияет практически на все, что мы строим:

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

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

10. Прослушайте данные

Хотя все мы могли бы пожелать, чтобы наши проекты оценивались исключительно с точки зрения их художественных достоинств, реальность такова, что оптимизация вашего дизайна для достижения его цели также важна.
HИзменение одной кнопки в соответствии с шаблонами дизайна Android увеличило вероятность использования Pocket новыми пользователями на 23%.
Хотя все мы могли бы пожелать, чтобы наши проекты оценивались исключительно с точки зрения их художественных достоинств, реальность такова, что оптимизация вашего дизайна для достижения его цели также важна.

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

Поэтому настройте аналитику для своего сайта и регулярно анализируйте ее. Существует множество различных аналитических инструментов, но я рекомендую Google Analytics и / или Mixpanel, в зависимости от типа проекта.

Mixpanel фокусируется на событиях, поэтому собирает данные на основе действий, которые посетитель совершает на вашем сайте, в то время как Google Analytics является более поведенческой, предоставляя вам время сеанса, источники трафика и т. Д. Хотя оба инструмента могут предоставлять обе формы данных, они действительно блестят сфера их интересов, поэтому выбирайте то, что лучше всего соответствует вашим потребностям.

Примечание: оба эти инструмента бесплатны для определенного количества точек данных. Webflow и подобные платформы обычно упрощают настройку аналитики с помощью простого обмена ключами API.

Отличный дизайн взаимодействия на сайтах Webflow

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

Расширение круговой навигации

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

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

Вы покупаете эту девушку выпить?

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

Uniqlo редизайн

Дизайнер Тим Ноа делал покупки на сайте Uniqlo однажды, когда понял, насколько сложна их навигационная система. Вдохновленный, он решил «воссоздать это, но более дружественно к планшетам и мобильным устройствам».

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

Примечание: этот редизайн был только личным проектом и никоим образом не связан с Uniqlo.

Ведущий спортивный ускоритель

В начале 2017 года дизайнер Jaro Quastenberg запустил сайт, который действительно демонстрирует мощь визуальных взаимодействий в Webflow: Lead Sport Accelerator.

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

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

Хорошо, ты прибил основы

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