Web UI Design

1. Web UI Design (for EECS 495 NUVW) ben@slivka.com www.slivka.com/2011-02-15.ppt

2. Overview Ben’s UI experience Dominant Design Copy Wildly A quick tour of the Top 20 web sites Ben’s Web UI Principles Slivka.com UI evolution Q&A I am not going to teach you a UI design process, nor give you a cookbook of UI design I want you to be become more aware of the UI that you’re already familiar with so you can copy the best approaches you have encountered These are my opinions…reasonable people might disagree…I am not going to teach you a UI design process, nor give you a cookbook of UI design I want you to be become more aware of the UI that you’re already familiar with so you can copy the best approaches you have encountered These are my opinions…reasonable people might disagree…

3. Ben’s UI Experience HP 25C “lunar lander” (’76) Litton 1880: biorhythm, “racing” game (’77) Punched cards, green-bar paper, 110b, mainframes (’76-’85) IBM 3270: DCR tracking tool (’83) OS/2: process status, printer installer (’85-’90) MS-DOS 6: DoubleSpace, ScanDisk (’92-’93) CAB files (’93-’94) Internet Explorer 1, 2, 3 (’94-’95) “RedShark” UI prototype (’97-’98) AMZN: “Arizona” customer service web app (’00) Slivka.com, NU1982.org, Banderooge.com, … (’97-now) Vizrea (’05-’07) TeachFirst (’03-’08) DreamBox Learning (’06-’10)

4. Dominant Design “Mastering the Dynamics of Innovation”, 1994, Jim Utterback (BSIE ’63, MSIE ’65) Examples Manual typewriter (keyboard layout) Automobile (pedals, steering wheel, …) Character-mode apps in MS-DOS® Inside Macintosh (1985) Windows/IBM “Common User Access” (1987) ? CLAIM: DD has arisen for web UI, so…

5. …Copy Wildly Leverage the billions of dollars and hours Yahoo, Amazon, Google, Facebook, etc. and their users have invested Leverage the muscle memory and neural programming people already have Don’t have to know “why” DD is what it is Just find a popular site and copy KIPP sharing site by BetterLesson, Facebook-like features, but doesn't look or act exactly like FacebookKIPP sharing site by BetterLesson, Facebook-like features, but doesn't look or act exactly like Facebook

6. Ben’s Web UI Principles Copy Wildly KISS Principle Fast Minimal Reliable Simple URLs On-Demand UI Black on White Site Search Top of Page has: Branding Menu (short) User ID Search I’m giving you these now with no explanation We will revisit in more detail soonI’m giving you these now with no explanation We will revisit in more detail soon

7. Tour of the Top 20 Websites 1) google.com 2) facebook.com 3) yahoo.com 4) youtube.com 5) amazon.com 6) wikipedia.org 7) ebay.com 8) blogger.com 9) twitter.com 10) craigslist.org 11) live.com 12) msn.com 13) linkedin.com 14) go.com 15) bing.com 16) aol.com 17) cnn.com 18) paypal.com 19) espn.com 20) netflix.com According to http://www.alexa.com/topsites/countries/US on Saturday, 1/22/2011. For each site, ask students: What do you like? What don’t you like? How could you improve it?According to http://www.alexa.com/topsites/countries/US on Saturday, 1/22/2011. For each site, ask students: What do you like? What don’t you like? How could you improve it?

8. #1 COMMENT: Very spare graphically. Could that white space be used more effectively? Or is the “clean canvas” a feature? White background, high-contrast text Class link treatment (bright blue underlined text) Upper right has user id (or sign-in), settings, sign-out Top menus No side menus Prominent search box ;-) A few bookkeeping items at the bottom of the page TODD WARREN: Are you going to talk about the bad stuff on Google, like the horror behind the “more…” button. BEN SLIVKA: Nope. Web start-ups don’t have the time/money to create that particular kind of horror. Only large, profitable companies can do that. ;-)#1 COMMENT: Very spare graphically. Could that white space be used more effectively? Or is the “clean canvas” a feature? White background, high-contrast text Class link treatment (bright blue underlined text) Upper right has user id (or sign-in), settings, sign-out Top menus No side menus Prominent search box ;-) A few bookkeeping items at the bottom of the page TODD WARREN: Are you going to talk about the bad stuff on Google, like the horror behind the “more…” button. BEN SLIVKA: Nope. Web start-ups don’t have the time/money to create that particular kind of horror. Only large, profitable companies can do that. ;-)

9. #1a COMMENT: Top menu stays relatively consistent Left menu Follows The Magical Number 7 (+/-2) – Short lists Prominent search box#1a COMMENT: Top menu stays relatively consistent Left menu Follows The Magical Number 7 (+/-2) – Short lists Prominent search box

