Download Website Usability PowerPoint

Website Usability
evaluating and planning for web design
presentation by Pasha Souvorin for Georgia Pathway in Advanced Web Design
Goal 1: Identify Site’s Purpose
 every site must begin with a purpose
 a site without a purpose should not exist
 when working with a client, the site’s purpose should be a primary part of
every discussion
 the designer should be able to state that purpose clearly and easily in a
single sentence
 the purpose sentence of a website is equivalent to a topic sentence in a
language arts essay
2
Goal 2: Identify Target Audience
 people who you think are most likely to want to visit this site
 be as specific as possible
 include all of the following
–
–
–
–
–
age
gender (if relevant)
education level (if relevant)
income level (if relevant)
hobbies and interests
 age of typical user
–
–
–
–
–
children
teenagers
young adults
adults
elderly
3
Goal 3: Planning for Scanning







users don’t “read” web pages the way we read books
most users scan the page by jumping around it
they have arrived at your web page because they want something
they are at your page to scan for what they want
your page must make it easy for your users to scan for what they want
therefore you should be “planning for scanning”
this is sometimes called “controlling the user’s focus”
4
Goal 2: Identify Target Audience
 gender of typical user (if relevant)
– male
– female
 education level (if relevant)
– high school only
– college educated
 household income (if relevant)
– low income
– medium income
– high income
 hobbies and interests
– what kinds of things are your target audience interested in?
– what hobbies or activities are similar to your webite’s topic?
– what existing websites is your target audience likely to already visit?
5
Goal 4: Creating Visual Consistency
 all of the pages in your site should be visually consistent
 this means each page should have the same
–
–
–
–
color scheme
layout
navigation
characters
 color scheme
–
–
–
–
–
main color: the dominant color that will stand out on each page
support color: supports primary color and second thing users will notice on a page
highlight color: for adding little visual touches to the web page
additional colors (optional)
free color scheme apps online:
•
•
•
Adobe Kuler (http://kuler.adobe.com/)
Color Scheme Designer (http://colorschemedesigner.com/)
ColorJack (http://www.colorjack.com/)
6
Goal 4: Creating Visual Consistency
 create a consistent layout for all pages
– header
•
•
•
•
•
•
row across top of page
usually contains a title
sometimes includes navigation
sometimes includes a logo or graphic
sometimes includes breadcrumbs (list of where a user is in the website)
be careful that this isn’t too tall—most beginners make headers that take up too much of the screen
– sidebar
•
•
•
•
column along the side
often includes navigation (buttons)
might be a highlighted content area
sidebars are optional on web pages
– footer
•
•
•
•
row across the bottom of a page
includes information about author
often includes secondary navigation options (such as text)
often includes copyright information, link to privacy policy, and link to about section
– columns
•
•
many websites are divided into two or more columns
there is usually a thin column with highlights, and a wide column with deeper content
 remember “planning for scanning”
7
Goal 4: Creating Visual Consistency
 create a consistent navigation scheme for all pages
– navigation scheme is the way people will move through your site
•
•
buttons
links
– think of your website as an interface
– interfaces occur where humans interact with something
•
•
•
adjusting water temperature in the sink
driving a car
making a phone call
– a good interface is intuitive
•
•
•
user should figure it out easily
it should be obvious and clear
it must be usable by beginners, newbies, and children
– ways to make it consistent and intuitive
•
•
•
•
•
•
create a set of buttons that you use on every page
keep colors consistent
put breadcrumbs in the header
put a second navigation system in the footer
set link colors and visited link colors that work with your color scheme
use CSS documents for all page elements so that you can manage site colors
8
Goal 4: Creating Visual Consistency
 characters are part of a site’s visual consistency
–
–
–
–
–
choose a font that matches the site’s purpose and target audience
choose text color(s) that match the color scheme
don’t use too many different fonts in your graphical elements
pick a page background color
pick text color, link color, and visited link color
 web resources
– Smashing Magazine: 10 Principles of Effective Web Design
– Smart Webby: Web Design Tips
– Steve Krug: How We Really Use the Web
9
Assignments
 First: Evaluation
– find and evaluate five websites of your choice
– follow the “Usability: Evaluating Websites Assignment Sheet”
 Second: Planning
– create a website plan for a new website you want to build
– follow the “Usability: Planning a Website Assignment Sheet”
10