Class 02

Week 02 –Topics
W3C Discussion
Accessibility issues
Constraints
User preferences
& Target Audience(s)
Personas
Assignment
: Using moma.org as the client site, sketch a website home page re-design in Photoshop/Illustrator exploring design directions suitable for your three personas. Post your process for this exercise on your WP blog.

Reading for next week:
Analyzing Your Competition (pages 59, 259-276) from Web ReDesign 2.0

Questions to discuss next week (please come prepared):
What are the differences between a Formal and an Informal Industry Analysis?
Name a few of the features you might look for when you are doing a Competitive Analysis.
What are the three main areas for rating when evaluating for a Competitive Analysis?

Reading completed for this week’s discussion:
“Core Design Process” (pages 17-39)) from Web ReDesign 2.0.
“Gathering Information” (pages 40-48) from Web ReDesign 2.0.
“Understanding Your Audience” (pages 49-58) from Web ReDesign 2.0.
W3C.org: Introduction to Web Accessibility: http://www.w3.org/WAI/intro/accessibility.php

Questions to discuss:
Core Design Process
How many phases are part of the Core Process and what are they?
What is “Scope Creep” and how can you prepare for it?
What are the two ways to combat content delay?
What does the “QA” in QA testing stand for?
What do the authors mean when they refer to “Smart Design?”

Gathering Information
What does the word “Discovery” refer to?
Give me a couple examples of “good client” attributes and “red flag client” warning signs.
Please download the Client Survey and Maintenance Survey and come prepared to discuss.

Understanding your Audience
What is an audience profile? What is another name for it?
Name some of the things you need to analyze when determining an audience’s capabilities?
Download the Expanded Tech-Check and be prepared to discuss in class.

Wired Magazine Goes Digital

(Thanks Mehrdad!)

What is W3C?

“The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web (abbreviated WWW or W3). It is arranged as a consortium where member organizations maintain full-time staff for the purpose of working together in the development of standards for the World Wide Web. As of February 2008, the W3C had 434 members.

W3C also engages in education and outreach, develops software and serves as an open forum for discussion about the Web. It was founded and is headed by Sir Tim Berners-Lee.” –Wikipedia

What is Accessibility?

Accessibility is treating everyone, no matter what their ability, the same.

Most discussions of accessibility first talk about disability. This implies that people with a disability deserve special treatment. This isn’t what accessibility is about—it’s actually a symptom of the way people have traditionally built buildings, web sites, and pretty much everything else in fact.

When you build things with the assumption that everyone is the same as you, then they will always be wrong for some other people. People assume accessibility is about helping people with disabilities because retrofitted accessibility is very obvious in our societies. For example, a lot of buildings that started life with only steps have suddenly sprouted cheap ugly ramps. However, accessibility has long been a feature of military design. Why? because it is often critical for survival—at high g-forces jet fighter pilots can’t do the same things they can do on the ground. If aircraft designers didn’t take the needs of pilots in both high and low gravity environments into account then there would be a lot more plane crashes.

So, what does this mean for web site developers? The short answer is that you need to try to be more aware of the needs of the entire audience that might look at your site. A longer answer might require you to learn a little about the differing levels of ability people can have, and how they use computers. Your web sites should be usable by people whether they:

  • Are blind or severely visually impaired, and listen to web sites using a screen reader, or feel them on a braille display.
  • Are shortsighted, and blow them up to 200% font size.
  • Have motor disabilities so can’t use their hands to manipulate a mouse, and therefore use a pointing stick to manipulate the keyboard, or an eye pointer to manipulate the web site.
  • Use trackballs, or other more unusual types of computer control system.
Why is Accessibility important?

Accessibility is important for one big reason and a whole lot of little ones. The main one is that we are all different and yet we all have an equal right to use web sites, but there are lots of other reasons why you should make accessibility considerations a part of how you build web sites:

  • In some countries it’s the law.
  • You don’t want to exclude any potential customers/visitors from using your site.
  • Accessible sites tend to rank higher on search engines.
  • You are demonstrating good ethics—something that customers will value.
  • Once you build web sites with web standards it hardly requires any extra effort to make it accessible, which gives so many benefits; there is also a lot of crossover between sites being more accessible, and sites being more compatible with mobile phone browsers—another circumstance that makes web site harder to use, although for different reasons. In fact, some work has been done on analysing the relationship between web accessibility and mobile web development best practices—see the WAI “Web Content Accessibility and Mobile Web” page for more.
  • Techniques that help people with disabilities benefit all users.
Designing with Accessibility in mind

The key to accessibility is thinking about a problem and knowing you are going to solve it for more than one kind of user. If you try to treat accessibility like something you can bolt on at the end then you will get a nasty-bolted-on-at-the-end thing. It’ll take longer, won’t work as well and look damned ugly.

The best way to achieve a well-engineered solution is to design with all the requirements in mind from the start. This doesn’t mean you shouldn’t change your plan or add some things you missed, but you should try to be aware of what the complete problem you are trying to design for is. In the case of web sites this means creating a solution usable by all your users including those who may not be able to use a mouse, or a keyboard, or a monitor, etc.

Features of an accessible web page
Semantic structure

One of the foundations of web standards is the use of semantic structure in HTML. Semantic structure is also extremely important for accessibility. This is because it provides the framework for the information on the page. When people can’t see the visual style of the page, the semantic structure helps to indicate a number of things to them. It can indicate their position in the hierarchy of the document and the ways they can interact with the different elements of the page, as well as providing emphasis to textual content in the right places.

A good example of how the semantic stucture of a document is important to accessibility is navigation. A well structured navigation menu is a list of items. You can mark this up as an HTML list:

<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>

