Использование usability guidelines для повышения качества веб-

разработокПавел Коноплицкий. UIDesign Group

Юзабилити

Степень эффективности, продуктивности и удовлетворенности, с которой продукт может использоваться определёнными пользователями для достижения определённых задач в определённом контексте.

(ISO 9241-11)

Пример (1)

Пример (2)

Пример (3)

Пример (3)

Usability guidelines

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

Преимущества

• Не требует дополнительных затрат

• Легко внедрить

• Быстро прививается

• Показывает конкретные проблемы интерфейса и описание решений

• Повышает «планку» качества

• Не требует специальных знаний для проведения тестирования

Недостатки

• Неполнота содержания

• Не решает проблем взаимодействия

• Для составления может понадобиться эксперт

Содержание

• Формы

• Кнопки

• Поля ввода

• Списки

• Системные сообщения и обработка ошибок

• Флажки и переключатели

• Текст

• Пошаговые действия (мастер)

• Капча

http://www.amazedev.com/usability_guidelines

Пример (1)

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

http://www.amazedev.com/usability_guidelines

Пример (2)

1.2 Названия полей выровнены по правой стороне. Расстояние от названия до поля для всех полей одинаковое.

http://www.amazedev.com/usability_guidelines

Пример (3)

3.3 Для полей ввода количественных характеристик (длинна, вес, рост, скорость, расстояние, размер и т.д.) необходимо указывать единицы измерения.

.

http://www.amazedev.com/usability_guidelines

Советы по составлению

• Правила должны быть абсолютными

• Правила должны устранять разногласия, унифицируя интерфейс

• Сохраняйте в качестве правил проверенные временем, лучшие решения (Best practice)

Устранение разногласий

http://measuringuserexperience.com/SubmitCancel/index.htmhttp://www.useit.com/alertbox/ok-cancel.html

Лучшие решения

http://p1uton.ru/2008/09/22/previous-and-next-actions-in-web-forms/

Внедрение

• «Заразите» руководство качеством и юзабилити

• Проведите работы по составлению usability guidelines

• Обсудите полученный список. Внесите коррективы

• Добейтесь, чтобы созданный документ стал стандартом

• Создайте категорию «юзабилити» в вашей баг-трекинговой системе

• Периодически пересматривайте существующие и добавляйте новые правила (кайдзен)

Используют guidelines

Microsoft Ribbon Bar (1)

Microsoft Ribbon Bar (2)

http://msdn.microsoft.com/en-au/library/cc872782.aspx

Экран (1)

Названия полей выровнены по правой стороне. Расстояние от названия до поля для всех полей одинаковое.

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

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

Экран (2)

Кнопка негативного действия («Удалить», «Стереть», «Отменить») всегда самая правая.Надписи на кнопках начинаются с большой буквы. Если надпись состоит из нескольких слов, то каждое слово начинается с большой буквы, кроме предлогов.

Развитие (1)

«Качество представляет собой не поддержание какого-то определённого стандарта, а живой и динамический процесс постоянного совершенствования»

«Вы можете не изменяться. Выживание не является обязанностью»

Эдвард Деминг

Развитие (2)

• Usability Guidelines

• Прототипирование (инструмент)

• Использование паттернов

• Обучение (книги, статьи, образцы)

Ресурсы (1)

Мэтью Линдерман, Джейсон ФрайдКак создать посещаемый сайт и избежать типичных ошибокhttp://www.ozon.ru/context/detail/id/3184017/http://www.books.ru/shop/books/488863

Jeff JohnsonGUI Bloopers 2.0http://www.gui-bloopers.com/

Ресурсы (2)

• Amazing Development

http://www.amazedev.com/usability_guidelines/

• Microsoft Ribbons Guidelines

http://msdn.microsoft.com/en-au/library/cc872782.aspx

• Apple User experience

http://developer.apple.com/documentation/UserExperience/index-date.html

• Sun Microsystems. OpenStep User Interface Guidelines

http://java.sun.com/products/jlf/ed2/guidelines.html

• Web Style Guide

http://webstyleguide.com/

• Контрольный список интерфейса (Владислав Головач, Александр Белышкин. Usethics)

http://usethics.ru/lib/software_checklist.html

Спасибо за внимание

Вопросы?

Коноплицкий ПавелUIDesign Grouppavel@uidesign.ruhttp://www.uidesign.ruhttp://www.amazedev.com