Новости бизнесаСтатьиНоу ХауАналитикаДеньгиБизнес технологииКурс валют
Главная > Новости бизнеса > Hi-Tech > Иконка, текст или иконка с текстом — что использовать при разработке интерфейса — Советы дизайн-студии iA

Иконка, текст или иконка с текстом — что использовать при разработке интерфейса — Советы дизайн-студии iA

Вторник, 18 октября 2016 г.

Следите за нами в ВКонтакте, Facebook'e и Twitter'e



Дизайн-студия iA опубликовала в своем блоге заметку о том, чем плохи графические символы в интерфейсе, почему нельзя заменить их на текстовые подписи и какие правила помогут дизайнеру при создании иконок.

Сооснователь «Проектората» Антон Григорьев перевел для vc.ru заметку студии.

Иконки экономят место и выглядят свежо. Иконки — это быстрый ответ на сложные вопросы:

Как сделать это красивее?
Как это забрендировать?
Как сделать веселее?

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

Есть много разных иконок: на продуктах, в архитектуре, в компьютерах, в списках, на кнопках, для веба и приложений, для iOS и Android. Иконки на панелях инструментов, подписанные и неподписанные, стилизованные и стандартизованные, цветные и монохромные, в шрифтах, файлах PNG или SVG.

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

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

Непонятные иконки замусоривают интерфейс, хотя исследования давно показали, что люди могут запомнить совсем немного значений иконок. Вы помните, что значит каждая иконка? Я — нет. — Дон Норман

Так Норман поучал своего бывшего работодателя — Apple. Примеры «иконотоксикоза» Apple встречаются в iTunes, в почтовом клиенте и на панели управления iOS.

В Twitter iTunes-иконками пугают, как Бабой Ягой. Вот отличный пример из Apple Mail для OS X: сколько из этих иконок вы опознаете без подписи?



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



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



Функционально «чисто текстовый» дизайн ясен как день (если информационные архитекторы справились со своей задачей). Но когда вы убираете изображения из интерфейса, то в нем что-то ломается, его покидает жизнь. Это не заботит дизайн-позитивистов, но волнует остальных людей. Мы проверили эту гипотезу, удалив иконки из iA Writer. Реакцией пользователей было решительное «Не надо!»

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

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

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

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

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

Общая проблема пиктографических систем в том, что они ограничены количеством предметов из окружающего мира, которые можно показать на изображении. — Джон Хадсон, «Будущее эмодзи»

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

Лучшее, что есть у людей для несовершенного обмена мыслями, — это речь. Письменная речь придает мыслям долговечность и точность: в устной речи мы редко исправляемся, а это предложение я исправил несколько раз. — Джон Хадсон, «Будущее эмодзи»

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

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

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

Иконки модно выглядят и решают проблемы с нехваткой места. Конечно, в злоупотреблении чистыми иконками виновата не только Apple. Фирменными символами отравлен и «Материальный дизайн» Google. Вот для сравнения Gmail:



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

Стоп, а разве Google не измеряет все на свете? Они наверняка знают, что делают, в компании же работают ученые. Раз в Google выбрали подход с иконками без подписей, значит, иконки — это правильно. Но то, что подходит Google или Facebook, может не подойти нам. Мы еще увидим, что Google могла найти причину вне естественных наук. Как бы то ни было, Gmail предлагает и вариант с одними только текстовыми подписями. Только текст

Изображения можно интерпретировать по-разному. В зависимости от контекста даже вездесущая иконка с лупой читается и как «поиск», и как «увеличение». Значение слова тоже зависит от контекста, но читается оно всегда одинаково. Что если иконки заменить на текст? Логично, что такой интерфейс будет работать лучше иконочного. В настройках Gmail можно заменить панель с иконками на текстовую версию:



Смысл кнопок теперь понятен, но интерфейс стал холоднее, менее человечным и веселым. Теперь он напоминает рабочий инструмент и, на удивление, кажется более сложным. Как это возможно? Текстовый интерфейс объективно удобнее, но из-за эстетических нюансов он так не воспринимается.

Текст — это рациональный выбор. Разумно структурированные и подписанные функции — основа взаимодействия человека с компьютером.

Иконки — это эмоциональный выбор. Хорошо сделанные иконки добавляют позитива. Эмоциональное воздействие нельзя измерить, но от этого оно не пропадает.

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

