Веб Дизайн

Лекция 8

Twitter Bootstrap, Тестирование Юзабилити

Vladimir Tomberg, PhD

Эстонский Университет Прикладных Наук

по Предпринимательству Майнор

Февраль 2015

Pic

ture

sourc

e:

htt

p:/

/userc

ente

redconte

nt.

com

ПРЕЗЕНТАЦИЯ ДОМАШНИХ РАБОТ

2

Продолжение демо Twitter Bootstrap

Ссылка на демонстрационные файлы

http://goo.gl/gZlUVV

Ссылка на фреймворк

http://getbootstrap.com/

Руссифицированный ресурс

http://bootstrap-ru.com/

3

Задание 19. Продолжаем улучшать код

• Используя полученные знания продолжите улучшать ваш Bootstrap код стилизуя элементы;

• Результаты опубликуйте в LePress

4

ЮЗАБИЛИТИ ТЕСТИРОВАНИЕ

5

Юзабилити тестирование

• Юзабилити тестирование — хороший путь, чтобы узнать, просто ли использовать страницу, а если нет, то выяснить, в чем состоит проблема.

6

Тестирование юзабилити

• Тестирование юзабилити определяет, насколько просто использовать Веб-сайт. Это другая технология наблюдения, при которой тестируемого просят выполнить некоторую задачу (“купить каталог”);

• Человека, выполняющего задачу просят “мыслить вслух” во время ее исполнения. Тестирующий при этом только записывает свои наблюдения, но не задает вопросовисполнителю

7

Подготовка к тестированию

Подготовка к тестированию сводится к решению простых задач:

1. Определиться, что именно будет тестироваться, сайт целиком или его отдельная функциональная часть?

2. Написать задачи для выполнения. Например: “Посетить сайт, ознакомиться с ним и стать его зарегистрированным участником”, или “Найти подходящее платье и купить его”;

3. Найти людей для тестирования. Будет лучше, если это будут люди из целевой аудитории, но это не обязательно. Нельзя использовать людей из команды по разработке сайта

8

10 ЮЗАБИЛИТИ ЭВРИСТИК

ЯКОБ НИЛЬСЕН

1. STATEFULNESSВИДИМОСТЬ СОСТОЯНИЯ СИСТЕМЫ

• Правило обратной связи — система должна всегда информировать пользователя осостоянии своей работы с помощью соответствующих средств, в разумное время: Как приложение выглядит во время загрузки?

Возможно ли прерывание программы во время ее выполнения?

Как пользователь узнает, что его запрос выполнен?

1. STATEFULNESSВИДИМОСТЬ СОСТОЯНИЯ СИСТЕМЫ

1. STATEFULNESS - ПРИМЕРЫ

2. ERROR CATCHINGОБРАБОТКА ОШИБОК

• Кто вызывает ошибку - пользователь или система?

• Если пользователь, получает ли он сообщение о том, как исправить ошибку?

• Если система, донесено ли это ясным образом до пользователя?

• Предотвращает ли система потерю пользовательского состояния (например, введенные данные) после ошибки?

2. ERROR CATCHINGОБРАБОТКА ОШИБОК

2. ERROR CATCHINGОБРАБОТКА ОШИБОК

3. ERROR PREVENTIONПРЕДУПРЕЖДЕНИЕ ОШИБОК

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

• Обеспечивает ли приложение ввод для пользователей склонных к ошибкам?

• Можно ли упростить набор возможностей не изменяя запланированных действий пользователя?

3. ERROR PREVENTIONПРЕДУПРЕЖДЕНИЕ ОШИБОК

3. ERROR PREVENTIONПРЕДУПРЕЖДЕНИЕ ОШИБОК

3. ERROR PREVENTIONПРЕДУПРЕЖДЕНИЕ ОШИБОК

4. TIME MATCHINGВРЕМЯ ОПОВЕЩЕНИЯ

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

• Может ли операция быть отменена (undo)?

• Могут ли пользователи найти, где они были раньше?

