Практические рекомендации по проектированию сайтов. Разработка модульной сетки, прототипирование, отрисовка скетчей и мокапов. Советы по аудиту сайта.

1. Практический мастер-класс:
«Юзабилити. Как сделать сайт удобным»
31 мая, 2014 года
Школа Интернет-маркетинга WebPromoExperts
Александр ВЛАСОВ

2. Специалист-практик, более 7 лет в сфере интернет-маркетинга и PR.
- Web Usability (спроектировано более 100 веб-интерфейсов)
- Комплексный интернет-маркетинг (реализовано более 50 комплексных
интернете-маркетинговых кампаний)
- Продвижение в социальных медиа (разработано и внедрено более 30
SMM-кампаний)
- SEO (лично осуществлял продвижение более 20 сайтов)
В общей сложности, под руководством Александра Власова было
реализовано более 400 проектов.
Среди клиентов такие компании как:
- авиаперевозчик «Трансаэро»
- агрохолдинг «Мрія»
- Фармацевтическая компания Heel
- Страховая компания ТАС
- Медицинский центр "Илая"
- и еще более 800 клиентов из 15 стран мира.
Эксперт Первой Школы Продаж на территории СНГ White Sales School
(курс "Интернет для продаж").
Является постоянным тренером Школы бизнес-компетенций «Центр ProfiT»
(курс "Интернет-маркетинг").
Регулярно принимает участие в качестве докладчика на профильных
семинарах и конференциях.
Является членом международной ассоциации специлистов в сфере
Usability UXPA (User Experience Professionals Association) и международной
организации интерактивного дизайна Interaction Design Association (IxDA).
Александр ВЛАСОВ
Руководитель агентства Vortex
Исполнительный директор агентства MedMarketing

3. Древовидная структура сайта это совокупность всех страниц будущего сайта
выстроенных в иерархическом порядке по отношению друг к другу.
Чаще «стволом» древовидной структуры является главная страница, от
которой «ветвями» расходятся основные разделы, и на них уже
размещаются «страницы-листочки».

4. Древовидная структура может иметь несколько независимых «стволов».
Чаще основным стволом является «рабочее меню» - меню услуг (для сайта по оказанию
услуг), меню разделов товара (для каталогов и интернет магазинов), меню разделов
новостей (для новостного портала) и т.д.
Главная
Админменю
О нас Команда Новости Цены
Как нас
найти
Рабочее
меню
Направление 1 Направление 2
Услуга 1 Услуга 2
Направление 3
Для начала нужно написать все возможные разделы которые могут быть на сайте.

5. Вначале нужно разработать именно Рабочее меню.
Для этого либо вы интервьюируете заказчика либо если вы сам заказчик
пытаетесь интервьюировать сами себя.
На этом этапе нужно ответить на ряд важных вопросов:
Можно ли те или
иные
продукты/услуги
объединить в группы
Какая у вас
продуктовая
линейка
Есть ли у вас
отдельностоящие
услуги/продукты
выбивающиеся из всех
остальных групп

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

7. Например для интернет-магазина одежды такое основание для классификации
как «цвет», «материал» или «размер» будет универсальным и подходить всем
товарам. А «с длинным рукавом» или «с коротким рукавом» только для
рубашек; «с подстежкой» или «без подстежки» для верхней одежды и т.д.

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

9. Для юридических услуг:
(Проблема) возмещение ущерба
(Способ) исковое заявление в суд
(Признаки) затопление квартиры
соседом
У нас есть список услуг/категорий товаров и есть основания для их фильтрации
Для медицинского центра это может быть:
(Проблема) заболевание (астма, лечение
астмы или полипы эндометрия)
(Способ) способ лечение (спелеотерапия
или гистерорезектоскопия)
(Признаки) симптомы (затруднение
дыхания или маточные кровотечения)
Не для всех видов услуг можно выделить все три основания, это не 100%
обязательно. Выделяйте основания только если все ложится гармонично.

10. После того как вы разобрались с рабочим меню, приступаете к составлению списка
меню административного, или дополнительного.
У нас есть список всех разделов и страниц сайта
Это то разделы, которые не приносят вам непосредственно деньги и являются
факультативным, вспомогательным.
Здесь вы точно также максимально продумываете список всех возможных
разделов/страниц, которые могут быть у вас на сайте.

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

12. Требования к эксперту:
Не менее 23 лет
Более 3 лет в сфере интернет-маркетинга
Более 2 лет опыта проектирования или 3-4 лет в сфере
Хорошо разбираться в бизнес-процессах
Обладать аналитическим складом ума

