Искусство создания интерфейса, простота, удобство и...
TRANSCRIPT
![Page 1: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/1.jpg)
Искусство создания интерфейсов
Простота, удобство и рентабельность
![Page 2: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/2.jpg)
Веб агентство StationИнтернет-маркетолог Ткачев Владислав Владимирович
Начало работы в сфере интернет-маркетинга с декабря 2010 года
• О себе: Основатель веб агентства Station, являюсь экспертом в области интернет маркетинга, разработки интерфейсов и юзабилити. Занимался SEO продвижением, контекстной рекламой, таргетированной рекламой, SMM, E-mail маркетингом, web аналитикой, управление репутацией.
• Обучил за всю карьеру более 15 человек в различных должностях в рекламном агентстве. Являюсь лектором обучающего центра cybermarketing (а так же периодически выступал на различных семинарах и бизнес конференциях в Москве и Краснодаре). Управлял 2 офисами в 2 городах (Москва и Краснодар). За спиной несколько «звёздных» стартапов начиная с разработки проекта заканчивая созданием и реализацией полной стратегии в интернете.
• Имею большой опыт в написании тех. заданий для копирайтеров ( так же являюсь специалистом в данной области) , программистов ( знаю вёрстку, понимаю основы программирования : переменные, массивы, статичные переменные, циклы, функции, методы, статичные методы и т.д. ) . Постоянно нахожусь в саморазвитие в области маркетинга. Прочитал очень много разных книг в том числе Котлера ( то есть реально понимаю разницу и принципы классического и современного маркетинга). Проводил лично юзабилити тестирования и А/Б тестирование.
• Веду , периодически, нескольких клиентов агентства.• Недостатки: Фанатик своей работы.
![Page 3: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/3.jpg)
Программа семинара
•Основные термины и элементы•Особенности и виды
контента•Процесс разработки
интерфейса•Продающие триггеры и
расширение базового функционала•Мобильный интерфейс•Поиск ошибок• Реконструкция интерфейса• Всё готово – куда двигаться
дальше? + Полезные сервисы и книги
![Page 4: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/4.jpg)
Основные термины
•Юзаб литии́ — это научно-прикладная дисциплина, занимающаяся повышением эффективности, продуктивности и удобства пользования инструментами деятельности. От эргономики юзабилити отличает заинтересованность в эффективности работы пользователя (потребителя), а не человеко-машинной системы в целом.•Опыт взаимодействия (англ. User
eXperience, UX) Данный термин широко применяется в информационных технологиях (ИТ) для описания субъективного отношения, возникающего у пользователя в процессе использования как информационной системы в целом, так и отдельной ее части (веб-сайта, приложения и пр.). Опыт взаимодействия в ИТ связан с таким понятием как юзабилити, применяемым при разработке и анализе пользовательских интерфейсов и приложений. Разработчики уделяют значительное внимание изучению и проектированию опыта взаимодействия на всех этапах создания продукта, начиная с самого раннего — этапа планирования.
![Page 5: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/5.jpg)
Разработка продающего сайта
• Разработка семантического ядра ( список ключевых запросов)• Создание списка страниц• Создание внутренней иерархии (структуры)• Разработка интерфейса• Составление контент плана• Разработка дизайна•Программирование• Верстка и наполнение сайта
![Page 6: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/6.jpg)
3 шестерёнки конверсии
•Дизайн
•Юзабилити
• Контент
+ Внутренние и внешние факторы
![Page 7: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/7.jpg)
Целевая аудитория
•Wordstat.yandex в помощь•Психологический портрет * :- возраст- уровень владения интернетом - уровень дохода- принадлежность к социальному классу• Контент глазами покупателя :- страхи- преимущества- решение проблемы - ЦЕЛИ (!)
![Page 8: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/8.jpg)
Изучение конкурентов
• Сервисы:
(!)
![Page 9: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/9.jpg)
Конверсионные сценарии
• Точка входа
• Точка выхода
• Cross sale•Иммиграция в соц. сети•Манипуляции поведением
![Page 10: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/10.jpg)
Конверсионные сценарии
![Page 11: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/11.jpg)
Конверсионные сценарии
![Page 12: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/12.jpg)
Конверсионные сценарии
![Page 13: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/13.jpg)
Конверсионные сценарии
![Page 14: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/14.jpg)
Правило 3 кликов
•Правило трёх кликов — неофициальное правило навигации на сайте в веб-дизайне. Оно предполагает, что пользователь должен иметь возможность найти любую информацию не более чем за 3 клика мышью. Основано это на том, что люди якобы расстраиваются и часто покидают сайт, если они не смогли найти нужную информацию в пределах трёх кликов. Хотя аналитических выводов мало, этой вере часто придерживаются дизайнеры. Критики же этого правила считают, что количество кликов не так важно, как польза от них
• Хлебные крошки ( покажите уровень вложенности )
![Page 15: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/15.jpg)
Динамичные хлебные крошки
![Page 16: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/16.jpg)
Динамичные хлебные крошки
![Page 17: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/17.jpg)
Сканирование страницы
• Слева направо сверху вниз (!)
•Мертвые зоны • Зона отдыха для глаз (фон)
• Анимация как убийца конверсии или эмоциональный окрас к действию (Flash)
• Боковое зрение
![Page 18: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/18.jpg)
Сканирование страницы
![Page 19: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/19.jpg)
Помехи в сознании
• Убираем все лишние элементы:- Часы- Прогноз погоды- Курс валют- Радио-Музыка (!)- Ссылки на сторонние сайты*
![Page 20: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/20.jpg)
Картинки
• Картинки до и после
• Графики
•Магия цифр
• Качество и атмосфера образов
![Page 21: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/21.jpg)
Игра образов в сознании
![Page 22: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/22.jpg)
Игра образов в сознании
15 + 6 = ?
![Page 23: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/23.jpg)
Игра образов в сознании
21
![Page 24: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/24.jpg)
Игра образов в сознании
3 + 56 = ?
![Page 25: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/25.jpg)
Игра образов в сознании
59
![Page 26: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/26.jpg)
Игра образов в сознании
89 + 2 = ?
![Page 27: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/27.jpg)
Игра образов в сознании
91
![Page 28: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/28.jpg)
Игра образов в сознании
12 + 53 = ?
![Page 29: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/29.jpg)
Игра образов в сознании
65
![Page 30: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/30.jpg)
Игра образов в сознании
75 + 26 = ?
![Page 31: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/31.jpg)
Игра образов в сознании
101
![Page 32: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/32.jpg)
Игра образов в сознании
25 + 52 = ?
![Page 33: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/33.jpg)
Игра образов в сознании
77
![Page 34: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/34.jpg)
Игра образов в сознании
63 + 32 = ?
![Page 35: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/35.jpg)
Игра образов в сознании
95
![Page 36: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/36.jpg)
Игра образов в сознании
123 + 5 = ?
(!) Я знаю: вычисления - это тяжелая работа, но финиш близок.. .
Еще немного.. .
![Page 37: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/37.jpg)
Игра образов в сознании
128
![Page 38: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/38.jpg)
БЫСТРО! ЗАДУМАЙТЕ ИНСТРУМЕНТ И ЦВЕТ?
![Page 39: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/39.jpg)
Если нет, то вы среди 2% людей, кто имеет "другое" или "нестандартное" мышление. 98% людей отвечают в этом тесте "красный молоток"
Красный молоток
![Page 40: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/40.jpg)
Знаки доверия
• Благодарственные письма с синей печатью
•Обогрев брендов и городов
• Звёздные личности и лидеры мнений
• Сертификаты и награды
![Page 41: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/41.jpg)
Инфографика (Пенктограмика)
• Главное простота и понятность- не более 10 секунд на поиск
образа
•Люди в интернете не читают
![Page 42: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/42.jpg)
Инфографика (Пенктограмика)
![Page 43: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/43.jpg)
Текст
•Продающие заголовки
•Избегайте портянок
•Шрифт без засечек• Размер шрифта(!)
![Page 44: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/44.jpg)
Social proof
• Соци льное доказ тельствоа́ а́ (от англ. Social proof), или информационное социальное влияние — психологическое явление, происходящее, когда некоторые люди не могут определить предпочтительный способ поведения в сложных ситуациях. Предполагая, что окружающие лучше знакомы с ситуацией, такие люди считают их поведение предпочтительным. Это явление часто используется для сознательной манипуляции поведением других• Кнопки соц. сетей ( посоветоваться с
друзьями )
![Page 45: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/45.jpg)
Видео отзывы
• Более высокий уровень доверия• Разработка сценария•Живая речь•Показывать преимущества•Особенности эксплуатации•Длина ролика около 2 мин.
![Page 46: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/46.jpg)
Персонализированная обратная связь
• Более 70% обрыва конверсии происходят на телефонной линии
• Возможность личного звонка сотруднику
•Показываем лица и стаж
• Видео прямого эфира из офиса (!)
![Page 47: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/47.jpg)
Немного статистики
![Page 48: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/48.jpg)
![Page 49: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/49.jpg)
Что делают пользователи пока ждут загрузку страницы?
![Page 50: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/50.jpg)
Интерфейс
![Page 51: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/51.jpg)
Виды страниц
• : Навигационные
• : Информационные
• : Транзакционные
• : Страницы дополнительного обогрева ( о компании и т.д. )• Технические страницы в интерфейсе
![Page 52: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/52.jpg)
Шапка сайта
•Логотип (ссылка на главную страницу)
•Description ( краткое описание деятельности ) не SEO
• Контакты
• Региональная привязка
• Возможность добавить сайт в закладки•Фиксация ? + корзина
![Page 53: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/53.jpg)
Горизонтальное меню и технические страницы•Не более 7 блоков
• Только тех. страницы
• Выпадающее меню (!)
•Поиск
![Page 54: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/54.jpg)
Поиск по сайту
• Конверсия до 30%•Даёт подсказку какого контента не
хватает• Что стоит учитывать:- Релевантность - Подсказки- Картинки
![Page 55: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/55.jpg)
Вертикальное меню
• Выравниваем шрифт по левому краю•Нежелательно чтобы блок меню
выходил за границы первого экрана• Выстраиваем товары по
приоритету*• Возможно использование
инфографики•Деление по группам с помощью
выпадающих меню
![Page 56: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/56.jpg)
Блок новости
• Важна дата публикации•Писать тематические статьи•Обзор новинок• PR
- Является знаком доверия ( ! )
![Page 57: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/57.jpg)
Главная страница
• Учитывайте серфинг по сайту• Баннер с акциями или УТП• Разделение основных конверсионных
сценариев• Текстовый блок приветствия•Наши партнёры•Форма захвата
![Page 58: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/58.jpg)
О компании
•Показываем лица
• Сертификаты и награды
•История и цифры
• PR-активность
• Видео приветствие
![Page 59: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/59.jpg)
Доставка и оплата
•Показываем все способы доставки ( логотипы партнёров или сервисов)• Указывать способы = сроки доставки• Самовывоз?• Структура информации и якоря•Интерактивная форма- Не показываем лишнее
![Page 60: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/60.jpg)
Доставка и оплата
![Page 61: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/61.jpg)
Доставка и оплата
Самую важную информацию поднимайтекак можно выше !
![Page 62: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/62.jpg)
Страница контакты
• Реквизиты юр. лица•Интерактивная карта Google
или Яндекс•Отображаем все офисы на
карте•Дополнительная ссылка на
схему проезда•Фото местности
![Page 63: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/63.jpg)
Навигационный раздел
•Матрица• Кратковременная память •Для ИМ – возможность класть
в корзину
• Смотрят первые 3 - 4 страницы
![Page 64: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/64.jpg)
Навигационный раздел
•Используйте сетку- будьте внимательны к мелочам
![Page 65: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/65.jpg)
Фильтры поиска товара
• Убираем конфликтные параметры
•Делаем параметры понятными для целевых посетителей
• Выводим в пределы первого экрана (!)
• Часть параметров можно скрыть в слои
• Ранжируем по цене
![Page 66: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/66.jpg)
Карточка товара
•Правило золотого сечения•Описание с чёткими образами •Обогрев бренда• Технические характеристики•Наличие и срок доставки•Цена и кнопка купить с
эмоциональным окрасом•Отзывы• Гарантия и сертификаты• Видео обзор • ЗD съемка товара•Для некоторых продуктов важна
история
![Page 67: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/67.jpg)
Карточка товара
![Page 68: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/68.jpg)
Цена
•Преимущество или деление
![Page 69: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/69.jpg)
Корзина
•Простая форма заполнения заказа – макс. 3 шага• Возможность сравнения
товаров• Pop-up баннер (дожимаем
обрывы конверсионных сценариев) для тех кто застрял на втором шаге*• Рекомендуемые товары
![Page 70: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/70.jpg)
Landing page
• Учитываем скролинг•Минимум 3 формы захвата с
различными УТП• Самое сладкое наверх• Выстраиваем скользкую горку• Трудно сделать под большой
объём товара•По вертикале никто не скролит !
![Page 71: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/71.jpg)
Ошибки в навигации
![Page 72: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/72.jpg)
Ошибки в навигации
![Page 73: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/73.jpg)
Ошибки в навигации
![Page 74: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/74.jpg)
Секреты рентабельности интерфейса
![Page 75: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/75.jpg)
Триггеры и конверсионные формы захвата
• Временной триггер•Интрига цены (перечёркиваем старую цену)•Действие за действие ( для сервисов и
сайтов знакомств)•Up-sell ( 3 вещи по цене 2 )• Собираем награды ( коллекционированием
и тщеславие )• Триггер будильник (!)
•Избегайте клише•Делайте формы захвата простыми•Подарок не скидка
![Page 76: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/76.jpg)
УТПЧто стоит учитывать при разработке
Адекватность
Удовлетворенность потребности
Доступность и простота
Как искать?Голоса целевой аудитории
Явное всегда на поверхности
Аудитория – продукт, продукт - аудитория
Ошибка – отсутствие тестирования
Специфику ниши бизнеса
![Page 77: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/77.jpg)
Расширяем функционал
•Online-консультант (Redhelper)
• Callbackhunter и Lptraker
• Pop-up баннеры (Стимулируем продажи в оффлайне)
• Закладка вверху страницы
![Page 78: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/78.jpg)
• Грамотное юзабилити способно поднять конверсию до:
Конверсия и юзабилити
![Page 79: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/79.jpg)
Интерактивность в помощь SEO оптимизатору
•Интерактивная игра (!)
• Кнопка добавить в избранное
•Презентации
•Облако тэгов (!)
![Page 80: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/80.jpg)
Мобильный интерфейс
![Page 81: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/81.jpg)
Мобильный интерфейс
![Page 82: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/82.jpg)
ЦА мобильного интернета
![Page 83: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/83.jpg)
ЦА мобильного интернета
![Page 84: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/84.jpg)
ЦА мобильного интернета
![Page 85: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/85.jpg)
Мобильный интерфейс• Важно! Учитывать «Зону большого пальца»
![Page 86: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/86.jpg)
• Текст в слайдере. Скролить вниз удобно для пользователя. Листать страницы в сторону — нет
Мобильный интерфейс
![Page 87: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/87.jpg)
Мобильный интерфейс•Игнорирование «Закона Фиттса» - от
увеличения кнопки не зависит повышение её эффективности
![Page 88: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/88.jpg)
Мобильный интерфейс
•Маленький радиус нажатия - Минимальная сенсорная область 7мм x 7мм. Средняя ширина пальца взрослого – 25 мм. Уберегите пользователя от случайного нажатия на другой элемент в вашем интерфейсе. Между элементами ставьте зазор в 2 мм.
![Page 89: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/89.jpg)
Мобильный интерфейс
•Несколько сайд-баров - Очевидная ошибка при проектировке приложения — размещение основной навигации в разных местах. Все пункты меню должны быть в одном месте.
![Page 90: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/90.jpg)
Мобильный интерфейс
• Выдача ошибок по ходу заполнения поля - Правильно говорить об ошибке пользователю тогда, когда он закончил ввод и вышел из поля. О незаполненных полях говорим при попытке отправки.
![Page 91: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/91.jpg)
Мобильный интерфейс
•Отсутствие иерархии в контенте - При создании макета думайте о том, что пользователь ищет и как быстро он сможет это найти. Используйте подсказки и информативные короткие тезисы. Расставляйте правильную иерархию в содержании, а информативные подсказки ставьте в начале текста.
![Page 92: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/92.jpg)
Мобильный интерфейс
•Нечитабельность - Правильная длина текстовых линий и выдержанный интерлиньяж (расстояние между строками) помогут пользователю с легкостью перемещаться по контенту.
![Page 93: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/93.jpg)
Мобильный интерфейс
• Берём только самое важное• Технические страницы в красной
зоне• Возможность листать баннер
(Свайп)• Конверсионные сценарии в
пределах большого пальца•Основное меню ( Свайп от края
экрана)•Проверяем через google
webmaster•Проверяем на фокус группе
![Page 94: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/94.jpg)
Ищем ошибки
![Page 95: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/95.jpg)
Web аналитика
•Используем web vizor и тепловую карту кликов• Следим за трендами и
конкурентами (!)• Замеряем количество и частоту
обращений к справке•Изучаем разрешение экрана и
браузеры• Время - основной показатель
достижения цели•% отказа
![Page 96: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/96.jpg)
Сложности и ошибки:
•Позиционирование
•Образ вампир
•Мёртвая зона
• Зарубежная практика и менталитет
• Сила бренда
Решение = 4Q опросы
![Page 97: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/97.jpg)
Реконструкция старого сайта
• Структура и SEO
•Обрисовываем интерфейс пальцами
•Опасность редизайна (особенно для сервисов)
• Учитывайте развитие сайта или сервиса
![Page 98: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/98.jpg)
Разрабатываем контент план
•Подача информации мужчинам и женщинам
•Посадочная страница в 3 экрана
• Виды контента и каналы коммуникаций целевой аудитории ( аудио подкасты )
![Page 99: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/99.jpg)
А/Б тестирование
•Дробно факторное тестирование•Многофакторное тестирование
Революция интерфейса
![Page 100: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/100.jpg)
Юзабилити тестирование
• Тестируем на фокус группах от 8 до 12 человек•Несколько сценариев и целей• Замеряем время и фиксируем
ошибки• Все мысли вслух• Вопросы о хобби ))
•Даёт возможность увидеть сайт глазами клиентов•Поиск мертвых зон
Эволюция интерфейса
![Page 101: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/101.jpg)
Что почитать?
Стив Круг «Не заставляйте меня думать»
Джесс Гаррет«Элементы опыта взаимодействия»
![Page 102: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/102.jpg)
Какой бриф такой и креатив
![Page 103: Искусство создания интерфейса, простота, удобство и рентабельность](https://reader036.vdocuments.pub/reader036/viewer/2022062401/58846f921a28abbd308b7c6d/html5/thumbnails/103.jpg)
Спасибо!
Ткачев Владиславhttp://im-st.ru/https://vk.com/[email protected]://vk.com/imp29lshttps://www.facebook.com/impools.station
8(499)390-99-298(926)991-19-29