Использование usability guidelines для повышения качества веб-разработок Павел Коноплицкий. UIDesign Group

Юзабилити Степень эффективности, продуктивности и удовлетворенности, с которой продукт может использоваться определёнными пользователями для достижения определённых задач в определённом контексте. (ISO 9241-11)

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

(ISO 9241-11)

Пример (1)

Пример (2)

Пример (3)

Пример (3)

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

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

Преимущества Не требует дополнительных затрат Легко внедрить Быстро прививается Показывает конкретные проблемы интерфейса и описание решений Повышает «планку» качества Не требует специальных знаний для проведения тестирования

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

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

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

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

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

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

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

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

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

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

Содержание Формы Кнопки Поля ввода Списки Системные сообщения и обработка ошибок Флажки и переключатели Текст Пошаговые действия (мастер) Капча http://www.amazedev.com/usability_guidelines

Формы

Кнопки

Поля ввода

Списки

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

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

Текст

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

Капча

http://www.amazedev.com/usability_guidelines

Пример (1) 1.1 Поля, обязательные для заполнения, обозначены звёздочкой перед своим названием. У формы есть пояснение об обозначении обязательных полей. http://www.amazedev.com/usability_guidelines

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

http://www.amazedev.com/usability_guidelines

Пример (2) 1.2 Названия полей выровнены по правой стороне. Расстояние от названия до поля для всех полей одинаковое. http://www.amazedev.com/usability_guidelines

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

http://www.amazedev.com/usability_guidelines

Пример (3) 3.3 Для полей ввода количественных характеристик (длинна, вес, рост, скорость, расстояние, размер и т.д.) необходимо указывать единицы измерения. . http://www.amazedev.com/usability_guidelines

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

.

http://www.amazedev.com/usability_guidelines

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

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

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

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

У странение разногласий http://measuringuserexperience.com/SubmitCancel/index.htm http://www.useit.com/alertbox/ok-cancel.html

Лучшие решения http://p1uton.ru/2008/09/22/previous-and-next-actions-in-web-forms/

Внедрение «Заразите» руководство качеством и юзабилити Проведите работы по составлению usability guidelines Обсудите полученный список. Внесите коррективы Добейтесь, чтобы созданный документ стал стандартом Создайте категорию «юзабилити» в вашей баг-трекинговой системе Периодически пересматривайте существующие и добавляйте новые правила (кайдзен)

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

Проведите работы по составлению 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 Прототипирование (инструмент) Использование паттернов Обучение (книги, статьи, образцы)

Usability Guidelines

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

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

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

Ресурсы (1) Мэтью Линдерман, Джейсон Фрайд Как создать посещаемый сайт и избежать типичных ошибок http://www.ozon.ru/context/detail/id/3184017/ http://www.books.ru/shop/books/488863 Jeff Johnson GUI Bloopers 2.0 http://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

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 Group [email_address] http://www.uidesign.ru http://www.amazedev.com

Вопросы?

Коноплицкий Павел

UIDesign Group

[email_address]

http://www.uidesign.ru

http://www.amazedev.com