Цветные иконки для сайта: Иконки цветной — 3,436 бесплатных иконок

Чему можно научиться у людей, которые нарисовали 30 000 иконок

• Дизайн
• 8 мин на чтение
• 3394

Перевод статьи «What Can You Learn From People Who Drew 30,000 Icons?» от создателей сервиса Icons8, которые за несколько лет его существования нарисовали более 30 000 иконок.

---

Создавая иконки на протяжении 5 лет, вы не только нарисуете их в количестве тридцати тысяч, но также узнаете о сексизме и расизме, о том, как уживаются дизайнеры и разработчики, о трендах, … и о Бэтмене.

Чего все хотят?

Многие знают (а если нет, то после этой статьи, точно будут знать), что мы рисуем иконки для популярных запросов. Можете угадать каких? Нет, это не UI иконки, не настройки, не иконки меню. Это — Бэтмен, Супермен, Человек-паук, Железный человек, Флэш и другие.

​
Такие заказы буквально заполонили нашу систему с самого начала. Если другим иконкам из числа самых популярных запросов нужно в среднем 3-4 дня, чтобы набрать необходимое количество голосов, для того чтобы их нарисовали, то этим достаточно нескольких часов.

И мы были бы не против, если бы не одна проблема: н​икто не использует эти иконки в своих проектах.

Возьмем три обыкновенных иконки из запросов:

И сравним их с загрузками иконок супергероев:

Эти три иконки даже не самые популярные среди обыкновенных. Добавим на график иконки «Параметры» и «Удалить»:

Нам пришлось принять горькую правду: л​юди голосуют за то, что им нравится, но используют то, что им нужно.

В любом случае уже нарисованные иконки не бесполезны. По крайней мере, теперь мы знаем, как Бэтмен противостоит Супермену:

Иконки тоже могут быть расистскими и сексистскими

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

Тот факт, что что-то может быть оценено по его отсутствию, так же как и по его наличию, шокировал нас сначала. Конечно, мы это не со зла.

Примечание: занимательно, что за 5 лет существования функции «Попросить нарисовать», у нас не было заказа на изображение людей с разным цветом кожи… Тысячи запросов, сотни тысяч людей, использующих иконки, а мы узнали о проблеме благодаря нашей техподдержке.

Так что мы восприняли это на свой счёт.

Не только отсутствие иконки, но и её название также может быть оскорбительным. В другой раз мы получили такое письмо: «Я не могу найти ни одной иконки с женщиной-менеджером. Вы можете мне помочь?»

Мы помогли — и сделали​ эту​ иконку:

Но внезапно всё пошло под откос. Иконка называлась «Администратор женщина» (Administrator Female). Это оскорбило женщину, которая попросила нас о помощи. Оказалось, что не у всех женщин длинные волосы, галстук является признаком сексизма, а слово «администратор» оскорбительно. Мы извинились.

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

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

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

Это не просто иконки

Это также:
~ 50 спринтов
~ 7 000 коммитов
~ Неизвестное количество чашек кофе

10 лет назад на одного дизайнера приходилось 3 продавца, но времена меняются. За последние 5 лет мы перешли от WordPress-сайта к нашему собственному с богатым выбором услуг.

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

Так что теперь в нашей команде в 3 раза больше разработчиков, чем дизайнеров. Чем сложнее мы становились, тем более неразрешимые вопросы возникали. Вот почему мы запустили чат-поддержку.

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

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

Мы все работаем над одним большим проектом: разработчики, дизайнеры, сотрудники техподдержки, маркетологи и контент-менеджеры. Самая большая проблема, с которой мы столкнулись и которая существует до сих пор, заключается в вопросе: как организовать 20+ человек для работы в одной команде. Дистанционно. Из разных уголков мира.

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

Так что мы выбрали то, что нам подходило, например, стали использовать обычные слова (такие как спринты и стендапы) нестандартным образом, а ненужное отбросили.

Мы не представляем, как называть нашу группу, состоящую из 20-ти разных профессионалов, работающих удалённо, но слово «Племя» может быть хорошим отправным пунктом. Сплочённое, полезное и забавное племя.

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

Влияют ли на нас тенденции?

Они буквально формируют Icons8.

Иконки нарисованные, начиная с 2011 года

Этот график показывает, что в течении 5 лет мы постоянно рисовали иконки, но он не показывает, ​что​ мы нарисовали.

Ноябрь, 2011. ​ Мир ещё не захвачен мобильными приложениями. Несколько лет назад, большинство существующих приложений было для десктопов, и иконки Windows 8 составляли основной доход небольшой дизайнерской компании, которая решила выпустить пакет из 153 иконок. Имя этой компании Icons8.

