1. CS 422: UI Design and Programming
Mid-Term Review

2. Upcoming GR3 is due today.
Midterm exam will be held next class, Tuesday, March 12.
Midterm project presentations, Mar 14 – Mar 21
PS2 is due on Mar 21
We close for spring break!

3. Mid term exam Open notes
Open web; beware of the Internet, not everything you see there is correct
50 minutes; we will start at 2:10 sharp.
Exam will be provided online on Blackboard
A mix of MCQ and short open-ended, problem-solving questions
Syllabus: everything covered until the exam (slides and readings and lectures) except additional materials for 422D/422M and recommended readings.
Total score: 100 points

4. Mid term project presentations: Overview
Mar 14, Mar 19, and Mar groups per day.
All group members MUST be present on the date of their presentation.
Designate 2 or 3 members of your group for the mid-term presentation. The rest will need to present the final presentation.
DO NOT divide the presentation among all 5 members of the group.
Each group gets 10 minutes present. You will be cut off after that. I may ask questions after your presentation.
Come early and check the setup. No additional time will be given to troubleshoot logistic issues.

5. Mid term project presentations: Content
What to include? From problem space to results of GR3, ready to move in to computer prototyping.
Problem space
User analysis
Scenarios
Sketches
What did you learn from them?
Paper prototypes
User testing

6. Mid term project presentations: Rubric
Content (60%)
Did you tell a good story?
Did you tease out the UI design lessons learned from the work done in last 7 weeks? I want to see the design evolution of your project.
Quality of work
Quantity of work
Presentation (30%)
Quality of communication
Quality of presentation
Timeliness
Flow of presentation
Answering questions (10%)

7. A note on groupwork
You MUST work in groups in the real world. Rarely, there is an option not to.
Use this class to improve your groupwork skills.
Two main issues:
Not participating enough
Strong-arming and discouraging others to participate.
Neither will be tolerated and will be strictly penalized.
If there is a problem, talk to me. You are NOT snitching; you are doing a favor to your peer and giving her/him a chance to change the bad behavior. Be proactive. I can’t chase 90 of you to find problems personally.

8. Mid Term Review

9. Thigs we have learned Usability basics UI prototyping Visual design
Intro to Usability
Learnability
Efficiency
Safety
Accessibility
UI prototyping
User-centered design 
Prototyping
UI software architecture
Input
Output
Visual design
Graphic Design
Layout
User testing
Intro to user testing

10. Thigs we have learned Usability basics UI prototyping Visual design
Intro to Usability
Learnability
Efficiency
Safety
Accessibility
UI prototyping
User-centered design 
Prototyping
UI software architecture
Input
Output
Visual design
Graphic Design
Layout
User testing
Intro to user testing

11. Usability basics
How can we learn the difference between good and bad UI designs?
A. System testing
B. Usability testing

12. Usability basics
How can we learn the difference between good and bad UI designs?
A. System testing
B. Usability testing

13. What is usability?
Usability is how well users can use the system’s functionality. Usability is often as important as utility of an interactive system.
Dimensions of usability:
Learnability: is it easy to learn?
Efficiency: once learned, is it fast to use?
Safety: are errors few and recoverable?
Usability dimensions vary in importance
Notice that we can quantify all these measures of usability. Just as we can say algorithm X is faster than algorithm Y on some workload, we can say that interface X is more learnable, or more efficient, or more safe than interface Y for some set of tasks and some class of users, by designing an experiment that measures the two interfaces.

14. Learnability is a system utility.
True
False

15. Learnability is a system utility.
True
False

16. Usability Is Only One Attribute of a System
Others, for example, are:
Functionality
Performance
Cost
Security
Maintainability
Usability
Size
Reliability
Standards
Marketability
In this class, we’ll take an extreme position: usability will be our primary goal.

17. Software engineering is mainly about communicating with:
Users
Programmers
Project Managers
All of the above

18. Software engineering is mainly about communicating with:
Users
Programmers
Project Managers
All of the above

19. User Interface is about communicating with:
Users
Programmers
Project Managers
All of the above

20. User Interface is about communicating with:
Users
Programmers
Project Managers
All of the above

21. Usability problems are whose fault?
Design’s
Users’
Project Manager’s
None of the above

22. Usability problems are whose fault?
Design’s
Users’
Project Manager’s
None of the above

23. How do users learn new interfaces? Learning by Doing
Users don’t start using a system to “learn” it.
Users typically try to do what they want to do. They already have a goal in mind.
And explore the interface to see if they can figure out how to do it. Users are more interested in achieving their goal than in learning your user interface.
As a UI designer, your job is to clearly communicate how to use the UI and help the user achieve their first goal at the same time.
any learning that happens will be secondary

24. Lessons for UI Designers
Know the user’s goals when you design
collecting information about that is a critical feature of the user-centered design process, which we will learn in a few weeks.
User interface should communicate how it works and how to use it.
The UI itself must communicate as clearly as possible how it’s supposed to be used, so that users can match their goals with appropriate actions in the system. How to match users’ goals? Stay tuned…
Help must be searchable and goal-oriented.
If we’re designing for the wrong goals, users are going to struggle to figure out how to do what they want in our system.

