Михаил Николаевич Морозов Человеко-машинное взаимодействие Human-computer interaction HCI

Скачать презентацию Михаил Николаевич Морозов Человеко-машинное взаимодействие Human-computer interaction HCI

cc74638e3b70ae1a882662656f6901ff.ppt

Количество слайдов: 137

Михаил Николаевич Морозов Человеко-машинное взаимодействие Human-computer interaction HCI 1. 4. 09 Лекция 5

Проектирование UX 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. Модели проектирование UX (DUX) Этапы (DUX) Цели, задачи. Персонажи Сценарии Структура === Элементы интерфейса. Прототипы Визуальный дизайн Оценка и тестирование UX Сегодня

The UCD Process User-Centered Design UXD User Experience Design

The UCD Process 1. 2. 3. 4. 5. 6. Define Business Goals & ROI Identify User Profiles Model User-Centric Scenarios Design, Prototype, & Iterate Test with Real Users Measure & Repeat

What is User-Centered Design? The user is put in the center of the user experience design

User Centered Design Discover Requirements Conceptual Design Analysis Design Mockup & Production Prototypes Evaluation Use Launch Maintenance

Methods in the UCD toolbox card sorting workflow analysis task flow diagrams (online) surveys prototyping rapid, iterative try-outs of prototypes with users scenarios personas / user profiles expert review; heuristic evaluation usability testing watching, listening to, and talking with users as they work competitive analysis journals walkthroughs think-aloud protocols analysis of existing user date (call center, help desk) style guide and templates

1. Пять уровней проектирования для UX (Jesse James Garrett)

The Elements of User Experience User-Centered Design “The practice of creating engaging, efficient experiences”

The UX Iceberg Trevor van Gorp BFA, M. E. Des, IAI, ACE Principal, affective design E-MAIL: trevor. vangorp@affectivedesign. org BLOG: www. affectivedesign. org

Пять уровней Гаррета: Jesse James Garret’s Elements of User Experience Simple Planes

Elements of User Experience Aesthetics, Identity Accessibility, Usability, Organization, Navigation Content, Functionality, User needs, Client goals, Surface Skeleton Structure Scope Strategy

Спроектируем

Strategy v What are the goals of the users? v What are the goals of the client? v. Какие цели пользователя? v. Какие цели клиента? Surface Skeleton Structure Scope Strategy

Стратегия Goals: §Earn money from patron §Impress colleague artists Users: §Patron: impress peers §Other artists: act disinterested while trying to copy techniques §Other viewers: enjoy artwork Usage Contexts: §Private Gallery §Public Gallery Strategy

Scope v What content is needed? v What functionality is needed? v. Какой контент необходим? v. Какая функциональность необходима? Surface Skeleton Structure Scope Strategy

Render a portrait of a woman: §Shall be facing the viewer §Shall be attractive §Shall have dark hair §Shall be in an interesting outdoor setting Scope §Shall have an intriguing smile §Show a little cleavage

Structure v How is the content organized? v How do you interact with the site? v. Как контент организован? v. Какая должна быть интерактивность? Surface Skeleton Structure Scope Strategy

Structure

Skeleton v How is the interface arranged? v How is the information communicated? v How is the site navigated? v. Как организован интерфейс? v. Как передается информация? v. Как идет навигация по сайту? Surface Skeleton Structure Scope Strategy

Skeleton

Surface v How is the content arranged? v How does the content look? v How is identity established? v. Как организован контент? v. Как контент выглядит? v. Как устанавливается identity (стиль) Identity (стиль) - сумма ощутимых и неощутимых характеристик, делающих визуальное представление уникальным; Surface Skeleton Structure Scope Strategy

Surface Surface

Проектирование UX: Внешний вид (визуализация) Конкретно Скелет Структура Состав Стратегия Абстрактно Пять плоскостей, расположенных от абстрактного к конкретному. Внешний вид (Визуализация) Как расположено содержимое? Как выглядит содержимое? Как создается стиль? Скелет Как устроен интерфейс? Как передается информация? Как осуществляется перемещение по сайту? Структура Как устроено содержимое? Как вы взаимодействуете с сайтом? Состав Какое содержимое нужно? Какая функциональность нужна? Стратегия Каковы цели пользователя? Каковы цели клиента?

