Новости бизнесаСтатьиАналитические колонкиДеньгиКурс валютБизнес технологии
Главная > Новости бизнеса > 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


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

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

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

18: 41
Планшету Microsoft Surface Pro 5 приписывают улучшенную автономность и доработанное перо Surface Pen |
18: 01
Основные ошибки проектов на Kickstarter: советы Николая Белоусова на примере «кольца безопасности» Nimb |
17: 21
Временно бесплатные: 5 занимательных программ и игр |
16: 41
Лучший дизайн книг 2016 года — Список Fast Company |
16: 41
Дюжину агентов ФБР госпитализировали из-за «Кедра» |
16: 41
Аудиостатья: цианистый калий и почему его так боятся |
16: 21
Многие приложения в Google Play сорят персональными данными |
16: 21
Британские полицейские научились взламывать любой iPhone |
15: 21
Новое изображение смартфона Zuk Edge появилось накануне анонса |
15: 21
Для смартфонов Samsung Galaxy A5 (2016) выпущено обновление прошивки, устраняющее неназванную уязвимость |
15: 01
Названа причина взрывов аккумуляторов Samsung Galaxy Note 7 |
15: 01
Роботизированная ложка: для тех, у кого трясутся руки |
15: 01
Пенопласт в шредере вызывает мурашки |
15: 01
Блокировку iOS Activation Lock можно взломать, введя слишком длинное имя пользователя и пароль для Wi-Fi |
15: 01
Регистратор Reg.ru приобрёл старейшего российского хостинг-провайдера Agava |
14: 41
Яндекс запустил платный бизнес-поисковик Экстракт |
14: 01
Смартфону OnePlus 5 приписывают керамический корпус |
13: 41
Названы лауреаты самой крупной научной премии мира: ученые получили $25 млн |
13: 41
ФАС оштрафовала «Тинькофф страхование» на 200 тысяч рублей за нарушение правил SMS-рассылки |
13: 21
Gionee тоже хочет отдельный бренд на рынке смартфонов |
13: 21
Полистал книгу «Keep it Simple». Рассказываю про секретные разработки Apple |
13: 01
Virgin Galactic успешно провела испытания нового корабля SpaceShipTwo |
12: 41
«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей |
12: 41
Panasonic хочет купить производителя автомобильной светотехники ZKW, оцениваемого в 1 млрд долларов |
12: 41
Naughty Dog анонсировала Uncharted: The Lost Legacy |
12: 21
Смартфон Meizu M5 Note отдаст в дизайне дань почтения Meizu M1 Note |
12: 21
На выпуск умной маски для сна Nuvi собрано в почти в 17 раз больше средств, чем намечалось |
12: 21
Lenovo обещает выпускать минимум по 12 модулей для смартфонов Moto Z в год |
12: 01
Intel и Amazon вместе будут продвигать голосовой помощник Alexa |
12: 01
Контактные линзы для владельцев очков Spectacles доступны по цене от $99 |
12: 01
Случился официальный анонс The Last of Us: Part II |
Новости бизнесаСтатьиАналитические колонкиДеньгиКурс валютБизнес технологии
Rating@Mail.ru
Условия размещения рекламы

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

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

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

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

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

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