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

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.

www.webstyleguide.com

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

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

www.webstyleguide.com

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 DiagramHomepageWhat 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 eventsPublic meetingsGrants

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.

www.webstyleguide.com

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 & WireframesDevelop a consistent, logical page grid for all screens that accommodates the navigation, text, and images

Organize layout with CSScascading style sheets

www.webstyleguide.com

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: NavigationInformation 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 navigationhttp://www.users.muohio.edu/simmonwm/sw

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 pagehttp://www.users.muohio.edu/sw

AccessibilityMake 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

AccessibilityMake 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

Enabling Technical Literacies with Frequently Asked Questionshttp://www.users.muohio.edu/lankarp/FAQ.html

Helping Users Engage with & Use Websites

Enabling Productive Inquiry http://www.users.muohio.edu/callancl/educate.html

Creating Emotional Connection to Encourage Actionhttp://www.users.muohio.edu/buchneal/watershedWebsite/HuestonWoodsQuiz.htm

Enabling exploration http://www.users.muohio.edu/callancl/educate.html

Helping Users Engage with & Use Websites

Incorporating Useful Interactivity to encourage knowledge buildinghttp://youtu.be/UwRKEV3jlh8

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