Почему иконки чаще мешают удобству, хотя и выглядят красиво

    Только что посмотрел прекрасный ролик, в котором показан ответ на вопрос из известного вирусного клипа «Какие-то люди и Эксперт» (про семь красных перпендикулярных линий).

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

    Проблема достаточно простая. Кто не хочет читать — посмотрите быстрый разбор нововведения на Ютубе, а также пример с иконками без надписей и с ними (и убедитесь в заголовке поста), а так прошу под кат.

    Итак, пост посвящается дизайнерам, которые любят делать «красиво» и лишь потом думаю об удобстве. Если вы еще не читали «Не заставляйте меня думать» Стива Круга — крайне рекомендую. На простых и понятных примерах объясняется, почему закон «95% всего-говно» действует и в отношении интерфейсов.

    Конкретно сегодня хочется поговорить про иконки. Мое личное мнение, которое, по многочисленным данным из практического опыта внедрения различных систем в работу и запуска проектов, имеет место быть, такое. Чистые иконки без надписей имеют крайне ограниченную сферу применения. Кстати, так считают немало специалистов в этой области — посмотрите английские статьи про исследования, например, Myth: Icons enhance usability (рекомендую весь сайт) или Icon Usability.

    Почему не стоит уповать на иконки без надписей


    1. Иконки, как правило, аппелируют к воображению и ассоциациям. Но если я скажу слово «стол», то один представит себе офисный стол, второй — домашний, а третий может подумать про шведский стол. За счет неоднозначности толкования людям нужно больше напрягаться, они делают больше ошибок — в итоге сайт кажется менее простым в использовании.

    2. Иконки нередко требуют дополнительных ресурсов в технологическом процессе. За рядом исключением, типа Font Awesome

    3. Замена иконок занимает гораздо большее время, чем замена текстовых надписей.

    4. Иконки могут создать проблемы с правообладателями, ибо являются объектом авторского права.

    В каких случаях, на мой взгляд, следует применять иконки


    1. Если это устоявшаяся концепция в рамках аудитории, которая работает с проектом, не показывающая снижения эффективности от внедрения на типовых user stories. Как значок «конверта» для обозначения письма в почтовом клиенте, например, или карандашик.

    2. Вместе с текстовыми надписями, поясняющими иконку.

    3. Когда по-другому просто нельзя. К примеру, в MS Office или Photoshop. Иконки позволяют привыкнуть к типовым функциям и получать быстрый доступ ко множеству из, нежели чем это были бы меню или текстовые кнопки. Правда, тут стоит отметить, что важно использовать привычки пользователей (достаточно вспомнить ваши ощущения при смене предыдущих версий Офиса).

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

    5. Возможно, я что-то забыл, и кто-то подскажет в комментариях.

    Во всех остальных случаях упор на иконки, как следствие упора на графическую составляющую, а не на удобство работы с продуктом, не на юзабилити, резко снижает эффективность работы. Что мы можем наблюдать, к сожалению, повсеместно в IT.
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 81

      +55
      Довольно верная статья и на 100% относится к дизайну хабра.
        –45
        Ну на хабре вроде как всё довольно интуитивно понятно
          +36
          Особенно замо'к внизу левого сайд бара, который почему-то обозначает Login/SignUp…
            +35
            И спрятанный со страницы поиск… Долго искал его в привычных местах: сверху или справа сверху…
              +4
              До сих пор каждый раз ищу, где он прячется. В квадрате крест-накрест или в трёх вертикальных полосках?
                +2
                Поверните монитор на 90 градусов. Полосы должны быть горизонтальными.
                  +5
                  Спасибо! Повернул, всё стало на свои места. С горизонтальными полосами всё стало очевидно.
              +29
              И квадрат с крестом посередине, который почему-то обозначает мой профиль…
                +2
                Это можно пофиксить, поставив аватарку.
                  +4
                  Вот только моя аватарка (отсутствие аватарки) в этом комментарии слева от моего ника — никак не соответствует перечёркнутому квадрату.
                +26
                О да, все мы с детства знаем иконки колокол и три горизонтальные линии… С колоколом у меня до сих пор нет ассоциаций (твой час пробил?), а три горизонтальные линии — как можно было взять с мобильных??? Почему не взяли кнопки с микроволновки или радио? Что ожидать от этой кнопки ума не приложу заранее. Контекстное меню к чему?? И методом научного тыка я нашел «поиск»… жаль что только на пк. На телефоне до сих пор не могу найти поиск в мобильной версии. Наверно я один такой.
                  +9
                  О да, все мы с детства знаем иконки колокол и три горизонтальные линии…
                  Скоро будем. Как с иконкой дискеты.

                  Кстати, насчёт колокола. У меня ушла, наверное, неделя на то, чтобы догадаться, что арка обозначает уведомления, потому что это на самом деле колокол.
                    +5
                    Кто-нибудь нашёл как писать комментарии в мобильной версии хабра?
                      +2
                      А что не так с колоколом? Я с детства знаю: колокол, набат, пожарный колокол, рында — оповещения о каких-то событиях. Нотификации, по-забугорному.
                        0
                        Я вообще сначала подумал, что это тоннель, а не колокол.
                        +11
                        После нововведений большинство моих стандартных действий вместо 1-2 клика требуют 2-3, причем с ошибками в процессе. Я при этом хожу на сайт каждый день, если бы дело было в привычке, уже бы привык.
                          +1
                          А чего тут сложного? Пощёлкал по контекстным меню слева, поискал что тебе надо… В процессе случайно нажал на карандаш, тебя редиректнуло на страницу создания нового поста… Неравно жмёшь «back», тихонько матюгаешься, и снова ищешь, что искал…
                          0
                          Это так. Я простым юзер-скриптом заменил target на верхней иконке «H», которая вела на главную, чтобы вела на Трекер→Посты. Привык туда попадать одним кликом. А «главная» мне вообще не нужна, потому что лента в RSS.
                          +2
                          Особенно карандаш на Хабре, который наклонён слева-направо «для левшей», а не справа-налево как пишут «правши».

                          P.S. Левши извините.
                            –2
                            P.S. Левши извините.

                            Вы видели как пишут левой слева на право? Карандаш тоже наклонен справа на лево, чтобы видеть, что пишешь, только кисть огибает надпись и ручку сверху.

                            Левой рукой вообще удобнее писать справа на лево и развернуть шрифт в зеркальном отображении. Леонардо, скорее всего, поэтому так и писал.
                              0
                              Когда писал, имел ещё в ввиду письменность справа-налево.
                              Действительно неточно получилось.
                        +19
                        … если я скажу слово «стул», то один представит себе кухонный стул, а другой…
                        Но мы сойдемся во мнении, что оба понятия будут относительно недалеки от текущего редизайна Хабра.
                          +7
                          + 1, в последнее время особенно часто встречаюсь с тем, что не понимаю назначение иконки без пояснения! (В основном касается мобильных девайсов, где нет тултипов)
                            +3
                            Теоретически, по длинному тапу на иконку должно выводиться ее название (аналог подсказки при наведении мыши в винде). Так рекомендует гугль:

                            developer.android.com/design/patterns/actionbar.html
                            Long-press on an icon to view the action's name.


                            К сожалению, даже в гугловских приложениях это работает далеко не всегда.
                              +4
                              На винфоне, кстати, в приложениях можно раскрыть описание к иконкам в нижнем меню. Очень удобно
                                +1
                                Согласен! Помню как-то купил приложение для оффлайн чтения цитат из разных источников, помему Smiler, так как планировал долго быть оффлайн, скачал тысячи циатат перед поездкой, а сверху было три непонятных иконки среди которых была иконка похожая на глаз. Нажал на этот глаз и программа пометила все цитаты как прочитанные и удалила их. Вернуть их никак не получилось, приложение просто не может качать то, что уже было прочитано :(
                                +4
                                Не полностью согласен с автором статьи. Замечания:
                                > 2. Иконки нередко требуют дополнительных ресурсов в технологическом процессе. За рядом исключением, типа Font Awesome
                                Не более чем переводы. Слабый аргумент.

                                > 3. Замена иконок занимает гораздо большее время, чем замена текстовых надписей.
                                Это смотря на чем написано приложение.

                                >4. Иконки могут создать проблемы с правообладателями, ибо являются объектом авторского права.
                                Это относится и к тексту.

                                Для следующих случаев иконки предпочтительнее:
                                1. Общепринятые иконки (back, home, save, etc)
                                2. Инонки как акселераторы меню, при наличии тултипов. (Время распознавания и поиска на много быстрее чем при тексте).
                                3. Для АРМ.
                                4. Для настраиваемых пользователем панелей.
                                5. При ограниченном размере области вывода.
                                  0
                                  На устройствах с сенсорным управлением — нет тултипов.
                                    0
                                    Чуть выше я написал — они есть (гугль рекомендует), но их мало кто делает и мало кто знает, как их увидеть.
                                      +1
                                      А как же браузерные приложения (сайты). Разве на них можно реализовать тултипы по долгому нажатию?
                                        0
                                        Наверное, можно что-то придумать, но тут уже нужна поддержка со стороны браузера. Скажем, по длинному тапу показывать alt.
                                          +2
                                          А как выделять тогда?

                                          UPD: Лучше добавить голосовую команду «О Боже, что это?», и тогда появляется alt-текст…
                                          Вообще считаю, что «Ok, Google» можно заменить на «О Боже»
                                            0
                                            Понятия не имею. :) Я только заметил, что рекомендации от гугла существуют, а уж как это реализовать — пусть дизайнеры думают.
                                          0
                                          longTapTime = 700;
                                          jQuery( ".someSelector" )
                                           .on( "vmousedown", function() { 
                                            
                                               var $this = $(this);
                                             
                                               someNamespace.longTap = setTimeout(function(){ callTooltip($this) },longTapTime);
                                            
                                           })
                                           .on("vmouseup",function(){
                                           
                                               clearTimeout(someNamespace.longTap);
                                          
                                          });
                                          
                                    +1
                                    Что касается редизайна того же Хабра, тут все не так однозначно. Хабр — такой ресурс, у которого аудитория состоит из людей, зашедших из гугла, которым нужно лишь прочитать пост и закрыть вкладку, и постоянной аудитории.

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

                                    Для постоянных посетителей имеется набор из пяти иконок, на которые достаточно по одному разу кликнуть, чтобы представлять, что за ними скрывается. И для привыкания всем, полагаю, потребовалось не больше пары дней. Карандаш и шестеренка — вполне очевидные штуки. Что можно искать за своим юзерпиком — тоже более или менее просто догадаться. Остается две кнопки, на которых я даже не вспомню, что изображено, пока не посмотрю. При всем при этом после тех пары дней, необходимых для привыкания, пользоваться интерфейсов становится вполне удобно. И даже, пожалуй, удобнее, чем раньше. Эдакое мгновенное неудобство, являющееся удобством в долгосрочной перспективе. Явление многим здесь знакомое (запоминать хоткеи или изучать vim тоже сначала не совсем комфортно).
                                      +8
                                      Вроде как уже постоянный посетитель, но до сих пор периодически теряюсь что за какой иконкой скрывается. И пользоваться стало неудобнее! Сравниваю достаточно долгое знакомство со старым и новым интерфейсом хабра. И как уже писал ранее- это не более чем дань моде, но никак не дань удобству пользователей.
                                        +1
                                        Неа, пары дней мало, всё еще не привык. И это всё ничуть не удобнее, чем раньше.
                                        Vim и хоткеи вполне нормально учатся и запоминаются, потому что с ними в итоге удобнее потом что-то делать.
                                        Если уж проводить аналогии, то это скорее попытка привыкнуть к обуви на пару размеров меньше.
                                      • UFO just landed and posted this here
                                        • UFO just landed and posted this here
                                            +7
                                            Что интересно, наклон карандаша почему-то был выбран не в ту сторону. Большинство ведь правши и наклон вправо привычнее смотрится.
                                            • UFO just landed and posted this here
                                            –2
                                            Я считаю, что многое зависит от аудитории. К примеры старые полуслепые пенсионеры не будут сильно рады иконкам, прогрессивное человечество будет радо, а консерваторы поворчат пару деньков и привыкнут.

                                            Иконки на хабре меня до сих пор немного путают (и радуют одновременно), я думаю не был бы лишним минитултип на ховере.
                                            Вот еще одно интересное решение, которое удовлетворило бы одновременно и любителей иконок и сторонников текста.

                                            Про ролик. Возможно Вы будете удивлены, но вот первоисточник на видео эксперты.
                                            • UFO just landed and posted this here
                                                +15
                                                А такую купили бы?
                                                image
                                                Про то что это некрасиво я молчу. Помимо того что не факт, что одно слово объяснит суть режима, так еще нужно придется переводить на каждый язык, что повлияет на конечную стоимость продукта.

                                                Я бы предпочел провести 5-10 минут за чтением инструкции.
                                                  +34
                                                  Со словами стало намного круче.
                                                  И не надо спихивать проблемы интерфейса для производителя (перевод) на пользователей.
                                                  Загорелась бы задница у маркетолога — к этим словам добавили бы иконки, и все были бы счастливы.
                                                    +28
                                                    Блин.

                                                    Это охрененно. Очевидно, тут понятно, а наверху — херота какая-то.

                                                    Недавно опять мучился со стиралкой. Выучил пару иконок, остальные не знаю.
                                                    А так — умножьте 5-10 иконок на количество предметов, используемых в обиходе. Станет понятна проблема.

                                                    Человек, если что, иконки помнит плохо. Может, японцы или китайцы их хорошо запоминают — образная память, иероглифы, вот это все.
                                                    Конкретно по себе и по многочисленным знакомым и родным — скрипач не нужен. Либо надписи, либо иконки + надписи.
                                                      +1
                                                      Я брал стиралку именно по тому, что все иконки/программы там подписаны. Кроме 2х, что ли, не нужных. Хотя в какой отсек сыпать порошок все рано не понятно. Но проблему решили капсулы.
                                                      +1
                                                      Похожий пример со стиральными машинами: если на лицевой панели изображения функций не продублированы текстом — приходится заглядывать в мануал.
                                                        0
                                                        У меня у родителей на стиральной машине почему-то случилось наоборот — вместо иконок (как на «международной» версии) у них надписи на немецком. Иконки хоть угадать можно как-то, а стиральные термины на немецком — только с инструкцией в руках.
                                                          +1
                                                          Всю жизнь думал, что надпись «Pfenhrenzhiben» на пятнадцатилетней машинке означает деликатную стирку.
                                                          А теперь я женился на женщине, которая читает инструкции.
                                                            0
                                                            И что же значит эта надпись? Гугл это слово не опознаёт.
                                                          0
                                                          У меня на стиралке Indesit текстовые названия режимов. Но толку-то…
                                                          «Деликатные ткани» в моём представлении должна бултыхать аккуратнее, на меньших оборотах, но дольше, чтобы хоть как-то отстирать.
                                                          «Интенсивная» вроде бы должна бултыхать сильнее, но, возможно, меньше по времени.
                                                          По факту же по времени наоборот получается.
                                                          • UFO just landed and posted this here
                                                          • UFO just landed and posted this here
                                                              +5
                                                              С удовольствием купил бы. Круто же. А «красиво/некрасиво» — вопрос очень субъективный. Мне нравится второй вариант. Для меня — красиво.
                                                              +9
                                                              Странные вы! Все же очевидно: тазик с водой, улыбающаяся утка, сброс бомб, баркас, двухмачтовый кораблик, перевернутая шляпка болта, тазик под батареей. Что тут непонятного-то?
                                                            +6
                                                            Кстати, за дизайн Google, Youtube, Facebook пора расстреливать.
                                                              +4
                                                              Крайне редко открываю Facebook. Каждый раз, когда всё же это делаю, искренне недоумеваю, как люди этим пользуются; что-то внутри сразу сжимается, кричит и просится наружу.
                                                                –2
                                                                Позволю себе минитеорию. Иконки — это своего рода иероглифы 21ого века, некий мини язык, который нужно сперва выучить.
                                                                  +1
                                                                  Ну, было бы неплохо иметь какой нибудь ГОСТ & ISO.
                                                                  Типа как glyphicons, только вообще на всё.
                                                                  Ну, или в unicode всё-всё-всё впихнуть, включая утюги, уточек, шапочки.
                                                                  • UFO just landed and posted this here
                                                                      –1
                                                                      ГОСТ — это плохо. Не потому что мне не нравиться стандартизация, а потому что они придумали как на вариться на этой стандартизации. Вот скажите как я узнаю что по госту правильно а что нет? Скачивание ГОСТов и СНИПов является нарушением интеллектуальной собственности — т.е. не законно. И что нам придёться платить деньги чтобы узнать что значит конкретная иконка?
                                                                      Короче ГОСТ это плохо.
                                                                      0
                                                                      Дак нет языка то! Часто используются не те иконки и не для того. Это пока не язык, это 100500 локальных жаргонов.
                                                                        0
                                                                        Представьте, что заместо иконок в браузере будут слова, стали бы Вы пользоваться подобный продуктом?
                                                                        image

                                                                        А с тем что не всегда и не везде используются подходящие иконки я полностью согласен.
                                                                          +1
                                                                          А теперь перейдите из Windows в Mac OS X, где вместо иконок справа есть 3 кружка слева. Не иконки даже, разноцветных кружка. Уверенно скажите, какой из кружков что означает?



                                                                          Я ведь говорю о том, что языка — нет. Есть локальные жаргоны. Есть конечно однозначные, но даже их умудряются использовать не в тему. И часто текст — удобнее, как пример:

                                                                            0
                                                                            Все зависит от случая. Главное преимущество иконок в том, что человеческий мозг на 60% быстрее обрабатывает визуальные образы, чем текст. Недостаток в том, что далеко не всегда они интуитивно понятны и берет какое-то время выучить их значения.

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

                                                                            Идеальное сочетание — это текст + иконка, но это не всегда возможно.

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

                                                                            Проблема определена, решение найдено, задача поставлена, можно открывать проект на гитхабе :)
                                                                              +3
                                                                              3 разноцветных кружка, говорите? Я вот вижу красный и два желтых. Мы, дальтоники, очень любим дизайнеров, которые единственным различием элементов интерфейса делают цвет.
                                                                        0
                                                                        Вы еще Однокласники не видели видимо :)
                                                                      0
                                                                      Обратная ситуация ничем не лучше — Microsoft пытается делать неконтрастные интерфейсы с одними надписями, так что каждый раз приходится перечитывать всю страницу для нахождения нужной кнопки.
                                                                      Особенно бросается в глаза деградация Outlook Web Access.
                                                                      • UFO just landed and posted this here
                                                                        0
                                                                        В чем-то иконки гораздо удобнее. Не так давно на себе это понял, когда пытался проникнуться лаунчером Aviate. Его текстовое меню приложений по алфавиту сильно смешало карты. Я обнаружил, что даже не помню большинство названий, но отлично помню как выглядит иконка (цвет, форма) и привычно ищу ее в списке. Эта же проблема и в списке приложений Windows Phone. Мелкие иконки одинаковой формы, которые не дают взгляду за них зацепиться. Каждый раз приходится внимательно скроллить длинный список в поиске нужного приложения.
                                                                          +1
                                                                          Кто может сходу угадать что делают 2, 3, 4 иконки снизу?
                                                                          Скрытый текст
                                                                            +1
                                                                            2 — ответить, 3 — вообще не понятно, 4 — сложить в папку (добавить в архив)

                                                                            P.S. iOS пользователь
                                                                              +3
                                                                              Чтд: пометить непрочитаным, в архив, переместить.
                                                                            –1
                                                                            Чего гадать, просто нажать на них и проверить. Тут метод тыка работает в прямом смысл этого слова =)
                                                                              +2
                                                                              А вам не страшно что может среди них быть нечто аналогичное Shift+Del
                                                                                0
                                                                                Нет, не страшно, они же не совсем дураки. А не страшно было, первый раз смартфон запускать? Там большая часть интерфейса построена на иконках без подписей.

                                                                                Я не спорю что представленный на скриншоте пользовательский интерфейс не слишком хорош в плане UX, я бы оставил только значок «написать письмо» и «удалить». Все остальное вынес бы в текстовом меню за тремя точками, в андроиде впрочем так и сделано.

                                                                                Вот так выглядит интефрейс Gmail на последнем андроиде:
                                                                                image

                                                                                  0
                                                                                  Я несколько утрировал. Я это к тому что иконка должна быть интуитивно понятной, если это не так, то должны быть сопроводительные надписи.
                                                                              0
                                                                              Я вот не понимаю, почему отказываются от иконок там где они просто необходимы. В начале 2000х, когда я только начал осваивать компьютер, попробовал фотошоп. Там иконок в меню нет, так же как и панели с иконками а-ля «офисный пакет». Потом мне случайно попался на диске от какого-то журнала Paint Shop Pro 9, с тех пор я только им и пользуюсь. Даже купить хотел, но Corel выкупил Jasc software и убрал иконки с менюшек! Стало жутко неудобно. Раньше каждый пункт меню имел свою иконку, которую можно было вытащить на панель в удобном порядке, и сэкономить кучу времени при обратотке изображений. Так до сих пор и юзаю старую «девятку». Мне вот интересно, какая была мотивация у Corel, когда они убирали эти иконки?

                                                                              Only users with full accounts can post comments. Log in, please.