Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмастеров

Сайт Школы
Канал на YouTube

Карточная сортировка
Выбираем структуру вместе с пользователями

3
Описание
Назначение
Создание структуры на неструктурированных данных
Выделение категорий (построение таксономий)
Проверка и согласование выбранной структуры
Способ проведения
Все термины печатаются на карточках
Карточки классифицируются по группам
Проводится
Индивидуально – с целевыми пользователями (15-30)
Групповое (affinity diagram) – с пользователями, с
группой разработки

Типы
Открытая
Категории, по которым раскладываются карточки,
заранее неизвестны
Для проектирования новой системы, для переработки
старой
Закрытая
Категории заранее определены
Для случаев, когда расширяется существующая
система
4

Порядок проведения закрытой сортировки
Выписать на карточки все объекты, подлежащие классификации
По названиям (если важно классифицировать о названиям)
По описаниям (если важно в том числе придумать названия)
Сформулировать названия категорий – групп, в которые будут раскладываться карточки
Перетасовать карточки
Выдать карточки участнику
Сформулировать задание
«Надо разложить карточки по данным группам по близости. Карточки могут относится к нескольким группам»
После группировки провести интервью с пользователем
Критерии соотнесения с той или иной группой
Фиксирование результата
Для каждой группы - список карточек
5

Анализ закрытой сортировки
Для каждой карточки рассчитывается, сколько
респондентов поместило её в ту или иную категорию
Данные сводятся в таблицу для анализа
6
Категория 1 Категория 2 Категория 3
Карточка 1 L1/N*100 L2/N*100 L3/N*100
Карточка 2 M1/N*100 M2/N*100 M3/N*100
Карточка 3 N1/N*100 N2/N*100 N3/N*100
Категория 1 Категория 2 Категория 3
Карточка 1 20% 76% 4%
Карточка 2 15% 15% 70%
Карточка 3 90% 3% 1%

Процедура открытой сортировки
Выписать на карточки все объекты, подлежащие классификации
По названиям (если важно классифицировать по названиям)
По описаниям (если важно в том числе придумать названия)
Перетасовать карточки и выдать их респонденту
Сформулировать задание
«Надо разложить карточки на группы по степени их близости, каждой группе дать название и объяснить, почему
карточки относятся к ней. Карточки могут относиться к нескольким группам.»
После группировки провести интервью с пользователем
Критерии группировки
Объяснения
Сложности с именованием, пониманием назначения карточек
Фиксирование результата
Список групп
Для каждой группы - список карточек
7

Анализ открытой сортировки
1.Объединением категорий, предложенных
пользователями
Категории приводятся к одному основанию
Проводится анализ, как при закрытой сортировке
2.Анализом близости (аналог кластерного анализа)
Рассчитывается частота соседства карточек
На основании частоты соседства выделяются группы
8

9
Карточка 1 Карточка 2 Карточка 3 Карточка 4 Карточка 5
Карточка 1 x
Карточка 2 x P=Q/M
Анализ «соседей»
P – вероятность принадлежности одной группе
Q – количество раз, которое карточки оказались в одной группе
M – количество респондентов

10
Пример на websort.net

11
Материалы по карточной сортировке
Ссылки
CardSort @ usabilitynet.org -
http://b23.ru/svxg
Руководство на Boxes and Arrows -
http://b23.ru/svxw
Инструменты
WebCat (закрытая сортировка)
WebSort (цена зависит от
лицензии)
Excel

Пример карточной сортировки
КЕЙС: Большой новостной ресурс

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

Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмастеров

Хотелось бы большей структурированности,
Например, новости медицины находятся в
«Науке»
Не очень хорошо с
навигацией в спортивном
разделе.
Не могу найти нужные новости,
т.к. структура навигации сайта
не совсем прозрачна.

