Studio Design in HCIStudio Design in HCI

Spring 2004

Bill Hart-Davidson

Session 8: object-oriented modeling, basic concepts; artifact and physical work models; guidelines for phase 2 presentation

Today in ClassToday in Class

Object-oriented modeling concepts– Objects, views, relationships

– Class diagrams

– State tables Guidelines for phase 2

presentation and memo

Raw material for OO modeling…Raw material for OO modeling…

Your consolidated work models! Use these to derive system features including

• user roles

• user environments (metaphors, screens)

• actions

• data objects & states

OO modelingOO modeling

Object-oriented modeling provides a way to coordinate design work with development work.

We speak, in OO modeling, in terms of User Roles that do specific Actions through the use of Objects.

ObjectsObjects

An object is a coherent assemblage of data and/or functions that allows a user to do work. Within the context of an information system, objects may be abstractions, though users always interact with concrete instances/features of them.

Objects: “Buddy” in AIMObjects: “Buddy” in AIM

Buddies are objects with attributes and, within AIM, several states: online & active, online & idle, offline. Buddies are related to another object, the buddy list.

ViewsViews

A view is the way a given object appears to a user. Views can focus the user’s attention on a single object, or provide a way to see, understand, and interact with many objects at once.

2 Views of the 2 Views of the Buddy ObjectBuddy Object in AIM in AIM

Buddy name, status in “buddy list”

Buddy attributes in “buddy info”

Common types of viewsCommon types of views

Detail view – “zooms” in on an object to reveal it’s attributes

Collapsed view – opposite of detail, hides attributes to present a simple representation of an object

List view – places objects in relation to its peers and/or parents

These can be combined too. Can you think of others?

2 views of the buddy list: online & setup2 views of the buddy list: online & setup

RelationshipsRelationships

Relationships among objects help to coordinate system behaviors with user expectations by mapping real-world affinities with normalized data structures. Hierarchical relationships are common, as are peer-communication relationships

Hierarchy: The Buddy List & BuddiesHierarchy: The Buddy List & Buddies

User’s know that a buddy list “has” buddies.

The existence of the buddy list object allows users to perform managing actions…add/delete buddies, monitor status of multiple buddies, etc.

A convention for representing A convention for representing a “has a” relationshipa “has a” relationship

“Buddy list” has “buddies”

Buddy list

buddies Denotes a “has a” relationship

Peer/Communication Peer/Communication RelationshipsRelationships

Objects within a system don’t have to be hierarchical. Because relationships represent real-world interactions first.

Peer/communication relationships represent which objects interact with other objects.

A convention for representing a A convention for representing a “peer/communication” “peer/communication”

relationshiprelationship

buddy

buddy

talks to

“Buddies talk to each other, 1 to 1.”

1 to many? Many to many? Many to 1?

Object/View InstancesObject/View Instances

Objects spawn “instances” of themselves that users interact with. This allows the same basic object to carry context-specific details.

Views also have instances, which tend to be “sessions,” reflecting the time, place, and task conditions.

Buddy list views, two instancesBuddy list views, two instances

Time 1

Time 2

Object StatesObject States

Most objects a user interacts with have a lifecycle, a series of “states” it can go through.

At any given time, an object is occupying some state and may be poised to move to another (usually as the result of something the user does). …more on this later…

User EnvironmentsUser Environments

User environments are collections of objects, arranged to reveal functionality and facilitate interaction.

Be careful equating implementation choices made by designers with the real user environment…there is no necessary connection!

User environment: 2 views of the Buddy User environment: 2 views of the Buddy chat windowchat window

What accounts for

these changes in

the user

environment?

Representing user environment designs Representing user environment designs with Class Diagrams with Class Diagrams

Class diagrams show the objects, views & relationships that make up the user environment

Environment: Chat Window

buddy buddy

Message log

message message

an abstract, simple CD

Use Class Diagrams to illustrate how Use Class Diagrams to illustrate how system will support activity/actionssystem will support activity/actions

Buddies can compose messages, send messages, read messages sent by their buddy

Environment: Chat Window

buddy buddy

Message log

message message

What’s missing from this CD?

Use Class Diagrams to illustrate how Use Class Diagrams to illustrate how system will support activity/actions, 2system will support activity/actions, 2