• Насколько далеко перемещаться назад могут/нуждаются пользователи?

4. TIME MACHININGВРЕМЯ ОПОВЕЩЕНИЯ

5. OFFER AN EXPRESS ROUTEНАЛИЧИЕ БЫСТРОГО ПУТИ

• Все ли потребности в информации абсолютно необходимы?

• Имеют ли поля ввода значения поумолчанию?

5. OFFER AN EXPRESS ROUTEНАЛИЧИЕ БЫСТРОГО ПУТИ

Чем дальше или точнее выполняется движение, тем больше коррекции необходимо для его

выполнения, и соответственно, больше времени требуется для внесения этой коррекции

6. FITTS' LAW - ЗАКОН ФИТТСА

6. FITTS' LAW - ЗАКОН ФИТТСА

• Соответствует ли размер объектов их важности?

• Достаточно ли близко расположены объекты для навигации и действий, чтобы избежать ошибок?

• Сгруппированы ли ближе друг к другу элементы которые используются совместно?

6. FITTS' LAW - ЗАКОН ФИТТСА

7. CONSISTENCY AND STANDARDSЕДИНООБРАЗИЕ И СТАНДАРТЫ

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

• Отвечает ли система принятым на платформе стандартам?

• Соблюдается ли единообразие в интерфейсе от начала до конца?

7. CONSISTENCY AND STANDARDSЕДИНООБРАЗИЕ И СТАНДАРТЫ

8. HELP AND DOCUMENTATIONПОМОЩЬ И ДОКУМЕНТАЦИЯ

• Может пользователь получить помощь в любой момент?

• Возможности помощи имеются там где необходимо? Их нет там, где они не нужны?

• Ясно ли документация ссылается на все документированные элементы?

8. HELP AND DOCUMENTATIONПОМОЩЬ И ДОКУМЕНТАЦИЯ

8. HELP AND DOCUMENTATIONПОМОЩЬ И ДОКУМЕНТАЦИЯ

9. AESTHETIC AND MINIMALIST DESIGNЭСТЕТИЧНЫЙ ДИЗАЙН И МИНИМАЛИЗМ

• Усваивается ли информация раздельно?

• Может ли приложение обеспечить необходимую информацию без перегруженного интерфейса?

• Можно ли разбить большие области на малые?

9. AESTHETIC AND MINIMALIST DESIGNЭСТЕТИЧНЫЙ ДИЗАЙН И МИНИМАЛИЗМ

10. MATCH BETWEEN SYSTEM AND THE REAL WORLDСООТВЕТСТВИЕ СИСТЕМЫ РЕАЛЬНОМУ МИРУ

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

10. MATCH BETWEEN SYSTEM AND THE REAL WORLDСООТВЕТСТВИЕ СИСТЕМЫ РЕАЛЬНОМУ МИРУ

10. MATCH BETWEEN SYSTEM AND THE REAL WORLDСООТВЕТСТВИЕ СИСТЕМЫ РЕАЛЬНОМУ МИРУ

10. MATCH BETWEEN SYSTEM AND THE REAL WORLDСООТВЕТСТВИЕ СИСТЕМЫ РЕАЛЬНОМУ МИРУ

10. MATCH BETWEEN SYSTEM AND THE REAL WORLDСООТВЕТСТВИЕ СИСТЕМЫ РЕАЛЬНОМУ МИРУ

Задание 20. Тестирование юзабилити с использованием 10 эвристик

• Написать задачи для выполнения. Например: “Посетить сайт, ознакомиться с ним и стать его зарегистрированным участником”, или “Найти подходящее платье и купить его”;

• Провести анализ собственного проекта на соответствие эвристикам юзабилити;

• Провести анализ 1го проекта однокурсника на соответствие эвристикам юзабилити (предоставить задачи для своего сайта однокурснику!);

• Отчеты выложить В LePress;• На основании собственного анализа и анализа однокурсников

сделать изменения в дизайне;• Улучшенную версию опубликовать и сослаться на нее В LePress