1. Проектирование
Курс молодого бойца
Мыслинский Игорь
USABILITYLAB, Проектировщик интерфейсов

2. Структура
проекта

3. Структура проекта
Структура проекта / состояния проекта
Связи между отдельными страницами, доступность или недоступность
отдельных разделов в зависимости от каких-либо условий, например,
авторизации пользователя
Структура страницы / состояния страницы
Связи между блоками на странице или страницах, взаиморасположение
блоков, появление различных блоков (всплывающие окна) в разные состояния
сценария
Структура блока / состояния блока
Связи между элементами блока внутри блока, изменения внутри блока
(раскрывающиеся свойства, допинфо и прочие скрытые штуки)
Базовый элемент

4. Структура проекта
Структура проекта получается при:
- Декомпозиции сценариев на различные
паттерны архетипов
- Объединении паттернов в страницы и разделы
- Объединении разделов в структуру проекта и
получении дерева сайта или программы

5. Структура проекта
Сценарий Цель
Ключевые
точки
Путь пользователя по страницам в соответствии со сценарием

6. Структура проекта
Задача прототипа:
- Проходимость сценариев
- Ожидаемое и консистентное расположение
элементов на страницах относительно
стандарта, гайдлайнов и главной (посадочной)
страницы

7. Архетипы
проектирования
АРХЕТИП
Формализованная и многократно используемая модель
некоторого понятия предметной области

8. Архетипы проектирования

9. Архетипы проектирования
Информаторий
Для чего нужен
- Получение информации
Характерные черты
- Каталог информации с
поиском внутри и
различными вариантами
вывода
- Хранение информации
Примеры:
Справочники

10. Архетипы проектирования
Каталог
Результат
выбора
Поиск
Результат
поиска

11. Архетипы проектирования
Изменение представления

12. Архетипы проектирования
Правка
Статья в
редакторе
Статья
на странице
Статья на
странице

13. Архетипы проектирования
Инструмент
Для чего нужен
- Достижение цели
Характерные черты
- Визарды и мастера на сайте,
использование которых
помогает пользователю
достичь своей цели
Примеры:
Калькуляторы и переводчики

14. Архетипы проектирования
Заполнение очень нужного
бюрократического документа
Ввод данных
документа
Валидация
данных
Постановка
на учет
Расчет цены
на услугу
Печать
квитанции
Ошибка!
Заполните нужное поле!

15. Архетипы проектирования
Магазин
Для чего нужен
- Получение товара
Характерные черты
- Продажа какого-либо товара
- Подбор рекомендуемого
- Оплата, доставка, возврат и
прочее

16. Архетипы проектирования
Заказ товара
Каталог Корзина
Описание
товара
Оформление
заказа
Подтверждение
заказа
Оповещение
о доставке

17. Архетипы проектирования
Личное
пространство
Для чего нужен
- Персонификация
Характерные черты
- Настройка интерфейса под
себя
- Установка связи программы
со своими гаджетами и
программными средствами
Примеры:
Настройка уведомлений и
указание почтового ящика

18. Архетипы проектирования
Добавление в избранное
Каталог
продуктов
Каталог
с пометками
Личный
кабинет
Список
избранных
товаров
Товар Помеченный
товар

19. Архетипы проектирования
Подключение телефона к аккаунту
Ввод личных
данных
Оповещение
о отправке
смс
на телефон
с кодом
доступа
Ввод кода
доступа
Оповещение
о
подключении
устройства
Сообщение
с кодом
доступа на
телефоне

20. Архетипы проектирования
Социальная сеть
Для чего нужен
- Связь с другими субьектами
Характерные черты
- Общение с другими
пользователями
- Передача артефактов
- Оценка действий других
пользователей

21. Архетипы проектирования
Общение с другим пользователем
Список
пользователей
Создание
сообщения
Просмотр
ответа
Просмотр
сообщений
ранее

22. Архетипы проектирования
Игра
Для чего нужен
- Получение достижений
Характерные черты
- Задания на время
- Оценка действий
пользователя по ранее
введенному алгоритму
- Награды и ограничения

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

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

25. Архетипы проектирования
Архетипы чаще всего комбинируются по правилу –
чтото + представление данных (Информаторий).
Сами с собой они комбинируются редко, так как
решают различные задачи.
Например: личный кабинет, каталог товаров и
форум пользователь ожидает встретить на разных
страницах, но ссылки на каталог и форум могут
быть в личном кабинете.

26. Структура
страницы

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

