Значки иконки: Векторные иконки и стикеры — PNG, SVG, EPS, PSD и CSS

Поймут ли ваши иконки пользователи из других стран? Обзор научных исследований / Хабр

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

Ученые попробовали проверить, так ли это и насколько отличается распознавание иконок у людей разных культур.

Отличаются ли американцы от корейцев в распознавании иконок?

Исследование корейских ученых Чжи Хе Ким и Гон Пхё Ли было представлено на седьмой конференции Mobile HCI в 2005 году в Зальцбурге.

Исследование проверяет три гипотезы:

1. Буквальные и знакомые иконки работают лучше, чем новые и метафорические.
2. У азиатов и европейцев распознавание иконок различается.
3. Азиаты будут лучше распознавать буквальные иконки, чем европейцы

Участники

В исследовании участвовали 10 корейцев и 10 американцев.
Использовалось три сета иконок: совсем метафорические, более буквальные и максимально буквальные.

Иконки для списка вызовов, сообщений, загрузок, диктофона и браузера

Эксперимент

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

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

Результаты

Лучше всего все респонденты распознавали второй набор — не совсем буквальный и не совсем абстрактный.

Распознанные корейцами и американцами иконки для списка вызовов, сообщений, загрузок, диктофона и браузера

Корейцы лучше распознавали полуметафорические и буквальные иконки. Американцы лучше распознавали метафорические иконки.

Зависимость количества правильных ответов от сета иконок

Тем не менее исследователи признают, что группа была слишком маленькой, чтобы сделать какие-либо выводы, а разница — недостаточно значительной.
А еще они подозревают, что накосячили, разбивая иконки по сетам.

Cultural Difference and Mobile Phone Interface Design: Icon Recognition According to Level of Abstraction Чжи Хе Ким, Гон Пхё Ли.

Отличаются ли китайцы от американцев и немцев в распознавании иконок?

Исследование Сони Ауэр и Эстер Дик публиковалось на двенадцатой конференции HCI International 2007 в Пекине.
Исследование проверяет две гипотезы:

1. Между распознаванием иконок американцами, китайцами и немцами различий не будет.
2. Но при распознавании иконок, которые ассоциированы с языком группы (например, debug для американцев), у группы, для которой этот язык родной, распознавание будет лучше.

Участники

Всего в опросе участвовали 283 человека.
В исследовании не учитывались данные тех, кто сообщил о проблемах с правильным отображением опроса, и тех, кто живет в стране не с рождения.

Также исключали результаты тех, кто выбрал «ни один из этих значков» более чем в 36% случаев или более 60% иконок из одного семейства.
Чтобы получить равные размеры групп, выборка для каждой страны была сокращена до 45 участников.

Эксперимент

Опрос проходил в интернете, в течение двух месяцев. Реклама была размещена на нескольких новостных сайтах и в почтовых рассылках. Опросник был переведен на три языка: американский английский, немецкий и китайский.

Значки были сгруппированы так, как они группировались бы в реальном программном обеспечении: например, значки панели инструментов для настроек или значки на панели сообщений.

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

Пользователь должен выбрать иконку, которая наиболее подходит к важным системным сообщениям, и указать, насколько он уверен в своем выборе

Иконки были двух типов: связанные с культурой и не связанные.

Например, на значке «Информация» буква I, первая буква слова Information служит подсказкой для участников из Германии и США, но не для участников из Китая.

Значок debug должен быть более понятен для участников из США, но не для участников из Германии или Китая, поскольку он основан на английской игре слов.

Результаты

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

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

Американцы правильно распознали 83,73% иконок, немцы — 78,81%, а китайцы — 68,85%. Но для иконок, связанных с культурой, правильных ответов было 86,22% у американцев, 66,22% — у немцев, 47,56% — у китайцев.

Слева — результаты для всех иконок, справа — для иконок, не связанных с культурой

Но даже после исключения значков, связанных с культурой, китайские пользователи по-прежнему распознавали иконки хуже других групп (73,24% против 81,55% у немцев и 83,19% у американцев).

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

When Does a Difference Make a Difference? A Snapshot on Global Icon Comprehensibility
Соня Ауэр, Эстер Дик

Отличаются ли мужчины и женщины в распознавании иконок?

Исследование так же было опубликовано на двенадцатой конференции HCI International 2007 в Пекине.
Ученые хотели прояснить два вопроса:

1. Влияет ли гендер на распознавание разных типов иконок?
2. Какие типы иконок любят тайваньские подростки?

Участники

В исследовании участвовали 60 человек от 16 до 24 лет — 33 женщины и 27 мужчин. Все использовали мобильный телефон больше 2 лет.

Эксперимент

Иконки разделили на три группы:

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

Иконки были представлены для функций: мультимедиа, запись звонка, настройки, контакты и сообщения.

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

Результаты

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