Buddies can compose messages, send messages, read messages sent by their buddy

Environment: Chat Window

buddy buddy

Message log

message message

Message toolbar*

* More than one object!

Class Diagram ConventionsClass Diagram Conventions

objects

relationships

I know there are formal modeling languages such as UML, and conventions of other sorts. We will use a vastly simplified set of conventions.

views

notes

Relationship ConventionsRelationship Conventions

relationships

Let’s use dotted lines whenever there is a relationship that can be expressed as X “communicates with” Y; X “accesses” Y; etc.

We’ll use solid lines to indicate hierarchical relationships of various sorts: X “has a” Y; X “creates” Y;

Class Diagrams: What are they for?Class Diagrams: What are they for?

objects

relationships

Representing the user environments of your proposed design to groups other than your team: users, reviewers, implementors, etc.

views

notes

Class Diagrams: What do they do?Class Diagrams: What do they do?

objects

relationships

They allow you to highlight the function of the user environment without locking down implementation choices. Consider the alternative…

views

notes

User environments: search the webUser environments: search the web

How can we account for the similarities and differences among these two UIs?

Some things you need to know to Some things you need to know to design user environmentsdesign user environments

What kinds of activity will the environment support?

How is the activity structured ? (actions)

What tools and information (objects) do users need? What do they look like?

How do these objects work together? (relationships) How do they change over time? How are they arranged?

Artifact and Physical Models help Artifact and Physical Models help answer these questions…answer these questions…

What tools and information (objects) do users need? What do they look like?

How do these objects work together? (relationships) How do they change over time? How are they arranged?

Read about these in your CD book

Exercise 3 : Exercise 3 : Artifact and Artifact and Physical Models Physical Models

Exercise 3, build a consolidated Artifact or Physical model based on your CD research...then use this to build a class diagram showing your design for a user environment.

Objects as Finite State MachinesObjects as Finite State Machines

Object have life cycles

Free Occupied

Needs Cleaned

check in

check outclean

Hotel Room:

Object Affordances ChangeObject Affordances Change

“Free” rooms allow check-in “Occupied” rooms allow check-out

Free Occupied

Needs Cleaned

check in

check outclean

Affordances Matter To UsersAffordances Matter To Users

Can a room that needs cleaned be assigned?

Can I check in to an “occupied” room?”

Free Occupied

Needs Cleaned

check in

check outclean

State TablesState Tables

Complete stay; change to

needs cleaned

Change to free

Free OccupiedNeeds

cleaned

Check In

Check Out

Clean

Begin stay; change to occupied

Object states are the columnsObject states are the columns

Start stay; change to occupied

Complete stay; change to

needs cleaned

Change to free

Free OccupiedNeeds

cleaned

Clean

Check In

Check Out

The Operations are the RowsThe Operations are the Rows

Start stay; change to occupied

Complete stay; change to

needs cleaned

Change to free

Free OccupiedNeeds

cleaned

Clean

Check Out

Check In

In the table are the results of In the table are the results of the operationthe operation

Start stay; change to occupied

Complete stay; change to

needs cleaned

Change to free

Free OccupiedNeeds

cleaned

Clean

Check Out

Check In

We highlight the typical lifecycleWe highlight the typical lifecycle

Start stay; change to occupied

Complete stay; change to

needs cleaned

Change to free

Free OccupiedNeeds

cleaned

Clean

Check Out

Check In

We also identify invalid We also identify invalid operationsoperations

Start stay; change to occupied

Not allowed Not allowed

Not allowedComplete stay;

change to needs cleaned

Not allowed

Not allowed Not allowed Change to free

Free OccupiedNeeds

cleaned

Clean

Check Out

Check In

Later, we’ll specify interface Later, we’ll specify interface actions for invalid choicesactions for invalid choices

Start stay; change to occupied

Not allowed

Not allowed

Free

Check In

Clean

Check Out

“Check Out” and “Clean” options may be greyed-out on a menu of options

Invalid Actions in ViewsInvalid Actions in Views

Check out from “free room”?

No “guest” icon to drag

Check Out

Your design should make it easy to see what can and cannot be done in a given view

Confirm the Normal Task Confirm the Normal Task SequenceSequence

Start bill; change to occupied

