Золотые правила создания успешных веб-сайтов для конференции IT2Days

Автор: Артём Кузнецов © 2008

Золотые правила создания успешных веб‐сайтов

Артём Кузнецов

www.uexpert.ru [email protected]

Uexpert.ru

http://www.uexpert.ru


mailto:[email protected]

mailto:[email protected]

http://msk.it2days.ru/

http://msk.it2days.ru/

http://www.uexpert.ru/


Золотые правила создания успешных веб‐сайтов © 2011, Uexpert Артём Кузнецов2

Об автореЧленство в профессиональных

и научных сообществах

• ACM, ACM SIGCHI, RusCHI

Образование

• Казанский Государственный Университет, факультет ВМК, диплом прикладного математика (1995)

• Школа Дизайна при Казанской Архитектурной Академии, сертификат дизайнера (1998)

• Государственная Академия Профессиональной Переподготовки и Повышения Квалификации Руководящих Работников и Специалистов Инвестиционной Сферы, государственный диплом психолога‐социолога (2004)

• CooperU, компания Алана Купера, сертификат курса Interaction Design Practicum (2006)

• CHI‐2008 международная конференция: Persona life circle и Creating good usability tests (2008) ...

• C 1999 года занимается проектированием и тестированием пользовательских интерфейсов

• 2006 ‐ 2007 создал и руководил отделом проектирования пользовательских интерфейсов компании Acronis Inc.

• 2008 создал и руководил отделом проектирования пользовательских интерфейсов компании Яндекс.

• С октября 2008 года является независимым юзабилити экспертом

Артём Кузнецов Автор проекта U expert


Программа доклада


Программа доклада

– Что такое успешный веб‐сайт

– Психологические особенности восприятия человека

– Золотые правила

– Ответы на вопросы


Что такое успешный веб‐сайт


Что такое успешный веб‐сайт

– Для чего нам вообще веб‐сайт?

– Что мы хотим от веб‐сайта?

– Какие у нас могут быть цели?

– Какие цели мы ставим перед веб‐сайтом?

– Какими качествами обладает успешный веб‐сайт?

– Как добиться этих качеств?


Что такое успешный веб‐сайт (2)

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



Успешныйвеб-сайт



Успешный веб‐сайт создаёт у пользователя позитивный опыт.



Для создания позитивного опыта необходимо учитывать особенности восприятия человека и его ожидания от взаимодействия с веб‐сайтом.



Для создания позитивного опыта необходимо учитывать особенности восприятия человека и его ожидания от взаимодействия с веб‐сайтом.


Пример взаимодействия


Пример взаимодействия

Горячие предложения?

Жаль нет Таиланда...

Кажется мне подойдёт эта форма поиска...


Пример взаимодействия (2)



Курорт не важен...Отель нужен 3* или 4*

Жаль нельзя выбрать несколько значений...

Выберу пока 3*Питание желательно трёхразовое...

Подходит...Что это?

Кажется это то, что нужно...





Я указывал 3*, странно...

Что изменить???

Золотые правила создания успешных веб‐сайтов © 2011, Uexpert Артём КузнецовАвтор: Артём Кузнецов © 2008Золотые правила создания успешных веб‐сайтов © 2010, Uexpert Артём Кузнецов12

Особенности восприятия человека





1. Особенности, связанные со зрением, видением, распознаванием и вниманием

2. Особенности, связанные с памятью

3. Особенности, связанные с мышлением

4. Особенности, связанные с процессом взаимодействия





• Наше видение настроено на восприятие структур

• Мы воспринимаем то, что ожидаем

• Чтение – это распознавание образцов

• Наше цветовое восприятие ограничено

• Наше периферийное зрение ограничено

• Наше внимание ограничено


Факторы, способствующие группировке элементов (гештальт принципы):


Факторы, способствующие группировке элементов (гештальт принципы):

• Близость

• Схожесть

• Неразрывность

• Целостность

• Симметрия

• Общее действие

• Фигура / Фон


