Современные подходы к оформлению сайтов Юзабилити

Автор: Дугина Ирина Радиковна

Организация: МБОУ СОШ с.Камышки

Населенный пункт: Саратовская область, Александрово-гайский район, с.Камышки

Дополнительное образование «Юный редактор сайта»  посещают учащиеся 9-11 классов . В 8 классе на уроках информатики они уже знакомы с темой «Всемирная паутина», в 9 классе подробно изучают тему «Телекоммуникационные технологии» ( по  курсу Л.Л.Босовой)

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

Сегодня web-ресурсы являются необходимым источником информации, а, кроме того, для многих учащихся могут стать средством творческой самореализации. Научившись самостоятельно конструировать простейшие сайты, ученики скоро замечают их несовершенство и стремятся изменить свою работу, сделав ее более оригинальной, яркой, запоминающейся. Продемонстрировать детям разные точки зрения (может быть, они найдут в спорах авторитетов аргументы для своей точки зрения), показать некоторые приемы и средства из арсенала дизайнеров-профессионалов для начала будет  правильным. Хочу заметить, что эти занятия всегда проходят в горячих (но конструктивных) спорах, вызывают живой интерес у всех ребят, поражают буйством фантазии и оригинальностью некоторых идей.

Методическая разработка занятия

Современные подходы к оформлению сайтов

Юзабилити

Цели занятия:

• обсудить наличие разных мнений и многообразие подходов к проблеме оформления сайта,
• побудить учащихся к анализу различных ситуаций, диктующих то или иное оформление сайта,
• познакомить с понятием юзабилити,
• сформулировать основные рекомендации, повышающие юзабилити web-сайта

Оборудование и материалы к занятию:

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

Подготовка к уроку:

1) на партах учащихся находятся тексты задания «Макет» (см.Приложение1.docх)

2) подготовлены (ярлыки на рабочем столе) демонстрационные сайты (1, 2, 3)

3) на предыдущем уроке в качестве домашнего задания учащиеся получили ссылку на статью для ознакомления и анализа (http://www.i2r.ru/static/255/out_9697.shtml)

Ход занятия:

1. Орг. момент, повторение

Тема сегодняшнего занятия – «Современные подходы к оформлению сайтов. Юзабилити». На предыдущих занятиях мы получили знания о технической стороне сайтостроения.

Педагог: Какие знания нам необходимы для того, чтобы создать web-страницу?

(Предполагаемые ответы учеников: знания языка HTML, по крайней мере, основных тегов).

Зачем используют web- редакторы, в частности, MS FrontPage?

(Предполагаемые ответы учеников: ускорение работы; возможность сделать сайт, обладая минимальными знаниями; автоматизация рутинных операций…)

О каких “минусах” web-редакторов необходимо помнить?

(Предполагаемые ответы учеников: излишний код, ограничение некоторых возможностей (например, стандартными средствами нельзя сделать рисунок бегущей строкой), необходимость контроля за абсолютными - относительными адресами, громоздкие динамические эффекты…).

Какой технический прием используется для того, чтобы структура сайта соблюдалась при разных режимах просмотра?

(Предполагаемые ответы учеников: авторская или готовая макетная таблица).

Есть ли вопросы?

2. Обсуждение домашнего задания.

Технические навыки для создания сайтов необходимы, однако не стоит забывать о том впечатлении, которое производит сайт на пользователя.

В качестве домашнего задания вам было предложено познакомиться с несколькими статьями, которые помогут нам в изучении темы.

Какие сегодня существуют подходы к оформлению сайтов? В чем заключается их суть.

Есть ли среди вас сторонники того или иного подхода?

Какие весомые аргументы приводят сторонники “содержательного” подхода?

Как обосновывают свою позицию дизайнеры-графики?

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

В ходе дискуссии, как правило, удается подвести кружковцев к выводу о том, что в зависимости от цели сайта, главную роль может играть и содержание, и оформление. В этом помогает демонстрация различных работ. Примеры скриншотов сайтов (сайт1.jpg,  сайт2.jpg)

Какую задачу вы выводили на первый план – оформление или содержание, когда работали над проектом своего сайта в “Блокноте”? А в web-редакторе?

(Предполагаемые ответы учеников: в “Блокноте” - содержание, так как не имели достаточных навыков для оформления; в редакторе смогли больше внимания уделить оформлению, так как меньше времени тратили на рутинную работу).

Педагог: задает вопросы, направляет беседу, демонстрирует работы

Ученики: аргументируют свою точку зрения, анализируют работы

Результат: констатация различных подходов к оформлению сайта, анализ оправданности того или иного подхода, повышение мотивации, подведение к новому понятию.

3. Понятие юзабилити.

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

Как вы понимаете, что входит в понятие «юзабилити»?

(Предполагаемые ответы учеников: задача юзабилити – сделать так, чтобы пользователю было удобно и понятно, как пользоваться ресурсом).

Юзабилити – набор качеств web-сайта, влияющих на эффективность работы и удобство использования продукта.

Откройте главную страницу сайта 3 (см. приложение скриншот сайт3.jpg) «Enterprise».

С помощью каких приемов автор сайта старается повысить юзабилити?

(Предполагаемые ответы учеников: ученики отмечают структурированность информации – разделы, абзацы, списки; наличие навигационной панели, разумное цветовое решение, подборку шрифтов…).

Попробуем сформулировать общие рекомендации, как сделать сайт понятным и эффективным в использовании.

Высокий уровень юзабилити предполагает:

1) понятный интерфейс:

