Effective Web Design for Non-Profits

813
-1

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
813
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.

×