Гештальт принцип: Неразрывность



Какие Вы видите объекты?





Гештальт принцип: Целостность
























Мы воспринимаем то, что ожидаем

На наше восприятие влияют:

•Наши цели•Контекст•Наш предыдущий опыт


Мы воспринимаем то, что ожидаем (2)


Мы воспринимаем то, что ожидаем (2)

Найдите на картинке молоток


На наше восприятие влияют цели

?



Была ли на картинке пила?

?



Была ли на картинке пила?


На наше восприятие влияет наш опыт

Страница 7

НазадДалее



Куда бы Вы нажали?

Страница 7




Куда бы Вы нажали?

Страница 7



















Чтение – это распознавание характерных деталей и образцов

Обучение чтению включает тренировку нашей визуальной системы распознавать образцы

•Буквы по характерным деталям•Сочетания букв•Слова•Сочетания слов


Чтение – это распознавание характерных деталей и образцов (2)

Внимание! Картинки на фонемешают читать этот текст!



Что здесь написано?




Что здесь написано?






Текст в левом меню плохо читается


















Наше периферийное зрение ограничено



Где ошибка?



Где ошибка?

Сообщение об ошибке


Наше периферийное зрение ограничено (2)


Наше периферийное зрение ограничено (2)

Хороший пример


3. Особенности связанные с мышлением



• Чаще всего мы думаем о задачах, а не об инструментах для их выполнения

• Мы ищем, используем и навязываем структуру всему

• Мы не любим догадываться и делать логические умозаключения

• Цикл мышления: цель – действие – оценка результата.

• Мы обучаемся быстрее, если

– Нам знаком словарь – Словарь составлен и применяется единообразно


Чаще всего мы думаем о задачах, а не об инструментах для их выполнения


Чаще всего мы думаем о задачах, а не об инструментах для их выполнения

У вас есть дебетовая карта.

Что здесь не так?

Задача:

Перевести 2000 руб. на счёт Яндекс.Деньги


Чаще всего мы думаем о задачах, а не об инструментах для их выполнения (2)

У вас есть дебетовая карта.

Что здесь не так?

Задача:

Перевести 2000 руб. на счёт Яндекс.Деньги


Чаще всего мы думаем о задачах, а не об инструментах для их выполнения (3)

«Не заставляйте меня думать!»

– Лозунг Стива Круга


















Мы не любим догадываться и делать логические умозаключения


Мы не любим догадываться и делать логические умозаключения

Этим

прекрасно

занимался

Шерлок

Холмс...


Закон Хика


Закон Хика

Чем больше вариантов выбора, тем труднее принять решение

С чего начать?


















Мы обучаемся быстрее, если нам знаком словарь. Пример ошибки.


Мы обучаемся быстрее, если нам знаком словарь. Пример ошибки.

Что это?


















Мы обучаемся быстрее, если словарь составлен и применяется единообразно


Мы обучаемся быстрее, если словарь составлен и применяется единообразно

Поиск турпродуктаПоиск туров

Это одно и то же?

Золотые правила создания успешных веб‐сайтов © 2011, Uexpert Артём КузнецовАвтор: Артём Кузнецов © 2008Золотые правила создания успешных веб‐сайтов © 2010, Uexpert Артём Кузнецов41

Золотые правила создания успешных веб‐сайтов

2 31


Золотые правила:


Золотые правила:

Бизнес‐цели веб сайтаЦелевая аудиторияПонятностьВизуальная ясностьКорректностьЕдинообразиеМинимализм и обоснованностьСовместимостьЗадачи пользователяКонтроль и свободаОбратная связьОбработка ошибок


Категории золотых правил


Категории золотых правил

• Процесс создания веб‐сайта

• Визуальные элементы, составляющие пользовательский интерфейс

• Весь сайт в целом

• Взаимодействие пользователей с веб‐сайтом


Процесс создания веб‐сайта

Золотые правила создания успешных веб‐сайтов © 2011, Uexpert Артём Кузнецов