Но во всех трех категориях гендерная разница была незначительной.
Однако было обнаружено, что существует значительная гендерная разница в распознавании абстрактного значка для «Call Records» (Р = 0,019 < 0,05). Средний балл у женщин (0,91) был выше, чем у мужчин (0,67).

Во второй части эксперимента участники должны были оценивать несколько иконок для одной и той же функции по субъективному критерию «нравится / не нравится».

Обе группы отдали предпочтение буквальным иконам. Второе место по количеству очков получили метафорические иконки. Самая низкая оценка была у абстрактных значков. Это интересно, учитывая, что распознавали лучше всего метафорические иконки, но в рейтинге предпочтений они заняли всего лишь второе место.

Значимой гендерной разницы тоже не было выявлено.

The Effects of Gender Culture on Mobile Phone Icon Recognition
Shunan Chung, Chiyi Chau, Xufan Hsu, and Jim Jiunde Lee

Выводы

Представителям незападной культуры распознавать некоторые иконки тяжелее. Поэтому, если вы делаете международный продукт, стоит протестировать сет иконок на разных аудиториях.

Женщины и мужчины одной культуры распознают иконки одинаково.

Обзоры исследований на другие темы

Знаменитые дизайнеры vs научные исследования про читаемость шрифтов
Красивое удобнее, чем некрасивое? Обзор исследований

подобие, аналогия и произвольный выбор

В ходе одного из недавних тестирований, проведенных специалистами исследовательской компании 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

4 918 638 Иконки Ico — Бесплатно в SVG, PNG, ICO

Получите неограниченный доступ к более чем 5,3 миллионам активов

Получить полный доступ

Дизайн иконок Значок

Дизайн иконок Значок

Дизайн иконок Значок

Символ гандикапа Значок

Символ гандикапа Значок

Символ гандикапа Значок

Закрывать Значок

Обновить Значок

Программы Значок

Больше верт Значок

Стрелка вперед Значок

Шеврон слева Значок

Шеврон справа Значок

Развернуть больше Значок

Подробнее Гориз Значок

Первая страница Значок

Стрелка Назад Иос Значок

Последняя страница Значок

Стрелка вниз Значок

Стрелка Вперед Иос Значок

Круг со стрелкой вниз Значок

Яблочный запас Значок

Файл Значок

Проверять Значок

Полноэкранный Значок

Wi-Fi Значок

Камера Значок

Стрелка назад Значок

Развернуть больше Значок

Стрелка вправо Значок

Развернуть меньше Значок

Стрелка влево Значок

Выход из полноэкранного режима Значок

Стрелка вниз Значок

Стрелка вверх Значок

Развернуть меньше Значок

Меню Значок

Подкаталог со стрелкой вправо Значок

Стрелка вверх Значок

Подкаталог Стрелка влево Значок

Поиск Значок

Редактировать Значок

Эл.

адрес Значок

Отмена Значок

Настройки Значок

Разработка сайта Значок

Настройки Значок

Телефон Значок

Кнопка воспроизведения видео Значок

Программы Значок

Камера Значок

Калькулятор Значок

Аватар Значок

Контакты Значок

Мои файлы Значок

Музыка Значок

Эл. адрес Значок

Интернет Значок

Счет Значок

Обмен сообщениями Значок

Фотогалерея Значок

Часы Значок

Погода Значок

Самсунг Пэй Значок

Скачать Значок

Голос Значок

Календарь Значок

Калькулятор Значок

Тема Значок

Заметки Значок

Картинки Значок

Магазин приложений Галактики Значок

Видео Значок

Мои файлы Значок

видео Значок

Переводчик языков Значок

Самсунг Социальный Значок

Умный менеджер Значок

Радио Значок

Рекордер Значок

Фитнес Значок

Документ Самсунг Значок

Биксби Значок

Почтовый индекс Значок

Безопасная папка Значок

Телефон Значок

Напоминание Значок

Smart TV Значок

Планировщик Значок

Мои файлы Значок

Музыка Значок

Режим блокировки Значок

Умный переключатель Значок

Задача Значок

Часы Значок

Пусковая установка Значок

Нокс Значок

Нокс Значок

Самсунг Пасс Значок

Облако Значок

Клавиатура Samsung Значок

Вертикальный текст Значок

Сюжетный альбом Значок

Мои файлы Значок

Экран блокировки Значок

Облачный обмен Значок

Мои файлы Значок

Менеджер передач Значок

Альбом для вырезок Значок

Биксби Значок

электронные письма Значок

Сырой Значок

Аватар Значок

Поиск Значок

Аватар Значок

Аватар Значок

Аватар Значок

Аватар Значок

Эл.

адрес Значок

Фейсбук Icon

Более 8 700 анимированных значков — Lordicon

Доступ к 8 700+ анимированных значков

Lordicon — это мощная библиотека тщательно созданных анимированных значков,
готовых к использованию в цифровых продуктах, презентациях или видеороликах!

6 стилей — 1458 бесплатных значков — 7270 значков премиум-класса

