Во многих приложениях, иконки используются для иллюстрации специфических функций — они могут быть использованы для всего, от информирования до действий. Но если пользователь не понимает, иконки, то какой в них смысл?
При дизайне, вы стараетесь рисовать/использовать изоморфные иконки — то есть пиктограммы, которые взяты из реальной жизни (например, мусорное ведро, кисть, ластик и т. д). Пока вы можете подобрать несколько достойных метафор, эти значки будут работать. Но что делать если нет метафоры из реальной жизни?
В качестве примера, я собираюсь использовать значок ссылки. «Ссылку?» — скажите Вы. «Все знают как выглядит значок ссылки!» Какая первая иконка приходит вам на ум, когда вы думаете о вставки ссылки в электронной почте, блоге или любимой CMS? Цепь? Земной шар? ...? Да, есть несколько различных иконок для вставки ссылок, и вы можете подумать, что все они логичны. Но не обязательно.
Примеры иконок ссылок в различных веб-приложениях и программах
Как вы можете видеть, большинство CMS и приложения используют цепочки. Только одна иконка действительно отделяется от остальных — Facebook, который использует значок листков. И я думаю, он несет еще меньше смысла чем, цепочки.
Я считаю себя гиком, поэтому я могу сказать, что только гики могут понять значение иконок. В 2010 году я написал свой проект на бакалавра вместе с Morten Keilow . Проект, направлен на изучение того, как мало документации вы можете оставить в CMS, при том, чтобы самый мало-мальски грамотный человек, использовал его без каких-либо вопросов. Когда мы создавали дизайн интерфейса, мы использовали иконки цепей даже не задумываясь.
Мы дали участникам испытаний список заданий для выполнения. Одно из которых было задание по вставке ссылки. Больше всего нас удивило то, что никто так и не смог вставить ссылку. Мы решили протестировать иконку ссылки вместе с другими иконками, которые регулярно используются в CMS и текстовых редакторы вне контекста. И результаты нас действительно удивили.
Иконки, используемые в тесте
Некоторые из наших участников теста понимали иконку цепи, как «связать что-нибудь вместе» или «ссылка на соединенные элементы». Они были не далеки от истины. Единственный вопрос в том, что они не понимают, что они должны связать вместе. Таким образом иконка не работает так, как положено. Значок земного шара оставлял комментарии типа «Вы можете зайти в Интернет», «Поиск», или «Скачать в интернете».
| Иконка | Поняли | Не поняли |
| Bold | 100 % | 0 % |
| Italic | 100 % | 0 % |
| Underlined | 100 % | 0 % |
| Strike-through | 54.55 % | 45.45 % |
| Link 1 (chain) | 35.29 % | 64.71 % |
| Link 2 (globe) | 25 % | 75 % |
| Ordered list | 100 % | 0 % |
| Unordered list | 93.94 % | 6.06 % |
| Image | 78.79 % | 21.21 % |
| Undo | 57.58 % | 42.42 % |
| Redo | 51.52 % | 48.48 % |
В общем, только 35,29% от всех участников теста удалось понять смысл иконки с цепью, и только 25% поняли значок земного шара. Хотя мы не ставили себе какой-то минимум, очевидно, 25% — не достаточно, когда речь заходит о юзабилити. Один из наших участников во время интервью спросил:
Почему бы просто не написать WWW? Все поймут это!
Вполне возможно, что кто-то поймет WWW как «посещение Интернета» или еще что-то, но мы обнаружили, что каждый участник испытаний понял бы этот значок. Это, вероятно, не самое лучшее решение, однако на данный момент, по результату наших тестов — это самый лучший значок для объяснения ссылки.
Оригинал на английском: Usability in Icons.
Спонсор: Наткнулся в интернете на новый сервис, который проводит аудит сайтов http://sitepolice.ru/. Судя по отзывам, довольно неплохо работают.
Хорошей среды! Пришло время нового выпуска дайджеста. (далее…)
Хорошего понедельника! Давно не было свежего выпуска дайждеста, а материала накопилось порядочно 😍 (далее…)
Это рекламная статья. Многие считают, что WordPress — одна из наиболее популярных open-source систем для…
Хорошего понедельника! Надеюсь все отлично отдохнули, потому как я собрал для вас новую порцию интересных…
Хорошего понедельника! Приветствуем второй выпуск дайджеста. Для тех, кто не в теме, дайджест просеивает тонны…
Хорошего понедельника! Как я писал в паблике, я решил немного изменить формат выхода новостей. Поэтому всё…
Посмотреть комментарии
Мне ваш вывод не кажется лучшим выходом. Я считаю, что нужно либо избегать текста на иконках, делая всё картинками-метафорами, либо напротив, делать все кнопки текстом. И когда некоторые иконки, подобно Bold, отображаются текстом, отображать ссылку цепочкой или планеткой не слишком правильно, я считаю.
Кстати, о bold - есть процент русских, которые, увидев букву B, думают, что это вырезать или вставить. Затем совсем сбиваются с толку, когда в текст вставляются какие-то [b][/b] и когда рядом не видят кнопок вставить и копировать. Об этом тоже стоит подумать, прежде чем делать иконки вместо текста.
Андрей это перевод статьи, а не выводы Максима. Я с вами согласен и считаю что нужно разделять символы от изоморфных иконок, иначе смысл теряется. Неопытные пользователи, а зачастую их доминирующее число, часто теряются во всём этом разнообразии кнопок для форматирования текста. Мыслей на эту тему много. Не могу тратить своё время, по этому назову практичное решение - использовать визуальный редактор с урезаным функционалом форматирования текста (2-3 кнопки).
Как писал Раскин: «Текст — лучшая пиктограмма».
Поэтому лучшим вариантом, мне кажется, будет использование иконки с подписью.
Иконка с текстом, пожалуй, лучший вариант лишь потому, что пользователей приучают к такому виду операционные системы, начиная с лохматых годов.
А поменять пользовательский опыт, конечно можно, но нужно ли? Ведь если на вашем сайте все устроено по-одному виду, а на соседнем по-другому, у пользователя будет оставаться небольшой осадок, а ведь мы хотим "ублажить" пользователя, а не "унизить".
Конечно, все это лишь опыт пользователя. Bold и Italic понимают чаще, не потому что по букве все понятно, а потому, что большинство знает это по Word.
Хорошо когда при наведении всплывает подсказка, но с этим решением проблемы в мобильных и touchscreen устроиствах.
Вот поэтому меня и бесят последние тенденции веб-дизайна. Когда по левому краю делается вертикальное меню с иконками без подписей.