Как практикующий UX-дизайнер, я постоянно сталкиваюсь с тем, что нужно продемонстрировать концепт UX клиенту, коллеге или другу так, чтобы он тут же нашел отклик в их сердцах, резонировал с ними на эмоциональном уровне, вроде этого: “Аа! Я понял, и я не могу ничего возразить”.

Частым предметом споров является важность сопровождения иконки соответствующей текстовой меткой-описанием.

labels

Это спорный момент:

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

И на эту тему развели множество споров. Золтан Гоча и Золтан Коллин провели интересное исследование, чтобы развенчать миф, что иконки улучшают юзабилити, а Мин Минг Ло весело оспаривает, в частности, проблему изображения иконки Share (Поделиться).

Спор выходит за пределы UI-иконок, также касаясь брендинга в целом. Гляньте, как Uber изменил иконку своего приложения…

1-dGsGPPhVgpygt92Pb67iQw

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

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

Flipbook, Medium, Facebook, Vine и Primer
Flipbook, Medium, Facebook, Vine и Primer — у всех стоит первая буква в иконке бренда/продукта.

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

Давайте вернемся к иконкам интерфейса в целом. Хорошее взаимодействие с пользователем можно определить разными способами, но одна важная метрика — пользователь должен как можно меньше думать. В Nielson Norman Group это определяется как цена взаимодействия.

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

Важный фактор, влияющий на ментальный вклад, — это возможность определить смысл. В теории семиотики это называется Знак (Sign).

1-tAolny8AGWokbqovy-8nrA

Знак состоит из двух частей: значение (Signifier) и выражение (Signified). Например, представьте дверь магазина, на которой висит красная табличка с надписью “Closed” (“Закрыто”). Это значение, это что-то осязаемое, что существует в реальном мире. В этом примере выражением было то, что магазин закрыли на технический перерыв. Выражение абстрактное, концептуальное, просто мысль. Оба эти элемента формируют знак, создают смысл, которые пользователь может интерпретировать.

Значение часто состоит из нескольких компонентов. Табличка “Закрыто” в моем примере выиграла от цветовой психологии и контекста, а также выполнила роль письменной коммуникации (как метка). Удачное значение задействует как можно больше компонентов, если есть цель сократить цену взаимодействия и позволить пользователю плавно и быстро выполнить свою цель. Удалив один из этих компонентов, вы ослабите значение, и его выражение станет размытым. Но…

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

Аргумент звучит как-то так. Но насколько он правдив?

Игра

Я хотел проверить теорию на практике, так что создал игру на основе такой гипотезы:

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

Игра была простой. Пользователям показали иконку и затем 4 варианта метки, из которых только один был правильным ответом. Всего было 19 иконок, и все они были взяты из популярных iOS-приложений (большая часть из списка Топ 20 на App Store или из родных iOS-приложений).

1-7cCIhrsUgwd_mdGoucy1ZA
Примеры вопросов в игре

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

Если вы хотите увидеть все своими глазами, проверить, как это сложно или просто пройти игру, вот она: http://www.motionbrothers.co.uk/signified/

Результаты

Результаты были довольно удивительными. Из 144 человек, которые прошли игру (на момент написания поста), 61.81% смогли идентифицировать всего 4-7 иконок. Еще 22.92% узнали 8-13 иконок. И никто не смог распознать 14 и более иконок из 19.

1-sdlWulBGGWl1vSashmUP3A

Но 19 — это слишком много иконок, чтобы все упомнить, верно? Ну (опять же, на момент написания поста), только приложение Facebook под iOS использует в своем интерфейсе не менее 19 иконок.

На практике

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

Если клиент соглашается с предложенным подходом, у нас появляется отличная возможность улучшить комфорт пользователя. Например, мой клиент решил добавить метку ‘Menu’ под иконкой гамбургера в мобильной версии своего сайта. Это маленькое изменение увеличило активность по кликам на иконке меню на целых 42.09%! Так иконка вдруг стала гораздо виднее пользователям.

Будущее меток?

Снова вернусь к этому аргументу:

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

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

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

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

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

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

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

1-pwheI0gPtD83wbDCPYU-Sw
Пример прогрессивного сокращения в приложении Medium

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