Intro to web design
This presentation is the property of its rightful owner.
Sponsored Links
1 / 70

Intro To Web Design PowerPoint PPT Presentation


  • 95 Views
  • Uploaded on
  • Presentation posted in: General

Intro To Web Design. MSIT 588 Dr. Carl Rebman. Good Web Site Design Matters. NY Times, Aug 30 1999, on IBM Web site “Most popular feature was … search … because people couldn't figure out how to navigate the site“

Download Presentation

Intro To Web Design

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

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.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 - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Intro to web design

Intro To Web Design

MSIT 588

Dr. Carl Rebman


Good web site design matters

Good Web Site Design Matters

  • NY Times, Aug 30 1999, on IBM Web site

    • “Most popular feature was … search … because people couldn't figure out how to navigate the site“

    • “The second most popular feature was the help button, because the search technology was so ineffective.”

  • After redesign

    • use of the "help" button decreased 84 percent

    • sales increased 400 percent

Good Web Site Design can Lead to Healthy Sales

http://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html


Outline

Outline

  • Overview of Basic Web Design

  • Web Design Patterns


Basic web design

Basic Web Design

  • Let's take a closer look page by page


Intro to web design

  • What site is this?

    • Logo in top-left corner denotes the site

    • Another logo at top-right to reinforce


Intro to web design

  • What kind of site is this?

    • Shopping cart icon

    • Tab row content

    • Categories on left

    • Prices in content area


Intro to web design

  • What can I do here?

    • Welcome for new visitors

    • Tab row / Search on top

    • “Categories”

    • Prices

    • All links are clear


Intro to web design

  • Above the Fold

    • Most important info visible without scrolling


Intro to web design

  • What site am I at?

    • Logo in upper-left reinforces brand, can click to go to home

    • Same font, layout, color scheme also reinforces


Intro to web design

  • Where am I in the site?

    • “Home > Music” are location breadcrumbs

    • Tab row says “Music”

    • Album cover, “Product Highlights”, and CD cover


Intro to web design

  • What can I do?

    • See more info about this album

    • “Buy!” “Buy!” “Buy!”

    • See more info about specific CDs


Intro to web design

  • Can I trust these sellers?

    • Who am I buying from?

    • Are they reputable?

    • What about shipping?


Intro to web design

  • The Fold

    • Hmm, what’s below here?


Intro to web design

  • Impulse buy

    • Recommended products

  • About this album

  • Lots of unused whitespace

  • Still more info below…


Intro to web design

  • Is this product any good?

    • Editorial reviews

    • Customer reviews

  • Some important info below the fold here

    • Nothing critical though


Intro to web design

  • What site am I at?

    • Logo in upper-left

    • Colors, layout, font


Intro to web design

  • Where am I in the site?

    • Last link clicked was “Buy!”

    • “Shopping Cart” and “Proceed to Checkout” reinforce that this is “the right page”


Intro to web design

  • Cross-selling

    • Possibly a pleasant surprise

    • Impulse buy


Intro to web design

  • What am I going to buy?

    • Easy to remove

    • Easy to move to wishlist

  • How much will it cost?

    • Shipping costs there, no nasty surprises


Intro to web design

  • What can I do?

    • “Proceed to Checkout” action button

      • Visually distinct

      • 3D, looks clickable

      • Repeated above and below the fold


Intro to web design

  • What if I don’t have a User ID?

  • What if I forgot my password?


Intro to web design

  • Error message

    • Small, hard to see

    • Too far away from where people will be looking

    • Page looks too similar to last page (did anything happen?)


Intro to web design

  • What site?

    • Logo, layout, color, fonts

  • Where in site?

    • Checkout, step 1 of 3

    • “Choose shipping address”


Intro to web design

  • Note what’s different

    • No tab rows

    • No impulse buys

    • Only navigation on page takes you to next step

  • This is a Process Funnel

    • Extraneous info and links removed to focus users


Quick flow checkouts

Quick-Flow Checkouts


Quick flow checkouts1

Quick-Flow Checkouts

  • Last step of process

    • Step 3, “Place Order”

    • “Place my order” button

  • Two buttons for fold


Quick flow checkouts2

Quick-Flow Checkouts

  • No nasty surprises

    • Can see order

    • Total price is same as shopping cart


Quick flow checkouts3

  • Easy to change shipping and billing

  • Easy to save this info

    • Easier to setup info in context of specific task instead of setup first

    • Clearer to users why this info is needed in former

Quick-Flow Checkouts


Design patterns

Design Patterns

  • Design is about finding solutions

    • Unfortunately, designers often reinvent

      • Hard to know how things were done before & to reuse solutions

  • Design patterns communicate common design problems & solutions

    • First used in architecture [Alexander]

    • Ex. How to create a beer hall where people socialize?


Design patterns1

Design Patterns


Design patterns2

Design Patterns

  • Not too general & not too specific

    • Use solution “a million times over, without ever doing it the same way twice”

  • Design patterns are a shared language

    • A language for “building and planning towns, neighborhoods, houses, gardens, and rooms.”

    • Ex. Beer hall is part of a center for public life…

    • Ex. Beer hall needs spaces for groups to be alone…


Design patterns3

Design Patterns

(8) Mosaic of Subcultures

Cities

& Towns

(33) Night Life

(31) Promenade

(90) Beer Hall

Local

Gatherings

(95) Building Complex

Interiors

(179) Alcoves

(181) The Fire


Web design patterns

Web Design Patterns

  • Now used in Web design [van Duyne, Landay, & Hong]

    • book shipping this week

    • published by Addison-Wesley

  • Communicate design problems & solutions

    • how to create navigation bars for finding relevant content…

    • how to create a shopping cart that supports check out…

    • how to make e-commerce sites where people return & buy…


