1. SE 204, IES 506 – Human Computer Interaction
Lecture 4: The Design Process
Lecturer: Gazihan Alankuş
Please look at the end of the presentation for assignments (marked with TODO)

2. CHAPTER 3: Managing Design Processes
Designing the User Interface:
Strategies for Effective Human-Computer Interaction
Fifth Edition
Ben Shneiderman & Catherine Plaisant
in collaboration with Maxine S. Cohen and Steven M. Jacobs
Revised by Gazihan Alankuş

3. The Lean Startup #leanstartup
Eric Ries

4. Organizational Design and Support Usability
Design is inherently creative and unpredictable. Interactive system designers must blend knowledge of technical feasibility with a mystical esthetic sense of what attracts users.
Design is a process, not a state.
The design process is nonhierarchical.
The process is radically transformational.
Design intrinsically involves the discovery of new goals.
We will learn how to manage the design process

5. Organizational Design and Support Usability (cont.)
“Usability engineering” has evolved into a recognized discipline with maturing practices and a growing set of standards
Usability engineers and user-interface architects, sometimes called the user experience (UX) team are gaining experience in organizational change
There are numerous papers and reporting addressing return on investment (ROI) for usability testing
IBM, $1 on usability brings $100 payoff!
Another analysis shows 720% improvement!

6. The Four Pillars of Design

7. How should we do it?
What’s the first step?
What’s next?

8. Waterfalls are dangerous!
Traditional Product Development Unit of progress: Advance to Next Stage
Waterfall
Requirements
Design
Problem: known
Solution: known
Implementation
Verification
Maintenance
Waterfalls are dangerous! 8

9. Spirals are better

10. Agile Unit of progress: a line of working code
“Product Owner” or
in-house customer
Problem: Known
Solution: Unknown 10

11. Product Development at Lean Startup Unit of progress: validated learning about customers ($$$)
Problem: Unknown
Solution: Unknown

12. Here is the core iterative loop
IDEAS
LEARN
BUILD
DATA
CODE
This is what it boils down to
Your ultimate goal is to learn!
As we go on, we will place our tasks here
MEASURE

13. The Four Pillars of Design

14. Here is the core iterative loop
IDEAS
Requirements
LEARN
BUILD
DATA
CODE
MEASURE

15. Requirements Goal: identify users and tasks USERS: Who will use this?
How do they think?
What do they like/know?
TASKS: What does this need to do?
What tasks do we need to support?

16. A sample iteration to start collecting requirements
We don’t know much, yet.
Maybe we should observe them while they are in the tasks
These must be the users
These seem to be the tasks
IDEAS
If our software did this, it would help them!
LEARN
BUILD
Create an environment
to put users in this
situation
There is a problem that needs to be solved with software
DATA
CODE
We saw that this and that happens during the task
MEASURE
Use the situation to learn what is going on
Observe
Ask questions

17. A sample iteration to start collecting requirements
We don’t know much, yet.
Maybe we should observe them while they are in the tasks
These must be the users
These seem to be the tasks
IDEAS
If our software did this, it would help them!
LEARN
BUILD
Create an environment
to put users in this
situation
There is a problem that needs to be solved with software
DATA
CODE
We saw that this and that happens during the task
Ethnographic Observation:
MEASURE
Use the situation to learn what is going on
Observe
Ask questions

18. Ethnographic Observation
Preparation
Understand organization policies and work culture.
Familiarize yourself with the system and its history.
Set initial goals and prepare questions.
Gain access and permission to observe/interview.
Field Study
Establish rapport with managers and users.
Observe/interview users in their workplace and collect subjective/objective quantitative/qualitative data.
Follow any leads that emerge from the visits.
Record visits

19. Ethnographic Observation (cont.)
Analysis
Compile the collected data in numerical, textual, and multimedia databases.
Quantify data and compile statistics.
Reduce and interpret the data.
Refine the goals and the process used.
Reporting
Consider multiple audiences and goals.
Prepare a report and present the findings.

20. What could be next? Use what you learned!
Maybe we can do this to enable it
If our software did this,
it would help them!
IDEAS
LEARN
BUILD
What do you create here?
We saw that this and that happens during the task
DATA
CODE
MEASURE

21. Prototypes
2/5/2019

22. Prototyping
After you have some idea on what is necessary, you can start creating prototypes
What you have is a prototype as you keep looping. The final software will be one of the better prototypes
Paper prototypes
Non-functional software mockups
Working prototypes

23. Prototypes are a tool for measuring and learning
IDEAS
LEARN
BUILD
PROTOTYPES
DATA
CODE
This is what it boils down to
Your ultimate goal is to learn!
As we go on, we will place our tasks here
MEASURE

24. The Four Pillars of Design