Михаил, «обычный молодой человек»
• 25 лет, холост, детей нет.
• Заходит на сайт ежедневно.
• Как правило, заходит на сайт ненадолго (на 10-15 минут, больше некогда), но иногда, когда есть возможность,
может зависнуть минут на 40.
Главная Раздел Материал Мультимедиа
• Отображать
эксклюзивную новость
• Отображать заголовки и
подзаголовки,
отражающие суть статьи
Ольга, «любознательная студентка»
• 22 года, не замужем, детей нет.
• Как правило, проводит на сайте до 20 минут за раз, но заходит на него «по сто раз в день», так как это «основной
источник информации для меня».
Игорь, «нелояльный читатель»
• 37 лет, состоит в браке, есть дочь 15 лет.
• Заходит на сайт 2-3 раза в неделю.
• Как правило, заходит на сайт ненадолго (на 10-15 минут, больше некогда), обычно, чтобы проглядеть заголовки, но
иногда может углубиться в заинтересовавшие темы.
Александр, «любитель новостей»
• 44 года, разведен, есть дети 21 и 15 лет.
• Как правило, проводит на сайте до 40 минут в день на работе. Дома может не заходить вообще, а может зависнуть
часа на полтора.
• Количество комментари
ев к статье
• Рейтинг статьи
• Пометка эксклюзивности
к новости
• Возможность отправить
новость в социальные
сети (твитер, фейсбук...)
• Ссылка на
медиаматериалы
• Ссылка на другие
мультимедиа статьи
• Возможность перехода
во все разделы
• Поиск
• Пометка эксклюзивности
к новости
• Возможность
быстрого комментирова
ния
• Написать автору
• Оценить автора
• Подписаться на
подробности
мульти��едиа статьи
• Отображать
эксклюзивную новость
• Предоставлять
информацию об
актуальности статьи
(время публикации)
• Переход на другие
сайты, но на
аналогичные статьи
• Заголовки
и подзаголовки
(краткое описание сути)
статей
• Переход к авторам
статей
• Предоставить
информацию об
актуальности статьи
(время публикации)
• Отправить
новость другу на почту
• Прочитать мнения
экспертов и аналитиков

Обратная карточная сортировка
Проверяем существующую структуру

Применение
Проверка того, что спроектированная структура
навигации понятна пользователю.
Несколько видов:
Тестирование дерева
〉 Списком (текстовый)
〉 Карточками (графический)
Тестирование экранов
26

Процедура обратной карточной сортировки
Показать страницу/экран
Для удаленной оценки нужно пронумеровать интерактивные объекты,
чтобы пользователь выбирал «правильный» номер.
Задать вопросы о том, где находится информация:
«Вам нужно узнать погоду на завтра. Где вы будете её искать?»
«В каком разделе находятся неподписанные документы?»
27

28
Пример обратной карточной сортировки

Задания пользователям
Где найти информацию о том, что "Дмитрий Медведев
приостановил действие отдельных положений закона «О
страховании вкладов физических лиц в банках Российской
Федерации»"?
В сентябре Дмитрий Медведев посетил Казахстан. В каком
разделе можно найти информацию об этом событии?
Не так давно Дмитрий Медведев в Питтсбурге сделал
заявление относительно ситуации вокруг Ирана. В каком
разделе сайта можно найти информацию об этом заявлении?
29
3-документы
5-визиты
2-выступленияистенограммы

Тестирование ожиданий
Соответствуют ли ожидания пользователей
запланированному поведению системы?

Тест на понимание пользователями процессов,
происходящих в системе
Проводится как
Самостоятельное исследование;
Включенное, например, в процессе UT.
31

Процедура
1. Провести тест с пользователями
2. Задавать им вопросы об ожидаемом поведении того или
иного элемента
〉«Что вы ожидаете увидеть, когда нажмете на него?»
〉«Что произойдет после нажатия на эту кнопку?»
3. Сравнить ожидания пользователей с тем, что планировалось
реализовать, или уже реализовано.
32

Информационная архитектура
Структура, позволяющая пользователям достигать целей

Определения
Совокупность методов и приёмов структурирования
информации – знаний или данных (Wikipedia).
Информационная архитектура занимается принципами
систематизации информации и навигации по ней с целью
помочь людям более успешно находить и обрабатывать
нужные им данные (Лу Розенфельд).
Структура, основанная на паттернах (шаблонах) присущих
конкретным данным, позволяющая пользователям
достигать целей (Adaptive path).
34

