Download What is Web Design? - Classes by Thomas Powell

http://www.pint.com/classes/web3
Web Publishing 3
Site Design & Usability
UCSD Extension
Presented by
Thomas A. Powell
PINT Inc.
Slides Adopted from
Web Design: The Complete Reference
Web Publishing 3
http://www.pint.com/classes/web3
Chapter 1:
What is Web Design?
Web Publishing 3
http://www.pint.com/classes/web3
What is Web Design?
•
•
The idea of Web design means many different things to different
people.
Web design depending on the person includes many things such as:
–
–
–
–
–
–
•
Visual design
Programming
HTML
Navigation issues
Usability
Business issues (e-commerce)
Depending on the project Web design actually may draw from any of
these areas so it truly can be a very multidisciplinary field.
1
Web Publishing 3
http://www.pint.com/classes/web3
What is Web Design?
•
Four primary aspects to Web Design
– Content
• To inform or persuade users
– Technology
• To implement the function of the site
– Visuals
• To provide the form of the site
– Economics
• To give purpose for the site
•
The influence of one aspect or another of site design varies on the
project.
– Personal home page may not have economic issues
– Shopping site may be less concerned about the visuals
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Pyramid
•
Metaphor of a Web site like a pyramid
– Content is the bricks we use to build the pyramid
– The foundation rests on visuals and technology
– Economics make the project worth doing
•
As Web designers we try to build our “pyramids” carefully but
construction is difficult because we build on the shifting sands of fast
changing technology and tastes.
•
Even when building a great sites our visitors may look at it with
puzzlement.
– Team work and a firm understanding of the Web medium is required
– What’s the purpose they wonder. Where is the door?!
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Pyramid
2
Web Publishing 3
http://www.pint.com/classes/web3
Building Web Sites
•
•
Don’t underestimate the Web. Building sites can be difficult
Some of the core technologies like HTML are pretty easy to master, yet
developers make numerous mistakes. Why?
– Lack of developer experience particularly with the Web medium coupled
with a lack of well-defined process and highly accelerated schedules.
•
Because of time constraints or inexperience many designers tend to
start from one extreme or another
– Start out building the site from the visuals and figure out what to do later.
• Design document is a picture
• Results in sites filled with giant images or sites that are built entirely in Flash
• You might term this sites “brochureware” or “introware”
•
Note: For an artist portfolio site this may be the best approach but for
many sites it is not.
Web Publishing 3
http://www.pint.com/classes/web3
Visuals First Design
•
Looks good but may not work right or be flexible enough.
Other examples: www.megacar.com, www.nrg.be
Web Publishing 3
http://www.pint.com/classes/web3
Technology First
•
•
•
•
•
Some designers instead focus on doing only the technology first
Sometimes the HTML, JavaScript, frames, Java applet, etc. is added
first an then there is an attempt to decorate the site.
I call this approach “Christmas Tree” design. A few colored balls, clip
art and animated GIFs in a fruitless attempt to make the site look good.
Like a visuals first site a technology first site is used more to show off
what a designer can do but in the technical arena.
Technology-first sites tend to practice exclusionary design and use the
latest browser innovations.
3
Web Publishing 3
http://www.pint.com/classes/web3
Technology First
•
This example is still clean looking but notice the requirements,
pulldowns,windows, etc.
Web Publishing 3
http://www.pint.com/classes/web3
Web Development Process Model
•
•
Both technology and visuals are required in Web design and must
relate directly to the purpose of the site.
Should use a top-down or deductive approach to site design.
–
–
–
–
–
–
•
Set a purpose
From purpose build a specification
Design to meet the specification
Implement the design
Test the design
Release the finished product
This process is similar to software engineering’s waterfall or lifecycle
model. This process splits development into a variety of steps to help
guide you from general requirements to finished site.
Web Publishing 3
http://www.pint.com/classes/web3
Web Development Process Model
4
Web Publishing 3
http://www.pint.com/classes/web3
Web Development Process Model
•
•
•
•
•
The number of steps or name of steps in the model doesn’t matter.
Other process models are possible like modified waterfall, spiral, jointapplication design (JAD) and so on. Always remember the purpose of
the process model is always to guide.
The ideal process model helps us do things fast and accurately and
hopefully is easy to learn.
We’ll take a look at the process of building Web sites later.
First let’s discuss some common mistakes and common themes of
Web design.
Web Publishing 3
http://www.pint.com/classes/web3
Building for Users
•
One of the most common mistakes is building a site more to meet the
wants and desires of the site’s designer than its users.
•
Web Design Rule: YOU are NOT the USER.
•
•
•
•
•
You generally know more about the site than the user.
You know where things are.
You know about installing plug-ins
You may have an optimal setup with screen, browser, bandwidth, etc.
You must accept that users may not even have the same interests as
you.
What makes sense to you may not make sense to users.
•
Web Publishing 3
http://www.pint.com/classes/web3
Building for Users
•
Don’t go overboard and then say “I’ll just ask the user”
•
Web Design Rule: USERS are NOT DESIGNERS.
•
•
•
Users may not know what is realistic.
Users may not be logical or realistic about their needs and wants.
In short users don’t have the sophisticated understanding of the Web
medium the designer has.
Just because someone has browsed a lot of Web sites doesn’t mean
they can design one. You may have seen many movies, but do you
really know how to approach filming one?
Goal: Always try to think from the point of view of the user and then
verify your ideas with real users.
•
•
5
Web Publishing 3
http://www.pint.com/classes/web3
Building for Users
•
•
•
•
•
User centered design is the term given to design which always puts the
user first.
What can we say about users? Is there a “Joe Average” Internet user?
There is no typical average user, but there are traits such as reaction
time, memory, and other cognitive or physical abilities we should
consider when designing sites. However, always remember that
beyond basic traits remember that people are individuals.
Generally sites built to the “common user” may cause problems for the
novice user or power user which leads to the following rule.
Web Design Rule: Design for the common user, but account for
differences.
Web Publishing 3
http://www.pint.com/classes/web3
Utility and Usability
•
•
•
•
•
•
Great Web sites are those that are truly useful to users.
Usefulness is a combination of utility and usability.
Utility describes a site’s functionality (what is capable of)
Usability describes the user’s ability to manipulate the site’s features to
accomplish the goal.
Two banking sites may provide similar utility but one may be so
confusing that it is unusable.
Usable sites will be efficient, easy to learn and help users accomplish
their goals in a satisfactory and error free manner.
Web Publishing 3
http://www.pint.com/classes/web3
Paper to Software Paradigm Shift
•
In the past sites were
often thought of as
digital paper. Many
print design concepts
were applied. With
increased functionality
and the rise of ecommerce focus is
shifting to a software
centric approach to
sites. Yet not all sites
are the same, there is
a range.
6
Web Publishing 3
http://www.pint.com/classes/web3
Dynamic Site Example (www.democompany.com)
Web Publishing 3
http://www.pint.com/classes/web3
Software implications
•
•
•
Like software a Web site should only be considered excellent if it is
useful, usable, correct, and pleasing.
Some of these ideas are somewhat subjective except in the case of
correctness.
Correctness says the site’s execution must be excellent.
–
–
–
–
Can’t break in ANY way
HTML correct
Images render as designed
Interactive elements like JavaScript, CGI, etc. must function properly and
not result in error messages.
– The navigation of the site must work. Broken links with the 404 error
should be considered serious errors.
– Seems obvious but many sites are well executed.
•
Web Design Rule: A site’s execution must be close to flawless.
Web Publishing 3
http://www.pint.com/classes/web3
The Execution Problem
•
Why such poor execution?
– Technology shifts
• How many versions of HTML, JavaScript, CSS, Flash, etc. have been released
recently.
–
–
–
–
Lack of developer experience
Aggressive time lines
Lack of methodology
No consideration for medium restrictions
• Technology
• Network
•
Web designer who ignores technical and medium effects is like the printer who
will not admit that ink bleeds on paper.
•
Web Design Rule: Know and respect the Web and Internet
medium constraints.
•
Constraints range from browser and bandwidth to programming and protocols.
7
Web Publishing 3
http://www.pint.com/classes/web3
Web’s GUI Heritage
•
Many sites provide more than content, but allow users to interact or
manipulate content just like regular software.
•
Web sites are not identical to traditional software
– E-commerce, online banking, software download, gaming, chat, etc.
–
–
–
–
–
–
–
Built using similar technologies
Distributed differently
Must be quickly learnable (sorry no documentation to save a poor design)
Lack an install/uninstall barrier
Very content focused
Integrate marketing more directly
May have complex time or distribution considerations
• Think of superbowl.com
•
While sites are different they do rely on basic GUI (Graphical User
Interface) components: windows, icons, menus, and pointer. Some
call this the WIMP interface.
Web Publishing 3
http://www.pint.com/classes/web3
Web’s GUI Heritage
•
Web is modified GUI
– No double clicking
– Dragging?
•
However, shouldn’t we build on what people know and expect from
normal software?
– Menu position
– Stability
– Common icons
•
Web Design Rule: Web sites should respect GUI principles where
appropriate.
•
Traditionally Mac and Windows have guidelines to follow to be
considered to be standard. Q: Does the Web have such a controlling
body? A: No, not even the W3 really can spec interface rules.
Web Publishing 3
http://www.pint.com/classes/web3
Web’s GUI Heritage
•
•
Conventions based upon tradition, social forces, technology, common
sense, and even random chance have created somewhat of a Web
standard.
Color
– Blue = click
– Change your link colors and you confuse people for sure.
– Logo in upper left = back to home
8
Web Publishing 3
http://www.pint.com/classes/web3
Navigation
•
•
•
•
Unlike most GUI apps (except CD-ROM references) Web sites require
a user to navigate through large amounts of content.
Clear navigation is key to a good Web site. Who cares if a site has
great content or good functionality if a user can’t find things.
Navigation however is not as important as many people think. Web
sites are not places!
Users should not notice navigation. The focus should not be on
moving or doing, but on the content or task.
•
Web Design Rule: Navigation is only a means to an end result.
•
Users will not marvel over your ingenious navigation particularly if it
breaks with convention. Brand in your buttons and you may find you
confuse people.
Web Publishing 3
http://www.pint.com/classes/web3
Navigation
•
•
•
•
•
•
To improve navigation designers like to bring structure to a site.
Choosing a good site structure will make it easier for users to fin their
way.
Aids such as site maps, search engines, site index, and help systems
will help users find things.
Location really only matters to a user when they can’t find what they
are looking for.
Users do not form flowcharts in their minds as they navigate sites.
Users are information foragers, as long as the sent to the goal is
strong, they don’t feel lost, and they feel they are making progress
towards a successful end result the user will be happy.
Web Publishing 3
http://www.pint.com/classes/web3
Looks Matter
•
•
•
•
Navigation is subtle. Great sites are more about function, navigation,
and content (think Yahoo, Amazon, etc.) but there must be at least
neutral if not excellent visuals to have a good site. Looks matter.
However do Web designers necessarily set look?
First impression counts with many Web sites.
– Home page is heavy bailout
– Home page orients
– Users may not wait
– Users may not be encouraged to explore
Users are known to equate trust to positive visuals when not relying on
outside information.
9
Web Publishing 3
http://www.pint.com/classes/web3
Looks Matter
•
•
Web Design Rule: Visuals heavily influence the user’s initial
perception of a site’s value.
However, first impression will not make up for other problems.
Web Publishing 3
http://www.pint.com/classes/web3
The Take Away Value
•
•
•
When a user exits a site they have a take away value—how successful
was the visit. Did they like it, hate it, or was it just so-so?
What causes the feeling?
– Slow pages, nice graphics, no content, broken technology, easy
function, etc.
Web Design Rule: A site’s take away value is influenced by
visuals, content, technology, usability and goal accomplishment.
Web Publishing 3
http://www.pint.com/classes/web3
Form and Function Balance
•
•
A key problem with Web design is that sites often do not balance form
and function.
Form should follow function.
Site’s look should relate and even help the function.
Of course for form to follow function the function or purpose of the site
has to be clearly defined.
Consider the look and feel of sites like Yahoo!, Amazon, Excite, etc.
•
Some believe a site should be distinct so people remember it.
•
•
•
– Is function limiting design choices?
– The different door knob doesn’t encourage revisits to your store though it
may make memorable.
•
Make distinct with content, function and experience not navigation.
•
Web Design Rule: Do not invent interfaces to build brand.
10
Web Publishing 3
http://www.pint.com/classes/web3
What is good Web design?
•
•
•
•
What is good will vary from project to project depending on the site’s
purpose.
A video game wouldn’t have the same design considerations as
Microsoft Word.
Killer, cool, sizzling, etc. sites should necessarily be what you pattern
yourself after.
Consider the splash page
– For some sites this page should be called the “send away page”
– For other sites not having a splash page is like removing the title or
opening credits of a movie
Web Publishing 3
http://www.pint.com/classes/web3
What is good Web design?
•
Web Design Rule:
There is no form of
“correct” Web Design
that fits every site or
situation.
Web Publishing 3
http://www.pint.com/classes/web3
What is good Web design?
•
•
•
Consider even page size considerations.
Some say 50K is a good size particularly since slow pages are a big
problem.
With high bandwidth would 50K pages make sense?
•
With wireless access the game changes again
– Cable modem sites may have to be designed differently than normal sites
– No bandwidth
– Small screen
– Different browsing environment
• Outside the office
• Noisy
– Imagine paging through a normal Web site on some LCD cellphone screen
while driving a car.
•
The rules are good, but understand their motivation and know when to
break them.
11
Web Publishing 3
http://www.pint.com/classes/web3
Web Site Evaluation
•
•
Avoid knee jerk sucks or cool style reviews
What’s bad is pretty obvious
–
–
–
–
–
•
•
Under construction
Slow pages
Overly animated pages
Confusing navigation
Hard to read pages
Avoid pointing out what is bad so much, strive to see the good points
and copy them.
When running an evaluation make sure to reverse the development
process. “Walk up and down the waterfall”
– Who is it for? What is it supposed to do? How was it done?
Demo: Sample Site Evaluations
Web Publishing 3
http://www.pint.com/classes/web3
In Search of Web Design
•
•
•
•
So what is Web design?
User centered, multi-disciplinary design pursuit that includes influences
from visual arts, technology, content and purpose.
The Web borrows from old (print, software, etc.) and invents new ideas
(portals, content focus, single click).
Old design philosophy is WYSIWYG (what you see is what you get)
– Based on a screen/printer disparity
•
•
Today the ultimate goal may not be to create paper but to accomplish
task or find info
Users don’t want to “get” some standard thing they want to control
things or at least think they are.
– Think about personalization and sites like myYahoo
•
Web Design Rule: Control should be given or at least appear to be
given to the user.
Web Publishing 3
http://www.pint.com/classes/web3
Chapter 2:
The Web Design Process
12
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Process?
•
•
•
Software Crisis is similar to Web crisis
– Just look around it is easy to see flaws
– It is even easier to break Web sites
Many sites follow a simple ad hoc process at best
– HTML poorly executed
– Navigation seems poorly planned
– JavaScript doesn’t follow simple programming practices
– Broken Links
– In short little planning and poor quality assurance
Beyond ad hoc process the simplest way to improve things is to adopt
a process model that guides a project. The most well known are topdown models
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Process—Standard Waterfall
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Process—Standard Waterfall Issues
•
•
•
The waterfall model is easy to understand but it doesn’t address all the
issues facing Web designers
– Discrete steps aren’t always easy to define
– Doesn’t deal with change well
• Web sites are always changing
– Slower than many other process models
• Web sites seem to be on a deliver it yesterday timeline
– Lots of risk involved when the first stages are rushed
However, despite its problems the Waterfall model is easy to
implement and should be a first step for many designers. It is
particular good for initial site development.
Modification of the waterfall can be made to deal with risk and change
factors
13
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Process--Modified Waterfall
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Process--Modified Waterfall Issues
•
•
•
•
•
Even the modified Waterfall approach doesn’t deal with all problems
Invariably clients or other decision makers change their minds.
Some clients are unable to articulate what they are looking for
Sometimes we just don’t really know what will work so taking a shot or
building a prototype works well.
– Many sites use this spaghetti approach — see what sticks
Joint Application Design (JAD) seems to deal with these issues but has
serious drawbacks
– End up building the wrong site many times to make the right one
– People often “marry” the prototype
– Problems with prototypes can be damaging (The ‘release too soon’
syndrome)
– Cost control can be hard; it’s difficult to budget for these projects
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Process (JAD)
14
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Process
•
•
•
We are going to adopt a simple modified Waterfall approach to design
for our discussion
A great deal of time will be spent on the goals and early planning to
avoid building sites that don’t make sense
Time will be spent considering the user needs carefully.
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Process Step 1
•
•
•
•
First talk about goals and problems
– No goal
– Vague goal
Goal should be measurable otherwise you are at risk
– “Build a customer support site that will improve customer
satisfaction by providing 7/24 access to common questions and
result in a 25% decrease in telephone support.
– Create an online car parts store that will see at least $10K/month of
product directly to the consumer.
– Develop a Japanese food restaurant site that tells potential
customers about menu, hours, and prices.
Is the last goal a good one? Why or why not?
A goal at the start of the project should be to come up with a short a
long form of a site’s goals. (Mission Statement + Project Description)
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Process
•
Brainstorming process Techniques
– Get read to use the whiteboard
– Start with what people don’t like particularly on a redo project if it is
difficult to determine what to do.
– Create a wish list.
• Let the wish list get a big as it needs too
• Don’t throw out any idea at this stage
– Narrow the wish list and try to get people to compromise
– “Everybody wants to be on the homepage”
• 3x5” card technique helps
15
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Process
•
Audience discussion
– Profile your audience
• Who are they
• What do they want to do
– Talk to users
• Surveys and interviews
• Be careful not to direct the results
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Process
•
•
Given goals and audience you should be able to begin to figure out
what is necessary to accomplish the goal. These are the requirements.
Requirements include staffing, content, technology, graphics, etc. In
short everything you need to do the job. You don’t have to put it
together quite yet.
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Process
•
Build a site plan
– Short goal statement
– Detailed goal statement
– Audience Discussion
– User Scenario Discussion
– Content Requirements
• Make a matrix of what is needed
– Technical Requirements
• What type of tech is needed (JavaScript, Flash, etc.)
– Visual Requirements
• Are there design parameters like color, font, logo, other media
that needs to be considered when building the site.
16
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Process
– Delivery Requirements
– Site Structure diagram (flowchart)
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Process
•
•
– Staffing
– Timeline
– Budget
With the design document in hand and approved it may be time to
actually start the design.
Web Design Suggestion: Always collect the content before design if at
all possible.
– Slowest aspect of projects.
– Content should influence the design (form follows content)
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Process
•
Try a conceptual block diagram to workout positions
17
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Process
•
Design sketches should within a browser window since it serves as a
frame. Also start from the home page and then work down.
Web Publishing 3
http://www.pint.com/classes/web3
The Web Design Process
•
Sketch out not just look but storyboard an action such as form fill-out.
Web Publishing 3
http://www.pint.com/classes/web3
Design Process
•
•
•
•
•
Don’t marry your design prototypes. Listen to your users and refine
things.
Build a mock site with no content
Retest the mock site with users
Implement your site with real content and final technology.
Test your site well.
•
Web Design Rule: Sites always have bugs.
•
Web Design Rule: Testing should address all aspects of the site
including content, function, visuals, and purpose.
18
Web Publishing 3
http://www.pint.com/classes/web3
Design Process
•
•
•
User test is the most important form of testing and should be performed
one final time before release.
Once your site is released you aren’t done. Site development is an
ongoing process. Plan, design, develop, release, repeat.
It isn’t as easy at it seems.
– The “real world” has lots of challenges.
– Outside experts, “silver bullet tools”, bad timelines and budgets,
people problems, etc.
Web Publishing 3
http://www.pint.com/classes/web3
Chapter 3
Designing for Users
Web Publishing 3
http://www.pint.com/classes/web3
User Centered Design
•
•
Web sites are often developed from one particular philosophical
reference point.
– Content centered
– Technology centered
– Visually centered
The real emphasis when building sites should always be the user.
Keeping the user always in mind is the key idea behind user centered
design.
19
Web Publishing 3
http://www.pint.com/classes/web3
Usability
•
Definition: Usability is the extent to which a site can be used by a
specified group of users to achieve specified goals with
effectiveness, efficiency, and satisfaction in a specified context of
use.
•
From Nielsen 5 ideas that determine the usability of a site
– Learnability
– Rememberability
– Efficiency of use
– Reliability in use
– User satisfaction
The fifth item may be the big one if you think carefully about the
problem.
•
Web Publishing 3
http://www.pint.com/classes/web3
Usability
•
Rule: There is no absolute idea of what constitutes a usable site.
Usability will vary as much as the users accessing the site.
•
Rule: Usability depends on the medium of consumption.
Remember the onscreen, on paper, by audio, etc. problem.
•
Rule: Usability depends on the type of site as well as the user’s
familiarity with it.
Web Publishing 3
http://www.pint.com/classes/web3
Usability
Rule: Usability and user satisfaction are directly related.
It seems obvious but user’s tend to think that sites they are happy
with are usable even when they might not be to someone who
thinks the site isn’t interesting. Conversely when a site is easy to
use it tends to help users feeling about the site.
20
Web Publishing 3
http://www.pint.com/classes/web3
Who are Web users?
Rule: Browsers do not use sites, people do.
•
•
There is no generic person
– Be cautious of “Joe AOL” with the 14.4 modem idea. Even Yahoo!
Shouldn’t design for such an ambiguous individual.
Suggestion: There are no generic people. Always try to envision a real
person visiting your site.
Web Publishing 3
http://www.pint.com/classes/web3
Common User Characterisitcs
•
•
While there may not be a totally typical person people do have similar
capabilities. Consider the prime way that a user interacts with a Web
site (keyboard, mouse, monitor).
– Sight
– Reaction time
– Memory
– Other possibilities may include hearing
Be careful of assuming that even with similar capabilities that there is
not a range.
– Example: Vision varies from completely blind to excellent vision
Web Publishing 3
http://www.pint.com/classes/web3
Vision
•
•
•
•
The main concern is can the user properly read the display
Contrast
– Dark on dark
– Light on light
– In short avoid any combinations of similar hue or lightness.
Yellow and black provide greatest contrast, but of course white and
black is close. Notice the increased use of white as background for
content
Notice that few huge sites really use complex background tiles.
21
Web Publishing 3
http://www.pint.com/classes/web3
Vision
•
•
•
Size
– Too small
– Too big
– Be careful sizing text is not consistent across systems (Mac 12pt !=
PC 12pt)
Layout
– Too close together
– User has difficult time telling the difference between items
Always remember to make things noticeably different. Slight
differences will not pass our thresholds.
Web Publishing 3
http://www.pint.com/classes/web3
Vision
•
•
•
•
Color
– Can the user even perceive it?
– Do they perceive it properly
• Taste issue as well as usability think about link color in
particular
– Even it everything is the same two people may not see the same
color the same way.
Monitors don’t make life easy because color and brightness varies from
monitor to monitor.
Worse yet the end user can adjust things for better or worse.
Should consider that Macs and Windows do not share the same
Gamma value (basically brightness) so should aim either for Windows
or something between the two.
– When we talk about color in depth we’ll take a look at this.
Web Publishing 3
http://www.pint.com/classes/web3
Memory
•
Rule: Users try to maximize gain and minimize work. (The lazy
person rule)
Memory requires work!
•
Rule: Recognition is easier than recall, so don’t force users to
memorize information.
•
This is pervasive in Web design. Even consider link color.
– If you make visited links the same color or style as unvisited ones
you are making the user memorize where they have been.
Visual memory tends to be better than other forms of memory.
– Consider how to make the home page visually different than others.
•
22
Web Publishing 3
http://www.pint.com/classes/web3
Memory
•
Short term memory wise, users are able to remember around 7+/2 items. This is important to consider for button clusters.
– Do not go crazy with this idea and limit your site to only this many
buttons per page as this will result in excessive clicking. Users are
not interested in more than 3 clicks to reach content in most cases.
Web Publishing 3
http://www.pint.com/classes/web3
Reaction Time
•
•
0.1 second
– This is the limit for having the user feel that the system is reacting
instantaneously, don’t have to keep them informed in even the
slightest way
1.0 second
– This is about the limit for the user's flow of thought to stay
uninterrupted, even though the user will notice the delay. Normally,
no special feedback is necessary during delays of more than 0.1
but less than 1.0 second, but the user does lose the feeling of
operating directly on the data.
Web Publishing 3
http://www.pint.com/classes/web3
Reaction Time
•
•
•
•
How long will people wait for sites?
– 10 seconds, 100 seconds, etc.
Is it consistent?
Users tend to be more patient with something they are unfamiliar with
or that is a novelty
Rule: The amount of time a user will wait is proportional to the
expected payoff.
23
Web Publishing 3
http://www.pint.com/classes/web3
Reaction Time
•
•
•
•
10 seconds
– This is limit for keeping the user's attention focused on the
dialogue.
> 10 seconds
– Users will want to perform other tasks while waiting for the
computer to finish, so they should be given feedback indicating
when the computer expects to be done. Think about status bars on
installers
Be careful on the Web, people may be patient more because it is new
to them, over time this may not be the case.
Consider that these are worst case times between responses or tasks.
What does the user think a task is? A page load or an item being
downloaded.
Web Publishing 3
http://www.pint.com/classes/web3
Movement Capabilities
•
•
Consider mouse and keyboard travel always in sites.
– Try to optimize keyboard access for all pages in a site.
– Minimize mouse travel distance between successive choices
– Minimize the distance between the primary hover zone and the
back button.
Consider Fitt’s Law and make clickable regions large enough and close
enough to be clicked accurately.
Web Publishing 3
http://www.pint.com/classes/web3
Sensory Issues
•
•
Be aware that users react to sensory stimulus in fairly similar ways
– Thresholds
• People’s ability to notice things that are just barely different.
– Cocktail party effect
• The ability to focus on a single conversation within a large room
of people might relate to a person’s ability to focus on a single
content item out of a page with many distracting elements.
– Sensory adaptation
• Users will start to ignore things which initially grab their
attention.
• Consider continuous animation of banners or other attention
grabbers.
The idea of banner blindness probably results partially from these
ideas
24
Web Publishing 3
http://www.pint.com/classes/web3
General User Types
•
In general there are three types of users
– Novices
• May not understand Web conventions
• Will not understand site organization
• May want extra help like a tour, help system, or step-by-step wizard
style interfaces
– Infrequent intermediates
• Know basic Web conventions well so they will know how to use various
site features but may not know where things are
– Power users
• Like to use simple URLs, pull downs, search or site map for direct
access
• Want to customize things to suite their own tastes
– Bandwidth, images, content shown, etc.
• May know navigation very well
Web Publishing 3
http://www.pint.com/classes/web3
User Types
•
•
•
Intermediate users are the most common for public Web sites.
– These users will spend most of their time elsewhere but will
understand basic Web conventions so you better not break them.
– Other users may be very important depending on your audience
mix.
Aim to build an adaptive Web sites that meets the requires of novices,
intermediates and advanced user, otherwise aim for intermediate.
Users are real people so beyond these basic ideas they may be very
different.
Web Publishing 3
http://www.pint.com/classes/web3
User Types
•
Real people will have real experiences the will bring to the table
– The 99% other Web site rule
– GUI conventions and other learned experiences
•
Real people are not perfect and may have problems that you consider
out of the ordinary
– Accessibility is the idea of trying to make a site workable for those
with less than perfect vision, language skills, motor skills, and even
connections!
25
Web Publishing 3
http://www.pint.com/classes/web3
Real Users
•
•
•
•
•
Understanding YOUR audience is key
Audience varies from site to site
Profiling users
– Take a guess
– Make up character names
– Try to get in their shoes
Interviewing real users
– Interview Rule: Be quiet!
– Figure out what kind of tasks they do.
– Avoid focus groups initially and try one on one
– Use focus groups to verify ideas
Watch users
– Look at the tasks they perform
– Try to watch them without their knowledge
Web Publishing 3
http://www.pint.com/classes/web3
The Other Master: The Client, Boss, Company, etc.
•
•
With all the discussion on users people often then go to far and forget
that the site is built to meet the needs of the client or boss.
– They are the ones paying for it.
– Site owners desires are not always congruent with the desires of
the site’s users
• Do users always want to see ads? Do they need to see them?
Don’t let the boss run the show too much and particularly avoid the
“I’ve browsed a lot of sites, I know what people want” people.
Web Publishing 3
http://www.pint.com/classes/web3
Control
•
There is always an unwritten contract between developer and user for
control
– Users particularly novices users shouldn’t be given complete
freedom because they may make mistakes and “hurt” themselves
– Take away too much control and users may feel frustrated
– Users need to feel in control
– “Las Vegas” design
– The best solution should be unlimited user control within a fixed
domain of possibilities that can result in no serious errors.
26