User Research Techniques Focus groups, Surveys Usability testing, Log analysis Card sorting, Diaries Contextual inquiry, Task analysis Demographics, Focus Groups, Surveys, Competitive analysis Surface Skeleton Structure Scope Strategy

Types of Interface Functionality Content

The Five Planes in Detail Tasks Information

Проектирование UX: Функциональноориентированный Информационноориентированный й ви д Конкретно В не ш ни Визуальный дизайн ет л ке Интерфейс Навигация Информационный дизайн ту ра С Спецификации Требования функций к содержимому С тр а те ги я С ос та в С тр ук Проект Построение взаимодействия информации Потребности пользователя Цели продукта Абстрактно. Внешний вид - эстетика, индивидуальность Скелет – доступность, удобство и простота использования Структура - организация, навигация Состав - содержимое, функциональность Стратегия - потребности, цели

Who Designs the User Experience? (Garrett) Identity Designers Create a site that is memorable for the user

Who Designs the User Experience? (Garrett) Interface Designers Enable users to accomplish tasks Information Designers Successfully communicate with the users Navigation Designers Enable users to move through the information

Who Designs the User Experience? (Garrett) Information Architects Organize the content based on user needs Interaction Designers Develop functionality to fit user expectations

Ux Approaches Bring Valuable Techniques to the Party Contextual Observation Usability Testing Questionnaires Usability UI Prototyping Use Case Writing Scenario Writing Wireframe UI Storyboarding Context Modeling Task Modeling Story Writing Contextual Analysis Role Modeling Personas Jesse James Garret’s Elements of User Experience User Interviews Questionnaires

Planning & Designing Products & Projects Strategy Incremental Releases Scope & Structure Iterative Development Skeleton Feature Development Surface Organizational Profiles User Interviews Contextual Observation User Role Modeling Persona Development Stakeholder Users Evaluating Organizational Goal Metrics User Task Modeling Interaction Context Modeling Process Storyboarding Span Planning Collaborative Release Inspection Contextual Observation Lightweight Usability Testing User Interface Guidelines Poster Automated Guidelines Testing Component Enforced Guidelines User Task Cases Scenario Writing UI Wireframes Development Tasks Collaborative UI Inspection User Centric Acceptance Testing User Interface Prototyping Task Storyboarding User Centric Acceptance Testing

Отношение между целями, задачами и продуктом Software Product Features Tools Tasks one or more users engaged in many tasks in support of a common high level goal is often referred to as workpractice Goals © 2006 -2007 Jeff Patton, All rights reserved, www. agileproductdesign. com 42

Business Goals Drive User Constituencies and Contexts Supported To Form Strategy Surface Skeleton Structure Scope Strategy © 2006 -2007 Jeff Patton, All rights reserved, www. agileproductdesign. com business goals: • displace competitive products • motivate sale of other integrated products • establish file format as default information sharing format • … user constituencies: • accountant • business planner • housewife • … usage contexts: • office desktop • laptop on airplane • pda in car • … 43

The Places in the User Interface are Built to Support User Task-Centric Scope Surface Skeleton Structure Scope user tasks: • enter numbers • enter text • enter formulas • format cells • sort information • filter information • aggregate information • graph data • save data • import data • export data • print • …. . Strategy © 2006 -2007 Jeff Patton, All rights reserved, www. agileproductdesign. com 44

Structure Defines Navigation from Place to Place in the User Interface Surface task panes Skeleton Structure modal dialogs Scope modal wizards Strategy © 2006 -2007 Jeff Patton, All rights reserved, www. agileproductdesign. com 45

Opposition to jesse’s model This puts me in direct opposition with Jesse's diagram. Those aren't elements of user experience. Those are elements of web design. Performing those elements well should lead to offering users a quality experience, yes. But "information architecture, " "interaction design, " "user needs, " etc. don't comprise the user experience. A quality user experience is comprised of things like desirability, usability, enjoyability, utility, delight, satisfaction, etc.

UX wheel - Magnus Revang

UX wheel explained The Model should be explained from the inside. It starts in the middle. Value is what we want to accomplish For customers and providers, positive user experience is a win-win situation We want to accomplish value through positive user experience The user experience is a series of phases, we have to focus on positivity in findability, accessibility, desirability, usability, credibility and usefulness Numerous factors contribute to the phases of user experience, the model shows 30 factors carefully placed To achieve this we work backwards, starting and ending with search engine strategy, and going through and making a choice about each of the factors