Ценность ИА
Одна из самых «ощутимых», но незаметных вещей в
интерфейсе.
Организует весь контент.
Разделяет информацию по группам и уровням.
Увеличивает продуктивность.
Фокусирует пользователей на главном для решения их задач.
Помогает в нахождение контента через понятную группировку и
наименование.
Представляет контент в легком для понимания виде.
Позволяет принимать решения о типах навигации на том или
ином уровне.
35

Проблемы плохой организации
На информационном сайте
Пользователи чаще пользуются поиском или картой сайта;
Затруднен поиск и ориентирование на сайте.
В приложении
Падает продуктивность;
Сложности обучения (долго, тяжело).
В e-commerce
Проблемы с нахождением продукта;
Проблемы с нахождением информации о продукте;
Проблемы с заказом.
36

Компоненты информационной архитектуры
Системы организации
Способы распределения информации по категориям, например по
теме или хронологически.
Системы именования (метки)
Способы представления информации, например, употребление
научной или обыденной терминологии.
Системы навигации
Способы просмотра и передвижения по информации по некоторой
иерархии.
Системы поиска
Способы поиска информации, например, путем выполнения поискового
запроса или с помощью указателя.
37

Альтернативная классификация
Средства просмотра
Готовый набор путей, обеспечивающих навигацию по системе.
Средства поиска
Возможность сокращения пути до искомого объекта (дополнение к
средствам просмотра).
Содержание и задачи
Что нужно конечным пользователям?
«Невидимки»
Как правило, пользователь их не замечает, но работает с ними –
выступают в виде источника данных.
38

Средства просмотра
Распределение содержания по категориям –
таксономии и иерархии.
Глобальные системы навигации
Основные системы навигации (главное меню).
Позволяют понять в каком месте системы находится
пользователь.
Локальные системы навигации
Позволяют понять, в каком разделе пользователь
находится и куда можно перейти.
Карты сайтов/оглавления
Дополнение к основному виду навигации. Дают краткий
обзор всей системы в целом, со структурой.
Указатели содержания
Дополнительные системы навигации, содержат
упорядоченный по алфавиту список содержания сайта
со ссылками.
Руководства по системе
Дополнительные системы навигации, представляющие
специальную информацию по конкретным темам а
также переходы на соответствующие разделы системы.
Специальные мастера
Позволяют пользователю последовательно проходить
несколько этапов.
Системы контекстно-зависимых ссылок
Единообразно представленные ссылки. Пример,
«смотри также».
39

Средства поиска
Интерфейс поиска
Средство для ввода запросов – поисковая строка или форма.
Язык запросов
Грамматика запроса на поиск.
Алгоритмы извлечения информации
Часть поиска, отвечающая за соответствие контента запросам.
Зоны поиска
Должен ли поиск по каталогу товаров находить новости о компании?
Результаты поиска
Представление содержания, соответствующего запросу:
〉 определение типа содержания
〉 количество результатов
〉 способ ранжирования, сортировки, группировки...
40

Содержание и задачи
Заголовки
Разметка содержания – четкость и понятность
Встроенные ссылки
Играют роль обозначений для содержания, к которому они ведут
Встроенные метаданные
Информация, могущая выступать в виде метаданных
Блоки информации
Логические единицы соержимого, могут быть вложены. Степень детализации различна.
Списки
Группы блоков информации, значение обусловлено какой-либо группировкой (наличием общего признака) и представлением в
определенном порядке
Вспомогательные средства последовательных процедур
Индикация местоположения пользователя «шаг 3 из 8»
Идентификаторы
Индикация местонахождения пользователя в системе – пиктограммы, подсказки
41

«Невидимые» компоненты
Управляемые словари
Словари терминов, предпочтительные для описания конкретной
области
• Обычно содержат несколько вариантов термина
Тезаурусы
Словарь терминов, содержащий сылки на более широкие/узкие
термины, описания предпочтительных терминов
Наборы правил
Группы правил, обеспечивающих управление поиском информации
42

Схема организации
Определяет общие характеристики элементов содержания, оказывает влияние на
группировку этих элементов
〉 Как организована информация
Структура организации
Определяет типы связей между элементами содержания и группами
〉 Каким образом, в какие структуры объединена информация
43

Схемы организации
Чёткие и нечеткие схемы

