Upload
noah-rosario
View
33
Download
2
Tags:
Embed Size (px)
DESCRIPTION
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. Planning. - PowerPoint PPT Presentation
Citation preview
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