2. Использование персонажей при проектировании пользовательского интерфейса

Алан Купер (Alan Cooper) Автор книг: «About Face: The Essentials of User Interface Design» , «About Face 2. 0: The Essentials of Interaction Design» , «The Inmates Are Running the Asylum» . Лауреат наград: Windows Pioneer Award (за Visual Basic) Software Visionary Award ACM SIGDOC Rigo Award – – – Глава Cooper Interaction Design (консалтинговая фирма, которая выполняла работы по проектированию продуктов для таких компаний, как: Microsoft, IBM, VISA, Sun Microsystems, SAP, Sony, 3 М, Elemental, Ericsson, Fujitsu, Logitech, Mc. Graw-Hill, Sagent, Varian и др.

Книга Алан Купер Психбольница в руках пациентов или Почему высокие технологии сводят нас с ума и как восстановить душевное равновесие (The Inmates Are Running the Asylum) 336 стр. , 2005 г. Издательство: Символ. ISBN 5 -93286071 -5

Проектируем для одного персонажа Зачем проектировать для одного персонажа? Понимание нужд и целей одного пользователя помогает удовлетворить других людей, имеющих такие же цели. Рассмотрим пример

Проектируем для одного персонажа (2 Что мы получим, если будем проектировать машину, удовлетворяющую всех возможных водителей?

Проектируем для одного персонажа (3) Рассмотрим запросы пользователей Мамочке Сью нужна безопасная, надежная машина, просторная, с большими дверями, для перевозки детей, собак, пакетов с покупками и т. д. Плотнику Джо нужен крепкий полноприводный пикап, достаточно большой, чтобы в него поместились лестницы, материалы, мешки с цементом и ящики с инструментами. Младший руководящий работник Сет видит себя в машине спортивного типа с мощным двигателем, жесткой подвеской, откидным верхом и - места в машине должно хватать только на двоих.

Проектируем для одного персонажа (4) Плохое решение Машина, включающая в себя все запросы от всех пользователей.

Проектируем для одного персонажа Отличное решение! Выполнить запросы каждой категории пользователей. Люди с аналогичными целями так же будут удовлетворены одной из моделей.

Проектируем для одного персонажа Роберт Лутц (Robert Lutz), руководитель компании Chrysler, говорит, что 80% участников фокус-группы возненавидели новый пикап Dodge Ram. Но после выхода на рынок машина стала бестселлером, потому что остальные 20% в нее влюбились. Любовь людей к продукту, пусть даже этих людей не очень много, - вот ключ к успеху. Чем больше размер мишени, тем меньше вероятность попадания «в яблочко» . Если вы желаете достичь уровня удовлетворенности продуктом в 50%, это невозможно сделать, осчастливив аудиторию наполовину. Единственный способ достичь цели состоит в том, чтобы выявить эту половину и стремиться осчастливить их на 100%. И это еще не все. . .

Проектируем для одного персонажа (7) Еще большего успеха можно добиться, если выделить 10% рыночной аудитории и направить свои усилия на то, чтобы вызвать у них стопроцентный восторг. На первый взгляд - противоречие, однако Проектирование для единственного пользователя – самый эффективный способ удовлетворить широкую аудиторию! Примеры. . .

Проектируем для одного персонажа Чемодан на колесиках и клейкие бумажки Спроектировано для стюардесс А. Фрай придумал для церкви

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

Проектируем для одного персонажа (10) Пример компании Apple

Reasons for Personas Examples of results of targeted design Dodge Ram pickup Roller suitcases Sony Aibo Isn’t useful for anything Not fuzzy and warm Too delicate to let children use it, but Passionate fan clubs Brisk sales despite steep price – and prices now coming down

Reasons for Personas Puts an end to feature debates Makes hypothetical arguments less hypothetical Q: “What if the user wants to print this out? ” A 1: “The user won’t want to print often. ” A 2: “Emilee won’t want to print often. ” User Persona, not Buyer Persona This is one way HCI differs from marketing Eventually it pays off in more sales

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

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

Персонажи (3) Работоспособный подход кажется примитивным, но обладает невероятной мощью и эффективен во всех случаях. Мы синтезируем пользователей и проектируем для них. Мы называем таких синтезированных пользователей персонажами (personas), и они представляют собой необходимую базу качественного проектирования взаимодействия.

Персонажи (4) Персонажи - не реальные люди, но они представляют реальных людей в процессе проектирования. Это гипотетические архетипы реальных пользователей. Будучи воображаемыми, они, тем не менее, определяются достаточно жестко и точно. На практике мы обнаруживаем их в процессе исследования, а не «выдумываем» их. Но мы действительно выдумываем их имена и личные сведения.

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

Персонажи Мы используем набор персонажей Каждый набор персонажей представляет собой определённые образцы поведения и цели группы пользователей из нашей целевой аудитории. Множество персонажей показывают всю область образцов поведения, которую мы должны охватить.

Persona development Personas are: Not “The User” but “one particular user” Inform the entire design process Who are we designing for? What are we designing? How will we design it? Does this design work?

Персонажи помогают нам: Определить, что должен делать продукт и каково должно быть его поведение Взаимодействовать с заинтересованными в реализации лицами и коллегами по работе Делать людей причастными к проектированию Измерять эффективность дизайна. Так же персонажи помогают нам избежать общих проблем: Дизайн ради дизайна “Эластичный” пользователь

Дизайн ради дизайна “Дизайн ради дизайна” или “Проектирование для себя” выполняется, когда проектировщики или разработчики проецируют собственные цели, мотивацию, умения, умозрительные модели на продукт. В эту категорию попадает большинство "классных" продуктов: аудитория состоит из людей, крайне похожих на проектировщика, что приемлемо для узкого спектра продуктов и совершенно неприемлемо для большинства прочих. Программисты проектируют для себя, создавая продукты по моделям реализации. Они понимают, как всё работает, и им с такими продуктами удобно. Тем, кто программированием не занимается, как правило, сложно с этим согласиться.

“Эластичный” пользователь Наша цель состоит в том, чтобы удовлетворить пользователя, но термин «пользователь» является источником трудностей. Из-за своей нечеткости этот термин бесполезен, как циркулярная пила бесполезна для удаления аппендикса. Нам нужен более точный инструмент проектирования. Те, кто говорит «пользователь» , обычно подразумевают эдакое «эластичное» создание, которому приходится изгибаться, растягиваться и адаптироваться к потребностям момента. Наша же цель состоит в проектировании программ, которые будут изгибаться, растягиваться и адаптироваться к потребностям пользователя.

“Эластичный” пользователь (2) Реальные пользователи не эластичны!

Характеристики персонажей В нашем процессе проектирования нет места пользователю продукта, мы говорим о совершенно конкретном человеке - о персонаже. Рассмотрим основные характеристики персонажей. . .

Характеристики персонажей (2) Персонаж должен быть конкретным. Персонаж должен быть воображаемым. Описание должно быть подробным, а не идеальным.

Характеристики персонажей Хорошее описание персонажа, включает в себя: Цели Социальное положение Описание рабочего процесса Описание окружения Уровень подготовки Неудовлетворённости и ожидания.

Цели персонажей. Понятие целей больше чем понятие специфических задач. Цель персонажа связана с Нормановской моделью пользовательской мотиваций и включает: Цели ощущения(Experience goals), которые связаны с висцеральным процессом: как пользователь хочет чувствовать; Конечные цели (End goals), которые связаны с поведением: что пользователь хочет делать; Жизненные цели (Life goals), которые связаны отражением: кем хочет быть пользователь.

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

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

Персонаж – это не. . . Персонажи иногда путают с Средне-статистическим пользователем Реальными людьми Сегментами целевого рынка Описаниями должностных обязанностей или ролями.

Описание должностных обязанностей или роли определяется теми задачами, которые должны делать люди. Персонаж определяется целями и поведением. У Вас может быть n n n 100 -процентное совпадение персонажа и роли Несколько персонажей на одну роль или описание должностных обязанностей Несколько ролей или описаний должностных обязанностей на один персонаж. Примеры. . .

Описание должностных обязанностей или роли (2) Несколько персонажей с одной ролью 2 представителя телефонного центра поддержки пользователей: Джон имеет опыт работы, необходимость записывать тормозит его Элис новичок, записи помогают ей разобраться в работе

Описание должностных обязанностей или роли (3) Один персонаж может выполнять несколько ролей В программе обработки заказов, Клара (работник маленькой компании) совмещает в себе роли заказчика товара и человека, получающего и оплачивающего счета. В больших компаниях эти роли раздельны.

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

Personas

Grace (62/ female/ widowed/ Little Rock, AR. ) “I like playing my favorite games online, but if I can play with friends, well that’s even better!” Personal Background: Her husband has passed on. She has two grown kids, both of whom live far away. She misses the kids, but has a fairly large circle of friends that she spends time with. Technical Proficiency Profile: Limited. Can use her browser and her email. MS Word confuses her, and she doesn’t like using it. Doesn’t know what an OS is. Tends to click yes if the browser prompts her to do anything, and will click wildly until things work. History with Shockwave and/or Atom. Films: Plays crossword puzzles daily and saves them. Plays card games, Photo. Jam, but is offended by South Park cartoons Shockwave’s opportunity: If Grace can be convinced to participate in community activities, she will become a loyal user of the site. She needs to be sheltered from the sick and twisted content, however.

Sarah (22/ female/ single/ Washington, DC. ) “I like Atom. Films because it’s just about the films” Personal Background: Liberal arts education at college in the Midwest Just graduated and moved to DC. Has a dog Likes music and art. Went to Lilith Fair. Sends out mass emails about causes she cares about, or jokes. Profession: Editor for non-profit organization ($35 K/yr) History with Shockwave and/or Atom. Films: First came to Atom. Films because she did a search on Sundance content. She’s heard about the merger with Atom. Films, and is very worried about Atom. Films losing its edge, or begin buried in the Shockwave. com site. She thinks some controversial material might be hidden if Atom. Film gets merged with Shockwave’s opportunity: If Shockwave can prove they are trustworthy enough to coax her into signing up, she will become a loyal visitor and shortlist subscriber. If she feels clicking through ads will help Shockwave support independent film, she will.

Scott (17/ male/ single/ Shaumburg, IL. ) “I want something cool and really on the edge. Something you can’t get on TV” #2 most common user Profession: Full time student (studies exercise and sport science) Personal Background: Youngest kid in family of five. Likes to be seen as a little rebellious. Excited to be in college, but not really brave enough yet to actually do anything rebellious, so uses Internet to express his self-image. History with Shockwave and/or Atom. Films: he’s been to Shockwave a few times, and usually clicks games as soon as the navigation bar loads. He likes playing arcade games, and “shoot ‘em up’s. ” Spend two hours playing “King of the Hill paintball” recently. Shockwave’s opportunity: he is already hanging out in the games section regularly. If shockwave can introduce him to it’s sick and twisted material, it can keep him on the website longer, and use his tendency to send out links to spread the word.

Persona Elsevier Science – Case Study General Tasks and Goals Tools & Sources used Personality and Attitude Demographic Information Search behaviours Context of Work

Типы персонажей Персонажи делятся на три основных типа: Ключевые персонажи Персонажи второго плана Дополнительные персонажи

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

Персонажи второго плана Интересы персонажей второго плана в основном бывают удовлетворены, когда удовлетворены интересы ключевых персонажей, но у них имеются и свои специфические запросы. Мы не всегда получаем персонажей второго плана. Проектируйте для ключевых персонажей, затем думайте об удовлетворении запросов персонажей второго плана. (Покупатель и Обслуживаемые Люди обычно относятся к персонажам второго плана)

Персонаж пользователя, а не покупателя Большинство персонажей должны представлять пользователей Иногда бывает полезным сделать персонаж покупателя, если его цели сильно отличаются от целей пользователя Мы проектируем для пользователей, затем учитываем нужды покупателей.

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

Prioritize personas

Prioritize personas secondary primary special

Use personas Keep them near • Hang them on your wall • Make poster, placemats, puppets • Role-play personas • Evaluate with them

Possible Poster Skeleton Name/Title Adapted from Usability in Practice: 3 -Day Intensive Camp, Nielsen Norman Group, 2005 User Type quote Photo/ captions quote Description of Core Competencies user’s business/ job/work User goals environment Bottlenecks Needs Tasks Tools Used

IS 213 Example: UC Berkeley Calendar Network Problem Statement: Although UC Berkeley boasts an incredibly rich array of public events taking place on any given day — from a Management of Technology lecture at the Haas School of Business to a film series at the Pacific Film Archive, from a physics colloquium to a dance performance at Cal Performances — because events can currently be found in over 80 web-based calendars, it can be difficult for people interested in these events to find out about them. Because the purpose of a calendar is to publicize events, many of these calendars would like to share their events with each other. Currently there is no automated way to do this. Often this is done by manually entering the event data into several different web forms Or, even more inefficiently, by emailing the event data IS 213 Website: http: //www. sims. berkeley. edu/academics/courses/is 213/s 04/projects/Ev ent. Calendar/

Persona #1: Megan Richardson Persona #1 - Megan Richardson Technology level: Med-low Interest in sharing events: Medium Unique situation: Currently has no calendar, would like to send events to other calendars and receive events from other calendars Megan Richardson is the 22 -year-old UC student and member of Cal. Pirg, the California branch of a student organization whose mission is “to deliver persistent, result-oriented public interest activism that encourages a fair, sustainable economy, and fosters responsive, democratic government. ” She is from Boston and has been maintaining the Cal. Pirg website in her spare time. Megan created her first website as a high-school senior using Dreamweaver. She understands basic HTML, but is not very familiar with data-driven websites or cascading style sheets. As she has not yet worked in the business world, she has also never used a personal calendaring system such as Outlook. Cal. Pirg sponsors 8 -10 campus events each semester, such as rallies against hunger and homelessness or for clean and affordable power. The organization attempts to publicize these events to its members and the general public by posting them on their website and sending emails out to their mailing list in order to increase attendance and catch the attention of legislators. However, because Megan is very busy with schoolwork and activism during her senior year and not many of the other Cal. Pirg members have website design expertise, they have not had time to redesign their website in order to present their events in a coherent, easy to use, calendaroriented format. Megan would love to have a tool that would automate the creation of a functional, well-designed calendar for the Cal. Pirg website. Cal. Pirg might also be interested in publicizing other campus and community events that support their mission in their calendar, as well as publicize their events in other calendars to increase attendance at their events. Megan would not want to spend more than an hour setting such a system up, and could spend only about a half hour per week maintaining information on Cal. Pirg events. Cal. Pirg has about 4 -5 major events a semester, and 2 -3 events that occur on a weekly basis. If a nicely formatted calendar could even increase attendance at their events by 10%, it would be well worth her time.

Megan’s Goals: Create a simple calendar or list of events as well as send out emails on events that her organization sponsors on their website in order to encourage the participation of members and the public in these events without having to hire a programmer To ensure that their website supports the organization’s mission, which is to deliver persistent, result-oriented public interest activism that encourages a fair, sustainable economy, and fosters responsive, democratic government To spend most of her time on schoolwork and activism, and less time on the technical details of managing a website

Persona #2: Harold Jackson Persona #2 - Harold Jackson Technology level: Med-high Interest in sharing events: High Unique situation: Campus Event Aggregator, they don’t “own” any events Harold Jackson is a 40 -year-old Program Manager in the Public Relations office of the UC. He is a Los Angeles native who enjoys walking his dog and playing tennis with his wife, who is a programmer. He is responsible for overseeing the maintenance of the UC website and Calendar of Events. It is essential that the website project a professional image, as it is an important means of advertising the university to the general public, alumni and potential donors. Harold’s background is primarily in public relations, but he has also acquired technical skills along the way, and is the primary maintainer of the UC website. Although he is familiar with the concept of building a data-driven website, the back-end of the university website was built by an outside contractor, and most of the staff in Harold’s department are not as technically savvy as he is. Harold and most of his group are familiar with calendaring systems such as Outlook or ICal, and use the Cal. Agenda calendaring system to schedule meetings. Harold’s ultimate goal in relation to the campus calendar is to publicize as many events occurring on the UC campus as possible, and to highlight especially important events on the website. Currently events are submitted to the university calendar via a web form, and not many departments currently enter their events in this fashion. As a result, Harold’s staff has to spend time contacting various departments to find interesting events to post to their calendar. Harold thinks that if he could somehow find a way make it easier for campus departments and organizations to send him events, he could greatly increase the number of events he would receive and be able to publicize. In evaluating a new system, however, he would want to ensure that it is at a minimum an improvement over the current system in terms of functionality, and offers a design that integrates with the overall UC website.

Harold's Goals: Create a web-based calendar that will be the ultimate aggregator of all events at his university, which will be used by the public as well as people at the university “Market” the university to potential contributors and the general public by highlighting the diverse and exciting events that occur there Ensure that the calendar looks professional and eyecatching, and integrates with the overall “look and feel” of the university website Make the process for entering and approving events as easy as possible so that even “low-tech” users in his department can do this Encourage other calendar owners to send him events

Persona #3: Sally Mc. Neil Persona #3 - Sally Mc. Neil Technology level: High Interest in sharing events: High Unique situation: Model must handle parent-child event relationships & allow the use of cascading style sheets Sally Mc. Neil is the 35 -year-old webmaster for the university’s science museum. She is from Michigan, loves to travel, and often takes exotic vacations with her husband two children during school breaks. Her manager has tasked her with revamping the organization’s website in order to draw more visitors to the museum. As families and schools usually only visit the museum once a year or so, they would like to encourage new people who may be traveling from farther distances to visit. She feels that giving visitors to her website information on related events and activities occurring on campus might be a good way to bolster attendance. Sally has extensive web programming experience, and her website is currently dynamically generated. She works with a java programmer on the website, and both of them are familiar with XML. She and her programmer have thought a lot about the best way to format a calendar-oriented website, and have even prototyped their best ideas. She wants to find an easy way to include events from other departments, without having to cut and paste them into her calendar. She also would like to be able to maintain the appearance of her website using cascading style sheets.

Sally's Goals: Use the website to increase attendance at the museum Create an eye-catching, dynamically-generated calendar that will allow parents and teachers to easily plan trips to their museum Include events occurring at the university that may be of interest to their patrons, so families and groups traveling great distances to reach the museum can “make a day of it” and attend other events during their time in town Clearly list events that have a “parent-child” relationship on the website so that it is easy for visitors to find what they are looking for (e. g. “Forces that Shape the Bay” event during which many different daily presentations occur) Use cascading style sheets to maintain website look and feel

Task analysis may eliminate personas

Сценарии и задачи

Tool Design to Ux Surface Skeleton Structure Tools • Navigation Map • Page Wireframes • UI Design Guidelines Scope Tasks Strategy Goals • User Tasks & Activities, or Use Cases • Technology Independent • Business Goals • User Model with User Goals © 2006 -2007 Jeff Patton, All rights reserved, www. agileproductdesign. com • Architectural Goals Based On Context of Use

Scenarios are simple stories A scenario is created by articulating a persona through a context with a specific goal Scenarios are a great method for exploring design ideas. Сценарии – это просто истории, это то, что делает персонаж, решая поставленную задачу. © 2006 -2007 Jeff Patton, All rights reserved, www. agileproductdesign. com

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

Сценарии – словесное описание выполняемых задач На паре Петру дали задание, которое он пока не знает как правильно сделать. Вернувшись домой он сразу же собирается посетить форумы, чтобы задать вопросы по данной теме. Но так как он интересуется в жизни многими вещами и любит обсуждать их, то и зарегистрирован он на разнообразных форумах. По теме данного ему на учебе задания он вспоминает один замечательный форум, где давно не был, и естественно забыл там свой пароль. Тогда вместо того, чтобы искать куда он записал его, перебирать вспоминающиеся ему его пароли или запрашивая информацию о «забытом пароле» посредством e-mail, он использует простой и удобный способ – программу автоматического заполнения полей ввода данных Robo Form? – он лишь выбирает подходящий сохраненный в этой программе сайт и данные сами вводятся. Отписав на форуме, он спокойно покидает сайт и серфит по интернету в ожидании ответа на его вопрос. Через некоторое время он уходит в гости к другу, и там вспоминает, что ему могли ответить на форуме, тогда он вставляет флешку и идет на сайт с компьютера друга, не заботясь о том, что забыл пароль, так как программа вводит данные прямо с флешки. И пока не получив дельного совета, он общается с другом, а ближе к вечеру наконец кто-то оставил ответ на его вопрос на одном из форумов, и решив скорее воспользоваться его реализацией прощается с другом и идет домой выполнять задание.

Иванович, работает системным администратором в ОАО «ЗПП» . На работе имется доступ к сети Интернет, поэтому Иванович очень любит полазить по сайтам в свободное от администрирования время. В основном, на сайтах он ищет электронные книги, статьи по программированию, системному администрированию, компьютерному железу и компьютерной графике и анимации. Иванович выкачивает данные электронные книги, статьи и т. п. из сети и сохраняет себе на флешку. Придя домой и пообщавшись со своей женой, он включает ПК и выбирает из всего списка имеющихся у него материалов на флешке какую-либо книгу, статью, журнал и т. п. , которая его заинтересовала в данный момент либо продолжает читать уже начатую книгу. Иванович не любит устанавливать программы, поэтому ему необходима не требующая установки программа для чтения PDF-файлов Sumatra PDF? . Запустив ее со своей флешки, он открывает требуемую книгу: если это новый ранее не открывавшийся файл, то он откроется с самой первой страницы, а если нет – то с той страницы, на которой Иванович остановился. Подобрав нужный размер страницы при помощи соответствующих кнопок «увеличение» и «уменьшение» масштаба страницы, он перелистывает одну страницу за другой при помощи специальных кнопок на панели, читая требуемый материал, либо идет в оглавление книги и там выбирает нужный материал. Обычно на чтение книг Иванович тратит 2– 3 часа своего времени в день. После прочтения он закрывает Sumatra PDF? , при этом программой автоматически запоминается номер последней открытой страницы.

Hierarchical Task Decomposition Goals – what the user wants to achieve Tasks – do these to achieve the goals Sequential dependencies Create new document before entering text Multiple occurrences of tasks Subtasks – lower-level tasks The lowest-level subtasks get mapped onto one or several UI commands ie, move done by a copy followed by a paste © 2006 -2007 Jeff Patton, All rights reserved, www. agileproductdesign. com

User Interface Designers Often Use “Tasks” to Describe What People Do Tasks have an objective that can be completed Tasks decompose into smaller tasks Activities are used to describe a continuous goal, one that might use many tasks, but may never really be completed “Read an email message” is a task, “Managing email” is an activity A single screen in a user interface often supports a number of tasks activity task task © 2006 -2007 Jeff Patton, All rights reserved, www. agileproductdesign. com 121

Task Model - Borrow Book Goal Sequences added as annotations Can also show hierarchy as indented text Tasks to complete goal Subtasks to carry out one task © 2006 -2007 Jeff Patton, All rights reserved, www. agileproductdesign. com From Interaction Design, Preece Rogers and Sharp

Task Model - Write a Letter Get Supplies Write the Actual Letter This process can go arbitrarily deep Stop when not useful to go further - but not before! Is this model done? Prepare Envelope Get Address Find Address Book Apply Stamp Find Address © 2006 -2007 Jeff Patton, All rights reserved, www. agileproductdesign. com Prepare To Mail Insert Letter Seal Envelope

Can be More than One Sequence How X writes a letter Get an envelope, paper, pencil, stamp Write letter Address the envelope Apply stamp Put letter in envelope Seal envelope How Y writes a letter Get an envelope, paper, pencil, stamp Address the envelope Write the letter Put letter in envelope Apply stamp Seal envelope How does Z do it? © 2006 -2007 Jeff Patton, All rights reserved, www. agileproductdesign. com

Task Model as an Outline - Example Using a lawnmower to cut grass Step 1. Examine lawn Make sure grass is dry Look for objects laying in the grass Step 2. Inspect lawnmower Check components for tightness Check that grass bag handle is securely fastened to the grass bag support Make sure grass bag connector is securely fastened to bag adaptor Make sure that deck cover is in place Check for any loose parts (such as oil caps) Check to make sure blade is attached securely Check engine oil level Remove oil fill cap and dipstick Wipe dipstick Replace dipstick completely in lawnmower Remove dipstick Check that oil is past the level line on dipstick … © 2006 -2007 Jeff Patton, All rights reserved, www. agileproductdesign. com

Example Task analysis

Task Model as a Narrative Describe tasks in sentences Often expanded version of list or outline More effective for communicating general idea of task Not effective for details branching tasks parallel tasks GREAT as introduction to diagrams or outlines © 2006 -2007 Jeff Patton, All rights reserved, www. agileproductdesign. com

что дальше? сторибоард прототип

Storyboards

Ink Chat

from “Prototyping for Tiny Fingers” by Rettig