EffectiveWebDesignFor Non-ProfitsMichael Powers, Ph.D.November 2, 2009
About Me• Director of Web Services• Run the Web Team• We run www.iup.edu
What is design?Solving problems
Example: Door Handles          How do you know          whether to push or          pull?          • Labels          • Sta...
Example: Door Handles
Graphic design is onlypart of designKey: Knowing the problemyou’re trying to solve
What’s web design?What’s your problem?
Selling Things?
Getting people incontact with others?
Helping people getinformation?
How can you give memoney?
Graphic design is onlypart of the solution• Graphic Design• Interaction Design• Information Architecture• Content Strategy
The successful solutionis not always obvious
The most populardating site
The most popularcareer site
The most popularapartment-hunting site
So where do we start?
Start withweb standards        • Third edition out last          week        • The second book you          have to read a...
The User ExperienceHoneycomb                                     • Created by Peter             useful                    ...
usefulcredible                findable           valuableusable                 accessible           desirable
Useful      useful                                    • A useful website does                                      somethi...
Useful      useful                                    Conversion rate =            useful                                 ...
Findable      findable                                    • People need to find your site                                 ...
Findable      findable                                    • Finding your site:                                     • Searc...
Findable      findable                                    • Finding what they need on                                     ...
Accessible    accessible                                    • Making sure that those with                                 ...
Accessible    accessible                                    • Use web standards                                    • Test ...
Desirable     desirable                                    • Great visual design not                                      ...
Desirabledesirable                 i      i
Desirabledesirable
Desirable     desirable                                    • Most important web design                                    ...
Desirabledesirable               i        i
Usable           usable                                    • A usable website allows users                                ...
Usable           usable                                    • A usable website allows users                                ...
Usableusable          • The first book you should            read about web design
Usable           usable                                    • Common problems:                                       • Brea...
Credible      credible                                    • Do users trust your site?                                     ...
Valuable: The      valuable                                    Core                                    • The website needs...
There’s no one answer• There’s only the right balance
How do you make greatweb design happen?•Best Practices•Testing•Process
One Possible Process1. Define Project and      3. Visual Design   Goals                      3.1.Wireframe   1.1.User Pers...
Learning from Amazon        1998
Learning from Amazon      1999–2000
Learning from Amazon        2001
Learning from Amazon      2004–2005
Learning from Amazon        2009
Your Websites andSamples•   Clearfield Jefferson CMHC -        •   www.theopendoor.com    Shawn Cupec www.thecgc.com      ...
Upcoming SlideShare
Loading in...5
×

Effective Web Design for Non-Profits

718

Published on

