Download

Web UI Design






Advertisement
/ 53 []
Download Presentation
Comments
regina
From:
|  
(1134) |   (0) |   (0)
Views: 52 | Added:
Rate Presentation: 0 0
Description:
Web UI Design. (for EECS 495 NUVW) ben@slivka.com www.slivka.com/2011-02-15.ppt. 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. Ben’s UI Experience. HP 25C “lunar lander” (’76)
Web UI Design

An Image/Link below is provided (as is) to

Download Policy: Content on the Website is provided to you AS IS for your information and personal use only and may not be sold or licensed nor shared on other sites. SlideServe reserves the right to change this policy at anytime. While downloading, If for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.











- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -




Slide 1

Web UI Design

(for EECS 495 NUVW)

ben@slivka.com

www.slivka.com/2011-02-15.ppt

Slide 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

Slide 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)

Slide 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…

Slide 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

Slide 6

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

Ben’s Web UI Principles

Slide 7

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

Tour of the Top 20 Websites

Slide 33

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

Ben’s Web UI Principles

Slide 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

Slide 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

Slide 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.)

Slide 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)

Slide 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

Slide 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

Slide 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)

Slide 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

Slide 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

Slide 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

Slide 52

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

Ben’s Web UI Principles

Slide 53

Q & A


Copyright © 2014 SlideServe. All rights reserved | Powered By DigitalOfficePro