ИНСТИТУТ ПРОБЛЕМ ИНФОРМАТИКИ ИТО-2009 5-7 ноября 2009 года, г. Москва ПРОЕКТИРОВАНИЕ НАВИГАЦИИ В ЭЛЕКТРОННЫХ ОБРАЗОВАТЕЛЬНЫХ РЕСУРСАХ Гордон Лев Григорьевич. - презентация

1 ИНСТИТУТ ПРОБЛЕМ ИНФОРМАТИКИ ИТО ноября 2009 года, г. Москва ПРОЕКТИРОВАНИЕ НАВИГАЦИИ В ЭЛЕКТРОННЫХ ОБРАЗОВАТЕЛЬНЫХ РЕСУРСАХ Гордон Лев Григорьевич Шпакова Татьяна Юрьевна

2 Что такое навигация? Навигация – это набор способов перехода между страницами и внутри них. Навигация по ЭОР, как атлас дорог, должна быть четкой, структурированной и интуитивно понятной. Удобная навигация облегчает работу с ресурсом.

3 Основные элементы навигации ссылки (текстовые, графические, ссылки-якоря, для перемещения внутри страницы); навигационные меню; поиск (простой или расширенный).

4 Виды навигации меню; навигационная строка, или цепочка ссылок; стандартные действия; контекстная навигация; межтекстовая навигация; акцидентная навигация; поисковая навигация.

5 Меню Меню – это наиболее распространенный вид навигации. В меню содержатся гиперссылки на структурные элементы ресурса, выстроенные по уровням (разделы, подразделы и т.д.). Обычно в ЭОР есть как минимум одно меню – главное меню.

6 Главная страница ИУМК «Геометрия. Динамическая геометрия. 9 класс». ОАО «Издательство Просвещение»

7 Одноуровневые меню применяются в ЭОР, содержащих небольшое количество страниц. Такие меню обычно размещают горизонтально вверху либо внизу страницы, а также вертикально справа или слева.

8 Главное меню диска «Образовательная коллекция. География 6-10 классы». ЗАО «1С»

9 Многоуровневые меню раскрывающиеся меню Диск «Виртуальная школа Кирилла и Мефодия. Уроки литературы 10 класс». ООО «Кирилл и Мефодий»

10 Диск «Образовательная коллекция. Химия для всех XXI. Химические опыты со взрывами и без». ЗАО «1С»

11 Многоуровневые меню вкладки Фрагмент страницы обучающей игры-энциклопедии «Современники». ООО «МСМП»

12 Меню в виде выпадающих списков Страница комплексного программного продукта Net-школа

13 Прокручивающееся меню пользователи выбирают одно изображение из галереи, просматривая уменьшенные копии изображений, часть из которых видна на экране. Если пользователь перемещает указатель мыши в сторону от центра, то список изображений прокручивается в противоположную сторону.

14 Навигационная строка, или цепочка ссылок путь от главной страницы или корневого раздела до текущей позиции. Обычно представляет собой полосу в верхней части страницы примерно такого вида: Главная страница Раздел Подраздел Текущая страница

15 Фрагмент страницы сайта Единой коллекции цифровых образовательных ресурсов

16 Стандартные действия элементы такой навигации обычно представляют собой пиктограммы специальных разделов ресурса, таких как главная страница, отправка письма, поиск по ЭОР, развернуть во весь экран, закрыть окно и т.п.

17 ИИСС «Школьная урбанистика». ООО «ДОС»

18 Контекстная навигация ссылки на разделы, тематически связанные с текущим разделом.

19 ИИСС «От Руси к России». ФГОУ ВПО «Санкт-Петербургский государственный университет»

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

21 ИИСС «История научного эксперимента». ООО «Физикон»

22 Электронный альбом Государственного Русского музея

23 Акцидентная навигация различные графические и текстовые блоки, помогающие привлечь внимание и выделить некоторые разделы ресурса.

