Как работать над сайтом, чтобы не было стыдно

Бизнес и живые люди в интернете !

Андрей Столяров ux-специалист, USABILITYLAB

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

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

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

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

А потом ты заплатишь за все

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

Как принимается решение?

Целевой сегмент COOL WOW

Крутая фича, надо включитьПользователь на 60% мужчина 25-34 лет

Да поймут они все, не дураки

Я думаю распределить категории вот так

И чтобы баннер обязательно! И подсказки выплывали!

А давайте вот так!

Как используются цифры?

Повысьте конверсию!

Конверсия 1%Мы вкладываемся в рекламу и SEO!

Необходимо снизить показатель отказов

Давайте сделаем полный редизайн

А надо было цели устанавливать? Я не хочу разбираться

Наша цель - больше глубина просмотра

Статьи - контент Контент - статьи!

Дом Винчестеров

Симпатичный дом на самом деле

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

Почему это происходитНеопределенность целей

Недопонимания в процессе работы

Рисование картинок, а не взаимодействия

Погружение в детали без полной картины

Что нужно сделать до картинокОпределиться, кто потенциальные клиенты

Определиться с целями и продуктом бизнеса

Определиться, как сайт/изменения встраивается в жизнь

Определиться, как проверить успешность

Кто? Зачем? Как?

ПотребностиОкружениеОпытСтрахи

ЗадачиКонтекст

ПроблемыДостижения

Какие запросы? Как принимается решение?

Карина, 25 лет Хочет найти танцевальную студию

Живет в Москве, работает маркетологом в агентстве, зарабатывает 60 тысяч рублей в месяц. Хочет найти хобби. Цели: ●  Найти танцевальную студию недалеко от дома или работы

●  Выбрать направление, в котором не нужно профессиональных навыков

Опыт и история: ●  Занималась в детстве спортом, любит танцевать по выходным

●  Ищет студию с подругой, т.к. вместе веселее

●  Нашла сайт студии в поисковых сетях ●  Хочет получить информацию о направлениях в студии, преподавателях, расписании занятий

Страхи о ограничения: ●  Боится, что будет выглядеть неуклюже ●  Не готова переплачивать за занятия ●  Не разбирается в танцевальных направлениях

●  Боится, что время занятий будет ей не подходить

Карина, 27 лет Подбирает идеи для свадьбы

Живет в Москве, работает маркетологом в агентстве, зарабатывает 75 тысяч рублей в месяц. Выходит замуж. Цели: ●  Найти необычный и запоминающийся

элемент оформления свадьбы ●  Понять, что и в какие сроки можно сделать

Опыт и история: ●  Просматривает разные сайты с идеями для свадеб

●  В социальной сети наткнулась на компанию, которая делает надписи из дерева – загорелась идеей

●  Перешла на сайт компании ●  Хочет получить информацию о стоимости и сроках для разных вариантов, пока не определилась, что именно хочет

Страхи о ограничения: ●  В жизни буквы из дерева будут выглядеть не так же, как на картинке

●  Окажется, что что-то нельзя сделать ●  Будет очень дорого ●  Не успеют сделать индивидуальный вариант

Успех!

→

с точки зрения эксперта с точки зрения пользователя

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

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

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

Высокоприоритетные задачи

Низкоприоритетные задачи

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

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

Соотносимся с бизнесом?

ЗадачиПроблемыДостижения

ПродуктРешения

Активаторы

Передаем ли мы ценность? Как можем улучшить?

Сколько нужно золота?

Как встраиваемся в жизнь?

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

На конкретном уровнеСценарий 1: Забронировать билеты в кино на вечер

Сценарий 2: Выкупить забронированные билеты на концерт

«Хочу пригласить сегодня девушку в кино. Интересно, что идет сегодня вечером?»

Вводит в поисковую строку chudobilet.ru. Попадает на главную страницу.

На странице «Кино» ищет сеансы после 8 часов вечера.

Выбирает понравившийся фильм, переходит к заказу билетов.

Выбирает места, бронирует билеты.

«Наконец-то я накопил достаточно денег и теперь могу выкупить забронированные билеты на Би-2!»

Заходит в Личный кабинет из Избранного.

Находит в списке мероприятий концерт Би-2.

Смотрит информацию о том, как оплатить билеты с помощью Qiwi

Оплачивает билеты с помощью Qiwi

Но не все так просто

Связь

Точка входа

Сайт Получение услуги

Спасибо

?

Учитываем разные каналы?

http://www.slideshare.net/backbase/digital-banking-trends-in-2014-by-backbase

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

Как считаем?

Договорились до дизайна

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

Договорились до дизайна

Высокий приоритет Средний приоритет Низкий приоритет

Новости Список новостей, каждая из которых содержит: •  заголовок; •  дату; •  вводную. По щелчку на заголовке пользователь переходит на страницу новости.

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

Контактная информация

Рекомендуемая литература Список пар курс-семестр. По щелчку на пару выводится список дисциплин. По щелчку на дисциплину пользователь переходит на страницу со списком изданий.

ЧаВо Список нескольких самых частых вопросов и возможность перехода к странице ЧаВо.

Договорились до дизайна*

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

Axure и еще десяток программ

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

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

Те ли люди у нас на сайте?!  Информация по демографии

•  География •  Пол •  Возраст

!  Технологии •  Разрешение экрана •  Браузер •  Мобильные устройства

!  Посадочные страницы и источники •  Откуда и куда приходят

!  Контекст и поведение •  Периодичность и время посещения •  Поиск по сайту •  Популярные пути к целям •  Конверсионные воронки •  Мультиканальные последовательности

Совпадает?

Подходит?

Верные ожидания?

Как это все в реальности?

А получится ли у меня?

Вжиться в роль - найти гипотезы

Сценарии •  по какой схеме будет происходить взаимодействие; история персонажа

Ожидания •  что на каждом шаге будет ожидаться от системы; на это влияет опыт и выстроенные коммуникации

Ограничения/барьеры •  ресурсные ограничения, ментальность – «это слишком дорого», «это ненадежно – я не буду платить вперед»

Информационные запросы •  «я ищу, где подешевле – это правда дешевле?», «а доставляют ли они в Ростов-на-Дону?»

Что их на самом деле волнует?

Обращения Частые вопросы Проблемные ситуации Внутренние классификации Триггеры принятия решений Другие каналы

Хороший продажник -

половина работы

Как они в реальности работают?

Партизанское тестирование • существующие проблемы • ожидания от нового • реальные контексты

Правильное наблюдение - поведение, а не

хотелки

А что почитать?

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

Спасибо!

Ругайте по хештегу #seoconf !

Андрей Столяров facebook.com/aastolyarov

usabilitylab.ru