1. 1CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. Lecture 7: Principles and Patterns

2. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Lets Review... Today's GUIs are not very usable – Software is rude, obscure, and makes unwarrented assumptions. – Software exhibits inappropriate behavior. Industry fails to build usable software – Ignorant of users: what makes them happy? – Conflicts of interest: programmers in charge. – Lack of a process, no GUI software engineering Bad GUIs can lead to unproductive users who are generally annoyed and unhappy with computer interfaces.

3. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Tasks vs. Goals Tasks are a means to an end. Goals are the end. Goal oriented design: – Goals rarely change over time, tasks do. – Focus on goals overcomes different thinking users – Focus on tasks forces users to think odd ways – Goals are introduced in time, tasks reused. A good GUI must be designed properly: – Must know who the users are – Must know what the users want to do – Must know why the users want to use the program – Must know how the users will use the program

4. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Lets Review... Cooper's Design Methodology – Research – Modeling – Requirements – Framework – Refinement Research users & the domain Modeling users & use contexts Requirements user, business, & technical needs Framework structure & flow Refinement of behavior, form, context

5. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Research Acquisition of qualitative data. Interviews User Observation Ethnographic research Purpose: Gain a perspective of the stakeholders, customers, SMEs, and users that will be using the new product. Example: User observation of students using the Prexel web site. Interviewing student, faculty, and administration candidates.

6. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Modeling Building a group of personas. Personas personify the archetypical user of the new product. Personas focus on: – User's roles: His or her typical jobs, goals. – User's behavioral traits, a personality. Modeling is derived from thorough analysis of research. Personas are generated by identifying groups of users of a particular role who exhibit a particular behavior.

7. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Requirements Definition Determine the what of the design. Important what questions: – What problem does the new product solve? – What do the personas expect and want from the product? – What are the ways a persona might use the new interface? – What does my persona need from the product? This phase of design is carried out in steps – Creating problem and vision statements – Brainstorming – Identifying Persona Expectations – Constructing Context Scenarios – Identifying Persona Needs

8. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Defining the Interaction Framework Deciding how the interface will look. This phase answers important questions: – How does the persona work with the interface? – How will the interface look at start up? – How will interface components be grouped? – How will the real estate be used? – How will the product be used most frequently? This phase is done with steps: – Defining Form Factor and Input Methods – Defining Views – Defining Functional and Data Elements – Determining Functional Groups and Heirarchy – Sketching the Interaction Framework – Constructing Key Path Scenarios

9. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Key Path Scenarios Key Path scenarios follow design sketching. Scenarios describe how the persona would use the interface the most Key Path scenarios are told at a level of flow- chart diagrams, or state diagrams. Its important to enact the Persona's feelings and behavior into the Key Path scenario – i.e. If the persona is an elderly person, they may need to have bigger buttons for more commonly used features that achieve their perceived goals.

10. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Validation Refinement stage of the design Key Path Scenario iteration Done in three stages 1) Drafting Look and Feel Include visiual designers to make wireframes, skeletons 2) Validation Scenarios Less than “key” path scenarios. Pedagogy, infrequently used but important functions. Cover all “needs”, but focus on the lesser needs. Edge cases. Remember that all functionality are not created equal! 3) Finalizing the Design Proceed from the design into implementation design, to accurately move the concepts into reality.

11. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Principles and Patterns But wait, how do I go from this:

12. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Principles and Patterns To this: – Joanne moves the mouse over to select the next item in her to-do list, with the highest priority ones listed at the top in red. When selected, the item brings up information on the time line needed in the bigger window on the right. Joanne realized she finished this already, and the option of “Done” is at the bottom in a big button ready to be clicked. The answer: Principles and Patterns

13. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Principles and Patterns Making a design “good” Principles: Guidelines for usable form, developed over time. Patterns: Solutions to specific design issues, that can be repeated

14. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Interaction Design Principles Principles are characteristics of product behavior. Keep these in mind throughout the design – But most particularily when defining key path scenarios that translate into behaviors in the interface. Minimizing the User's Workload – Logical work: comprehension – Perceptiual work: coordination of shapes, colors – Mneomic work: remembering passwords, names – Physical: limit mouse movement, key strokes.

15. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Style Guides Style Guides work on lower level details – How many pixels between labels? – How many tabs in a tab pane? – What do button highlights look like? Not essential to upper level design Create a fine-tuned interface

16. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Interaction Design Patterns During Design you may come up with successful design decisions. Capture them as Design Patterns Types of Design Patterns: – Postural: Conceptual level design patterns to determine overall product stance to the user. Enhances “flow”. – Structural: Management of information. How to group together data items effectively. – Behavioral: Individual function behavior, and view behavior such as the 'X' button and the “Start” menu.

17. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Structual Design Patterns

18. CS 338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Interaction Design Imperatives Design must address fundamental solutions concerning: – Ethics: do no harm, improve human situations, opportunity to do good, improve civilization. – Purposeful: Help users achieve goals and aspirations, and not tedium. – Pragmatic: Help businesses achieve objectives, so that employees are paid. – Elegant: Represent simplest complete solution, posess internal coherence and coherence with other used products.