24 Фрагмент главной страницы сайта «Клавиатурный тренажер. Слепой метод печати» (

25 Поисковая навигация полезна в случаях, когда внутренних элементов в разделе больше, чем пользователь может просмотреть за два-три клика. Тогда, возможно ему удобнее будет ввести искомое слово в строку поиска.

26 ИИСС «Школьная урбанистика». ООО «ДОС»

27 Пример расширенного поиска ИИСС «Животный мир России. Птицы. Европейская Россия, Урал, Западная Сибирь. Мультимедийный справочник-определитель». ЗАО «ИстраСофт»

28 Рубрикаторы страничный; алфавитный; типовой, или классовый; параметрический; тэговый, или облако тэгов.

29 Страничный рубрикатор ИУМК «Физика. 7-9 классы». ФГУП «Издательство Просвещение»

30 Алфавитный рубрикатор ИИСС «От Руси к России». ФГОУ ВПО «Санкт-Петербургский государственный университет»

31 Типовой, или классовый, рубрикатор Информационный интегрированный продукт «КМ-Школа». Автоматизированное рабочее место учителя

32 Параметрический рубрикатор определяется часть параметров, которые могут сузить поиск. Либо это могут быть параметры одного конфигурируемого элемента поиска. Например: Жанры Камерная Франц Шуберт.

33 ИИСС «Соната. Мировая культура в зеркале музыкального искусства». ЗАО «ИстраСофт»

34 Тэговый рубрикатор, или облако тэгов при его использовании каждую страницу можно снабдить одним или несколькими тэгами – ключевыми словами или выражениями в формате гиперссылок, позволяющими получить представление о тематическом содержании раздела.

35 Страница сообщества Живого Журнала «ВАШ ФОТОРЕПОРТАЖ»

36 Рекомендации по организации навигации по ЭОР навигация должна быть в первую очередь простой и интуитивно понятной; при создании элементов навигации желательно придерживаться общепринятых традиций; не следует использовать таких элементов дизайна, которые могут восприниматься пользователем неоднозначно;

37 по возможности, следует использовать текстовую навигацию; навигация не должна изменять свой вид от страницы к странице. Исключением из этого правила является навигация Главной страницы, которая может незначительно отличаться от остальных страниц ресурса:

38 Главное меню и меню раздела «Знаете ли вы Кремль?» ИИСС «Виртуальные экскурсии по Московскому Кремлю». ЗАО «Новый Диск»

39 Главное меню и меню раздела ИИСС «Соната. Мировая культура в зеркале музыкального искусства». ЗАО «ИстраСофт»

40 элементы навигации должны быть четко видны на странице: ИИСС «Путешествие в страну Политика». ООО «Издательство СМИО Пресс»

41 элементы навигации необходимо делать крупного размера; ИУМК «Физика. 7-9 классы». ФГУП «Издательство Просвещение»

42 область «горячих зон» для гиперссылок должна четко соответствовать самой ссылке и быть достаточного размера; кнопка перехода на Главную страницу ресурса в ЭОР, имеющих сложную и разветвленную структуру, является необходимым элементом навигации:

43 в ЭОР не должно быть ошибочных ссылок, ведущих в никуда; желательно, чтобы каждая страница ресурса имела название; динамически раскрывающиеся меню должны отображаться достаточно долго; не следует делать длинные списки в вертикальных раскрывающихся меню, а также следует избегать длинных выпадающих списков;

44 горизонтально раскрывающиеся многоуровневые меню не должны иметь большую вложенность; необходимо сделать горизонтально раскрывающиеся многоуровневые меню контрастным по отношению к находящемуся под ним тексту и фону:

45 Электронный учебник «Общественная география современного мира». ООО «Дрофа»

46 при разработке навигации типа «хлебные крошки» необходимо следовать следующим правилам: помещать навигационную строку вверху страницы, желательно над всем содержанием страницы; последний элемент списка не оформлять как гиперссылку, поскольку он является названием текущей страницы; использовать для навигационной строки небольшой размер шрифта, чтобы подчеркнуть ее отличие от основной навигации ЭОР;

47 в качестве разделителя лучше использовать символы «>» или «», как наиболее наглядные и ассоциирующиеся с движением вперед; выделить последний элемент в списке, например, полужирным начертанием, с целью показать текущее местоположение.

48 Фрагмент страницы сайта Единой коллекции цифровых образовательных ресурсов

49 при проектировании меню типа «вкладки» следует придерживаться следующих основных рекомендаций: вкладки должны быть хорошо прорисованы и создавать иллюзию, что активная вкладка находится впереди остальных; вкладки должны выделяться цветом; при загрузке страницы с меню-вкладками одна из вкладок должна быть выбрана.

50 Страница каталога ресурсов сайта Федерального центра информационно-образовательных ресурсов (ФЦИОР)

51 Фрагмент страницы обучающей игры-энциклопедии «Современники». ООО «МСМП»

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

53 ИИСС «Школьная урбанистика». ООО «ДОС» интерфейс поисковой системы следует располагать в том месте, где пользователи привыкли его находить:

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

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

56 внизу страницы результатов следует поместить ссылку на расширенный поиск, если он предусмотрен в ресурсе; если не найден ни один элемент, то на странице результатов обязательно должно выводиться сообщение, о том, что по запросу ничего не найдено, а не пустая страница; здесь же следует поместить окно поиска с данным запросом, чтобы пользователь в случае необходимости мог исправить запрос, а также предусмотреть помещение ссылки на расширенный поиск, если он предусмотрен.

57 Некоторые дополнительные рекомендации: не следует увлекаться созданием слишком красивых и необычных элементов навигации; активные ссылки должны обязательно подразумевать переход по ним;

58 не должно быть ошибочных ссылок; Модуль «Абсолютизм» из каталога ресурсов по истории ФЦИОР

59 если на странице размещено много информации и используется скроллинг, следует предусмотреть ссылку наверх страницы, если там расположены какие- либо управляющие элементы: ИИСС «Алгебраические задачи с параметрами». ЗАО «1С»

60 Список используемых источников Гордон Л.Г., Логинова Т.З., Христочевский С.А., Шпакова Т.Ю. Современные требования к электронным изданиям образовательного характера. – М.: ИПИРАН, Нильсен Я. Веб-дизайн: книга Якоба Нильсена – СПб: Символ-Плюс, Нильсен Я., Лоранжер Х. Web-дизайн: удобство использования Web-сайтов. – М.: ООО «И.Д. Вильямс», Норман Д.А. Дизайн привычных вещей. – М.:, Издательский дом «Вильямс», 2006.

61