Православные иконы, и их значение. Вопрос: Какого размера должны быть PNG иконки? Не учтен предыдущий пользовательский опыт
Иконка мобильного приложения - это небольшая картинка, представляющая приложение на маркете, таком как Google Play или App Store, и устройстве пользователя. Если вскоре вам предстоит создать свой первый дизайн иконки мобильного приложения, прислушайтесь к этим советам. Они помогут вам избежать ошибок, которые подстерегают новичков.
Как дизайнеру, вам важно обратить внимание на приложение: ведь часто пользователи принимают решение о выборе приложения, руководствуясь исключительно внешним видом иконки в маркете. Продуманная иконка ассоциируется с качественным приложением и удобным интерфейсом, а сделанное на скорую руку изображение не внушает доверия.
Поэтому примите во внимание следующие советы по созданию дизайна иконки для приложения:
1. Соблюдайте требования руководств
Иконки существуют не сами по себе, а внутри графической оболочки той или иной системы. Они должны гармонично вписываться в интерфейс, не выглядеть чужеродно рядом с иконками других приложений, но при этом быть уникальными. Поэтому разработка иконки приложения начинается со знакомства с руководствами производителя системы и изучения сеток для построения иконок в Photoshop.
Вот руководства, с которых стоит начать:
- Официальный сайт , посвященный Material Design для Android. Здесь можно прочитать о стиле, анимации, компонентах, паттернах, макетах и юзабилити, а также скачать материалы в помощь дизайнеру.
- Руководства по iOS Human Interface от Apple пригодятся, если вы хотите создать иконку для iPad или iPhone.
Изучив тенденции и стандарты, соблюдения которых от вас ожидает производитель ОС, можно переходить к следующему шагу.
2. Знайте свою аудиторию
Иконка приложения для локальной компании, например службы доставки еды, будет отличаться от иконки фирмы, которая хочет выйти на международный рынок. В последнем случае вам нужно быть уверенным, что вы используете универсальные символы, которые будут одинаково восприниматься людьми из разных частей света и не обидят чьи-либо чувства:
3. Создавайте иконку в нужном размере
То, что выглядит хорошо, занимая лист A4, не обязательно «выстрелит» в размере 120 x 120 пикселей. Профессиональный дизайн иконки должен это учитывать.
4. Упрощайте и не перегружайте иконку лишними деталями
Минимализм - ваш лучший друг. Чем больше украшательств и деталей на иконке, тем ниже ее узнаваемость. Иконка должна быть чем-то вроде символа - достаточно простой и понятной. Например, вот иконка, которую мы сделали для приложения с рецептами Кукорама :
5. Правильно расставляйте свет и тени
Этот совет актуален, если вы делаете иконку для Android-приложения. Руководство по Android Material подробно рассказывает об этом аспекте. В нем также приведены значения для теней, отбрасываемых иконкой того или иного цвета.
6. Проверьте, как выглядит иконка на фоне другого цвета (темном, светлом, цветном)
В маркете иконка отображается на белом или светло-сером фоне, но обои на устройствах пользователей гораздо разнообразнее. Поэтому не забудьте проверить, как выглядит дизайн иконки приложения на фоне разных цветов.
7. Не бойтесь использовать перспективу
Конечно, если это не нарушает общее впечатление. Оригинальное использование перспективы поможет вам сделать иконку приложения еще более заметной. Вот отличный образец использования перспективы:
8. Создайте интересную форму
Иконки ниже запоминаются благодаря использованным на них формах:
Форма помогает распознать иконку даже если она очень маленького размера.
9. Ответственно подойдите к цвету
Начав увеличивать количество используемых цветов, вам будет трудно остановиться. Поэтому используйте один или два цвета - этого достаточно. Вот хороший пример иконки с двумя цветами:
10. Не используйте фотографии
Существуют замечательные фотореалистичные иконки , но использование фотографий - это табу.
11. Создавайте иконки приложений без лишнего текста
Мелкий текст тяжело читать, и его использование создаст проблемы в случае локализации, если, например, приложение выйдет для китайского рынка. При этом вы можете использовать первые одну–две буквы из названия компании, как это делают Tumblr или Pinterest:
12. Не используйте на иконке элементы из интерфейса приложения
Это очень плохая практика, которая запутывает пользователя. Элементам интерфейса на место на вашей иконке.
13. Создавайте иконки, которые говорят о главной функции приложения
С хорошей иконкой пользователю даже не придется заглядывать в описание: для плееров обычно используют ноты, инструменты или визуалайзер, для камер - изображения фотоаппарата или объектива, а для мессенджеров вроде Viber - облачка сообщений:
В иконке для проекта UARoads мы отобразили сразу два важных аспекта приложения: необходимость отправлять данные на сервер для обработки и то, что оно предназначено для автомобилистов. Также на иконке использованы цвета национального флага:
14. Изучите иконки конкурентов
Несмотря на предыдущий совет, взгляните на иконки конкурентов - скорее всего, они уже как-то обыграли главную функцию приложения. Поэтому попробуйте не повторяться. Например, иконка Wunderlist выгодно отличается от иконок других приложений со списками дел:
А вот иконка, которую мы создали для приложения KeepSnap , которое ориентировано на фотографов:
Как видим, даже к созданию такого небольшого элемента как иконка, стоит подходить со всей ответственностью. Удачный дизайн иконки привлекает внимание пользователей, которые пришли в маркет совсем за другим приложением.
Смена иконки - это тоже не шутки. Например, владельцам Radium, приложения-агрегатора радиостанций, пришлось менять иконку несколько раз за месяц, потому что она не пришлась по вкусу пользователям.
Мы, студия , с удовольствием создадим иконку для вашего приложения, которая будет выгодно отличать его от продукции конкурентов.
- Перевод
От переводчика.
Это перевод статьи Филипа Бернарда с сайта css-tricks.com. Часть статьи, содержащую описание работы с созданным им сервисом, я позволил себе опустить. Если вы найдете ошибки, просьба сообщить о них в личном сообщении.
Статья содержит результаты проведенного им исследования, каким должен быть фавикон (и то что его заменяет), чтобы хорошо отображаться в различных случаях.
Фавикон был представлен в 1999 году, в Internet Explorer 5 () и стандартизирован W3C несколько месяцев спустя. Это была маленькая иконка, представляющая сайт.
С тех пор большинство настольных браузеров следуют тенденции и используют фавикон тем или иным способом. Это очень просто, не так ли? Создать маленькую картинку и добавить в любой интернет-проект, чтобы сделать его «завершённым». Ничего сложного. Или нет?
Устроим викторину!
Каков основной файл фавикона?
Ответ: favicon.ico. Просто, чтобы удостовериться: это не PNG, переименованный в favicon.ico. Хотя, некоторые браузеры простят эту ошибку, ICO это другой формат, поддерживающий несколько версий изображения.Вопрос: Какого размера должен быть favicon.ico?
A: 16х16. Стандартный.B: 32х32. Разве фавикон не обновлялся некоторое время назад?
C: 64x64.
D: Ни один из перечисленных.
Ответ: D.
Формат favicon.ico изначально задуман Майкрософт и поддержан некоторыми другими производителями. Майкрософт рекомендует размеры 16х16, 32х32 и 48х48. Да, один ICO может содержать несколько изображений.
Браузеры обычно отображают фавикон на вкладках, и на обычных разрешениях, версия 16х16 выглядит хорошо:
16х16 на вкладке Chrome. Пока всё хорошо.
Но иконка 16х16 слишком мала для других мест: панели задач и рабочего стола.
16х16 в панели задач.
16х16 на рабочем столе. Не хорошо.
Когда иконка содержит несколько изображений, результат гораздо лучше.
16х16, 32х32 и 48х48 favicon.ico в панели задач. Выглядит как обычная программа.
16х16, 32х32 и 48х48 favicon.ico на рабочем столе. Идеально.
Вопрос: Каково назначение favicon.png?
На самом деле, чаще встречается другой файл, favicon.png. Люди часто спрашивают об этом.Что это на самом деле?
A: Иконка для браузеров не поддерживающих favicon.ico.
Такие как Firefox, наверно?
B: Иконка высокого разрешения.
Знаете, со всеми этими новыми экранами с высокой плотностью пикселей.
C: Артефакт из прошлого.
Теперь это новые иконки, например, Apple Touch icon.
D: Всё вместе.
Ответ: D.
Начиная с принятия HTML5, favicon.ico не слишком полезен. Был представлен атрибут sizes
, позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:
Так что мы должны объявлять?
Давайте посмотрим правде в глаза. Хотя, почти все настольные браузеры поддерживают favicon.ico, этот файл устарел. Да, вы по-прежнему можете использовать этот файл и всё будет работать, как задумано. Но серьёзно, это устаревший формат. Он не используется нигде, кроме веба. PNG поддерживается гораздо лучше.
Favicon.ico - для старых версий IE. Для остальных браузеров и последних версий IE используйте PNG иконки. Так какие sizes необходимо определять? Скоро узнаем.
Вопрос: Какой формат необходим для поддержки мобильных платформ?
Согласно SmartInsights , больше 26% веб-трафика генерируется смартфонами и планшетами. Это будущее. Что нужно для поддержки этого мира?A: favicon.ico.
Это работало 15 лет назад, работает и сегодня.
B: PNG иконки.
Вы сказали, что расскажете об этом.
C: Apple Touch icon.
Кэп.
D: Здесь, всё равно, нет правильного ответа.
Ответ: D. Нужны PNG иконки. И Apple Touch icon. И плитки для Windows 8. И файл под названием browserconfig.xml.
Мобильные платформы гораздо более гетерогенны, чем обычные настольные браузеры. Размеры экранов и разрешения очень сильно варьируются и нет преобладающей операционной системы, такой как Windows, как это было во времена появления интернета.
Следствие: не думайте, что мобильный фавикон может быть одной универсальной картинкой или иметь универсальное объявление в HTML коде.
Вопрос: Какого размера должны быть PNG иконки?
A: 96х96 для Google TVB: 196х196 для Android Chrome
C: 228х228 для Opera Coast
D: Все перечисленные
Ответ: D, и даже более. Например, 160х160 для старой версии быстрого набора Opera (давно в прошлом), или 128х128 для Chrome Web Store, всё сильно зависит от платформы, которую вы собираетесь поддерживать.
Вопрос: Каков размер Apple Touch icon?
Apple Touch icon используемые iOS для закладок и сайтов «на домашнем экране». На ум приходит 57х57, браво. Это правильно. Только это было 7 лет назад, когда был выпущен первый iPhone.Ответ: Вплоть до 180х180.
После появления первого iPhone, было 3 важных релиза:
- iPad. С экраном гораздо большего размера.
- Retina-экраны. С удвоеной плотностью пикселов.
- iOS7. Плоский дизайн отличается на iPhone/iPad.
| Устройство | Экран | Версия iOS | Размер иконки |
|---|---|---|---|
| iPhone | Classic | 6 и ниже | 57x57 |
| 7 | 60x60 | ||
| Retina | 6 и ниже | 114x114 | |
| 7 | 120x120 | ||
| 6 Plus | 8 и выше | 180x180 | |
| iPad | Classic | 6 и ниже | 72x72 |
| 7 | 76x76 | ||
| Retina | 6 и ниже | 144x144 | |
| 7 | 152x152 |
Старая 57х57 Apple Touch icon на блестящем Retina iPad. Мутно.
Большая 152х152 Apple Touch icon на Retina iPad. Аккуратно.
Если вы ответили неверно, не расстраивайтесь. Из 5000 популярных сайтов, которые предоставляют apple-touch-icon.png, менее 4% делают это правильно .
Некоторый могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch icon должна быть 152х152. Retina iPad под iOS 7 найдет что нужно, а младшие устройства могут уменьшить изображение.
Вопрос: Необходимо ли объявлять Apple Touch icon в HTML?
A: Не знаю. Надо же что-то ответить!B: Да. Иначе как iOS найдет их?
C: Нет. Apple предлагает рекомендации , так что любое iOS устройство всё равно их надет.
D: Нет, но...
Ответ: D… но некоторые другие платформы тоже используют Apple Touch icon, лучше их объявить.
Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну их.
Вопрос: Как объявить плитку для планшетов на Windows 8?
A: Планшет на Windows 8? Что это такое?B: favicon.ico. Наследие Стива Балмера.
C: Мета-теги. Два msapplication-TileColor и msapplication-TileImage .
D: browserconfig.xml.
Ответ: C для Windows 8 и IE 10, D для Windows 8.1 и IE 11. Ответ A в чем-то тоже верен.
Объявление для Windows 8.0 выглядит как-то так:
Windows 8.1 и IE 11 ожидают несколько версии изображения, объявленных в browserconfig.xml. Например:
Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ. 
Плитки сайтов в Windows 8.
Вопрос: Каков размер плитки square150x150logo?
A: 150х150. Вы не умеете читать?B: Иной.
Ответ: B, 270х270.
Иконка, пиктограмма, значок, символ, образ — как только не называют эти элементы графического интерфейса. Зачем они вообще нужны, как их правильно использовать и что нужно знать, чтобы не запутать пользователя.
Именно с дизайна иконок началась жизнь нашей студии в 2005 году. Поэтому мы с удовольствием поделимся с вами всеми знаниями, накопленными за все эти годы.
Почему человеку вообще пришла в голову идея использовать значки, вместо слов?
Этот вопрос касается не только интерфейсов. В повседневной жизни иконки окружают нас везде: преследуют на дороге в виде дорожных знаков, встречают у входа в магазин и даже сидят на ярлыках нашей одежды.
Даже футболки уже специальные придуманы для туристов, которые помогают найти общий язык с аборигенами в любой стране. Стоит только ткнуть пальцем на нужную иконку.
Почему мы так любим значки?
Потому что у них есть ряд преимуществ:
- Они бросаются в глаза;
- Они быстро передают информацию;
- Они запоминаются;
- Они экономят место;
- Они понятны на любом языке.
Иконки интерфейсов имеют еще ряд преимуществ:
- Они более приятны глазу, чем полотна текста, которые бы могли быть на их месте. Чем меньше становится экран, тем больше слов хочется заменить специальными значками.
- Они могут придать вашему приложению визуальную индивидуальность.
Но главное, чем должна обладать любая иконка — это ЯСНОСТЬ
.
Если пользователь не поймет значение иконки, он либо будет ее избегать, либо путаться.
С мороженым — нельзя, с сигаретой — нельзя, с единорогом — можно
Чтобы решить проблему с ясностью иконки, можно пойти несколькими путями:
1. Объяснять новую иконку текстом, давать подсказки, учить юзера использовать ее правильно
Таким образом вы создаете новый пользовательский опыт. Человек, подобно тому, как учит алфавит, должен выучить и значки интерфейса. Чтобы идти этим путем, нужно быть уверенным в своем продукте, в готовности пользователей учиться ради его использования.
Возьмем в качестве примера Instagram.
Иконка с изображением ящика была неясна, мало кто понимал, что с ее помощью можно отправлять личные сообщения.
Сегодня иконку отправки личных сообщений поменяли на более ясную.
Поэтому рассмотрим 2-ой вариант.
2. Бороться за ясность, создавать иконки максимально понятные пользователю
И именно о том, как это сделать и не ошибиться в выборе, пойдет речь далее.
Почему иконки интерфейсов не всегда понятны пользователям?
Давайте разбираться в причинах.
10 ошибок в дизайне иконок интерфейсов
1. Неточность дизайна образа иконки
Для начала проведем небольшой тест.
Это как раз и есть пример иконки, которую нельзя однозначно интерпретировать, а значит она может вызвать недоумение у пользователя.
В одной старой статье об ошибках в дизайне иконок приводился в пример курьезный случай, когда иконку фильтра данных создали в виде воронки.
Ответ клиента был таков: «Мне не совсем понятно, почему вы нарисовали иконку фильтра в виде бокала для мартини!» 🙂
Чтобы избежать двоякого трактования, дизайнер должен четко передать образ, смысл которого можно будет легко уловить. Не заставляйте пользователя думать.
2. Неясность ассоциации
В отличие от первой причины, в этом случае обычно сам образ передан правильно, но пользователю не ясно, почему использована именно эта иконка и что она означает.
Посмотрите еще раз на пример со старой иконкой для отправки личных сообщений в Instagram. Образ вполне уловим — изображен ящик. Но с чем у вас ассоциируется ящик? Сохранить? Входящие? Добавить новый файл? Ассоциация слишком тонкая, пользователю нужно думать, значит образ подобран неудачно.
Вот еще один наглядный пример того, как меня запутал интерфейс.
Как потом выяснилось, при наведении курсора на иконку всплывает подсказка.
Гораздо яснее для пользователя в этом случае был бы образ мусорного бака.
Кроме того, здесь интерфейс позволяет разместить слова “Удалить аккаунт”, и в этом случае использование текста вместо иконки выглядело бы оправдано.
Вот еще один пример, когда возникает диссонанс значения иконки и ее образа:
Никогда бы не подумала, что этот значок может использоваться для удаления папки
С одной стороны, иконки в интерфейсе должны подходить по стилю и смотреться целостно и гармонично, чтобы не получилось вот так:
Но с другой стороны, иконки должны быть легко различимы между собой.
Когда 2 очень похожие иконки отвечают за разные функции, возникает путаница.
Вот еще один пример:
4. Не учтен предыдущий пользовательский опыт
Вы помните, как в Viber при отправке сообщения рядом висела иконка с изображением стрелки?
Многие новые пользователи путались, считая, что стрела имеет значение “Отправить сообщение”. Почему? Потому что многие новые пользователи пришли в Viber из Skype и других мессенджеров, где стрелка означала именно отправку сообщения и располагалась в том же месте.
Стрела в интерфейсе Viber означала отправку данных геолокации. Не удивительно, почему все мои друзья в то время были в курсе, где я;)
Сейчас интерфейс Viber выглядит иначе:
Поэтому, создавая интерфейс, внимательно изучите интерфейсы основных конкурентов, чтобы не путать и не переучивать пользователей.
Создавать новый пользовательский опыт — это сложный путь и часто неоправданный.
5. Не учтены ментальные особенности ЦА
Некоторые значки могут по-разному интерпретироваться в разных странах.
Подобно тому, как в разных странах неоднозначно воспринимаются жесты, также неоднозначно могут быть поняты иконки.
Если вы создаете универсальное приложение, ориентированное на многие страны, то используйте более универсальные иконки.
Хотя, признаться, их не так уж и много. Сейчас среди них можно назвать изображение принтера (печать), дома (возврат на главную страницу), лупы (поиск) и практически все. Иконка, обозначающая меню-гамбургер , вскоре тоже может стать универсальной. Однако, некоторые тесты показывают, что пользователям привычнее видеть кнопку с надписью “Menu”, чем 3 горизонтальные полоски.
Если ваше приложение ориентировано на целевую аудиторию конкретной страны, учитывайте ее особенности восприятия.
Так, например, для жителей США более привычной будет иконка с тележкой супермаркета (shopping cart
) для обозначения покупки (
).
Для жителей Великобритании в пользовательском интерфейсе привычнее видеть корзину (basket ) или сумку (bag ).
6. Неправильный посыл
Дизайн иконок может повлиять на поведение пользователя.
Так при выборе иконки для действия “Добавить товар в корзину” следует ориентироваться не только на ментальное восприятие, но и на подтекст, который они несут.
Тележка супермаркета подразумевает, что пользователь может в любое время, как положить товар в корзину, так и передумать, и выложить его. Т.е. в этом случае вы не давите на будущего покупателя и мягко склоняете к покупке.
Пакет или сумка гораздо больше влияет на сознание пользователя, призывая его именно к покупке, а не складыванию товара в корзину. Мы привыкли складывать вещи в свою сумку уже после оплаты их на кассе, т.е. эта иконка более настойчиво призывает именно к покупке.
Обе иконки могут быть использованы, и сработать как в плюс, так и в минус. Можно добавить товар в тележку и забыть о нем, а можно уйти с сайта, так и не решившись положить товар в сумку. Учитывайте специфику своего товара и выбирайте правильный посыл.
7. Устаревшие образы
Здесь нужно быть предельно аккуратным. Иконки стареют, как и люди.
Поймет ли новое поколение эту иконку, если оно никогда не держало дискету в руках?
С одной стороны, замена многих популярных иконок скоро станет необходимостью.
Но с другой стороны, поколения сменяются гораздо медленнее, чем меняется наше представление о каком либо предмете.
Возьмем к примеру изображение телефона.
Первая иконка до сих пор актуальна и понятна даже новым поколениям, т.к. ее форма легко узнаваема.
Если же расположить иконку смартфона, можно запутать пользователя. Смартфон ассоциируется не только с функцией звонка, а и кучей других возможностей.
Приглядитесь к иконке, которая используется в Твиттере для написания нового твита. Иконке придали форму гусиного пера, чтобы передать смысл “Кликни сюда и ты сможешь писать”.
Многие иконки, образы которых устарели, еще долго не потеряют своей актуальности, поэтому, оценивайте риски, меняя образ давно всем знакомой иконки на более новый.
Мы давно не слушаем музыку с кассет, не используем микрофон старого стиля или телевизор с рожками, но эти образы гораздо понятнее пользователю, чем если мы изобразим вместо них черные прямоугольники смартфона, которые могут заменить сейчас все эти предметы.
8. Перегруженный дизайн
Не забывайте, что иконка интерфейса должна быть ясна не только в самом ее большом размере, но и в миниатюре.
Именно поэтому лишние элементы будут создавать грязь в интерфейсе и вызывать недоумение у пользователя.
Сравните сами:
Сейчас эта проблема менее актуальна, чем она была до появления трендов плоского и чистого дизайна. Плоские иконки гораздо легче воспринимаются, чем сложные 3D объекты. и это одна из причин, почему они так популярны. Однако в руках умелого дизайнера и объемную иконку можно сделать узнаваемой в любом размере.
9. Использование текста или его отсутствие
Использовать текст в иконках или нет? Пояснять значение иконок или предоставить это пользователю? Нет однозначного ответа на эти вопросы.
Иногда нужно передать настолько сложное понятие, что без текста рядом или подсказки не обойтись.
В тоже время, если вообще отказаться от иконок и использовать только текст, мы не сможем быстро сфокусировать взгляд на нужной кнопке.
Если есть возможность добавить текст, который не перенасытит интерфейс, то лучше его добавить.
Но что касается текста в дизайне самой иконки, то лучше избежать его использование, т.к. в самом маленьком размере значка он будет нечитабельным, а дизайн выглядеть перегруженным.
10. Скалирование иконок
При увеличении и ли уменьшении растровых иконок они становятся нечеткими и размытыми, поэтому многие дизайнеры предпочитают создавать векторные иконки, чтобы потом не тратить время на прорисовку мелких деталей вручную, а просто увеличивать или уменьшать изображение.
Но такой подход также неверен.
Вот пример, как выглядит уменьшенная иконка (в красном круге) и прорисованная дизайнером в меньшем размере вручную (в зеленом круге).
Поэтому всегда просите дизайнера прорисовывать элементы вручную при создании новых размеров.
Выводы
Почему мы выделили именно эти 10 ошибок, а остальные, не менее важные оставили без внимания? Потому что эти ошибки влияют на ЯСНОСТЬ
иконки, вызывают недоумение, запутывают пользователей и могут повлиять на конверсию.
Как видите из примеров, одна лишь неверно подобранная иконка может заставить пользователя удалить аккаунт, отказаться от покупки или от использования неудобного приложения.
Так что, выбирайте правильные иконки и лучше доверьте это
Иконки экономят место и выглядят свежо. Иконки - это быстрый ответ на сложные вопросы:
- Как сделать красивее?
- Как нам это забрендировать?
- Как сделать веселее?
Мы любим иконки. Пока не начинаем в них путаться.
Иконки бывают разные: на продуктах, в архитектуре, в компьютерах, в списках, на кнопках, для веба и приложений, для iOS и Android. Иконки на панелях инструментов, подписанные и неподписанные, стилизованные и стандартизованные, цветные и монохромные, в иконочных шрифтах, файлах PNG или SVG…
Есть много бесплатных и платных наборов иконок, векторных и растровых, плоских и объёмных, и если записывать правила работы с ними, потребуется тетрадка потолще. Чёртовых иконок так много, что Дьявол легко убедит вас в том, что они вытянут даже плохой дизайн.
Но будьте осторожны. Если «иконка» станет вашим ответом на любой вопрос, однажды Дон Норман постучится в вашу дверь, а когда откроете, пристально посмотрит вам в глаза и скажет:
«Непонятные иконки замусоривают интерфейс, хотя научное сообщество давно показало: люди запоминают значения лишь небольшого числа иконок. Вы можете вспомнить значение всех этих иконок? Я - нет».
Этими словами Дон Норман поучал своего бывшего работодателя - Apple. Примеры иконотоксиоза Apple встречаются в iTunes, Mail и панели управления iOS.
В твиттере айтюнсовыми иконками пугают как Бабой Ягой. Вот отличный пример из Apple Mail для OS X: сколько из этих иконок вы опознаете без подписи?
Что мы видим на этом примере? Только то, что иконки экономят место и выглядят свежо. Назначение кнопок не вызывает вопросов только у дизайнера, разместившего иконки на этой панели. За иконкой может скрываться тысяча разных слов, и это главная проблема. Когда у слова - тысяча значений, только хорошее понимание контекста позволит избежать разночтений. Вот те же иконки, но с подписями:
Подписи объясняют иконки. С ними интерфейс становится удобнее. Из-за этого некоторые бессердечные люди утверждают, что «лучшая иконка - это текст». Логично, правильные подписи спасают от путаницы. Так почему бы нам не использовать только подписи без иконок?
Функционально «чисто текстовый» дизайн ясен как день (если информационные архитекторы справились со своей задачей), но что-то ломается, когда вы убираете изображения из интерфейса. Жизнь покидает его. Он перестаёт быть свежим и весёлым. Это не волнует дизайн-позитивиста. Но волнует остальных людей. Мы проверили эту гипотезу, удалив иконки из iA Writer. Реакцией пользователей было решительное «Не надо!»
Может быть, лучше не выбирать между текстом и иконкой, а понять, когда использовать только иконки, когда только текст, а когда иконки с подписями. Давайте разберёмся…
Только иконки
Иконки - это картинки. На картинках легко показать обычные предметы. Подпись не нужна иконкам, на которых изображены легко узнаваемые объекты, представляющие знакомые понятия. Например, самолёты для аэропортов, человеческие фигуры для туалетов, корзины для мест, где лежат документы, которые мы скоро выбросим.
Материальные объекты изобразить легко, а необходимость показать на иконке действие или абстрактное понятие заставила помучиться многих дизайнеров. Проблема в том, что при взаимодействии человека с компьютером большинство иконок - это действия и абстракции.
Показать действие реально. Анимированная иконка отвлекает, лучше использовать метафору действия. В контексте рабочего стола компьютера иконка принтера значит «Печатать», мусорная корзина - «Удалить», ножницы - «Вырезать». У каждого из этих объектов есть одно конкретное назначение, поэтому целевое действие понять легко.
Со сложными действиями и абстракциями так уже не выйдет. И нет надежды на то, что в ближайшее время что-то изменится. За 40 лет взаимодействия человека с компьютером мы не нашли универсальных символов для базовых функций вроде сохранения, копирования и вставки.
«Общая проблема пиктографических систем в том, что единственное их ограничение - количество предметов из окружающего мира, которые можно показать на изображении».
Голые иконки на функциональных элементах интерфейса ухудшают юзабилити. Лучший способ сообщить о функции - слово, а не картинка. Ещё лучше, если это глагол.
«Когда дело доходит до всегда несовершенного обмена мыслями между людьми, лучшее, что у нас, людей, для этого есть - это речь. Письменная речь придаёт мыслям долговечность и точность (мы редко исправляемся в устрой речи, а это предложение я исправил несколько раз)».
Визуально графические символы проще и привлекательнее плотных слов. Но чем ближе, тем больше сирены становятся похожи на монстров. Когда вы пытаетесь их прочесть и понять, они превращаются в загадочные знаки из незнакомого вам языка, хватают взаимодействие и откусывают ему голову. Голые иконки улучшают внешний вид интерфейса, снижая его понятность. Они затеняют понятные функции, маскируя их слоем тёмных символов.
«Иконка - это символ, одинаково непонятный на любом языке. Не важно, какие языки вы знаете, значению иконки вам придётся научиться. Люди не просто так придумали фонетические языки, где можно объединить несколько символов, чтобы создать любое слово. Многие дизайнеры уверяли меня использовать иконки в интерфейсе. Я спрашивал их, «это действительно лучший интерфейс, который можно придумать, или он сделан по привычке?» Дизайнеров просто застряли в этой парадигме и не замечают её упадка».
Иконки модно выглядят и круто решают проблемы с нехваткой места. Конечно, не одна Apple виновна в злоупотреблении голыми иконками. Материальный дизайн Google отравлен фирменными символами. Вот для сравнения Gmail:
Что мы здесь видим? Иконки Gmail выглядят просто, но они заставляют задуматься о назначении кнопок. Если вы сосредоточитесь и немного сконцентрируетесь, сможете угадать. Через некоторое время вам будет помогать мышечная память, но и краткосрочная и долгосрочная память будет принимать их с таким же трудом. В почтовом приложении концентрацию и сосредоточенность следует направлять на понимание и написание текста, а не на расшифровку интерфейса.
Стоп! А разве Google не измеряет всё на свете? Они наверняка знают, что делают, так? Там работают учёные. Они выбрали подход с иконками без подписей, и они никогда не ошибаются. Значит, иконки - это правильно! Возможно, но то, что подходит Google или Facebook, может не подойти нам. Как будет сказано ниже, Google могли найти причину вне естественных наук. Как бы то ни было, Google предлагает и вариант с голым текстом.
Только текст
Изображения можно интерпретировать по-разному. В зависимости от контекста даже вездесущее увеличительное стекло читается и как «поиск», и как «увеличение». Значение слова тоже зависит от контекста, но читается оно всегда одинаково. Что если иконки заменить на текст? Логично, что такой интерфейс будет работать лучше иконочного. В настройках Gmail можно заменить иконочную панель на текстовую версию:
Что произошло? Смысл кнопок теперь понятен. Но интерфейс стал менее человечным, менее весёлым. Он напоминает рабочий инструмент, стал холоднее, и, на удивление, кажется более сложным. Как это возможно? Текстовый интерфейс объективно удобнее, но из-за эстетических нюансов он таким не воспринимаются.
Текст - это рациональный выбор. Правильно структурированные и названные функции - основа взаимодействия человека с компьютером.
Иконки - это эмоциональный выбор. Правильные иконки добавляют позитива. Эмоциональное воздействие не измерить, но оно не становится от этого менее реальным.
«Недостаточно создавать продукты, которые работают, которые понятны и просты в использовании. Надо создавать продукты, которые привносят восторг и возбуждение, радость и веселье, и конечно, красоту в человеческие жизни», - Дон Норман в книге «Дизайн привычных вещей».
Люди - и рациональные и эмоциональные создания: «Мозг не обрабатывает информацию, извлекает знания и сохраняет воспоминания. Если кратко: мозг - не компьютер». Если что-то по теме удобства иконок и доказано, так это то, что «Иконки с подписями работают лучше, чем чисто иконка или чисто текст».
Иконка с подписью
Иконка с подписью и эмоциональна и понятна. Иконки с подписями работают всегда. Если иконка непонятна, подпись объяснит. Так почему бы не использовать эту пару победителей?
Проблема в том, что это компромисс. Он снижает эмоциональный посыл иконок и простоту чистого текста. Он не экономит место и не украшает внешний вид. Он занимает больше места по вертикали и создаёт больше визуального шума, чем чисто иконки или чисто текст.
Эмоционально мы предпочитаем иконки. Рационально нам лучше заменить иконки на текст. В теории иконка с подписью - беспроигрышный вариант. На практике в дизайне нет серебряных пуль.
Беспроигрышных вариантов нет, но есть компромиссы получше и похуже. Мы работаем для людей. Люди чувствуют и думают. Хотя лучше не углубляться в релятивизм.
Теория и практика
Подобно любой технологии это помогает выстраивать интерфейсы на вершине рациональной, функциональной структуры. Дизайн - не естественная наука. Это практика, извлекающая выгоду из науки и измерений, но качество дизайна нельзя оценить только объективными измерениями. Пользовательское тестирование и аналитика не заменяют дизайнеров, но проверяют дизайнерские предположения. В продукте больше того, что может продумать дизайнер, а в дизайне больше того, что мы можем измерить. Это «больше» можно охватить только разговаривая с людьми, которые используют продукт.
Взаимодействие человека с компьютером строится на рациональном фундаменте. Мы - живые существа, наше поведение нельзя просчитать, но с нами можно поговорить. Иконки, цвета, ритм, воздух, типографика и другие красивые вещи делают интерфейс приятнее и за счёт этого улучшают взаимодействие. Он выглядит не таким рациональным. Он выглядит человечным.
Простые правила
Не спешите добавлять иконки, если с дизайном что-то не так, если вам кажется, что он работает не так, как запланировано. Иконки не исправят плохую структуру сайта. Добавляйте их в самом конце. Не играйте с иконками во время работы над вайрфреймом. За одной картинкой может скрываться тысяча слов. Хорошая информационная архитектура помещает правильные слова в правильный контекст. Проработайте рациональную часть до перехода к эмоциональной.
Иконка обозначает некий раздел или функцию. Она представляет собой некое слово, которое доносит простой и понятный смысл. Смысл сообщения зависит от контекста. Даже самая прекрасная иконка будет бесполезна, если слово подобрано непонятное или не соответствующее контексту. Прежде чем выбрать иконку, спросите себя: Какое слово она будет обозначать? Это правильное слово? Понятное? Оно будет работать в этом контексте? Иконка может скрывать много разных понятий. Слова в контексте не так пластичны. В отличие от иконок они подчинаются многим правилам.
Когда ваша структура готова и пора вступать в игру иконкам, радости и прочему, следуйте простому правилу: добавьте необходимый минимум иконок, но не меньше.
Относитесь к иконками с максимальным вниманием. Их улучшение может занять всё ваше время. Они должны быть узнаваемы сами по себе, должны чётко иллюстрировать понятие, которое представляют, и они должны работать в контексте с другими иконками и понятиями.
Иконки - это прилагательные и наречия в обычном тексте. Их удаление не превратит ваш текст в литературный шедевр. Удаляйте лишнее, ищите подходящее, заменяйте расплывчатые и вычурные формулировки на точные и лаконичные.
Эссе написано специалистами компании iA.
«Шеф-редактор блога GetGoodRank, веб-аналитик, блоггер.
Как правильно оформить и применить иконки на сайте? Рассказываем о простых правилах юзабилити иконок, а также приводим простой чек-лист проверки.»
Иконка - схематический элемент графического интерфейса, обозначающий приложение, функцию или тематический раздел сайта/приложения. Иконки простые, лаконичные и эффективные. Используются для упрощения графического интерфейса приложения или сайта, а также для упрощения и ускорения коммуникации с пользователем (человеческое сознание в разы быстрее обрабатывает и «понимает» графику, нежели текст). Иконки классифицируются в зависимости от выполняемой функции:
- Навигационные иконки - используются для обозначения функции: навгационные стрелки вверх и вниз для перемещения по длинной странице, корзина для перехода в корзину, лупа для активации строки поиска.
- Информационные иконки - указывают на тематику раздела. К примеру, скрещенные инструменты часто указывают на раздел с технической информацией, шестеренка - на раздел с настройками, машина указывает на информацию о доставке, цифры 24/7 - на круглосуточный график работы и т. д.
- Иконки-призывы к действию - часто используются для обозначения очевидных действий. К примеру, на странице скачивания приложения жирная стрелка вниз обозначает призыв к загрузке софта, на странице товара плюс обозначает призыв добавить товар в корзину и т. д.
Правила юзабилити иконок
Не все иконки одинаково понятны пользователям, в особенности, если сайт применяет индивидуальный стиль и отходит от общепринятых стандартов. Чтобы иконки выполняли прямую функцию упрощения дизайна и коммуникации с пользователем, придерживайтесь следующих правил:
1. Сопроводительный текст - разные сайты используют даже стандартные иконки с разной целью. Так, стандартная лупа может обозначать поиск по сайту или приближение/увеличение изображения. Графические символы можно трактовать двояко. Чтобы упростить задачу пользователя, следует сопровождать иконки текстом. Это в большей степени касается иконок навигации. Текст и графика в паре работают гораздо лучше, чем что-то одно.
2. Единый стиль - иконки должны быть выполнены в едином стиле. Лучше использовать схематические изображения с минимальным количеством деталей. Иконка должна быть легко различима в общей концепции дизайна и простой для понимания пользователя. Иконки, выполняющие разные задачи на сайте, могут быть выполнены в разных концепциях. Однако применяя разные графические стили, следует избегать чрезмерной пестроты. Помните, что иконка призвана упростить взаимодействие пользователя с сайтом, а не наоборот, заставить его изучать скрытые в символах функции.
3. Кликабельность - иконки, по которым доступно действие, должны визуально демонстрировать кликабельность: подсветка при наведении курсора, изменение цвета, увеличение. Это даст понять пользователю, что иконка функциональна, а не просто элемент графического интерфейса. Применяйте анимацию по минимуму.
4. Тест 5 секунд - при разработке индивидуальной концепции иконок (применении нестандартных иконок) проведите тест 5 секунд. Если в вы в течении 5 секунд не сможете идентифицировать иконку и понять, что она означает на сайте, значит данный графический символ недопустим в дизайне. Он будет создавать дополнительные препятствия на пути пользователя к цели: изучению информации на сайте, выбору товара/услуги.
5. Размер имеет значение - слишком мелкие символы рискуют остаться незамеченными в дизайне, тогда как слишком крупные иконки могут сбивать с толку, доминировать над другими элементами и перетягивать на себя внимание (в особенности если большие иконки выделены цветом).
Как проверить юзабилити иконок
Используйте для проверки юзабилити иконок на сайте следующий чек-лист вопросов:
- Легко ли найти иконку в интерфейсе сайта или приложения?
- Насколько гармонично выглядит иконка в интерфейсе? Не нарушает ли она общую концепцию дизайна?
- Расположена ли иконка в ожидаемом для пользователя месте?
- Не отвлекает ли иконка внимание от основного контента страницы?
- Понятен ли смысл иконки пользователю?
- Как выглядит иконка в мобильной версии сайта? Легко ли с ней взаимодействовать с тачскрина?
- Ассоциируется ли данная иконка с другими, несмежными действиями? Не создает ли она дополнительные трудности в использовании сайта? Не приведет ли иконка к ошибочным действиям?
- Необходима ли иконка в данном контексте для обозначения того, что к чему она привязана? Возможно ли обойтись без нее?
