uxtrends
3.09K subscribers
118 photos
15 videos
1 file
380 links
Новости и инсайты из сферы UX/UI дизайна. Дизайн теория и практика, психология и просто полезные советы для фрилансеров.

Обратная связь @uxtrends_bot

Админ: @boris_ux
Download Telegram
Модель AIDA в дизайне

Если вы соприкасались с маркетингом, то наверняка уже слышали о классической модели потребительского поведения АИДА (акроним от англ. AIDA — Attention, Interest, Desire, Action — внимание, интерес, желание, действие). Суть состоит в том, чтобы в первую очередь привлечь внимание потенциального потребителя, затем вызвать его интерес, который перейдет в желание обладать товаром и, наконец, побудить к действию — покупке. Так это работает в рекламе и маркетинге. Разберем насколько эту модель можно применить в проектировке макета веб-страницы.

1. Привлеките внимание

Следуя этому правилу первый экран который увидит посетитель должен захватить его внимание. В зависимости от вашей аудитории это может быть интересное визуальное решение, захватывающий видеоклип или привлекающий внимание заголовок. Основной посыл - заинтересовать посетителя, чтобы он захотел узнать больше о вашем продукте. Чтобы попасть в яблочко важно основательно изучить вашу ЦА.

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


2. Разбудите интерес

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

расскажите о ценностях вашего сервиса/продукта
поясните в чем ваш сервис/продукт уникален для ЦА

3. Пробудите желание

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

— заставьте клиента захотеть работать с вами / владеть товаром предоставив доказательства вашей компетентности
— Вызывайте доверие



4. Совершение дейсвия

Финальная цель — преобразовать пользователя в покупателя или подписчика. Как правило это типичные СТА-кнопки призыва к действию: «В корзину», «Зарегистрироваться», «Скачать» итд. Усилить призыв к действию можно, например, предлогая специальную акцию или добавив эффект срочности, который поможет клиенту решиться на действие.

используйте четкий призыв к действию
подтолкните клиента к принятию решения

Насколько можно понять в модели AIDA нет ничего особо нового или прорывного. Сайты как когда-то печатная реклама делаются по тем же принципам основанным на поведенчиской психологии потребителя. И что самое интересное - метод работает по сей день и он довольно универсален. Следуя его сценарию можно не только настроить воронку продаж или повысить конверсию, но и улучшить удобство продукта разбив взаимодействие с пользователем на понятные этапы.

Было полезно? Дайте знать в реакциях!
👍243🔥2
Закон Паркинсона, дизайнерские шоурилы, модель AIDA в дизайне...

По традиции недельный дайджест.

— ТОП-11 принципов использования сеток в графическом и веб-дизайне

— Эффективность - Первый закон Паркинсона

— 5 полезных ресурсов для дизайнеров

— Подборка дизайнерских шоурилов

— Как продать свои услуги дороже #2

— Модель AIDA в дизайне

Если неделя была для вас полезной, поделитесь в реакциях. Для вас пустяки, а меня это даже очень мотивирует!
🔥14👍1
28 Figma-плагинов для экспорта, импорта и конвертации данных

Подборка полезных плагинов экспорта макетов Figma в сервисы для прототипирования и создания готовых сайтов. Кроме того имеются плагины с помощью которых можно конвертировать отдельные элементы дизайна (шрифты, изображения, иконки) в необходимые форматы и код. Также есть плагины для импорта разных форматов в Фигму, как например Sketch, XD, EPS, AI или даже сайтов.

>> Ссылка
👍1
Психология в дизайне — эффект «эстетика в юзабилити»

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

Первыми эффект подметили работники Hitachi Design Center в 1995 году в ходе юзабилити-исследования дизайна банкоматов. Несмотря на то, что пользователи сталкивались, с проблемами при взаимодействии с интерфейсами и с трудом справлялись с поставленными задачами они все равно положительно оценивали их функциональность.

Какой вывод можно сделать?

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

На этом все! Если было полезно, дайте знать в реакциях.
👍22
Зачем нужны гайдлайны

Для начала разберемся, что это такое? Гайдлайны ― в первую очередь, это набор правил и рекомендаций по использованию элементов дизайна. Для брендов в таком документе собрано описание отдельно взятых составляющих бренда: логотип, типографика, цвета бренда и прочие компоненты. Если речь касается платформенных гайдлайнов, для разработки цифровых продуктов, то тут основная цель – описать принципы взаимодействия и дизайн элементов интерфейса системы. Наиболее известные, из них – Apple Human Interface Guidelines для iOS и Google Material Design System для Android. Как правило, гайдлайны являются в данном случае документацией UI-кита или дизайн-системы.


Чем гайдлайны полезны при разработке продукта?

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


