Проектирование сайтов

1. Проектирование и UX

2. 1. Что такое UX?
2. Что такое проектирование и зачем оно нужно?
3. Этапы проектирования продукта:
• сбор информации
• проектная аналитика
• информационная архитектура
• скетчи и прототипы
4. Паттерны проектирования
5. Презентация прототипа
6. Техническое задание
7. Сопровождение прототипов
СОДЕРЖАНИЕ ДОКЛАДА

3. UX (User Experience, опыт взаимодействия) – это ощущения,
возникающие у человека при непосредственном взаимодействии с
объектами окружающего мира. (Википедия)
ЧТО ТАКОЕ UX

4. ИЗ ЧЕГО СОСТОИТ UX

5. Проектирование – неотъемлемый этап создания любого
программного продукта (и не только).
ЧТО ТАКОЕ ПРОЕКТИРОВАНИЕ

6. Какие цели стоят перед продуктом и каким образом
они будут реализованы?
Как продукт будет выглядеть и работать?
Для кого создается продукт?
ЗАЧЕМ НУЖНО ПРОЕКТИРОВАНИЕ
Как продукт будет выглядеть и работать?
Для кого создается продукт?

7. Значительно повышена гарантия достижения
ожидаемого результата
ЗАЧЕМ НУЖНО ПРОЕКТИРОВАНИЕ

8. Экономит время и деньги
на дальнейших этапах разработки
ЗАЧЕМ НУЖНО ПРОЕКТИРОВАНИЕЗАЧЕМ НУЖНО ПРОЕКТИРОВАНИЕ

9. ЭТАПЫ ПРОЕКТИРОВАНИЯ
1. Сбор информации о будущем продукте (сбор требований –
определяем бизнес-задачи и ожидания, изучаем ЦА)
2. Проектная аналитика
• Конкурентный анализ
• Персонажи и user-stories
3. Информационная архитектура
4. Разработка интерфейса (скетчей, прототипов)
5. Разработка ТЗ

10. СБОР ИНФОРМАЦИИ О БУДУЩЕМ
ПРОДУКТЕ

11. СБОР ТРЕБОВАНИЙ СО СТОРОНЫ
БИЗНЕСА
Письменный брифингИнтервью с представителями
заказчика

12. СБОР ТРЕБОВАНИЙ СО СТОРОНЫ
БИЗНЕСА
1. Что заказчик думает о своем бизнесе в целом?
2. С какой целью заказчик разрабатывает сайт?
3. Какие ожидания у заказчика от будущего сайта?
4. Что заказчик думает о своих клиентах (кто они, их цели,
мотивы, страхи)?
5. Что заказчик думает о своих конкурентах?

13. СБОР ТРЕБОВАНИЙ СО СТОРОНЫ
ПОЛЬЗОВАТЕЛЕЙ
Интервью с пользователями
Опрос, анкетирование
«Полевые исследования» (наблюдение)

14. 1. Общение с экспертами со стороны заказчика
2. Общение с экспертами со стороны компании –верстальщики,
программисты
3. Изучение предметной области
СБОР ТРЕБОВАНИЙ СО СТОРОНЫ
ТЕХНОЛОГИЙ

15. ГЛАВНОЕ ПРАВИЛО ИССЛЕДОВАНИЙ
Важна каждая мелочь, озвученная заказчиком,
поэтому только открытые вопросы.

16. ГЛАВНОЕ ПРАВИЛО ИССЛЕДОВАНИЙ
Закрытый вопрос: Наш продукт прежде всего будет интересен
мужскому полу?
Наводящий вопрос: Исходя из этого можно предположить,
что продукт будет интересен только мужскому полу?
Открытый вопрос: Кому будет интересен наш продукт?

17. КОНКУРЕНТНЫЙ АНАЛИЗ

18. КОНКУРЕНТНЫЙ АНАЛИЗ
Попутно можем обнаружить интересные референсы.

19. Персонажи – прототипы типичных представителей ЦА, которые
создаются с целью определений основных потребностей
пользователей будущего продукта.
РАЗРАБОТКА ПЕРСОНАЖЕЙ

20. 1. Социально-демографические характеристики:
• возраст, пол;
• место проживания;
• кто по образованию (уровень образования);
2. Мотивация
3. Цели
4. Страхи
5.Высказывания, девизы.
РАЗРАБОТКА ПЕРСОНАЖЕЙ

21. РАЗРАБОТКА ПЕРСОНАЖЕЙ

22. USER-STORIES
User-stories (перечень функциональности) – подробный список
того что пользователь может делать в будущем продукте.

23. USER-STORIES
Проблемы на пути достижения цели
Решение проблемы (информация, функционал)
Цель пользователя
Проблемы на пути достижения цели
Цель пользователя
Решение проблемы (информация, функционал)
Проблемы на пути достижения цели
Цель пользователя
Решение проблемы (информация, функционал)
Проблемы на пути достижения цели

24. USER-STORIES

25. Информационная архитектура (IA) занимается принципами
систематизации информации и навигации по ней с целью помочь
людям успешно находить и обрабатывать нужные им данные.
ИНФОРМАЦИОННАЯ АРХИТЕКТУРА

26. ИНФОРМАЦИОННАЯ АРХИТЕКТУРА
1. Как лучше всего структурировать и разместить контент?
2. Как лучше всего пояснить варианты выбора в навигации?
3. Какой тип навигационного меню больше всего подходит для
вмещения всех вариантов выбора?
4. Как лучше всего разработать меню?

27. ПРИНЦИПЫ ИНФОРМАЦИОННОЙ
АРХИТЕКТУРЫ
Принцип выбора
Пользователям нужно предлагать только осмысленный выбор,
который должен быть основан на чем-то конкретном: большое
количество вариантов может дезориентировать пользователя.