13. Требования для проведения «Мозгового штурма»
Количество участников 3-4 человека
Обладать компетенциями
Строго лимитировать по времени
Установить четкий регламент
Иметь разные навыки (один в теме, другой – аналитик и т.д)

14. Карточный способ делиться на:

15. Оффлайн способ

16. http://www.optimalworkshop.com/optimalsort.htm
Optimal sort
(часть SaaS решения Optimal Workshop)

17. UserZoom
http://www.userzoom.com/online-card-sorting-studies

18. и просто без скрина http://www.simplecardsort.com/
У нас есть древовидная структура сайта
http://www.usabilitest.com/CardSorting

19. Требования к страницам
Требования к страницам (что хочет видеть там пользователь/группы
пользователей, что важно для бизнеса). Речь идет об интерфейсных
требованиях. На этом этапе вы должны найти ответы на такой вопрос:
Какую информацию необходимо разместить на
странице для удовлетворения потребностей
всех групп целевых аудиторий и безусловно
самого бизнеса.

20. Для получение списка базовых требований необходимо использовать несколько
методов.
При этом важно помнить слова Генри Форда, который очень скептично
относился к разного рода опросам покупателей:
«Если бы я спросил людей, чего они хотят, они бы попросили более быструю
лошадь».
Методы
Опрос
представителей
ЦА
Анализ сайтов
конкурентов
Изучение
потребностей
бизнеса
Интуиция,
предположение

21. Задачи Частное лицо Корпоративный
клиент
Бизнес
Узнать цены на
тонировку для
своей машины.
Очень важно Не важно Важно
Сравнить цены на
разные способы
тонирования.
Важно Не важно Важно
Узнать о способах
тонировки
Важно Не важно Не важно
Почитать о
преимуществах
пленки
Важно Важно Очень важно
Допродажа/докупк
а
Не важно Не важно Очень важно
Заказать пленку
руллонами
Не важно Очень важно Очень важно
ПРИМЕР: Страница сайта по продажам автотонировочной пленки.
У нас есть информации о том,
что должно быть размещено на каждой странице сайта

22. Пользовательский сценарий (какие варианты должны быть у пользователя
продолжения действия) – навигация по сайту, как пользователь перемещается
по сайту и какие у него вопросы на той или иной странице и куда он будет
переходить дальше.

23. Авторы книги Designing Interactive Systems – People, Activities, Contexts,
Technologies Benyon, Turner и Turner выделяют 4 типа сценариев
Сценарии
Пользовательские Концептуальные Конкретные Вариативные

24. Пользовательские сценарии (user stories)
содержат описание контекста
пользователя его внутренние
переживания, мотивацию и опыт опыт
взаимодействия в произвольной форме

25. Концептуальные сценарии (conceptual scenarios) унифицированный опыт
взаимодействия ряда пользователей, без детализации и пошаговых
подробностей.

26. Конкретные сценарии (concrete scenarios) конкретизирует пользовательские. Тут
уточняются детали, появляются четкие условия. Прописываются от третьего
лица.

27. Вариант использования (use case) – самый детальный и технически точный
сценарий взаимодействия. Отличает от остальных пошаговое описание
взаимодействия пользователя во всех возможных ситуациях.
Тип трафика Поиск (брендовое название)
Описание пользователя Покупает первый раз
Страница посещения Главная
Задача Запись на консультацию к стоматологу по имплантации
Сценарий
Шаг 1 Ознакомление с услугами клиники, переход на раздел «стоматология»
Шаг 2 Выбор услуги «имплантация» переход на соответствующую страницу.
Шаг 3 Ознакомление с условиями, запись на прием
Варианты А
Шаг 2а Ознакомление с разделов «Стоматология» переход на страницу врача.
Шаг 3а Запись к конкретному врачу на услугу «имплантация»
Вариант Б
Шаг 3б Ознакомление с условиями, переход на раздел «истории выздоровления»
Шаг 4б Изучение конкретной истории, переход на лечащего врача.
Шаг 5б Запись к конкретному врачу на услугу «имплантация»

28. Сценарии поведения зависят от
Того к какой
целевой группе
относится
пользователь;
Какой вид
источника был
использован
посетителем для
перехода на сайт
Какая страница
была первой
страницей
контакта
Степень
осведомленности
о товаре/услуги
и др.
У нас есть информация по тому как перелинкованы между собой страницы
(не путать с древовидно структурой, там только иерархия)

29. Матрица функциональности

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

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

