Как правильно использовать иконки в дизайне пользовательского интерфейса
Координатор учебных программ в «Нетологии» и UX/UI дизайнер в дизайн-бюро 2Geart Владимир Синицын написал для блога «Нетологии» колонку, в которой рассказал о роли иконок в интерфейсе, их основных характеристиках и влиянии на пользовательский опыт.
Бывает, что открываешь приложение и не понимаешь, что делать. Мы каждый день взаимодействуем с различными приложениями, но разработчики находят новые способы поставить нас в тупик.
Это работает одинаково и для дизайнера, и для опытного пользователя, а о новичке даже и говорить не стоит. Сначала ругаешься, потом привыкаешь. Но не у каждого пользователя хватит упорства и желания пройти сквозь дебри интерфейса, чтобы получить желаемое.
Почему возникают проблемы
Проблемы во взаимодействии с интерфейсом возникают, когда дизайнер что-то не учёл при проектировании или, наоборот, перемудрил. Дизайнер должен оптимизировать затраты пользователя на взаимодействие. В двух словах — создавать простой и понятный интерфейс.
Я не буду останавливаться на самой структуре. Но есть детали, которые в интерфейсе далеко не для красоты.
Иконка в интерфейсе
Иконка в любом интерфейсе помогает экономить место на экране. Через неё совершаются необходимые действия. Иконки помогают в навигации по сайту. Рассмотрим основные характеристики иконок.
Универсальность
Дизайнеры выделяют несколько иконок признанных универсальными: дом, печать, увеличительное стекло и корзина. Они понятны каждому, потому что связаны с конкретным предметом и действием. Эти ассоциации помогают пользователю. Он с уверенностью нажимает на иконку-дом, зная, что попадёт на домашнюю страницу или рабочий экран.
В интернет-магазинах используется иконка в виде корзины, которая помогает приобретать товар. Если разработчик использует такие иконки, это экономит силы пользователя на понимание действия.
Используйте универсальные иконки — пользователи понимают, какое действие они обозначают.
Многозначность
В приложениях встречается много иконок со схожими функциями. Для примера возьмём иконки в виде сердца и звезды. Они одинаково обозначают симпатию к контенту, добавление в избранное или формирование списка предпочтений. Но пользователю может быть нужно только одно из этих действий. Когда он видит сердце под изображением, что это должно для него означать?
Избежать использования таких иконок вряд ли возможно, они отражают популярные функции. Следует закрепить за ними в интерфейсе одно конкретное действие.
Современность
Не менее важно и то, насколько знаком пользователю символ, использующийся в иконке. Иконки устаревают, когда теряют узнаваемость. Иногда можно встретить в приложениях иконку в виде дискеты. Сейчас это часть устаревшей технологии. И для молодого поколения отсутствует взаимосвязь между этим символом и действием «сохранить». Оценивайте используемые символы, чтобы они были понятны целевой аудитории.
Иконки для абстрактных действий
Посмотрим на приложения, которыми пользуемся каждый день. Мы найдём в них различные действия от привычных (расшаривания, загрузки изображений, добавления в избранное, написания текста) до абстрактных (просмотр маршрута путешествия, истории заказов, отслеживание циклов сна). Выразить абстрактное действие в одном символе — сложная задача для дизайнера.
Вспомним знаменитую иконку в виде пера Твиттера. Она органично отражает выполняемое действие. Каким образом это достигается:
- Расположение иконки. В интерфейсе иконки действий (написания твита, съемки фото, загрузки изображения) отделены от иконок исследований (новостная лента, уведомления, сообщения, люди, поиск).
- Текстовое пояснение. В приложении для рабочего стола даётся подсказка. Это рассчитано на первых пользователей. Прямо возле иконки пера расположено слово «Твитнуть».
- Узнаваемость. Перо относится к устаревшим технологиям. Но это изображение запоминается и редко встречается в других приложениях.
- Бренд. Изображение пера сочетается с логотипом Твиттера. Это создает ощущение единства.
Иногда дизайнер хочет сделать иконку уникальной. Тратит на это много времени и сил. Но не учитывает, что пользователь может не догадаться о его задумке.
Пользователю всё равно, сколько сил вы потратили на создание иконки.
Два способа сделать навигацию проще
Пользователь не должен разгадывать интерфейс. Как правило, у него на это нет ни времени, ни желания. Разбираясь с новым приложением, он не проверяет каждую иконку. Наоборот он подчас растерян и не совершает дополнительных действий, как этого не хотелось бы разработчику.
Текст как подсказка
Первый способ упростить навигацию для пользователя — добавить текстовую подпись. Текст подсказывает, какое действие ожидать, особенно если вы используете нестандартные иконки.
Дополнительные инструкции
Некоторые дизайнеры пренебрегают первым способом, считая, что текст загромождает пространство экрана. Второй способ — внедрение в интерфейс руководства пользователя или экранного тренера. Однако немногие внимательно изучают инструкции. Как правило они бегло пролистываются, чтобы поскорее приступить к необходимому действию.
Инструкции — крайняя мера. Они вынуждают пользователя совершать лишние действия.
***
Алан Купер писал, что «в хорошем проектировании «меньше» означает «больше».
Тестируйте
Обязательно тестируйте дизайнерские решения. Если нет бюджета на дорогие исследования, воспользуйтесь «коридорным» тестированием — в таком варианте вы можете быстро получить фидбек по макету в любом месте — хоть за вашим рабочим столом, спросив у коллег.
Думайте
Не перегружайте интерфейс. Думайте о пользователе, чтобы ему было понятно. Старайтесь обходиться минимумом средств.
Добивайтесь баланса
Баланс, целостность и аккуратность всегда отличают качественно спроектированный продукт.
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.
Полный текст статьи читайте на Нетология