“Алиса в стране чудес”Льюис Кэрролл

44


Иди в любую сторону, ты обязательно куда‐нибудь попадёшь! Нужно только

достаточно долго идти...

Как мне отсюда куда‐нибудь попасть. В какую

сторону мне идти?


1

45


Бизнес‐цели веб‐сайта

Сформулируйте бизнес‐цели веб‐сайта, расставьте приоритеты и донесите эту информацию до всех членов команды разработки


Постановка бизнес‐целей методом S.M.A.R.T.


Постановка бизнес‐целей методом S.M.A.R.T.

Specific – Конкретная

Measurable – Измеримая

Attainable – Достижимая

Realistic – Реальная

Time‐based – Привязанная ко времени


Приоритеты бизнес‐целей

•Высокий приоритетРеализация данной цели обязательна, без ее воплощения наличие сайта не имеет смысла.

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

•Низкий приоритет Цели, ориентированные на будущее развитие проекта: дополнительная функциональность либо охват дополнительного сектора аудитории. Реализация этих целей улучшит веб‐проект, но и без них функционирование сайта будет вполне эффективным.


2

48


Целевая аудитория

Чётко определите целевую аудиторию вашего веб‐сайта и опишите ключевые характеристики выбранных групп





1. Определите кому вы хотите предложить ваши услуги

2. Исследуйте целевую аудиторию, узнайте какие есть цели и задачи у этих людей, связанные с вашим веб‐сайтом.

3. Выделите в ней группы, схожие по целям и паттернам поведения

4. Определите, какие группы будут для вас наиболее важны

5. Определите, какие цели представителей этих групп вы хотите удовлетворить








Пользовательские исследования








Пользовательские исследования

Синтез персонажей


3

50

Визуальные элементы, составляющие пользовательский интерфейс

Понятность

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


Понятность.Связь с особенностями восприятия человека:

•Мышление: – Мы не любим догадываться и делать логические

умозаключения– Мы обучаемся быстрее, если нам знаком словарь и

словарь составлен и применяется единообразно

•Память– В отличие от компьютера наша память не идеальна



Тексты:

• Содержание текстов, заголовков, названия команд понятны пользователю

• Есть вся необходимая для задач пользователя информация

• Понятна актуальность информации, даты



Графика:

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

мнемоника, пиктограмма,

– функциональное – является ссылкой, кнопкой, запускает действие,

– передача смысла – иллюстрация содержания.

• Обозначайте картинки, по которым можно щелкать мышью



Навигация:

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

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



Формы ввода данных:

• Есть вся необходимая информация по формату и объему вводимых данных

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


Понятность. Пример ошибки.

«ОТЕЛЬ ПРЕДОСТАВЛЯЕТ СВОИМ ГОСТЯМ ТУК‐ТУК, НА КОТОРОМ ОНИ МОГУТ БЕСПЛАТНО ДОБРАТЬСЯ В ЛЮБУЮ ЧАСТЬ ГОРОДА В ОДНУ СТОРОНУ»

Из описания гостинницы


Понятность. Пример ошибки (2)


Понятность. Пример ошибки (2)

В стоимость входит:

"Выплаты SU",

“телефонная карта”

Выплаты SU

Тел. карта


4

58


Визуальная ясность

Создайте ясную структуру и иерархию всех визуальных элементов. Поддерживайте визуальное сканирование интерфейса. Минимизируйте визуальный шум.


Визуальная ясность. Пример ошибки.


Визуальная ясность. Пример ошибки.

Ноль предложений


6

60


Единообразие

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


Единообразие. Пример ошибки.


Единообразие. Пример ошибки.

Выбор из списка

Ввод “руками”


7

62


Минимализм и обоснованность

Каждый элемент интерфейса, который видит пользователь должен доказать своё право на существование


Минимализм и обоснованность. Пример ошибки



Две шапки



Две шапки

Три сообщения о том, что ничего не найдено


9

64

Взаимодействие пользователей с веб‐сайтом

Задачи пользователя

