1. CS 235: User Interface Design November 5 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak www.cs.sjsu.edu/~mak

2. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak 2 Unofficial Field Trip  Computer History Museum in Mt. View http://www.computerhistory.org/  Saturday, November 8, 11:30 AM – closing time

3. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Some Sources of Data for Visualization  Google “datasets for data visualization”  http://archive.ics.uci.edu/ml/ http://archive.ics.uci.edu/ml/  http://www.kdnuggets.com/datasets/index.html http://www.kdnuggets.com/datasets/index.html  https://www.kaggle.com/competitions https://www.kaggle.com/competitions  http://www.visualizing.org/data/browse http://www.visualizing.org/data/browse  http://datavisualization.ch/datasets/ http://datavisualization.ch/datasets/  http://www.idvbook.com/teaching-aid/data-sets/ http://www.idvbook.com/teaching-aid/data-sets/  http://blog.visual.ly/data-sources/ http://blog.visual.ly/data-sources/  https://www.google.com/publicdata/directory https://www.google.com/publicdata/directory 3

4. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Forms  Used to solicit input from users: sign in registration checkout calculation search multi-step long 4

5. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Form Abandonment  A serious problem.  A user gives up before completing a form.  Information is not submitted. 5 Poor form design: American Airlines Flight Booking on Windows Phone Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

6. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Sign In  Ask for only the minimum number of inputs: username password password help command button option to register 6 Remember the Milk for AndroidGroupon for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

7. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Sign In, cont’d  Option: Sign in with a PIN only 7 Personal Capital for iOS Frost for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

8. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Sign In, cont’d  Signing in should not necessarily be the first step.  Consider asking the user to sign in only when authentication is necessary. 8

9. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Registration  Ask for the minimum number of inputs. Each additional field lowers form conversion.  Test to validate fields as they’re being entered. 9 Rove and Kirk for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

10. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Registration, cont’d  Inform users about problems as soon as possible. 10 Level for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

11. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Registration, cont’d  Don’t have redundant fields. 11 NOOK for Android LearnVest for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

12. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Registration, cont’d  During the registration process: Keep the user in the application if possible. Linking to an external web page can be problematical. 12 Fitbit for Windows Phone Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

13. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Registration, cont’d  Horizontal labels can get truncated or overlapped. 13 Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

14. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Registration, cont’d  Use vertically aligned labels instead. 14 Remember the Milk for Android Fancy for Android Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

15. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Multi-Step  Show progress during multi-step forms. 15 PayPal for Android Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

16. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Multi-Step, cont’d  Indicate the current step number and the total number of steps. 16 SnipSnap for AndroidPriceline for Android Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

17. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Multi-Step, cont’d  Use drill-down to see more details. 17 TurboTax for Android Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

18. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Checkout  Don’t let poor UX design deter users from doing a sales checkout on their smartphones. 18 North Face for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

19. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Checkout, cont’d  Prepopulate the checkout form for a signed-in user. 19 Expedia for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

20. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Checkout, cont’d  Offer sign in and registration options, along with guest checkout. 20 Target for iOS Walmart for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

21. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Checkout, cont’d  Streamline the checkout process. Consolidate multiple screens into one screen. Use drill-down to screens for additional input. 21 Haute for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

22. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Checkout, cont’d  Provide time-saving shortcuts 22 Gilt for iOS RuLaLa for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

23. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Checkout, cont’d  Offer express checkout options. 23 Gilt for iOS Newegg for Android Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

24. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Checkout, cont’d  Offer in-store checkout using a smartphone. 24 Apple Store Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

25. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Checkout, cont’d 25 Mattel’s Virtual Toy Store in Walmart Canada Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

26. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Calculator Forms  Use well-aligned fields. 26 Valspar Paint CalculatorBehr Paint Calculator Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

27. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Calculator Forms, cont’d  Use interactive data visualizations if appropriate. 27 TaxCaster for Android Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

28. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Search Forms  Ask for the minimum number of inputs. 28 American Airlines for Windows PhoneKayak for Windows Phone Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

29. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Search Forms, cont’d  Display results as the user enters search criteria. 29 Zillow for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

30. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Search Forms, cont’d  Implicit search: Make automatic suggestions. 30 OpenTable for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

31. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Long Forms  Some forms can’t fit on a single screen.  A long scrolling page is better than a form broken up over multiple pages.  Where do you put the command button? 31

32. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Long Form Guidelines: iOS  Command button at the top right  Escape button (Back or Cancel) at the top left 32 HauteLookSquareLemon Wallet Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

33. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Long Form Guidelines: Android  Command button in the footer 33 AncestryNotif Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

34. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Long Form Guidelines: Windows Phone  Command button in the App Bar at the bottom 34 OLXInnerfence Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

35. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Patterns  What not to do.  Pitfalls to avoid.  Commonly reinvented bad solutions to problems.  Poor attempt to convert a web app to mobile.  Examples: Nonstandard menu location. Hard-to-read text. Too many colors. Too hard to navigate. 35

36. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Novel Notions 36 NBC News for iOS  Bad attempt to incorporate the company logo Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

37. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Skeuomorphic Cuteness  Bad attempt to simulate an airplane window shade 37 Alaska Airlines for Android Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

38. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Nonstandard Navigation  Unusual card navigation using a bottom scrollbar 38 Alaska Airlines for Android Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

39. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Needless Complexity  How to remove nonintuitive “Chat Heads” 39 Facebook for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

40. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Needless Complexity, cont’d  Nonintuitive gestures 40 iTranslate for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

41. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Bad Navigation Controls 41 Over for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

42. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Bad Navigation Controls, cont’d  iOS-style controls in Android apps 42 Conqu for Android DailyBurn for Android Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

43. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Hidden Controls  Brightness control under the font properties icon. 43 Kindle for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

44. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Mental Model Mismatch  ABC News misuses a globe for navigation.  Geo Walk’s globe provides geographic context. 44 ABC News for iPad Geo Walk for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

45. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Idiot Boxes  Useless or disruptive prompting dialog boxes 45 Jamie Oliver’s Recipes for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

46. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Idiot Boxes, cont’d 46 Haute for iOS Rent the Runway for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

47. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Chart Junk 47 WTFViz Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

48. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Chart Junk, cont’d 48 OOKLA Speedtest for Android Cashish for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

49. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Chart Junk, cont’d 49 Glucose Buddy for iOS Heart Pal for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

50. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Chart Junk, cont’d  Pie charts are a poor fit for smartphone screens. Hard to show both the chart and its legend. 50 Phonealytics for Windows Phone Chart design concept for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

51. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Chart Junk, cont’d  Pie charts can be done well. 51 Roambi for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

52. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Too Many Buttons 52 Visual PKI for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

53. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Too Many Buttons, cont’d 53 Redfin for Android Zillow for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

54. Computer Science Dept. Fall 2014: November 5 CS 235: User Interface Design © R. Mak Anti-Pattern: Poor Platform Porting  Bad direct design port from iOS to Android. 54 Behr Paint for Android Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014