Схемы организации
Четкие
Разделяют информацию на точные непересекающиеся множества
(например, алфавитный).
Как правило безусловны и предназначены для четкого поиска
Нечеткие
Разделяют информацию на неподдающиеся прямому определению
категории (или несколько категорий – библиотечный каталог).
Категории разбиваются как правило, по смыслу.
Зависят от языка, пользователя, организации и т.п.
Предназначены для нечеткого поиска.
45

Состав схем организации
Четкая
Алфавитная
Хронологическая
Географическая
Нечеткая
Тематическая
Организация по задачам
Организация по аудитории
Метафорическая
Гибридные схемы организации
46

Алфавитная организация
Описание
одна из основных схем для организации словарей и энциклопедий;
может быть использована как родительская ("зонтичная")
классификация;
может быть основой каталогизатора – рубрикатора.
в случае, если пользователи знакомы с предметной областью и/или
имеют четкое представление о том, что они ищут;
как вспомогательный инструмент для других схем классификации
(упорядочение по алфавиту) .
47

48
Примеры алфавитной организация

Хронологическая организация
Описание
подразумевает, что основным запросом будет запрос по времени
(четкая дата, нечеткая дата - на прошлой неделе, в прошлом
месяце);
может быть достроена хронологическим фильтром (позже-
раньше).
известны четкие или приблизительные дата и время;
одна из основных схем для организации пресс-релизов и
всевозможных архивов;
как правило, является вспомогательной для блогоподобных
систем.
49

50
Примеры хронологической организация

Географическая организация
Описание
одна из основных схем для организации доступа
информации, зависящей от места (точки обслуживания,
регионы проживания);
формат "географии" может быть различным - от
мировой до локальной (метро, район).
требуется поиск по географическому месту (точному
или приблизительному).
51

52
Примеры географической организации

Тематическая организация
Описание
одна из самых сложных в организации, но самых полезных
классификаций;
может быть с широким или узким охватом (зависит от выбранных тем);
как правило, достаточно «жесткая» и вызывающая привыкание;
разрабатывается «на сейчас и на будущее»;
вопрос гибкости, подвижности и полноты остается открытым.
в продуктах с большим количеством информации;
в сумме с организацией, ориентированной на аудиторию (если темы
интересны не всем);
для демонстрации контента «вширь».
53

54
Примеры тематической организации

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

56
Пример организация по задачам

Организация, ориентированная на аудиторию
Описание
предоставляет отдельные точки входа для разных целевых аудиторий
(«родителям», «подросткам»);
требуется четкая идентификация целевых групп;
может быть основной или вспомогательной;
позволяет разгрузить разделы, убирая ненужное;
нуждается в дополнительном тестировании/оценке работоспособности .
основная схема в случае, если ЦА сильно разделяется по
потребляемому контенту;
может разделять доступ к контенту (зарегистрированным/
незарегистрированным, оплатившим/ неоплатившим и т.п.);
особенно эффективна для многократно посещаемых сайтов.
57

58
Пример организации по аудитории

Метафорическая организация
Описание
подобная система делается основной с большой степенью
осторожности;
метафора должна быть понятной абсолютному большинству ЦА;
метафоры могут иметь паразитные смыслы (не всегда
очевидные с самого начала).
тогда, когда надо представить пользователям что-то новое – и
это делается через уже известное (м.б. объекты реального
мира);
в развлекательных целях.
59

60
Пример метафорической организации

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

62
Пример гибридной организации

Структуры организации

Классификация
Иерархические
В основе классификация (таксономия)
Гипертекстовые
В основе связи между элементами/блоками
Модель баз данных
Упор на метаданные и связь с управляемыми
словарями
64

Иерархические классификации
Моноиерархические или полииерархические
Принадлежит ли один объект нескольким категориям?
Фасетная организация
Широк��е
Количество вариантов на уровне иерархии (доступ за «2-3клика»)
Сравнительно небольшое количество контента, или варианты четко
определяемы
Узкие
Количество уровней в иерархии (доступ за «6+ кликов»)
Большое количество контента, много вариантов представить сложно
Неоднозначные схемы организации применять можно, но с осторожностью
(полииерархия – исключение, а не правило)
65

