серия семинаров
Создание успешных публичных массовых веб-продуктов
Проектирование интерфейсов /
семинар-тренинг
«Как должен выглядеть продукт?»
Денис Бесков
http://beskov.ru
webproducts@beskov.ru

План занятия
Теория
2. Типы страниц, назначение и функции
3. Типы блоков, назначение и функции
4. Процесс проектирования интерфейса на
основе требований
Практика
6. Проектирование интерфейса для 1-го
сценария использования продукта

Типы страниц, назначение и функции
1. Обзорная страница
2. Списочная страница
3. Страница объекта
4. Страница формы

С1. Обзорная страница
Назначение
• Представить сводку важных материалов и
функций продукта по данной теме
Функции
• Информирование о самом важном
• Формирование представления о возможностях
• Ориентирование по набору страниц
Примеры
• Страница темы «Театр»
• Главная страница сайта

С2. Списочная страница
Назначение
• Дать инструмент для изучения и выбора одного
из вариантов одного класса
Функции
• Сравнение элементов множества
• Выбор из множества
Примеры
• Результаты поиска
• Товары данной категории

С3. Страница объекта
Назначение
• Предоставить подробную информацию об
одном Объекте
Функции
• Показать свойства объекта
• Дать представление о возможных действиях с
объектом
Примеры
• Страница Исполнителя
• Страница Гостиницы

С4. Страница формы
Назначение
• Предоставить возможность ввода информации
об одном Объекте или их Наборе
Функции
• Информировать о необходимых атрибутах
объекта и их назначении
• Дать возможность ввода данных
Примеры
• Форма регистрации
• Форма поиска

Типы блоков, назначение и функции
1. Блоки общего назначения
• Блок идентификации
• Блок навигации
• Рекламный блок
2. Сценарные блоки
1. Блок контекста
2. Блок контента
3. Блок ввода данных
4. Блок операций

Блок идентификации
Назначение
• Дать представление о типе и названии
продукта, состоянии пользователя
Функции
• Служить ментальной опорой, рамкой контекста
• Служить точкой возврата в «начало»
Примеры
• Логотип
• Имя пользователя

Блок навигации
Назначение
• Перейти к другому объекту, задаче, теме
Функции
• Получить представление о возможных местах
назначения
• Дать возможность перейти к другой странице/функции
Примеры
• Блок «Смотри также»
• Панель списка типов писем в почтовом ящике
• Основное меню продукта
• Панель закладок
• Листалка по страницам результатов

Рекламный блок
Назначение
• Заинтересовать пользователя рекламируемым
объекту
Функции
• Привлечь внимание пользователя
• Вписываться в общий дизайн продукта
Примеры
• Верхний баннер
• Баннер с само-промо
• Блок контекстной рекламы

Блок контекста
Назначение
• Дать представление о том, где находится
пользователь
Функции
• Информировать о расположении пользователя
в продукте
• Информировать о контексте, процессе
Примеры
• Хлебные крошки
• Параметры поиска
• Панель шагов мастера

Блок контента (списка контента)
Назначение
• Передавать информацию об объекте
Примеры
• Фотография
• Абзац текста
• Список ингредиентов
• Видео
• Список результатов поиска

Блок ввода данных
Назначение
• Предоставить возможность ввода данных
Функции
• Дать представление о типе запрашиваемых
данных
• Дать возможность занесения информации
Примеры
• Поле поиска
• Форма комментария
• Форма загрузки файла

Блок операций
Назначение
• Выполнить действие над объектом
Функции
• Дать представление о возможных операциях
• Дать возможность запуска выбранной
операции
Примеры
• Панель управления просмотра видео
• Кнопка «Отправить»
• Галка «Добавить в избранное»

Процесс проектирования ПИ / 1
Обеспечение реализуемости сценариев
1. Анализ сценариев взаимодействия
2. Выделение страниц и определение их типа
3. Составление перечня и типов сценарных
блоков для страниц сценариев
4. Размещение основных блоков на странице
5. Определение элементов блока (кнопка, поле,
чекбокс, строка)
6. Размещение элементов блока

Процесс проектирования ПИ / 2
Обеспечение целостности и взаимосвязи
1. Создание графов переходов по страницам
для каждого сценария
2. Сборка модели навигации
3. Создание концепции интерфейса
(размещение общих блоков)
4. Проектирование панелей навигации
5. Реорганизация сценарных страниц на основе
концепции
6. Проектирование обзорных страниц продукта

Пример проектирования интерфейса
Сценарий «Забронировать билет»
2. Просмотр и выбор сеанса по параметрам
3. Просмотр зала и выбор мест
4. Отправка заявки на бронь
5. Получение подтверждения и печать кода
брони

Страницы?
1. Список сеансов (Страница списка)
2. Карта мест кинозала (Страница объекта)
3. Страница брони (Страница объекта)

Перечень сценарных блоков > Список сеансов
1. Выбор даты (блок навигации)
2. Выбор жанра (блок навигации)
3. Выбор географии (блок навигации)
4. [Блок фильма] (*) (блок контента)
• [Блок сеанса] (*) (блок контента)
• Выбор кинотеатра (блок контента)
* — множество