Presentation to a university-level web design class. Presents a model, which we then apply to student projects.

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
718
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Effective Web Design for Non-Profits

  1. 1. EffectiveWebDesignFor Non-ProfitsMichael Powers, Ph.D.November 2, 2009
  2. 2. About Me• Director of Web Services• Run the Web Team• We run www.iup.edu
  3. 3. What is design?Solving problems
  4. 4. Example: Door Handles How do you know whether to push or pull? • Labels • Standardization • Hardware design
  5. 5. Example: Door Handles
  6. 6. Graphic design is onlypart of designKey: Knowing the problemyou’re trying to solve
  7. 7. What’s web design?What’s your problem?
  8. 8. Selling Things?
  9. 9. Getting people incontact with others?
  10. 10. Helping people getinformation?
  11. 11. How can you give memoney?
  12. 12. Graphic design is onlypart of the solution• Graphic Design• Interaction Design• Information Architecture• Content Strategy
  13. 13. The successful solutionis not always obvious
  14. 14. The most populardating site
  15. 15. The most popularcareer site
  16. 16. The most popularapartment-hunting site
  17. 17. So where do we start?
  18. 18. Start withweb standards • Third edition out last week • The second book you have to read about web design
  19. 19. The User ExperienceHoneycomb • Created by Peter useful Morville findable • A great tool for credible looking at web design holistically valuable • How will you usable accessible balance these? desirable
  20. 20. usefulcredible findable valuableusable accessible desirable
  21. 21. Useful useful • A useful website does something beneficial for its users and owners useful • We can call this something acredible findable conversion:usable valuable accessible • Purchase desirable • Subscribing to a mailing list • Downloading a white paper
  22. 22. Useful useful Conversion rate = useful Successful Outcomes Unique Visitorscredible findable valuableusable accessible desirable If you aren’t measuring your conversion rate, you need to start today.
  23. 23. Findable findable • People need to find your site • People need to find what they need on your site usefulcredible findable valuableusable accessible desirable
  24. 24. Findable findable • Finding your site: • Search Engine Optimization useful • Web standards help with thiscredible findable valuableusable accessible desirable
  25. 25. Findable findable • Finding what they need on your site: • Information Architecture usefulcredible findable valuableusable accessible desirable
  26. 26. Accessible accessible • Making sure that those with visual, hearing, and other impairments can use the site useful • 8% of population: colorcredible findable blindusable valuable accessible • 3.5%: visually impaired desirable • 3.3%: hearing problems • Would you turn away every 10th customer?
  27. 27. Accessible accessible • Use web standards • Test with an accessibility validator usefulcredible findable • Read Joe Clark’s Designing Accessible Websites (text valuable available for free)usable accessible desirable • (Bonus: Google is effectively a blind and deaf user)
  28. 28. Desirable desirable • Great visual design not always needed • But: users find attractive sites usefulcredible findable • easier to use valuable • more credibleusable accessible desirable
  29. 29. Desirabledesirable i i
  30. 30. Desirabledesirable
  31. 31. Desirable desirable • Most important web design tool: useful HTMLcredible findable • Learn it. Without valuable Dreamweaver.usable accessible desirable
  32. 32. Desirabledesirable i i
  33. 33. Usable usable • A usable website allows users to achieve goals with a minimum of frustration useful • In a phrase:credible findable Don’t make me think! valuableusable accessible desirable
  34. 34. Usable usable • A usable website allows users to achieve goals with a minimum of frustration useful • Usability in a phrase:credible findable Don’t make me think! valuableusable accessible • When asked to carry out a desirable specific task on a website, users succeeded 66% of the time
  35. 35. Usableusable • The first book you should read about web design
  36. 36. Usable usable • Common problems: • Breaking the back button useful • Pop-up windowscredible findable • Design elements that look valuable like advertisementsusable accessible • Violating web-wide desirable conventions • Useless content
  37. 37. Credible credible • Do users trust your site? Credible sites: • Distinguish ads & content usefulcredible findable • Update frequently valuable • Avoid popup windowsusable accessible • Make it easy to navigate • Avoid broken links desirable • Avoid typographical errors
  38. 38. Valuable: The valuable Core • The website needs to create value—ideally, more than it costs useful • The honeycomb can help youcredible findable make choices about what’s valuable important and what’s notusable accessible desirable
  39. 39. There’s no one answer• There’s only the right balance
  40. 40. How do you make greatweb design happen?•Best Practices•Testing•Process
  41. 41. One Possible Process1. Define Project and 3. Visual Design Goals 3.1.Wireframe 1.1.User Personas 3.2.High-Fidelity 1.2.Content Inventory Mockups 1.3.Competitive 3.3.Usability Testing Analysis 4. Build Site 1.4.Analytics Review 5. Launch2. Define Site Structure 2.1.Card Sorts 2.2.Site Map
  42. 42. Learning from Amazon 1998
  43. 43. Learning from Amazon 1999–2000
  44. 44. Learning from Amazon 2001
  45. 45. Learning from Amazon 2004–2005
  46. 46. Learning from Amazon 2009
  47. 47. Your Websites andSamples• Clearfield Jefferson CMHC - • www.theopendoor.com Shawn Cupec www.thecgc.com • www.sunpointhealth.com• Big Hearts Little Hands - Sharon • www.philmontguidance.com 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×