Библиотека

Стиль значка

Выберите стиль значка

В Lordicon мы считаем, что движение к более четкому общению лежит в основе каждой иконки, призванной постоянно вести нас вперед.

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

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

• Процесс проектирования Lordicon
• Процесс анимации Лордикон
• Руководство по внедрению

Проводной

8 328 значков

Значки, представляющие различные характеристики, призваны быть забавными, выразительными и современными.

Плоский Линейный Контур Градиент

Исследуйте проводные значки

Система

400 значков

Значки уменьшены до минимума, чтобы обеспечить четкость и удобочитаемость даже при небольшом размере.

Контур Solid

Обзор системных значков

КАК ЭТО РАБОТАЕТ?

Выбрать.

Редактировать. Подать заявление.

Выберите значок или набор значков. Отредактируйте свойства, а затем загрузите в нескольких анимированных или статических форматах.

ОБЪЯСНИТЕЛЬ ВИДЕО

ДОСТУПНЫЕ ФОРМАТЫ

ТИПЫ ЗНАЧКОВ

Действуй. Выделяться, быть заметным.

НАВЕС ПРЕВРАЩАТЬСЯ ПЕТЛЯ АКЦЕНТЫ

Поприветствуйте самое большое семейство анимированных иконок. Эти анимации Lottie отлично работают с триггерами анимации «Hover» или «Loop».

Анимированные иконки с уникальными первым и последним кадрами. Лучше всего работает с триггерами анимации «Morph» или «Morph Two Ways».

Значки циклов предназначены для запуска с правильной динамикой анимации и с правильной скоростью при использовании триггеров анимации «Цикл».

Периодическая анимированная графика, которая добавит яркости вашему статичному дизайну. Лучше всего работает с триггерами анимации «Hover».

Исследовать библиотеку

ТРИГГЕРЫ АНИМАЦИИ

Вечеринка никогда не прекращается!

0 мс

0 мс

НАВЕДЕНИЕ ПЕТЛЯ ПРЕВРАЩАТЬСЯ БУМЕРАНГ

Наведите указатель мыши на значок, чтобы воспроизвести анимацию от первого до последнего кадра. Наведите курсор еще раз, чтобы повторить анимацию.

Бесконечный цикл анимации от первого до последнего кадра без необходимости взаимодействия.

Наведите или щелкните значок, чтобы воспроизвести анимацию от первого до последнего кадра. После перемещения или щелчка мышью анимация воспроизводится в обратном порядке.

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

Исследовать библиотеку

ИНТЕГРАЦИЯ

Используйте свои значки где угодно

От встраивания HTML-кода до ручной интеграции — существует множество способов добавления анимированных значков в ваши проекты!

ОТЗЫВЫ

Я добавляю их в новые сборки веб-сайтов, и это действительно делает их популярными, и клиентам это нравится. Я очень доволен этой покупкой, и она продолжает улучшаться!

Читать полный обзор на G2

@Lordicon9 наборов иконок — это круто. Мы используем их в @pragmaticcoders на нашем веб-сайте на основе #wordpress. Отличное соотношение цены и качества. #animatedicons #icons

Посмотреть в Твиттере

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

Читать полный обзор на G2

@Lordicon9 это отличный набор иконок. Я использовал во многих своих проектах и ​​собираюсь использовать в большем количестве из них. Категорически рекомендую всем, кому нужны красивые и простые иконки #icons #flaticons #uicons

Посмотреть в Твиттере

В основном наше внимание привлекла анимация. Они нестандартны и наверняка украсят многие сайты.

Читать полный обзор на G2

Наши клиенты были в полном восторге от наборов иконок @Lordicon9 . Красиво оформленные и отлично анимированные, это самые красивые иконки, на которые можно было надеяться! #web #ux #ui #design

Посмотреть в Твиттере

ЦЕНЫ

от 16 долларов США в месяц

• 8728 высококачественных анимированных иконок. Доступ к анимированным значкам в форматах JSON, GIF, PNG, SVG и других.
• Бесплатные ежемесячные обновления. Мы разрабатываем и анимируем новые иконки каждый день. Только в октябре мы добавили 1 новую иконку.
• Отменить в любое время. Ищете только несколько иконок? Загрузите то, что вам нужно, и отмените подписку без проблем.

обновить сейчас Узнать больше

ПОДПИСАТЬСЯ НА НОВОСТИ

Получайте новости о свежих анимированных значках, новых интеграциях и многом другом — прямо в свой почтовый ящик.

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

Присоединяйтесь к сообществу Lordicon в Discord

Предоставляя свой адрес электронной почты, вы соглашаетесь позволить нам связаться с вами, как указано в нашей Политике конфиденциальности. Если вы имеете право на определенные средства защиты в соответствии с новым Общим регламентом защиты данных (GDPR), мы рассматриваем это как согласие в соответствии со статьей 7 GDPR.