Проектирование интерфейсов /семинар-тренинг

«Как должен выглядеть продукт?» Денис Бесков

http://beskov.ruwebproducts@beskov.ru

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

План занятия

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

основе требованийПрактика1. Проектирование интерфейса для 1-го

сценария использования продукта

Типы страниц, назначение и функции

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

С1. Обзорная страница

Назначение• Представить сводку важных материалов и

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

С2. Списочная страница

Назначение• Дать инструмент для изучения и выбора одного

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

С3. Страница объекта

Назначение• Предоставить подробную информацию об

одном ОбъектеФункции• Показать свойства объекта• Дать представление о возможных действиях с

объектомПримеры• Страница Исполнителя• Страница Гостиницы

С4. Страница формы

Назначение• Предоставить возможность ввода информации

об одном Объекте или их НабореФункции• Информировать о необходимых атрибутах

объекта и их назначении• Дать возможность ввода данныхПримеры• Форма регистрации• Форма поиска

Типы блоков, назначение и функции

1. Блоки общего назначения1. Блок идентификации2. Блок навигации3. Рекламный блок

2. Сценарные блоки1. Блок контекста2. Блок контента3. Блок ввода данных4. Блок операций

Блок идентификации

Назначение• Дать представление о типе и названии

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

Блок навигации

Назначение• Перейти к другому объекту, задаче, темеФункции• Получить представление о возможных местах

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

Рекламный блок

Назначение• Заинтересовать пользователя рекламируемым

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

Блок контекста

Назначение• Дать представление о том, где находится

пользовательФункции• Информировать о расположении пользователя

в продукте• Информировать о контексте, процессеПримеры• Хлебные крошки• Параметры поиска• Панель шагов мастера

Блок контента (списка контента)

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

Блок ввода данных

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

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

Блок операций

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

операцииПримеры• Панель управления просмотра видео• Кнопка «Отправить»• Галка «Добавить в избранное»

Процесс проектирования ПИ / 1

Обеспечение реализуемости сценариев1. Анализ сценариев взаимодействия2. Выделение страниц и определение их типа3. Составление перечня и типов сценарных

блоков для страниц сценариев4. Размещение основных блоков на странице5. Определение элементов блока (кнопка, поле,

чекбокс, строка)6. Размещение элементов блока

Процесс проектирования ПИ / 2

Обеспечение целостности и взаимосвязи1. Создание графов переходов по страницам

для каждого сценария2. Сборка модели навигации3. Создание концепции интерфейса

(размещение общих блоков)4. Проектирование панелей навигации5. Реорганизация сценарных страниц на основе

концепции6. Проектирование обзорных страниц продукта

Пример проектирования интерфейса

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

брони

Страницы?

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

Перечень сценарных блоков > Список сеансов

1. Выбор даты (блок навигации)2. Выбор жанра (блок навигации)3. Выбор географии (блок навигации)4. [Блок фильма] (*) (блок контента)

1. [Блок сеанса] (*) (блок контента)

5. Выбор кинотеатра (блок контента)

* — множество