Сентябрь, 2012​. Стало очевидно, что все больше разработчиков переходит на мобильные платформы, соответственно, потребность в iOS иконках была выше, чем когда-либо ранее. Все иконки, которые у нас были, мы начали перерисовывать для iOS7 и продолжили каждый день добавлять новые иконки в двух форматах — Windows и iOS.

Май, 2013.​ Все больше и больше людей просило нас обратить внимание на Android. Мы так и сделали, и начали добавлять Android-версии.

Ноябрь, 2014.​ Google запустил новую версию Android — Lollipop (5). В течение нескольких месяцев мы рисовали каждую новую иконку как для старой, так и для новой версии Android, но потом решили полностью переключиться на новые. Тем не менее, старые версии все еще доступны на нашем сайте, и мы рисуем старые версии под заказ.

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

Май, 2015.​ Мы презентовали ​цветные иконки​ ​в собственном стиле. Не то чтобы мы придумали разноцветные иконки, скорее разработали свои гайдлайны для них. Это был первый раз, когда мы отошли от рекомендаций «игроков из высшей лиги». Скоро вы узнаете стоило ли оно того.

​Июль, 2015.​ Выходит Windows 10 без каких-либо г​айдлайнов,​ кроме тех, что мы сами разработали:

Март, 2016.​ Еще один решительный шаг с о​фис​-иконками. Тоже по нашим с​обственным гайдлайнам.

Честно говоря, я понятия не имею, какое офисное приложение могло бы использовать эмблему Дома Старков, но мы всё равно её нарисовали.

Мы следуем трендам. Но как на счёт наших клиентов?

Данные предоставлены s​tatista. com

Общее количество приложений, опубликованных для Apple App Store и Google Play, почти одинаково, но…

Скачиваний иконок для iOS почти в четыре раза больше, чем для Android. Почему? Выберите любую из причин:

● Сложные иконки (как пример с волком) хорошо выглядят в iOS в разных размерах, в то время как упрощенная геометрия материального дизайна Android может выглядеть странно при увеличении. Людям свойственно делать выбор, ориентируйсь на то, как выглядит увеличенное превью, а не сравнивая иконки в маленьких размерах;

● Apple устанавливает тренды и активно продвигает их, в то время как Google создает официальную коллекцию, охватывающую 90% обычных потребностей разработчиков. В некотором роде это старая война трендов и практического применения;

● Только недавно Android начал продвигать свой ма​териальный дизайн в виде рекомендаций, в то время как iOS более требовательны к «родному» виду любого приложения;

Возможно, тот факт, что iOS-приложения прибыльнее,​ заставляет людей искать более профессиональные графические активы, в то время как разработчики Android пользуются обыкновенными библиотеками.

А теперь давайте посмотрим шире:

Данные за 6 месяцев

Цветные иконки и недавно выпущенные ​офисные иконки также популярны, как иконки для Android или Windows, и становятся все более популярными каждую неделю. Однако они не следуют каким-либо трендам или гайдлайнам, кроме наших собственных.

Это значит, что людям просто нравится их вид. Почему же тогда люди выбирают версии, нарисованные по гайдлайнам?

● они придают естественный вид любому приложению
● они выглядят гармонично
● их легко заменить

Офисные иконки, конечно, не предназначены для использования только в офисных приложениях. Точно также и с iOS иконками в приложениях для iOS.

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

Выводы

Как однажды один мудрец сказал, вы научитесь большему, если будете заниматься одним делом в течение 10 лет, чем делая 10 дел по году каждое. Спорно, хотя абсолютно применимо к нам. Ведь мы узнали так много всего, просто рисуя иконки (по общему мнению) каждый день.

К сожалению, я не в состоянии описать каждую историю, которая произошла с нами на протяжении многих лет, не превращая это в электронную книгу.

Хотя, судя по нашему графику «Нарисованные иконки», у меня скоро будет 50 000 хороших причин для восполнения этого пробела.

Об авторе: Андрей Бурмистров начал работу в Icons8 как юзабилити-специалист: проводил интервью и исследования. Но он отчаянно хотел поделиться своими открытиями с профессиональным сообществом и стал писать полезные и смешные статьи (иногда и то, и другое сразу) для Icons8.

Перевод: Icons8

Бонус: 36 дорожных иконок от команды Icons8

Скачать набор иконок по ссылке.

• #дизайн
• #иконки
• #перевод
• #статья

• 2

Как я тестировал иконки на html прототипе через Толоку