Люди — и рациональные, и эмоциональные создания: «Мозг не обрабатывает информацию, извлекает знания и сохраняет воспоминания. Короче говоря, мозг не компьютер» (Роберт Эпштейн, «Пустой мозг»). Если по теме удобства иконок что-то и доказано точно, так это то, что иконки вместе с подписями работают лучше, чем только иконки или только текст. Иконки с подписями

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

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



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

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

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

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



Иконка обозначает некий раздел или функцию. Она представляет собой слово, которое доносит простой и понятный смысл. Смысл сообщения зависит от контекста. Даже самая прекрасная иконка будет бесполезна, если слово подобрано непонятное или не соответствующее контексту.

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



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

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

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

Следите за нами в ВКонтакте, Facebook'e и Twitter'e


Просмотров: 285
Рубрика: Hi-Tech
(CY)

Архив новостей / Экспорт новостей

Ещё новости по теме:

15: 20
Поставки игровых мониторов выросли на 350% |
15: 00
Суд оправдал экс-начальника серовского КУМИ Александра Гребенева и его друга Станислава Исупова |
15: 00
В Серове разбойники зарезали двух продавщиц и ранили пенсионерку |
15: 00
Фильм "Вояджер: Дальше планет" на фестивале 360° |
14: 40
Эксклюзивный бандл Gran Turismo Sport включает... настоящий автомобиль |
14: 00
Скидки на современные смартфоны от Xiaomi и Huawei в GearBest |
13: 40
Результаты GeForce GTX 1070 Ti в ПО 3DMark на 6-10% выше, чем у разогнанной GTX 1070 |
13: 40
В оглашении приговора Исупову-Гребеневу объявлен перерыв. Фигуранты уехали на обед |
12: 40
Национальная ассоциация телерадиовещателей просит Apple добавить приемник FM в новые iPhone |
11: 20
Samsung обеспечит поддержку запуска Linux-дистрибутивов на смартфонах Galaxy S8 |
11: 20
Gartner считает, что iPhone X подстегнет продажи в мобильной индустрии в 2018 году |
10: 40
Почему я выбираю iPhone Plus вместо обычного iPhone |
10: 20
Samsung DeX будет работать на Lunix, но не полностью |
10: 20
Деревянный конструктор Ugears: как превратить игрушку в искусство |
10: 20
Zotac GeForce GTX 1080 Ti ArcticStorm Mini — самая маленькая 3D-карта GeForce GTX 1080 Ti |
09: 20
LG V30 с честью выдержал испытания блогера JerryRigEverything |
09: 20
В Театре Стива Джобса можно потрогать iPhone X (фото) |
09: 20
Как "лайкнуть" бумажную книгу: Facebook-печати в реальном мире |
08: 40
СК признал отсутствие алкоголя в крови сбитого в Балашихе мальчика |
08: 40
Блог. Алексей Навальный: «В Кремле решили» |
07: 00
Прогнозы некоторых экономистов относительно акций Apple не очень оптимистичны |
18: 00
В Нидерландах открыли первый в мире мост, созданный посредством 3D-печати |
16: 20
Pixel 2 обогнал по автономности Galaxy S8, Note 8 и iPhone 8 |
16: 20
Consumer Reports: Samsung Galaxy S8 — лучший смартфон на рынке |
15: 20
Новые ноутбуки Microsoft и Qualcomm смогут работать сутки от одной подзарядки |
15: 20
Американцы показали мобильный боевой лазер |
14: 20
Глава Qualcomm уверен, что они с Apple смогут уладить свой конфликт |
14: 20
Consumer Reports: На рынке нет смартфона лучше Galaxy S8 |
14: 20
Скидка 100%: 5 временно бесплатных приложений |
14: 20
Ноутбуки с SoC Snapdragon 835 и Windows 10 удивят временем работы без подзарядки |
13: 40
Lenovo K8, K8 Plus и K8 Note получат обновление до Android 8.0 Oreo летом 2018 |
Новости бизнесаСтатьиНоу ХауАналитикаДеньгиБизнес технологииКурс валют
Rating@Mail.ru
Условия размещения рекламы

Наша редакция

Обратная связь

RosInvest.Com не несет ответственности за опубликованные материалы и комментарии пользователей. Возрастной цензор 16+.

Ответственность за высказанные, размещённую информацию и оценки, в рамках проекта RosInvest.Com, лежит полностью на лицах опубликовавших эти материалы. Использование материалов, допускается со ссылкой на сайт RosInvest.Com.

Skype: rosinvest.com (Русский, English, Zhōng wén).

Архивы новостей за: 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003