Иконки - наше всё
Иконки - наше всё
21 апреля 2015

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

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

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

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

Со временем иконки стали заняли своё место и в дизайнах пользовательских интерфейсов. Взгляните на эту фотографию первого коммерческого графического пользовательского интерфейса на одном из первых компьютеров Xerox Star., созданную Девидом Смитом:

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

Вот простое правило: используйте только такие иконки, которые на 100% понятны каждому.

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

Обсуждая использование иконок с клиентами, я часто слышу подобные формулировки: "Пользователи будут использовать наш софт ежедневно и рано или поздно поймут значение иконок, которые мы выбрали". Это конечно же имеет смысл, но до конца ли правильное это решение? Я по несколько раз на дню использую Apple mail, но эти так и норовят ввести каждого в заблуждение относительно того, какая из них позволяет написать новое письмо.

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

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

В следующей версии создание нового сообщения стало намного более очевидным.

Знали ли вы, как можно отправить прямое приватное фотосообщение другу в Instagram? Кликнув на эту пиктограмму:

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

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

 

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

 

Иконки Tweetbot также могут показаться не достаточно ясными для понимания, они имеют чёткий смысл разве что в контексте Twitter. Пользователи Tweetbot'а - это пользователи Twitter и они поймут смысл этих иконок, поэтому использование подобных пиктограмм здесь вполне оправдано.

 

То же самое можно сказать про приложение Tumblr для iOS: некоторые иконки могут показаться довольно странными для большинства из нас, но в контексте Tumblr их использование несёт вполне чёткий смысл.

Приложение Rdio для Mac выглядит примерно вот так:

Большинство иконок, которые здесь использованы предельно чёткого смысла, если говорить о музыкальном проигрывателе. (Хотя некоторые пиктограммы всё же имеют двойной смысл: Громкость и иконка, показывающая проигрываемую в данный момент композицию.)

Поэтому важно не использовать иконки, смысл которых не на все 100% ясен для пользователей. Если сомневаетесь - используйте другую, упростите посыл. В некоторых случаях лучше использовать текст - он может оказаться понятнее. Вы также вполне можете соединить иконку и надпись чтобы выйти из ситуации - это превосходное решение, соединяющее в себе преимущества обоих графических решений. Это отлично реализовано в App Store, потому как иконки сами по себе несли бы слишком мало смысла:

То же самое делает Twitter в своём интерфейсе:

Еще предлагаем вам взглянуть на Facebook, как финальный пример: не так давно они поменяли свою иконку в виде гамбургера на очень функциональное навигационное меню, которое состоит из иконки и поясняющего текста. Отличное решение:

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

Получи доступ к мастер-классам топовых спикеров и базе полезных материалов


Читайте также
Тренды в дизайне в 2017 году
Тренды в дизайне в 2017 году

Обзор трех основных направлений трендов в 2017 году.

10.02 0
Вредные советы по оформлению презентаций 2Уровень сложности:
2. Любитель
Вредные советы по оформлению презентаций

Василий Богданов и Red Keds создал презентацию с вредными советами по оформлению презентаций.

11.04 0
Фильм: Гении дизайна (5 из 5 серий) 1Уровень сложности:
1. Начинающий
Фильм: Гении дизайна (5 из 5 серий)

Научно-популярный фильм о дизайне от истоков отрасли до наших дней. 5 серий по 45 минут.

27.03 0
Техдизайн: рисуем предметы в фотошопе 3Уровень сложности:
3. Специалист
Техдизайн: рисуем предметы в фотошопе

Обучающее видео Алексея Захаренко о том, как нарисовать реалистичные фломастеры в Photoshop

29.01 0
Комментарии

×
Подписка на новости Skillsup

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