Как работать над сайтом, чтобы не было стыдно Бизнес и живые люди в интернете автор - Андрей Столяров, USABILITYLAB

1. Как работать над сайтом,
чтобы не было стыдно
Бизнес и живые люди в интернете
!
Андрей Столяров
ux-специалист, USABILITYLAB

2. Головой
(уши и глаза туда входят)

3. Давай, расскажи мне про кнопки

4. Интерфейс - это лицо

5. Мне нужен твой почтовый индекс, обхват бедер
и номер автомобиля. Просто так.
А потом ты заплатишь за все

6. Я покажу тебе куда и как идти.
Там ты найдешь все, что нужно, и даже больше.

10. Как принимается решение?
Целевой сегмент
COOL WOW
Крутая фича, надо включить
Пользователь на 60%
мужчина 25-34 лет
Да поймут они все,
не дураки
Я думаю распределить
категории вот так
И чтобы баннер обязательно! И подсказки выплывали!
А давайте вот так!

11. Как используются цифры?
Повысьте
конверсию!
Конверсия 1%
Мы вкладываемся
в рекламу и SEO!
Необходимо снизить
показатель отказов
Давайте сделаем
полный редизайн
А надо было цели устанавливать? Я не хочу разбираться
Наша цель - больше
глубина просмотра
Статьи - контент
Контент - статьи!

12. Дом Винчестеров
Симпатичный дом
на самом деле

13. К чему это приводит

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

15. Что нужно сделать до картинок
Определиться, кто потенциальные клиенты
Определиться с целями и продуктом бизнеса
Определиться, как сайт/изменения
встраивается в жизнь
Определиться, как проверить успешность

16. Кто? Зачем? Как?
Потребности
Окружение
Опыт
Страхи
Задачи
Контекст
Проблемы
Достижения
Какие запросы? Как
принимается решение?

17. Карина, 25 лет
Хочет найти танцевальную студию
Живет в Москве, работает маркетологом в
агентстве, зарабатывает 60 тысяч рублей
в месяц. Хочет найти хобби.
Цели:
● Найти танцевальную студию недалеко от
дома или работы
● Выбрать направление, в котором не нужно
профессиональных навыков
Опыт и история:
● Занималась в детстве спортом, любит
танцевать по выходным
● Ищет студию с подругой, т.к. вместе
веселее
● Нашла сайт студии в поисковых сетях
● Хочет получить информацию о
направлениях в студии, преподавателях,
расписании занятий
Страхи о ограничения:
● Боится, что будет выглядеть неуклюже
● Не готова переплачивать за занятия
● Не разбирается в танцевальных
направлениях
● Боится, что время занятий будет ей не
подходить

18. Карина, 27 лет
Подбирает идеи для свадьбы
Живет в Москве, работает маркетологом в
агентстве, зарабатывает 75 тысяч рублей
в месяц. Выходит замуж.
Цели:
● Найти необычный и запоминающийся
элемент оформления свадьбы
● Понять, что и в какие сроки можно сделать
Опыт и история:
● Просматривает разные сайты с идеями для
свадеб
● В социальной сети наткнулась на
компанию, которая делает надписи из
дерева – загорелась идеей
● Перешла на сайт компании
● Хочет получить информацию о стоимости и
сроках для разных вариантов, пока не
определилась, что именно хочет
Страхи о ограничения:
● В жизни буквы из дерева будут выглядеть
не так же, как на картинке
● Окажется, что что-то нельзя сделать
● Будет очень дорого
● Не успеют сделать индивидуальный
вариант
Успех!

19. →
с точки зрения эксперта с точки зрения пользователя
Субъективная реальность

20. Субъективная реальность

21. Расстановка приоритетов
Высокоприоритетные
задачи
Низкоприоритетные
задачи

22. Расстановка приоритетов

23. Расстановка приоритетов

24. Соотносимся с бизнесом?
Задачи
Проблемы
Достижения
Продукт
Решения
Активаторы
Передаем ли мы ценность?
Как можем улучшить?
Сколько нужно
золота?

25. Как встраиваемся в жизнь?
Пользовательские сценарии -
«истории» взаимодействия:
• задачи
• действия пользователя
• контекст, в котором эти задачи выполняются
• что ему на это отвечают