В апреле 2020 в качестве площадки для проведения различных дизайнерских тестов я выбрал Яндекс. Толоку, хотя она больше заточена для разметки больших объемов данных и разных бизнес-задач. Набор готовых шаблонов для теста дизайна там скудный, но можно сделать свои, зная HTML и JS. В течение года подготовил для себя и опробовал шаблоны для популярных методов: First click, Five second, Side by side. Хочу поделиться одним из кейсов, для которого я использовал Толоку и самописный прототип.

Почему Толока и свой прототип

Есть несколько сервисов, в которых можно тестировать прототипы: Яндекс.Взгляд, Useberry, Preely, Maze. Обычно в этих сервисах тест создаётся в конструкторе или импортируется из Figma, Invision, собираются метрики. Это удобно, если нет возможности писать свой код и ограничено время.

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

У каждого сервиса на практике имеются и минусы. Например:

• в Яндекс.Взгляд мы не можем задавать охват аудитории или отправить тест только мобильным пользователям;
• в Maze интерактивные прототипы, импортированные из Фигмы, не у всех респондентов работают быстро и стабильно;
• Preely для мобильных прототипов требует у респондента установки своего приложения;
• Внутри Толоки нельзя сделать прототипы, только добавлять ссылкой или внедрять в проект через iframe.

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

О задаче

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

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

Для поиска ответа на вопрос «Кто прав?» я решил, что оптимальней будет создать кликабельный html для теста на хостинге, подключить Яндекс.Метрику или Google Analytics и привести туда исполнителей с Толоки. Тем более этот шаблон в будущем можно использовать с минимальными доработками.

Похожий опыт

Сотрудники UIE в статье 2006 года Orbitz Can’t Get A Date делились результатами своих UX-исследований. Специалисты из UIE провели два эксперимента для выяснения, как люди используют иконки. В первом эксперименте они изменили сами иконки, но оставили на прежнем месте — люди быстро адаптировались к изменениям. Затем они изменили порядок следования кнопок в интерфейсе программы, не трогая иконки. Это замедлило пользователей и, в некоторых случаях, люди не смогли выполнить свои задачи. Иконки все были видны, но пользователи не могли их найти в новых местах.

Представители UIE сделали вывод, что пользователям расположение иконки важнее, чем то, как она выглядит.

У бедолаги Морти итак много проблем помимо поиска иконок

В статье 2009 года дизайнера Крейга Кистлера «The problem with icons» звучит такой же вывод. Пользователь изучит изображение иконки, но её расположение он запомнит быстрее. Смена позиции повредит опыту пользователя больше, чем смена изображения.

Гипотеза

Проверим похожую гипотезу «пользователю важнее постоянство расположения иконки, чем её цветовое отличие от соседних» на своём интерфейсе. Так мы для себя подтвердим или опровергнем выводы UIE и соберём собственные наблюдения.

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

Если во всех заданиях более 70% респондентов найдут цветные иконки двух услуг на разных позициях быстрее однотонных, то гипотеза не подтвердится.

Структура теста

В Яндекс.Толоке создана простая форма с инструкцией и полями ввода. Для выполнения теста респонденты по ссылке переходят на внешний сайт с прототипом.

Окно задания в Яндекс.Толоке

Прототип на хостинге сделан из набора html-страниц. На странице показывается личный кабинет — это статичный файл PNG. Кликабельная разметка поверх изображения сделана из SVG фигур <rect> над каждой иконкой, обёрнутых в ссылку: <a><rect x=’…’ y=’…’ width=’…’ height=’…’ rx=’…’/></a>. У двух правильных ответов в задании к ссылке добавляются индивидуальные имена классов <a class=’answer_1′>…</a>, который отслеживает JS скрипт.

Самописный PHP и JS код заносят в текстовый файл на сервере уникальный ID сессии пользователя, затраченное время на всё задание и поиск каждой иконки. Экран пользователей записывается Вебвизором Яндекс.Метрики.

Процесс прохождения теста

Тест состоит из 3 заданий, в которых пользователю нужно найти 2 указанные услуги: Эквайринг и Зарплата. В каждом задании иконки меняют свое расположение. Одна группа испытуемых проходила тест с цветными иконками, другая — с иконками, покрашенными в фирменный синий цвет. После 3 задания люди видят проверочный код, который должны ввести в Яндекс.Толоке, чтобы подтвердить выполнение теста.

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

Некоторые наблюдения по Вебвизору

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

В тесте цветных иконок приняло участие 48 респондентов, синих — 50 респондентов. Это две независимые выборки, чтобы выполнение одного теста не влияло на восприятие другого.

Тест цветных иконок

Запомнившиеся действия некоторых респондентов:

