Улучшите свой UX-дизайн с помощью этих 9 полезных шаблонов

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

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

Шаблоны UX-дизайна

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

В этой статье я хочу пролить свет на некоторые из самых популярных шаблонов в UX-дизайне и объяснить, как их использовать, чтобы сделать ваш пользовательский интерфейс более удобным для пользователя. Давай начнем!

Что такое шаблон?

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

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

  • Пользователи могут решить свои проблемы
  • Они могут сделать так быстро
  • Конструкция сводит к минимуму человеческие ошибки
  • Пользователи довольны
  • Кривая обучения короткая или отсутствует
  • Дизайн пользовательского интерфейса соответствует бизнес-требованиям (коммерческий успех)

Важны ли шаблоны в UX-дизайне?

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

9 лучших шаблонов для UX-дизайна

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

Закон Фиттса

«Чем дальше и меньше объект, тем меньше шансов точно добраться до него».

Закон Фиттса гласит: вероятность достижения цели зависит от размера и размещения интерактивных элементов.

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

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

Например, на сайте Patreon пользователи могут нажать на текстовое меню и весь блок.

Закон Фиттса UX шаблон дизайна
Закон Фиттса UX шаблон дизайна
Закон Хика

«Чем меньше вариантов, тем быстрее делается выбор».

Поздравляем! Теперь вы знаете закон Хика.

Г-н Хик предложил этот закон в 1952 году, предполагая, что когда есть много вариантов, вы в конечном итоге «слишком долго думаете». Сейчас это главный принцип для сервисов по подбору товаров. Ведь все мы знаем, что пытка выбора — одна из самых тяжелых. Как UX-дизайнеры, которые заботятся о пользователях, мы не хотим подвергать этому наших любимых пользователей.

Но что делать, если уменьшить количество вариантов невозможно? Попробуйте разбить их на более простые шаги. Закон Хика направлен на то, чтобы облегчить пользователю выбор. Иногда варианты могут быть бесконечными, и трудно сделать их меньше. Возьмем, к примеру, Netflix: количество шоу на выбор кажется бесконечным.

Однако Netflix удалось избавить пользователей от мук трудного выбора. Они представили функцию «10 лучших в вашей стране». И это то, что я называю законом Хика в действии!

Закон Хикса UX шаблон дизайна

Закон Иакова

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

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

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

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

Закон Джейкобса UX шаблон дизайна

Скриншот / uxplanet.org

Закон Прагнанца

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

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

Так что не делайте UX-интерфейс загадкой для пользователя, так как он либо не понимает его, либо упрощает до понятного вида. Это правило в основном применимо к иконкам на веб-сайтах.

Шаблон проектирования UX закона Прагнанца
Закон близости

«Элементы, стоящие близко друг к другу, рассматриваются как одна группа».

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

закон близости ux шаблон дизайна
Закон внутреннего и внешнего

«Чтобы сделать один элемент отличным от других, сделайте его более отдаленным».

Это еще один аспект Закона Близости. Каждый сложный элемент состоит из более мелких объектов: слова состоят из букв, линии состоят из слов, а отрывки состоят из линий. Чтобы привить индивидуальность одному предмету, нужно увеличить расстояние между ним и другими предметами.

внутренний внешний закон ux дизайн шаблон
Закон Миллера

«Человек может в среднем удерживать внимание на 7 элементах одновременно».

В 1956 году американский психолог Джордж Миллер обнаружил, что человеческий мозг в среднем может запомнить 7 (+-2) объектов. Поэтому интерфейс должен в первую очередь включать 9 элементов, а то и 5, для большей наглядности. Длинные списки могут утомлять пользователей, даже если они полезны, поэтому рекомендуется разделить их на категории.

Краевой эффект

«Люди лучше запоминают первый и последний элементы в ряду».

Это так просто.

UX-дизайн с краевым эффектом
Restorff (Изоляция) Эффект

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

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

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

Общие рекомендации на основе паттернов

Вот краткое изложение того, как создать удобный дизайн пользовательского интерфейса на основе установленных шаблонов:

Навигация

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

Формы

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

Общие рекомендации:

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

Заключение

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *