Announcements. This week is about your term project. Meet in person, more than once. Paper prototype

Transcription

1 Announcements This week is about your term project. Meet in person, more than once. Paper prototype John Jannotti (cs32) User Interfaces Mar 15, / 27

2 User Interfaces John Jannotti /course/cs0320/www/docs/lectures/ Mar 15, 2018 John Jannotti (cs32) User Interfaces Mar 15, / 27

3 The is no best design This class may be your first CS class like this. It s not an easy adjustment. You will get conflicting advice from TA s. Think of it like advice on essay writing. And that includes pre-grade advice vs your grader. It s your responsibility to justify design decisions. John Jannotti (cs32) User Interfaces Mar 15, / 27

4 The is no best design This class may be your first CS class like this. It s not an easy adjustment. You will get conflicting advice from TA s. Think of it like advice on essay writing. And that includes pre-grade advice vs your grader. It s your responsibility to justify design decisions. Under no circumstances does conflicting advice mean you should publicly call out, insult, demean, or blame a TA for a grading decision. John Jannotti (cs32) User Interfaces Mar 15, / 27

5 User Interfaces Are complex Often 50-80% of the code of a system Code can be quite intricate Hardware dependent, OS/Toolkit dependent Make or break a system Delicious Library Facebook vs MySpace Are often done wrong Examples of bad interfaces? Examples of good interfaces? John Jannotti (cs32) User Interfaces Mar 15, / 27

6 Don t reinvent without reason. It is extremely unlikely that you have developed a better way to scroll. (And yet refinements can work. Infinite scroll.) John Jannotti (cs32) User Interfaces Mar 15, / 27

7 Do not overuse because it s easy Don t stretch UI elements past their usefulness. Radio buttons vs. Dropdowns vs Search/Text. (Though Mobile vs Desktop can change the equation.) John Jannotti (cs32) User Interfaces Mar 15, / 27

8 Be forgiving Try hard to make operations recoverable. This means less pestering users with modal confirmation, and the designer doesn t have to decide if an operation warrants pestering. John Jannotti (cs32) User Interfaces Mar 15, / 27

9 Strive for clarity Visuals aid our memory, but they often convey less than words upon first encounter. John Jannotti (cs32) User Interfaces Mar 15, / 27

10 DVD Controller Bad Skeuomorphism Familiarity can be good, but you can go too far. Fun word skeuomorphic. John Jannotti (cs32) User Interfaces Mar 15, / 27

11 Understand user needs Keep common operations accessible. Understand and accomodate your domain. A CRUD term project ignores its domain. John Jannotti (cs32) User Interfaces Mar 15, / 27

12 UI concerns Which statistic, related to user interface concerns, is wrong? A) Amazon reported that an extra 100ms of latency, costs 1% of orders. B) 10% of Americans are colorblind C) Worldwide use of Internet Explorer 6/7/8 is under 2%. D) The average smartphone user in the US downloads less than 1 new app per month. E) Google reported that an extra 500ms of latency drops traffic by 25%. John Jannotti (cs32) User Interfaces Mar 15, / 27

13 Types of interfaces Textual Command-line programs: find, dd, convert Shells: command line and scripting. Special symbol in tweets, emoticon IMs Config files: ini files, XML, sendmail.cf Embedded languages: Don t reinvent computation. Graphical Traditional desktop applications. Web applications. Mobile apps. Keyboard navigation is a bit of a hybrid. Important even in graphical (desktop) applications. John Jannotti (cs32) User Interfaces Mar 15, / 27

14 Textual Interfaces Can seem primitive. Very useful for composable tools, scripting. ls wc -l find. -type f xargs sed -i -e s/student/d/g They pop up inside otherwise graphical apps. Special syntax for domain specific processing. Markdown, tweets, emoticons, calendar entries. Downside: often bogged down in syntax/quoting, and undiscoverable. Embedding real programming languages is very powerful. Emacs, AutoCAD In Java, embedding any of Ruby, Python, Groovy is easy. Don t invent your own! John Jannotti (cs32) User Interfaces Mar 15, / 27

