IT Solutions Blog

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.

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

Graphics can be of great benefit to the accessibility of a Web page by providing

• Illustrations
• Icons
• Animations
• other visual cues that aid comprehension for sighted individuals

When designing for people with disabilities too often we forget that we are not designing only for the blind. We must consider disabilities of all types. Graphics can be useful especially to individuals with certain reading disabilities, learning disabilities, attention deficit disorders, or cognitive disabilities.

Basic Rules

• Do not use color alone to convey meaning
• Choose contrast so that text is easily distinguishable from the background
• Communicate the purpose of the graphic (not its appearance) through meaningful alternative text
• When graphics require complex descriptions use the longdesc attribute, a link to an alternative page, a description in the context itself, or a “D” link
• Use empty alt text for decorative, transparent, spacer, and redundant images
• Try to limit the amount of text in graphics
• Do not use effects that flicker or produce a strobe-like effect
• Use images as backgrounds only if they do not convey important content (since it is impossible to add alt text to background images)

Best Practices

Level 1

Level 1 Checkpoints – Section 508 Compliancy Standards

Description	W3C	508	Example
Ensure that all information conveyed with color is also available without color	2.1	c	Ensure that information is available through other style effects (e.g., a font effect), through context (e.g,. comprehensive text links) or through mark-up (e.g., the title attribute).
Until user agents allow users to control flickering, avoid causing the screen to flicker	7.1	j	n/a
Provide text equivalent for Images, graphical or animated buttons, spacers, bullets	1.1	a	<FORM action=”…” method=”post”>   <INPUT type=”button” alt=”Click this button to verify form” value=”Verify” onclick=”verify()”>   <INPUT type=”image” name=”submit” src=”button.gif” alt=”Submit form”> </FORM>

Level 2

Level 2 Checkpoints – Section 508 Compliancy Standards

Description	W3C	508	Example
Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen	2.2	c	For more information check the online paper about Effective Color Contrast.
When an appropriate markup language exists, use markup rather than images to convey information	3.1	n/a	Mark up complex equations with e.g. MathML.
Avoid causing content to blink	7.2	n/a	n/a
Avoid movement in pages	7.3	n/a	i.e., hide/show content or change presentation (movement and colors).

Level 3

Level 3 Checkpoints – Section 508 Compliancy Standards

Description	W3C	508	Example
Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page	14.2	n/a	n/a

References

• Arditi, Aries PhD. Effective Color Contrast. http://www.lighthouse.org/color_contrast.htm
• Ion, P., Miner, R. (editors); Mathematical Markup Language. http://www.w3.org/TR/REC-MathML/
• WebAIM; Creating Accessible Images. http://webaim.org/techniques/images/

People rarely read Web pages, they scan the page! As a result, Web pages have to follow Design Guidelines for Content that enable them to quickly identify headings, titles, links and other important elements to orient themselves. What else has to be done to be Section 508 compliant?

Basic Rules

• Don’t rely on color alone
• Identify the language used throughout the document and identify changes
• Use correct markup to emphasize important content
• Be clear and precise in the choice of wording and language

Best Practices

Level 1

Level 1 Checkpoints – Section 508 Compliancy Standards

Checkpoint	Description	W3C	508	Example
Color	Ensure that all information conveyed with color is also available without color	2.1	(c)	Ensure that information is available through other style effects (e.g., a font effect), through context (e.g,. comprehensive text links) or through mark-up (e.g., the title attribute).
Language	Clearly identify changes in the natural language of a document’s text and any text equivalents	4.1	n/a	And with a certain <SPAN lang=”fr”>je ne sais quoi</SPAN>, she entered both the room, and his life, forever. <Q>My name is Natasha,</Q> she said. <Q lang=”it”>Piacere,</Q> he replied in impeccable Italian, locking the door.
Language	Use the clearest and simplest language appropriate for a site’s content	14.1	n/a	n/a

Level 2

Level 2 Checkpoints – Section 508 Compliancy Standards

Checkpoint	Description	W3C	508	Example
Blinking	Avoid causing content to blink	7.2	n/a	n/a
Movement	Avoid movement in pages	7.3	n/a	i.e., hide/show content or change presentation (movement and colors).

Level 3

Level 3 Checkpoints – Section 508 Compliancy Standards

Checkpoint	Description	W3C	508	Example
Text	Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen	2.2	(c)	For more information check the online paper about “Effective Color Contrast” at lighthouse.org (http://www.lighthouse.org/accessibility/effective-color-contrast/).
Abbreviations	Specify the expansion of each abbreviation in a document where it first occurs	4.2	n/a	<ABBR title=”social security number”>SS#</ABBR> or ASCII art:<ABBR title=”smiley in ASCII art”>:-)</ABBR>
Acronyms	Specify the expansion of each acronym in a document where it first occurs	4.2	n/a	Welcome to the <ACRONYM title=”World Wide Web”>WWW</ACRONYM>
Language	Identify the primary natural language of a document	4.3	n/a	<HTML lang=”en”>

Templates

<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<ABBR title="social security number">SS#</ABBR>

<ACRONYM title="Geographical Information System">GIS</ACRONYM>

References

• ISO 639.2 Registration Authority (2004, 10). Codes for the Representation of Names of Languages. http://www.loc.gov/standards/iso639-2/englangn.html
• Aries Arditi, PhD. Effective Color Contrast. http://www.lighthouse.org/accessibility/effective-color-contrast/