1. Software Engineering D7025E
User Interaction Design and Rapid Prototyping

2. User Interaction Design
User Interfaces – why are they important?
Prevent mistakes
Efficient and Pleasant use
Usability, Intuitiveness
Give the user what they want
Because bad UIs cause applications to fail
Make/Save money

3. Understanding User Needs
Purpose of the application?
Target user?
Means of interaction?
Special constraints (environment, hardware, physical limitations, disabilities, etc.)?

4. Common pitfalls Not focusing on user’s needs
Breaking common interaction models
Allowing technology to drive innovation
Not being consistent
Allowing improper behavior
Making bad assumptions of use

5. Understanding the problem
Human-Computer Interaction (HCI)
What is the difference of Humans and Machines?
“Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them.” (SIG CHI)

6. Styleguides Rules for design, for doing things, etc. Goal: consistency
Prerequisite: knowledge of the style guide
Defines:
Look and feel, placement, ordering of elements
Naming conventions, icons, colors and shapes
Logic of dialogs, content, structure, functionality

7. Example Guidelines – getting the user’s attention
Exceptions or time-dependent – must attract
Marking: underline, box it, point, bullet, etc.
Size: up to four sizes
Fonts: up to three fonts
Blinking: limited use, but 2-4 Hz if used.
Color: up to four standard colors
Audio: soft tones for feedback

8. The 8 golden principles Strive for consistency
Enable frequent users to use shortcuts
Offer informative feedback
Design dialogues to yield closure
Error prevention/handling
Permit easy reversal of actions
Support internal locus of control
Reduce short-term memory load
Yield closure: progress bar, make it clear when I’m done shopping, etc.
Error prevention: Are you sure you want to quit without saving?
Internal locus: user should feel in control

9. Jakob Nielsen’s 10 usability heuristics
Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Error prevention
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help users recognize, diagnose, recover from errors
Help and documentation

10. Placement of elements The F-pattern Fitt’s law 4.4 s/100 words
Keywords, things that stand out
Fitt’s law

11. Application design The meaning of colors Simplicity and intuitiveness
Learnability and logical flow
Grouping of functionality and classification
Feedback and Navigation support
Error handling and prevention

12. Let’s have a break

13. Hum

14. Rapid Prototyping

15. Problem
User reaction is difficult to predict

16. What is Rapid Prototyping?
User Centric (User Centered)
Experimental and partial design
Testing design ideas
Something to do early on

17. Why rapid prototyping? Test early Implementation is expensive
Get feedback early
Implementation is expensive
Rapid prototypes are cheap
Traditionally users lack the ability to envisage desigs conceptually

18. Prototyping tools GUI design Functionality Mockingbird Balsamiq
Pen and paper, Powerpoint
Functionality
Powerpoint
Wizard of Oz
Pen and Paper, Post-it notes, Storyboards
Video
Simple code

19. Powerpoint prototypes
Add ”functionality” by
Insert Hyperlink / Action
Place in document, Last slide viewed, First slide, etc.

20. Wizard of Oz
Some examples
User
>Blurb blurb
>Do this
>Why?

21. The Nursing Home Prototype

22. How? Purpose? Target user? Remove inessential elements
When, Where, How, Experience, etc.
Target user?
Remove inessential elements
Avoid unnecessary design
Remove unnecessary features
Evaluate early

23. Friday: Code-review workshop
Purpose: to give you some assistance
To prepare: look at the code, discuss
I will bring printouts that you can write on
Come prepared…

24. Questions?