| Последние новости из мира SEO
1 новых постов за сегодня

20 февраля 2016 — 15:36

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

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

Мнение: «Лучшая иконка — это текст»

 

Они служат для навигации в публичных местах. Одного текста недостаточно, если это мультикультурная среда типа аэропорта.

Мнение: «Лучшая иконка — это текст»

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

Мнение: «Лучшая иконка — это текст»

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

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

Какой смысл в красивом, но непонятном интерфейсе? Отсюда вывод: используйте иконку только тогда, когда её смысл понятен всем на 100%.

При разговоре о непонятных иконках я вспоминаю забавную картинку, которую Рон опубликовал в Twitter:

Мнение: «Лучшая иконка — это текст»

Видимо, он совсем запутался в непонятных иконках с условиями стирки.

При обсуждении этой темы с клиентами я часто слышу: «Люди будут работать с приложением каждый день и быстро запомнят значения иконок». Звучит логично, но я не уверен, что это действительно так. Я открываю Apple Mail несколько раз в день, но всё ещё не уверен, на какую иконку надо нажать, чтобы написать письмо:

Мнение: «Лучшая иконка — это текст»

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

Мнение: «Лучшая иконка — это текст»

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

Мнение: «Лучшая иконка — это текст»

В последующей версии перейти к написанию твита стало намного проще.

Мнение: «Лучшая иконка — это текст»

А вы знали, что в Instragram можно отправлять приватные сообщения друзьям? Нужно нажать вот сюда:

Мнение: «Лучшая иконка — это текст»

Если вы пользуетесь Instagram, скорее всего, иконку вы видели. А нажимали? Непонятно, что она означает.

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

Мнение: «Лучшая иконка — это текст»

Я точно не единожды возвращался к списку писем вместо того, чтобы написать ответ. Контекст имеет значение.

Кто-то не поймёт иконки Tweetbot, но они понятны в контексте Twitter. Пользователи Tweetbot пользуются Twitter и легко улавливают смысл, поэтому их смело можно использовать:

Мнение: «Лучшая иконка — это текст»

То же самое можно сказать о приложении Tumblr для iOS. Большинству из нас иконки покажутся странными, но пользователи Tumblr’а легко в них ориентируются.

Мнение: «Лучшая иконка — это текст»

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

Мнение: «Лучшая иконка — это текст»

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

Повторяю: используйте иконку только тогда, когда её смысл понятен всем на 100%. Сомневаетесь — уберите иконку. Замените обычным текстом, он всегда понятнее.

Если хотите сохранить визуальные преимущества иконок, комбинируйте их с текстом. Это отличное решение, сочетающее преимущества обоих подходов.

Так сделано в App Store для Mac. Но им это необходимо, так как одни лишь иконки будут слишком непонятными.

Мнение: «Лучшая иконка — это текст»

То же самое в веб-версии Twitter:

Мнение: «Лучшая иконка — это текст»

И последний пример. Facebook со временем поменял непонятный гамбургер на удобную навигационную панель, где иконки сопровождаются понятным текстом:

Мнение: «Лучшая иконка — это текст»

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

 

 

 

Источник: ЦП

3

+ -

Комментарии (0)


Выскажи свое мнение

* поля обязательны для заполнения