2. About Me• Director of Web Services• Run the Web Team• We run www.iup.edu
3. What is design?Solving problems
4. Example: Door Handles How do you know whether to push or pull? • Labels • Standardization • Hardware design
5. Example: Door Handles
6. Graphic design is onlypart of designKey: Knowing the problemyou’re trying to solve
7. What’s web design?What’s your problem?
8. Selling Things?
9. Getting people incontact with others?
10. Helping people getinformation?
11. How can you give memoney?
12. Graphic design is onlypart of the solution• Graphic Design• Interaction Design• Information Architecture• Content Strategy
13. The successful solutionis not always obvious
14. The most populardating site
15. The most popularcareer site
16. The most popularapartment-hunting site
17. So where do we start?
18. Start withweb standards • Third edition out last week • The second book you have to read about web design
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
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. 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. Findable findable • People need to find your site • People need to find what they need on your site usefulcredible findable valuableusable accessible desirable
24. Findable findable • Finding your site: • Search Engine Optimization useful • Web standards help with thiscredible findable valuableusable accessible desirable
25. Findable findable • Finding what they need on your site: • Information Architecture usefulcredible findable valuableusable accessible desirable
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. 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. Desirable desirable • Great visual design not always needed • But: users find attractive sites usefulcredible findable • easier to use valuable • more credibleusable accessible desirable
29. Desirabledesirable i i
31. Desirable desirable • Most important web design tool: useful HTMLcredible findable • Learn it. Without valuable Dreamweaver.usable accessible desirable
32. Desirabledesirable i i
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. 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. Usableusable • The first book you should read about web design
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. 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. 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. There’s no one answer• There’s only the right balance
40. How do you make greatweb design happen?•Best Practices•Testing•Process
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. Learning from Amazon 1998
43. Learning from Amazon 1999–2000
44. Learning from Amazon 2001
45. Learning from Amazon 2004–2005
46. Learning from Amazon 2009
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