66
A
B
Пример узкой структуры
от А до В 5 кликов. Так устроен почти любой корпоративный сайт (большой)

67
A
В
Пример широкой структуры
от А до В 2 кликов. Это модель Яндекс.каталога или похожей системы

Гипертекстовая структура
Практически не используется в основной навигации
Достаточно широко распространен во вспомогательной
Может запутать пользователя (не создает модели навигации)
Обычно применяется для создания контекста или сопровождения
("вместе с этой страницей читают", "похожие записи", "еще по теме”)
Часто применяется в системах помощи
Обычно разрабатывается сначала основная структура
(иерархическая), после чего проставляются гипертекстовы связи, но
не в ущерб иерархии!
68

69
Пример гипертекстовой структуры

Структура на основе базы данных
Относится к восходящему подходу
Проработка на этой структуре позволяет упростить доступ к
информации за счет метаданных
Связи на уровне метаданных обычно сложны, и
представляются в виде ERD-схем
Необходимо для
Генерации алфавитных указателей
Динамического формирования гипертекстовых связей
Поиска по полям (связь с управляемым словарем)
Фильтрации и сортировки результатов
70

Общие принципы
Определиться с основным способом классификации.
Размещать наиболее важную и частотную информацию как можно
ближе к пользователю.
Прилежащие уровни размещать в один уровень (как в
Яндекс.Каталоге) - уменьшает количество кликов видимость.
Использовать гибридные классификации с четким разделением на
группы.
Не использовать большое количество разных классификаций на
одной странице.
На страницах с помощью или пояснениями применять связанные
(гипертекстовые) структуры.
71

Системы навигации (обзор)

Типы систем навигации
Встроенные системы навигации
Глобальные (Где я?)
Локальные (Что находится рядом?)
Контекстные (Что имеет отношение к
информации/объекту на текущей странице?)
Вспомогательные системы навигации
Карта системы (картина мира)
Указатель (непосредственный доступ к содержанию)
Руководство (линейная навигация, ориентированная на
аудиторию, задачу, тему)
73

Глобальная навигация
Несет отпечаток бренда
Должна:
быть четко спозиционирована;
быть сквозной на сайте;
быть отправной точкой для всех страниц;
отвечать на вопрос «где я».
74

75
Примеры глобальной навигации

Локальная навигация
Расширение глобальной навигации
Подкатегории
Подтемы
Единообразие
Самостоятельная навигация внутри подсайта
Допускаются разные виды
76

77
Примеры локальной навигации

Контекстная навигация
Использование
В случае, если некоторые связи не укладываются в
классификацию
Когда надо предложить похожие варианты в рамках
тематики/категории
Важно
Единообразие в рамках каждого контекста
Не должно быть много
При разработке
Подходить к каждому экрану, как к главному
78

79
Пример контекстной навигации

Системы именования

Общие принципы
Контент, пользователи, контекст!
Сузить по возможности аудиторию.
Разрабатывать не обозначения, а последовательные системы
обозначений.
Задать общий тон системы
исходя из словаря пользователей
Сделать именования частью индекса или карты системы.
Обозначения должны представлять содержание и
систематизировать его.
81

Характеристики именования
Стиль
Пунктуация, регистры символов
Представление
Единообразие шрифтов, кеглей,
цветов, группировки
Синтаксис
Должен быть единым для каждой
конкретной системы обозначений,
не смешивать глаголы и
существительные
Детализация
Примерно одинаковая степень
конкретности
Полнота
В системе обозначений не должно
быть яных пробелов
Аудитория
Единообразие для аудитории
82

Анализ системы именований
Составить список всех именований, предлагаемых в
системе
Проверить каждое с точки зрения
Описательности
Различимости (два именования одного уровня не
должны конфликтовать за внимание пользователя)
Однородности (принадлежности одной области)
Сбалансированности
Повторяемости
Единообразия
83

84
Дмитрий Сатин, Национальный Центр Информатизации
Заместитель генерального директора
Контакты
@dmitrysatin
dmitry.satin
+7 (903) 130-0201
dmitrysatin@yandex.ru

Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмастеров

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмастеров

Similar to Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмастеров (20)

More from Yandex

More from Yandex (20)

Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмастеров