View
216
Download
1
Category
Tags:
Preview:
Citation preview
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
Recommended