25. Paper Prototypes
Remember playing with your toys when you were 6 years old?
Toys + imagination = loads of fun!
Let’s play cars!
Shared imagination
Make your friend experience a car race
He can step into your imagination and contribute
Any other board game
Same idea
Create a low-fidelity interactive experience that enables you to share imagination with others
2/5/2019

26. Why Paper Prototype? Communicate (with users and other team members)
Demonstrate
Make them experience rather than convince
Decide (yourself and with team members)
You are stateful!
Decisions about the interface are better made when playing/using. Not when staring at Microsoft Word.
2/5/2019

27. Communicate “A picture is worth a thousand words” -Napoleon
You are not a painter. You are designing interactive experiences!
“A one-minute user experience is worth a thousand pictures!” -Gazihan
2/5/2019

28. Decide: Humans are Stateful
You are a completely different person when you are in different situations!
Cool store with banging music
Staring at your credit card bill
Lying on the beach
Having an exam
In the new home you’ll buy
Staring at your mortgage bill
Understanding that certain states are better for certain decisions changes your life for the better!
Using your interface
Typing in Microsoft Word
Leads to better decisions about your interface
2/5/2019

29. Decide Use -> Better decisions
How can you use it before creating it?
PAPER PROTOTYPE!
Paper prototypes allow you to simulate using the interface you want to create, so that you can make better decisions without using the actual interface
2/5/2019

30. Paper prototype how? Don’t worry about how it looks
Not only paper. Can use plastic props, too.
Create your main interface elements
Enough detail for core mechanics
Enough detail for whatever you want to demonstrate
2/5/2019

31. Example
2/5/2019

32. Using Paper Prototypes
Don’t get attached
Plan to throw one or two away
Throwing away is not easy. Force yourself at least once.
The whole point of prototypes is to feel free!
Forget about it and create a new one with a different idea, rather than trying to force things to work together
Parallelize them
Keep more than one working paper prototype when you have multiple really good options
2/5/2019

33. Creating Paper Prototypes
You can use what you learned or
You can get users to help you with it!

34. Participatory Design

35. Participatory design is one way of creating prototypes
IDEAS
Participatory design
LEARN
BUILD
PROTOTYPES
DATA
This is what it boils down to
Your ultimate goal is to learn!
As we go on, we will place our tasks here
MEASURE

36. Participatory Design (cont.)
Controversial
More user involvement brings:
more accurate information about tasks
more opportunity for users to influence design decisions
a sense of participation that builds users' ego investment in successful implementation
potential for increased user acceptance of final system

37. Participatory Design (cont.)
On the negative side, extensive user involvement may:
be more costly
lengthen the implementation period
build antagonism with people not involved or whose suggestions rejected
force designers to compromise their design to satisfy incompetent participants
build opposition to implementation
exacerbate personality conflicts between design-team members and users
show that organizational politics and preferences of certain individuals are more important than technical issues

38. Participatory Design (cont.)

39. The Four Pillars of Design

40. Guidelines Guidelines documents and processes
Each project has different needs, but guidelines should be considered for:
Words, icons, and graphics
Terminology (objects and actions), abbreviations, and capitalization
Character set, fonts, font sizes, and styles (bold, italic, underline)
Icons, graphics, line thickness, and
Use of color, backgrounds, highlighting, and blinking

41. Guidelines Screen-layout issues Input and output devices
Menu selection, form fill-in, and dialog-box formats
Wording of prompts, feedback, and error messages
Justification, white space, and margins
Data entry and display formats for items and lists
Use and contents of headers and footers
Input and output devices
Keyboard, display, cursor control, and pointing devices
Audible sounds, voice feedback, touch input, and other special devices
Response time for a variety of tasks

42. Guidelines Action sequences Training
Direct-manipulation clicking, dragging, dropping, and gestures
Command syntax, semantics, and sequences
Programmed function keys
Error handling and recovery procedures
Training
Online help and tutorials
Training and reference materials

43. Guidelines
Guidelines creation should be a social process within an organization
to help it gain visibility and build support

44. What’s left? (next week)
IDEAS
CODE
DATA
BUILD
LEARN
MEASURE

45. TODO: Homework
We would like to build a mobile application (iPhone, Android, etc.) that introduces visitors to the IEU campus.
Using things that we learned, identify requirements for such an application
Explain what you have done to identify these requirements (“I came up with them while sitting on my desk” is one answer)
Create a paper prototype that aims to satisfy most of the requirements that you identified
Submission
Write down the requirements in the body of an
Take pictures of your paper prototype and attach them separately to the . No zips or rars!
Send them to with the title “[SE204] HW Week 4” before next class
If you don’t receive a reply from me saying “thank you”, that means I did not receive your .