View
710
Download
3
Category
Preview:
DESCRIPTION
Presentation to a university-level web design class. Presents a model, which we then apply to student projects.
Citation preview
For Non-ProfitsMichael Powers, Ph.D.November 2, 2009
Effective WebDesign
About Me
• Director of Web Services
• Run the Web Team
• We run www.iup.edu
What is design?
Solving problems
Example: Door HandlesHow do you know whether to push or pull?
• Labels
• Standardization
• Hardware design
Example: Door Handles
Graphic design is only part of designKey: Knowing the problem you’re trying to solve
What’s web design?
What’s your problem?
Selling Things?
Getting people in contact with others?
Helping people get information?
How can you give me money?
Graphic design is only part of the solution• Graphic Design
• Interaction Design
• Information Architecture
• Content Strategy
The successful solution is not always obvious
The most popular dating site
The most popular career site
The most popular apartment-hunting site
So where do we start?
Start withweb standards
• Third edition out last week
• The second book you have to read about web design
The User Experience Honeycomb
• Created by Peter Morville
• A great tool for looking at web design holistically
• How will you balance these?
useful
findable
accessible
valuable
desirable
usable
credible
useful
findable
accessible
valuable
desirable
usable
credible
Useful
• A useful website does something beneficial for its users and owners
• We can call this something a conversion:
• Purchase
• Subscribing to a mailing list
• Downloading a white paper
useful
useful
findable
accessible
valuable
desirable
usable
credible
UsefulConversion rate =
If you aren’t measuring your conversion rate, you need to start today.
useful
useful
findable
accessible
valuable
desirable
usable
credible
Successful OutcomesUnique Visitors
Findable
• People need to find your site
• People need to find what they need on your site
findable
useful
findable
accessible
valuable
desirable
usable
credible
Findable
• Finding your site:
• Search Engine Optimization
• Web standards help with this
findable
useful
findable
accessible
valuable
desirable
usable
credible
Findable
• Finding what they need on your site:
• Information Architecture
findable
useful
findable
accessible
valuable
desirable
usable
credible
Accessible
• Making sure that those with visual, hearing, and other impairments can use the site
• 8% of population: color blind
• 3.5%: visually impaired
• 3.3%: hearing problems
• Would you turn away every 10th customer?
accessible
useful
findable
accessible
valuable
desirable
usable
credible
Accessible
• Use web standards
• Test with an accessibility validator
• Read Joe Clark’s Designing Accessible Websites (text available for free)
• (Bonus: Google is effectively a blind and deaf user)
accessible
useful
findable
accessible
valuable
desirable
usable
credible
Desirable
• Great visual design not always needed
• But: users find attractive sites
• easier to use
• more credible
desirable
useful
findable
accessible
valuable
desirable
usable
credible
Desirable i i
desirable
Desirable
desirable
Desirable
• Most important web design tool:
HTML• Learn it. Without
Dreamweaver.
desirable
useful
findable
accessible
valuable
desirable
usable
credible
Desirable i i
desirable
Usable
• A usable website allows users to achieve goals with a minimum of frustration
• In a phrase:
Don’t make me think!
usable
useful
findable
accessible
valuable
desirable
usable
credible
Usable
• A usable website allows users to achieve goals with a minimum of frustration
• Usability in a phrase:
Don’t make me think!• When asked to carry out a
specific task on a website, users succeeded 66% of the time
usable
useful
findable
accessible
valuable
desirable
usable
credible
Usable
• The first book you should read about web design
usable
Usable
• Common problems:
• Breaking the back button
• Pop-up windows
• Design elements that look like advertisements
• Violating web-wide conventions
• Useless content
usable
useful
findable
accessible
valuable
desirable
usable
credible
Credible
• Do users trust your site? Credible sites:
• Distinguish ads & content
• Update frequently
• Avoid popup windows
• Make it easy to navigate
• Avoid broken links
• Avoid typographical errors
credible
useful
findable
accessible
valuable
desirable
usable
credible
Valuable: The Core• The website needs to create
value—ideally, more than it costs
• The honeycomb can help you make choices about what’s important and what’s not
valuable
useful
findable
accessible
valuable
desirable
usable
credible
There’s no one answer
• There’s only the right balance
How do you make great web design happen?•Best Practices
•Testing
•Process
One Possible Process1. Define Project and
Goals1.1.User Personas1.2.Content Inventory1.3.Competitive
Analysis1.4.Analytics Review
2. Define Site Structure2.1.Card Sorts2.2.Site Map
3. Visual Design3.1.Wireframe3.2.High-Fidelity
Mockups3.3.Usability Testing
4. Build Site5. Launch
Learning from Amazon
1998
Learning from Amazon
1999–2000
Learning from Amazon
2001
Learning from Amazon
2004–2005
Learning from Amazon
2009
Your Websites and Samples
• Clearfield Jefferson CMHC - Shawn Cupec www.thecgc.com
• Big Hearts Little Hands - Sharon Coldwell www.icymca.org.
• Alice Paul House - Lou Ann Williams, www.alicepaulhouse.org
• www.hspeoria.com
• www.projecthelpers.com
• www.rainbowrehab.com
• www.mmsm.com
• www.lindnercenterofhope.org
• www.arcmanor.org
• www.theopendoor.com
• www.sunpointhealth.com
• www.philmontguidance.com
Recommended