Views Comments Previous Next Search

Дизайнер выбрал непонятные иконки в интерфейсах

Графический и веб-дизайнер Томас Байттебир (Thomas Byttebier) написал в своём блоге пост о том, почему не стоит увлекаться иконками в пользовательских интерфейсах, а также привёл примеры, когда иконки только путают пользователя. Look At Me публикует перевод его материала.

 

«Ранее я писал о понятности, наиболее важной характеристике великолепного интерфейса. Теперь давайте поговорим об иконках. Они стали неотъемлемой частью многих пользовательских интерфейсов. Но дело в том, что чаще всего они непонятные.

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

Дизайнер выбрал непонятные иконки в интерфейсах. Изображение № 1.

 

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

Дизайнер выбрал непонятные иконки в интерфейсах. Изображение № 2.

 

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

Дизайнер выбрал непонятные иконки в интерфейсах. Изображение № 3.

 

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

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

Дизайнер выбрал непонятные иконки в интерфейсах. Изображение № 4.

 

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

Дизайнер выбрал непонятные иконки в интерфейсах. Изображение № 5.

 

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

Дизайнер выбрал непонятные иконки в интерфейсах. Изображение № 6.

 

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

Дизайнер выбрал непонятные иконки в интерфейсах. Изображение № 7.

 

Знаете ли вы, что в Instagram можно отправить личное сообщение другу? Это находится за этой пиктограммой. Хм, как пользователи Instagram вы, скорее всего, видели её, но пользовались ли ею? Непонятно. Что она значит?

Дизайнер выбрал непонятные иконки в интерфейсах. Изображение № 9.

 

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

Дизайнер выбрал непонятные иконки в интерфейсах. Изображение № 10.

 

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

Дизайнер выбрал непонятные иконки в интерфейсах. Изображение № 11.

 

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

Дизайнер выбрал непонятные иконки в интерфейсах. Изображение № 12.

 

Приложение Rdio для Mac выглядит так. Иконки здесь используются в контексте музыкального проигрывателя (Странно, один и тот же знак имеет два значения: громкость и текущая песня).

Дизайнер выбрал непонятные иконки в интерфейсах. Изображение № 13.

 

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

Дизайнер выбрал непонятные иконки в интерфейсах. Изображение № 14.

 

То же самое в веб-интерфейсе Twitter.

Дизайнер выбрал непонятные иконки в интерфейсах. Изображение № 15.

 

Давайте в качестве последнего примера взглянем на Facebook. В последнее время они заменили непонятную иконку-„гамбургер“ на лёгкую навигацию, которая сочетает иконки и текст. Отлично».

Дизайнер выбрал непонятные иконки в интерфейсах. Изображение № 16.

Рассказать друзьям
0 комментариевпожаловаться

Комментарии

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