25. What is an Interface Metaphor?
An interface metaphor is an analog to real world, something users are expected to be familiar with.

26. Metaphor has roots in semiotics

27. Comparison of Common Interaction Styles
Usability
command language
menus and forms
direct manipulation
speech dialog
Learnability
requires significant learning
much more information into the world
information in the world via metaphors
requires knowing what to say
Error messages
needs error messages
rarely needs error messages
Efficiency
experts can be very efficient
demands good shortcuts
learnability over efficiency
Experts can be very efficient
User type
expert users
better for novices and infrequent users
Synchrony
synchronous
asynchronous
first the user types a complete command, then the system does it. DM, on the other hand, is asynchronous: the user can point the mouse anywhere and do anything at any time. DM interfaces are necessarily event driven.

28. What Interaction Style(s) is in use here?
Speech Dialog
Direct Manipulation
Menus and Forms
All of the above.

29. What Interaction Style(s) is in use here?
Speech Dialog
Direct Manipulation
Menus and Forms
All of the above.

30. Recognition vs. Recall
Recognition: remembering with the help of a visual cue
uses knowledge in the world
Recall: remembering with no help
uses knowledge in the head
Recognition is much easier!

31. Conceptual Models: The three models of UI design
The system model (sometimes called implementation model) is how the system actually works.
The interface model (or manifest model) is the model that the system presents to the user through its user interface.
The user model (or conceptual model) is how the user thinks the system works.

32. Pointing and Steering Tasks
Linear menus
Pie menus

33. Fitts’s Law
Time T to move your hand to a target of size S at distance D away is:
T = RT + MT = a + b log (D/S + 1)
It’s a fundamental law of the human sensory-motor system, which has been replicated by numerous studies.

34. Implications of Fitts’s Law
Targets at screen edge are easy to hit
Mac menu bar beats Windows menu bar
Unclickable margins are foolish
According to one study, pie menus are 15-20% faster than linear menus (Callahan et al. “An empirical comparison of pie vs. linear menus,” CHI 1991).

35. Steering Task Index of difficulty is now linear, not logarithmic
So steering is much harder than pointing
Thus cascading submenus are hard to use
It takes exponentially longer to hit a menu item on a cascading submenu than it would if you weren’t constrained to move down the tunnel to it.
The Mac gets a Hall of Fame nod here:
when a submenu opens, it provides an invisible triangular zone, spreading from the mouse to the submenu, in which the mouse pointer can move without losing the submenu.

36. What is a more difficult interaction (in terms of efficiency): pointing or steering? A. Pointing B. Steering

37. What is a more difficult interaction (in terms of efficiency): pointing or steering? A. Pointing B. Steering

38. Ways to increase UI efficiency
Keyboard shortcuts
Menu accelerators
Defaults & Pending Delete