32. Паттерны дизайна
Википедия дает такое определение:
Шаблон проектирования или паттерн (англ. design pattern) - повторяемая
конструкция, представляющая собой решение проблемы проектирования в
рамках некоторого часто возникающего контекста.
(отклонение от паттернов возможно в случае доказанной большей эффективности)

33. Паттерны делятся
Паттерн внешнего вида Паттерн расположения

34. Также паттерны делятся на
Паттерн элемента
Паттерн группы элементов
Паттерн страницы

35. Как узнать что является паттерном?
 Опирайтесь на свой опыт
 Исследуйте ряд сайтов в вашей тематике
 Посещайте специальные библиотеки паттернов
(https://developer.yahoo.com/ypatterns/)
 Пользуйтесь гайдлайнами (http://developer.android.com/design/index.html
или http://guidelines.usability.gov/)

36. 1. Веб-дизайн. Элементы опыта
взаимодействия. Дж. Гарретта.
2. Умный дизайн. Простые приемы
разработки пользовательских
интерфейсов. Джонсон Джефф
3. Разработка пользовательских
интерфейсов. Дж. Тидвелл
4. UX-дизайн. Практическое руководство по
проектированию опыта взаимодействия.
Унгер Расс, Чендлер Кэролайн
5. Проектирование веб-интерфейсов. Нейл
Тереза, Скотт Билл
6. Веб-Дизайн или не заставляйте меня
думать! Стив Круг
Читайте специализированную литературу:

37. Этапы проектирования интерфейса
Эскиз
(sketches)
Макет
(wireframe)
Дизайн
(mockups)

38. Эскизы
Набросок. Делается от руки, главное изобразить идею.

39. Макет

40. Инструменты
проектирования
Карандаш+бумага
Графические
редакторы
Специальные
программы

41. Специальные программы для проектирования
Axure
Balsamiq
Invision
Mockingbird
Notism
Froont

42. Axure

43. Balsamiq Mockups

44. Froont

45. Юзабилити-аудит сайта
Юзабилити аудит это анализ эффективности взаимодействия пользователя и
интернет ресурса в контексте достижения им целей и задач стоящих перед
владельцем данного ресурса.

46. Инструменты аудита
1. Ваши знания и навыки 2. Guidelines 3. Сайты в тематике
4. Веб-аналитика 5. Опросы пользователей
И еще десятки специальных ресурсов позволяющих проверять тот или иной компонент
http://wave.webaim.org/ - валидатор разметки
http://www.spurapp.com/ - оценка дизайна

48.  Красивая
 Стройная
 Умная
 Добрая
 Уметь слушать
 Любить детей
 Уметь готовить
 Хорошо одеваться
 Ждать с ужином мужа дома
 Быть сиротой
Чек лист хорошей жены:

49. Красота понятие очень относительное

50. …оооочень относительное!

51. Я против универсального чеклиста
Цель – продажа как услуги непрофессионалам, которые далеки от темы а
плюс любят и ценят книги типа «Кант за 30 минут», даже скорее для тех
кто идет дальше и ищет книгу «Вся философия за полчаса».

52. Универсальный чек-лист это выдумка
Каждый сайт уникален. И как раз конверсия кроется в мелочах и деталях каждого
конкретного сайта. Черт с ним хотя бы сайта одной тематики.
Тематик десятки а может и сотни.
- порталы
- интернет-магазины
- корпоративные сайты
- интранеты
- сайты визитки
- лендинг-пейджи
- сайты услуг
-и т.д.

53. - соцсети
- форумы
- он-лайн СМИ
- сообщества
- и т.д.
Порталы:

54. - ограниченное количество товаров
- однотипных товаров
- он-лайн супермаркеты
- редких товаров
- и т.д.
Интернет-магазины:

55. - юридических (опять же B2B
или В2С) а для В2В тоже
поделить на малый бизнес,
крупный бизнес, иностранных
клиентов и т.д.
- медицинских (частный
стоматолог или медицинская
клиника, клиника
ориентированная на людей с
улицы или больше работающая
со страховыми компаниями)
- и т.д.
Сайты услуг:

56. И для каждой из них ПОЛЕЗНЫЕ требования, которые реально повлияют на
конверсию будут свои. И порой они будут взаимоисключающие.
Хотите потратить время и в результате деньги? Гугл кишит
«универсальными чек-листами», введите «юзабилити чек-лист» и
развлекайтесь )

57. Почему я против универсальных чек-лист
1. Они спорны
«Важные действия
обозначены кнопками, а не
ссылками. К примеру,
«купить» или «оплатить»
должны быть кнопками, а
не ссылками». – почему?
Тысячи успешных сайтов
где наоборот, ставим
кнопку получаем падение
конверсии, ставим ссылку
все в гору.
2. Они очень субъективны
«Страница сайта не
«замусорены», присутствует
достаточное количество воздуха
на странице». – что есть мусор?
Что такое воздух на сайте и
сколько это «достаточно»?
3. Они очевидны
«Текст должен хорошо
читаться» или «Сайт должен
корректно отображаться»
или «кроссбраузерно».
Если вы не знаете что такое
«кроссбраузерность» то
пытаться самостоятельно
сделать юзабилити аудит
основываясь на
спасительных чек-листах –
утопия. Прежде освойте
базовые знания интернет-
маркетинга вообще.

58. 4. Они не конкретны
«Оптимально объем
каждой отдельной
страницы лежит в пределах
1000-5000 знаков». – ты ж
эксперт в машинах, скажи
сколько стоит мазда-3 2004
года? Ну примерно тысяч
10 – 50 плюс минус.
Спасибо! )
5. Они относительны
«Сайт должен быстро
загружаться». Скорости загрузки
страницы, где одна картинка и
абзац текст будет мгновенной, но
и толку от такой странице будет
ноль). Те общие черты которые
присущи интернет-магазину и
сайту частного психолога едва ли
можно свести к пяти ну может
десяти стоящим рекомендациям.
Я могу привести десятки сайтов
отвечающих каждому пункту
практически любого чек-листа но
при этом быть абсолютно
бестолковыми и
малоконверсионными.
6. Они волшебны
«Заголовки должны быть
«говорящими» - во как!!!
Г-О-В-О-Р-Я-Щ-И-М-И, зашел
на сайт а заголовки тебе
«Здравствуй Саша, как дела
как жена? Проходи
пожалуйста».