10. #2 COMMENT: Highest trafficked site on the web now. COMMENT: Page load and Dynamic (Ajax) features have slowed down, especially when you have 1700 friends. ;-) COMMENT: Dynamic commands (pop-up near items you can act upon) COMMENT: Heavy using of dynamic updates (via Ajax) – especially with Chat; but if you have N FB pages open, they *all* get the chat – no awareness of “Z-order” White background, high-contrast text Very small top menu Colored band for top menu + logo Side menu has lots of choices, but still chunked (Magical 7) User ID is in upper left (below top menu) Links are not underlined Spare design Prominent search box #2 COMMENT: Highest trafficked site on the web now. COMMENT: Page load and Dynamic (Ajax) features have slowed down, especially when you have 1700 friends. ;-) COMMENT: Dynamic commands (pop-up near items you can act upon) COMMENT: Heavy using of dynamic updates (via Ajax) – especially with Chat; but if you have N FB pages open, they *all* get the chat – no awareness of “Z-order” White background, high-contrast text Very small top menu Colored band for top menu + logo Side menu has lots of choices, but still chunked (Magical 7) User ID is in upper left (below top menu) Links are not underlined Spare design Prominent search box

11. #3 COMMENT: This design has barely changed in 10+ years White background, reasonably high-contrast text (except nearly everything is a link, so lots of blue) Colored band for top menu + logo Context menus (on page components) User ID is at left of top menu Prominent search box#3 COMMENT: This design has barely changed in 10+ years White background, reasonably high-contrast text (except nearly everything is a link, so lots of blue) Colored band for top menu + logo Context menus (on page components) User ID is at left of top menu Prominent search box

12. #4 COMMENT: Design seems very wasteful of pixels – not very much information on this page. White background, high contrast text Spare design Top menu Prominent search box#4 COMMENT: Design seems very wasteful of pixels – not very much information on this page. White background, high contrast text Spare design Top menu Prominent search box

13. #4a COMMENT: Design seems very wasteful of pixels – not very much information on this page. Top menu Prominent search box Spare design#4a COMMENT: Design seems very wasteful of pixels – not very much information on this page. Top menu Prominent search box Spare design

14. #5 COMMENT: Very busy side menu – 13 items, not alphabetical: so what is the rationale for the order they are listed? COMMENT: Focused on apparent personalization (“Benjamin” three times) and selling Kindles White, high-contrast text Top menu User ID in top menu Some links underlined blue, many not #5 COMMENT: Very busy side menu – 13 items, not alphabetical: so what is the rationale for the order they are listed? COMMENT: Focused on apparent personalization (“Benjamin” three times) and selling Kindles White, high-contrast text Top menu User ID in top menu Some links underlined blue, many not

15. #6 COMMENT: Wasteful use of top space with large Wikiepedia logo White background, high-contrast text User ID in top menu Side menu has bulk of commands Prominent search box Note: Search moved recently to upper right (was in middle on the left side for years), and no longer has radio button allow choice between topic name and free text search (does the latter now)#6 COMMENT: Wasteful use of top space with large Wikiepedia logo White background, high-contrast text User ID in top menu Side menu has bulk of commands Prominent search box Note: Search moved recently to upper right (was in middle on the left side for years), and no longer has radio button allow choice between topic name and free text search (does the latter now)

16. #7 COMMENT: Side menu is 10 items – non-obvious sort order ;-) White background, high-contrast text User ID in top menu Prominent search box – with easy access to customize the search#7 COMMENT: Side menu is 10 items – non-obvious sort order ;-) White background, high-contrast text User ID in top menu Prominent search box – with easy access to customize the search

17. #8 COMMENT: Design seems very wasteful of pixels – not very much information on this page. White background, high-contrast text Colored band for top menu + logo#8 COMMENT: Design seems very wasteful of pixels – not very much information on this page. White background, high-contrast text Colored band for top menu + logo

18. #9 COMMENT: Uses a larger font – designed for older people (with weaker vision)??? White background, text is not as high-contrast (grays and light blues) Colored band for top menu + logo Top menu (some contrast issues) Prominent search box RIGHT side menu (unusual)#9 COMMENT: Uses a larger font – designed for older people (with weaker vision)??? White background, text is not as high-contrast (grays and light blues) Colored band for top menu + logo Top menu (some contrast issues) Prominent search box RIGHT side menu (unusual)

