Effective Web Design for Non-Profits
-
Upload
michael-powers -
Category
Design
-
view
713 -
download
3
description
Transcript of Effective Web Design for Non-Profits
![Page 1: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/1.jpg)
For Non-ProfitsMichael Powers, Ph.D.November 2, 2009
Effective WebDesign
![Page 2: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/2.jpg)
About Me
• Director of Web Services
• Run the Web Team
• We run www.iup.edu
![Page 3: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/3.jpg)
What is design?
Solving problems
![Page 4: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/4.jpg)
Example: Door HandlesHow do you know whether to push or pull?
• Labels
• Standardization
• Hardware design
![Page 5: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/5.jpg)
Example: Door Handles
![Page 6: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/6.jpg)
Graphic design is only part of designKey: Knowing the problem you’re trying to solve
![Page 7: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/7.jpg)
What’s web design?
What’s your problem?
![Page 8: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/8.jpg)
Selling Things?
![Page 9: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/9.jpg)
Getting people in contact with others?
![Page 10: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/10.jpg)
Helping people get information?
![Page 11: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/11.jpg)
How can you give me money?
![Page 12: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/12.jpg)
Graphic design is only part of the solution• Graphic Design
• Interaction Design
• Information Architecture
• Content Strategy
![Page 13: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/13.jpg)
The successful solution is not always obvious
![Page 14: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/14.jpg)
The most popular dating site
![Page 15: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/15.jpg)
The most popular career site
![Page 16: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/16.jpg)
The most popular apartment-hunting site
![Page 17: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/17.jpg)
So where do we start?
![Page 18: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/18.jpg)
Start withweb standards
• Third edition out last week
• The second book you have to read about web design
![Page 19: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/19.jpg)
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
![Page 20: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/20.jpg)
useful
findable
accessible
valuable
desirable
usable
credible
![Page 21: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/21.jpg)
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
![Page 22: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/22.jpg)
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
![Page 23: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/23.jpg)
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
![Page 24: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/24.jpg)
Findable
• Finding your site:
• Search Engine Optimization
• Web standards help with this
findable
useful
findable
accessible
valuable
desirable
usable
credible
![Page 25: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/25.jpg)
Findable
• Finding what they need on your site:
• Information Architecture
findable
useful
findable
accessible
valuable
desirable
usable
credible
![Page 26: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/26.jpg)
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
![Page 27: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/27.jpg)
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
![Page 28: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/28.jpg)
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
![Page 29: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/29.jpg)
Desirable i i
desirable
![Page 30: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/30.jpg)
Desirable
desirable
![Page 31: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/31.jpg)
Desirable
• Most important web design tool:
HTML• Learn it. Without
Dreamweaver.
desirable
useful
findable
accessible
valuable
desirable
usable
credible
![Page 32: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/32.jpg)
Desirable i i
desirable
![Page 33: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/33.jpg)
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
![Page 34: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/34.jpg)
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
![Page 35: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/35.jpg)
Usable
• The first book you should read about web design
usable
![Page 36: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/36.jpg)
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
![Page 37: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/37.jpg)
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
![Page 38: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/38.jpg)
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
![Page 39: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/39.jpg)
There’s no one answer
• There’s only the right balance
![Page 40: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/40.jpg)
How do you make great web design happen?•Best Practices
•Testing
•Process
![Page 41: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/41.jpg)
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
![Page 42: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/42.jpg)
Learning from Amazon
1998
![Page 43: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/43.jpg)
Learning from Amazon
1999–2000
![Page 44: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/44.jpg)
Learning from Amazon
2001
![Page 45: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/45.jpg)
Learning from Amazon
2004–2005
![Page 46: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/46.jpg)
Learning from Amazon
2009
![Page 47: Effective Web Design for Non-Profits](https://reader034.fdocuments.in/reader034/viewer/2022042714/5549fc11b4c905507a8b4aa7/html5/thumbnails/47.jpg)
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