Почему дизайнерам стоит изучать платформенные гайдлайны?
Выделю наиболее важные пункты:

― Это поможет вам понять особенности платформы, разобраться в UX-паттернах. В особенности это полезно при разработке мобильных приложений.

― Если вы разрабатываете собственный дизайн кит, можно выстраивать компоненты на основе имеющихся платформенных гайдлайнов взяв UI элементы как шаблон.

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


Полезные материалы

material.io - гайдлайны Material Design от Google

fonts.google.com/icons - библиотека с более чем 2500 Google Material иконок

Apple Human Interface Guidelines - гайдлайны от Apple

Дизайн-системы

Polaris - Дизайн система от Shopify

Carbon - дизайн система от IBM

Fluent - дизайн система от Microsoft

Audi Design System - дизайн система от Audi

Думаю позже более подробно описать основные нюансы и отличия дизайн-систем от Apple и Google. Дайте знать в реакциях, если тема вам интересна!
👍27🔥91
Могут ли интерфейсы быть предметом искусства? В проекте «Интерфейсы 2.0» графический дизайнер Митя Безыдейный показывает нам машины для управления природой, человеком и его чувствами. Ироничные, а иногда меланхоличные гаджеты заставляют нас задуматься об окружающей действительности или просто помечтать. Как вам работы?
🔥133😁3🤩1
Сторителлинг в UX #1

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

Что такое сторителлинг?

Если переводить дословно (англ. storytelling), то это "рассказывание историй" или сказительство. В маркетинге под термином подразумевают прием, который передает нужную информацию целевой аудитории через рассказ или историю.

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

Как истории помогают бизнесу

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

Бизнесу истории помогают решить следующие задачи:

1. Создать позитивный имидж

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

2. Продать товар или услугу

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

3. Сформировать связь с клиентом

Людям всегда интересно следить за жизненными историями, наблюдать, как рождается продукт, как герой идет к успеху через тернистый путь падений и взлетов. Именно поэтому сторителлинг – эффективный инструмент для создания преданной аудитории поклонников. Будь то блог или социальные сети, рассказанные истории являются мостиком между клиентом и брендом укрепляя доверие и формируя лояльную аудиторию. 

На этом все! В следующей статье расскажу о том, из каких элементов строятся "продающие" истории и как вам это поможет в решении UX задач. Дайте знать если интересно!
🔥14👍5
Правила создания карточки товара в интернет-магазине

Карточка товара – одна из наиболее важных страниц интернет-магазина, где пользователь решает - купить товар или пойти искать дальше. Собрал для вас советы основанные на передовом опыте в проектировании e-commerce сайтов. Надеюсь, статья будет вам ориентиром при создании собственных проектов.


1. Фотографии

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

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

– Покажите как продукт выглядит в момент его непосредственного использования. Важно чтобы покупатель понял масштабы и размер товара. Если вы продаете одежду или аксессуары, обязательно покажите как они выглядят на модели

– Если у вас несколько вариантов, в галерее должны присутствовать как минимум 2-4 изображений каждого варианта 

– Если вы продаете товар с дополнительными компонентами (например электронику) покажите их также на фотографии

2. Описание товара

Немаловажно и описание товара. Очень многие пользователи досконально изучают характеристики, сравнивают разные модели из сегмента. 

– Не стоит прятать важные характеристики в таб-навигации. По опросам, проведенным Baymard Institute около четверти пользователей их не заметят.

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

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

3. Цена

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

– Отображайте перечеркнутую старую цену во время распродаж. Также можно показать скидку в процентах или суммой.

– Покажите цену за единицу товара, продаваемого в разном количестве или на разную сумму. Например, цена за грамм для продуктов питания или цену за штуку в упаковке

– Предварительно показывайте скидку или бонусы при покупке нескольких товаров или на определенную сумму

4. Доставка

Всегда отображайте информацию о доставке в карточке товара, такую как: цена доставки, предполагаемая дата доставки, а также в наличии товар или нет.

– Разместите информацию о бесплатной доставке рядом с кнопкой "положить в корзину"

– Обязательно отображайте условия возврата. Это поможет подтолкнуть покупателя к принятию решения.

5. Отзывы

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

– Предоставьте диаграмму распределения оценок в верхней части раздела отзывов

– Мотивируйте пользователей оставлять отзывы

– Частая ошибка - привязывание отзывов к вариантам товаров. Таким образом получится неравномерное количество отзывов распределенное по вариантам. Указать какой вариант купил пользователь можно в самом отзыве. А все отзывы вывести для карточки товара в целом.

Я постарался не перегружать статью, поэтому тут только основные советы для карточки товара. Если было полезно, дайте знать в реакциях!
👍32