19. #10 COMMENT: Very dense information presentation White background, high-contrast text The entire page is a MENU – navigational focus is on hierarchy A very busy, compact layout Prominent search box Typical bottom menu material (about, privacy, etc.) is at the bottom of the left pane No © Copyright date on home page TODD WARREN: Such a horrorshow; but it works and they are loath to change.Some audiences really do like density of information.Reality is also the complexity of the info on here is pretty low; so its still digestible.For example, no more focus areas than the google page. #10 COMMENT: Very dense information presentation White background, high-contrast text The entire page is a MENU – navigational focus is on hierarchy A very busy, compact layout Prominent search box Typical bottom menu material (about, privacy, etc.) is at the bottom of the left pane No © Copyright date on home page TODD WARREN: Such a horrorshow; but it works and they are loath to change.Some audiences really do like density of information.Reality is also the complexity of the info on here is pretty low; so its still digestible.For example, no more focus areas than the google page.

20. #10a COMMENT: Query results looks like a quickly hacked together SQL result. ;-) Top menu only Very spare layout © Copyright appears on search results#10a COMMENT: Query results looks like a quickly hacked together SQL result. ;-) Top menu only Very spare layout © Copyright appears on search results

21. #11 COMMENT: Looks like it was assembled by committee – hodgepodge of elements and fonts, two brands (msn and bing), etc. COMMENT: UGLY URL (Mostly) white background, high-contrast text Very spare design Busy mixture of different sizes of fonts – I would simplify#11 COMMENT: Looks like it was assembled by committee – hodgepodge of elements and fonts, two brands (msn and bing), etc. COMMENT: UGLY URL (Mostly) white background, high-contrast text Very spare design Busy mixture of different sizes of fonts – I would simplify

22. #11a COMMENT: Looks like it was assembled by committee – hodgepodge of elements and fonts, two brands (msn and bing), etc. COMMENT: UGLY URL COMMENT: User ID in upper left (my picture) *and* at upper right (name, commands) COMMENT: A big advertisement on www.live.com for…Windows Live®…seems like a waste! White background, high-contrast text Colored band for top menu + logo Prominent search box And space for me to update my status Seems like too much white space Overall: it lacks consistency, seems like a design-by-committee (which it probably was) #11a COMMENT: Looks like it was assembled by committee – hodgepodge of elements and fonts, two brands (msn and bing), etc. COMMENT: UGLY URL COMMENT: User ID in upper left (my picture) *and* at upper right (name, commands) COMMENT: A big advertisement on www.live.com for…Windows Live®…seems like a waste! White background, high-contrast text Colored band for top menu + logo Prominent search box And space for me to update my status Seems like too much white space Overall: it lacks consistency, seems like a design-by-committee (which it probably was)

23. #12 COMMENT: Looks like it was assembled by committee – hodgepodge of elements and fonts, two brands (msn and bing), etc. White background, high-contrast text Colored band (wash) for top menu + logo Prominent search box Second level of top menu Perhaps too much white space for this design? #12 COMMENT: Looks like it was assembled by committee – hodgepodge of elements and fonts, two brands (msn and bing), etc. White background, high-contrast text Colored band (wash) for top menu + logo Prominent search box Second level of top menu Perhaps too much white space for this design?

24. #13 COMMENT: unusual RIGHT side menu (for certain pages) White background, reasonable high-contrast text Top menu User ID is located at the top right (off-screen in this 800x600 capture) Seems like excessive white space #13 COMMENT: unusual RIGHT side menu (for certain pages) White background, reasonable high-contrast text Top menu User ID is located at the top right (off-screen in this 800x600 capture) Seems like excessive white space

25. #14 COMMENT: This home page seems completely useless I had not visit go.com in perhaps 10 years #14 COMMENT: This home page seems completely useless I had not visit go.com in perhaps 10 years

26. #15 COMMENT: Left menu has 8 items, no obvious sort order COMMENT: Very spare design, not information dense at all…Form over Function No top menu Prominent search box#15 COMMENT: Left menu has 8 items, no obvious sort order COMMENT: Very spare design, not information dense at all…Form over Function No top menu Prominent search box

27. #15a COMMENT: Lack of visual consistency between side menu on home page, top menu on search result page White background, high-contrast text Colored band (image watch) for top menu + logo User ID in upper right corner Left menu (very short) #15a COMMENT: Lack of visual consistency between side menu on home page, top menu on search result page White background, high-contrast text Colored band (image watch) for top menu + logo User ID in upper right corner Left menu (very short)

28. #16 COMMENT: This page is so dull. COMMENT: Advertisements take priority. User ID near the top White background, high-contrast text#16 COMMENT: This page is so dull. COMMENT: Advertisements take priority. User ID near the top White background, high-contrast text