59. Вывод:
Этот метод хорош исключительно для поиска мелких ошибок (опечатки в
тексте, некликабельные логотипы, баги в работе), но не более.

60. Какое решение?
Экспертиза компонентов (feature inspection) - когда эксперт исследует либо
отдельные элементы сайта или определенный контекст использования, а также
список основных пользовательских сценариев.
В процессе эксперт отвечает примерно на такие вопросы как:
Как повысить
удовлетворенность
данных
пользователей в
данном контексте?
Как ускорить работу
данных
пользователей в
данном контексте?
Как ускорить работу
данных пользователей
в данном контексте?

61. 1. Настроены ли подсказки в случае опечатки или ошибки при вводе
поискового запроса?
2. На сайте одно поле поиска?
3. Распознается ли транслит?
4. Понимает ли система ввод русских слов в английской раскладке?
5. Можно ли фильтровать и сортировать результаты поиска
6. Есть ли ограничение по количеству символов при вводе в поиск?
7. Видимая длина поля поиска 25-30 знаков,
8. Предлагается ли помощь при нулевом результате?
9. Отображается ли сразу при вводе результаты?
10. Эти результаты подсвечивают к какому разделу относится найденная
страница?
Чек лист внутреннего поиска

62. Чек лист форм
1. Все обязательные поля отмечены — символ *.
2. Если полей много то они объединены в группы или разбиты на шаги.
3. Показывается на каком шаге находится пользователь и сколько осталось.
4. Текстовое многострочное поле при вводе объемного сообщения изменяет высоту либо
в правой части появляется скроллбар для просмотра всего содержимого.
5. Предусмотрены плейсхолдеры (placeholder) для полей (внутри полей выводится подсказка,
которая исчезает при внесении текста).
6. Прописан атрибут autocomplete для полей, поддерживающих это значение (ранее введенные
пользователем данные в поле).
7. Для полей, предполагающих загрузку файлов, прописан атрибут accept, определяющий тип
загружаемых документов.
8. Для полей, валидация которых проходит через регулярное выражение, прописан атрибут
pattern.
9. Для авторизованного пользователя в поля формы автоматически подставляются все известные
о посетителе данные.
10. Предусмотрены сообщения об ошибке при неудачной отправке формы (указывается какая
именно ошибка).
11. Предусмотрено сообщение об успешной отправке (отдельный url)

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

64. Александр Власов
тел.+38 (044) 36 28 911
моб.+38 (063) 296 63 92
info@vortexinter.com
http://www.facebook.com/alexandr.vlasov
http://vk.com/aleksandr.vlasov
http://twitter.com/alexvlasoff
http://ua.linkedin.com/in/vlasoff