Влияние иконок на пользовательский опыт — WAYUP Обучение на vc.ru
106 просмотров
Иконки позволяют пользователю понимать посыл без лишнего объяснения и текста. Это способ направить посетителя по сайту быстро, удобно и стильно. Сайты и приложения – это способ коммуникации компании с потенциальным клиентом. И иконки в этом играют важную роль. Как грамотный подбор или создание иконок влияет на пользовательский опыт, как его улучшить и сделать крутые визуальные эффекты – читайте далее.
Каждый человек приходит на сайт с конкретной целью. Задача веб-дизайнера заключается в том, чтобы помочь пользователю достичь этой цели легко, быстро, позитивно и с максимальной пользой для владельца сайта.
И применение иконок будет одним из простейших способов решить эту задачу. Они передают смысл без слов, помогают воздействовать на подсознание, облегчают коммуникацию. Они также позволяют сделать дизайн лаконичным – ведь не потребуется добавлять лишний текст с объяснениями и инструкциями.
Стоит понимать, что нет никаких универсальных решений в веб-дизайне – иначе специалисты были бы не нужны. Все делали бы роботы. И в зависимости от задач и специфики бизнеса будут решаться и вопросы с применением иконок. Тем не менее, мы обсудим несколько интересных идей применения иконок, которые помогут вам улучшить интерфейс сайта и пользовательский опыт.
Расширение навигации
Применение иконок для перемещения по сайту – самый распространенный и самый логичный путь их применения. Здесь важно подбирать изображения, которые понятны всем – пользователь не должен разгадывать ребусы, он обязан с первого взгляда осознавать, что означает тот или иной значок.
Особенно важно это для международных платформ. Посетитель даже без знания языка должен понять, что делать. Как минимум пройти до этапа переключения языка – чаще всего для этого используют иконки флагов или земного шара. Просто, понятно, наглядно.
Те же требования выдвигаются к сайтам и приложениям для детей – они имеют свою специфику, в том числе необходимость без слов показать все, что нужно.
При использовании иконок в навигации не обойтись без пояснительного текста. Желательно, чтобы он был кратким, не загромождал сайт. Можно сделать пояснение всплывающей строкой при наведении на иконку.
Отдельно стоит отметить “меню-гамбургер” – в среде веб-дизайна большинство специалистов его не переваривают. Но при этом используют, потому что его своеобразная иконка уже давно понятна пользователям и не требует лишних пояснений.
Альтернатива гамбургеру – мега-меню с характерной стрелочкой, указывающей на возможность разворота. Пользователь знает, что такой значок означает вложенный список ссылок и кнопок.
Эти элементы не являются необходимыми и тем более оригинальными. Но они способствуют улучшению пользовательского опыта, потому что воспринимаются привычно и понятно.
Первое правило для расширения функционала и навигации – делать так, чтобы не запутался никто. А поэтому требуется применение стандартных символов.
Визуальные эффекты
Меню и навигация в виде перечня функций в хедере – это база.
Как и боковые панели с перечнем товаров и услуг. И добавить в названия разделов иконки будет всегда отличным решением. Особенно для создания иерархии. Например, принято выделять значком корзину. И значок этот – тележка из супермаркета. Наглядно и очевидно. В корзину пользователь заходит с максимальной вероятностью, даже если еще не оформляет покупку. Чего нельзя сказать про остальные пункты меню – некоторые из них его могут вовсе не интересовать.
Очень полезны иконки на кнопках Call to Action. Их стоит подбирать в зависимости от действия, которое происходит при нажатии:
- загрузка архива или каталога – стрелочка вниз, символизирующая скачивание;
- покупка – та же тележка, как на корзине;
- бесплатный пробный период или промокод – значок подарка;
- символ проигрывателя для просмотра видео;
- телефонная трубка для заказа звонка и т.п.
Если иконки расположены сами по себе (например, в блоке преимуществ или алгоритма действий), то кроме краткого пояснительного текста можно добавить визуальные эффекты.
Формы, контакты, поддержка
Практически на каждом сайте есть форма связи или техподдержка – это может быть звонок, отправка вопроса, сообщение на e-mail, вход в учетную запись. И здесь тоже иконки находят себе применение.
Контакты – отдельная история. Невозможно представить себе этот блок без иконок. Номер телефона, электронная почта, адрес физический и юридический + знак точки на карте. Это практически обязательные элементы в виде иконок, такое негласное правило.
Ссылки на соцсети – та же ситуация.
Вы можете использовать логотипы или их упрощенные версии в виде иконок в одном стиле. Это всегда смотрится аккуратно, особенно если сайт монохромный и разноцветные эмблемы будут сильно выбиваться из концепции.
А еще стоит добавлять иконки в квизы и формы регистрации. Если есть несколько полей – сделайте там небольшие полупрозрачные значки, которые помогут заполнить графу верно. При начале заполнения обычно поле активируется и иконка пропадает для удобства.
Функции
У любого проекта есть свои особенности и уникальные черты, которые и заставляют пользователя посетить сайт. Если таковых нет, то вы обязаны как специалист отыскать отличия и создать уникальное торговое предложение. Это есть как у крупных мировых игроков, так и у маленьких стартапов.
При этом удобный сайт может быть сам по себе главным преимуществом – поверьте, есть ниши, которые просто не дошли еще до конкуренции в медиаполе и стоит внимательно изучить конкурентов и их платформы, прежде чем делать сайт.
Но вернемся к иконкам – они станут палочкой-выручалочкой, если нужно объяснить, чем занимается фирма и какие есть функции, если их несколько. Вы визуально разделяете направления, показываете наглядно разнообразие. Иконки гораздо легче воспринимаются, чем текст. Таким же образом могут работать фотографии, но не всегда можно подобрать действительно меткие изображения, которые передадут суть. А иконки можно. А еще возможна перегрузка фото на сайте – этого стоит избегать.
Если есть возможность превратить иконку в кнопку – сделайте это. Пользователи любят нажимать на всевозможные элементы и ждут от них отклика. Пусть при нажатии на иконку открывается ссылка с продуктом или поп-ап с более подробным описанием.
Кроме функций/видов услуг/типов продукции иконками можно отображать этапы получения услуги. Если алгоритм не совсем стандартный, то такой блок нужен обязательно.
И если вы сделаете его списком, то это лучше, чем простыня текста. Но если это будут красивые анимированные иконки со всплывающим пояснением, то это будет идеально.
Где взять иконки?
Современные стандарты веб-дизайна все больше стремятся к лаконичности и строгости. При этом нужно сделать не скучно, а аккуратно и изысканно. Вот как раз концепция иконок вписывается в такой сюжет идеально. Вы применяете меньше картинок и иллюстраций, вместо них ставите больше схем и значков.
Бесплатные ресурсы
Есть огромные библиотеки с иконками, где можно подобрать решения для любого проекта. И много совершенно бесплатных паков, просто выбирайте и скачивайте! Вот десяток ресурсов, которые вам точно понравятся:
- Flaticon
- The noun project
- Iconhub
- Ikonate
- Streamline symbols
- Endlessicons
- Icons8
- Hicon Pack
- Icon Park
Самостоятельное создание иконок
Мастерским подходом будет самостоятельное создание иконок под проект.
Если они будут выполнены в соответствии с брендбуком заказчика, то это высший пилотаж. Иногда это просто красиво, но иногда и необходимо – когда отрасль специфическая и найти готовый сет иконок просто невозможно. И в такой ситуации непозволительно брать значки из разных паков – это сильно испортит дизайн. И вашу репутацию.
На что обратить внимание при самостоятельном создании иконок:
- Сетка – при рисовке четко делайте разметку по клеточкам, многие даже делают это от руки в тетради.
- Геометрия – важно использовать элементы простые, но оригинальные. Не забывайте, что кроме стандартных форм бывают и те, которые мы применяем реже. Из них получаются свежие значки, которые еще не приелись.
- Пространство – как и любой элемент иконка требует воздуха. И учитывайте размеры экранов и масштабы – если пользователь уменьшит сайт до 70% и будет смотреть с телефона, то будет ли иконка читаться четко? Должна.
- Отсутствие эффектов – по той же причине не стоит злоупотреблять бликами, звездочками и прочими деталями.
Иконки становятся все более важным элементом веб-дизайна. Поэтому учитесь применять их правильно или даже создавать в зависимости от потребности. В идеале пользователь должен просто пробежаться по сайту глазами и уже понять все о навигации и о расположении нужной ему информации – это задача грамотного подбора понятных значков и их гармоничного расположения. Там все по полочкам разложит опытный наставник – с проверкой домашних заданий и самостоятельной работой для портфолио!
Материал подготовлен командой образовательной платформы WAYUP
2 курса для обучения с нуля — Academy Market
Хорошо прорисованные и подходящие по стилистике иконки способны украсить любой сайт, интерфейс, игру или приложение. Иконка может быть двухмерной, в виде простого силуэта или сложной дизайн-конструкции, а также трехмерной перспективы. Созданием иконок занимаются графические дизайнеры, иллюстраторы. Специалисты используют для этого Adobe Photoshop, IconoMaker, Adsen FavIcon, а также другие программы и приложения.
В том числе, создавать иконки можно в обычном Paint.
Создание иконок
Пиксель-арт — курс по рисованию для пиксельных игр от XYZ School
3 Месяца
16 уроков
4 768 ₽ в месяц
76 300 ₽
Подробнее
На сайт курса
4 768 ₽ в месяц
76 300 ₽
Преподаватели
Навыки
Создание иконок
Создание 2D- и 3D-анимации
Создание тайлинга текстур
Рисование фона и персонажей для пиксельных игр
Дополнение механики игры за счет дорисованных объектов
Подробнее
На сайт курса
2D PRO — иллюстрации для игр от Skillbox
4 Месяца
72 урока
4 809 ₽ в месяц
57 710 ₽
88 784 ₽
Подробнее
На сайт курса
4 809 ₽ в месяц
57 710 ₽
88 784 ₽
Преподаватели
Навыки
Создание иконок
Скетчинг
Создание интерфейсов
Подробнее
На сайт курса
Активные фильтры
(1)
Создание иконок
Все направления
Программирование
Маркетинг
Дизайн
Бизнес и управление
Аналитика
Игры
Другие профессии
Рейтинг
4.
5 и выше
4.0 и выше
3.5 и выше
3.0 и выше
Рассрочка
Только бесплатные
Длительность
Онлайн-университет
Skillbox Только
Нетология Только
GeekBrains Только
Skypro Только
SkillFactory Только
Показать все
Категория
1С-разработка Только
3D-визуализация Только
3D-моделирование Только
C#-разработка Только
Data Engineering Только
Показать все
Профессия
1С-программист Только
2D-художник Только
3D-аниматор Только
3D-визуализатор Только
3D-моделлер Только
Показать все
Учитель
Anna Fruit Только
BMB Spacekid Только
Bad Zu Только
Embacy Только
IBenji Только
Показать все
Навык
Создание иконок Только
2D-графика Только
3D-моделирование ландшафта Только
A/B-тестирование Только
Debug Только
Показать все
Инструмент
.
NET Только
.NET Framework Только
1С Только
1С:Битрикс Только
2ГИС Только
Показать все
Формат обучения
Онлайн Только
Офлайн Только
Посмотреть 2 предложения
партнеров по летной подготовке | ICON Aircraft
You Can Do This
Теперь каждый может тренироваться на ICON A5
ICON A5 — идеальный самолет, чтобы намочить ноги (буквально). Если вы уже являетесь опытным пилотом наземного самолета, вы можете научиться управлять самолетом-амфибией A5 в одной из школ-партнеров ICON всего за несколько дней и открыть для себя захватывающий мир операций на гидросамолете и приземления. Вы также увидите, как устойчивый к вращению планер ICON и датчик угла атаки делают его одним из самых безопасных и инновационных самолетов для отдыха на рынке.
Начало работы
Варианты обучения
Знакомство со спортивными полетами
Часовое знакомство со спортивными полетами на ICON A5.
Время полета: 1 час (приблизительно)
Дополнение к рейтингу гидросамолета (SES)
Получите сертификат SES и FAA на ICON A5 (доступность зависит от местоположения)
Время полета: 5 часов. (оценка)
Места расположения
ICON A5 — идеальный самолет, чтобы намочить ноги (буквально). Если вы уже являетесь опытным пилотом наземного самолета, вы можете научиться управлять амфибией A5 в нашем летном центре ICON в Тампе, штат Флорида, или в Вакавилле, Калифорния, всего за несколько дней и открыть для себя захватывающий мир операций на гидросамолете и брызг и… идти посадки. Вы также увидите, как устойчивый к вращению планер ICON и датчик угла атаки делают его одним из самых безопасных и инновационных самолетов для отдыха на рынке.
Зарезервируйте место для обучения полетам на ICON A5 в Тампе или Вакавилле, нажав кнопку ниже.
Забронировать сейчас
Партнеры
Сеть летной подготовки ICON в настоящее время расширяется.
Наши партнеры, указанные ниже, управляют A5, имеют в своем штате CFI и прошли обучение инструкторов с ICON, поэтому вы можете быть уверены, что получаете удивительные и безопасные впечатления от A5.
База гидросамолетов Джека Брауна
Центральная Флорида
База гидросамолетов Джека Брауна была основана в 1963 году Джеком Брауном. Обладая более чем 57-летним опытом обучения гидросамолетов, компания Jack Brown’s сертифицировала более 22 000 пилотов со всего мира для управления гидросамолетами и ежегодно налетала тысячи часов на гидросамолетах. ICON рада, что в парке Джека Брауна есть A5 для переходного обучения и дополнительных рейтингов SES.
Low Altitude Adventures
Новая Англия
Low Altitude Adventures является партнером ICON по летной подготовке в регионе Новой Англии, в штате которого два штатных пилота-инструктора A5. Их расположение на юго-востоке Новой Англии — отличное место для обучения полетам и наслаждения A5 с множеством мест для посадки на воду.
Помимо того, что компания Low Altitude Adventures является партнером по обучению полетам, она также предлагает членскую программу для тех, кто заинтересован в том, чтобы стать долевым владельцем ICON A5.
Atlas Aviation
Тампа, Флорида
Atlas Aviation находится на островах Дэвис в Тампе, Флорида, на том же аэродроме, что и штаб-квартира ICON на восточном побережье. Это FBO и летная школа с полным спектром услуг, которая теперь предлагает аренду и полное обучение полетам на ICON A5 для владельцев И не владельцев. Атлас специализируется на получении лицензии спортивного пилота и лицензии частного пилота. Обратите внимание, что в настоящее время все двойные занятия на A5 в этой летной школе предназначены только для наземных операций; водные операции в настоящее время не разрешены.
Giving Wings Aviation
Северный Мичиган
Независимо от того, заинтересованы ли вы в полете A5 Discovery или хотите перейти от нуля часов к карьере частного пилота, Giving Wings Aviation — отличное решение для всех, кто хочет пройти обучение полетам A5.
Они предлагают демонстрационные полеты и возможность получить дополнительный рейтинг Single-Engine Sea (SES) в ICON A5. Giving Wings, расположенный на Верхнем Среднем Западе на озере Мичиган, является одним из самых известных мест для обучения гидросамолетов в стране, и мы гордимся тем, что в их парке есть A5.
Aviator Zone (только обучение PPL, SPL)
Южная Флорида
Aviator Zone — это ваша локальная связь с небом в Южной Флориде и за ее пределами. Компания Aviator Zone, базирующаяся в аэропорту Майами Executive (KTMB), имеет опытных инструкторов по полетам на самолетах ICON (IAFI), которые помогут вам в обучении полетам с нуля до владения ICON A5.
Ориентированная на студентов-пилотов, которые уже приобрели свой собственный ICON A5, Aviator Zone предлагает среду обучения по части 61 или части 141, включая частное индивидуальное обучение. Их обучение структурировано, но гибко, чтобы обеспечить качественное обучение в соответствии с вашим графиком. В этом году (2021-2022) Aviator Zone была признана Ассоциацией владельцев воздушных судов и пилотов (AOPA) лучшей летной школой Южного региона.
Познакомьтесь с партнером ICON по обучению полетам
Узнайте больше о обучении полетам ICON
Энди Джексон
Менеджер сети летной подготовки
Энди — отставной пилот ВВС с более чем 7000 часов налета. Половину своей карьеры он провел, обучая пилотов навыкам работы в глобальных операциях, а другую половину обучая новых военных летчиков начальной подготовке. В настоящее время он руководит инструктажем, набором и развитием сети ICON Flight Training Network.
Станьте авторизованным летным инструктором ICON
Вы являетесь независимым авиадиспетчером с рейтингом гидросамолетов и хотите преподавать в классе A5? Станьте инструктором в нашей общенациональной сети с нашим недельным курсом обучения пилотов-инструкторов A5.
Стать инструктором A5
Присоединяйтесь к нашей сети партнеров по обучению полетам
Вы управляете летной школой и хотите сотрудничать с ICON для обучения клиентов работе с A5? Присоединяйтесь к сети ICON Flight Training Network и развивайте свой бизнес, обучая будущих владельцев ICON и других любителей спортивных полетов.
Партнер ICON Flight Training
Ресурсы по безопасности и обучению
Планирование полета: перегон ICON A5 из Калифорнии в Мичиган
ICON A5 — уникальный самолет с невероятными летными характеристиками. Когда дело доходит до планирования полета по пересеченной местности, необходимо помнить о нескольких особенностях безопасности. Вот взгляд на паромный рейс через Соединенные Штаты от менеджера по маркетингу ICON.
Меры безопасности при посадке с шасси в правильном положении
Казалось бы, достаточно просто: выпустить шасси, если собираетесь приземлиться на взлетно-посадочную полосу или другую подготовленную поверхность, и убрать шасси, когда приземляетесь на воду. К сожалению, правда заключается в том, что аварии и инциденты, вызванные приземлением с шасси в неправильном положении, происходят слишком часто.
Посадка ICON A5 в центре Сиэтла | The Lake Union Approach
Что позволяет A5 летать в этих условиях? Какие факторы должен учитывать пилот, чтобы обеспечить безопасное выполнение этого полета? Полет на A5 в Сиэтле может быть одним из самых уникальных полетов, которые пилот может испытать в стране, особенно если учесть, насколько погруженным в небоскребы Сиэтла заставляет чувствовать себя A5.
Полет на ICON A5 на озере Изабель
Инструктор по полетам на A5 недавно летал в одно из самых популярных мест назначения на гидросамолете недалеко от Сиэтла. Посмотрите, как она спланировала свое путешествие и подошла к новой местности.
Полеты на ICON A5 по пересеченной местности | Сиэтл — Спокан, WA
Каков радиус действия ICON A5? Это вопрос, который мы в ICON Aircraft получаем постоянно. Недавно у меня была возможность лететь на А5 из Сиэтла в Спокан, штат Вашингтон, с остановкой в международном аэропорту округа Грант.
Icon Тренировочные дизайны, темы, шаблоны и загружаемые графические элементы на Dribbble
Посмотреть приложение электронного курса
Приложение электронного курса
Посмотреть приложение электронного курса (больше экранов!)
Приложение электронного курса (больше экранов!)
Посмотреть дизайн иконки приложения EvolveAI
Дизайн иконки приложения EvolveAI
Посмотреть значок курса фитнес-тренировок
Курс фитнеса Icon
Посмотреть бизнес и тренинги — красочные плоские иконки
Бизнес и тренинги — красочные плоские иконки
Посмотреть значки искусства линии обучения
Обучающие иконки
Посмотреть дрессировку собак
дрессировка собак
View Wideboard: целевая платформа платформы электронного обучения, стр.