26. На конкретном уровне
Сценарий 1: Забронировать билеты в кино на вечер
Сценарий 2: Выкупить забронированные билеты на концерт
«Хочу пригласить
сегодня девушку в
кино. Интересно,
что идет сегодня
вечером?»
Вводит в
поисковую строку
chudobilet.ru.
Попадает на
главную страницу.
На странице
«Кино» ищет
сеансы после 8
часов вечера.
Выбирает
понравившийся
фильм, переходит к
заказу билетов.
Выбирает места,
бронирует билеты.
«Наконец-то я
накопил
достаточно денег
и теперь могу
выкупить
забронированные
билеты на Би-2!»
Заходит в Личный
кабинет из
Избранного.
Находит в списке
мероприятий
концерт Би-2.
Смотрит
информацию о том,
как оплатить
билеты с помощью
Qiwi
Оплачивает билеты
с помощью Qiwi

27. Но не все так просто
Связь
Точка
входа
Сайт
Получение
услуги
Спасибо
?

28. Учитываем разные каналы?
http://www.slideshare.net/backbase/digital-banking-trends-in-2014-by-
backbase

29. Учитываем все точки контакта?
Как считаем?

30. Договорились до дизайна
Макет без компоновки*
Бумажный прототип
Концептуальные макеты страниц
Детализированные макеты страниц
Интерактивный (кликабельный) прототип
системы

31. Договорились до дизайна
Высокий приоритет Средний приоритет Низкий приоритет
Новости
Список новостей, каждая из которых
содержит:
• заголовок;
• дату;
• вводную.
По щелчку на заголовке пользователь
переходит на страницу новости.
Авторизация
Поля ввода номера читательского
билета и пароля и кнопка.
Подсказка, чем выгодна
авторизация и как получить
пароль.
По нажатию на кнопку переход в
персонализированное состояние.
Контактная
информация
Рекомендуемая литература
Список пар курс-семестр.
По щелчку на пару выводится список
дисциплин. По щелчку на дисциплину
пользователь переходит на страницу со
списком изданий.
ЧаВо
Список нескольких самых частых
вопросов и возможность перехода
к странице ЧаВо.

32. Договорились до дизайна*
1. Паттерны поведения пользователей
2. Общепринятые стандарты
3. Гайдлайны платформы
4. Общая стилистика интерфейса
*5. Забудьте про мифы
Axure и еще
десяток программ

33. Проверяем на людях?

35. А теперь домашнее задание

36. Те ли люди у нас на сайте?
! Информация по демографии
• География
• Пол
• Возраст
! Технологии
• Разрешение экрана
• Браузер
• Мобильные устройства
! Посадочные страницы и источники
• Откуда и куда приходят
! Контекст и поведение
• Периодичность и время посещения
• Поиск по сайту
• Популярные пути к целям
• Конверсионные воронки
• Мультиканальные последовательности
Совпадает?
Подходит?
Верные ожидания?
Как это все в реальности?

37. А получится ли у меня?
Вжиться в роль -
найти гипотезы
Сценарии
• по какой схеме будет происходить
взаимодействие; история персонажа
Ожидания
• что на каждом шаге будет ожидаться
от системы; на это влияет опыт и
выстроенные коммуникации
Ограничения/барьеры
• ресурсные ограничения,
ментальность – «это слишком
дорого», «это ненадежно – я не буду
платить вперед»
Информационные запросы
• «я ищу, где подешевле – это правда
дешевле?», «а доставляют ли они в
Ростов-на-Дону?»

38. Что их на самом деле волнует?
Обращения
Частые вопросы
Проблемные ситуации
Внутренние классификации
Триггеры принятия решений
Другие каналы
Хороший
продажник -
половина работы

39. Как они в реальности работают?
Партизанское тестирование
• существующие проблемы
• ожидания от нового
• реальные контексты
Правильное
наблюдение -
поведение, а не
хотелки

40. А что почитать?
Дональд Норман: Дизайн привычных вещей
Стив Круг: Не заставляйте меня думать
Дж. Гарретт. Элементы опыта взаимодействия
Кристина Уотке: Информационная архитектура
Алан Купер: Об интерфейсе

41. Спасибо!
Ругайте по хештегу #seoconf
!
Андрей Столяров
facebook.com/aastolyarov
usabilitylab.ru