Michael Gaigg: Über UI/UX Design

31Mar0

Steps to improve User Experience for Government

Posted by Michael Gaigg

In my daily work I'm constantly confronted with developments for government sites. Often I hear confusion in what needs to be achieved, who needs to be served and especially why it should matter.

Become creative to engage citizens in governmental issues (using the citizen’s language), e.g. upload a photo of the damaged street (http://www.fixmystreet.com/)

Become creative to engage citizens in governmental issues (using the citizen’s language), e.g. upload a photo of the damaged street (http://www.fixmystreet.com/)

Listening into a Webcast by Human Factors International (download white paper on Designing the e-government experience through citizen-centered usability, March 2008) gave me additional insights that I want to summarize and present here:

Goals of eGovernment

The web offers governmental sites the potential for increased operational efficiency and cost reductions while improving access to information and services for their citizens.

Levels of interaction between these two actors (government & citizens) include:

  • Connect citizens with legislative offices
  • Communicate faster and more targeted
  • Leverage access to public services (enhanced productivity with reduced effort)

Steps to improve eGovernment

Traditionally the government has three main functions:

  1. Report
  2. Transact
  3. Interact

What can be done to improve these functions/processes?

Get it out there

  • What information is interesting?
  • What is already available?

Make it useful & usable

  • Pre-digest the information (e.g. into charts, comparisons, …)
  • Understand the citizen’s needs (e.g. Spanish language, search, text size, …)
  • Assist citizen’s in finding the information (sometimes they don’t know it exists)
  • Avoid: limited business focus, internal focus, lack of shared resource

Provide self-service

  • Assist citizens to walk through business logic (avoid unnecessary pages, forms, fields, …)

Track improvement

  • Establish a baseline (best practices review, scorecard, usability testing success rates, web analytics, call center volume, server logs, …)
  • Validate improvements (success rate, task time) & seek for support within your organization for doing this
  • Continuously track usage
  • Why? Avoid falling back in national ranking, reduce costs for service calls, …

Make it engaging

  • “Will? Can?” Will citizens use the service? Can they find it?
  • Make it exciting
  • Use experiences or technologies that are current and up to date (videos, gadgets, …)

Embrace the future

  • Become creative to engage citizens in governmental issues (using the citizen’s language), e.g. upload a photo of the damaged street (http://www.fixmystreet.com/)
  • Encourage citizens to interact through social tools

Erase boundaries

  • Integration of “Report”, “Transact” and “Interact” means to remove the disparity between organizational structures of governments and the mental models of the citizens
  • Understand and channel the motivation of citizens to use online services
  • Integrate offers from multiple agencies into one comprehensible user experience

Start a movement

  • Create a community by involving State & Agency Leadership, Agency CIO’s and Webmasters
  • Recognition and adoption are key aspects
  • Embrace the chaos
  • Provide useful & usable tools
  • Reward contributions & demonstrate progress
  • View webmasters as a partner, not as recipient

Transparency

  • The user’s perspective of the organization and the actual organizational structures are mostly very different. Citizens should not need to know how an agency is organized or be familiar with its terminology.
  • Focus on the citizen means to understand how they look for information!
  • Integrate internal processes into one intelligent solution (iGov = integrated Government)
  • Understanding the level of literacy is key to success. Easy language assists citizens in filling out bureaucratic forms.

Government must view itself as a business

  • Attract and satisfy citizens. Beware of competition and consider concepts like ‘brand loyalty’. Effective interaction adds benefits to citizens.
  • Convert visitors into customers meaning that citizens become active online users of the services.
  • Broaden the focus onto international audience which is important to attract entrepreneurship and investment capital and is a good indicator of a strong technology market and research and development environment.

Assistance through technology, tools and continuous improvement

  • Support CIO’s and webmasters through tools like design templates, standards, guidelines and an effective means of governance.
  • Adjust technology to changing market conditions, population demographics and the user’s level of expectations.
  • Create a culture and long-term commitment (=institutionalization) of usability within the agency!
  • Establish a baseline of improvement and continuously validate and improve through benchmarks.

Your thoughts?

I'd like to hear your feedback and if you have applied one or many of above techniques in your agency and what your experiences were.

References

  • Straub, K., Gerrol, S.; Designing the e-government experience through citizen-centered usability; Human Factors International, Inc.; White paper; March 6, 2008
1Nov0

Understand Web Content Accessibility Guidelines & Section 508

Posted by Michael Gaigg

So you know what Accessibility is and how it improves your ROI and why everybody benefits. Now what exactly is Section 508 and how does it correlate with W3C's Web Content Accessibility Guidelines (WCAG 1.0)? And most important, how can you create an accessible.htm that complies with these standards?

Overview: WCAG & Section 508

Section 508 and Web Content Accessibility Guidelines

The main institutions involved (as shown in the illustration above) are:

  • GSA (U.S. General Services Administration) represented by the IT Accessibility and Workforce (ITAW) who is the governments principal advocate and coordinator for Section 508 implementation. Other agencies and organizations may offer similar information, but ITAW is recognized as the governmentwide policy resource for Section 508.
  • World Wide Web Consortium (W3C) represented by the Web Accessibility Initiative (WAI) who developed the Web Content Accessibility Guidelines 1.0 that was approved in May 1999 and is currently the stable and referenceable version.
  • Users that visit websites. In the illustration I mention Government websites as the institution with the biggest need, that is because the Accessibility Guidelines are mandatory for governmental implementations.

Before I continue to explain how the WCAG relate to the Section 508 Standards it is important to get a grasp of what the respective guidelines propose and which checkpoints are included.

Checkpoints: Section 508 Standards

The purpose of Section 508 Standards is explained by Authority 29 U.S.C. 794d: “The purpose of this part is to implement section 508 of the Rehabilitation Act of 1973, as amended (29 U.S.C. 794d). Section 508 requires that when Federal agencies develop, procure, maintain, or use electronic and information technology, Federal employees with disabilities have access to and use of information and data that is comparable to the access and use by Federal employees who are not individuals with disabilities, unless an undue burden would be imposed on the agency. Section 508 also requires that individuals with disabilities, who are members of the public seeking information or services from a Federal agency, have access to and use of information and data that is comparable to that provided to the public who are not individuals with disabilities, unless an undue burden would be imposed on the agency.”

Section 508 Standards [SECTION508-STANDARDS]
Checkpoint Description 508
Non-text elements A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). (a)
Multimedia presentation Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. (b)
Color Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. (c)
Style Sheets Documents shall be organized so they are readable without requiring an associated style sheet. (d)
Server-side image maps Redundant text links shall be provided for each active region of a server-side image map. (e)
Client-side image maps Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. (f)
Data tables Row and column headers shall be identified for data tables. (g)
Markup & tables Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. (h)
Frames Frames shall be titled with text that facilitates frame identification and navigation. (i)
Flickering Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. (j)
Text-only page A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. (k)
Scripting languages When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. (l)
Applets, plug-ins or other applications When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l). (m)
Electronic forms When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. (n)
Navigation links A method shall be provided that permits users to skip repetitive navigation links. (o)
Timed response When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. (p)

Checkpoints: Web Content Accessibility Guidelines

The guidelines as described by the W3C explain how to make Web content accessible to people with disabilities. “The guidelines are intended for all Web content developers (page authors and site designers) and for developers of authoring tools. The primary goal of these guidelines is to promote accessibility. However, following them will also make Web content more available to all users, whatever user agent they are using (e.g., desktop browser, voice browser, mobile phone, automobile-based personal computer, etc.) or constraints they may be operating under (e.g., noisy surroundings, under- or over-illuminated rooms, in a hands-free environment, etc.). Following these guidelines will also help people find information on the Web more quickly. These guidelines do not discourage content developers from using images, video, etc., but rather explain how to make multimedia content more accessible to a wide audience.”

Web Content Accessibility Guidelines [WCAG10]
# Description
01. Provide equivalent alternatives to auditory and visual content.
02. Don't rely on color alone.
03. Use markup and style sheets and do so properly.
04. Clarify natural language usage.
05. Create tables that transform gracefully.
06. Ensure that pages featuring new technologies transform gracefully.
07. Ensure user control of time-sensitive content changes.
08. Ensure direct accessibility of embedded user interfaces.
09. Design for device-independence.
10. Use interim solutions.
11. Use W3C technologies and guidelines.
12. Provide context and orientation information.
13. Provide clear navigation mechanisms.
14. Ensure that documents are clear and simple.

Considerations when implementing for Section 508 Compliancy

Section 508 has three Levels of priority: Level 1, Level 2 and Level 3. WCAG has also three levels of priority, but they are slightly different and named A, AA, AAA. This is an important distinction especially when testing with automated tools like Bobby because - and be aware of this - Level A compliancy NOT EQUALS Level 1 compliancy. Here is why:
When the ITAW handed Paragraph 1194.22 to the WAI (step 1) and after the WCAG 1.0 were completed and handed back to the ITAW (step 2) the Access Board released a Note to §1194.22:

  1. The Board interprets paragraphs (a) through (k) of this section as consistent with the following priority 1 Checkpoints of the Web Content Accessibility Guidelines 1.0 (WCAG 1.0) (May 5, 1999) published by the Web Accessibility Initiative of the World Wide Web Consortium:
    Section 1194.22 Paragraph WCAG 1.0 Checkpoint
    (a) 1.1
    (b) 1.4
    (c) 2.1
    (d) 6.1
    (e) 1.2
    (f) 9.1
    (g) 5.1
    (h) 5.2
    (i) 12.1
    (j) 7.1
    (k) 11.4
  2. Paragraphs (l), (m), (n), (o), and (p) of this section are different from WCAG 1.0. Web pages that conform to WCAG 1.0, level A (i.e., all priority 1 checkpoints) must also meet paragraphs (l), (m), (n), (o), and (p) of this section to comply with this section.

Item 2 is especially important because it means that a discrepancy between WCAG and Section 508 exists that requires a Section 508 Level 1 conformant site has to meet more than just Level A of the WCAG.

Step 3 and step 4 complete the process to create accessible.htm - it is basically up to you to apply the guidelines and produce accessible code.

Best Practices for Accessiblity

Follow my Best Practices blog entries to get more in-depth knowledge on what exactly you need to do to meet all the Section 508 compliancy checkpoints as outlined by the WCAG. Blog entries available so far:

References