Иконкомания или боязнь неиспользования иконок

    «И эти дурацкие иконки! Пиктограмма — это знак, который ни на одном человеческом языке невозможно объяснить. Не зря же появилась речь!»
    Джеф Раскин.

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

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

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

    Простой пример:
    image

    Итак (не строго), если изображена собака — это пиктограмма, если собака в перечёркнутом круге, то идеограмма.
    В общем смысле, пиктограмма понятна без слов, реальные объекты физического мира довольно легко представить в виде пиктограммы. Но, как быть, если мы хотим вложить в знак что-то сложнее: какое-то действие или неочевидное понятие?

    Как обстоит дело
    Слово Джефу Раскину:
    Пиктограммы (icons), эти знакомые всем маленькие картинки, служащие для обозначения кнопок и других объектов, являются неотъемлемым признаком современных интерфейсов. Компания Apple Computer, известный лидер в области разработки интерфейсов, сообщает нам, что «пиктограммы могут существенным образом увеличить ясность и усилить привлекательность приложения. Кроме того, использование пиктограмм позволяет намного упростить процесс перевода программ на другие языки. Всякий раз, когда требуется добавить объяснение или надпись, попытайтесь вместо текста использовать пиктограмму» (Apple Computer 1985, с. I-32). В более поздних версиях этого руководства подход к применению пиктограмм уже не был столь догматичным, однако создаваемый им вред уже нельзя было исправить.
    Пиктограммы делают интерфейс более привлекательным в визуальном отношении и, при определенных условиях, могут способствовать большей понятности. Однако со временем стали понятны и недостатки пиктограмм. Например, как в операционной системе Macintosh, так и в Windows сейчас уже используются средства для объяснения значения пиктограмм. Если вы наводите курсор на какую-то пиктограмму, появляется небольшое окно с текстом, в котором дается ее описание.


    Главные проблемы идеограмм — выбор метафоры и построение ассоциативного ряда.
    Придумывание метафоры — головная боль разработчика идеограмм. Ему очень хочется иметь банк метафор для облегчения боли. Правда в том, что такого банка нет и быть не может.
    Эта проблема создаёт другую проблему — проблему конфликта метафоры и буквального понимания идеограммы.



    Чем плох ассоциативный ряд?
    Слово википедии:
    В 1936 году Милтон Эриксон написал статью, в которой изложил результаты своего эксперимента с тестом словесных ассоциаций, суть которого состоит в том, что человек бессознательно дает ассоциативную связь на стимульное слово теми словами, которые описывают его проблему. Например, на стимульное слово «живот» испытуемая дала такие слова: большой, беспокойство, младенец, бояться, операция, болезнь, забыто. И это была информация о ее нежелательной беременности, которую она не помнила.

    Любой разработчик иконки вам скажет, что для идеограммы придумывается ассоциация: он переносит метафору на себя, опрашивает коллег, друзей на предмет ассоциации: какие образы у них возникают при том или ином понятии. Как показал Милтон Эриксон в своём эксперименте — словесная ассоциация это бессознательная субъективная сущность.

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

    Как быть?
    Снова слову Джефу Раскину:
    Возникает очевидный вопрос, который я неоднократно слышал от пользователей, впервые встретивших такие текстовые окна: «Почему вместо пиктограмм сразу не использовать текст?» В самом деле почему бы и нет? Ведь, по сути дела, вместо того чтобы объяснять, пиктограммы зачастую сами требуют для себя объяснений. Использование пиктограмм вместо слов вполне подходит для того, чтобы скрыть или зашифровать какую-то информацию от посторонних глаз. Проблему пиктограмм можно рассматривать как проблему ограниченной видимости. В интерфейсе показана пиктограмма, но ее смысл невидим, или же ее изображение может дать неверное сообщение для тех, для кого это изображение незнакомо или кем это изображение может быть истолковано по-другому.

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

    В 1990 году в Советском Союзе не боялись писать словами. Микроволновка Электроника СП23 ЗИЛ, 1990 года выпуска. Дизайнеры Metro черпали вдохновение с совесткой СВЧ!



    В 2012 году разработчики очень боятся текста и используют целый набор идеограмм-смайликов в микроволновке DAEWOO. Даже заголовки в виде иконок.



    Разработчики LightWave 3D выкинули почти все иконки из управляющих элементов, рабочих окон, меню и вставили текст.



    Для сравнения интерфейс 3D Max:



    Если же иконку приходится использовать.
    Слово Денису Кортунову:
    Выбор того, что будет изображено на иконке — всегда компромис между узнаваемостью и оригинальностью. Перед тем, как придумать метафору для иконки, очень желательно посмотреть, как это сделано в других продуктах. Возможно, лучшим решением будет не придумывать что-то оригинальное, а сделать как везде.

    Пример оригинальности:



    Заключение
    В 1970-х годах по заказу американского министерства транспорта (U. S. Department of Transportation) была разработана система из 50 пиктограмм, изначально предназначавшаяся для аэропортов, впоследствии получившая широкое распространение и всеобщее признание. Дизайнеры проектировали пиктограммы на основе таких критериев, как четкость, международная узнаваемость, устойчивость к вандализму и понятность без слов.

    Таким образом, есть 50 пиктограмм, понятные всем. Что будет если не учесть один из критериев? Будет костыль в виде подписи — пиктограмма не сработала.





    А если свою систему придумать? Как вы думаете, что изображено на этом знаке?


    Ответ на странице http://artgorbunov.ru/bb/soviet/20080623/

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

    Для самостоятельного изучения:
    1. Pictogram
    2. Ideogram
    3. DOT pictograms
    4. ISO 7001
    5. Laundry symbol
    6. Canadian Fashion Connection – Laundry symbols
    7. Пиктография
    8. Идеограмма
    9. Венский метод
    10. Роль Отто Нейрата в зарождениии современной инфографики
    11. 10 ошибок в дизайне иконок
    12. Эриксон Милтон, статья в википедии
    13. Уолтер Айзексон, «Стив Джобс. Биография»
    14. Конструирование языка пиктограмм пользовательского интерфейса
    15. Icon design
    16. Icon creation process
    17. Computer icon
    18. Icons from various interfaces
    19. Pictograms, Icons and Symbols
    20. Джеф Раскин, «Интерфейс: новые направления в проектировании компьютерных систем»
    Share post

    Similar posts

    Comments 194

      +9
      На самом деле пиктограммы — это своеобразные иероглифы, только в современном варианте. Если отвлечься от иконок приложений, то пиктограммы — это и дорожные знаки, и различные математические/технические символы, и всевозможные коммерческие логотипы, и много чего еще. Мы их постоянно видим и используем в жизни, порой даже не замечая.
      Может быть, имеет смысл постепенно «стандартизировать» наиболее универсальные некоммерческие пиктограммы, на международном уровне конечно же… дизайн оставить дизайнерам, но обобщенные образы пиктограмм заносить в какую-то базу, со временем создавать для них черно-белые unicode символы и «обобщенные» цветные образы, ну и поощрять их повсеместное использование.
        +10
        Вы не поверите… Раз, два
          0
          Да я в курсе:) Это таблица символов unicode, а речь идет об отдельном описании пиктограмм как таковых, отдельном стандарте, на котором основывался бы и Unicode, и прочие стандарты, в которых используются пиктограммы.
            0
            В чем главное отличие пиктограмм по вашим ссылкам от упомянутых 50 пиктограмм?

            В первом случае фиксируется только изображение, а во втором — еще и означаемое. Что немаловажно, т.к. дает однозначность понимания. Разумеется, до тех пор, пока пиктограмма не будет использована в контексте, отличном от руководства. Это породит многозначность. И она является одной из проблем составления базы, предлагаемого NeoCode.
            +2
            И главное. Идеограммы не приходят сами по себе, их надо изучать. Допустим, у меня, когда я был маленьким, были хорошо изданные карточки дорожных знаков. Магнитофонные символы я впервые увидел с подписями, но, видимо, подписывать требуется разве что кнопку «Запись» из-за потенциальной опасности.

            У иконок я вижу два назначения.
            1. Знакомые якоря в незнакомой обстановке. Если мы вас вместе с машиной телепортируем в другой город, вы будете с лёгкостью ездить, возможно, блуждая, но не встревая в аварии. Видим магнитофонные кнопки — значит, можно что-то проигрывать.
            2. Ускорение навигации в знакомой обстановке. В компьютерах примеры под носом, а в жизни… возьмём знакомое 16-этажное здание без лифта. Надо забежать к Васе. Плохо: все этажи одинаковы, остаётся только отсчитывать. Лучше: когда перед глазами номерки этажей. И идеал — когда этажи отличаются так, что Васин мы легко отличим от остальных.
              +3
              Согласен — отличная тема.

              Автор рассмотрел недостатки иконок, но практически ничего не сказал про достоинства. Ведь надпись мы читаем каждый раз, а иконку узнаем мгновенно. Я в последнем отпуске (не у нас) приметил, что надписи на асфальте «право», «лево» читаю каждый раз снова.
              С другой стороны, иконки требуют обучения.
              То есть мы инвестируем в обучение, чтобы в дальнейшем пользователь мог узнавать элементы быстрее.
              Когда такие инвестиции окупятся?

              Очевидно там, где пользователь будет работать с элементами долго, а не один или несколько раз в жизни.
              Например стиральная машина. А вот «окрашено» на лавочке каждый человек увидит лишь раз или два.

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

              Был бы вот такой единый реестр иконок — мы могли бы существенно снизить расходы на обучение и иконкам мы бы чаще радовались.
                0
                Спасибо.

                Согласен, стрелки на асфальте будут работать лучше, чем текст. Люди иногда путают, лево с право и наоборот. Но нужно помнить, что текст может работать как иконка, например TAXI.
                  0
                  Ведь надпись мы читаем каждый раз, а иконку узнаем мгновенно.

                  Совершенно верно. Причина в том, что мы считываем атрибуты цвет, размер, положение гораздо раньше, чем вглядываемся в детали букв. У фотографов есть понятие «цветовые пятна». Вот это про то же самое.

                  Например, если надписи на асфальте «право» и «лево» (не у нас) нанести разными цветами, то, скорее всего, их перестанут читать как текст, ограничиваясь восприятием цвета. Автор статьи комментарием выше очень точно дал название этому — текст и правда становится иконкой.
                    0
                    Это мы знаем, что как иконку пуска в Windows не перерисуют, она так и останется пуском снизу слева.
                    А когда я родителям говорю удалённо «нажмите кнопку Пуск внизу слева», они каждый раз удивлённо спрашивают «нет там никакой кнопки Пуск, есть три разноцветных кружка (Start, Chrome и Picasa), какой из них ?»

                    Ещё замечено, что советскому поколению вообще ничего не говорят пиктограммы «Play, stop, pause». Даже стандартный значок включения (кружок с палкой сверху) вообще ничего не говорит на любой бытовой технике, если он не подписан или не выделен размерами/цветом.
                  +2
                  Рекомендую вам эту статью tapemark.narod.ru/les/374c.html

                  Обратите внимание: американцы не боятся подписывать дорожные знаки, если идеограмма трактуется неоднозначно ru.wikipedia.org/wiki/%D0%94%D0%BE%D1%80%D0%BE%D0%B6%D0%BD%D1%8B%D0%B5_%D0%B7%D0%BD%D0%B0%D0%BA%D0%B8_%D0%A1%D0%BE%D0%B5%D0%B4%D0%B8%D0%BD%D1%91%D0%BD%D0%BD%D1%8B%D1%85_%D0%A8%D1%82%D0%B0%D1%82%D0%BE%D0%B2_%D0%90%D0%BC%D0%B5%D1%80%D0%B8%D0%BA%D0%B8
                  Фактически сами не придерживаются стандарта.
                    +14
                    Подозреваю, что основной причиной любви производителей современной техники и софта к пиктограммам является то, что товар надо продавать не на одном рынке. Каждая дополнительная текстовая надпись — это затраты на локализацию.
                      +1
                      +1, в случае с, например, 3d max человек, привыкший к иконкам сможет работать с любой локализацией.
                      Возможно, лучший выход — текст+иконка=
                        +9
                        Не только. Например в максе достаточно только запомнить что какая иконка делает и потом мгновенно, с первого взгляда, ее находить и использовать.

                        А искать нужную текстовую кнопочку среди 100500 других текстовых кнопочек в разы сложней. И эта сложность не уменьшается по мере освоения. Т.к. иконка воспринимается как цельный образ, а текст надо читать и осознавать.
                          0
                          Почему текст нельзя узнавать по рисунку?
                            +1
                            Рисунок искомой надписи сложно вычленить в общей массе текста. Посмотрите на интерфейс LightWave — чтобы найти некоторые пункты меню, их нужно перечитывать.

                            Из своего опыта: в интерфейсах без иконок я отыскиваю надписи не по их рисунку, а по их расположению. Проще запоминаются координаты надписи, чем рисунок текста.
                              –2
                              Ничто не мешает запомнить текст по расположению.
                                0
                                Они все примерно в одном месте расположены.
                            +1
                            А если вы не работали месяц с программой? Вам будет трудно вспомнить, какую функцию иконка выполняет. Вам нужен текст для понимания и закрепления.
                              +1
                              Вам это нужно один раз, чтобы вспомнить, а не постоянно на неё смотреть? Так как раз для этого и есть всплывающие подсказки, при наведении на иконки.
                              Только что проверил, в 3ds Max они очень быстро появляются.
                                +3
                                В иллюстраторе работаю не постоянно, могу не открывать неделю. И уже через неделю мне не понятны 20% иконок в панеле инструментов. Думаю не я один такой.
                                  +2
                                  Тут вот в чём дело… Если какое-то время не видеть буков, то вы точно так же не сможете читать слова, как и иконки. Могу это точно сказать, как человек, который 12 лет в школе изучал один не особо распространённый иностранный язык, а недавно не смог вспомнить, как на нём пишутся некоторые буквы. А не так уж много времени со школы прошло на самом деле.
                                    +1
                                    Странно я открыл как то 3Д Макс спустя 5 лет перерыва и сразу же сел и начал работать. Может у вас с памятью что то?
                                      0
                                      Согласен. Назначение кнопок, расположение элементов интерфейса и многие другие вещи в Максе я практически не забываю, несмотря на то, что пользуюсь редко. Вот горячие клавиши приходится вспоминать каждый раз, но этому очень помогает фича с клавиатурой: водишь по кнопкам, выводятся сочетания. Офигительная вещь.
                                  +3
                                  Я вот открыл 3Dmax после 10 лет не использования. Почти матом ругался на иконки. Зашел в опции рендера. Там текст, успокоился. Все стало понятно.
                                  +3
                                  Я не согласен. Во первых слова читаются «целиком» (помните шутку с перестановкой букв?) и воспринимаются сразу, а иконки, если они не тривиальные таки нужно «расшифровывать». В том-же Максе (где смесь иконок и текстовых панелей) куча малопонятных иконок, которые надо конкретно «выучить», а что делают те, которыми не пользуешься часто — быстро забываешь, и потом приходится вспоминать. В этом плане, логически расположенные текстовые меню в LightWave мне нравятся в чем то больше. И уж точно это намного удобнее «чисто иконочного» интерфейса, как, например, в древнем редакторе TrueSpace:

                                  Скриншот
                                  image
                                    0
                                    Читаются они может и целиком, но с беглого взгляда нельзя мгновенно отличить одно слово от другого. И там и там буквы, надо его прочитать и осознать. А это время. Иконка же работает напрямую с распознаванием образов.
                                      +1
                                      Серьезно? Вам «распарсить» слово «Edit» берет больше времени, чем понять что нарисовано на иконке в десяток-другой пикселей шириной? :)
                                        0
                                        В том то и дело, что EDIT надо парсить (особенно если кругом полно другого текста), а картинка просто видится, ее не надо разглядывать и понимать. Надо просто помнить как она выглядит.
                                          0
                                          «Парсить» я в переносном смысле сказал, графическую информацию точно так-же нужно переварить, как и текстовую. Я не совсем понимаю, с чего вы взяли, почему иконки «воспринимаются сразу» а слова надо «парсить»? Вы же не по слогам читаете? И графическую абстрактный образ (кроме самых простых) тоже нужно «переварить». Автор статьи не зря говорит про «ребусы» в которые превращаются нетривиальные иконки, как в Максе например.
                                            0
                                            Ну вы же буквы не разглядываете, а буква это, считай, микроиконка, они распознаются фоном. Также и тут.

                                            Совершенно не важно, что нарисовано на иконке главное чтобы в голове была железная связка иконка=действие. Пусть там будет даже полный бред. А найти иконку среди иконок проще. Чем слово среди слов.

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

                                            Я тут где то в комментах предложил замерить время нахождения слова среди слов или картинки среди картинок.

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

                                            А если вы знаете, что надо нажать такую «синенькую кнопочку с зеленой стрелочкой» то с первого же взгляда вы отбрасываете все, что не синенькое, а следующим же мгновением определяете где там зеленая стрелочка.
                                  • UFO just landed and posted this here
                                      0
                                      Речь идет не о долгом поиске, а о разнице в 100-300 милисекунд на поиск нужной точки куда надо ткнуть мышью. При долгой работе и частом использовании эти миллисекунды вырастают в часы.
                                      0
                                      С точки зрения психологии восприятия, мне кажется, вполне возможно, скорость распознавания иконки может не сильно отличаться от восприятия слова.
                                        0
                                        А вы эксперимент поставьте, напишите прогу которая выстреливает по 6-7 иконок и тут же их прячет, спустя пол секунды и надо по памяти воссоздать их расположение и то же самое делает со словами.
                                          0
                                          Хорошая мысль. Я как раз собирался писать код, чтобы мерять скорость реакции в несколько других ситуациях, но его можно будет и тут применить. Если получится что интересное, напишу статью.
                                            0
                                            Вот вам еще одна хорошая мысль, как сравнить скорости работы чисто текстового и чисто пиктограммного интерфейса.

                                            Создайте пары «действие» — «иконка. Причем такие, чтобы они были знакомы и понятны до спинного мозга. Ну как например „Сохранить“ — иконка дискеты, „Копировать“ — иконка двух листочков и все в таком духе.

                                            Дальше прога гонится в двух режимах. В первом на экране кнопки с названиями операций (сохранить, копировать, закрыть, удалить и так далее) кнопки стоят как стоят. Не меняются, Просто массив их как есть. Имитирует ту же панель лайтвейва, например. А где нибудь снизу выстреливает иконка и нужно ей нажать соответствие. Засекается время от показа иконки до нажатия нужного термина.

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

                                            Чтобы оценить именно время нахождения известного элемента в известном месте для его графического и текстового варианта.

                                            Дальше тупо сравниваем время реакции для того и другого случая.
                                              0
                                              Не совсем понимаю, какую гипотезу вы предлагаете проверить таким замороченным способом. Про первый способ все понятно — моя гипотеза состоит в том, что скорость построения в сознании образа команды, привязанной к иконке и скорость получения смысла слова обрабатываются разными участками мозга и поэтому скорости должны быть соизмеримы.

                                              Операционализируется эта гипотеза так. Независимая переменная стимулов, номинативна — иконки или слова. Зависимая переменная — время между подачей стимула и выбором операции, которую стимул обозначает.

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

                                                Потому найти известный текстовый элемент среди текстовых гораздо более долгая задача чем найти известную иконку среди иконок.

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

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

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

                                                    Но вообще, я думаю, что вы не правы. Например, доказанный факт, что распознаванием лиц занимается отдельная область мозга, а у нас тут еще и процессы разные. В смысле — узнать иконку — значит сравнить ее с каким то прототипом в памяти. А прочитать надпись — построить ее смысл, это область языка. Грубо, но идея ясна, мне кажется.
                                    +11
                                    Здесь очень уместно упомянуть историю мелкомягкого «риббона» — нового взгляда на пользовательский интерфейс. Он появился не просто так, а потому что никто не знал, какие фичи в Офисе есть, потому что большинство запросов «хочу эту фичу в Офисе» имело ответ «уже есть, оно во-о-он там», потому что пользователи знали предназначение в лучшем случае половины кнопок на тулбарах. Обратите внимание, что на «риббонах» очень много текста, исключительно иконки оставлены лишь в редких местах, где одинаковые кнопки используются на протяжении десятилетий в тысячах программ, и где по иконке явно видно назначение («сохранить», «курсив»).

                                    Вот видео, обязательное к просмотру всем, кто разрабатывает сколь-нибудь сложные пользовательские интерфейсы:
                                    The Story of the Ribbon

                                    Вы увидите любопытнейшие графики с количеством элементов управления в Офисе на протяжении всей его истории. Вы узнаете, как мелкомягкие заставили пользователей нажимать кнопку «Reply» в аутлуке на тулбаре, а не лезть в контекстное меню. Вы узнаете, почему кнопки на офисном риббоне отсортированы так, а не иначе (в частности, с какого перепугу главной кнопкой стала кнопка «вставить»). Вы посмотрите в картинках историю мытарств с интерфейсом Офиса. Вы осознаете объёмы исследований, вложенных в разработку «риббонов». Вы рассмотрите десяток альтернативных интерфейсов. Вы внимательнее приглядитесь ко всем мелочам реализации офисного интерфейса. Вы поймёте роль текста и иконок.

                                    Когда-то я ненавидел риббоны («Опять переучиваться!»), позже стал к ним равнодушен («Фи, очередная новомодная штуковина»). После просмотра этого видео риббоны я зауважал.
                                      0
                                      Когда-то мне довелось видеть рождение нового продукта Hexagon2:

                                      fc03.deviantart.net/fs18/f/2007/150/3/0/Getting_to_know_Hexagon_2_by_lelu.jpg

                                      Это гениальный 3D редактор, с гениальным интерфейсом. К большому сожалению, компания CARRARA была скуплена DAZ.
                                      А с этими товарищами вовек ничего нового не дождешься. Продукт умер в стадии рождения.
                                        0
                                        Я на работе в Office 2007 до сих пор часто не могу найти нужных вещей. Приходится плавать по риббонам и искать нужную всплывающую подсказку. Зачастую, просто заканчиваю поиском в гуглояндексе «как сделать то-то то-то». При этом я неплохо работал в своё время со старыми M$ Office, OpenOffice.org и даже LaTeX.
                                          0
                                          Искать кнопки по подсказкам? В риббоне же днём с огнём не найти кнопку без надписи (кроме главной вкладки, где форматирование). Или у вас разрешение монитора очень маленькое, и надписи не помещаются?
                                          +3
                                          А я влюбился в риббон с первого взгляда.

                                          Действительно, объем работы просто неимоверный
                                            0
                                            А у меня новый интерфейс 2007 офиса вызвал недоумение, слишком много лишней информации и занимает очень много места. Это сейчас в сидя за 27 монитором с разрешением 2560х1440 мне не жалко места, но тогда на эране ноутбука мне очень хотелось вернуть компактные панели с иконками, настроенные для себя и выпадающие списки меню.

                                            П.С. Сейчас переучился и уже не вызывает сложности что-то найти, но не скажу что есть удобство в больших надписях.
                                              0
                                              Маленький секрет: если свернуть ленту, она выглядит как меню.
                                              +1
                                              Спасибо.
                                              +3
                                              Слово как и изображение -всего лишь разный набор координат из пикселей.Вариации форм и цвета. Вопрос что будет удобнее для пользователя в каком случае.?
                                              Иконки носят больше информации: цвет, форма. Текст — только символы. При большом количестве объектов нужно смотреть, путаешься ли в одинаковых иконках или сложно ли смотреть список.?

                                              Вопрос: что делает эта иконка?
                                              Ответ будет позже)



                                              Иконки из Rhinoceros считаю верхом удобства. Они правда очень удобные. Контрастные, не сливаются, понятные, не занимают много места.
                                                +11
                                                Пошинковать кота.
                                                  +14
                                                  А я думал, машиной переехать.
                                                    0
                                                    Не машиной а вот такой штукой же)

                                                      +1
                                                      верно, переехать машиной кота. Только комманда это само собой специфическая и приминима к 3D области.
                                                      Группа закладок под названием «surface tools». Здесь кота скорее размазывают или развертывают.

                                                      А если чуть более умно — происходит выравнивание поверхности с находящимися на ней кривыми в плоскость.
                                                      +24
                                                      Пошинковать кота.

                                                      У меня или такой вариант, или «Кот-спутник». Как-то так (извините за плохое качество):

                                                        +4
                                                        image
                                                          0
                                                          Да-да, это именно он на моём коллаже.
                                                      +3
                                                      Да, чёткость иконок очень важна. Помню, как я ненавидел переход со стиля 9x/2000 на XP, когда иконки внезапно перестали быть пиксель-артом, а о выравнивании по пиксельной сетке ещё никто не начал задумываться. Тогда множество иконок внезапно стало совершенно невоспринимаемыми на 16x16 и с великим трудом разбираемыми на 24x24. Сейчас другая беда приключилась — «мода» на убогие черно-белые иконки, но их хотя бы по пикселям чаще выравнивают. Надеюсь, скоро эта мода пройдёт, и что за пределами «метры» она большого распространения не получит.

                                                      В Rhinoceros иконки на мой взгляд очень правильные: ненавязчивые цвета, идеальное выравнивание по пикселям, грамотное сглаживание линий. Назначение иконок не сказать, что так уж очевидно, но при знании программы они, думаю, легко запоминаются. Я бы поставил под сомнение разве что пары сглаженно-несглаженно в первом ряду — разница невелика, приходится вглядываться в пиксели.
                                                        +1
                                                        Cut?
                                                          +1
                                                          Cut the cat!
                                                            0
                                                            Нет конечно. Там не только кот, там же что то еще.
                                                            0
                                                            эм… очистить поверхность?
                                                              +2
                                                              Запустить IrfanViewer?
                                                                +6
                                                                Попробуйте закрыть текст справа и догадайтесь что означают иконки слева.
                                                                У иконок есть форма и цвет.

                                                                image
                                                                  0
                                                                  Узнал только ПФР, про процент догадывался, что что-то о кредитах.
                                                                    0
                                                                    Оплата и переводы тоже весьма понятны, т.к. часто используются.
                                                                  +1
                                                                  Я не знаком с терминологией 3D-редактирования, но мне кажется что это либо создание «трафарета» по проекции какого-либо трехмерного объекта на плоскость, либо «сжатие» 3-х мерного объекта до 2-х измерений по какой-либо оси.
                                                                    0
                                                                    Unrolls a surface without restriction to single-directional curvature.

                                                                    Верно. Чуть выше пояснил с картинкой. Здесь 3D имеется ввиду моделирование с помощью NURBS.
                                                                    Rhinoceros чистый NURBS моделер. Отсюда это «single-directional curvature». В программа со скрещенными технологиями NURBS и полигонов (два края одной палки)3D max, maya, cinma 4D
                                                                    особо таким мелочам в коммандах не придауют. Оно особо там и не всегда нужно.
                                                                    +11
                                                                    По-моему, это очевидно.
                                                                    image
                                                                  +1
                                                                  Разработчики LightWave 3D выкинули почти все иконки из управляющих элементов, рабочих окон, меню и вставили текст.

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

                                                                  Для простых интерфейсов действительно имеет смысл функции подписать. Сложный интерфейс с множеством кнопок всё равно придётся изучать. И после того как ты уже знаешь примерно, где какая кнопка, выхватить взглядом пиктограмму куда проще, чем искать в списках.
                                                                    +7
                                                                    Простите, не холивара ради, но справедливости для. Я работаю в lightwave много лет, и заверяю вас — отсутствие иконок способствует быстрому изучению шорткатов и повышает производительность в разы.
                                                                      0
                                                                      Изучению шорткатов способствует желание повысить производительность, а не отсутствие иконок.
                                                                        0
                                                                        Спросите пользователей vim/emacs, у них вообще мыши нет
                                                                          0
                                                                          Когда на кнопке нарисован куб ты нажмешь ее и сделаешь куб. А когда на кнопке написано «Box ^X» ты нажмешь ее пару раз, но ^X отложится в голову гораздо быстрей чем в случае с иконками. Так же могу судить по шопу/иллюстратору в которых работаю так же давно, и пользуюсь шорткатами, но присутствие в них панелей инструментов с иконками не способствует быстрому впитыванию шорткатов.
                                                                        +1
                                                                        Новичкам действительно будет проще изучать интерфейс по текстовым заголовкам. Но профессионалам панели с иконками будут мешать. Предполагаю, что для них главное увеличить рабочее пространство и пользоваться горячими клавишами.
                                                                        0
                                                                        Насчет валика с краской — сразу понял, в чем суть. А вот микроволновка daewoo — ад, я вообще не понимаю, что верхняя ручка делает.

                                                                        Пиктограммы в общем случае — хорошо, но только если помогают человеку ориентироваться быстрее. Собственно, больше тут нечего обсуждать. Если они мешают, или не помогают — их следует заменить на текст.
                                                                          0
                                                                          Обсуждать нечего, но ситуация не меняется — все пихают иконки :-)
                                                                          +26
                                                                          Мне как-то даже страшно выступать против таких зубров… Но я тоже изучал теорию построения UI :(. Не в университетах, к сожалению, а на практике и по интернетам — но прикладного ПО сделал много.

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

                                                                          Задача иконок — обеспечить скорость выполнения операции. Они находятся по скорости доступа между верхним меню (долго искать, зато текст) и хоткеем (мгновенно, но надо запоминать клавиатуное сочетание). Пользователю проще с третьего раза запомнить цвет-форму-расположение иконки — и дальше уверенно, и, главное, быстро кликать в нее мышью. При этом что на иконке нарисовано — вторично, главное чтобы они друг от друга отличались. Пользователь как идет — он сперва пользуется верхним меню. Потом для часто используемых операций он запоминает иконку из верхнего меню (это, кстати, ответ на вопрос зачем в верхнем меню стали делать иконки) — и уже уверенно кликает эту же иконку на панели иконок. А для самых часто используемых оепарций особо продвинутые пользователи могут даже прочитать клавиатурное сочетание в тултипе иконки / в верхнем меню — и делать операцию мгновенно.

                                                                          Обычно для 2-3 самых частых операций помнят клавиатурные сочетания, еще 5-10 менее используемых через иконки, все остальное — через меню.

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

                                                                            0
                                                                            Абсолютно согласен.
                                                                            Добавлю только, что есть еще один очень удобный способ вызвать комманду, общее название к сожалению не знакомо, что-то типа Command Palette [Ctr+Shift+P] в Sublime Text, Ubiquity [Ctrl+Space] в Firefox, быстрый старт в dash/unity Ubuntu [Win] или Windows 7 [Win] и т.д.

                                                                            С тех пор как первый раз попробовал, это теперь для меня киллер-фича. Sublime например не поменяю ни за что, да и на Firefox сижу только из-за Ubiquity (для Хрома пока не видел подобного).

                                                                            Пусть может и не правильно сравнивать с рядовым обывателем, но все же ваш пример для меня выглядит как-то так:
                                                                            50% через shortcut (включая неявные shortcut'ы для меню типа Alt+F, L -> File, Save All, 40% через Command Palette, 5-10% меню (или очень редкие или нет ни shortcut ни команды в палетте).
                                                                            На икону буду жать исключительно если в руках мышь и клавиатура не нужна, ну и например в планшетах (на смартфоне), по понятным причинам — клавиатуры в прямом виде и shortcut'ов просто нет.
                                                                              +1
                                                                              Попробуйте в Unity нажать и сразу отпустить Alt, когда фокус у Хрома и написать что-то вроде «от» (русский) — HUD называется, во всех нормальных приложениях работает -удобнее чем «неявные шорткаты».
                                                                              –1
                                                                              Отчасти верно, но текст в определённом контексте тоже можно рассматривать как «иконку», для ускорении выполнения операции. Текст в таком случаем будет восприниматься блоком, а якорем скажем будет первая буква.
                                                                                0
                                                                                Текст читать надо. Мозг, конечно, читает слова целиком — но все равно человек в столбце строк и в столбце иконок будет находить нужное разное время. На long run, естественно. Поэтому делают layered интерфейс — текст выносят в верхнее меню, «для поиска», иконки и прочие графические элементы занимают промежуточное положение и хоткеи — самые быстрые.
                                                                                  0
                                                                                  но все равно человек в столбце строк и в столбце иконок будет находить нужное разное время

                                                                                  Не понял, приведите пример.
                                                                                    +1
                                                                                    В верхнем меню из 10 слов — «File», «Tools», «Settings» итд. человек находит взглядом нужный эелемнт медленнее, чем для 10 иконок. Даже если пользуется программой не первый раз и прмерно знает какой по счету нужный пункт. Мозг простые цветные иконки различает гораздо быстрее, нежели читает слова. Так исторически сложилось.
                                                                                      0
                                                                                      Включаю критическое мышление.
                                                                                      Это ваше предположение или есть достоверное исследование?
                                                                                        +1
                                                                                        Есть конечно, «текст-против-иконок» это старейшая тема, она уже копана-перекопана. В гугле и яндексе ищется.
                                                                                      0
                                                                                      Выпадающее меню (или контекстное) бывает иконка + надпись, бывает просто надпись. В первом случае я сориентируюсь быстрее, особенно под конец дня, когда мозг устал. Разумеется, если это приложение знакомо, а не впервые его вижу.
                                                                                        0
                                                                                        Вы имеете в виду списки в меню?
                                                                                        Так ведь уже давно так списки не оформляют серьёзные системы.
                                                                                          0
                                                                                          Как не оформляют?
                                                                                            0
                                                                                            Photoshop CS6.
                                                                                            В пунктах меню нет ни одной иконки.
                                                                                              0
                                                                                              Мне как-то приятнее видеть одинаковые системные иконки во всех приложениях, выполняющие одинаковые функции.

                                                                                              image

                                                                                              По поводу специализированного софта — на усмотрение авторов. Есть действительно полезные, один взгляд на которые позволяет понять, что делает данный пункт, а есть вообще «не в тему»
                                                                                +5
                                                                                Если подумать, иконки кроме тех 50 пиктограмм — костыль на костыле

                                                                                Посмотрел я эти 50 пиктограмм… Сомневаюсь, что они всем так уж понятны. Не читая описания вряд ли поймёшь что это:
                                                                                image

                                                                                Или отличие этих двух:
                                                                                imageimage

                                                                                Да и что вот это не электричка image понятно лишь по тому, что знаешь, что электричка — вот это image
                                                                                  +2
                                                                                  Кофейное зерно? Таможенник делает проверку багажа, а потом проверяет декларацию?
                                                                                    +5
                                                                                    Угу "В случае пожара ищите кофе"
                                                                                      +5
                                                                                      Выпейте кофе, все равно бежать некуда.
                                                                                        +3
                                                                                        В случае жопы бежать сюда. D
                                                                                      +2
                                                                                      Очевидно же, близорукий таможенник нашел книгу в багаже.
                                                                                        0
                                                                                        Тоже подумал про кофе. Вторая версия — таблетка. Ну или… …всё, сдаюсь.
                                                                                        +2
                                                                                        Явный автобус. Как это можно принять за электричку не понимаю.
                                                                                          0
                                                                                          Честно говоря, написав электричка я думал о метро. Просто не думал, что кто-то будет придираться.
                                                                                          +9
                                                                                          Я вот, кстати, вообще во многих этих картинках вижу не то, что имели ввиду создатели…

                                                                                          Стоит, что ли, про неё мультик сделать? Милая она…
                                                                                            +3
                                                                                            Человечек с головой от электрички? :-)
                                                                                              0
                                                                                              Это противогаз.
                                                                                                +1
                                                                                                Это Enderman с головой, похожей на локомотив :)
                                                                                              0
                                                                                              А че так криво ножки-то подрисовали? ;) Некачественно троллите )
                                                                                              Выше чуть в каментах эта иконка в исходном виде.
                                                                                              Гы, кстати у Вас же :)
                                                                                                0
                                                                                                Знаю, вектор и переделывал. Просто это было сделано рано утром, после бессонной ночи, на скорую руку.
                                                                                                0
                                                                                                Любопытно, а почему она у вас женского рода?
                                                                                                  +1
                                                                                                  Бантик.
                                                                                                    +1
                                                                                                    Спасибо! Именно вы поймёте, что это человек в шляпе.

                                                                                                    И человек в шляпе, натянутой до ушей.
                                                                                                    … ну, либо практически без шеи.
                                                                                                  +1

                                                                                                  Внизу таблица III теста Роршаха. Под ней три необычные интерпретации. 1. Испытуемый (больной шизофренией с острым чувственным бредом) объединяет в одном ответе центральное красное пятно, нижний черный участок и белый промежуток между ними. Он увидел во всем этом «медведя на горшке». Налицо три странности: выделение пятен необычной конфигурации; смещение фигуры и фона; алогичность самой ситуации. 2. Другой испытуемый (чудак) выделил в той же таблице только три красных пятна: «пряди волос» и «галстук-бабочку». Их он дорисовал до «человека». Изображение строится в белом пространстве над таблицей и выходит за ее пределы. 3. «Поминальное целование» — именно так истолковала перевернутую на 180° таблицу больная шизофренией с острым чувственным бредом. Она увидела в пятнах трех человек: в центре «умершую старушку» (в саване, украшенном красной лентой) и двух целующих ее «родственниц». Очертания «тела старушки» не соответствуют контурам пятен. Специалисты определяют такие толкования как ответы с нечеткой формой. В интерпретации отражено тревожное состояние больной.
                                                                                                    0
                                                                                                    Намёк понял. =(
                                                                                                  0
                                                                                                  Согласен, не все очевидны.
                                                                                                  У них скорее всего должны быть подписи.
                                                                                                    +3
                                                                                                    А для меня первая приведённая иконка почему-то стойко сассоциировалась с «разрывом шаблона»:
                                                                                                    image
                                                                                                      +1
                                                                                                      Интересно, что ваша овца-разрыв-шаблона напоминает мозги…
                                                                                                      +2
                                                                                                      image
                                                                                                      Fruit Ninja же…

                                                                                                      image
                                                                                                      Автобус на метро не очень похож:
                                                                                                      1) вагоны метро имеют чуть другое сечение;
                                                                                                      2) лобовое стекло или состоит из более чем одной секции или имеет другие пропорции.
                                                                                                      0
                                                                                                      Больше всего раздражают иконки в мобильных приложениях, там курсора мыши-то и нету, а просто так нажимать на кнопки страшно, в итоге, например, не знаю, что некоторые кнопки в твиторном приложении делают.
                                                                                                        0
                                                                                                        Пользуйтесь правильными клиентами, где кнопки подписаны, например.
                                                                                                        • UFO just landed and posted this here
                                                                                                            0
                                                                                                            Где вы такое видели?
                                                                                                            • UFO just landed and posted this here
                                                                                                                0
                                                                                                                Действительно! Надо же, не знал.
                                                                                                                Правда работает на каких-то выборочных кнопках… Лучше выложите скриншот, наверное я не один, кто этого не знал.
                                                                                                          +2
                                                                                                          Мне кажется автор немнго перегибает, в частности в подписях кнопок стиральной машины. Если человек не в состоянии придумать им действия связанные со стиркой, то ему хоть весь мануал перепечатай на панель он все равно постирать не сможет.
                                                                                                          Тема пиктограмм против текста просматривается еще и в правилах дорожно го движения. Если сравнивать американский вариант и европейский( под европейским я понимаю Российский тоже). То видно, что Европа придерживается стандартизированного вида знаков, с минимум текста. Вроде это какой-то международный стандарт даже. Америка же в свою очередь стремится подольше надписей поставить. Вот примеры:
                                                                                                          Ограничение скорости 1
                                                                                                          Ограничение скорости 2
                                                                                                          Движение по полосам
                                                                                                          Когда и как поворачивать на лево

                                                                                                          А вот мой любимый, но как видите, даже подробный текст со стрелкой не помогает
                                                                                                          Остановка на красный

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

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

                                                                                                            Это венская конвенция ru.wikipedia.org/wiki/%D0%92%D0%B5%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BA%D0%BE%D0%BD%D0%B2%D0%B5%D0%BD%D1%86%D0%B8%D1%8F_%D0%BE_%D0%B4%D0%BE%D1%80%D0%BE%D0%B6%D0%BD%D1%8B%D1%85_%D0%B7%D0%BD%D0%B0%D0%BA%D0%B0%D1%85_%D0%B8_%D1%81%D0%B8%D0%B3%D0%BD%D0%B0%D0%BB%D0%B0%D1%85

                                                                                                            Согласен с вами, мне тоже ближе американский подход к обозначению дорожных знаков.
                                                                                                              0
                                                                                                              А люди, коментирующие эту картинку, точно знали, что это часть стиральной машины?
                                                                                                              Просто странно, что иконка часов никаких ассоциаций с таймером не вызвала. Хотя конечно тут можно согласиться, что угадав сходу примерный смысл кнопок, точно без инструкции не понять, что конкретно они делают.
                                                                                                              Например если часы это таймер, то это таймер на продолжительность стирки или таймер перед запуском стирки.
                                                                                                                0
                                                                                                                Вот поэтому зачастую идеограмма это ребус, который основан на ассоциациях.
                                                                                                                  +1
                                                                                                                  Таймер обычно обозначают другой иконкой — кружок и две стрелки внутри. А летящие наручные часы как-то странно выглядят :)
                                                                                                                    0
                                                                                                                    Нет, все интересней ;)
                                                                                                                    Это — «Быстрая стирка».
                                                                                                                    +3
                                                                                                                    Мне особенно у них нравятся вот такие знаки
                                                                                                                    Штраф 1
                                                                                                                    Штраф 2
                                                                                                                    Штраф 3
                                                                                                                    Штраф 4

                                                                                                                    Все четко и по делу. Едишь и знаешь сколько тебе будут стоить следующие 10 миль превышения.
                                                                                                                      +2
                                                                                                                      Демотивирует :-)
                                                                                                                    0
                                                                                                                    Последний пример со стрелкой не понял, поясните пожалуйста.
                                                                                                                      +1
                                                                                                                      В Российских правилах, во всяком случае когда я их учил, были четко перечислены места, где следует останавливаться когда горит красный свет на светофоре. Как я помню это у стоп линии если она есть, либо у светофора. И соответственно нет нужды об этом писать у перекрестков. Если правила учил, то считается, что должен знать.
                                                                                                                      В америке же, часто цепляют такой знак к светофорам, чтобы народу напоминать где им нужно останавливаться, когда горит красный. Вот прямо стрелочкой показывают. Но, как видно по картинке, не всегда даже это помогает.
                                                                                                                        0
                                                                                                                        Ой, а я смотрел на стрелочку, которая указывает на светофор, кстати, что она означает?
                                                                                                                        Дорога там тоже волнами.
                                                                                                                          0
                                                                                                                          Эта стрелочка аналог европейского знака «движение по полосам». Указывает куда ехать по полосе над которой она висит. Ну и по американской традиции, для тех кому стрелочки не достаточно, еще и подписано, что только туда и никуда иначе. Я еще более чем уверен что и на самой полосе с которой так надо ехать, тоже будет нарисована стрелка и написано слово ONLY, ну чтобы наверняка :-)
                                                                                                                      0
                                                                                                                      А мне кажеться движение по полосам в американском варианте пока прочитаешь уже раза 3-4 знак проедешь, другое дело стрелки воспринимаются быстрее и читаются с большего расстояния! В некоторых случаях конечно для водителя который не занком с европейсокй системой знаков могут возникнуть вопросы, но на скорости пиктограммы воспринимаются явно быстрее.
                                                                                                                        +4
                                                                                                                        А как же «— Фары и ремень»? :-)

                                                                                                                        image
                                                                                                                          0
                                                                                                                          Когнитивный диссонанс — «Убрать фары и ремень ?»
                                                                                                                            0
                                                                                                                            Нет идеограммы в виде перечёркнутой линии.
                                                                                                                              0
                                                                                                                              — зачем?
                                                                                                                                0
                                                                                                                                Ой.
                                                                                                                                Ерунду написал.

                                                                                                                                Да, надпись чёткий смысл не несёт, если её только не стандартизуют.
                                                                                                                      +1
                                                                                                                      Тут уже многие сказали, что иконки это не только их буквальный смысл, и очень странно, что автор сам этого не осознает. А еще иконки экономят пространство интерфейса и часто помогают объяснить смысл даже подписанных кнопок. Все дело в том, чтобы этот, безусловно полезный, инструмент использовать грамотно. Конечно можно привести кучу примеров совершенно безумных картинок, из которых ничего не понятно, но это не значит, что иконки — зло, тут все очень неоднозначно.
                                                                                                                        +2
                                                                                                                        Автор осознаёт.

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

                                                                                                                        Безусловно, иконки экономят пространство. Но уже сейчас можно пересмотреть отношение и к экономии пространства применением других подходов к проектированию интерфейсов. Примером может служить приложение Clear. Вся работа основана на жестах и нет никаких управляющих элементов в виде иконок. Если я правильно понимаю, по этому пути пошла Opera со своим новым мобильным браузером Opera Ice.

                                                                                                                        Ни разу не говорил, что иконки зло, я на простых примерах постарался показать их ограничения и проблемы. Об этом мало говорят и обсуждают, часто используют бессистемно и бессознательно. Я за пересмотр парадигмы иконок в принципе.
                                                                                                                          0
                                                                                                                          Ну интерфейсы в целом это культурный феномен. И далеко не всегда нужно обходиться без того, без чего можно обойтись. Без кондиционера в машине тоже можно обойтись. Машина будет легче, дешевле, и экологичнее. Но Вы бы такую не выбрали? Стремление к простоте и минимализму не должно быть самоцелью. Как и следование каким-либо принципам в разработке интерфейсов.
                                                                                                                            0
                                                                                                                            Философствовать на эту тему можно долго, но я же хочу обозначить максиму: главное, постановка цели. Если цель сделать самую дешёвую машину, то можно безусловно и без кондиционера.

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

                                                                                                                            Но не согласен с вами на счёт следования каким-либо принципам в разработке интерфейсов www.artlebedev.ru/kovodstvo/sections/176/
                                                                                                                              0
                                                                                                                              Принцип безусловно должен лежать в основе реализации, но он не может быть целью. Нельзя ставить целью отсутствие иконок в интерфейсе. Их использование — это не плохо, это такой-же инструмент как, например, молоток. Сколько его не переосмысливай и не сомневайся в его целесообразности — он всегда останется тем, с помощью чего удобно забивать гвозди. А если ты кроме молотка ничего в руках держать не умеешь — ты просто плохой мастер, молоток не виноват.
                                                                                                                                0
                                                                                                                                Не так.
                                                                                                                                Локальная цель — сделать простой интерфейс.
                                                                                                                                Одна из задач для достижения цели — применение принципа отсутствие иконок в интерфейс. И это не самоцель, это применение принципа, только и всего. Можно применить — 1 управляющий элемент 1 иконка. Это не плохо и не хорошо. Главное, насколько хорошо принцип выполняет поставленную цель по заданным критериям.
                                                                                                                                  0
                                                                                                                                  Не так.
                                                                                                                                  Для достижения цели не задачи, а методы. Никак нельзя метод считать задачей (и целью). Не может принцип отсутствия иконок быть задачей, особенно если этот метод не вполне способствует достижению цели. Такой подход можно расценивать только как упражнение для собственного развития, но никак не профессиональный. Простой интерфейс — это что-то отвлеченное. Интерфейс должен быть понятным и удобным, прежде всего. Добавьте понятности, объясните что-то — и Вы усложните интерфейс. Но он будет лучше работать. Человеку, взаимодействующему с интерфейсом, должно быть не только просто что-то сделать, но и понятно зачем это делать и как это сделать, если у него нет соответствующего опыта. Пиктограммы — это такой же язык общения как и вербальный, просто более низкоуровневый. Он работает с другими центрами мозга и помогает пониманию во многих случаях. Какой смысл отказываться от него? Это все-равно, что, из принципа, пытаться бегать на одной ноге.

                                                                                                                                  В остальном — не понятно с чем Вы спорите, я о том-же говорю.
                                                                                                                                    0
                                                                                                                                    Цель — построить коммунизм.
                                                                                                                                    Задача для достижения цели через принцип — каждому бесплатно квартиру до 2000 года.
                                                                                                                                    Что не так?
                                                                                                                                      0
                                                                                                                                      Не так то, что квартиры никак не связаны с коммунизмом вообще.
                                                                                                                                        0
                                                                                                                                        Хорошо, вот вам главный принцип реализации коммунизма «Каждому по способностям, каждому по потребностям»
                                                                                                                                          0
                                                                                                                                          И какой я должен сделать из этого вывод?

                                                                                                                                          Если вернутся ближе к «нашим баранам»: отсутствие или наличие иконок не является условием или критерием определяющим хороший или плохой интерфейс. Вообще.
                                                                                                                                            0
                                                                                                                                            Вывод прост, ничто не мешает выполнять цель через принцип.

                                                                                                                                            Цель — создать хороший интерфейс по заданным критерием. Одним из возможных задач для достижения цели является принцип отказа от иконок. Если принцип позволяет выполнить цель по заданным критериям, то этот интерфейс хороший.
                                                                                                                                              0
                                                                                                                                              Отказ от иконок так же связан с хорошим интерфейсом, как и коммунизм с квартирами. То есть никак.
                                                                                                                                                0
                                                                                                                                                Расскажите это разработчикам приложения Clear.
                                                                                                                                                  0
                                                                                                                                                  1. Насколько я могу видеть, в Clear есть иконки
                                                                                                                                                  2. Свайп — это принцип взаимодействия и контакта с интерфейсом, иконки же относятся к категории визуального представления.
                                                                                                                                                    0
                                                                                                                                                    Есть, да (2 иконки), но человек никак с ними не взаимодействует.
                                                                                                                                                  0
                                                                                                                                                  Вы не понимаете, что я хочу донести до вас.
                                                                                                                                                  Оценка выполнения цели или задачи должна исходить из критериев, по которым она формулировалась. Только так можно адекватно оценить успешность выполнения, а не хороший или плохой.

                                                                                                                                                  Поэтому выполнение цели через принцип отказа от иконок хотите этого или нет существует.

                                                                                                                                                  Что касается коммунизма. Одной из главных задач было решение проблемы развития жилищного строительства. Задача была — в 1980 году каждая советская семья встретила коммунизм в отдельной квартире. Потом её перенесли к 2000 году. Так вот, решать эту задачу можно через принцип строим только панельки или хрущёвки, вместо сталинок.
                                                                                                                                        0
                                                                                                                                        Понятный и удобный не менее отвлечённое, чем простой. Потому что нужны критерии простоты, понятности и удобства.
                                                                                                                                          0
                                                                                                                                          Вот именно.
                                                                                                                                          0
                                                                                                                                          Принципиальное отличие знаков пиктографии — пиктограмм — от знаков фонетического письма заключается в незакреплённости за пиктограммой конкретной единицы языка, в возможности интерпретации пиктограмм на любом языке; пиктограмма может быть «прочтена» как слово, синоним этого слова, словосочетание, предложение с различными вариациями смысла, несколько предложений.
                                                                                                                                          tapemark.narod.ru/les/374c.html
                                                                                                                                            +1
                                                                                                                                            И? Ну я сам даже лекции читал когда-то на эту тему, не пойму что нового Вы тут пытаетесь мне открыть.
                                                                                                                                              0
                                                                                                                                              Отвечаю на ваш комментарий :-)
                                                                                                                                      0
                                                                                                                                      К чему я вообще все это пишу: я просто люблю иконки, как жанр, как инструмент, как способ сделать интерфейс лучше. Меня задела Ваша точка зрения, её какая-то, на мой взгляд, необоснованная однобокость. Можно критиковать неправильное и бездумное использование иконок и пиктограмм, но не сами иконки и пиктограммы в принципе. Возможно я просто не так Вас понял, но в Вашей статье Вы не говорите ничего в защиту этого инструмента, оттого и ощущение однобокости. =)
                                                                                                                                        0
                                                                                                                                        Если рассматривать иконку как инструмент коммуникации, то у неё есть очень серьёзные ограничения в применении. Чтобы иконка стала эффективным инструментом коммуникации её нужно сделать стандартом. А это довольно долгий процесс. Как написали в комментариях это инвестиция, а окупиться ли она?

                                                                                                                                        Если рассматривать иконки как пиктографическое письмо, то иероглиф можно принять за иконку. Люди общаются? Понимают друг друга? Очень хорошо. Функция выполняется.

                                                                                                                                        В целом согласен с вашими ощущениями, статья писалась однобоко, потому что была такая цель. Но ничего не мешает написать вам статью в защиту иконок :-)
                                                                                                                                          0
                                                                                                                                          Насчет стандартов: их более чем достаточно, есть куча общепринятых метафор и понятных комбинаций из них. Египтяне — те вообще запечатлевали мысли только с помощью пиктограмм, и умудрились построить великую цивилизацию. Этот «долгий процесс» идет уже в течении тысячелетий. Кстати вспомнил отличный пример: игра Portal, где все прекрасно объясняется пиктограммами и они естественным образом считываются. Текст там был-бы совершенно лишним и гораздо менее удобным.
                                                                                                                                            0
                                                                                                                                            Проблема пиктографического письма — её тупиковость.
                                                                                                                                            Восходящие к 16 в. попытки создать на основе пиктографии универсальное средство общения — пазиграфию, призванное преодолеть барьеры естественных языков, не имели успеха
                                                                                                                                            tapemark.narod.ru/les/374c.html
                                                                                                                                              0
                                                                                                                                              Нет никакой тупиковости. Был технологический барьер (и в некотором смысле остается, но в гораздо меньшей степени): для записи текста пиктограммами приходилось жертвовать либо скоростью, либо детализацией и проработкой пиктограмм. Китайцы пошли по второму пути, пожертвовали «похожестью» (так появились иероглифы) и их письменность живет и здравствует. Скорость же легко обеспечить с помощью современных технологий.
                                                                                                                                                0
                                                                                                                                                А вот это уже нужно как следует изучить и осмыслить!
                                                                                                                                            0
                                                                                                                                            Когда китайцы завоюют мир, мы тоже очень легко привыкнем к пиктографическому(иероглифическому) языку :)
                                                                                                                                            Спасибо Вам за обзор, очень интересная тема.
                                                                                                                                            От себя хочу добавить, что движение в сторону пиктограм отражает общие тенденции перевеса «гламура» в отличие от «дискурса» (помните у Пелевина?). Закономерный эволюционный процесс: легче смотреть на картинки, чем читать. И со временем это тоже пройдет, или, скорее, модифицируется. Должны появится новые глубокие исследования психологии восприятия и формирования речи — и на их основе, возможно, появится более эффективный интерфейс.
                                                                                                                                              0
                                                                                                                                              Видимо сейчас ренессанс пиктографического письма с лёгкой руки Эпл :-)
                                                                                                                                  +1
                                                                                                                                  Цифровая клавиатура на советской микроволновке напомнила Windows Phone.
                                                                                                                                    0
                                                                                                                                    Надеюсь разработчики микроволновки запатентовали интерфейс!
                                                                                                                                      +1
                                                                                                                                      Очень стильненькая микроволновка получилась однозначно:)
                                                                                                                                      0
                                                                                                                                      Как обычно, нужен некоторый баланс.
                                                                                                                                      В приложении, в котором весь интерфейс сделан текстом, трудно сразу найти нужную функцию.
                                                                                                                                      Ещё труднее искать в огромном массиве иконок, поскольку в отличие от текста, на понимание большей части придётся потратить время, хотя бы чтобы всмотреться.

                                                                                                                                      Мне кажется, выход — в правильной организации доступных инструментов (несколько уровней), контекстная доступность инструментов.
                                                                                                                                      А иконки таки должны быть подписаны. Когда-то ведь и стандартные New — Open — Save (я про листик, папку и дискетку) не были стандартными, просто за 17 лет люди привыкли к ним и подписи стали не нужны.

                                                                                                                                      Можно посмотреть на изменение интерфейса в автомобилях, да и прочей технике. Недавно посидел в Lancia Thema 8.32 — в этом изобилии приборов и тумблеров даже с подписями не сразу получается разобраться. Стартер, например, вынесен чёрти куда.
                                                                                                                                      За 20 лет интерфейс стандартизировали с точностью до ручника и «умных» коробок передач.
                                                                                                                                      Другое дело, что задачи разных автомобилей несколько меньше различаются, чем задачи разных программ.
                                                                                                                                        0
                                                                                                                                        Самое интересное, что иконка дискеты устарела ещё лет 10 назад, но придумать ей аналог самое вредное решение. Лучшим решением будет идея бесконечного сохранения, примерно как в Гугл Докс.

                                                                                                                                        Вы верно подметили про стандартизацию интерфейса в современных автомобилях.
                                                                                                                                        0
                                                                                                                                        Разделяю мнение автора, по делу.
                                                                                                                                        Сам всегда придерживаюсь мнения, «мало ли что там дизайнер имел ввиду, когда ЭТО нарисовал...» Есть такие определения, смысл которых вообще в пиктограмму вложить крайне сложно и выглядеть для разных людей это будет неоднозначно, по этому если есть возможность писать текстом – пиши!
                                                                                                                                          +1
                                                                                                                                          В иконках есть 2 зла:

                                                                                                                                          — когда разработчик/кодер — сам же и дизайнер программы, и для иконок не рисует то, что подойдет как надо, а берет чужое. И хорошо, если находит подходящее, а то берет (порой даже вектор!) из клипарта, и пихает на кнопку. В результате узнаваемости — ноль, место на экране занято, но работать можно, лишь прочтя названия текстом (хорошо, если подписи есть, а если их нет, приходится читать tooltip-ы).

                                                                                                                                          — когда за концептуальностью теряется удобство использования. Возьмите тот же метро-телефон: все плашки сравнимого (кратного) размера, и отличать их, порой, легче всего именно по рисунку, если бы… если бы содержимое иных из них постоянно не менялось. Вспомните «иконку» плашки адресной книги, на ней постоянно крутятся лица людей из книги. В глазах от этого мельтешит, а к виду плашки не привыкнуть. Та же, в общем, беда и на настольной 8-ке, часть даже стоковых приложений («Путешествия») постоянно меняют вид плашки.

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

                                                                                                                                          И еще — если кнопка не нужна, уберите ее! Если кнопка нужна, но иконка на ней — нет, уберите иконку!

                                                                                                                                          А то вспомнишь внутриведомственные программы (наложка, ПРФ, всякие подобные ведомства), и видишь, что дизайн там от программиста (читай — его нет), и человек, фактически, свой убогий UI пытался «развеселить» добавлением клипарта к месту и не к месту — ЖУТЬ!
                                                                                                                                            +6
                                                                                                                                            Иконки выполняют роль якоря, они упрощают использование интерфейса.
                                                                                                                                            Стоит один раз запомнить иконку и потом ей пользуешься в разы быстрее чем читаешь текст.

                                                                                                                                            Представим любой сенсорный телефон без иконок. Удобно было бы пользоваться таким?
                                                                                                                                              0
                                                                                                                                              А что же это вы место, занятое иконками, не задействовали? Тогда бы надо было текст увеличить в размерах.
                                                                                                                                                0
                                                                                                                                                Добавить метрошности

                                                                                                                                                image
                                                                                                                                                  –1
                                                                                                                                                  Выглядит удобным, сам текст укрупнить и ок
                                                                                                                                                    0
                                                                                                                                                    Не путайте метрошность и квадратность.
                                                                                                                                                    Тут нету ни типографики, ни инфографики. Черт возьми, тут даже контента нету.
                                                                                                                                                    Контент уехал, хром остался, в метро все наоборот.
                                                                                                                                                      0
                                                                                                                                                      Согласен с вами
                                                                                                                                                  +2
                                                                                                                                                  Тут правильно заметили, что иконки — это фактически современные иероглифы. Можно предположить, что подобным же образом создавались и иероглифы древних языков: сначала люди рисовали «понятные всем» пикто- и идеограммы, потом эти картинки усложнялись для добавления новых сущностей, потом они упрощались для легкости написания — и в результате имеем то, что без зубрежки иероглифов понять китайские или японские письмена невозможно.

                                                                                                                                                  Но ведь азбука — это более прогрессивный вид письма, чем иероглифы. Множество преимуществ: по написанию можно понять произношение неизвестных слов; алфавит состоит из малого количества символов; весь алфавит можно разместить на клавиатуре и вводить каждую букву не более, чем одним нажатием на клавишу. Скорость восприятия тоже не страдает: известно, что мы (кроме тех, кто только учится читать) читаем слова целиком, а не по буквам.

                                                                                                                                                  Главное преимущество иконок — это то, что они цветные. В результате можно сделать интерфейс ярким и красочным и тем самым завоевать сердца потребителей. Современные средства графики позволяют размножать иконки без потерь, что устраняет проблему легкости написания, присущую древним иероглифам. Но главная проблема остается: иконки необходимо учить, как и иероглифы, дорожные и предупредительные знаки и т.д.
                                                                                                                                                    0
                                                                                                                                                    Чем хороши иконки, это тем, что за них быстро цепляется глаз. Особенно если опции могут перемещаться с места на место. Текст выглядит слишком однородно, и приходится читать каждую подпись.
                                                                                                                                                      0
                                                                                                                                                      Стиральные машины — действительно зло. Ещё не видел ни одной такой стиральной машины (кроме старой советской неавтоматической двухкамерной машины «сибирь» — там было простое понятное назначение у каждой ручки: одна — таймер стирки, другая — ещё что-то не менее понятное и т.п.), которую я бы понял. Стираю просто строго по алгоритму как мне покажут: этот регулятор на эту отметку, этот на эту, эту кнопку нажать и поехали, а логика всего этого — х.з.
                                                                                                                                                        0
                                                                                                                                                        Есть такая тема:) Иногда смотришь на нее и думаешь — блин, ну я же инженер, почему я чувстую себя блондинкой, которую заставили пользоваться перфокартами?
                                                                                                                                                        Но сейчас вроде производители начали делать нормальные интерфейсы. Вот та же
                                                                                                                                                        Miele например

                                                                                                                                                        Заметьте, никаких иконок вообще, сплошной локализованный текст. Пользоваться очень удобно!
                                                                                                                                                        0
                                                                                                                                                        >Пример оригинальности:
                                                                                                                                                        да ну
                                                                                                                                                        www.rarlab.com/themes.htm
                                                                                                                                                        и любое ribon-приложение тоже гляньте
                                                                                                                                                        а иконку делают вместо текста потому, что в неё мышкой попасть проще — текст нужно читать, а иконка уже видна, текст читать не надо, можно тыркать на автомате, сочетание текста и иконки гораздо лучше
                                                                                                                                                          0
                                                                                                                                                          Спасибо за оригинальности :-)
                                                                                                                                                          0
                                                                                                                                                          Рассматривать иконки в данном разрезе можно, но не нужно.
                                                                                                                                                          Суть в том, что это 1 сторона медали.

                                                                                                                                                          ДА! иконка может быть не узнаваема изначально.
                                                                                                                                                          Но 1 раз познав суть ее, пользователь использует «Эту непонятную штукенцию» в будущем, используя не фокусированный взгляд. (Если сет иконок достаточно грамотный).

                                                                                                                                                          Т.е. для повторного использования интерфейса — иконки незаменимый инструмент. Не надо ориентироваться всегда на первое использование программы. Читать текст (особенно если он идентичен по длине или имеет схожие сочетания букв крайне сложно).

                                                                                                                                                          Пример, который превращает статью в ничто: mkolar.org/misc/letter_order_ru.html
                                                                                                                                                          (Копирайтинг конечно поможет, НО, все-равно, распознавание даже тех слов, которые отличны друг от друга, требует больше затрат внимания, чем выработанный ассоциативный ряд на изображения.)

                                                                                                                                                          Спасибо

                                                                                                                                                            0
                                                                                                                                                            Я лично абсолютно согласен, что иконки при повторном использовании позволяют сразу выполнять нужное действие, не тратя время на чтение и интерпретацию. НО, не могу пройти мимо, видя как для доказательств используется, мягко говоря, неверный пример. blogs.msdn.com/b/fontblog/archive/2006/05/09/594050.aspx (Причём, я не понимаю как он бы здесь применялся, если б был верным)
                                                                                                                                                              0
                                                                                                                                                              Я не доказываю. Статья для размышлений.
                                                                                                                                                                0
                                                                                                                                                                Пример был приведен в качестве иллюстрации омографов и просто сходных по написанию либо рисунку слов, опровергая тезис, что слова (при постоянном использовании, и, как следствие, нефокусированном внимании) однозначно определяют понятия.

                                                                                                                                                                Возможно не лучший пример.
                                                                                                                                                              0
                                                                                                                                                              Отдельное спасибо за список литературы (%.
                                                                                                                                                              А по теме, всему своё место. В случае интерфейса с большим количеством функций на ограниченном пространстве монитора — тут без иконок не обойтись, и решение со всплывающими подсказками совершенно обоснованно.

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