Download - User Centered Design: обзор процесса
![Page 1: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/1.jpg)
UX Russia
2-й онлайн семинар4 декабря 2008
![Page 2: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/2.jpg)
Новости
• Нам исполнился месяц– Нас стало 732– Более 500 сообщений
• На 2-й семинар зарегистрировалось 42• 1-й семинар в записи посмотрело 445• Вышел 26-й Юзабилити Бюллетень
![Page 3: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/3.jpg)
Программа семинаров на декабрь
4.12 User-Centered Design: основы процессаАндрей Сикорский
11.12 Оптимизируем интерфейсы инфокиосков Анна Галахова и Валентина Третьякова
18.12 Теория деятельностиАнастасия Якубова
25.12 Юзабилити-экспертиза в прямом эфиреЮрий Ветров
Хотите выступить? Задавайте вопрос Евгении Жадяевой
![Page 4: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/4.jpg)
User-Centered Design: основы процесса
ISO 13407 как методологическая основа для разработки продуктов:– Cпособы сбора данных; – Этапы проектирования;– Виды тестирования.
Семинар ведет Андрей Сикорский
![Page 5: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/5.jpg)
UCD: основы процесса
Андрей Сикорский
![Page 6: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/6.jpg)
Любые технологии нужны, чтобы решать задачи людей
![Page 7: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/7.jpg)
User Centered Design: какой он?
![Page 8: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/8.jpg)
UCD: 13407
![Page 9: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/9.jpg)
Foolproof
www.foolproof.co.uk/user_design/ucd_explained.php
![Page 10: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/10.jpg)
Michigan State University
http://usability.msu.edu/approach.aspx
![Page 11: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/11.jpg)
SAXSO
http://www.saxso.com/portfolio.html
![Page 12: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/12.jpg)
Scott Weiss
• Определение аудитории
• Сбор требований
• Цикличное проектирование
• Реализация
• Поставка (внедрение)
![Page 13: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/13.jpg)
Uday Gajendar
http://www.udanium.com/html/thoughts.html
![Page 14: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/14.jpg)
Leisa Reichelt
http://www.disambiguity.com/what-is-this-thing-you-call-ucd/
![Page 15: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/15.jpg)
UE SCM
UE SCM
![Page 16: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/16.jpg)
SAP
http://www.sapdesignguild.org/editions/edition10/ucd_overview.asp
![Page 17: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/17.jpg)
UCD: 13407
Ориентированный на пользователя дизайн характеризуется активным
вовлечением пользователя в процесс разработки для достижения
прозрачного понимания пользовательских требований и надлежащего
распределения функций между пользователями и технологиями, а также
итеративным характером подхода и его мультидисциплинарностью.
![Page 18: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/18.jpg)
Так в чем вопрос?
![Page 19: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/19.jpg)
Несколько сценариев
• «я все время думаю о пользователях, когда разрабатываю продукт»
• «я хороший дизайнер, я знаю предметную область. Я сделаю что-то, а потом протестирую – и не буду проводить начальные исследования»
• «у меня нет времени на все эти ваши циклы»• «мы знаем, чего хотят наши пользователи,
так что делайте то, что мы вам говорим»• ...
![Page 20: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/20.jpg)
Да, это надо делать все!
Все активности UCD обязательны. Но каждая из них может быть адаптирована под существующие требования, свойства и ресурсы конкретного проекта.
Deborah Mayhew, The Usability Engineering Lifecycle.
![Page 21: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/21.jpg)
Еще разок...
![Page 22: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/22.jpg)
Как собрать информацию?
![Page 23: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/23.jpg)
Методы сбора информации
• Интервью
• Сбор мнений (опрос)
• Фокус-группы
• Полевые исследования (наблюдение)
• Журналирование
![Page 24: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/24.jpg)
Какую информацию собирать?
![Page 25: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/25.jpg)
Кто? Зачем? Как?
• Профили пользователей• Профили задач• Профили контекстов использования
![Page 26: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/26.jpg)
Профили пользователей
![Page 27: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/27.jpg)
Профиль задач
![Page 28: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/28.jpg)
Профиль контекста использования
•Расположение рабочего места
•Рабочее место
•Освещение
•Компьютерная техника (Разрешения мониторов)
•Программное обеспечение (Браузеры)
![Page 29: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/29.jpg)
Кто? Зачем? Как? И что со всем этим делать?
15% пользователей используют полноцветные сенсорные
панели с разрешением 1024х768, используют в работе
преимущественно клавиатуру.
5% пользователей работают с жидкокристаллическими
панелями с разрешением 1280х1024, могут пользоваться
мышью и клавиатурой.
![Page 30: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/30.jpg)
Персонажи
• «Модель» пользователя, опирающаяся на
результаты анализа и исследования;
• Оживляет пользователей Продукта;
• Инструмент коммуникации;
• …
![Page 31: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/31.jpg)
Персонажи – откуда они?
15% пользователей используют полноцветные сенсорные панели с разрешением 1024х768,
используют в работе преимущественно клавиатуру.
5% пользователей работают с жидкокристаллическими панелями с разрешением
1280х1024, могут пользоваться мышью и клавиатурой.
![Page 32: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/32.jpg)
Пример персонажа
Борис30 лет, руководитель отдела дизайна. Водит машину 6 лет (права не покупал, а самостоятельно и настойчиво сдавал – с 5ой попытки).Поклонник джазовой музыки.Борис – владелец красного Opel Astra, которому два года.Пробки не любит – много времени уходит на них, а не на семью.На этой неделе отогнал машину в автосервис на плановое обслуживание – дня три-четыре, как ему сказали. И сейчас ему нужна машина для регулярных поездок на работу и домой. C арендой он связываться не хочет , т.к. там нужно оформлять много бумажек. Такси пользоваться не хочет (там слушают Шансон и вообще некомфортно). На ближайшие выходные у него запланирована поездка с ребенком на детский спектакль. Он готов оплатить помощь в поездке.Борис не курит, и не очень любит курящих водителей. Для него важен комфорт, поэтому он внимателен как к выбору водителя, таки попутчика. Борис сам не станет искать попутчика, но как человек отзывчивый, готов подвезти.
![Page 33: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/33.jpg)
Разработка
![Page 34: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/34.jpg)
С чего начать – необходимые документы
• Стратегия с бизнес-требованиями• Персонажи• Сценарии
![Page 35: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/35.jpg)
Стратегия
• Документ, кратко описывающий бизнес-
требования к системе и измеримые цели
проектирования
• Небольшой объем
• Описываемые требования должны быть
верифицируемыми
![Page 36: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/36.jpg)
Сценарии
Сценарии – конкретные описания действий, которые совершает пользователь, при этом в описаниях видны причины этих действий.
Сценарии представляют собой «истории»: что пользователь хочет делать, почему, каковы его ожидания.
Сценарии помогаю понять, как пользователи принимают решения, какие факторы на это влияют, мотивацию пользователей.
![Page 37: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/37.jpg)
Сценарии: пример
Отвезя машину в автосервис, Борис сталкивается с проблемой – надо добираться на работу. В метро он ездить не любит, и потому решает воспользоваться сервисом поиска попутчиков.Он заходит на сервис, указывает маршрут и время приезда-отъезда, находит водителей. Изучает информацию о них (не хочет попасть к курящему водителю). Найдя пару подходящих, связывается с ними через сайт и договаривается о цене и о времени встречи.
![Page 38: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/38.jpg)
И как это поможет в проектировании?
К этому моменту есть:•Сценарии•Персонажи•Стратегия
![Page 39: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/39.jpg)
Концепция
• Дает представление об интерфейсе
• Позволяет оценивать реализуемость
• Дает возможность валидации
Дополнительная инорфмация в http://wud.ru/wud2007/kopylov.pdf
![Page 40: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/40.jpg)
Концепция: вход
• Персонажи
• Результаты сбора данных
• Мозговые штурмы
• Встречи/общение с заказчиком
![Page 41: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/41.jpg)
Концепция: выход
• Информационная архитектура• Навигация• Внутримодульная структура• Компоновка ключевых экранов• Концепция контента• Предметная область• Идеи• План работ
![Page 42: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/42.jpg)
Взаимосвязь составляющих концепции
Автор схемы: Алексей Копылов
![Page 43: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/43.jpg)
Прототирование
• Прототип – макет сайта, визуальное отображение пользовательских сценариев.
• Прототипировать можно экраны сайта. Это горизонтальное прототипирование.
• Прототипировать можно взаимодействие. Это вертикальное прототипирование.
![Page 44: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/44.jpg)
Сравнение видов прототипирования
Вид Достоинства Недостатки
Низкая детализация • Меньше времени на разработку
• Дешевле• Можно проверить несколько
концепций• Удобны для коммуникации• Выявляют проблемы
конкретных экранов
• Ограниченное юзабилити тестирование
• Трудно оценивать навигацию и поток задач
• Мало деталей для спецификаций
Высокая детализация
• Частично функциональны• Интерактивны• Управляемы пользователем• Прозрачной понимание
навигации• Можно использовать
ненаправленное тестирование
• Можно использовать для задач маркетинга и рекламы
• Время на разработку может превышать время использования
• Неэффективно для проверки концепции
• Может отвлекать пользователей от основного предназначения продукта
• Пользователи могут воспринимать прототип как реальный продукт
![Page 45: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/45.jpg)
Прототип: примеры
![Page 46: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/46.jpg)
Прототипы: инструменты
• DENIM• Axure• Fireworks• Acrobat• Photoshop• HTML• Image Maps• Бумага• Visual Basic (и подобное)• Flash/Director• Специальные средства
![Page 47: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/47.jpg)
Юзабилити-тестирование
![Page 48: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/48.jpg)
Цель тестирования
Определить степень эффективности, продуктивности и удовлетворенности, с которой пользователь может использовать продукт.
![Page 49: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/49.jpg)
Юзабилити-тестирование это:
• Процесс получения опыта использования сайта, программы или продукта конечными или потенциальными пользователями
• Оценка, основанная на выполнении задач
• Процесс, сопровождающий разработку
![Page 50: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/50.jpg)
Что можно делать тестированием?
• Подходит ли дизайн?
• Какие есть проблемы у продукта?
• Сравнение альтернатив
• Соответствует ли дизайн целям?
![Page 51: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/51.jpg)
Что тестировать?
• Навигацию
• Содержание
• Представление
• Взаимодействие
![Page 52: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/52.jpg)
Таким образом:
• ЮТ вовлекает реальных пользователей в выполнение заданий
• ЮТ – это форма обратной связи, позволяющей двигаться дальше
• ЮТ начинается, когда появляется первый набросок
• ЮТ отличается от других техник оценки
![Page 53: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/53.jpg)
Что нужно для тестирования?
• Продукт или прототип• Респонденты, которые будут тестировать• Сценарий, по которому будем тестировать• Фасилитатор, проводящий тест• Наблюдатели
![Page 54: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/54.jpg)
Схема лаборатории
камера 2
камера 1
респондент
фасилитаторынаблюдатели
зер
кал
о Г
изе
ла
![Page 55: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/55.jpg)
Сценарий тестирования:
• Ситуация, основанная на какой-то истории• Участники выполняют задание• Используется терминология пользователей• Однозначность трактовки• Обеспечиваются необходимые детали
выполнения задания• Не содержит шагов выполнения задания
![Page 56: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/56.jpg)
На выходе:
• Проблемы• Рекомендации• Лучшее понимание продукта• Видение глазами пользователя
![Page 57: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/57.jpg)
UCD: 13407
![Page 58: User Centered Design: обзор процесса](https://reader035.vdocuments.net/reader035/viewer/2022062616/54b7102d4a7959a8588b4681/html5/thumbnails/58.jpg)
Спасибо за внимание!
Вопросы можно задать в обсуждении вебинара