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

Posted on by riasevastopol

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

Но все же применение интерфейсных иконок имеет последовательность весомых преимуществ:

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

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

В отечественной сегодняшней статье вы определите о том, как иконки воздействуют на пользовательский опыт, и получите пара полезных рекомендаций, представленных экспертами исследовательской группы Нильсена-Нормана (Nielsen Norman Group, NNG), по их оптимизации.

  • 3 принципа научного дизайна: лендинг для красоты либо конверсии?

Иконок, понятных каждому, мало

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

Иконка-«гамбургер» (3 горизонтальные линии), к примеру, довольно часто употребляется для оформления меню навигации, но на некоторых ресурсах данный значок обозначает перечень.

Выше упомянутое изображение вызывает когнитивный диссонанс у пользователей приложения Buy Me a Pie не только вследствие того что употребляется в дизайне кнопки перечня, но и по обстоятельству нестандартного размещения — справа от панели поиска в большинстве случаев размещается кнопка отправки поискового запроса.

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

На турпортале Combadi кнопка с сердечком употребляется визитёрами для отметки понравившегося им тура, а на eCommerce-ресурсе Fab аналогичный элемент додаёт товар в избранное.

Эксперты NNG сравнительно не так давно совершили анализ портала Бакнеллского университета (Backnell University), в навигационном меню которого был размещен значок с часами.

Ни один из опрощеных, участвующих в изучении Nielsen Norman Group, не кликнул на иконку циферблата — никто не додумался, что эта кнопка открывает историю посещений.

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

  • Kак сделать лендинг пейдж удобным для пользователя?

К иконкам необходимо додавать текстовые пометки

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

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

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

Ответ данной неприятности предельно простое: додавайте к иконкам текстовые метки.

  • Как типографика воздействует на коэффициент конверсии и юзабилити?

Значки ухудшают дизайн стандартных предположений сайтов

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

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

Сравните, к примеру, как выглядит элемент меню на разных предположениях портала Upworthy.

В мобильном интерфейсе значок «гамбургера» занимает приблизительно 20% ширины навигационного меню, а в стандартном — всего 3.5%.

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

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

  • 10 неточностей юзабилити-тестов, каковые обязан знать любой маркетолог

Советы по оформлению иконок

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

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

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

Высоких вам конверсий!

По данным nngroup.com, image source Jackie Tran

Случайные статьи:

Полная настройка и оптимизация World of Tanks 9.17


Подборка похожих статей:

riasevastopol

More Posts