Тема "Веб-дизайн и юзабилити"
Место темы в курсе «ИСРПО»
Тема “ Разработка Web-приложений.” изучается на 4-м курсе. На всю тему отводится 16 часов.
Учащиеся должны знать: общие вопросы сайтостроения, современные подходы в технологиях создания сайтов и web-дизайне, понятия “стиль” и “формат”, основы языка HTML; принципы создания сайта инструментальными средствами. Учащиеся должны уметь: представить концепцию сайта и поэтапно ее реализовать; создавать простейший сайт вручную; создавать web-страницы с помощью HTML-редактора.
Рассматривать вопросы дизайна кажется необходимым наряду с выработкой технических навыков по созданию web-страниц. Научившись самостоятельно конструировать простейшие сайты, студенты скоро замечают их несовершенство и стремятся изменить свою работу, сделав ее более оригинальной, яркой, запоминающейся. Научить чувству прекрасного, дизайнерскому мастерству, безусловно, за три урока нельзя. Но продемонстрировать детям разные точки зрения (может быть, они найдут в спорах авторитетов аргументы для своей точки зрения), показать некоторые приемы и средства из арсенала дизайнеров-профессионалов кажется правильным. Хочу заметить, что эти уроки всегда проходят в горячих (но конструктивных) спорах, вызывают живой интерес у всех ребят, поражают буйством фантазии и оригинальностью некоторых идей.
Начало урока
Современные подходы к оформлению сайтов. Юзабилити.
Цели:
обсудить наличие разных мнений и многообразие подходов к проблеме оформления сайта,
побудить учащихся к анализу различных ситуаций, диктующих то или иное оформление сайта,
познакомить с понятием юзабилити,
сформулировать основные рекомендации, повышающие юзабилити web-сайта
Оборудование и материалы к уроку:
демонстрационное оборудование (мультимедийный проектор, экран), функционирующая локальная сеть; программное обеспечение: web-редактор, графические редакторы, текстовый редактор, библиотеки шрифтов, фонов и рисунков, демонстрационные материалы (сайты студентов).
Подготовка к уроку:
1) на партах учащихся находятся тексты «10 правил веб-дизайна»
2) подготовлены (папки на рабочем столе) демонстрационные сайты (1, 2, 3)
3) на предыдущем уроке в качестве домашнего задания учащиеся получили статьи для ознакомления и анализа
Ход урока:
1. Орг. момент, повторение (10 минут)
Тема сегодняшнего урока – “Веб – дизайн и Юзабилити” (тема урока представлена на экране).
На предыдущих уроках мы получили знания о технической стороне сайтостроения.
Учитель: Какие знания нам необходимы для того, чтобы создать web-страницу?
(Предполагаемые ответы учеников: знания языка HTML, по крайней мере, основных тегов).
Зачем используют web- редакторы?
(Предполагаемые ответы учеников: ускорение работы; возможность сделать сайт, обладая минимальными знаниями; автоматизация рутинных операций…)
О каких “минусах” web-редакторов необходимо помнить?
(Предполагаемые ответы учеников: излишний код, ограничение некоторых возможностей (например, стандартными средствами нельзя сделать рисунок бегущей строкой), необходимость контроля за абсолютными - относительными адресами, громоздкие динамические эффекты…).
Какой технический прием используется для того, чтобы структура сайта соблюдалась при разных режимах просмотра?
(Предполагаемые ответы учеников: авторская или готовая макетная таблица).
Результат: актуализация знаний, повторение
2. Обсуждение домашнего задания. (10 минут)
Технические навыки для создания сайтов необходимы, однако не стоит забывать о том впечатлении, которое производит сайт на пользователя.
Какие сегодня существуют подходы к оформлению сайтов? В чем заключается их суть.
Виды верстки.
Есть ли среди вас сторонники того или иного подхода?
Какие весомые аргументы приводят сторонники “содержательного” подхода?
Обсуждение обычно проходит довольно живо. В силу своего возраста ребята часто имеют категоричное мнение, ниже при этом обосновывая его вескими аргументами, которые можно почерпнуть, в том числе, и из предложных статей.
3. Презентация слайдов о профессиях в сфере веб-разработки (10 минут)
Рассказ о специфике различных профессий в сфере веб-разработки (Презентация).
4. Понятие юзабилити. (10 минут)
В обзоре профессий вы встречались с понятием “юзабилити”. На сегодняшний момент специалисты не дали окончательного определения.
Как вы понимаете, что входит в понятие “юзабилити”?
(Предполагаемые ответы учеников: задача юзабилити – сделать так, чтобы пользователю было удобно и понятно, как пользоваться ресурсом).
Юзабилити – набор качеств web-сайта, влияющих на эффективность работы и удобство использования продукта.
С помощью каких приемов автор сайта старается повысить юзабилити?
(Предполагаемые ответы студентов: ученики отмечают структурированность информации – разделы, абзацы, списки; наличие навигационной панели, разумное цветовое решение, подборку шрифтов…).
Попробуем сформулировать общие рекомендации, как сделать сайт понятным и эффективным в использовании.
Высокий уровень юзабилити предполагает:
1) понятный интерфейс:
2) эффективный поиск нужной информации:
читаемость текста
выделение разделов
структура информации (списки, таблицы)
один абзац – одна идея
5. Подготовка к демонстрации проектной деятельности. (15 минут)
По мнению дизайнеров, особое внимание при создании сайта следует уделять первой (главной) странице.
Почему?
(Предполагаемые ответы учеников: это лицо сайта; от того, как выглядит главная страница, зависит, пойдет ли пользователь дальше по сайту…).
После того, как мы сформулировали рекомендации, применим их на практике.
Студенты копируют необходимый материал с сетевого каталога.
Попробуйте оценить дизайн и юзабилити следующих сайтов.
misis.ru
www.tstu.ru
www.tsutmb.ru
www.kit68.ru
Работа с ресурсом wikiwall.
6. Демонстрация лучших проектов. (35 минут)
Студенты: демонстрируют и комментируют свой макет, анализируют чужие работы.
Результат: закрепление понятия.
7. Итог урока:
Существуют разные подходы к оформлению сайта. Сегодня мы убедились в том, что, в зависимости от того, какова концепция, идея нашего сайта, на первый план может выйти или содержание, или дизайн сайта. Но в любом случае мы должны понимать, что пользоваться нашим продуктом будут другие, поэтому надо позаботиться о юзабилити нашего сайта.
587
75 377 