Фокусируйтесь на пользователях и их задачах.

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


Задачи пользователя. Пример ошибки


Задачи пользователя. Пример ошибки (2)


Задачи пользователя. Пример ошибки (2)Задача – сравнить


Задачи пользователя. Пример ошибки (2)

Одинаковые описания

Задача – сравнить


10

67

Взаимодействие пользователей с веб‐сайтом

Контроль и свобода

Создайте и поддерживайте у пользователя ощущение контроля за ситуацией и свободы выбора способа решения задач


Контроль и свобода. Примеры ошибок



Длительность: 7 ночей







Выбор единственного значения


Повторим золотые правила


Повторим золотые правила

Бизнес‐цели веб сайтаЦелевая аудиторияПонятностьВизуальная ясностьКорректностьЕдинообразиеМинимализм и обоснованностьСовместимостьЗадачи пользователяКонтроль и свободаОбратная связьОбработка ошибок

Антиперсонажи – Вредные советы © Артём Кузнецов, 200870

Дополнительные материалы – www.uexpert.ru

Мастер‐класс

4 мая (ср) в 19:00

"Золотые правила создания успешных веб‐сайтов"

cityclass.ru

2,5 часа

раз в месяц



http://www.cityclass.ru/course/detail/7983/

http://www.cityclass.ru/course/detail/7983/


Более 10 тренингов – www.uexpert.ru

Тренинг "Процесс проектирования пользовательских интерфейсов" — 2 дня по заявке

Тренинг "Создание концепции пользовательского интерфейса продукта" — 2 дня по заявке

А так же статьи и рассылка

Тренинг "Золотые правила создания успешных веб‐сайтов" — 1 деньпо заявке

Тренинг "Как увеличить конверсию посетителей в покупатели" — 2 дня по заявке



http://www.uexpert.ru/Uclass1-Base02.htm




http://www.uexpert.ru/Uclass1-Advanced01.htm













Дополнительные материалы – www.uexpert.ru

Отчёты "Об исследовании эффективности взаимодействия пользователей с веб‐сайтами" PDF файлы, более 100 страниц, описано более 200 ошибок, цветные иллюстрации.

Подробности →

Видео‐курс "Золотые правила создания успешных веб‐сайтов" CD‐диск, видео‐запись высокого качества, продолжительность: 2 часа, содержит 170 слайдов и запись голоса ведущего.

Заказать →



http://www.uexpert.ru/u-review1.htm










http://www.uexpert.ru/Uclass1-Base03-Video-Course.htm

http://www.uexpert.ru/Uclass1-Base03-Video-Course.htm


Клуб Успешных Проектов

Вместе сделаем Ваш проект успешным!www.uprojectclub.ru

http://www.uprojectclub.ru

http://www.uprojectclub.ru


Спасибо за внимание!

Ваши вопросы?

Дополнительная информация на сайте www.uexpert.ru

Uexpert.ru






Артём Кузнецов[email protected] www.uexpert.ru

Вместе изменим мир к лучшему!

Uexpert.ru

mailto:[email protected]?subject=

mailto:[email protected]?subject=





http://twitter.com/uexpert








http://ru-ru.facebook.com/people/Artem-Kuznetsov/100000416065697

http://ru-ru.facebook.com/people/Artem-Kuznetsov/100000416065697

http://ru.linkedin.com/pub/%D0%B0%D1%80%D1%82%D0%B5%D0%BC-%D0%BA%D1%83%D0%B7%D0%BD%D0%B5%D1%86%D0%BE%D0%B2/8/503/76a

http://ru.linkedin.com/pub/%D0%B0%D1%80%D1%82%D0%B5%D0%BC-%D0%BA%D1%83%D0%B7%D0%BD%D0%B5%D1%86%D0%BE%D0%B2/8/503/76a

http://www.slideshare.net/uexpert

http://www.slideshare.net/uexpert

http://www.youtube.com/user/UexpertRu

http://www.youtube.com/user/UexpertRu