Влияние иконок на пользовательский опыт — WAYUP Обучение на vc.ru
224 просмотров
Иконки позволяют пользователю понимать посыл без лишнего объяснения и текста. Это способ направить посетителя по сайту быстро, удобно и стильно. Сайты и приложения – это способ коммуникации компании с потенциальным клиентом. И иконки в этом играют важную роль. Как грамотный подбор или создание иконок влияет на пользовательский опыт, как его улучшить и сделать крутые визуальные эффекты – читайте далее.
Каждый человек приходит на сайт с конкретной целью. Задача веб-дизайнера заключается в том, чтобы помочь пользователю достичь этой цели легко, быстро, позитивно и с максимальной пользой для владельца сайта.
И применение иконок будет одним из простейших способов решить эту задачу. Они передают смысл без слов, помогают воздействовать на подсознание, облегчают коммуникацию. Они также позволяют сделать дизайн лаконичным – ведь не потребуется добавлять лишний текст с объяснениями и инструкциями.
Стоит понимать, что нет никаких универсальных решений в веб-дизайне – иначе специалисты были бы не нужны. Все делали бы роботы. И в зависимости от задач и специфики бизнеса будут решаться и вопросы с применением иконок. Тем не менее, мы обсудим несколько интересных идей применения иконок, которые помогут вам улучшить интерфейс сайта и пользовательский опыт.
Расширение навигации
Применение иконок для перемещения по сайту – самый распространенный и самый логичный путь их применения. Здесь важно подбирать изображения, которые понятны всем – пользователь не должен разгадывать ребусы, он обязан с первого взгляда осознавать, что означает тот или иной значок.
Особенно важно это для международных платформ. Посетитель даже без знания языка должен понять, что делать. Как минимум пройти до этапа переключения языка – чаще всего для этого используют иконки флагов или земного шара. Просто, понятно, наглядно.
Те же требования выдвигаются к сайтам и приложениям для детей – они имеют свою специфику, в том числе необходимость без слов показать все, что нужно.
При использовании иконок в навигации не обойтись без пояснительного текста. Желательно, чтобы он был кратким, не загромождал сайт. Можно сделать пояснение всплывающей строкой при наведении на иконку.
Отдельно стоит отметить “меню-гамбургер” – в среде веб-дизайна большинство специалистов его не переваривают. Но при этом используют, потому что его своеобразная иконка уже давно понятна пользователям и не требует лишних пояснений.
Альтернатива гамбургеру – мега-меню с характерной стрелочкой, указывающей на возможность разворота. Пользователь знает, что такой значок означает вложенный список ссылок и кнопок.
Эти элементы не являются необходимыми и тем более оригинальными. Но они способствуют улучшению пользовательского опыта, потому что воспринимаются привычно и понятно.
Первое правило для расширения функционала и навигации – делать так, чтобы не запутался никто. А поэтому требуется применение стандартных символов.
Визуальные эффекты
Меню и навигация в виде перечня функций в хедере – это база.
Как и боковые панели с перечнем товаров и услуг. И добавить в названия разделов иконки будет всегда отличным решением. Особенно для создания иерархии. Например, принято выделять значком корзину. И значок этот – тележка из супермаркета. Наглядно и очевидно. В корзину пользователь заходит с максимальной вероятностью, даже если еще не оформляет покупку. Чего нельзя сказать про остальные пункты меню – некоторые из них его могут вовсе не интересовать.
Очень полезны иконки на кнопках Call to Action. Их стоит подбирать в зависимости от действия, которое происходит при нажатии:
- загрузка архива или каталога – стрелочка вниз, символизирующая скачивание;
- покупка – та же тележка, как на корзине;
- бесплатный пробный период или промокод – значок подарка;
- символ проигрывателя для просмотра видео;
- телефонная трубка для заказа звонка и т.п.
Если иконки расположены сами по себе (например, в блоке преимуществ или алгоритма действий), то кроме краткого пояснительного текста можно добавить визуальные эффекты.
Формы, контакты, поддержка
Практически на каждом сайте есть форма связи или техподдержка – это может быть звонок, отправка вопроса, сообщение на e-mail, вход в учетную запись. И здесь тоже иконки находят себе применение.
Контакты – отдельная история. Невозможно представить себе этот блок без иконок. Номер телефона, электронная почта, адрес физический и юридический + знак точки на карте. Это практически обязательные элементы в виде иконок, такое негласное правило.
Ссылки на соцсети – та же ситуация.
Вы можете использовать логотипы или их упрощенные версии в виде иконок в одном стиле. Это всегда смотрится аккуратно, особенно если сайт монохромный и разноцветные эмблемы будут сильно выбиваться из концепции.
А еще стоит добавлять иконки в квизы и формы регистрации. Если есть несколько полей – сделайте там небольшие полупрозрачные значки, которые помогут заполнить графу верно. При начале заполнения обычно поле активируется и иконка пропадает для удобства.
Функции
У любого проекта есть свои особенности и уникальные черты, которые и заставляют пользователя посетить сайт. Если таковых нет, то вы обязаны как специалист отыскать отличия и создать уникальное торговое предложение. Это есть как у крупных мировых игроков, так и у маленьких стартапов.
При этом удобный сайт может быть сам по себе главным преимуществом – поверьте, есть ниши, которые просто не дошли еще до конкуренции в медиаполе и стоит внимательно изучить конкурентов и их платформы, прежде чем делать сайт.
Но вернемся к иконкам – они станут палочкой-выручалочкой, если нужно объяснить, чем занимается фирма и какие есть функции, если их несколько. Вы визуально разделяете направления, показываете наглядно разнообразие. Иконки гораздо легче воспринимаются, чем текст. Таким же образом могут работать фотографии, но не всегда можно подобрать действительно меткие изображения, которые передадут суть. А иконки можно. А еще возможна перегрузка фото на сайте – этого стоит избегать.
Если есть возможность превратить иконку в кнопку – сделайте это. Пользователи любят нажимать на всевозможные элементы и ждут от них отклика. Пусть при нажатии на иконку открывается ссылка с продуктом или поп-ап с более подробным описанием.
Кроме функций/видов услуг/типов продукции иконками можно отображать этапы получения услуги. Если алгоритм не совсем стандартный, то такой блок нужен обязательно.
И если вы сделаете его списком, то это лучше, чем простыня текста. Но если это будут красивые анимированные иконки со всплывающим пояснением, то это будет идеально.
Где взять иконки?
Современные стандарты веб-дизайна все больше стремятся к лаконичности и строгости. При этом нужно сделать не скучно, а аккуратно и изысканно. Вот как раз концепция иконок вписывается в такой сюжет идеально. Вы применяете меньше картинок и иллюстраций, вместо них ставите больше схем и значков.
Бесплатные ресурсы
Есть огромные библиотеки с иконками, где можно подобрать решения для любого проекта. И много совершенно бесплатных паков, просто выбирайте и скачивайте! Вот десяток ресурсов, которые вам точно понравятся:
- Flaticon
- The noun project
- Iconhub
- Streamline symbols
- Remix icon
- Endlessicons
- Icons8
- Hicon Pack
- Icon Park
Самостоятельное создание иконок
Мастерским подходом будет самостоятельное создание иконок под проект.
Если они будут выполнены в соответствии с брендбуком заказчика, то это высший пилотаж. Иногда это просто красиво, но иногда и необходимо – когда отрасль специфическая и найти готовый сет иконок просто невозможно. И в такой ситуации непозволительно брать значки из разных паков – это сильно испортит дизайн. И вашу репутацию.
На что обратить внимание при самостоятельном создании иконок:
- Сетка – при рисовке четко делайте разметку по клеточкам, многие даже делают это от руки в тетради.
- Геометрия – важно использовать элементы простые, но оригинальные. Не забывайте, что кроме стандартных форм бывают и те, которые мы применяем реже. Из них получаются свежие значки, которые еще не приелись.
- Пространство – как и любой элемент иконка требует воздуха. И учитывайте размеры экранов и масштабы – если пользователь уменьшит сайт до 70% и будет смотреть с телефона, то будет ли иконка читаться четко? Должна.
- Отсутствие эффектов – по той же причине не стоит злоупотреблять бликами, звездочками и прочими деталями.
Иконки становятся все более важным элементом веб-дизайна. Поэтому учитесь применять их правильно или даже создавать в зависимости от потребности. В идеале пользователь должен просто пробежаться по сайту глазами и уже понять все о навигации и о расположении нужной ему информации – это задача грамотного подбора понятных значков и их гармоничного расположения. Там все по полочкам разложит опытный наставник – с проверкой домашних заданий и самостоятельной работой для портфолио!
Материал подготовлен командой образовательной платформы WAYUP
A/B-тестирование иконок: опыт DEVGAME
Компании DEVGAME, которая разрабатывает мобильные детские игры, рассказывает про свой опыт тестирования иконок для магазинов приложений.
Вы придумали креативную графику, написали интересное описание, обновили всё в приложении, а показатели падают? Без паники, не каждый креатив, даже на ваш взгляд идеальный, повысит конверсию, привлечёт больше пользователей и увеличит загрузки.
То, что вы считаете лучшим вариантом, может не понравиться аудитории. Поэтому все идеи и гипотезы нужно проверять. Как? С помощью A/B-тестирования.
Название A/B-тестирования говорит само за себя — это эксперименты с графикой и текстом. Вы загружаете несколько креативов, выбираете % пользователей для каждого варианта и ждёте результаты. Если загрузок много, то хватает 10-14 дней, но иногда результат эксперимента становится очевидным и в первую неделю. Чтобы получить более точную картину, проводите не только A/B, но и B/A, A/B/B и прочие тесты. С помощью них вы сможете проверить достоверность первых результатов. И старайтесь во время эксперимента не менять в приложении, то, что повлияет на показатели. Так вы не сможете понять, что их улучшило или ухудшило — эксперимент или другие факторы.
Но не стоит доверять тестам на все 100%, обязательно анализируйте показатели до и после эксперимента. У нас были случаи, когда креатив показывал хорошие данные при тестировании, но после его применения показатели конверсии падали.
В Google Play можно провести тестирование бесплатно в Google Play Console, раздел “Эксперименты”, а вот в App Store такой возможности нет и нужно прибегать к сторонним сервисам. Если у вас нет возможности использовать сторонние сервисы для App Store, то можно запустить последовательный тест — обновляйте по очереди креативы и смотрите на показатели. Но такой вариант подойдёт если вы не боитесь ухудшить конверсию и в случае отрицательного результата всё быстро вернёте обратно.
Не советуем тестировать креативы для одной платформы и применять выигравший вариант для другой. В Google Play и App Store разная аудитория и отличается восприятие графики, удачный креатив для одной платформы может оказаться провальным для другой. Так, мы применили новую иконку для «Три Кота» в Google Play и решили заменить и в App Store, ведь она показала отличные результаты в тесте. В итоге показатели конверсии в AppStore начали падать:
Пришлось срочно пересобрать билд и возвращать прежнюю иконку.
Не забывайте обновлять старые проекты, вы можете привлечь новых пользователей и дать вторую жизнь приложению. Так, мы в старом проекте «Фиксики», после удачного эксперимента, обновили иконку и скриншоты и получили отличный рост показателей. Проект, к тому же, благодаря обновлению, попал в очень релевантную подборку и вот, что получилось с загрузками:
А вот случай с «Юху Доктор» — мы никогда не делали ставку на иконки со второстепенными персонажами считая, что всем интересен главный герой, но решили потестировать и их. В итоге это дало отличный результат, смотрите какой рост загрузок:
Но иногда приложение так приживается в сторе, что новые креативы проигрывают имеющимся. У нас было так с «Робокар Поли» — старая иконка никак не хотела проигрывать. Мы сделали около 15 новых, долго тестировали, но пришлось сдаться и оставить ту, что была.
Если ваше приложение локализовано, то обязательно подготавливайте креативы для локалей и тестируйте их.
В разных странах культура и интересы различаются и то, что показало хорошие результаты в России, может быть невосприимчивым в другой стране.
Ну и, конечно, тестируйте праздничные креативы, об этом вы можете почитать в нашей статье «Праздничные обновления в играх». Иногда, кстати, праздничный креатив настолько нравится пользователям, что даже спустя пару недель после праздника выигрывает у обычного. У нас был такой случай — после удачного теста мы встроили новогоднюю иконку для «Три Кота», праздник прошёл, а по результатам эксперимента новая иконка всё ещё нравилась пользователям.
Что делать в такой ситуации — решать вам, можно оставить и праздничную иконку, но не забывайте следить за показателями.
Обязательно всё и всегда тестируйте, даже если вы уверены в новых креативах, пользователям может понравиться совершенно неочевидный вариант. Не забывайте, что тренды и вкусы аудитории постоянно меняются — если полгода назад было модно одно, то сегодня вы можете потерять установки и позиции из-за своей неактуальности.
Эксперименты не отнимают много сил и времени, но зато правильные креативы дают хороший рост загрузок и конверсии и шанс попасть в подборку. И не бойтесь воплощать самые странные идеи — они тоже могут сработать.
Если вы нашли опечатку — выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать [email protected].
20 284 значка опыта — бесплатно в SVG, PNG, ICO
Получите неограниченный доступ к более чем 6,9 миллионам активов
Получите неограниченное количество загрузокОпыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Сотрудник с опытом Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опытный сотрудник Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Путь опыта Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Обзор опыта Значок
Опыт Значок
Опыт Значок
Управление опытом Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт управления персоналом Значок
Опыт управления персоналом Значок
Опыт управления персоналом Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Значок
Опыт Icon
1.
700+ Customer Experience Icon Иллюстрация, безвозмездная векторная графика и клип-арт Иллюстрация- Цвет
- Фото
- İ llüstrasyon
- Vektörler
- Video
1,726
опыт работы с клиентами icon безвозмездное сток иллюстраций ве векторные графики inceleyin veya daha fazla сток гурсель ве вектор графики keşfetmek için yeni bir arama başlatın.
Ссылка:Популярные
смайлик значки рейтинга обратной связи — значок оценки качества обслуживания клиентов стоковые иллюстрациисмайлик значки рейтинга отзывов
векторов, которые можно использовать, если ифаде düz tasarımı. kavram geri bildirim hizmeti, müşteri deneyimi derecelendirme ölçeği. — значок обслуживания клиентов стоковые иллюстрацииVektör çizim simgesini ifade düz tasarımı. Kavram geri bildirim…
vektördeki doğrusal müşteri deneyimi müşteri deneyimi simgesi. логотип — значок обслуживания клиентов стоковые иллюстрацииVektördeki Doğrusal Müşteri Deneyimi Müşteri Deneyimi simgesi….
akıllı i̇ş anahat simgeleri — zamanlı, vektörler — значок обслуживания клиентов стоковые иллюстрацииAkıllı İş Anahat Simgeleri — Za manlı, Vektörler
значки тонкой линии поддержки клиентов — редактируемый штрих — значок обслуживания клиентов стоковые иллюстрацииЗначки тонкой линии поддержки клиентов — редактируемый штрих 0005 proje yönetimi çizgi vektör icons 2 set — опыт работы с клиентами icon stock illustrations
Proje Yönetimi çizgi vektör Icons 2 Set
müşteri hizmetleri ve i̇letişim bilgileri büyük ince çizgi simge seti — düzenlenebilir kontur — значок клиентского опыта стоковые иллюстрации Müşteri hizmetleri ve İletişim bilgileri büyük ince çizgi Simge.
..
Müşteri Hizmetleri — Hat Simgeleri
ир. современная графика tasarım kavramları, siyah kontur doğrusal semboller, basit anahat elemanları koleksiyonu. vektör çizgisi simgeleri — значок клиентского опыта стоковые иллюстрацииGeri bildirim çizgisi simgeleri ayarlanır. Современная графика tasarım…
садакат программы satır simgeleri. кулланилабилир вуруш. пиксель мюкеммель. мобильный и веб-сайт. hediye kutusu, sadakat kartı, para, tasarruf, pazarlama, müşteri deneyimi, ödemeler, piggy bank, promosyon, beş yıldızlı derecelendirme, kredi kartı, — значок клиентского опыта стоковые иллюстрацииSadakat Programı Satır Simgeleri. Кулланилабилир Вуруш. Piksel Mük
целевая аудитория редактируемые значки линий обводки — значок клиентского опыта стоковые иллюстрациицелевая аудитория редактируемые значки линий обводки
значок обслуживания клиентов как деловые отношения — значок обслуживания клиентов стоковые иллюстрациизначок обслуживания клиентов как деловые отношения
i̇ş kavramları simgeleri — konturlu, vektörler — значок обслуживания клиентов стоковые иллюстрации ırı simgesi — клиентский опыт значок стоковые иллюстрацииMüşteri deneyimi satırı simgesi
красочная бизнес-концепция с речевыми пузырями на синем фоне — значок клиентского опыта стоковые иллюстрацииКрасочная бизнес-концепция с речевыми пузырями на синем фоне
Отношение к клиентам редактируемые значки линии штриха — значок опыта работы с клиентами стоковые иллюстрации Ишвериш ve E-ticaret Hattı Simgeleri ve Sembolleri müşteri yorumları.
i̇nsanlar oranı, онлайн yorum, tavsiye ve 5 yıldız vermek. olumlu geri bildirim, müşteri memnuniyeti kavramları. akıllı telefon, ekranda referansları ile cep telefonu. современный düz tasarım. vektör çizimi — иконка клиентского опыта стоковые иллюстрацииMüşteri yorumları. İnsanlar oranı, online yorum, tavsiye ve 5 yıld
хороший опыт, такой как отзыв клиента — значок опыта клиента стоковые иллюстрациихороший опыт, такой как отзыв клиента
derecelendirme çizgisi simgeleri. değerlendirme, hız ürünü, 5 yıldız, ödül, olumlu geri bildirim, derecelendirme yıldızları kavramları. basit anahat sembolleri, современный doğrusal grafik elemanları koleksiyonu. vektör çizgisi simgeleri küme — значок клиентского опыта стоковые иллюстрацииDerecelendirme çizgisi simgeleri. Değerlendirme, hız ürünü, 5 yıld
значки линии обратной связи — значок клиентского опыта стоковые иллюстрациизначки линии обратной связи celemesi ve geri…
anket satırı simgeleri ayarlandı. современный анахат öğeleri, grafik tasarım kavramları.
контур, догрусальный стиль. basit semboller коллекция. vektör çizgisi simgeleri — значок клиентского опыта стоковые иллюстрацииAnket satırı simgeleri ayarlandı. Modern anahat öğeleri, grafik…
обратная связь инфографический дизайн — значок клиентского опыта стоковые иллюстрацииОбратная связь инфографический дизайн
минимальный renkli iş kavramları simgeleri — значок клиентского опыта стоковые иллюстрацииMinimal Renkli iş kavramları simgeleri
müşteri memnuniyeti, müşter я seçimi, oran uygulaması, derecelendirme yıldızları, geri bildirim kavramları. sarı yıldızlar tutan insanlar. современный düz tasarım. vektör çizimi — иконка клиентского опыта стоковые иллюстрацииMüşteri memnuniyeti, müşteri seçimi, oran uygulaması,…
целевая аудитория редактируемая серия иконок штриховой линии — иконка клиентского опыта стоковые иллюстрации Целевая аудитория редактируемая серия иконок штриховой линии bağlılık programı satırı simgeleri. дюзенленебилир контур.
пиксель мюкеммель. мобильный и веб-сайт. hediye kutusu, sadakat kartı, para, tasarruf, pazarlama, müşteri deneyimi, ödemeler, kumbara, promosyon, beş yıldızlı derecelendirme, kredi kart — значок обслуживания клиентов стоковые иллюстрации
Bağlılık Programı Satırı Simgeleri. Düzenlenebilir Kontur….
müşteri veri platformunun 3d i̇zometrik düz vektör kavramsal i̇llüstrasyon — значок клиентского опыта стоковые иллюстрации наброски значков об опросе и рейтинге — значок обслуживания клиентов стоковые иллюстрацииSimple набор контурных значков об опросе и рейтинге
значков тонкой линии поддержки клиентов — редактируемый штрих — значок обслуживания клиентов стоковые иллюстрацииПоддержка клиентов Thin Line Icons — Editable Stroke отомасён, мюштери deneyimi, mobil…
çapraz kanal vektör simgesi, omnichannel, online alışveriş. — значок обслуживания клиентов стоковые иллюстрацииÇapraz Kanal Vektör Simgesi, Omnichannel, Online Alışveriş.
veri bilim çizgi vektör simge kümesi — значок клиентского опыта стоковые иллюстрации ık Çizgisi Simgeleri müşteri yolculuğu haritası vektör simgesi, kullanıcı satın alma суречи.