28. Структура страницы
Информационная строка
Заголовки и навигация
Рабочая область
Кнопки задач
Андроид / IOS Windows 8

29. Структура страницы
В связи с особенностями
письменности (справа налево
и сверху вниз), мы ожидаем,
что развитие сюжета по
сценарию будет именно в этом
направлении.
Что говорит нам о том, что при
наличии двух блоков со связью
главный-подчиненный, мы
ожидаем что главный будет
сверху (слева), а зависимый –
снизу (справа).

30. Структура страницы
Для осуществления
непрерывности сценария
не рекомендуется сценарные
блоки разделять каким-либо
другим функционалом.
Сценарий должен выполняться
последовательно без
вмешательства других контекстов.
Форма поиска
Статья
про зимовку уток
Результат поиска

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

32. Структура страницы
Количество информации,
представленной на странице
должно быть в рамках:
от минимального, которое
позволяет при отвлечении
пользователя восстановить
контекст сценария
до максимального, которое не
позволит сосредоточится на
прохождении сценария.
Пришел на страницу
Ушел в
другой раздел
Ушел по ссылке
Ушел по баннеру
Достиг результата
Отвлекли,
забыл
зачем шел,
вернулся
назад

33. Структура блоков

34. Структура блоков
Контентные блоки
Содержат набор информации
- Текст
- Видео
- Картинки
- и прочее
Рекомендуется делать удобными
для восприятия информации
Проектируются в первую очередь,
потому что являются целью
пользователя
Функциональные блоки
Оперируют с информацией
- Сортировка
- Редактирование
- Преобразование
- Визарды
- и прочее
Рекомендуется делать заметными
на фоне контентных блоков, но не
отвлекающими внимание
Проектируются во вторую
очередь, потому являются
средством достижения цели

35. Структура блоков - функциональные
Блок содержит набор элементов,
необходимых для выполнения
какой-либо функции.
Набор элементов в блоке зависит
от требуемых входных условий к
работе функции
Блок может иметь несколько
состояний – краткую и
расширенную версию, в нем
возможно переключение
контекста.

36. Структура блоков - функциональные
Элементы в блоке группируются
по правилу:
1. Получение информации
2. Заполнение данных в поля
ввода и выбор опций
3. Принятие решения или отмена
Расположение кнопок «Ок» и
«Отмена» определяется
гайдлайнами текущей платформы
разработки
Поля ввода данных
Принятие решения
Описание блока

37. Паттерны
проектирования
ПАТТЕРНЫ
Повторимая конструкция, представляющая собой решение
проблемы проектирования в рамках некоторого часто
возникающего контекста

38. Паттерны проектирования
Глобальная навигация
Разделы внутри одного контекста
Спицы и колеса
Разделы с разным контекстом

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

40. Паттерны проектирования
Вкладки
Переключение страниц со схожим
контекстом, с акцентом на их
названиях
Хорошо подходит для разделов
Пейджинг
Переключение страниц с
независимым контекстом, с
акцентом на их очередности
Хорошо подходит для поисковой
выдачи

41. Паттерны проектирования
Детали на лету
Показ деталей товара при
наведении на изображение
товара в каталоге
Обзор при наведении
Показ увеличенного изображения
объекта из детального
представления

42. Оформление
прототипа

43. Оформление прототипа
Структура проекта и переходы:
Необходимо показать связи и иерархию между различными
страницами, функционал достаточен в виде описания на странице.
Концептуальный прототип:
Необходимо показать расположение блоков на странице, для
нетиповых блоков нужно показать структуру блока, для типовых
достаточно описания его функционала
Детальный прототип:
Необходимо показать расположение и структуру блоков на каждой
странице, заполнив их по возможности реальными данными.

44. Оформление прототипа
Страница
поисковой
выдачи

45. Оформление прототипа
Шапка
Навигация
Форма поиска с
дополнительными
параметрами
Подвал
Список найденных
документов
и допфункционал
Концептуальный
прототип:
Необходимо показать
расположение блоков на
странице, для нетиповых блоков
нужно показать структуру блока,
для типовых достаточно описания
его функционала

46. Оформление прототипа
Детальный прототип:
Необходимо показать
расположение и структуру блоков
на каждой странице, заполнив их
по возможности реальными
данными.

47. Гайдлайны

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

49. Направляющие
и сетка

50. Направляющие и сетка
Роль сетки
Для выравнивания элементов
относительно страницы
Роль направляющих
Деление на столбцы,
функциональные зоны страницы