Картинки иконка надежность, Стоковые Фотографии и Роялти-Фри Изображения иконка надежность
Картинки иконка надежность, Стоковые Фотографии и Роялти-Фри Изображения иконка надежность | Depositphotos®
Wavebreakmedia
5600 x 2950
Wavebreakmedia
5600 x 2950
Wavebreakmedia
5600 x 3959
OlegGerasymenko
2555 x 3095
billiondigital
5760 x 3840
Wavebreakmedia
5599 x 3958
OlegGerasymenko
2592 x 3584
ru.depositphotos.com
10 ошибок в дизайне иконок интерфейса
Иконка, пиктограмма, значок, символ, образ — как только не называют эти элементы графического интерфейса. Зачем они вообще нужны, как их правильно использовать и что нужно знать, чтобы не запутать пользователя.
Именно с дизайна иконок началась жизнь нашей студии в 2005 году. Поэтому мы с удовольствием поделимся с вами всеми знаниями, накопленными за все эти годы.
Почему человеку вообще пришла в голову идея использовать значки, вместо слов?
Этот вопрос касается не только интерфейсов. В повседневной жизни иконки окружают нас везде: преследуют на дороге в виде дорожных знаков, встречают у входа в магазин и даже сидят на ярлыках нашей одежды.
Даже футболки уже специальные придуманы для туристов, которые помогают найти общий язык с аборигенами в любой стране. Стоит только ткнуть пальцем на нужную иконку.
Где можно остановиться на ночлег?
Почему мы так любим значки?
Потому что у них есть ряд преимуществ:
- Они бросаются в глаза;
- Они быстро передают информацию;
- Они запоминаются;
- Они экономят место;
- Они понятны на любом языке.
Иконки интерфейсов имеют еще ряд преимуществ:
- Они более приятны глазу, чем полотна текста, которые бы могли быть на их месте. Чем меньше становится экран, тем больше слов хочется заменить специальными значками.
- Они могут придать вашему приложению визуальную индивидуальность.
Но главное, чем должна обладать любая иконка — это ЯСНОСТЬ.
Если пользователь не поймет значение иконки, он либо будет ее избегать, либо путаться.
С мороженым — нельзя, с сигаретой — нельзя, с единорогом — можно
Чтобы решить проблему с ясностью иконки, можно пойти несколькими путями:
Таким образом вы создаете новый пользовательский опыт. Человек, подобно тому, как учит алфавит, должен выучить и значки интерфейса. Чтобы идти этим путем, нужно быть уверенным в своем продукте, в готовности пользователей учиться ради его использования.
Возьмем в качестве примера Instagram.
Иконка с изображением ящика была неясна, мало кто понимал, что с ее помощью можно отправлять личные сообщения.
Пользователей пытались научить новому значку
Источник изображения
Сегодня иконку отправки личных сообщений поменяли на более ясную.
Можно сделать вывод, что этот путь не всегда приносит ожидаемый результат
Поэтому рассмотрим 2-ой вариант.
2. Бороться за ясность, создавать иконки максимально понятные пользователю
И именно о том, как это сделать и не ошибиться в выборе, пойдет речь далее.
Почему иконки интерфейсов не всегда понятны пользователям?
Давайте разбираться в причинах.
10 ошибок в дизайне иконок интерфейсов
1. Неточность дизайна образа иконки
Для начала проведем небольшой тест.
Это как раз и есть пример иконки, которую нельзя однозначно интерпретировать, а значит она может вызвать недоумение у пользователя.
В одной старой статье об ошибках в дизайне иконок приводился в пример курьезный случай, когда иконку фильтра данных создали в виде воронки.
Ответ клиента был таков: «Мне не совсем понятно, почему вы нарисовали иконку фильтра в виде бокала для мартини!» 🙂
Чтобы избежать двоякого трактования, дизайнер должен четко передать образ, смысл которого можно будет легко уловить. Не заставляйте пользователя думать.
2. Неясность ассоциации
В отличие от первой причины, в этом случае обычно сам образ передан правильно, но пользователю не ясно, почему использована именно эта иконка и что она означает.
Посмотрите еще раз на пример со старой иконкой для отправки личных сообщений в Instagram. Образ вполне уловим — изображен ящик. Но с чем у вас ассоциируется ящик? Сохранить? Входящие? Добавить новый файл? Ассоциация слишком тонкая, пользователю нужно думать, значит образ подобран неудачно.
Вот еще один наглядный пример того, как меня запутал интерфейс.
Это крест, без сомнения
Я поняла его, как “закрыть окно” и одним кликом удалила весь созданный мной аккаунт.
Как потом выяснилось, при наведении курсора на иконку всплывает подсказка.
Только я эту подсказку даже не читала, т.к. мой пользовательский опыт подсказывал мне, что таким образом я просто закрою окно
Гораздо яснее для пользователя в этом случае был бы образ мусорного бака.
Кроме того, здесь интерфейс позволяет разместить слова “Удалить аккаунт”, и в этом случае использование текста вместо иконки выглядело бы оправдано.
Вот еще один пример, когда возникает диссонанс значения иконки и ее образа:
Никогда бы не подумала, что этот значок может использоваться для удаления папки
Источник изображения
3. Похожие иконки в интерфейсе
С одной стороны, иконки в интерфейсе должны подходить по стилю и смотреться целостно и гармонично, чтобы не получилось вот так:
Несогласованность дизайна иконок в интерфейсе
Источник изображения
Но с другой стороны, иконки должны быть легко различимы между собой.
Когда 2 очень похожие иконки отвечают за разные функции, возникает путаница.
До сих пор путаюсь, какая из этих стрелок возвращает назад к другим письмам Gmail, а какая приводит к написанию ответа на письмо
Вот еще один пример:
Значок проверки орфографии можно спутать со значком перезагрузки
Источник изображения
4. Не учтен предыдущий пользовательский опыт
Вы помните, как в Viber при отправке сообщения рядом висела иконка с изображением стрелки?
Что это за стрелка?
Многие новые пользователи путались, считая, что стрела имеет значение “Отправить сообщение”. Почему? Потому что многие новые пользователи пришли в Viber из Skype и других мессенджеров, где стрелка означала именно отправку сообщения и располагалась в том же месте.
Иконка для отправки сообщения в Skype
Стрела в интерфейсе Viber означала отправку данных геолокации. Не удивительно, почему все мои друзья в то время были в курсе, где я;)
Сейчас интерфейс Viber выглядит иначе:
Поменялось не только месторасположение иконки, но и ее образ
Поэтому, создавая интерфейс, внимательно изучите интерфейсы основных конкурентов, чтобы не путать и не переучивать пользователей.
5. Не учтены ментальные особенности ЦА
Некоторые значки могут по-разному интерпретироваться в разных странах.
Подобно тому, как в разных странах неоднозначно воспринимаются жесты, также неоднозначно могут быть поняты иконки.
Например, эта иконка может быть понята совершенно по-разному в США и Италии
Вот так по-разному трактуют жесты в разных странах
Если вы создаете универсальное приложение, ориентированное на многие страны, то используйте более универсальные иконки.
Хотя, признаться, их не так уж и много. Сейчас среди них можно назвать изображение
Если ваше приложение ориентировано на целевую аудиторию конкретной страны, учитывайте ее особенности восприятия.
Так, например, для жителей США более привычной будет иконка с тележкой супермаркета (shopping cart) для обозначения покупки (Источник).
Изображение тележки супермаркета на американском сайте
Так выглядит иконка для совершения покупок на британском сайте Next
6. Неправильный посыл
Дизайн иконок может повлиять на поведение пользователя.
Так при выборе иконки для действия “Добавить товар в корзину” следует ориентироваться не только на ментальное восприятие, но и на подтекст, который они несут.
Тележка супермаркета подразумевает, что пользователь может в любое время, как положить товар в корзину, так и передумать, и выложить его. Т.е. в этом случае вы не давите на будущего покупателя и мягко склоняете к покупке.
Разница между восприятием иконок для обозначения покупки товара
Источник изображения
Обе иконки могут быть использованы, и сработать как в плюс, так и в минус. Можно добавить товар в тележку и забыть о нем, а можно уйти с сайта, так и не решившись положить товар в сумку. Учитывайте специфику своего товара и выбирайте правильный посыл.
7. Устаревшие образы
Здесь нужно быть предельно аккуратным. Иконки стареют, как и люди.
Это вполне всем знакомый значок “Сохранить”
Поймет ли новое поколение эту иконку, если оно никогда не держало дискету в руках?
Уже давно ведутся споры о необходимости замены устаревших иконок на новые
С одной стороны, замена многих популярных иконок скоро станет необходимостью.
Но с другой стороны, поколения сменяются гораздо медленнее, чем меняется наше представление о каком либо предмете.
Возьмем к примеру изображение телефона.
Эволюция иконок телефонного звонка
Первая иконка до сих пор актуальна и понятна даже новым поколениям, т.к. ее форма легко узнаваема.
Если же расположить иконку смартфона, можно запутать пользователя. Смартфон ассоциируется не только с функцией звонка, а и кучей других возможностей.
Приглядитесь к иконке, которая используется в Твиттере для написания нового твита. Иконке придали форму гусиного пера, чтобы передать смысл “Кликни сюда и ты сможешь писать”.
Наше поколение не писало гусиными перьями, но мы четко понимаем значение этой иконки, хотя его также можно назвать устаревшим
Многие иконки, образы которых устарели, еще долго не потеряют своей актуальности, поэтому, оценивайте риски, меняя образ давно всем знакомой иконки на более новый.
Мы давно не слушаем музыку с кассет, не используем микрофон старого стиля или телевизор с рожками, но эти образы гораздо понятнее пользователю, чем если мы изобразим вместо них черные прямоугольники смартфона, которые могут заменить сейчас все эти предметы.
8. Перегруженный дизайн
Не забывайте, что иконка интерфейса должна быть ясна не только в самом ее большом размере, но и в миниатюре.
Именно поэтому лишние элементы будут создавать грязь в интерфейсе и вызывать недоумение у пользователя.
Сравните сами:
Лишние элементы перегружают образ и он становится неясным
Сейчас эта проблема менее актуальна, чем она была до появления трендов плоского и чистого дизайна. Плоские иконки гораздо легче воспринимаются, чем сложные 3D объекты. и это одна из причин, почему они так популярны. Однако в руках умелого дизайнера и объемную иконку можно сделать узнаваемой в любом размере.
9. Использование текста или его отсутствие
Использовать текст в иконках или нет? Пояснять значение иконок или предоставить это пользователю? Нет однозначного ответа на эти вопросы.
Иногда нужно передать настолько сложное понятие, что без текста рядом или подсказки не обойтись.
В тоже время, если вообще отказаться от иконок и использовать только текст, мы не сможем быстро сфокусировать взгляд на нужной кнопке.
Если есть возможность добавить текст, который не перенасытит интерфейс, то лучше его добавить.
Но что касается текста в дизайне самой иконки, то лучше избежать его использование, т.к. в самом маленьком размере значка он будет нечитабельным, а дизайн выглядеть перегруженным.
10. Скалирование иконок
При увеличении и ли уменьшении растровых иконок они становятся нечеткими и размытыми, поэтому многие дизайнеры предпочитают создавать векторные иконки, чтобы потом не тратить время на прорисовку мелких деталей вручную, а просто увеличивать или уменьшать изображение.
Но такой подход также неверен.
Вот пример, как выглядит уменьшенная иконка (в красном круге) и прорисованная дизайнером в меньшем размере вручную (в зеленом круге).
При скалировании ясность иконки теряется и пользователь не может отличить похожие образы
Поэтому всегда просите дизайнера прорисовывать элементы вручную при создании новых размеров.
Выводы
Почему мы выделили именно эти 10 ошибок, а остальные, не менее важные оставили без внимания? Потому что эти ошибки влияют на ЯСНОСТЬ иконки, вызывают недоумение, запутывают пользователей и могут повлиять на конверсию.
Как видите из примеров, одна лишь неверно подобранная иконка может заставить пользователя удалить аккаунт, отказаться от покупки или от использования неудобного приложения.
Так что, выбирайте правильные иконки и лучше доверьте это профессионалам.
blog.icondesignlab.com
Знаки качества — дизайн и история / Хабр
Для маркировки товаров, отвечающих определенным стандартам, используют особые знаки, которые называются знаками соответствия сертификации, знаками соответствия стандартам качества, или, попросту, знаками качества. Такие знаки бывают национальными, международными, отраслевыми или специальными. Многие из них являются примерами хорошего графического дизайна, поэтому предлагаю рассмотреть некоторые.Государственный знак качества СССР
Знак использовался для маркировки серийной продукции высокого качества, выпускавшейся предприятиями СССР, был введен в действие в 1967 году с целью повышения качества и эффективности производства.
Общая форма знака — пятиугольник — отсылает к пятиконечной звезде, главному геральдическому символу Советского Союза. В пятиугольник, кроме аббревиатуры, вписан символ, предположительно объединяющий несколько смыслов: весы, буква «К» (качество, повернута на 90 °), силуэт человека. Один из авторов знака — Народный художник СССР Валерий Акопов.
Российский знак качества
В 2013 году Минромторгом было принято решение возродить систему сертификации в России по принципу совесткой. Для этого в 2014 году был проведен конкурс, в результате которого был выбран знак, нарисованный дизайнером Дмитрием Мордвинцевым, коллегой Валерия Акопова.
Знак явно отсылает к советскому знаку качества, и, по сути, является его примитивной перефразировкой.
CE-mark и China Export
СЕ-mark используется в странах Евросоюза и США и гарантирует безопасность продукции. Такая маркировка является обязательной для всех товаров на европейском рынке, в отличие от сертификации на соответствие стандартам качества.
Знак CE-mark представляет композицию из двух букв «C» и «E», построенных на касающихся окружностях.
А вот знак China Export, визуально отличающийся от CE-mark только расстоянием между буквами, означает только, что товар был произведен в Китае, и не подразумевает никакого соответствия стандартам или прохождения сертификации. Совпадение? Не думаю.
Украинский знак стандартизации
Этот выразительный, с точки зрения графического дизайна, знак, который также называют «трилистник», указывает на соответствие продукта украинским стандартам и нормативным документам.
Der Grune Punkt
Название этого знака переводится с немецкого как «зеленая точка». Знак изображает две стрелки, закрученные наподобие символа «Инь-ян», и обладает огромной выразительной силой и узнаваемостью. Вопреки распространенному мнению, этот знак не сообщает, что продукт был изготовлен из перерабатываемых материалов или пригоден для переработки. На самом деле «Зеленая точка» ставится компаниями, участвующими в немецкой программе переработки отходов, а потому за пределами Германии не несет никакого смысла, хотя иногда ставится на свои продукты недобросовестными иностранными компаниями, поленившимися разобраться в его значении.
Знак Woolmark
Маркировка Woolmark означает высокое качество продукции, изготовленной из шерсти, установлена Международным Секретариатом по шерсти (IWC). Woolmark является одним из самых узнаваемых графических знаков в мире, например, в Италии он опережает по узнаваемости знаки «Макдоналдс», «Найки» и «Мерседес».
Знак Woolmark был создан итальянским дизайнером Франческо Саролья и впервые увидел свет в США, Западной Европе и Японии в 1964 г. С этого момента знак Woolmark получил распространение более чем в ста странах мира.
Британский кайтмарк
Является одним из старейших знаков качества, зарегистрирован в 1903 году и используется до сих пор. Такое название знак получил из-за своего сходства с воздушным парусом (англ. kite). На самом деле это буквы «B» и «S» — британский стандарт.
habr.com
Об иконках — Проекторат
Иконки экономят место и выглядят свежо. Иконки — это быстрый ответ на сложные вопросы:
- Как сделать красивее?
- Как нам это забрендировать?
- Как сделать веселее?
Мы любим иконки. Пока не начинаем в них путаться.
Иконки бывают разные: на продуктах, в архитектуре, в компьютерах, в списках, на кнопках, для веба и приложений, для 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.
Делиться хорошо!
projectorat.ru
подобие, аналогия и произвольный выбор
В ходе одного из недавних тестирований, проведенных специалистами исследовательской компании Nielsen Norman Group (NNg), обнаружилось, что наряду с тем, что дизайн множества иконок улучшился, существует также немалое количество подобных значков, вызывающих проблемы юзабилити и не распознаваемых большинством пользователей. Хотя каждый конкретный визуальный дизайн каждого значка отличается от другого — в том числе и связанными с ним проблемами, — существует несколько основных категорий иконок, которые можно использовать для лучшего понимания того, что именно делает некоторые из этих элементов пользовательского интерфейса более доступными для понимания.
Иконки, базирующиеся на подобии (схожести)
К этой категории относятся иконки, изображающие физический объект, который графический значок должен наглядно представлять восприятию пользователя. Используемое для представления (репрезентации) файла электронной почты изображение конверта будет являться иконкой подобия (Reference Icon).
Основная проблема юзабилити иконок подобия заключается в трудности разработке изображения, которое на самом деле выглядит как предполагаемый объект. Не такая простая задача, если учесть крошечный размер иконки.
Читайте также: Интуитивные иконки: пособие по юзабилитиИконки, основанные на аналогиях (напоминаниях)
Это тип значков интерфейса, которые при помощи напоминания или аналогии репрезентируют концепцию, отображаемую иконкой. Например, изображение зажима, используемое для наглядного представления утилиты сжатия файлов (потому что в обоих случаях подразумевается сжимание), является иконкой аналогии (Reference Icon).
Было бы трудно найти хорошую иконку подобия для операции сжатия файлов, за исключением использования комбинации «до и после», переданной парными изображениями большого (несжатого) и маленького (сжатого) документов, но значки, отображающие изменение состояния, как правило, как правило, трудно поддаются пониманию. Значки интерфейса, значение которых базируется на аналогиях, иногда также называются символическими иконками.
Здесь возникает вопрос, установят ли пользователи смысловую связь между эталонным (общепринятым, конвенциональным) значением изображения, используемого в качестве иконки, и его значением в рамках компьютерной экосистемы? Являются ли эти два понятия достаточно тесно связанными в ментальных моделях пользователей, чтобы люди подумали об опции системы, увидев изображение, символизирующее данную ее особенность?
Читайте также: Без имени Лучший значок – text labelПроизвольные иконки
Рассмотрим категорию визуальных форм, имеющих смысл только в рамках некого соглашения. Например, дорожные знаки относятся к категории изображений с произвольно присвоенным им значением и — в силу их достаточно стандартизированного использования в международном масштабе — могут служить отличным источником прототипов для компьютерных иконок.
Треугольный дорожный знак предупреждения об опасности может быть использован в качестве компьютерной иконки для предупредительного сообщения. Очевидно, что пользователям труднее всего понимать именно произвольные иконки (Arbitrary Icons), особенно в том случае, если они не настолько широко используются, чтобы конвенциональное значение стало «второй натурой» значка.
Например, сомнительно, что многие люди обеспокоены тем, что графическая форма «?» абсолютно произвольно выбрана в качестве указателя вопроса. Следовательно, это хорошая иконка для обозначения помощи.
Пример: значок часов в качестве иконки подобия, и он же как иконка аналогии
Проводя одно из своих исследований юзабилити, эксперты NNg обнаружили иконку часов в интерфейсе тестируемого сайта. Изображение определенно выглядело как часы и, вероятно, отлично работало бы, если бы это была иконка подобия, используемая для представления связанной с временем особенности сайта, такой как отображение текущего времени, опция будильника или запланированный срок начала какого-то события. Однако на этом сайте иконка применялась для представления функции просмотра истории событий, и в этом качестве она потерпела неудачу в ходе пользовательского тестирования.
Изображение часов для обозначения функции просмотра истории — это иконка аналогии, поскольку оба понятия — «часы» и «история» — объединены общей для них концепцией времени. Тем не менее налицо плохое, слабое соответствие: аналогия слишком отдаленная.
Читайте также: Что такое аффорданс, или Самый недооцененный термин веб-дизайнаПример: значок дискеты в качестве иконки для команды «Сохранить»
Небольшое изображение дискеты (гибкого диска) используется для представления опции сохранения файла в самых различных графических пользовательских интерфейсах (GUI).
Первоначально это была иконка подобия: пользователи на самом деле сохраняли свои файлы на дискетах, так что пока значок обоснованно выглядел как гибкий диск, его, скорее всего, признали и поняли в этом качестве.
Позже у пользователей появились жесткие диски, и значок «Сохранить» стал восприниматься в качестве иконки аналогии. Дискета представляет собой один из типов устройств для хранения данных и, следовательно, может использоваться для представления обобщенной функции хранения документа на любом устройстве хранения данных, даже на том, что выглядит совсем по-другому нежели гибкий диск.
Действительно, большинство обычных пользователей никогда не видело жесткий диск, установленный внутри корпуса компьютера/ноутбука, поэтому, вероятно, и продолжилось использование иконки флоппи-диска во время процесса перехода с дискет на жесткие диски.
В настоящее время многие молодые пользователи никогда не видели дискету, и значок, ее изображающий, стал для них произвольной иконкой. Почему маленький квадратик обозначает сохранение файла? Ну, просто так принято.
Как показывает этот пример, классификация иконки может меняться в зависимости от течения времени или в связи с другими изменениями в контексте.
Читайте также: Материальный дизайн: другой, но не лучшийЮзабилити иконок в интернациональном масштабе
Наивысшей степенью юзабилити чаще всего обладают иконки подобия, однако они могут вызвать проблемы у «международных» пользователей в той мере, в какой одни и те же вещи выглядят в разных странах по-другому. Изображения необычных объектов могут вызвать трудности при их распознании, о чем свидетельствует проведенное в Венгрии тестирование интернационального набора иконок, посвященных спорту. Только 9% венгров правильно интерпретировали иконку, показывающую игрока в сквош, потому что большинство жителей Венгрии никогда не видели этой игры.
В подобной ситуации в тупик может попасть и сам общепризнанный «гуру науки юзабилити», основатель Nielsen Norman Group Якоб Нильсен: «Подобным же образом почтовые ящики выглядят по-разному во всем мире, как по форме, так и по цвету (синий, красный, желтый и зеленый — это лишь несколько цветов, которые я видел в своих путешествиях). Я помню, что когда впервые отправил открытку в Бельгии, то не был уверен, воспользовался ли я “официальной” почтой, потому что бельгийские почтовые ящики выглядят совершенно по-другому, чем все остальные, когда-либо виденные мной. И ведь это был физический объект. Небольшая двумерная картинка, скорее всего, будет еще более непонятной».
Иконки аналогии, равно как и произвольные иконки, при использовании в интернациональном масштабе нередко воспринимаются пользователями гораздо хуже, чем иконки подобия. Аналогии зачастую куда больше определяются локальными культурными особенностями, нежели внешний вид физических объектов.
Различие национальных конвенций может снизить юзабилити интерфейсов, нацеленных на использование иконок, работающих на принципе аналогий. Например, изображение обеденного стола (dining table) можно использовать в качестве «напоминающей» иконки, чтобы представить таблицу номеров (table of numbers).
Аналогия между таблицами как мебелью и таблицами в качестве типографских объектов выполняется только в том случае, если пользователь говорит по-английски. Во многих других языках для передачи двух этих понятий используются совершенно разные слова (например, bord vs. tabel на датском языке), а для пользователей, говорящих на этих языках, значок, изображающий стол, сводится к статусу произвольного выбранной иконки.
В общем и целом, «интерфейсные каламбуры» скорее опасны для юзабилити, хотя соблазну применить их сопротивляться трудно.
Читайте также: Как оптимизировать юзабилити иконок интерфейса?Простые иконки, сложные иконки
Иконки подобия обычно имеют лучшее юзабилити, хотя произвольная иконка может отлично проявить себя, если она уже широко стандартизирована к моменту ее использования в вашем дизайне. Не будьте одним из тех, кто пытался научить мир пользоваться новой иконкой с произвольно присвоенным ей значением. Вы, скорее всего, потерпите неудачу.
Конечно, у нас всегда есть надежный вариант проверки юзабилити иконок: пользовательское тестирование быстро покажет нам, понимают ли пользователи их значение.
Высоких вам конверсий!
По материалам: nngroup.com
30-05-2017
lpgenerator.ru
Возможности, которые дает стандартизация иконок
В основе иконки лежит легко узнаваемая метафора. За счет этого они являются эффективным инструментом передачи информации. В этой статье мы обсудим стандарты, по которым эти символы создаются, и рассмотрим варианты их применения. Вы сможете изучить методы создания этих элементов дизайна на конкретном примере и включить их в разработку ваших проектов.
Почему мы используем иконки?
Иконки и символы являются мощным визуальным инструментом. Обычно они изображают реальные объекты или передают их смысл через использование метафор. Они транслируют значение объекта изображением, вместо использования множества слов и символов для трактовки идеи. Именно поэтому иконки так часто используются в сфере программного обеспечения. При верном применении, они занимают минимальное пространство и эффективно доносят основную мысль.
Кроме того, пользователь, не задумываясь, понимает смысл символов. Например, представьте, если на панели инструментов вместо иконок будет использован текст. Для этого потребуется читать и обдумывать название каждого приложения, и поиск нужного элемента займет больше времени.
На первый взгляд использование текста вместо иконок кажется не таким уж и страшным. Но при постоянной работе только с текстом мозг будет вынужден перерабатывать большие объемы информации. Символы же упрощают мыслительный процесс, потому что являются интуитивно понятными. Благодаря им, поиск необходимой информации становится проще и быстрее.
Для чего используются стандарты иконок
Еще одно преимущество — иконки преодолевают языковые барьеры. Они работают эффективнее, когда дизайнеры учитывают общепринятые универсальные мировые стандарты при их создании. Это еще одна причина, почему иконки так часто используются в программном обеспечении — они исключают необходимость перевода и являются доступными для пользователя любой страны.
При проектировании иконок для приложений и других медиа, дизайнеры отслеживают, есть ли уже существующие стандарты по тематике их разработки
Использования стандартной иконки: пример
В качестве простого примера подойдет задание разработать кнопки с гендерным различием. Вы можете начать с создания двух активных кнопок с надписями «Мужчины” и «Женщины» соответственно. Кроме того, вы можете добавить цвета, которые традиционно ассоциируются с мужским и женским полом
Но что если эти кнопки будут предназначены для широкой аудитории из 50 разноязычных стран?
Вы будете вынуждены создать несколько кнопок на разных языках, чтобы они все смогли понять, о чем идет речь.
В ином случае, вы можете использовать коммуникативную силу значков и символов. Как вы представляете себе визуально женщину и мужчину? Вместо того, чтобы напрягать мозг и думать, каким образом люди из 50 стран смогут понять ваши слова, обратитесь к стандартным общепринятым метафорам. Символ «Мужчина» и «Женщина» без раздумий будет сразу понятен человеку из любой страны.
Подобные символы на активных кнопках узнаваемы всеми. Это было не дизайнерское решение, а простой пример, который помогает понять силу использования иконок для коммуникации.
Выявление правил и стандартов создания иконок
Символы «Мужчины» и «женщины», которые мы рассмотрели выше, не являются обязательным «стандартом» только из-за того, что они были официально одобрены и лицензированы для использования в международном комитете профессионалов дизайна. Эти иконки стали общепризнанными благодаря широкому распространению и использованию. Множество людей в той или иной части планеты понимает, что они означают.
Хорошая осведомленность помогает создать иконки, доступные и понятные широкому кругу людей. Однако, иногда придумать значок, который станет универсальным не так уж и просто. Вот перечень стандартных метафор, которые вы можете без труда распознать — лист бумаги в углу папки, которая означает понятие «документ», увеличительное стекло для «поиска», корзина для покупок , которая символизирует «цифровую» корзину. А вот придумать метафоры для таких слов, как «репутация» или «цель» будет уже сложнее.
Есть хороший метод узнать, существует ли общепризнанный стандарт на ту или иную метафору. Можно открыть поиск картинок в Google и ввести слово для проверки. Если вы увидите много похожих значков, то можете считать, что это традиционная метафора. Другой способ – опросить окружающих людей и узнать, что им первое приходит на ум, когда они слышат то или иное слово.
Многие метафоры широко распространены в сфере программного обеспечения. Чем чаще они встречаются, тем скорее становятся стандартами и правилами, признанными в сообществе дизайнеров. Хороший пример того, как иконка стала стандартом — значок RSS.
Как иконка становится стандартом
Начиная с 2004 года, пользователи стали активно подписываться на RSS ленты. Не было стандартной метафоры, которая бы ассоциировалась с этой функцией. Поэтому специалисты разработали широкий спектр загадочных значков. Они указывали на возможность подписаться на RSS ленты.
Одним из самых распространенных был оранжевый блок с надписью. Но нужна была метафора для отражения концепции канала, а не просто текст.
С идеей создать простую иконку, которая бы отображала все протоколы синдикации, Стивен Хорландер придумал то, что сегодня знакомо нам всем – оранжевый значок RSS. Он первоначально был создан для Firefox 1.0 и не сразу стал универсальным. Его дизайн отражал функцию транслирования информации и продвигался, чтобы быть принятым в интерфейс Internet Explorer и Outlook. Признанным же стандартом эта иконка стала после того, как ее начали использовать вышеуказанные приложения, а также Opera.
Значок RSS демонстрирует, насколько удобным является использование иконок. Вместо того, чтобы работать с крошечными надписями и кнопочками, которые не всегда понятны пользователю «RSS, Atom, Blogline, XML и т.д. », намного проще использовать простую иконку Стивена Хорландера, которая показывает, что сайт что-то транслирует и с помощью нее можно подписаться на ленту обновлений.
Стандарты для иконок обусловленные широким использованием
Другой пример, когда значок становится стандартным, путем широкого применения – это иконка «Поделиться» у Apple. Вы можете легко ее распознать, так как она присутствует в приложениях iOS и OSX. И не только там. Кроме этого его используют и сторонние разработчики, не имеющие отношения к Apple.
Иконка «Поделиться» разрабатывалась вместе с многими приложениями, которые работают на платформе Apple. Так что, если вы разрабатываете для iOS или OSX и вам нужно использовать значок «Поделиться», то смело следуйте устоявшейся схеме и используйте стандартный вариант. Пользователям Apple (и не только им) будет намного проще понять, что вы имели ввиду, потому что, скорее всего, они видели этот символ раньше.
Стандарт иконок: отдайте свой голос
Вы можете подумать, что иконки становятся стандартом потому, что их используют такие крупные корпорации, как Microsoft или Apple. И это отчасти верно. Но на самом деле, крупные корпорации только ускоряют процесс стандартизации, поскольку их масштабность помогает охватить широкую аудиторию пользователей. Повторное использование каких-либо метафор способствует пониманию содержания иконки.
Символ является мощным инструментом, когда большинство людей видят его и понимают, что он означает. Вы, как дизайнер, можете помочь отобрать иконки, которые станут стандартными в будущем. При выборе иконок для вашего следующего проекта, вы, по сути, устраиваете кастинг, который гласит «да, эта иконка хорошо выражает смысл метафоры для пользователей, и я могу ее использовать».
Иконки для ваших последующих проектов
Ниже вы найдете перечень значков. Они рассматриваются, как кандидаты стандартного применения.
Иконка OMPL
Цель: информировать о языке разметки структуры, основанной на формате XML, служащей для переноса в стандартную электронную форму информации о потоках, которые могут группироваться в ленты.
Лицензия: Creative Commons Attribution-Share Alike 3.0 Unported License
Сайт: opmlicons
__________________________________________________________________________
Иконка Geotag
Цель: Геотеггинг – добавление географической мета информации в фотографии. Эта иконка задумана, как стандарт для понимания комплексной технологии с помощью визуального символа.
Лицензия: Creative Commons or GNU Lesser GPL
Сайт: geotagicons.wordpress
__________________________________________________________________________
Иконка выбора языка
Цель: создать абстрактный универсальный значок , символизирующий выбора языка для использования в приложениях и на сайтах.
Лицензия: Creative Commons Attribution-Share Alike 3.0 Unported License
Сайт: languageicon
__________________________________________________________________________
Иконка Open Share
Цель: помочь пользователям легко определить содержимое сайта, которым можно поделиться. Иконка показывает факт обмена через метафору из рук в руки.
Лицензия: Creative Commons Attribution-Share Alike 3.0 Unported License
Сайт: shareaholiс
__________________________________________________________________________
Цель: Показать факт распространения страницы на несколько направлений, таких как электронная почта, социальные сети и многое другое.
Лицензия: GPL, LGPL, BSD, Creative Commons Attribution 2.5
Сайт: shareaholic
Примечание: первоначально эта иконка была введена с плагином WordPress. Теперь она является официальным товарным знаком. Поэтому пользователи выступают за то, чтобы вместо нее использовалась иконка Open share.
__________________________________________________________________________
Иконка Markdown
Цель: ввести эту метку для идентификации использования облегчённого языка разметки http://dcurt.is/the-markdown-mark/
Лицензия: CC0 UNIVERSAL PUBLIC DOMAIN DEDICATION LICENSE
Сайт: github
__________________________________________________________________________
Оригинал статьи: webdesign.tutsplus.com
Перевод: Наталья Щетко (студия Nineseven)
Возможно, вас также заинтересуют статьи:
www.dejurka.ru
Иконки
Сайт testpressing.org рассказывает, как один из лучших логотипов в истории — знак Британских железных дорог — случайно, благодаря утечке информации в прессу, стал победителем в конкурсе логотипов, и приводит сканы из книги British Rail Design, изданной в 1986-м году Датским советом по дизайну.
После приватизации британской железнодорожной компании логотип был подвергнут редизайну, однако основной знак сохранили, изменив текстовую часть. Вот современная версия:
Источник:
http://testpressing.org/…-research-unit-gerry-barney
design.artgorbunov.ru