By having navigation menus structured as lists it is easy to let someone using a screen reader, who can’t see the list, know it’s a list. This is because their screen reader tells them it’s a list. If you don’t use list markup then the screen reader has no way of knowing it’s a list and telling the user.

Alternative content

As mentioned in the section about search engines, ensuring that there is an accessible alternative to content and navigation is essential. Text is considered the universal currency of content with one caveat, as you’ll see below. Text can be easily read aloud by a screen reader, made bigger or smaller, have its contrast easily altered and many other transformations. It’s because it is so easy to manipulate text that more exotic forms of content should have a text-based alternative to them. Some formats, like the newer versions of Flash, have text access built into them so that the textual content within them can be accessed directly without needing to provide an alternative for the whole medium.

How should you implement text alternatives on your site? The first step is to identify things that aren’t already text. In HTML there are only so many things that aren’t already text. Images are the most obvious ones. Here is an example of an accessible use of an image:

<p>An interesting piece of art is Michelangelo’s “God creates Adam”
<img src="images/adam.jpg" alt="A painting of a man reaching up to touch God’s hand
reaching down. It is cracked with age." longdesc="adam.html">.</p>

The image in this example is an integral part of the content. The alt attribute contains a short description of the image for people (or search engines) that might not be able to see the image correctly. The longdesc attribute allows you to link to an HTML page containing a full description of the image. This is generally only used to describe complex images that are used as central content. It also suffer from poor support in browsers. Most of the time you will only use the alt attribute.

When images are used for things other than content, such as navigation, or purely visual decoration you should treat them differently from content images. Images used to make buttons or page navigation look more attractive should have an alt attribute that matches the text in the image. The alt attribute simply functions as an easy way to allow the computer to read the text contained in the image (and hence read it to the user of a screen reader).

In the case of purely decorative images, images used for tracking adverts, or any other image that a user wouldn’t be expected to be interested in or interact with, you should set the alt attribute to be empty. This does not mean omitting the attribute but setting alt=””. This is because of a tactic screen readers have used to help their users cope with very inaccessible pages. When an image doesn’t have an alt attribute, especially when it’s part of a link, the screen reader reads the URL of the image to the user. This is so they can guess what the image is from the URL, for example if the image is named something like add_to_cart.gif. Therefore, you should set alt=”” on images that you know the user won’t be interested in, so that screenreaders won’t read out every image’s URL, which could be rather frustrating for the screen reader user.

Not all forms of content are as simple as an image. More complex media like Flash (Flash files can be whole web sites in themselves) or movies require more complex descriptions. The most recent versions of Flash allow you to provide text alternatives for the items within the Flash movie, just like in HTML.

Standards for Accessibility
Web Content Accessibility Guidelines 2.0

Since publishing WCAG 1.0, the W3C has been working on WCAG 2.0. This updated version of the standard is still in draft at the time of writing. Subject to the process of the W3C it will probably be a published standard by early 2009.

WCAG 2.0 is slightly different in it attempts to be more technology-agnostic than WCAG 1.0, ie it could be applied to HTML, CSS, Flash, etc. WCAG 2.0 is based on 4 principles for accessibility. These are:

Perceivable
People can access the content through a medium available to them. For example people who can’t see should be able to hear the content
Operable
People can interact with the web application or content.
Understandable
The content and user interface is understood by the people who are using it.
Robust
Any solution provided should be using widely available on different platforms or systems. This is to stop people inventing solutions that the majority of people wouldn’t be able to use because the hardware/software is restricted or prohibitively expensive.

It’s important to note that web sites aren’t expected to fulfill all of these requirements. The technology a user has should do some of the work too. For example it is expected that a screen reader will read pages to people who need it, rather than every web site providing an audio version of the content. However, the web site is expected to provide pages that can be read using common screen reading technology in order to make this possible. This difference is important, as it’s the difference between a web site with an “accessibility widgets” (like a button to make the fonts a bit bigger) and a web page that will work in a multitude of different situations (eg varying browsers and devices that would be impossible to anticipate).

Above material from The Web Standards Curriculum. This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.


Defining Problems & Constraints

Projects generally begin for one of two reasons:

  1. Something is broken
  2. Something doesn’t exist

Unless the problem is simple and narrowly defined (for instance, users can’t find the Submit button at the end of the form), designers shouldn’t take any problem at face value. Often what what seems at first glance to be really simple, really isn’t (and, rarely, vice versa).

“Wicked problem” is a phrase used in social planning to describe a problem that is difficult or impossible to solve because of incomplete, contradictory, and changing requirements that are often difficult to recognize. Moreover, because of complex interdependencies, the effort to solve one aspect of a wicked problem may reveal or create other problems.

Considerations
  • Wicked problems aren’t fully understood
  • They have fuzzy boundaries
  • They have lots of people (stakeholders) with a say in them
  • They have lots of constraints
  • They have no clear solutions
Information gathering to determine the problem

Stakeholder (Client) interviews: The Client Survey
Design (Communication) Brief: Communication Brief Worksheet

See Web ReDesign 2.0 website for more information.


What is the Core Design Process?
Web ReDesign: Strategies for Success with: Kelly Goto
lynda.com

Core Process Overview
Three Way of Understanding your Audience


Personas (Audience Profiles)

“A persona is a documented set of archetypal people who are involved with a product or a service. Personas turn “the users” into identifiable human beings…Personas are typically amalgams of multiple people who share similar goals, motivations, and behaviors.”

Designers should devise personas from observing and talking to users.

Personas by themselves are useless. They become useful when the designer sets up scenarios and uses the personas to test features for appropriateness and utility:

  • Would this persona do this task?
  • Could this persona do this task as it is designed?

Three personas to use for assignment:

Heather Adams
Theresa Lowell
George Vance



Comments

Sorry, but comments are currently closed.

About Author

jamie

Instructor for Graphic Design 67