• Респондент № 1: после выбора Эквайринга забыл про Зарплату или не понял по инструкции, что надо 2 пункта выбрать и ушел.
• Респондент № 2: путал Торговый эквайринг и Эквайринг.
• Респондент № 3: привык, что сервисы в основном ряду и на последнем задании, где Зарплата в верхнем блоке, потерялся. Искал 30 секунд, упорно не замечая 3 верхних блока, пробовал нажимать пункт «Не нашли услугу?». Подобных респондентов несколько.
• Респондент № 4: Читал внимательно инструкцию, но в первом задании много раз кликал на Торговый эквайринг, потом выбрал Зарплату и снова пытался выбрать Торговый эквайринг. В итоге 40 сек до целевого клика на Эквайринг.
• Респондент № 5 написал отзыв: «На втором вопросе ничего не происходит», но оказалось, что не вник в задачу. Случайно выполнил первое задание, а на втором такими же случайными кликами не попал в Эквайринг и закрыл тест.

Тест синих иконок

В этом тесте, как и в предыдущем, были респонденты, которые не находили в 3 задании пункт «Зарплата». Их время на нахождение 2 иконок в последнем задании:

• Респондент № 1: 16 сек. Искал пункт «Зарплата» в верхнем меню.
• Респондент № 2: 16 сек. Пробовал нажимать пункт «Не нашли услугу?»
• Респондент № 3: 16 сек. Пробовал нажимать пункт «Не нашли услугу?» и после кликал на всё подряд.
• Респондент № 4: 24 сек.

Общие наблюдения

• Случаев, где респондент кликает по всему экрану, выполняя задание, было около 4%. Так как это удаленное немодерируемое тестирование, нельзя однозначно определить причину: выполняют ли такие люди наобум задание или кликать мышкой при обдумывании задачи — это их особенность поведения.
• Среднее время выполнения теста из 3 заданий: 1:45 мин у цветных иконок, 1:32 мин у синих. Так как время в тестах с цветом оказалось не меньше, можем уже предположить, что гипотеза про важность расположения, а не цветовых отличий верна.

Разберём время до целевых действий, так как среднее время в Толоке включает в себя чтение инструкции, переход по ссылке, выполнение заданий и ввод проверочного кода.

Анализ времени

Ознакомимся с упрощёнными понятиями из математической статистики:

• Мода — время, которое чаще всего встречается в результатах теста у респондентов.
• Среднее значение — среднее арифметическое. На рост значения влияют те респонденты, кто максимально долго выполнял задание.
• Среднеквадратичное отклонение — позволяет оценить разброс времени респондентов в полученном наборе данных относительно среднего значения. Большое отклонение — время респондентов в задании сильно отличается от среднего, малое отклонение — время участников приближено к среднему.

В первом задании отклонение показывает нам, что разброс индивидуального времени участников большой. Пример: 3 сек, 14 сек, 7 сек, 21 сек. Возможно, кто-то быстро понял инструкции, кто-то дольше знакомился с содержимым экрана.

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

• Респондент № 1: 5, 7, 8 сек.
• Респондент № 2: 3, 10, 13 сек.
• Респондент № 3: 5, 13, 8 сек.

Резкое увеличение среднего времени в третьем задании связано с тем, что 27 респондентов в обоих тестах не обращали внимание на верхний ряд из 3 блоков с иконками и потратили на поиск иконки там больше 10 сек.

По моде в 1 и 3 задании кажется, что быстрее выполнялись задания с цветными иконками. Но в среднем 1 и 2 задания завершены быстрее с синими иконками. В выводах посмотрим общие графики сравнения времени респондентов.

Выводы

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

Расположение важнее цвета

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

Процент респондентов, которые быстрей выполняли аналогичное задание

По результатам 2 из 3 заданий видим, что по заданию среди однотонных иконок нужные две находились чаще быстрее, хотя до этого часть команды считала, что цветовые различия помогают ориентироваться в иконках. Косвенно мы получаем подтверждение выводам из тестов компании UIE, что важнее пользователю расположение, а не образ, отличие от других.

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

Верхние блоки — возможная слепая зона

Когда иконка появляется наверху, где три крупных блока, 27,5% из 98 респондентов теряли её, хотя блоки визуально расположены близко на общем слое. Похоже эти верхние блоки при постоянном использовании основного ряда иконок становятся слепой зоной.

Так-так, где эта последняя иконка?

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

Улучшение теста

Встречается 2 вида респондентов. Одни, не находя иконку, могут кликать в разные области прототипа, такое поведение возможно и у новых пользователей личного кабинета. Другие — кликают бесцельно в попытке угадать решение и будет ошибкой учитывать их время в таблице результов. Это можно увидеть по тепловой карте Яндекс.Метрики, но нельзя сопоставить с конкретным респондентом.