04. web design
TRANSCRIPT
Веб Дизайн
Лекция 4, Раскадровка и Карты Сайта
Vladimir Tomberg, PhD
Эстонский Университет Прикладных Наук
по Предпринимательству Майнор
Январь 2015
Pic
ture
sourc
e:
htt
p:/
/userc
ente
redconte
nt.
com
ПРЕЗЕНТАЦИЯ ДОМАШНИХ РАБОТ
2
ВИЗУАЛЬНОЕ ПРЕДСТАВЛЕНИЕ ИСТОРИЙ
3
Инфографика
• Инфографика — это графический способ подачи информации, данных и знаний, целью которого является быстро и чётко преподносить сложную информацию. Одна из форм информационного дизайна
5
Инфографика
• Инфографика способна не только организовать большие объёмы информации, но и более наглядно показать соотношение предметов и фактов во времени и пространстве, а также продемонстрировать тенденции
8
От данных к результату
10Источник: http://infographicsmag.ru
STORYBOARD – РАСКАДРОВКА
Изображение http://www.coollinesartwork.com
STORYBOARD – РАСКАДРОВКА
• "Раскадровка" (storyboard) - это грубый прототип, состоящий из серии набросков экранов/страниц;
• Используются дизайнерами для того, чтобы проиллюстрировать или свести воедино свои идеи и получить отзывы по ним
12
STORYBOARD – РАСКАДРОВКА
Изображение http://www.ac4d.com
STORYBOARD – РАСКАДРОВКА
Изображение: http://www.soohpark.com
STORYBOARD – РАСКАДРОВКА
STORYBOARD – РАСКАДРОВКА
STORYBOARD – РАСКАДРОВКА
Изображение http://kathybateman.com
STORYBOARD – РАСКАДРОВКА
Изображение http://kathybateman.com
Достоинства раскадровок
• Видна вся система в целом;
• Видно функциональное назначение каждого элемента раскадровки;
• Видна схема навигации;
• Позволяет проверить точность и полноту схемы;
• Может быть представлена пользователям для оценки
19
Задание 10:Создание Раскадровки
• Пользуясь созданными персонажами и сценариями создайте сценарии использования сайта;
• Раскадровка строится на основе контекста использования и сценариев;
• Подвергните идеи мозговому штурму;• Выберите лучшие идеи: обсудите требования,
объем времени и ресурсов, целевую аудиторию проекта и конечных пользователей системы. Выделите главные идеи;
• Набросайте, как будет выглядеть каждый экран, опишите по каждому экрану картинку, рисунок, анимацию, звук, музыку или текст
20
ИНФОРМАЦИОННАЯ АРХИТЕКТУРА
21
Информационная архитектура
• Информационная архитектура означает организацию веб сайта таким образом, чтобы его было легко использовать и на нем было легко производить поиск;
• Критичными концептами для организации веб сайтов являются:1. Схемы организации;
2. Категории;
3. Заголовки
22
Введение в информационную архитектуру
• Информационная архитектура (IA) отличается от визуального дизайна или программирования тем, что фокусируется на структуре веб сайта, а не на его внешнем виде или функциональности;
• Целью IA является построение веб сайта, простого в использовании, отвечающего целям как клиента (заказчика), так и пользователя.
23
Пример: сайт заказа завтракаYourbreakfast.comМы предлагаем
интегрированное
решение для легкого
решения утренних
потребностей.
Заполните форму для
выяснения ваших
предпочтений к завтраку
Ваш персональный
конфигуратор завтрака
готов. Пожалуйста
залогиньтесь.
ЛогинНаша история Пресс релизы
Горячие напиткиСоки Что намазываем Хлеб
Чай Джем Арахисовое маслоКаша
Кофе Сыр 24
Пример 1: сайт заказа завтракаYourbreakfast.comМы предлагаем
интегрированное
решение для легкого
решения утренних
потребностей.
Заполните форму для
выяснения ваших
предпочтений к завтраку
Ваш персональный
конфигуратор завтрака
готов. Пожалуйста
залогиньтесь.
ЛогинНаша история Пресс релизы
Горячие напиткиСоки Что намазываем Хлеб
Чай Джем Арахисовое маслоКаша
Кофе Сыр 25
Не сфокусирован на пользовательских нуждах
Извилистая функциональность
Противоречивая организация
26
• Плохая Информационная Архитектура извилиста, противоречива и сложна, без всякой на то необходимости. Она затрудняет использование веб сайтов
Плохая Информационная Архитектура
Изображение http://tema.livejournal.com
27
Пример 2: другой сайт заказа завтрака
• Хорошая Информационная Архитектура проста, ясна и элегантна. Делает использование веб сайта максимально простым
Пример 2: другой сайт заказа завтрака
Breakfasttable.comСсылка: Такой же
завтрак, как вчера
Соки Арахисовое масло
Чай Сыр
ДжемКофе
БутербродыНапитки Каша
28
• Хорошая Информационная Архитектура проста, ясна и
элегантна. Делает использование веб сайта максимально
простым.
Что делает информационная архитектура?
• Корневая задача IA — организацияинформации на веб сайте таким образом, чтобы пользователи могли находить то, что им нужно и достигать своих целей (пример – покупка продуктов в большом магазине);
• Чем счастливее будет пользователь, тем больше он купит продуктов или услуг, проведет на сайте больше времени, что сделает бизнес более прибыльным;
29
Задачи Информационной Архитектуры
1. Изучение пользователя: что делают люди, чтобы достичь своих целей, посещая веб сайт?
2. Определение содержания и функциональности: как это должно помочь пользователю достичь своих бизнес целей?
3. Разработка организационных схем: как веб сайт должен быть организован?
4. Разработка интерфейса совместно с графическим дизайнером.
5. Отслеживание этих задач в процессе построения сайта.
31
IA в реальной жизни и в Веб
32
Цели и способы организации содержания
• Имеется бесконечное количество путей для того, чтобы организовать одну и ту же информацию;
• Бизнес цели и цели пользователей управляют тем, какая организационная схема используется
33
Разные возможности организации:Вариант 1.
Добро пожаловать
к столу для
завтрака
БутербродыНапитки Каша
34
Разные возможности организации:Вариант 2.
Добро пожаловать
к столу для
завтрака
Завтраки для занятых
женщин
Завтраки для школьников Завтраки для всех
35
Разные возможности организации:Вариант 3.
Добро пожаловать
к столу для
завтрака
Поделитесь своей
историей о завтраке
Посмотрите, что едят
знаменитые люди
Зарегистрируйтесь для
международного
виртуального стола для
завтрака
36
Разные возможности организации:Вариант 4.
Добро пожаловать
к столу для
завтрака
ХлебВыберите продукт Каша
37
Что является результатом IA?(Чему мы научимся?)
• В Информационной архитектуре используется множество методологий, среди которых самыми популярными являются две:
1. Описание сайта с точки зрения содержания и организации — чаще всего в виде карты сайта;
2. Функциональное описание, объясняющее как, предположительно, будет работать Веб сайт.
• Уровень детализации в этих описаниях может широко варьироваться
38
Список содержания и организация
Yourbreakfast.comМы предлагаем
интегрированное
решение для легкого
решения утренних
потребностей.
Заполните форму для
выяснения ваших
предпочтений к завтраку
Ваш персональный
конфигуратор завтрака
готов. Пожалуйста
залогиньтесь.
ЛогинНаша история Пресс релизы
Горячие напиткиСоки Что намазываем Хлеб
Чай Джем Арахисовое маслоКаша
Кофе Сыр
• IA отвечает за список всего содержания и структуры веб сайта. Чаще всего они представлены в виде карты сайта, таблицы содержания, функциональных диаграмм.
39
Список содержания
40
Карты сайта
41
Несколько мыслей о картах сайта
• Карты сайта для IA — это не карты сайта для пользователей, которые он может найти на веб сайте (визуальные или XML);
• Карты сайта должны исходить из идей, тогда их можно будет легко изменять;
• Работа IA заключается не столько в рисовании карт для иллюстрации структуры (это простое дело), сколько в поиске правильной структуры.
42
Пример: карта сайта для пользователей
43
Карты сайта и взаимодействие
• Карты сайта предназначены для коммуникации;
• Нет стандартных карт сайтов, они зависят от типа проекта и структуры команды;
• Карты сайтов предназначены для того, чтобы команда могла дискутировать о сайте, иллюстрируя на ней свои мысли и идеи;
• Карта полезна клиентам, для того, чтобы было проще обсуждать с ними сайт, для визуальных дизайнеров, чтобы создавать разные типы оформления и для программистов, чтобы руководствоваться ими при программировании сайта
44
Концептуальная карта сайта (высокоуровневая)
• Концептуальные карты сайта не отображают все страницы сайта, а показывают общую структуру. Они полезны на первоначальнойстадии проекта.
• Чаще всего они включают в себя: Разные секции веб сайта;
Разные уровни доступа;
Разные типы функциональности;
Пользователей сайта и то, каким образом они взаимодействуют с сайтом
45
Пример концептуальной карты сайта
Домашняястраница
Зашел в систему?
Только подписчики
Регистрация / вход
Последние статьи
Новости
Архив статей
Документация
46
Классическая карта сайта
• Классическая карта сайта показывает все страницы сайта;
• Если имеется множество страниц одного типа (новости, статьи), то показывают только одну;
• Страницы на карте визуально группируются и связываются стрелками, однако нет смысла показывать на карте все реальные гиперссылки — надо просто соединять страницы таким образом, как они организованы в иерархии
47
Пример:Карта сайта со всеми гиперссылками
48
Пример: Карта сайта только с иерархическими связями
49
Глубина сайта
• Карта сайта обычно показывает глубину сайта —сколько щелчков мышью необходимо сделать, чтобы добраться до последней страницы;
• Преимущество большой глубины заключается в том, что первая страница не очень перегружается;
• Малая глубина дает возможность найти необходимую информацию при минимальной возможности дезориентироваться;
• Не существует правил, какая глубина лучше, в каждом конкретном случае необходимо искать индивидуальный подход, связанный с задачами бизнеса и пользователей
50
Пр
им
ер
сай
та с
пл
оск
ой
нав
ига
ци
ей
51
Пример карты сайта с плоской навигацией (малой глубиной)
52
Пример карты сайта с большой глубиной
Home
All articles All pictures
Articles at price First picture Second pictureFree articles
First eight Second eight
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
53
Правило двух щелчков
• Часто встречается мнение, что должна иметься возможность добраться до любой страницы на сайте за два щелчка мышью. И хотя это не всегда возможно, правильная организация меню позволяет быстро получать доступ к довольно большому количеству страниц
Общее количество страниц для меню разного размера и уровней вложения.
Количество пунктов в меню
Количество уровней вложения
5 7 8 10
1 5 7 8 10
2 25 49 64 100
3 125 343 512 1000
54
Требования к картам сайта
• Каждая страница сайта должна иметь собственный идентификатор — номер или название страницы;
• В зависимости от использования сайта можно добавлять разную информацию, в частности: Страницы, имеющие особое значение для
программиста;
Уровень доступа — какие страницы доступны только подписчикам;
Не HTML страницы, например, Flash, PDF;
Тип содержания страницы — статья, обзор, форма;
Какой тип навигации используется на странице.
55
Инструментарий
• Для построения карт сайтов можно использовать разные инструменты. Подойдут векторные редакторы: Corel Draw, Illustrator, Freehand. Также можно воспользоваться встроенными средствами MS Office;
• Существуют и специальные инструменты —ConceptDraw, Inspiration, но самым популярным у информационных архитекторов стал MS Visio;
• Visio имеет встроенные наборы символов для рисования карт сайтов, также имеется множество наборов от третьих разработчиков
56
Встроенные в Visio наборы символов (stencils) для проектирования сайта
• Концептуальные символы • Символы для карты сайта57
Наборы символов от третьих разработчиков
58
Загрузить: https://www.dropbox.com/
Изометрические карты
• Изометрические карты используют в решении дизайна цвет, глубину и ярлыки;
• Этот дает отличное представление о сайте и его использовании
59
Пример набора изометрических символов
60
Загрузить: https://www.dropbox.com/
Изометрическая концептуальная карта сайта
61
Таблицы со списками содержания• Таблицы со списками содержания являются
альтернативным путем представления страниц сайта. Они бывают полезны, когда необходимо делать частые изменения в содержании, без необходимости показывать иерархию;
• Таблицы со списками содержания обычно используют совместно с картами сайтов
62
Задание 11
• Создайте концептуальную карту сайта отталкиваясь от ваших сценариев и раскадровки;
• Старайтесь использовать только страницы, которые описаны в сценарии — сайт не должен быть неоправданно большим
• Опишите краткое назначение каждой страницы
63