human-computer interaction is4300 - northeastern university · 10/14/15 3 p4 – moving to screen...
TRANSCRIPT
![Page 1: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/1.jpg)
10/14/15
1
Human-Computer Interaction IS4300
1
I5 due next class
n Your mission in this exercise is to implement a very simple Java painting application. The app must support the following functions:
n Draw curves, specified by a mouse drag. n Draw filled rectangles or ovals, specified by a mouse drag (don't worry
about dynamically drawing the shape during the drag - just draw the final shape indicated).
n Shape selection (line, rectangle or oval) selected by a combo box OR menu.
n Color selection using radio buttons OR menu. n Line thickness using a combo box OR menu. n A CLEAR button.
3
![Page 2: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/2.jpg)
10/14/15
2
P3 – Conceptual Design
n Convert task scenarios and hierarchical task analyses into a conceptual design.
n Metaphors. n Make a list of possible interaction metaphors for your interface (per the
examples in class). For each of your task scenarios list at least two options for interaction metaphors and some of the implications of your choice.
n Activity Design Scenarios n Transform each of your problem scenarios into an activity design scenario,
following the examples in Rosson & Carroll Ch 3, Figures 3.4 and 3.5.
n In design activities, you should also be considering many options and down-selecting.
4
Scenario-Based Design
![Page 3: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/3.jpg)
10/14/15
3
P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors
(due today) • Task hierarchies
• Visibility & Feedback requirements for each step
• Interaction scenarios Now: n Design main screens n Storyboard task steps 6
Interaction Scenario
10
![Page 4: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/4.jpg)
10/14/15
4
P4: Interface design Main screen sketches
11
P4: Storyboard for each of your 3 tasks
12
![Page 5: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/5.jpg)
10/14/15
5
Screen Layout
What do we know so far?
13
Screen Layout What do we know so far? How do we implement these? n Human memory & attention n Gestalt laws of human perception n Design Principles
n Nielsen’s Heuristics n Norman’s Heuristics
14
![Page 6: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/6.jpg)
10/14/15
6
Gestalt principles of grouping
15
Heuristics / Design Principles How do we implement them?
1. Simple and Natural Dialogue 2. Speak the User’s Language 3. Minimize User Memory Load 4. Consistency 5. Feedback 6. Clearly Marked Exits 7. Shortcuts 8. Good Error Messages 9. Prevent Errors 10. Help and Documentation 11. Use Appropriate Affordances 12. Visibility / Obviousness
![Page 7: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/7.jpg)
10/14/15
7
Guidelines for Graphic Design Designing Visual Interfaces, Mullet ‘95
n Simplicity n Contrast n White space n Alignment
18
Simplicity
n Remove unnecessary widgets n Use regularity in design (fonts, lines,
colors)
19
![Page 8: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/8.jpg)
10/14/15
8
n Interface Layout n Simplicity is the key
Dix 5.7 Using whitespace
22
• Use to group controls instead of lines • Use margins (faster to scan) • Don’t crowd controls together
![Page 9: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/9.jpg)
10/14/15
9
Contrast
n The irregularity in a design that communicates information
n Dimensions that afford low effort contrast
n Use the “squint test” 23
Example: Word 97 print
24
![Page 10: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/10.jpg)
10/14/15
10
How to create “natural groupings”?
n Card sort!
25
WIMP components
26
![Page 11: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/11.jpg)
10/14/15
11
Component Heuristics Stone, et al, User Interface Design and Evaluation
n Primary windows n Driven by main tasks & task objects
n Tabs n Information on different tabs should be independent. n Should not be used for sequential steps.
27
Menus Schneiderman & Plaisant
n Names should indicate purpose n Use task semantics to organize menus n Prefer broad-shallow to narrow-deep n Group items meaningfully n Sequence items meaningfully n Use brief items n Use consistent grammar, layout, and
terminology 28
![Page 12: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/12.jpg)
10/14/15
12
Designing Menus
Component Heuristics Stone, et al, User Interface Design and Evaluation
n Toolbars n ToolTips can help users learn the meanings of icons.
n Buttons n Label indicates the action the button does n Place along bottom of dialog boxes n Should be same size and shape. Different widths OK
for row of buttons.
30
![Page 13: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/13.jpg)
10/14/15
13
Component Heuristics Stone, et al, User Interface Design and Evaluation
n List (combo) boxes n Use when there are a large number of options, OR if
the list is likely to change
n Text box n If you cannot anticipate user input n Size of the box should indicate amount of
info required
31
Icons
n Design icons that are visually simple but informative, represent concrete objects when possible.
n Easier to understand than text?
n In practice, a picture to decorate a label
n May help with memorability
33
![Page 14: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/14.jpg)
10/14/15
14
Icons
n Icons represent features and functions. n Help people recognize which feature they need to
access.
n Icons make use of three principle types of representation n Metaphor relies on people transferring knowledge from one
domain and applying to another. n Direct mapping - creating a more or less direct image of what the
icon is intended to represent. n Convention - arbitrary design, which has become accepted as
standing for what is intended over time.
Horton’s checklist for icon designers
n Understandable. Spontaneously suggest the intended concept to the viewer?
n Familiar. Objects in the icon ones familiar to the user? n Unambiguous. Are additional cues (label, other icons documentation)
available to resolve any ambiguity? n Memorable. Feature concrete objects in action? n Informative. Why is the concept important? n Few. Is the number of arbitrary symbols less than 20? n Distinct. Is every icon distinct from all others? n Attractive. Does the image use smooth edges and lines? n Legible. Test all combinations of color and size? n Compact. Is every object, every line, every pixel necessary? n Coherent. Is it clear where one icon ends and another begins? n Extensible. Can I draw the image smaller? Will users still recognize it?
![Page 15: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/15.jpg)
10/14/15
15
Modal (vs. Modeless) Dialog
Tool Bars
• Good for efficiency of expert users
![Page 16: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/16.jpg)
10/14/15
16
Command Buttons
• Labels are important • Most important at left and top • All buttons should be same size, but adjusting
width for label length is OK
Text
n Conventions of typography and graphic design help us interpret that text as if it were on a page.
n Human readers benefit from many centuries of refinement in text document design.
n Heuristics n Line length ~60 chars / 8-12 words n Left-justified n Lines with distinct thoughts, or that end on
grammatical boundaries are best 42
![Page 17: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/17.jpg)
10/14/15
17
Dix 5.7 Laying out columns
43
Hard to scan across cols
Color
Use sparingly. Don’t rely on it: Remember 5-8% of users are likely to be color blind. Keep contrast in mind.
![Page 18: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/18.jpg)
10/14/15
18
Designing with color Marcus ‘92
n Use a maximum of 5 +/- 2 colors.
n Color connotations can vary dramatically even within a culture. n E.g., blue in the US is interpreted different by different groups – for
healthcare professionals it is taken to indicate death; for movie-goers it is associated with pornography; for accountants it means reliability or corporateness (think of the ‘Big Blue’ – IBM).
Images: Graphs Centuries of conventions
UIDE Chapter 13
![Page 19: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/19.jpg)
10/14/15
19
UIDE Chapter 13
Images: Graphs
Node and Link Diagrams
48
![Page 20: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/20.jpg)
10/14/15
20
Sound kinds? when to use?
n Different Types of Sound
n Ambient, sound effects, music, speech
n “audio icons” = familiar
n “earcons” = synthetic
n Making Good Use of Sound Effects
n Reinforcement, completion of an operation, attract attention.
n Using Music Effectively
n Signature, evocative, atmosphere
n Using Speech Effectively
n Tone, pace, accent
n TEST for annoyingness!
Generated Speech
n demo
50
![Page 21: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/21.jpg)
10/14/15
21
Critique?
51
Critique?
![Page 22: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/22.jpg)
10/14/15
22
Most Important Concerns in Screen Design
n Use restraint n Keep it as simple as possible
n Logically group widgets n Spatially or using panels/borders/tabs
n Try lots of variants n Critique, test, evaluate, to downselect
53
Exercise
n Project teams n Sketch three versions of the main
screen/window/dialogue for your most complex task
54
![Page 23: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/23.jpg)
10/14/15
23
Research: SUPPLE Krzysztof Gajos
56
57
![Page 24: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/24.jpg)
10/14/15
24
Design guidance
Sources of Design Guidance
n Standards n Internationally agreed upon design
principles
n Style Guide n Collection of design rules, usually for a
particular company or product line
![Page 25: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/25.jpg)
10/14/15
25
User Interface Standards n Official, publicly available documents
that define standards for user interface design n ISO 9241 – Ergonomic requirements for
office work with visual display terminals n ISO 14914 – Software ergonomics n ISO 9241-210 – Human-centered design
process n ISO 20282 – Operation of everyday
products
Style Guides
n A typical guide includes: n Description of required interaction styles
and user interface controls n Guidance on when and how to use the
various styles or controls/widgets n Illustrations of styles and controls n Screen templates
![Page 26: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/26.jpg)
10/14/15
26
Commercial Style Guides
n Apple Interface Guidelines n Microsoft Windows UI Guidelines n IBM’s Common User Access n Motif Style Guide n Java Look and Feel
63
Last updates 2001
Fundamentals The Java look and feel is the default interface for applications built with Java. The Java look and feel is designed for cross-platform use and can provide: • Consistency in the appearance and behavior of common design elements • Compatibility with industry-standard components and interaction styles • Aesthetic appeal that does not distract from application content
![Page 27: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/27.jpg)
10/14/15
27
Java Look and Feel
n Accessibility n Internationalization n Colors, Fonts, Capitalization n Layout and Spacing of Widgets n Icon design n etc
64
Mouse Pointers
65
![Page 28: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/28.jpg)
10/14/15
28
Customized Style Guides
n Create your own! For your specific project or product line…
n Helps focus on design issues early n Enables use of principles and guidelines n Steer decision making and serve as
record n Ensures internal consistency
Style Guides Bottom Line
n If you are building internal tools or one-off projects, using a GUI-builder will ensure most relevant design rules are followed.
n If you are building commercial UIs, your company will provide you with the style guidelines to use.
n You should not be worrying too much about this now in your team project, but they may provide guidance for design decisions.
67
![Page 29: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/29.jpg)
10/14/15
29
P4 – Design Sketches Due in 1 week
n You will explore possible design options, and sketch what your interface will look like.
n Interaction Scenarios n Expand each of your activity design scenarios (3+) into full interaction scenarios,
thinking about what the user perceives and the actions he/she performs at each major step in the scenario.
n Design Options n Three options for your most important window or dialog box, and brief rationale
for why you selected one over the other two.
n Preliminary interface design. n One or more sketched windows or dialog boxes, along with the menus and
controls that the user manipulates.
68
P4 – Design Sketches Due in 1 week
n Storyboards. For each of your tasks/scenarios, describe how your preliminary interface would be used to perform the task. Use rough sketches to illustrate how the interface would look at important points in the task.
69
![Page 30: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/30.jpg)
10/14/15
30
P4: Interface design
70
P4: Storyboard for each of your 3 tasks
71
![Page 31: Human-Computer Interaction IS4300 - Northeastern University · 10/14/15 3 P4 – Moving to screen design Given: • Activity scenarios & Interaction Metaphors (due today) • Task](https://reader034.vdocument.in/reader034/viewer/2022042404/5f189e5983b7fe1fea3b37ae/html5/thumbnails/31.jpg)
10/14/15
31
To Do n Read
n Evaluation n Inspection n User testing n Evaluation
n Swing layout managers.
n Finish by Next class n I5 – Painting applet
n Start n P4 – Design Sketches
72