1. 1 Managing Design Processes  Designs should be based on:  Observation of users  Task frequencies and sequences  Validation via early usability testing and acceptance tests  Iterative Design  Early test of low-fidelity prototypes  Revisions based on user feedback  Incremental refinements based on usability testing  Organizational Support of Usability  When competing products have similar functionality usability is often a differentiator

2. 2 Managing Design Processes  Developing support for User Centered Design  ROI – Return on investment  Decreased training time (transfer of training)  Faster task completion time (e.g., short-cuts, Intellisense, navigation)  Fewer errors (required fields, error correction)  Increased customer retention  Increased market share  Fewer returned products

3. 3 Managing Design Processes  Know you audience or “ The 7 Habits of Spectacularly Unsuccessful Executives” 1.They see themselves and their companies as dominating their environment –A lack of respect 2.They identify so completely with the company that there is no clear boundary between their personal interests and their corporation’s interests –A question of character 3.They think they have all the answers – Leader without followers 4.They ruthlessly eliminate anyone who isn’t completely behind them – Executive departures 5.They are consummate spokespersons, obsessed with the company image –Blatant attention-seeking 6.They underestimate obstacles –Excessive hype 7.They stubbornly rely on what worked for them in the past –Constantly referring to what worked in the past

4. 4 Managing Design Processes  Waterfall  Analysis  Development  Test  Deploy  Agile  Integrated team  Sprints & Releases  Backlog  Points Analysis Develop Test Deploy http://www.youtube.com/watc h?v=kYajjGi5- qM&kw=agile&ad=791400673 1&feature=pyv Scrumming http://www.youtube.com/watch ?v=OJflDE6OaSc&feature=rela ted

5. 5 Managing Design Processes  UI Group Organization  Centralized vs. Decentralized The analysis work Usability testing Resource allocation Budgets & schedules Guidelines –Education –Enforcement –Exemption –Enhancement International Teams

6. 6 Patterns in the Design Process BCD A F GH E BCD E A F GH ABCD

7. 7 Managing Design Processes Pattern for multi-tasking across windows

8. 8 Managing Design Processes Pattern for multi-tasking across windows

9. 9 Managing Design Processes Start-Menu Pattern – Launch Applications Launch Applications Pattern - XP

10. 10 Context Workflow Pattern Grouping Component Specific behaviors (e.g., click on Edit button to edit fields) Chain of behaviors (e.g., add a phone number) What is design efficiency of a pattern? How does it relate to time and errors? Patterns in the Design Process A collection of components The user goal (e.g., add a new patient)

11. 11 Pt. Demographics: Personal Information Add New PCP Adding a Pt’s HP Select Role Searching for an HP Results of Search SelectFindAdd New Populate Add New HP Enter Data/OK Foreign Addr. Populate HP Details Patterns in the Design Process

12. 12 Patterns in the Design Process

13. 13 Managing Design Processes  The Three Pillars of Design (Pillar 1)  Guidelines, Documents and Processes Apple/Windows Words, Icons and Graphics –Terminology, Character Set –Icons, Buttons, Color Screen Layout –Menu selection, Form Fillin, Dialog Formats –Wording, Spacing Input/Output Devices (Mouse, Keyboard) Action Sequences and Patterns –Direct Manipulation, drag/drop –Short-cuts –Error Handling  User Interface Software Tools  Expert Reviews & Usability Testing

14. 14 Managing Design Processes  Guidelines (Pillar 1)  Social process involving developers  Records decisions  Promotes consistency and completeness  Levels Rigid standards Accepted practices Flexible guidelines  Policies Education – how to provide it Enforcement – who reviews Exemption – who decides (e.g., new technology) Enhancement – how often

15. 15 Managing Design Processes  User-interface software tools (Pillar 2)  Macromedia Flash  Microsoft Visual Basic  Revolution  Expert Reviews and Usability Testing (Pillar 3)  Controlled experiments

16. 16 Managing Design Processes  Development Methodologies  Ethnographic Observation Preparation –Understand policies and work culture –Learn about the system and its history –Prepare questions –Get permission to observe/interview Field Study –Establish rapport with managers and users –Observe/Interview users in the workplace »Collect subjective/objective, quantitative/qualitative data »Rating scales, rankings, critical incidents Analysis –Compile data in numerical, textual and multimedia databases –Reduce and interpret data Reporting

