LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней

Без имени Лучший значок – text label

Текст лейбл

Ранее я писал о том, что ясность – наиболее важное свойство отличного интерфейса. А сейчас давайте поговорим об иконках. Они являются неотъемлемой частью многих пользовательских интерфейсов. Суть в следующем: чаще всего они нарушают ясность.

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

ojibwa-agawa-rock-robertson

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

bejing-airport-chinnian

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

xerox-star

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

Кроме того, иконки зачастую могут заменить длинное описание. Так как экраны становятся все меньше, это очень приветствуется. Но в этом и заключается ловушка дизайна, потому что большинство иконок неясны. Они заставляют людей задуматься. Что хорошего в красивом интерфейсе, если он непонятен? Поэтому все просто: используйте иконку только тогда, когда его посыл будет ясен всем на 100%. Никогда не сдавайтесь.

(Непонятные иконки напоминают мне это забавное изображение, которое кто-то недавно разместил в Twitter:

washing-icons

Я думаю, Рон был расстроен этими не читаемыми стиральными иконками…)

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

apple-mail

И у меня есть новости похуже: пользователи будут избегать тех элементов интерфейса, которые не могут понять. В нашей природе заложено не доверять неизвестному. Когда Google решил спрятать другие приложения за непонятным значком в пользовательском интерфейсе Gmail, то, видимо, поступил поток запросов на оказание поддержки, как “Где мой календарь Google”?

gmail

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

twitter-new-tweet

Поздняя версия сделала дизайн более понятным:

twitter-better

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

instagram-pm

Хм… как пользователь Instagram, скорее всего, вы видели это раньше, но никогда не пользовались? Значок непонятен. Что он означает?

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

gmail-double

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

Иконки Tweetbot могут выглядеть неясно для некоторых из нас, они понятны в контексте Twitter. Пользователи Tweetbot – это пользователи Twitter, они узнают их, поэтому использую их здесь:

tweetbot-icons

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

tumblr-ios

Большинство иконок в контексте музыкального проигрывателя здесь понятны. (Странно, однако, что, один значок имеет 2 значения: звук и проигрываемая в данный момент песня)

Итак, позвольте мне повторить: не используйте иконку, если его значение не ясно для всех на 100%. Если вы сомневаетесь, опустите значок. Text label всегда более понятен.

Если вы хотите сохранить графические преимущества иконок, вы можете, конечно, сочетать значок с пояснением. Это отличное решение, которое объединяет лучшее из обоих вариантов.

Mac App Store делает именно так. Это почти обязательно здесь, потому что иконки сами по себе были бы совершенно непонятны:

app-store

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

twitter-icons

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

Иконки с пояснениями

Я надеюсь, что статья объяснила, что иконки могут легко испортить наиболее важное свойство хорошего пользовательского интерфейса: ясность. Так что будьте очень осторожны, и пробуйте! А если засомневаетесь, всегда помните: лучший значок – text label.

Перевод статьи

17-03-2016

Практический online-курс

blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".