Хабрахабр

10 советов на тему UX/UI: как ярлыки на одежде и дейтинг-приложения учат нас делать дизайн лучше

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

Учитываем особенности своей целевой аудитории

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

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

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

image

Если это преимущественно любители вязания от 60 и старше, другое (хотя бывает и так, что группы ЦА пересекаются). Если ЦА приложения или сайта — геймеры, это одно. Существуют сервисы, которые позволяют опробовать работоспособность интерфейса с определенной выборкой пользователей. Сотрудники ИТ-сферы — третье. Все это позволяет дизайнеру определить сильные и слабые места интерфейса, прийти к определенным выводам: что можно оставить, а что требуется доработать. При этом составляется тепловая карта, показано время, которое требуется пользователю для переключения между функциями, демонстрируются и другие результаты. Пример сервиса, который позволяет испытать свой интерфейс «в полевых условиях» — UXCrowd, Saffron Tech и другие.

Как пользователи будут работать с интерфейсом?

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

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

Примеры прямого взаимодействия (актуальны для тачскринов):

  • Тап по кнопке.
  • Свайп.
  • Перенос элемента интерфейса пальцем.

image

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

  • Выделение при помощи мыши.
  • Использование специальных команд.
  • Введение данных в форму.

Интерфейс должен подсказывать пользователю, что делать

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

image

Что может понять новичок, который только что зарегистрировался? Twitter (старый дизайн сервиса) одно время вообще никак и ничего не подсказывал. Немногое.

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

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

  1. Есть поле для ввода текста, оно всегда доступно.
  2. Есть подсказка для пользователя, что в Twitter можно поделиться новостями. Реализовано это в виде «Что нового?».
  3. Добавлены подсказки для ленты — если в ленте нет твитов, то нужно сделать то-то, плюс появился блок подсказок, на кого стоит подписаться.
  4. Вместо непонятного для многих термина «тренды» добавлена надпись «Актуальные темы для вас».

Неочевидные решения и ложные обещания

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

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

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

Кроме того, элементы интерфейса должны быть максимально понятными.

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

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

image

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

image

На что нужно кликнуть, чтобы написать сообщение? Еще пример неявного значения иконки — элементы интерфейса почты Apple. Вопрос из серии «все по 400».

Настройки по умолчанию должны быть понятными и практичными

Многие пользователи часто оставляют настройки, заданные по умолчанию. Не стоит надеяться, что кто-то станет изменять все и вся, перекраивая интерфейс или иные настройки под себя. Почему, например, рингтон Nokia стал таким узнаваемым? Да потому что миллионы пользователей телефонов Nokia, когда они были распространенными, не меняли рингтон. Слышали мелодию сами пользователи, слышали и окружающие.

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

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

Обратная связь с пользователями

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

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

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

Вовсе не обязательно уподобляться Gmail, но сделать надежную и заметную пользователю обратную связь просто необходимо.

В нужном месте в нужное время

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

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

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

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

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

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

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

image

Этот элемент в 2013 году был расположен там, где по рекомендации разработчиков Android должна находиться кнопка «Вверх». На гифке выше показан пример изменения одного элемента интерфейса в Android-приложении Pocket. Но не желая дублировать некоторые функции, создатели Pocket решили разместить слева вверху кнопку «Архивировать».

image

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

Упрощаем все там, где это возможно

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

image

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

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

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

Анализируйте

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

Таких инструментов много — это Google Analythics (анализ трафика, пути пользователей по странице, демография), Mixpanel (особенности работы пользователя с приложением, решения, принимаемые пользователем), Check me now (UX-аналитика для онлайн-проектов) или любые другие. Для того, чтобы получить такие данные, необходимо установить один или сразу несколько инструментов по сбору статистики.

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

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

Теги
Показать больше

Похожие статьи

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

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

Кнопка «Наверх»
Закрыть