Apple получила рекордную в мировой истории бизнеса прибыль
Previous
выбрать за меня
Brand Hub - новый инструмент социального мониторинга Twitter
Next
иконки, интерфейс, юзабилити
Юзабилити

Интуитивное восприятие: влияние иконок на юзабилити сайта и приложения

Автор: Денис Давыдов28.10.2015

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

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

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

Иконки и проблемы, связанные с их использованием

Неоднозначные иконки

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

иконки, интерфейс, юзабилити

Иконка с карандашом

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

иконки, интерфейс, юзабилити

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

Символы из прошлого

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

иконки, интерфейс, юзабилити

Классическая иконка «Сохранить» в Microsoft Word

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

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

Уникальные или необычные функции и их символическое обозначение

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

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

Часто иконки, обозначающие новые функции, оказываются весьма успешными. Узнаваемое «перо» Twitter понятно 80% пользователей, знакомящихся с ним впервые. Конечно, «твитнуть» нельзя назвать принципиально новым действием и оно очень похоже на «отправить сообщение», но, тем не менее, оно обладает своей спецификой.

иконки, интерфейс, юзабилити

Причины успеха и высокой интуитивности иконки «твитнуть» заключаются в нескольких факторах.

Во-первых, дизайнеры Twitter благоразумно оставили подпись «Твитнуть» в полной версии сервиса, в то время как в мобильной версии осталась лишь иконка. В результате, пользователи, впервые воспользовавшиеся твиттером на десктопах, без проблем понимают назначение иконки в мобильной версии.

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

И, третий и довольно сильный фактор – иконка с пером хорошо вписывается в фирменный стиль Twitter с его пернатым логотипом.

Нужно ли сопровождать иконки подписями?

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

По всей видимости, правы все-таки любители подписывать иконки. Разумеется, такой подход не универсален и какие-то элементы в любом случае приходится оставлять без надписей, особенно в случае критической нехватки пространства. Однако исследования показывают, что надпись на иконке сразу делает ее назначение понятным 88% пользователей. Особенно это справедливо для новых или необычных функций – в этом случае о назначении неподписанной иконки догадались лишь 60% пользователей.

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

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

Реакция на статью
поделюсь
0%
интересно
0%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Денис Давыдов
Всем привет! Я Денис Давыдов – автор статей о юзабилити, интерфейсах и интернет-маркетинге. Будучи энтузиастом в сфере электронной коммерции и UX, сотрудничаю с различными российскими компаниями, предоставляя качественный контент и публицистику для веб-проектов. Изучаю актуальную культуру и политику, пишу очерки по мотивам наиболее острых и любопытных феноменов современности.
Комментарии
Оставить отзыв

    You must log in to post a comment

    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Уведомления о новостях, статьях и инфографике будут приходить раз в неделю.
    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Позвольте нам обновлять ваши знания раз в неделю.
    Твой голос очень важен.
    Мы постоянно пытаемся сделать наш сервис лучше. Опрос займет не более 3х минут. Многие читатели уже с нами поделились, оставь свой голос и ты.