ТРЕБОВАНИЯ К ГРАФИЧЕСКОМУ ДИЗАЙНУ И ЮЗАБИЛИТИ ОБРАЗОВАТЕЛЬНЫХ ПОРТАЛОВ презентация

mak@ufamedia.ru
Уфимский государственный авиационный технический университет

к разработке интерфейса пользователя
Обеспечение требований к юзабилити
Методы технической реализации элементов дизайна и требований к юзабилити
Сопровождение образовательных интернет-приложений по вопросам дизайна и юзабилити
Работа над ошибками

ПЛАН ДОКЛАДА

для основной группы пользователей
Уникальность и запоминаемость
Гибкость дизайн-решения

уверенность, стабильность и высокую стоимость

«Пастельные», нежные бежевые, розовые, голубоватые... Женственные, мягкие, расслабляющие...

«Здоровые», из американской психологии... Чистота, здоровье, уверенность, семья....

«Природные», близкие к естественным органическим, природным компонентам...

Как вариант использования цвета - «Растяжки»... Обычно тональные оттенки одного цвета, и как акцент - более активный цвет

без засечек (гуманистическая гарнитура)

Verdana –шрифт разработанный специально для монтирора

abc

abc

abc

например в Интернет-версиях газет. Times хорошо воспринимается в кегле 9pt и более, в мелком кегле засечки затрудняют восприятие
Arial можно назвать нейтральным шрифтом. Он также получил широкое распространение на веб-страницах. Что же касается размера, Arial несколько проигрывает в мелком кегле, но при использовании в заголовках (12-14pt) зачастую смотрится лучше
Verdana – самый новый из рассмотренного семейства. Более гармонично смотрится с модерновым, «высокотехнологичным» дизайном, даже при 7 pt текст не теряет читаемость

специального образования
Навигация
Изложение информационного материала
Справочная информация
Организация поиска по сайту
Использование методологии Rational Unified Process в проектировании интерфейсов веб-приложения

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

Специальные принципы юзабилити детского обучающего веб-сайта

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

Материальное меню

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

Инструментальное меню

Пример иерархической навигации

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

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

страницы под различные разрешения монитора
Версия для печати
Иерархические таблицы стилей (CSS)
Представление «тяжелого» содержимого
Правила экранной типографики
Пиктограммы

с изменяемой шириной дизайна

ко времени ответа:
- Непосредственное управления < 0,1 секунды,
- Если физической связи между действиями и объектом нет, то до 1,0 секунды.
Рекомендуется ориентироваться на ПО для воспроизведения разработанное год назад. Если для просмотра необходима установка для специализированного ПО, надо обеспечить предварительный просмотр средствами стандартного браузера (версия которого отстает от самой последней на 2).

Время ответа
При размещении на веб-странице ссылки на файл, загрузка которого для целевой аудитории сайта требует более 10 секунд, рекомендуется указывать формат, если он не стандартный, объем и продолжительность воспроизведения.
При публикации видеофильмов целесообразно приводить аннотации и по 1-2 кадра фильма.

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

Уменьшение размера изображения
При уменьшении иллюстраций (для предпросмотра), необходимо выбрать bicubic с наивысшим качеством как метод ресэмплинга изображения в редакторе.
Для сохранения читаемости при уменьшении изображения до 10% необходимо:
- сначала обрезать изображение до 32% относительно исходного размера
- затем уменьшить его масштаб до 32% от размера версии после кадрировки

правильность ее типографического оформления.
Можно сказать, что соблюдение этих правил не менее важно, чем соблюдение правил орфографии языка.
Подробно см. Ру/ководство Артемия Лебедева http://www.tema.ru/kovodstvo.

пиктограмм
если пиктограммы могут быть трактованы неоднозначно, то их значение необходимо дублировать текстом

Пример неправильного использования пиктограмм

сайта
Юзабилити-методы исследования веб-сайта
Автоматизация юзабилити тестирований веб-сайтов

Logs)
Фиксация «мыслей вслух» (Thinking Aloud Protocol)
Фокусные группы (Focus Groups)

Юзабилити-методы исследования веб-сайта

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

6. РАБОТА НАД ОШИБКАМИ

Также см.:
10 главных ошибок Flash-роликов в известной статье Кирилла Вятчина http://www.usethics.ru/lib/flash1/10 главных ошибок Flash-роликов в известной статье Кирилла Вятчина http://www.usethics.ru/lib/flash1/ и чеклист дизайнера веб-интерфейсов в статье Влада Головача «Контрольный список Веб-интерфейса» http://www.webclub.ru/content/design_usability/article-272.html

376с.
Материалы исследований «Нильсен Норманн Групп». http://www.nngroup.com.
Круг С. Веб-дизайн: книга Стива Круга или «не заставляйте меня думать!» – Пер. с англ. – СПб: Символ-Плюс, 2001. – 200с.
Нильсен Я. Веб-дизайн: книга Якоба Нильсена. – Пер. с англ. – СПб: Символ-Плюс, 2000. – 512с.
Унифицированный процесс разработки программного обеспечения. – СПб.: Питер, 2002. – 496с.
Improving Web Site Usability and Appeal. MSN Usability research. July, 1997.
Артемий Лебедев. Ру/ководство. http://www.tema.ru/kovodstvo.
Николий Покровский. Usability-методы исследования Web-сайта. http://www.usability.ru/articles/um.htm.
Кирилл Вятчин.10 главных ошибок Flash-роликов. http://www.usethics.ru/lib/flash.
Влад ГоловачВлад Головач. Контрольный список Веб-интерфейса http://www.webclub.ru/content/design_usability/article-272.html.

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

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

Наши разработки: www.phototass.ru – сайт Фото ТАСС; www.amik.ru – сайт КВН; www.orbakaite.net – сайт Кристины Орбакайте; www.bashinfo.ru – информационно-справочная система «Башкортостан» и многие другие.