15 User Interface Design Process Understand the problem. Draw pictures of the interface. Don t kid yourself about size / resolution. Whiteboards & Photoshop Experiment Understand the toolkit. Write a prototype. Static HTML and/or Photoshop are fast ways to try things out. Iterate here if possible (with input from users) Test and rewrite John Jannotti (cs32) User Interfaces Mar 15, / 27

16 Understand The Problem Know your users What they are used to, what they expect. Level of user casual or expert use. What you can assume they know or don t. Accessibility and Internationalization. Know the problem domain Vocabulary, what is important, what to stress. Relative frequency of tasks. Know the context Consequences of mistakes. Constraints (screen space, interaction time, attention level... ). John Jannotti (cs32) User Interfaces Mar 15, / 27

17 Mobility has a new set of constraints Small screen, No hover, Slower network, Fat Fingers. (But great scrolling.) John Jannotti (cs32) User Interfaces Mar 15, / 27

18 On mobile, all pixels are not equal Some parts are easier to interact with, especially one-handed. John Jannotti (cs32) User Interfaces Mar 15, / 27

19 Draw Pictures Pictures of the interface General overview of possible layouts Pictures telling a story (scenario/use case) Sequence showing interactions Work with users to get these right Iterate, try different approaches, etc. Integrate multiple stories In a consistent way Taking into account priorities, frequency John Jannotti (cs32) User Interfaces Mar 15, / 27

20 Understand the Toolkit Know what is easy/hard, doable/undoable For example, in HTML, (certain kinds of) reflow is easy But editable combo boxes are not. Depends on target platform Swing or SWT for Java HTML (+js toolkits), Flash, Applets for browser Gtk, Qt for C/C++ on Unix Cocoa for Macs. Android (Java) & ios (Objective C, Swift). Or does it? Consider React Native (and similar) for mobile apps. Consider Electron for desktop apps. John Jannotti (cs32) User Interfaces Mar 15, / 27

21 Prototype Map the picture to widgets Pictures with explicit widgets. Rarely invent new widgets. Even if there s no native widget, look for well done libraries. For term project, you can use more. Look at jquery UI. Think of screen and window sizes (and how they change/differ). Implement something early Without the rest of the application. Stub out the backend with hardcoded data. Don t be afraid to rewrite it. Evaluate it early and continually. With real users if possible but certainly not just your team. John Jannotti (cs32) User Interfaces Mar 15, / 27

22 Human Interface Guidelines HIGs promote system specific consistency. Apple (+ iphone) Windows (per release) Linux: GNOME, KDE Android: More lately, with move to Holo, and then Material Design. Web? (useit.com, YUI pattern library) Examples Standard dialogs (file, ok/cancel) Keyboard accelerators, Menu structure Icon styling, Font choices, Control alignment John Jannotti (cs32) User Interfaces Mar 15, / 27

23 Rules for any platform Provide immediate feedback. Easy undo is better than constant confirmation. Avoid modal interactions. Allow direct manipulation. Offer keyboard navigation. (HTML: See tabindex) Obey Fitt s Law (large, close targets for common operations). 2D a + b log 2 W Edges, corners have infinite size. Let users abort long running operations. John Jannotti (cs32) User Interfaces Mar 15, / 27

24 Find your Supergraphic Advice from Edward Tufte for presentations. Applies equally well to GUI design. Applications convey information to aid understanding and choice. You often have many dimensions of information. How can you present the most information in an understandable way? John Jannotti (cs32) User Interfaces Mar 15, / 27

25 Napolean s Disastrous Retreat (Tufte s favorite example of a supergraphic.) John Jannotti (cs32) User Interfaces Mar 15, / 27

26 Expedia s list is not supergraphic. Monotonous, uncomparable. John Jannotti (cs32) User Interfaces Mar 15, / 27

27 The chart is a bit better... But it presumes price and airline are all that matters. John Jannotti (cs32) User Interfaces Mar 15, / 27

28 Hipmunk has a supergraphic. Conveys more information. Sorts by Agony. (They understand their domain.) John Jannotti (cs32) User Interfaces Mar 15, / 27