17. 17 Managing Design Processes  Development Methodologies  Participatory Design Plastic Interface for Collaborative Technology Initiatives through Video Exploration (PICTIVE) Physical cut-outs of UI objects Walk through a scenario and video tape User develops a stake in the design Cost of time  Druin’s Model of Four Levels of User Participation User Tester Informant Design Partner

18. 18 Managing Design Processes  Development Methodologies  Scenario Development – Task Frequency RoleCollects Demo Info Collects Ins. Info Accesses National DBs Face-to-Face with Pt. Bed Board User EMS Interaction IP RegYes No7 minutesNo ER RegYes No4 minutesNo Pt. LocNo Yes Med RecNo YesNo IDX SchedYes No Enc PrepYes No Financial Counseling No Yes No Radiology Reg Yes No7 minutesNo TransplantsNo YesNo DispatchNo Yes

19. 19 Managing Design Processes  Development Methodologies  Scenario Development – App Frequency

20. 20 Managing Design Processes  Development Methodologies  Scenario Development A day-in-the-life scenario (users performing a typical task) Collect data regarding current performance New systems – write scenarios and then act them out Tognazzini at Sun Microsystems - Starfire Project –http://www.idemployee.id.tue.nl/g.w.m.rauterberg/movies/SUN-Starfire.mpghttp://www.idemployee.id.tue.nl/g.w.m.rauterberg/movies/SUN-Starfire.mpg What functions are being portrayed in the video? What are the alternatives today?

21. 21 Managing Design Processes  Development Methodologies  Diary Study Diary Study Participants go about their normal lives Except that they report (in an electronic or paper diary) at some interval, signal, or event, what they’ve done or experienced (via questionnaire or freeform), They do this multiple times over days or weeks.

22. 22 Managing Design Processes  Development Methodologies  Social Impact Statements for Early Design Review “Technopoly eliminates alternatives to itself. It consists in the deification of technology, which means that the culture seeks its authorization in technology, finds its satisfactions in technology, and takes its orders from technology” (Postman 1993) Issues to consider: –Convey the high level goals of the new system –Identify the stakeholders –Identify the benefits –Anticipate changes in job functions and potential layoffs –Address security and privacy issues –Preserve democratic principles –Review the impact statement with a panel with authority for enforcement (GAO, NRC, FAA)

23. 23 Managing Design Processes  Development Methodologies  Legal Issues Privacy related to data storage or monitoring by computers Avoid illegal tampering, inadvertent loss, malicious mischief –Medical, Legal, Financial Safety and Reliability –Aircraft, automobiles, medical equipment, utility control rooms –Copyright or patent protection for software »Open Source Initiative – “when programmers can read, redistribute, and modify the source code for a piece of software, the software evolves.” –Copyright protection for online information, images or music –Freedom of speech in electronic environments »Should network operators be responsible for or prohibited from eliminating offensive or obscene jokes, stories, or images? –Equal access to computers for disabled users  Consider the legal implications of your design decisions (intellectual property)

24. 24 Managing Design Processes  Speaking of legal  Apple, Samsung, Google patent war (Oct 2011)patent war  Steve Jobs: ”I’m going to destroy Android, because it’s a stolen product. I’m willing to go thermonuclear war on this.”  Google co-founder Eric Schmidt sat on the board of Apple for many years  The future of many phone makers, especially Samsung, and the future of Google’s rising influence in the mobile OS business would all be at stake  OR - Apple’s underhanded attempt to stymie competition in the mobile and tablet markets and protect its iPad and iPhone dominance

25. 25 Graphical Screen Design by Saul Greenberg CRAP – contrast, repetition, alignment, proximity Grids are an essential tool for graphical design Other visual design concepts consistency relationships organization legibility and readability navigational cues appropriate imagery familiar idioms Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known. Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press

26. 26  C ontrast  make different things different  brings out dominant elements  mutes lesser elements  R epetition  repeat design throughout the interface  consistency  creates unity  A lignment  visually connects elements  creates a visual flow  P roximity  groups related elements  separates unrelated ones Robin Williams Non-Designers Design Book, Peachpit Press Contrast, Repetition, Alignment and Proximity