29. #17 COMMENT: Colored band (very large) for top menu + logo White background, high-contrast text Top menus #17 COMMENT: Colored band (very large) for top menu + logo White background, high-contrast text Top menus

30. #18 COMMENT: A lot of white space around the log and top menu COMMENT: Font sizes and layouts look jumbled about and haphazard – another design by committee? White background, high-contrast text #18 COMMENT: A lot of white space around the log and top menu COMMENT: Font sizes and layouts look jumbled about and haphazard – another design by committee? White background, high-contrast text

31. #19 COMMENT: Colored band (VERY LARGE) for top menu + logo COMMENT: Very dense display of information – scores, sports headlines White background, high-contrast text #19 COMMENT: Colored band (VERY LARGE) for top menu + logo COMMENT: Very dense display of information – scores, sports headlines White background, high-contrast text

32. #20 COMMENT: Very simple design, few choices COMMENT: Advertising the service is Job #1 White background, high-contrast text Colored band for top menu + logo #20 COMMENT: Very simple design, few choices COMMENT: Advertising the service is Job #1 White background, high-contrast text Colored band for top menu + logo

33. Ben’s Web UI Principles Copy Wildly KISS Principle Fast Minimal Reliable Simple URLs On-Demand UI Black on White Site Search Top of Page has: Branding Menu (short) User ID Search Here they are again, so I can talk about them just a bitHere they are again, so I can talk about them just a bit

34. KISS Principle Kelly Johnson, Lockheed Skunk Works “Keep it simple stupid” (design jet aircraft to be repaired with simple tools in the field) Albert Einstein “Everything should be made as simple as possible, but no simpler.” Leonardo da Vinci “Simplicity is the ultimate sophistication.” ? Metaphor, analogy, muscle memory

35. KISS: Fast Supports UI discovery (trial and error) Fast means Fast page load (<1 second goal) Modest use of images (branding, photos) No text as graphics (copy, web search) Clever use of JavaScript (AJAX) Fast, obvious response to user action Big vs. Small screen (mobile) UI designs Automatic (minimize user effort) ? Facebook used to report page load time on every page; now it can often be very sluggish No text as graphics also means it is easier/faster/cheaper to update a site and to localize it to another language Text as text makes copy possible, and allows Google, etc. site search to work Likely want simpler UI for small screens (use user agent string), but give visitor control over switching between the two sites on every page Automatic means doing work for the visitor, often before being asked, e.g., spell check, address look-up, auto-complete of entries, etc.No text as graphics also means it is easier/faster/cheaper to update a site and to localize it to another language Text as text makes copy possible, and allows Google, etc. site search to work Likely want simpler UI for small screens (use user agent string), but give visitor control over switching between the two sites on every page Automatic means doing work for the visitor, often before being asked, e.g., spell check, address look-up, auto-complete of entries, etc.

36. KISS: Minimal Minimize concepts/metaphors, words, visuals Form Follows Function (no graphic designers) Careful: left side menus for complex sites (shopping, news are worst offenders) Careful: hierarchy, breadcrumb navigation (ibm.com > about > leadership > board) “Elements of Style”, Strunk & White “The Magical Number Seven” Keep lists short, multiple lists in rare cases Alphabetize (avoid Schwab.com, etc.) TODD WARREN: Present Bee used too many “cute” bee-related terms, just got visitors confused Many web sites present their menus from left to right in a descending priorty/usage order – but an individual visitor has no clue about what that sort order is, so the menu is confusing – and slows the visitor down – because no obvious sort order is discernable.TODD WARREN: Present Bee used too many “cute” bee-related terms, just got visitors confused Many web sites present their menus from left to right in a descending priorty/usage order – but an individual visitor has no clue about what that sort order is, so the menu is confusing – and slows the visitor down – because no obvious sort order is discernable.

37. KISS: Reliable Be consistent: Concepts, words, visual elements Focus Areas (system structure/function) Navigation elements Defaults (easy to change) Never lose data (continuous save, page navigation, remember state, errors) Undo (everywhere, provide history) Avoid modality (FB “peephole” pop-ups) Fast/easy bug/feedback mechanism (Google) www.hertz.com and www.united.com used to be really bad at saving state..constantly had to re-enter the same information; Remember user, everything the user has typed in, provide auto-complete, auto-create “favorites” (common trips, etc.), and provide ways to erase some or all of this (e.g., Amazon.com shopping history can be edited piecemeal)www.hertz.com and www.united.com used to be really bad at saving state..constantly had to re-enter the same information; Remember user, everything the user has typed in, provide auto-complete, auto-create “favorites” (common trips, etc.), and provide ways to erase some or all of this (e.g., Amazon.com shopping history can be edited piecemeal)

