Web Design 1: Bad Web Design

Dr. Will Kurlinkus

 What Makes a Bad Website?

1.  It’s foremost about usability.

Can the user accomplish their
tasks?

2.  Who are the primary and

secondary users of your
website?

3.  What are the top three tasks

that users want to accomplish
when they come to the site?
Think in terms of use scenarios

4.  What on this website impedes

users from accomplishing https://
those tasks? www.secondwindcoffeeh
ouse.com
 Web Design: Don’t Make Me Think
¤  Don’t Make Me Think: Web design should be obvious and
self-explanatory. Don’t create frustration and confusion.
Let a user accomplish tasks as easily as possible.
Remember that users always satisfice.
 Web Design: Home Page

¤  Goals: What is this website? What’s the company? How

can I get from here to the place I need to be? Should
spell out the big picture of the site.
¤  Clear navigation
¤  Clear imagery and logo
¤  Search bar
¤  Avoids needless words
¤  Resonates with target audience
 Web Design: Site Structure

¤  There generally should only have to be three levels of a

site structure: Homepage>Level 1>Level 2>Level 3. That
means 2-3 clicks ~30 seconds to get to what I want.

¤  Getting to these lower-level pages should be easy and

obvious.

¤  Understanding what content belongs in what section

and how to get a user to that content is one of the most
difficult parts of web design.

http://miamioh.edu/cas/academics/departments/english/
 Web Design: Page Structure

¤  Clear visual hierarchy

¤  Size, spacing, font

¤  Nesting

¤  Chunk pages into clear

sections

¤  Avoid having too much on

any page

¤  Beware of content below

the fold

¤  Shell should stay roughly

the same across pages
Web Design: Page Structure
 Web Design: Navigation 1

¤  Let me get where I

want to go

¤  Make terms obvious

¤  Give a search bar

¤  Navigation should also

tell us where we are.
¤  .current { }
 Web Design: Navigation 2

¤  Sign Posting: Once I’m on a page I should be able to see the title
of the specific page, have a visual marker of the page I’m on (a
button is lit up), and know the path I took to get to that page
(breadcrumb trail).

¤  Uniformity: When I click something, the title of the button should

match the title of the page I’m sent to.
Web Design: Trunk Test

¤  Usability: The Trunk Test: http://som.ou.edu/index.php/

academics/future

¤  Imagine that you’ve been blindfolded and locked in the

trunk of a car, then driven around for a while and dumped
on a page somewhere deep in the bowels of a Web site. If
the page is well designed, when your vision clears you
should be able to answer these questions without hesitation:
1.  What site is this? (Site ID)
2.  What page am I on? (Page name)
3.  What are the major sections of this site? (Sections)
4.  What are my options at this level? (Local navigation)
5.  Where am I in the scheme of things? (“You are here” indicators)
6.  How can I search?
What website would I choose?

¤  http://www.stellanova.com

¤  http://crimsonbakery.com

¤  Businesses without websites: Hurts Donuts, Classic 50s

Drive In, Diamond Dogs,