Website Usability PowerPoint
Download
Report
Transcript 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