Developing Effective Civic Websites

1. Developing Effective Civic Websites An effective website balances what the client wants, what users need, and what constitutes good design by considering: Planning Site architecture Page design Accessibility Usability

2. Planning • Discuss the website’s purpose and audience with the client • Identify 8-10 existing websites that have the same purpose to see a range of ideas—list the page grid, site features, & link names of each • Critique each website as a team to determine what seems successful

3. Planning • Conduct focus group using a few of the best websites to get an understanding of what users need and want in regards to content and design • Based on your website critique and focus group, make a list of criteria that you believe your website should include

4. Site Architecture • Based on your audience and purpose determine the appropriate organizational framework • Sequences • Webs • Hierarchies

5. Site Architecture Sequences are appropriate for training or tutorials where it is necessary for users to view information in a particular order Links on each page are limited to next chronological info and supporting info. www.webstyleguide.com

6. Site Architecture Hierarchies are familiar to most people and are often the best way to organize complex information Links are organized by categories from homepage www.webstyleguide.com

7. Site Architecture Web architecture takes advantage of the online capability to allow users to follow their own interests and determine their own path. All pages are linked to all other pages. www.webstyleguide.com

8. Site Architecture: Site Diagram • Sketch an organizational diagram of the website • divide information into pages and determining the relationship of each page to the other pages • base link names on content of each page • pay special attention to link/page names—be certain it is terminology that users will understand.

9. Site Architecture: Site Diagram Homepage What is sw?Why important?How you can help? Disposal & Pollution Preventionoverview Permits & Regsoverview Community Involvement Community events Public meetings Grants Educational Materialsovervieweducational material for teachers Educational materials for children Links & Resourceshow to report a problem Site map Business Overview Resources Waste reduction Workplace practices Construction BMP resources Compliance Sediment control Residential Recycling Household waste Home repair

10. Site Architecture: Site Map Avoid including so many links from the homepage that users are overwhelmed with options. www.webstyleguide.com Avoid including so few links from homepage that users must guess where their desired info might be found.

11. Page Design Revisit web critiques of existing sites to develop ideas for the page design Designate a 700 x 410 page(for viewing on the smallest screen size in common use and printing)

12. Page Design & Wireframes Develop a consistent, logical page grid for all screens that accommodates the navigation, text, and images Organize layout with CSScascading style sheets www.webstyleguide.com

13. Page Design • People read differently online than in print—the low resolution of screens causes the eye to tire more quickly, so… • Develop a page grid that limits text lines to 2/3 of page • “Chunk” text into small blocks where like information is together • Use a san serif font such a Verdana for easier reading

14. Page Design Incorporating four design principles into your website will help organize the information and make the site visually appealing: Contrast Repetition Alignment Proximity

15. Accessibility: Navigation • Information on websites is “chunked” into shorter fragments and linked across multiple pages. As a result, users assemble and make sense of information based on the navigation you provide • Navigation should always be in same location on each page and all links viewable without scrolling • Complex sites may require overall navigation and page specific navigation • http://www.users.muohio.edu/simmonwm/sw

16. Accessibility: Navigation • Link names should be intuitive—that is users should be able to determine what information will be found by following the link • Navigation should be a seamless part of website—avoid huge buttons • http://www.lawcoswm.org • Web site should contain a site map that shows a list of all pages within the site and links to each page • http://www.users.muohio.edu/sw

17. Accessibility • Make your website easy for users to find and see: • Use Keyword and Description Meta Tags that help users find your page even if they don’t know exact title of websitehttp://www.lawcoswm.org/ • Use alt tags for all images to comply with Americans Disability Act and allow text only browsers to “read” images

18. Accessibility • Make your website easy for users to find and see: • Avoid frames and spry bars which can make bookmarking and printing specific pages difficult • Include interactivity when it helps users find and use info (e.g.,clickable maps) • http://www.oeq.net/recycle.aspx

19. Helping Users Engage with & Use Websites Enabling Technical Literacies with Frequently Asked Questions http://www.users.muohio.edu/lankarp/FAQ.html Enabling Productive Inquiry http://www.users.muohio.edu/callancl/educate.html Creating Emotional Connection to Encourage Action http://www.users.muohio.edu/buchneal/watershedWebsite/HuestonWoodsQuiz.htm

20. Helping Users Engage with & Use Websites Enabling exploration http://www.users.muohio.edu/callancl/educate.html Incorporating Useful Interactivity to encourage knowledge building http://youtu.be/UwRKEV3jlh8

21. Usability • Make a list of questions you have about how individuals might use the site • Determine what tasks you might ask users to perform to answer these questions • Identify a range of individuals affected by the website and invite them to be part of usability tests (often clients can help identify stakeholders) • Observe each participant performing the tasks and using the site

22. Usability • Ask participants questions such as:what they liked and disliked about the site,what helped them find information, what problems they encountered, what additional info they would like to see, what info seemed out of place • Use this feedback to revise the site to be appropriate for the targeted audience