Координатор учебных программ в «Нетологии» и UX/UI дизайнер в дизайн-бюро 2Geart Владимир Синицын написал для блога «Нетологии» колонку, в которой рассказал о роли иконок в интерфейсе, их основных характеристиках и влиянии на пользовательский опыт.

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

Почему возникают проблемы

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

В двух словах дизайнер должен создавать простой и понятный интерфейс.

Разработка продукта происходит в несколько этапов:

Исследование: анализ целевой аудитории, оценка целей бизнеса.
Фокусировка на проблеме.
Генерация идей.
Выбор идеи.
Создание прототипа.
Тестирование.
Реализация.

Реализация прототипа включает создание визуальной формы интерфейса. Может показаться, что визуальная часть проекта — незначительный этап, наведение внешнего лоска. На самом деле это не так: интерфейс формирует пользовательский опыт. Грамотно расставленные дизайнером акценты привлекают наше внимание к важным элементам и ключевым действиям. Даже самые мелкие детали в интерфейсе далеко не для красоты.

Иконка в интерфейсе

Иконка в любом интерфейсе помогает экономить место на экране. Направляет пользователя. Через неё совершаются необходимые действия.

Универсальность

Дизайнеры выделяют несколько иконок признанных универсальными: дом, печать, увеличительное стекло и корзина. Они понятны каждому, потому что связаны с конкретным предметом и действием. Эти ассоциации помогают пользователю. Он с уверенностью нажимает на иконку-дом, зная, что попадёт на домашнюю страницу или рабочий экран.

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

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

Многозначность

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

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

Современность

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

Иконки для абстрактных действий

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

Вспомним знаменитую иконку в виде пера Твиттера. Она органично отражает выполняемое действие. Каким образом это достигается:

Расположение иконки. В интерфейсе иконки действий (написания твита, съемки фото, загрузки изображения) отделены от иконок исследований (новостная лента, уведомления, сообщения, люди, поиск).
Текстовое пояснение. В приложении для рабочего стола даётся подсказка. Это рассчитано на первых пользователей. Прямо возле иконки пера расположено слово «Твитнуть».
Узнаваемость. Перо относится к устаревшим технологиям. Но это изображение запоминается и редко встречается в других приложениях.
Бренд. Изображение пера сочетается с логотипом Твиттера. Это создает ощущение единства.

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

Пользователю всё равно, сколько сил вы потратили на создание иконки.

Два способа сделать навигацию проще

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

Текст как подсказка

Первый способ упростить навигацию для пользователя — добавить текстовую подпись. Текст подсказывает, какое действие ожидать, особенно если вы используете нестандартные иконки.

Дополнительные инструкции

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

Инструкции — крайняя мера. Они вынуждают пользователя совершать лишние действия.

***

Алан Купер писал, что «в хорошем проектировании «меньше» означает «больше».

Тестируйте

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

Думайте

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

Добивайтесь баланса

Баланс, целостность и аккуратность всегда отличают качественно спроектированный продукт.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.