28. ПРИНЦИПЫ ИНФОРМАЦИОННОЙ
АРХИТЕКТУРЫ
Принцип раскрытия
Необходимо давать пользователю информацию, необходимую
для понимания того, что он сможет найти на других страницах
сайта, а что нет. Информация должна подаваться постепенно.

29. ПРИНЦИПЫ ИНФОРМАЦИОННОЙ
АРХИТЕКТУРЫ
Принцип примеров
Приведение примеров содержания страниц значительно
улучшает UX – пользователь может быстрее сориентироваться
на сайте.

30. ПРИНЦИПЫ ИНФОРМАЦИОННОЙ
АРХИТЕКТУРЫ
Принцип парадного входа
Большая часть посетителей сайта попадают на него не через
главную страницу – значит любая страница должна содержать
необходимый минимум информации, подсказывающей
пользователям где они находится.

31. ПРИНЦИПЫ ИНФОРМАЦИОННОЙ
АРХИТЕКТУРЫ
Принцип множественной классификации
Разные пользователи используют сайт по-разному – например, у
них могут быть разные методы нахождения информации.

32. ПРИНЦИПЫ ИНФОРМАЦИОННОЙ
АРХИТЕКТУРЫ
Принцип целенаправленной навигации
Панель навигации сайта должна показывать пользователю, где
он сейчас находится и куда может попасть.

33. ПРИНЦИПЫ ИНФОРМАЦИОННОЙ
АРХИТЕКТУРЫ
Принцип роста
На большинстве сайтов – контент изменчивая сущность, поэтому
он должен быть организован так, чтобы он мог расти в будущем
без особых сложностей.

34. ВИДЫ ИНФОРМАЦИОННОЙ
АРХИТЕКТУРЫ
Категории

35. ВИДЫ ИНФОРМАЦИОННОЙ
АРХИТЕКТУРЫ
Задачи

36. ВИДЫ ИНФОРМАЦИОННОЙ
АРХИТЕКТУРЫ
Поиск

37. ВИДЫ ИНФОРМАЦИОННОЙ
АРХИТЕКТУРЫ
Время

38. ВИДЫ ИНФОРМАЦИОННОЙ
АРХИТЕКТУРЫ
Люди

39. ИНСТРУМЕНТЫ ВИЗУАЛИЗАЦИИ
ИНФОРМАЦИОННОЙ АРХИТЕКТУРЫ
Структура сайта

40. ИНСТРУМЕНТЫ ВИЗУАЛИЗАЦИИ
ИНФОРМАЦИОННОЙ АРХИТЕКТУРЫ
Карта ума (mindmap)

41. СКЕТЧИ
Скетч - эскиз, быстро
набросанный рисунок.
Основная цель – передачи
идеи.
Правила:
•быстро;
•без подробностей;
•без перфекционизма;
•несколько вариантов.

42. ПРОТОТИПЫ
Прототип - черновая реализация будущего проекта, в которой
описаны все формы и функции.

43. ВИДЫ ПРОТОТИПОВ
Прототип низкой детализации

44. ВИДЫ ПРОТОТИПОВ
Прототип высокой детализации

45. ПРАВИЛА ОФОРМЛЕНИЯ
ПРОТОТИПОВ
Использовать в прототипе только реальные тексты
(при их наличии).

46. ПРАВИЛА ОФОРМЛЕНИЯ
ПРОТОТИПОВ
Интерфейсные тексты и небольшие фрагменты текста может
писать сам проектировщик.

47. ПРАВИЛА ОФОРМЛЕНИЯ
ПРОТОТИПОВ
Прототип – не дизайн-макет!
Отсутствие изображений, стандартные шрифты,
минимальное количество цветов.

48. ПРАВИЛА ОФОРМЛЕНИЯ
ПРОТОТИПОВ
Использовать осмысленное цветовое
кодирование элементов.

49. ПАТТЕРНЫ ПРОЕКТИРОВАНИЯ
Паттерн проектирования (design pattern) - повторяемая
конструкция, представляющая собой решение определенной
проблемы в проектировании в рамках часто встречающегося
контекста.

50. ПАТТЕРНЫ ПРОЕКТИРОВАНИЯ
Соответствуют ожиданиям
пользователей
Экономят время

51. ПРИМЕРЫ ПАТТЕРНОВ
Карточка товара (интерфейсный паттерн)

52. ПРИМЕРЫ ПАТТЕРНОВ
Награда пользователю (паттерн взаимодействия)

53. ПРЕЗЕНТАЦИЯ ПРОТОТИПА
ЗАКАЗЧИКУ
Заказчик должен понимать, что он видит перед собой именно
прототип.

54. ПРЕЗЕНТАЦИЯ ПРОТОТИПА
ЗАКАЗЧИКУ
Заказчик должен видеть перед собой целостный прототип,
чтобы оценить будущую функциональность продукта, а не
внешний вид какой-либо страницы.

55. ПРЕЗЕНТАЦИЯ ПРОТОТИПА
ЗАКАЗЧИКУ
Заказчик должен понимать, что внесение изменений на этапе
проектирования будет наименее трудозатратным.

56. ПРЕЗЕНТАЦИЯ ПРОТОТИПА
ЗАКАЗЧИКУ
И положительно скажется на конечном результате проекта.

57. ТЕХНИЧЕСКОЕ ЗАДАНИЕ
Кто должен писать ТЗ?

58. РАЗРАБОТКА ПОСЛЕ
ПРОЕКТИРОВАНИЯ
Проектировщик
Менеджер

59. СПАСИБО ЗА ВНИМАНИЕ!
ПРОЕКТИРОВЩИК
АЛЕКСЕЙ АНДРЕЕВ