Designing for the Web

 Web site design

 Web page design
 Web usability

Web Design Guidelines by Scott G 1

rissom
 Your Goal
 Create a web site that is:
 useful
 compelling
 attractive
 easy to use
 satisfying

Web Design Guidelines by Scott G 2

rissom
 Web Development Team
 Content provider
 Information architect
 Graphic designer
 Writer / editor
 Programmer
 Project Manager
 Usability Expert
Web Design Guidelines by Scott G 3
rissom
 Mission Statement
 What are you creating and why?
 Who will use it?
 What will they want to do?
 How will you know if your site is
successful?

Web Design Guidelines by Scott G 4

rissom
 Site Design
 Content
 Organization
 Navigation system

Web Design Guidelines by Scott G 5

rissom
 Content
 What do your visitors want?
 What information do you want to
provide?
 What do similar organizations provide?
 What do you already have?
 What do you need to create?

Web Design Guidelines by Scott G 6

rissom
 Activity #1
 Develop a mission statement
 one sentence
 must contain audience, purpose, and
content
 Develop an initial inventory of content
 on your own

Web Design Guidelines by Scott G 7

rissom
 Organization Schemes
 White pages
 Yellow pages
 Supermarket
 Your computer

Web Design Guidelines by Scott G 8

rissom
 Hierarchy
 no more than seven categories
 three clicks and you are there
Home Page

Topic 1 Topic 2 Topic 3 Topic 4 Topic 5 Topic 6 Topic 7

1 2 3 4 5 6 7
Web Design Guidelines by Scott G 9
rissom
 Navigation System
 How do I get home?
 Where am I?
 Where else can I go?

Web Design Guidelines by Scott G 10

rissom
 Examples
 across the top
 down the left side

Web Design Guidelines by Scott G 11

rissom
 Additional Navigation
 Site map
 overall view
 Index
 alphabetical list of terms
 Search facility
 requires special expertise

Web Design Guidelines by Scott G 12

rissom
 Labels are important
 Strive to make labels clear & concise
 Be consistent
 Follow convention
 Home / Main
 Search / Find
 Contact Us
 About Us
 Help / FAQ
 News / What’s New

Web Design Guidelines by Scott G 13

rissom
 Activity #2
 refrigerator  bureau
 socks  kitchen
 living room  bookshelf
 dictionary  bedroom
 milk  a live elephant

Web Design Guidelines by Scott G 14

rissom
 Web Page Design
 KISS

Web Design Guidelines by Scott G 15

rissom
 Home Page
 What can I do at this site?
 No scrolling should be necessary!
 Attractive
 This is your first impression

Web Design Guidelines by Scott G 16

rissom
 Web Writing
 remember visitors only scan
 keep it short
 at least 50% of normal text
 use headings
 use bullet lists
 put conclusion first

Web Design Guidelines by Scott G 17

rissom
 Common Page Guidelines
 dark text on light background
 limit visitor scrolling
 limit use of images
 limit use of animations

Web Design Guidelines by Scott G 18

rissom
Be Aware of Browser Features
 Back button
 do not provide your own
 Colored links
 do not change default
 Bookmarks
 provide meaningful title

Web Design Guidelines by Scott G 19

rissom
 Proofread
 errors will kill the professional appearance of
your site
 use a spell checker
 use a grammar checker?
 ask someone else to check grammar

Web Design Guidelines by Scott G 20

rissom
 Web Usability Measures
 What are some indications of ‘user friendly’?
 Ease of learning
 Improved user performance
 Low user error rate
 User satisfaction

Web Design Guidelines by Scott G 21

rissom
 Web Design Guidelines
 Know the user
 Involve the user during design
 Design a navigation system
 Where am I?
 How can I get home?
 Where else can I go?

Web Design Guidelines by Scott G 22

rissom
Usability Evaluation Strategies
 Checklist
 User testing
 Usability inspection
 bring in a usability expert

Web Design Guidelines by Scott G 23

rissom
 Usability Checklist
 Are all links correct?
 Is there a link to home on every page?
 Is navigation consistent on every page?
 Does each page have an appropriate title?
 Did I proofread all content?
 Create user profiles
 can they do what they will likely want to do?

Web Design Guidelines by Scott G 24

rissom
 User Testing
 Identify appropriate users
 Select appropriate tasks
 Watch, listen, but don’t talk!
 Ask volunteers to complete a survey

Web Design Guidelines by Scott G 25

rissom
 A Typical Survey
 Strive for unbiased questions
 Use a rating scale 1-5
Finding the information was:
difficult 1 2 3 4 5 easy
Appearance of the site was:
ugly 1 2 3 4 5 beautiful
Overall, the site was:
really sucky 1 2 3 4 5 excellent
Web Design Guidelines by Scott G 26
rissom
 Some Sample Sites
 Let’s take a look at some of your
favorite sites….

Web Design Guidelines by Scott G 27

rissom
 Activity #3
 Go to a competitors site
 Kick the tires and look for usability
problems
 What do you like?
 What do you think will cause problems?
 What do you hate?

Web Design Guidelines by Scott G 28

rissom
 Additional Resources
 Usable Web
 the mother of all sites
 http://www.usableweb.com/
 Yale Web Style Guide
 http://info.med.yale.edu/caim/manual/contents.ht
ml
 Link Checking Software
 Xenu's Link Sleuth - freeware
 http://home.snafu.de/tilman/xenulink.html

Web Design Guidelines by Scott G 29

rissom
 Summary (1)
 Web site design
 start with a mission statement
 plan and organize the site
 design a navigation system
 Web page design
 be concise
 be consistent
 proofread

Web Design Guidelines by Scott G 30

rissom
 Summary (2)
 Web usability
 you are NOT the typical visitor
 find out what problems the typical visitor has with
your site
 Web Usability Evaluation
 discover usability problems BEFORE it is too late

Web Design Guidelines by Scott G 31

rissom