UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Список дизайн-пожеланий на 2021 год с точки зрения пользователя
Редакція
Редакція

Опубліковано

Список дизайн-пожеланий на 2021 год с точки зрения пользователя

#ux

Что многие пользователи хотят увидеть в 2021 году

В это время года вы можете видеть множество статей о «трендах дизайна» на 20XX год. Хотя эти статьи приятно листать, они служат скорее для вдохновения (как Dribbble), чем в качестве контрольного списка или руководства.

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

Предлагаемое улучшение №1: больше типов курсоров

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

У Medium есть отличный пример использования запрещенного курсора (вместе со всплывающей подсказкой), чтобы показать, что я не могу ставить «лайк» собственной статье. Иконка «лайка» немного затенена, но как пользователь я не могу быть на 100% уверенным, что она отключена, пока не увижу изменение курсора.

Приятный и доступный дизайн Medium

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

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

Знаю, что Chrome использует cursor:default для закладок, но, думаю, что pointer будет смотреться лучше

Предлагаемое улучшение №2: меньше движений мышью или пальцами

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

Автофокус при загрузке страницы

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

Откройте диалоговое окно и сразу же начните вводить текст

Оповещения, появляющиеся на месте действия

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

Интерактивные кнопки призыва к действию

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

Во время покупок в Toast пользователи должны дважды нажать кнопку «Добавить в корзину», поскольку при первом нажатии открывается нижняя панель браузера

Другой пример – клавиатура, скрывающая кнопку «Log in». Slack демонстрирует правильный подход, гарантируя, что кнопка «Continue» будет всегда кликабельна.

Было бы еще лучше, если бы текст «Sign in to your workspace» не был обрезан

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

Предлагаемое улучшение № 3: последовательность в терминологии и формулировках

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

  • Кнопка «Добавить папку» (Add folder), а затем заголовок диалогового окна «Создать папку» (Create folder).
  • Кнопка «Заменить элемент» (Replace item), за которой в предупреждении следует фраза «Вы действительно хотите редактировать элемент…» (Are you sure you want to override item…).
  • Упоминание одной области инструмента сначала, как «Раздел» (Section), а затем, как «Категория» (Category).

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

Предлагаемое улучшение №4: соответствующая клавиатура для полей ввода (на мобильных девайсах)

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

Текстовая и цифровая клавиатуры

Заключительное примечание

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


Перевод статьи blog.prototypr.io

Топ коментарі (0)