27. 27 Contrast, Repetition, Alignment and Proximity Original

28. 28 Proximity Contrast, Repetition, Alignment and Proximity Groups related elements Separate unrelated ones Move Separate Group Separate

29. 29 Alignment Contrast, Repetition, Alignment and Proximity visually connect elements create a visual flow Move

30. 30 Contrast, Repetition, Alignment and Proximity Contrast make different things different brings out dominant Elements mutes lesser elements Font Color

31. 31 Repetition repeat design throughout the interface consistency Contrast, Repetition, Alignment and Proximity Font

32. 32  Horizontal and vertical lines to locate window components  aligns related components  Organization  contrast for dominant elements  element groupings by proximity  organizational structure  alignment  Consistency  location  format  element repetition  organization window to widget spacing Widget to widget spacing NoOk Message text in Arial 14, left adjusted Standard icon set Fixed components Format of variable contents Grids

33. 33 Two-level Hierarchy indentation contrast Grouping by white space Alignment connects visual elements in a sequence Logic of organizational flow Grids

34. 34  internal consistency  elements follow same conventions and rules  set of application-specific grids enforce this  external consistency  follow platform and interface style conventions  use platform and widget-specific grids  deviate only when it provides a clear benefit to user Warning mmmm mmm mmm Okay ! Help mmmm mmm mmm Okay ? Tip of the day: Monday, Mar 12 mmmm mmm mmm Dismiss   Visual Consistency (Repetition)

35. 35  proximal clusters  alignment  white (negative) space  explicit structure Mmmm:   Relating Screen Elements

36. 36 No regard for order and organization Example of Bad Layout

37. 37 Mullet & Sano Example of Bad Layout

38. 38 Mullet & Sano Improved Layout

39. 39 Overuse of 3-d effects makes the window unnecessarily cluttered WebForms Example of Bad Design

40. 40 How do you chose when you cannot discriminate screen elements from each other? GIF Construction SetMicrosoft Access 2.0 Example of Bad Design

41. 41 Navigational cues  Provide initial focus  Direct attention as appropriate to important secondary, or peripheral items as appropriate  Order should follow a user’s conceptual model of sequences  

42. 42  minimize number of controls  include only those that are necessary  eliminate, or relegate others to secondary windows  minimize clutter  so information is not hidden NNNN MMMM xxx: ____ MMMM NNNN   Economy of Visual Elements

43. 43 Mullet & Sano Reduce Excessive Display Density

44. 44  Characters, symbols, graphical elements should be easily noticable and distinguishable Text set in Braggadocio Text set in Helvetica Text set in Courier TEXT SET IN CAPITOLS   Text set in Times Roman Legibility and Readability

45. 45  Proper use of typography  1-2 typefaces (3 max)  normal, italics, bold  1-3 sizes max Large Medium Small   Readable Design components to be inviting and attractive Design components to be inviting and attractive Unreadable Design components to be inviting and attractive Design components to be inviting and attractive Legibility and Readability

46. 46  typesetting  point size  word and line spacing  line length  Indentation  color Readable Design components to be inviting and attractive Design components to be inviting and attractive   Unreadable: Design components to be easy to interpret and understand. Design components to be inviting and attractive Legibility and Readability

47. 47 These choices must be really important, or are they? Time & Chaos Legibility and Readability and Significance

48. 48 Greyed-out example text hard to read. Why not make it black? Regional preferences in Windows 95 Legibility and Readability and Significance

49. 49 Text orientation difficult to read Microsoft Word Legibility and Readability

50. 50  Signs, icons, symbols  right choice within spectrum from concrete to abstract  Icon design very hard  except for most familiar, always label them  Image position and type should be related  image “family”  Consistent and relevant image use  identifies situations, offerings... Partial icon family Imagery

51. 51 What do these images mean? no tooltips included one of the tabs is a glossary explaining these images! which one? Novell GroupWise 5.1 Imagery

52. 52  Familiar ways of using GUI components  appropriate for casual to expert users  builds upon computer literacy  must be applied carefully in walk up and use systems Pulldown menus Cascading menu Dialog box item Toolbars and tooltips Window manipulation Standard typographic controls Files What you see is what you get displays Microsoft Powerpoint Idioms