Web design patterns book

Patterns broken into related groups

Site genres

Navigational framework

Home page

Content management

Trust and credibility

Basic ecommerce

Advanced ecommerce

Completing tasks

Page layouts

Search

Page-level navigation

Speed

Web Design Patterns Book


Process funnel h1

Process Funnel (H1)

  • Problem – Need a way to help people complete highly specific stepwise tasks

  • Desktop Solution


Process funnel h11

Process Funnel (H1)

  • Web Solution

    • “Next” to step forward

    • “Back” to undo


Process funnel h12

Screen 1

(Step 1)

Screen 2

(Step 2)

Screen N

(Step N)

Process Funnel (H1)

  • Some problems

    • How much longer before I finish?

    • Why are there ads and nav bars?

    • What if users need extra help?


Process funnel h13

Process Funnel (H1)

  • Problem – How much longer?

  • Solution – Progress bars


Process funnel h14

Process Funnel (H1)

  • Problem – Why ads and nav bars?

  • Solution – Remove them and present minimal interface

  • New problem – What site?

  • Solution – Keep the logo, layout, colors


Process funnel h15

Process Funnel (H1)

  • Problem – What if users need extra help?

  • Solution – Use pop-up windows because we want to keep people in the funnel


Intro to web design

Process Tunnel


Intro to web design

Process Tunnel


Intro to web design

Solution DiagramProcess Funnel (H1)


Related patterns process funnel h1

Related PatternsProcess Funnel (H1)

(A1) E-Commerce

(A10) Web Apps

(A11) Intranets

(H1) Process Funnel

(K2) Navigation Bars

(H8) Context-Sensitive Help

(K3) Tab Rows

(I2) Above the Fold

(K4) Action Buttons

(K5) High-Viz Action Buttons

(K12) Preventing Errors

(K13) Meaningful Error Messages


Meaningful error messages k13

Problem – When customers make mistakes, they need to be informed of the problem and how to recover

Solution

Clear statement of problem

Explain how to recover

Position near the problem

Meaningful Error Messages (K13)


Intro to web design

  • Clear error message

    • Two messages at top

  • Explain how to recover

    • Says it is missing required information

  • Position near the problem

    • Error messages far

    • Required info marked in green, hard to see


Intro to web design

  • Clear error message

  • Explains how to recover

  • Positioned near the problem


Solution diagram meaningful error messages k13

Solution DiagramMeaningful Error Messages (K13)


Related patterns meaningful error messages k13

Related PatternsMeaningful Error Messages (K13)

(H1) Process Funnel

(H2) Sign-in / New Account

(F1) Quick-Flow Checkout

(K12) Preventing Errors

(K11) Familiar Language

(K13) Meaningful Error Messages


What am i searching for

“What am I Searching For?”


What am i searching for1

“What am I Searching For?”


Intro to web design

Search


Intro to web design

Search


Intro to web design

Search


Intro to web design

Search


Pattern examples navigation bar

Pattern ExamplesNavigation Bar


Web design patterns1

Web Design Patterns

(B1) Multiple Ways to Navigate

Navigational

Framework

(B2) Browsable Content

Search / Wizard /

Relate / Promote

(K3) Tab Rows

(K2) Navigation Bar

Navigation

(K10) Obvious Links

(L2) Fast-Downloading Images

Speed


Web design patterns2

Web Design Patterns

(A1) Personal E-Commerce

(H1) Process Funnel

(F1) Quick-Flow Checkout

(F3) Shopping Cart

(I1) Grid Layout

(I2) Above the Fold

(K4) Action Buttons

(L2) Fast-Downloading Images


Summary

Summary

  • Lots of issues involved in designing web sites

  • Design patterns one way of capturing good design knowledge


Further reading books on web design

Further ReadingBooks on Web Design

  • Web Design in a Nutshell. Jennifer Niederst. O'Reilly , 1999.

  • Design of Sites. Doug Van Duyne, James Landay, Jason Hong. Addison-Wesley. 2002.

  • Information Architecture for the World Wide Web. Louis Rosenfeld and Peter Morville. O'Reilly, 1998.

  • Don’t Make Me Think! Steven Krug. Que, 2000.


Further reading books on web design1

Further ReadingBooks on Web Design

  • Community Building on the Web. Amy Jo Kim. Peachpit Press, 2000.

  • Designing Visual Interfaces: Communication Oriented Techniques. Kevin Mullet and Darrell Sano. Prentice Hall / SunSoft Press. 1994.

  • Understanding Comics. Scott McCloud. Kitchen Sink Press, 1994.

  • Designing Web Usability. Jakob Nielsen. New Riders Publishing, 1999.


Further reading websites on web design

Further ReadingWebsites on Web Design

  • UsableWeb.com, links to other usability sites

  • Usability.gov, for building accessible websites

  • Web pages that suck, at http://www.webpagesthatsuck.com/

  • Net tips for designers, at http://www.dsiegel.com/tips/

  • User Interface Engineering, at http://www.uie.com

  • ZDNet Ecommerce Best Practices, at http://www.zdnet.com/ecommerce.


Further reading websites on web design1

Further ReadingWebsites on Web Design

  • New York Times Ecommerce Times, at

    • http://www.nytimes.com/pages-technology/cybertimes/commerce/

  • Webword.com usability log

  • CNet Builder.com, info on building sites

  • ACM’s CHI-Web Mailing List

    • http://www.acm.org/sigchi/web/chi-web.html

  • Goodexperience.com web log

  • Jakob Nielsen useit.com


  • Login