• панель навигации
• одинаковые названия разделов и ссылок

2) эффективный поиск нужной информации:

• читаемость текста
• выделение разделов
• структура информации (списки, таблицы)
• один абзац – одна идея

Известный специалист по юзабилити Якоб Нильсен является автором многих статей; в них он более подробно рассматривает те методы, с помощью которых можно повысить юзабилити сайта.

Ученики: анализируют готовый сайт, формулируют основные принципы, записывают основные понятия.

Педагог: демонстрирует готовый продукт, акцентирует внимание на ключевых моментах, фиксирует основные факты на экране.

Результат: введение и отработка нового понятия.

4. Проектная деятельность.

По мнению дизайнеров, особое внимание при создании сайта следует уделять первой (главной) странице.

Почему?

(Предполагаемые ответы учеников: это лицо сайта; от того, как выглядит главная страница, зависит, пойдет ли пользователь дальше по сайту…).

После того, как мы сформулировали рекомендации, применим их на практике.

Создайте средствами web-редактора макет первой страницы сайта на заданную тему, стараясь учитывать интересы потенциального пользователя.

На парте у каждого лежит задание (см. Приложение1.docх).

Продумайте, как вы прокомментируете свой макет.

Педагог: формулирует задание, помогает организовать работу, подобрать материалы. Ученики: занимаются проектной деятельностью. Результат: макет главной страницы сайта.

5. Демонстрация лучших проектов.

Педагог:  отбирает наиболее характерные проекты и демонстрирует их классу. Ученики: комментируют свой макет, анализируют чужие работы. Результат: закрепление понятия.

6. Итог занятия:

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

7. Домашнее задание:

Продумать идеи сайтов, где на первом месте стоял бы 1) дизайн, 2) содержание. Привести 2 – 3 довода в пользу каждой концепции.

Список используемой литературы:

1. Дунаев В.В. Сам себе Web-мастер. – СПб.: БХВ-Петербург, Арлит, 2000.
2. Курова И.А. Руководство по HTML. – М.: БИНОМ, 2001.
3. Ларсон М. Создание Web-страниц с помощью Microsoft Office. – М.: БИНОМ, 1998.
4. Леонтьев В.П. Новейшая энциклопедия персонального компьютера 2002. – М.: ОЛМА-ПРЕСС, 2002.
5. Леонтьев В.П. Новейшая энциклопедия персонального компьютера. – М.: ОЛМА-ПРЕСС, 2004.
6. Сагман С. Microsoft Office 2000. – М.: ДМК Пресс, 2002.
7. Симонович С.В. и др. Общая информатика. Учебное пособие для средней школы. – М.: АСТ-ПРЕСС, 1998.
8. Угринович Н.Д. Информатика и информационные технологии. – М.: Лаборатория Базовых Знаний, 2002.
9. http://www.i2r.ru/static/255/out_9697.shtml

Опубликовано: 04.06.2015