Conceptual Models HCIUIST Course Solange Karsenty Conceptual Models

Conceptual Models HCI/UIST Course Solange Karsenty

Conceptual Models l Mental representation of how object works & how interface controls affect it l People have preconceived models that you may not be able to change ¡ infix vs. postfix calculators ¡ dragging to trash ? l deletes (eject disk a bad idea!) l Interface must communicate model (how? ) ¡ online help / documentation can help, but shouldn’t be necessary ¡ visually

Visual Clues (affordances) l Well-designed objects have affordances ¡visible clues to their operation l Poorly-designed objects ¡no clues ¡false clues lteapot with handle & spout on the same side Crazy design for a screwdriver!

Refrigerator freezer fresh food Problem: freezer too cold, but fresh food just right

Refrigerator Controls Normal Settings Colder Fresh Food Coldest Fresh Food Colder Freezer Warmer Fresh Food OFF (both) A B C D E C and 4 C and 5 -6 B and 7 D and 6 -7 C and 3 -1 0 7 6 5 4 3 What is your conceptual model?

Most Likely Conceptual Model A B C D E 7 6 5 4 3 i. e. , independent controls cooling unit

Correct Conceptual Model 7 6 5 4 3 cooling unit A B C D E Now can you fix the problem? Possible solutions: make controls map to user’s model 2) make controls map to actual system 1)

Design Model & Customer’s Model Design Model System Image l Customers get model from experience & usage ¡ through system image l What if the two models don’t match?

Mismatch between Designer’s & Customer’s Conceptual Models l Errors l Slow l Frustration l. . .

Design Guides l Provide good conceptual model ¡ customers want to understand how UI controls impact object l Make things visible ¡ if object has function, interface should show it l Map interface controls to customer’s model ¡ infix -vs- postfix calculator -- whose model? l Provide feedback ¡ what you see is what you get!

What is a conceptual model? l Design metaphors (analogies) used in the design l The user concepts themselves l Relationships between concepts l The mapping between the concepts and the task-domain the system is designed to support

Conceptual Model (user concepts) l Describe application tasks l Organize tasks into functions l Identify the objects: ¡Their properties ¡Their rules of behavior (operations)

Example l What is the conceptual model?

Structured or sampled?

Conceptual Model: two sides l Representation model ¡What is this picture made of? l. A circle and rectangle: can move l. Dots : can erase l Construction model ¡How was it built? l. A green rectangle and a blue circle l. A rectangular area filled with green, a circle area filled with blue

Example: Drawing Tool FUNCTIONS OBJECTS OPERATIONS Document management file l. Saving l. Printing etc. Composing (global editing) Geometrical shapes l. Depth arrangement l. Page setup (cut copy paste, move, transform, group etc. ) l. Attribute: color, pattern, style Shape modification (local editing) l. Handles (predefined shapes l. Edges (polygons and splines) l. Resizing, reshaping l. Moving, removing and adding edges

Example 2 l an online library catalog ¡ books ¡ videos (collections of) ¡ journals (contains issues) ¡ Check out, check in etc. .

Example 2 l Metaphors: the information is organized as in a physical card-catalogue. l concepts: e. g. , item (with attributes: title, ISBN, status; with actions: check- out, check-in, reserve), subtypes of item (e. g. , book, periodical issue, LP, video), periodical volume, user account (with attributes: name, items checked out), librarian;

Example 2 l Relationships: e. g. , a book is one type of item, periodical volumes contain issues; l mappings: e. g. , each item in the system corresponds to a physical item in the library;

Create a dictionary l Once objects, actions and attributes are identified, build a dictionnary that will be used across the application l consistency

Design: Make Things Visible l Refrigerator (? ) ¡ make the A. . E dial something about percentage of cooling between the two compartments? l Controls available on watch w/ 3 buttons? ¡ too many & they are not visible! l Compare to controls on simple car radio ¡ #controls == #functions ¡ controls are labeled (? ) ¡ HOLD button on old style telephone

Make Things Visible l Make the A. . E dial something about percentage of cooling between the two? l Controls available on watch w/ 3 buttons? l Compare to controls on simple car radio ¡#controls == #functions ¡controls are labeled (? ) ¡HOLD button on old style telephone l Natural signals ¡plates on doors. . . location of push bars. . .

Map Interface Controls l Control should mirror real-world ¡which is better for speaker front/back control? Dashboard

Metaphor l Definition ? ¡ “The transference of the relation between one set of objects to another set for the purpose of brief explanation” l Lakoff & Johnson ¡ “. . . the way we think, what we experience, and what we do every day is very much a matter of metaphor. ” ¡ in our language & thinking - “argument is war” l he attacked every weak point. . . criticisms right on target. . . if you use that strategy l We can use metaphor to highlight certain features & suppress others

Desktop Metaphor l A way to explain why some windows seemed blocked ? ¡not an attempt to simulate a real desktop

Developing Key Interface Elements l Develop interface metaphor or conceptual model l Communicate that metaphor to the user l Provide high-level task-oriented operations not low-level implementation commands

What a conceptual model is NOT l The user interface l The user’s mental mode l Use cases l Implementation

When do you define the CM? l Before anything! l Before task analysis l Before creating scenarios of use

Advantages l Gives a clear target for the expected UI: what has to be represented, what user can do l The UI shoud translates the abstract concepts of the conceptual model into concrete presentations, controls, and useractions

Advantages l Documentation is easier to write l The CM must be enforced for any future additions, for example adding a menu item should correspond to a clearly defined action on a CM object l The CM is not a rigid contract, it can be refined with the stages of design (protyping, user testing cycles)

Teams vs. Groups 4 Teams & good performance are inseparable * a team is more than the sum of its parts l Groups ¡ strong leader ¡ individual accountability ¡ organizational purpose ¡ individual work products ¡ efficient meetings ¡ measures performance by influence on others ¡ delegates work l Teams ¡ shared leadership ¡ individual & mutual accountability ¡ specific team purpose ¡ collective work products ¡ open-ended meetings ¡ measures performance from work products ¡ does real work together

Keys to Team Success l Common commitment ¡ requires a purpose in which team members can believe l “prove that all children can learn”, “revolutionizing X…” l Specific performance goals ¡ comes directly from the common purpose l “increasing the scores of graduates form 40% to 95%” ¡ helps maintain focus – start w/ something achievable l A right mix of skills ¡ technical/functional expertise (programming/cogsci/writing) ¡ problem-solving & decision-making skills ¡ interpersonal skills l Agreement ¡ who will do particular jobs, when to meet & work, schedules

Contextual Inquiry & TA Write-up l Problem & solution overview l Contextual inquiry ¡ who you did it with & key results l TA analysis question/answers l New & old tasks ¡ scenario vs. task l Suggested solution ¡ functionality (i. e. , what can you do with it) ¡ user interface (i. e. , how you use it - rough sketches) ¡ 3 scenarios of example tasks (storyboards) l Due on-line in HTML on Monday (& paper copy in class) l No more than 6 pages printed ¡ not including sketches (scan those in & display inline)

Summary l Conceptual models? ¡ mental representation of how the object works & how interface controls effect it l Design Model should equal Customer Model? ¡ mismatches lead to errors ¡ know the customer’s likely conceptual model l Design guides? ¡ make things visible ¡ map interface controls to customer’s model ¡ provide feedback l Reference : Conceptual Models: Begin by Designing What to Design (Interactions, 2002) l