38. KISS: Simple URLs People email, dictate, type in URLs, so… Short www.slivka.com/about, www.slivka.com/contact, www.youtube.com/benslivka Human-readable http://www.amazon.com/Elements-Style-Fourth-William-Strunk/dp/020530902X http://cgi.ebay.com/ebaymotors/Ferrari-430-Berlinetta-05-F430-F1-Ceramics-Daytonas-etc-_W0QQcmdZViewItemQQhashZitem27b8222c5aQQitemZ170592971866QQptZUSQ5fCarsQ5fTrucks#ht_6485wt_1002 http://www.bsd405.org/Default.aspx?tabid=1521 Stable Never change Hide implementation No .php, .asp, .html, etc. suffixes

39. KISS: On-Demand UI Contextual Menus: provide more commands Facebook, LinkedIn, Bing, Ongo, etc. have menus/commands that appear when you hover near content on the page Pop-Ups: provide more info “Slide out” information (Google, Facebook) DHTML pop-up (modal, Facebook abuses these) Browser window pop-up (older) Tradeoff: discoverability vs. too-busy page Windows/Macintosh/other GUIs have modal, non-model dialog boxes Facebook DHTML pop-ups created “peep-hole” experience for long lists (of friends, etc.) On-Demand UI is a way to have your cake (simplicity) and eat it, too (rich feature set) Windows/Macintosh/other GUIs have modal, non-model dialog boxes Facebook DHTML pop-ups created “peep-hole” experience for long lists (of friends, etc.) On-Demand UI is a way to have your cake (simplicity) and eat it, too (rich feature set)

40. Click on “Report a Bug” link at the bottom of the page Contextual UI appears that allows you to highlight a section of the screen and type in your problem descriptionClick on “Report a Bug” link at the bottom of the page Contextual UI appears that allows you to highlight a section of the screen and type in your problem description

41. After you click Preview, you get to see the description you typed in As well as the additional information Google collected from the web browser And the highlighted screen shot Very Slick!After you click Preview, you get to see the description you typed in As well as the additional information Google collected from the web browser And the highlighted screen shot Very Slick!

42. Black on White Black text on white background Use reasonable font size Don’t use color alone (color blindness) Highest contrast Copy/paste works best More legible on PC, smartphone, tablet Best for people with visual impairment (including those using screen readers) StudyBlue – dark, low-contrast text, small font size, non-standard UI, hard to discover concepts/features StudyBlue – dark, low-contrast text, small font size, non-standard UI, hard to discover concepts/features

43. Site Search People surfing the web are impatient Google, et. al., have conditioned us to search Hunting through a hierarchy is barely OK for browsing, frustrating if you know what you are looking for and cannot find it Facebook search: name, email, page, … ? Every website should have great (and smart) site search Navigating a hierarchy that you created (like the directory structure on your laptop) is hard enough; trying to understand a hierarchy that someone else created is much harder!Navigating a hierarchy that you created (like the directory structure on your laptop) is hard enough; trying to understand a hierarchy that someone else created is much harder!

44. Top of Page Branding: logo, color/image band Menu: short, consistent page to page User ID: email address or username Search: prominent search box Date/Time: mostly for news sites

45. slivka.com: 1997-2011 www.archive.org “Wayback Machine” has archives of web pages as far back as 1996 (Archive has become much less complete since 2006) 1997 initial design 2001 “frames” design 2001 side-by-side design 2004 thumbnail design

46. 1998 – initial design1998 – initial design

47. 2001 April – more content, needed to provide more structure2001 April – more content, needed to provide more structure

48. 2001 November – top menu is more compact than side menu Introduced smaller thumbnails to provide “teaser” for content2001 November – top menu is more compact than side menu Introduced smaller thumbnails to provide “teaser” for content

49. 2004 November – Put short list of recent pages on top with a recent large photo Left room for a lot of thumbnails below2004 November – Put short list of recent pages on top with a recent large photo Left room for a lot of thumbnails below

50. Layout unchanged for past 6+ yearsLayout unchanged for past 6+ years

51. An interior page Notice branding, top menu, top search box, top login/logout, breadcrumb navigationAn interior page Notice branding, top menu, top search box, top login/logout, breadcrumb navigation

52. Ben’s Web UI Principles Copy Wildly KISS Principle Fast Minimal Reliable Simple URLs On-Demand UI Black on White Site Search Top of Page has: Branding Menu (short) User ID Search And repeating these again for a third time. :-)And repeating these again for a third time. :-)

53. Q & A