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

1. D iscuss the website’s purpose and audience with the client 2. 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 3. Critique each website as a team to determine what seems successful Planning

4.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 5.Based on your website critique and focus group, make a list of criteria that you believe your website should include

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

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.

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

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. Site Architecture

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.

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

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

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)

Page Design & Wireframes Develop a consistent, logical page grid for all screens that accommodates the navigation, text, and images Organize layout with CSS cascading style sheets

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

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

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 

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   Web site should contain a site map that shows a list of all pages within the site and links to each page 

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 website  Use alt tags for all images to comply with Americans Disability Act and allow text only browsers to “read” images

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) 

Enabling Technical Literacies with Frequently Asked Questions Helping Users Engage with & Use Websites Enabling Productive Inquiry Creating Emotional Connection to Encourage Action

Enabling exploration Helping Users Engage with & Use Websites Incorporating Useful Interactivity to encourage knowledge building

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

5.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 5.Use this feedback to revise the site to be appropriate for the targeted audience Usability