Complete bill; change to

needs cleanedChange to

Free

Check In

Clean

Check Out

Free OccupiedNeeds

cleaned

Affirm the non-affordancesAffirm the non-affordances

Start bill; change to registered

Complete bill; change needs

cleaned

Change to Free

Check In

Clean

Check Out

Not allowed

Not allowedNot allowed

Free OccupiedNeeds

cleaned

Identify the unexpected..schedule Identify the unexpected..schedule a room that needs cleaned?a room that needs cleaned?

Start bill; change to occupied

Complete bill; change to

Needs cleaned

Change to free

Check In

Clean

Check Out

Move to top ofCleaning list

Start bill; don’t change to

occupied

Free OccupiedNeeds

cleaned

Deliverables for Conceptual Deliverables for Conceptual Design PresentationDesign Presentation

Work models to explain current and transformed scenarios (sequence & flow diagrams, physical & artifact models)

Class diagrams to show designs for your user environments

State tables for principle objects10 minutes!

Line of Argument for Line of Argument for Conceptual DesignConceptual Design

I. Open with a Reminder and a Forecast

II. Present your redesign of the work (not merely the system)

III. Preview upcoming work the team is facing

IV. Close with a summary

OpeningOpening

Remind us of your goal Introduce your current work Preview the contents Forecast the outcome

Remember, your reviewers are new to the project! Orient them, but move quickly to the discussion of work re-design.

It’s a good idea to remind us of It’s a good idea to remind us of the need for your product…the need for your product…

Start with the need

“More and more people today are interested in….

Then move us toward your solution

Our HCI design project ...

Present the Designer’s ModelPresent the Designer’s Model

Show us the transformations you plan for the current activity using work models

Introduce us to the system design via user roles, activities…using work models, class diagrams & state tables

Make the links between the work and the system obvious!

Introduce us to the user Introduce us to the user environments and the environments and the

interactions they supportinteractions they support walk us through key interactions using a

combination of flow/sequence models and your class diagrams

summarize the relationships among objects in each environment

Use your research to give details about views, object states, etc.

““The Reservation Task is The Reservation Task is supported as supported as

interactions among three interactions among three objects...objects...

Hotel

Guest

plan to stay

Reservation

NameAddressTelephone #Credit Details

Guest Details View

Reservation View

Guest DetailsPlanned DatesRoom Type

“…“…and one view...and one view...

Hotel

Guest

plan to stay

Reservation

NameAddressTelephone #Credit Details

Guest Details View

Reservation View

Guest DetailsPlanned DatesRoom Type

“…“…and one sub-view.”and one sub-view.”

Hotel

Guest

plan to stay

Reservation

NameAddressTelephone #Credit Details

Guest Details View

Reservation View

Guest DetailsPlanned DatesRoom Type

““Clerk checks the Clerk checks the Reservation View …”Reservation View …”

Hotel

Guest

plan to stay

Reservation

NameAddressTelephone #Credit Details

Guest Details View

Reservation View

Guest DetailsPlanned DatesRoom Type

““... for the desired date …”... for the desired date …”

Hotel

Guest

plan to stay

Reservation

NameAddressTelephone #Credit Details

Guest Details View

Reservation View

Guest DetailsPlanned DatesRoom Type

““... and the requested room ... and the requested room type.”type.”

Hotel

Guest

plan to stay

Reservation

NameAddressTelephone #Credit Details

Guest Details View

Reservation View

Guest DetailsPlanned DatesRoom Type

My suggestion: do this for 2-3 My suggestion: do this for 2-3 important actionsimportant actions

Pick interesting ones Explain how this new way of

doing things is a “transformation” of the existing practice… emphasize benefits, etc.

Recall your research…all the way Recall your research…all the way through!through!

The key to building credibility is to base your claims on the research you have conducted.

– The EMT’s told us…. – When we watched shoppers, we saw…– This activity has developed and

changed over time ...– Breakdowns occur when...

Talk about what’s coming nextTalk about what’s coming next

Prototyping – show us which design ideas you are testing implementations for

Mention design issues the team is facing

Cue your reviewers and audience for feedback

For next time…For next time…

Share Exercise 3 results as a dry run for presentations

Presentation schedule Prototyping Guidelines for phase 2 memo