39. Defaults & Pending Delete
defaults should be fragile; when you click on or Tab to a field containing a default value, it should be fully selected so that frequent users can replace it immediately by simply starting to type a new value. (This technique, where typing replaces the selection, is called pending delete.
Fill in a form with defaults
from history, by prediction
Make the defaults fragile (pending delete mechanism)

40. Other form of shortcuts
History
Autocomplete
Anticipation
Aggregation

41. What is the missing step of human information processing here?
Stimuli
Action
Memory
Chunking

42. What is the missing step of human information processing here?
Stimuli
Action
Memory
Chunking

43. During taking an action, humans may do an error
Human error ≠ System error
Even if an interface is easy to learn and quick to use, it may produce more errors than intended. Hence we need to concern ourselves with safety of a UI.

44. Types of human errors
Slip
Lapse
Mistake

45. Slip Slip is a failure of execution
Failure to correctly execute a procedure
Typically found in skilled behavior

46. What is skilled behavior?
Learning digital painting in Illustrator
Double mouse click to open a file
Picking up a new programming language

47. What is skilled behavior?
Learning digital painting in Illustrator
Double mouse click to open a file
Picking up a new programming language

48. Skilled Behavior
Skilled behavior is an execution of procedures that the user has already learned.
Slips and lapses found in skilled behavior.
Slip: An error in executing a learned procedure is a slip. E.g., clicking before the mouse pointer is over a button.
Lapse: A lapse is a failure of memory—for example, forgetting the overall goal, or forgetting where you are in the procedure.
An error in execution of any learned procedure would be a slip.

49. Mistake A mistake is an error made in planning or rule application.
One way of classifying cognitive behavior is into:
skill-based (learned procedures),
rule-based (application of learned if-then rules),
and knowledge-based (problem solving, logic, experimentation, etc.)
Mistakes are errors in rule-based or knowledge-based behavior

50. Digging deeper into error types

51. Impairments Impairments can be physical or cognitive.
We’ll focus on physical impairments.

52. Impairments Visual impairments Hearing impairments Motor impairments
Color perception
Acuity (“legal blindness”)
Total blindness
Hearing impairments
Often varies with frequency
Motor impairments
Tremor and spasms
Muscle weakness and fatigue
Paralysis

53. Situational disabilities
Temporary conditions of ourselves or our environment that effectively cause impairment.

54. Which one is a situational disability?
A. Color blindness B. Dyslexia C. Wearing non-touchscreen gloves on a snowy day D. All of the above

55. Which one is a situational disability?
A. Color blindness B. Dyslexia C. Wearing non-touchscreen gloves on a snowy day D. All of the above

56. UI Prototyping: User-Centered Design
User-Centered Design is all about knowing
who are your users,
what are your users’ goals
what are your users’ abilities
Intuitiveness of a UI depends on how much users can draw on what they can already do (ability) and what they already know (familiarity). It’s not a feature you build in a system.

57. User-Centered Design is iterative
Invest in several iterations in our design process
Make the early iterations as cheap as possible $ $$
$$$
The radial dimension of the spiral model corresponds to the cost of the iteration step - or, equivalently, its fidelity or accuracy. For example, an early implementation might be a paper sketch or mockup. It’s low fidelity, only a pale shadow of what it would look and behave like as interactive software. But it’s incredibly cheap to make, and we can evaluate it by showing it to users and asking them questions about it.
$$$$

58. Iterate, iterate, iterate
Early iterations use cheap prototypes
Parallel design is feasible: build & test multiple prototypes to explore design alternatives
Use richer implementations in later iterations, after UI risk has been mitigated
More iterations generally mean better UI
Only mature iterations are seen by the world (a.k.a users)

59. Do user analysis
Also known as requirement gathering, establishing design requirements
More focus on users that classical s/w design approaches
E.g., saying “OMS users should all have touchtone phones” is stating a requirement on the system, not a characteristic of the existing users.
Study real users.
Observe
Interview
Survey
Don’t just ask two of your friends. That’s NOT user analysis!

60. Concrete tasks vs. essential goals
Don’t get bogged down in what users do now, rather focus on why they do it
User X: “Save file to disk”
User requirement: “Make sure my work is kept”
Focus on the essential goals of the users
concrete task
essential task

61. Focus on essential goals during user analysis or the requirement gathering phase.
True
False

62. Focus on essential goals during user analysis or the requirement gathering phase.
True
False

63. Focus on essential goals during formative user testing.
True
False

64. Focus on essential goals during formative user testing.
True
False
Focus on concrete tasks during user testing.

65. Needfinding is most relevant for which model(s) of UI design?
System model
Interface model
User model
All of the above

66. Needfinding is most relevant for which model(s) of UI design?
System model
Interface model
User model
All of the above

67. Prototyping is most relevant for which model(s) of UI design?
System model
Interface model
User model
All of the above

68. Prototyping is most relevant for which model(s) of UI design?
System model
Interface model
User model
All of the above

69. Design patterns
A pattern is a reusable solution that can be applied to commonly occurring problems in software design.
Patterns can provide generalized solutions which are documented in a fashion that doesn't require them to be tied to a specific problem.
When taking a high-level look at the software architecture of GUI software, design patterns have proven most useful.
Three of the most important patterns are model-view, view tree, and listener.

70. Design patterns
The model-view abstraction, which has evolved somewhat since its original formulation in the early 80’s;
The view tree, which is a central feature in the architecture of every important GUI toolkit; and
The listener pattern, which is essential to decoupling the model from the view.
Not the only ones…

71. DOM is an example of ___________ in GUI implementation.
View Tree
Listener Pattern
Learnability
Efficiency

72. DOM is an example of ___________ in GUI implementation.
View Tree
Listener Pattern
Learnability
Efficiency

73. View Tree
Virtually every GUI system has some kind of view tree. The view tree is a powerful structuring idea, which is loaded with responsibilities in a typical GUI.
Output
GUIs change their output by mutating the view tree
A redraw algorithm automatically redraws the affected views
Input
GUIs receive keyboard and mouse input by attaching listeners to views (more on this in a bit)
Layout
Automatic layout algorithm traverses the tree to calculate positions and sizes of views

74. DOM tree The backbone of an HTML document are tags.
According to Document Object Model (DOM), every HTML-tag is an object. Nested tags are called “children” of the enclosing one.
The text inside a tag it is an object as well.
All these objects are accessible using JavaScript.

75. Listener Pattern Input handlers are associated with views
Also called listeners, event handlers, subscribers, observers
To handle mouse input, for example, we can attach a handler to the view that is called when the mouse is clicked on it.

76. JavaScript MV* Patterns
Three common patterns
MVC (Model-View-Controller),
MVP (Model-View-Presenter) and
MVVM (Model-View-ViewModel)

77. GUI implementation approaches
Procedural programming
Declarative programming
Direct manipulation

79. Procedural programming
Code that says how to get what you want
An explicit flow of control
Put down block A.
Put block B on block A.
Put block C on block B.

80. Declarative programming
Code that says what you want
No explicit flow of control
A tower of 3 blocks.

81. Direct Manipulation
Creating what you want in a direct manipulation interface
E.g., Draw, drag-and-drop, etc.

82. Next class
Mid-Terms
Good luck!