information architecture: part 2 - spring 2013 - class 2

Information Architecture: Part 2Class #2

Keith Schengili-RobertsCopyright © 2013, The iSchool Institute Information Architecture: Part 2

Instructor

Keith [email protected]

Class #2January 31, 2013


Keith Schengili-RobertsCopyright © 2013, The iSchool Institute Information Architecture: Part 2

How to Make a WireframeWeb Accessibility

Katherine & Scott Procter

Today’s Class

• How to make a wireframe (with in-class exercise*)

• Web accessibility (with in-class exercise*)

* time allowing

Information Architecture: Part 2Keith Schengili-Roberts

Copyright © 2013, The iSchool Institute




Pictures from Last Week’s Class

Keith Schengili-RobertsCopyright © 2013, The iSchool Institute

• Can be found at: www.infoarchcourse.com/gallery.php


Information Architecture: Part 2



Why Wireframe?


• What is it? A visual representation of a website’s layout

• Helps IA to assess a new design’s effectiveness against Best Practices

• Easy to change and refine

• Can determine ahead of time any programming required

• A critical piece of an IA’s argument for change; describe how and why something is an improvement over old design

• Ultimately defines the website that will be built




Image from: ceciliahuster.com/articles/how2WF.htm


Typical Steps in the Wireframe Process


• Start with something simple (such as paper prototypes or a sketched design)

• Move to a rough wireframe prototype, which can be used for further testing

• Tackle your final, polished redesign in code (not a wireframe)

Example from http://uxmag.com/design/where-wireframes-are-concerned





Wireframing Tools for Windows


Following are all Windows applications:• Axure RP and Balsamiq: dedicated

wireframing tools• Visio: Part of Microsoft Office• PowerPoint can also be used• OpenOffice Draw: Part of Open Office,

which is a free download available for all major platforms; highly recommended if you do not have ready access to Visio (www.openoffice.org)

• Any drawing software: MS Paint, Adobe Photoshop, CorelPaint, The GIMP (www.gimp.org)

• Any line-drawing software: Adobe Illustrator, CorelDraw





Non-Windows and Web -Based Applications


• Gliffy.com: Web-based wireframe application

• Pencil 1.2: Open source GUI prototyping tool add-on for Firefox: pencil.evolus.vn/en-US/Home.aspx

• Cacoo.com and MockFlow.com: web-based wireframing apps, designed for collaborative use

• OmniGraffle: a iOS-based tool, available from: www.omnigroup.com/products/omnigraffle/

• Axure is also available for iOS• OpenOffice.org: distributions available for

Linux and Mac as well as for Windows





Most-commonly Used Wireframing Tool: Visio


• For years MS Visio has been the standard wireframing tool of choice

• Large community support, including a myriad of IA “stencils” (i.e. Pre-formed shapes) are available for free downloads; one example: www.nickfinck.com/blog/entry/visio_stencils_for_information_architects/(or more simply: bit.ly/MC8DT)





An Increasingly Popular Tool: Axure


• Built specifically for wireframing and for rapid prototyping• Increasingly being favoured over Visio• Trial version currently available for 30 days





Auto -Wireframing Tool


• Wirify (wirify.com/) Basic version: drag to bookmark bar, click to create a rough wireframe of the page you are looking at





Auto -Wireframing Tool (cont.)


• Can be a good starting point, but Pro version is required to export the result





Templates and Wireframing Resources


• While not strictly necessary for the assignment, there are a myriad of ready-made templates, resources and web browser elements available for many of the most popular programs out there

• A good collection: www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/ (or: bit.ly/9E4Xrb); but in general Google is your friend…





Wireframing Conventions


• Initially, concentrate on functionality rather than visual appeal; that can come later

• Images and image areas are represented by rectangles with an “x” through it (logos excepted)

• Headers ought to indicate header level, visually distinctive over body text

• Body text typically represented using nonsense lorem ipsum text (more on that later)

• Navigation elements rendered (without any drop-down elements)

• Any UI elements (search, calendar, etc.) ought to be recognizable as such

• Use numbered call-outs to indicate areas of interest/focus




Example from: tokyowebdesigns.com/advice/1487/wireframing-your-site-what-why-and-how#.UP1dUyc8B8E


What is Max/Min Size to Develop For?


• Go through your web logs and seek information on the resolution of the browsers hitting your site; 1366x768 has recently surpassed 1024x768 in worldwide popularity; 960px width considered optimal

• Check on the proportion of users hitting your site using mobile devices (look for “iOS” and “Android” being listed as opposed to Win 7 or 8); mobile may end up being more of a priority

• “Adaptive design” (or “responsive design”) is recommended when a high proportion of your audience is using a mobile device to access your site (and you don’t have resources to spend on a separate mobile site); good examples: framelessgrid.com/or 960.gs/




University of Waterloo results: screen resolution sizes of users:uwaterloo.ca/web-advisory-committee/refresh-university-waterloo-common-look-and-feel

hicksdesign.co.uk/ uses an adaptive version of the 960.gs column system


Initial Things to Consider (Desktop)


Page Width

• Determine how wide your site will be. (For the sake of argument, assume 960px for in-class exercise)

Page Fold

• Establish the line below which content will only be visible when a user scrolls down. (For a typical 1024x768 resolution, this is at 578 pixels down)

Page Header (context for wireframe)

• Create a page header that includes the name of the document, the name of the page, version number, and revision date.





Establish the Page Structure


Grouping• How should items on the page be

grouped? Space• How much space should be devoted

to specific content? Placement• Where should content be placed on

the page? The most important content should appear at the top of the page so users don’t need to scroll to see it.





Add Detail to Your Wireframe


Grouping, Space, and Placement• Apply the same question of

grouping, space, and placement to the elements within each area of the page.

Labels and Copy• What words do you use on

buttons? What titles do you use for sections of a page?

Images and Graphics• Block out areas where images or

graphics will appear.





Annotate Your Wireframe


• Add text to call out particular features, such as the “bad” in the “before” design, and the “good” in the new and improved design

• Annotations can also take place on a separate page





Don’t Go Overboard!


• If your wireframe is beginning to look too busy, it probably is

• Keep in mind that wireframes are another type of “blueprint”, distilling what you want to convey

• Strive for clarity and conciseness; detail can come later

• Know when to stop





What to Wireframe: Home Page


Top Level/Home Page

• Location/order of navigation bar(s)

• What do you want people to focus on (and where?)

• Header/Footer elements





What to Wireframe: 2 nd Level


“Typical” Second Level Page

• Provides a more detailed look at a subject via a link from the main page

• 2nd -level navigation elements(?)





What to Wireframe: 3 rd Level


Third Level Page

• “Real” content here (3-click rule)

• Samples from: webops.uwaterloo.ca/Docs/uw_common_look_feel_2005.doc (no longer extant)





What to Wireframe: Other Items


• Other “spot” pages: 404 page, multi-language “splash” page, etc. (not required for assignment)

• Drop-down functions that take up additional space when clicked on or rolled-over by mouse (example from: blog.semanticfoundry.com/2009/01/01/shades-of-gray-wireframes-as-thinking-device/)

• Ad banners are functions, don’t just say “image” if in fact it is an ad that can be clicked

• Don’t forget to add social networking elements (e.g. Facebook or LinkedIn links for example, social tagging entry/display, word clouds, etc) if you think they are suitable





IA Considerations for the Mobile Web



Chief consideration is that the experience (scenario) of mobile-based browsing is very different from a notebook or desktop computer:

• User is usually on the go

• User is seeking specific information, quickly

• Small form-factor

• Bandwidth often limited




Mobile “Fast Facts” from Google



In the US:

• 39% use the Internet on their smartphones while going to the bathroom

• 70% have used their smartphones while shopping in-store

• 88% of people looking for local information have taken action within a day

• 82% of smartphone users notice mobile ads

(from: google.com/events/thinkmobile2012/presentations.html)




Layout is Different



Generally, design for a “portrait” browsing experience rather than typical “landscape” mode used for desktop browsers

Dispense with usual primary navigation at top, with secondary navigation to the left side

(images from: http://mobithinking.com/sites/mobithinking.com/files/dotMobi_Mobile_Usability_Best_Practice.pdf)




Tablet Growth Has Been Huge


From Mary Meeker’s presentation on Internet Trends




Tablet Growth Has Been Huge (cont.)


From Mary Meeker’s presentation on Internet Trends




Apps Becoming More Prevalent than Web Use


From “State of the Appnation: A Year of Change and Growth in U.S. Smartphones” on nielson.com: bit.ly/L5LT14




Windows is No Longer Dominant OS


…in terms of the volume of devices it is shipped with. Desktop is only area where Windows is still dominant (for now) (Graph from Mary Meeker presentation)




Don’t Expect Your Website to Transform Gracefully to the Small Form Factor



It may be viewable, but not usable (links may be too small to properly select, rollover menus won’t work)

Another example derived from: http://www.slideshare.net/kdmcinfo/the-mobile-web-for-mobile-audience




Strip Navigation to the Bare Essentials



One option is to make mobile Web site transactional, and use the top-level screen purely for navigation elements

Images are from: www.slideshare.net/kdmcinfo/the-mobile-web-for-mobile-audience




Consider Making Mobile Web Site Transactional



As one report puts it “keep it simple and clickable”

• Limit choices to the bare necessities

• Clear labels/categories crucial

• Support easy drill-down, clickstream strategy

• Prioritize links (popularity, theme, or activity)

(Compare Bank of America Web site vs. mobile version, from http://mobithinking.com/sites/mobithinking.com/files/dotMobi_Mobile_Usability_Best_Practice.pdf)




IA for Mobile Sites May Need to Be Shallower


• Search for iPad covers on Best Buy mobile site is 5 levels deep

From Mobile Usability, by Jakob Nielsen and Raluca Budiu (2012)





Wireframe the Essentials



Another consideration: orientation. Best Practice is not to fix the orientation to either portrait or landscape, as readers like the flexibility to choose for themselves




Responsive Design


• In cases where designing a separate web site for desktop and mobile use is not possible, a “responsive design” that optimizes the layout of the web page to the screen size of the device reading it

• The Boston Globe uses a single responsive design for their web site






Can Test Designs Easily on Emulators


ipadpeek.com/

iphone4simulator.com/

www.opera.com/developer/tools/mini/





Mobile Site Design Recommendations


• Strip functionality to its core

• Cut content to reduce word count

• Defer secondary information to secondary pages

• Enlarge interface elements to accommodate for “fat fingers”

Derived from Mobile Usability, by Jakob Nielsen and Raluca Budiu (2012)





Comparison Between Mouse and Finger as Input Device







Seven Usability Guidelines for Mobile Web Sites



1. Meet user’s needs quickly

2. Don’t repeat the navigation on every page (breadcrumbs work better)

3. Clearly distinguish selectable items

4. Make user input as simple as possible

5. Only show essential information

6. Place basic browsing control (like “Back”) on the page

7. Design mobile-friendly page layouts

From: http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml

A design which is not mobile-friendly




Mobile Validators Also Available


HRSDC site as checked by W3C mobileOK Checker (validator.w3.org/mobile/)





SmartPhone vs. Tablet (i.e. iPhone vs. iPad)


Context of their use is significantly different:

• Phones are purely mobile, tablets are a mix of “mobile and not mobile”

• Websites designed for a desktop work reasonably well on a tablet

• Tablets are typically shared devices

• Tablets are a preferred method for complex information-finding tasks over phones (such as researching where to go for dinner that evening)

• “I am not in a rush when I use this device.” One user’s response on how he uses his iPad





Creating a “Before” Wireframe in Visio: Step 1


• Launch Visio. Choose “Basic Flowchart”.

• Go to bit.ly/MC8DTand download the “Wireframe Stencil” zip file

• Open the zip file, and drag it onto Visio; Nick Finck’s wireframe shapes appears next to the standard Visio ones (which is now optional)







• Change the page layout from Portrait to Landscape by File > Print Setup > Printer paper: Landscape

• If you need more room, scale up the Page Size







• In your browser, find your target website

• In the browser, hit Alt + PrtScn

• Paste the image into Visio; resize it so that it overlays the white design area (see image)







• Drag Boxes, Headings, Dummy Text, Buttons and Links so that you mock-up the basic outline of the site

• Select the background image, then delete

• Should leave you with something like the image to the right (don't forget the material at the bottom!)





Getting Lorem Ipsum Text


• What is “lorem ipsum”? It is the Latin dummy text which is commonly used to mimic the look of European languages

• Many “generators” are available, though one of the easiest to remember is: www.lipsum.com

• In Nick Finck’s Visio template, the “Text Block” function can also do this







• Annotate! Use the Callout and annotate portions of the design of interest; as long as you keep your comments with the grey margins, it will appear when printed

• Use numbers to indicate areas that receive more detailed commentary elsewhere (and use the same numbering in the “before” and “after” wireframes so it is easy to compare!)







• For distribution purposes, you can save it natively as Visio, print it, and/or Save As Web Page (illustration of latter option to the right)





Sources of Information on Wireframes/Wireframing


• “Visio - the interaction designer's nail gun” www.guuui.com/issues/02_07.php

• Wireframes poster by Dan Brown: www.greenonions.com/portfolio/dbrown_ia2005_wireframes.pdf

• Wireframe Annotations in Visio: www.boxesandarrows.com/view/wireframe_annotations_in_visio_special_deliverable_11

• Many other Wireframe templates/stencils: www.iainstitute.org/tools/

• “35 Excellent Wireframing Resources” www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/





Assignment # 1a


• Create a “Before” and “After” wireframe of Web site of your choosing.

• Should present: home page; second level and third-level page layouts

• Goal is to a) identify existing issues/problems, and b) present a new version which will improve upon the current design

• Can be done as a group assignment

• Format 8-12 written pages (including screenshots)

• When Due: February 14th 2012 (Final class)





Assignment #1b (Optional)


• Create a wireframe that describes a transactional design for a mobile device (either app or website)

• “Before” is existing website (either desktop or mobile), “After” is your redesign

• Should present: home page plus at least one sample transaction to a content page

• Because it is transactional it must be specific – no (or little) lorem ipsum text

• Can also be done as a group assignment


• When Due: February 14th 2012 (Final class)





Web Accessibility






Why Accessibility Matters


•Donna Jodhan, who is blind, could not effectively apply for a Federal government position using their website in 2004; took Gov’t to court

She won her case in Nov 2010 on Charter grounds; Gov’t had until end of 2012 to be fully compliant:

www.slaw.ca/2010/11/29/donna-jodhan-succeeds-in-accessibility-challenge-to-federal-websites/





Chief Critique of Accessibility


“My Web site’s clients are not aimed at those needing accessible Web sites”

• While this may be true at some level, accessibility guidelines still considered good Web design practice

• You may need to think again if you deal with the government as a client





Screen Readers


• For testing purposes it is always good to test your existing site using a screen reader; sample applications:

• JAWS: www.freedomscientific.com/products/fs/jaws-product-page.asp

• Window-Eyes: www.gwmicro.com/Window-Eyes/

• Screenreader: www.screenreader.net/index.php?pageid=2

• ChromeVox: a screenreader plug-in for Chrome browser www.chromevox.com/

• Many good examples of how these and other tools work can be found on YouTube





Web Accessibility Tricks: Skip Links


• Accomplished using CSS, “skip navigation” allows blind or motor-impaired users to access content directly instead of having to wade through all navelements first

• Examples:

• www.jimthatcher.com/skipnav.htm and click Tab key once

• Good “how to” article: webaim.org/techniques/skipnav/

• Technology may be superseding this need though; see an interesting recent survey on its usage at: webaim.org/projects/screenreadersurvey3/#skip





Web Accessibility Tricks: Designing for High Contra st


• Also implemented using CSS, typically turns a colourful Web site to (largely) black and white

Examples:

• Go to: www.jimthatcher.com and click on the white “T” in the black box

• The BBC also has some examples at: www.bbc.co.uk/accessibility/





Web Accessibility Tricks: Changing Font Size


Yet another CSS trick; toggles size of displayed font

An example:

• www.bbc.co.uk/accessibility/

• Another trend which seems to be dying out due to better browser-based support; can often resize using Ctrl + Scroll Wheel

• Note that all three of the previous examples (skip links, high contrast and font sizes) can also be set as custom settings in a user’s browser.





Accessibility: The Legal Responsibilities


Some countries require that commercial Web sites (especially those that do business with government) meet certain accessibility requirements

Ontario: Ontarians with Disabilities Act www.mcss.gov.on.ca/mcss/english/pillars/accessibilityOntario/, but it focuses more on physical accessibility than on Web accessibility per se





Canadian Federal Government Websites


Canada : No federal legal requirements for non-government website, but there is a recommended “Web Standards for the Government of Canada” document from the Treasury Board www.tbs-sct.gc.ca/ws-nw/; came into effect on September 28, 2011 for Federal Government websites.

Based on two documents:

• Standard on Web Usability: www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=24227 (English)

• Federal Identity Program technical specifications: http://www.tbs-sct.gc.ca/fip-pcim/ts-st-eng.asp (English)





Legal Responsibilities for Accessibility in the U.S .


• USA: Americans with Disabilities Act (ADA) comes into play.

• Case of Hooks vs. OKBridge established that Web services must comply with ADA

• Implementation has been taken to heart by levels of government, though private sector has largely been exempt

• Applying the ADA to the Internet: A Web Accessibility Standard: www.icdri.org/CynthiaW/applying_the_ada_to_the_internet.htm





Target.com Case


• In 2006, a case involving Target.com was seen as being a possible milestone case; they were being sued for lack of good “alt” tags by a blind customer, who claimed discrimination against the disabled

• In October 2007, the judge in California hearing the case allowed it to grow into a class action lawsuit after the National Federation of the Blind stepped in

• On August 28, 2008 Target.com settled out-of-court for $6 million• Revamped site has more alt tags

• Will also be more easily navigable using just a keyboard

• California residents who unsuccessfully attempted to use the site could claim $3,500 in damages

• Created and will comply by its own Assistive Technology Guidelines

• A good synopsis of the case: www.w3.org/WAI/bcase/target-case-study





Target.com Case


• Accessibility expert Jim Thatcher was an expert witness for the plaintiffs in this case, and his detailed accessibility analysis can be found at www.jimthatcher.com/target/jwtdeclaration.pdf, which serves as an excellent example of how to do this





Other Countries


Australia : a blind man successfully sued the Sydney Organizing Committee of the Olympic Games (under the Disability Discrimination Act 1992) that they had failed to make their official website adequately accessible to blind users; all government web sites now need to comply with policy outlined in “World Wide Web Access: Disability Discrimination Act Advisory Notes” (humanrights.gov.au/disability_rights/standards/www_3/www_3.html)

Ireland : No court cases, but their 2005 Disability act has been supplemented by the “Code of Practice on Accessible Public Services” which is a guide to all government departments and public bodies on accessibility requirements





Other Countries (cont.)


U.K.: The 2010 Equality Act is thought to apply as websites are considered a “service to the public”, applicable to all web sites

Under the Act, it may be unlawful for a website to:

• Have links that are inaccessible to a screen reader

• Have application forms in a PDF format that cannot be read by a screen reader

• Have core service information (for example, transportation timetables) that is not in a format accessible to screen readers.

• Uses text, colour contrast and formatting that make the website inaccessible to a partially-sighted user

• Change security procedures without considering the impact of blind and partially-sighted customers using screen readers

Adapted from: http://www.rnib.org.uk/professionals/webaccessibility/lawsandstandards/Pages/uk_law.aspx





Web Content Accessibility Guidelines 2.0


• www.w3.org/TR/WCAG20/

• Published as a W3C Recommendation December 11, 2008

• Referenced repeatedly by the “Federal Identity Program Technical Specifications for the Standard on Web Usability” which guides Canadian Federal Government websites on accessibility

• WCAG 2.0 essentially builds upon fundamentals of the original WCGA 1.0 standard





P.O.U.R.


WCAG 2.0 is based on the following “P.O.U.R.” principles:

• Content must be Perceivable .

• Interface components in the content must be Operable .

• Content and controls must be Understandable .

• Content should be Robust enough to work with current and future user agents (including assistive technologies).





A Quick Tour Through WCAG


Start with WCAG 1.0 principles, then on to WCGA 2.0

1. Provide equivalent alternatives to auditory and visual content• Essentially, provide text equivalents for non-text content, by

providing descriptions (using alt, id, title, etc) of pictorial or multimedia elements

• Don’t just say “link picture”, but be descriptive (“link to homepage”) where possible





A Quick Tour Through WCAG (cont.)


2. Don’t rely on colour alone

Ensure that text and graphics are understandable when viewed without colour

Why? • Colour-blind may not be able to distinguish colour-based

information

• When foreground and background colours are close to the same hue, some displays may not be able to produce enough contrast





Colour Blindness


Information derived from www.visibone.com/colorblindInformation Architecture: Part 2




Colour Blindness (cont.)


• Original image on left, same picture with deutan (green blind) palette applied

• Notice in particular how reds are no longer distinguishable

• Up to 8% of men are colour blind to some extent (inherited on X chromosome, so condition is very rare in women)





Distinguishing Colours


• So how many American males out of 14 are colourblind?

Problem is, for those with the most typical form of colourblindness, the graph would look like this:

Examples from: designinstruct.com/web-design/proper-standards-compliant-color-use-in-web-design/





Colour Blindness: One Example


•Want an interactive version that check possible colour issues on your website? Try: www.vischeck.com/





Colour Blindness: Another Example


Deuteranope test on Canadian Tire site using www.vischeck.com

(Canadian Tire uses a form a re-direct which does not work within Vischeck; if that happens with your target site, do a screen capture, save it and upload to Vischeck instead)





Colour Blindness: Questions to Consider


• Do you use blue/yellow and red/green combinations on your web pages?

• When it is important for two colors to be distinguished on your web pages, do you provide supplementary text?

• If you use colors for navigation, do they vary in terms of brightness and saturation as well as hue?

• One simple way to check: how does your page look when displayed in gray scale? Does the result have enough contrast so that you could navigate the site?







3. Use markup and style sheets and do so properly

• In other words, not using markup according to spec – i.e. changing the header type just to change font size, or using table layouts – hinders accessibility







4. Clarify natural language usage

• Use markup that facilitates pronunciation or interpretation of abbreviated or foreign text (i.e. using lang attribute to identify the language being used).

• Natural language markup improves the readability of Web content for everyone, including those with learning disabilities, cognitive disabilities, or people who are deaf.

• Practical example: provide expansions of acronyms







5. Create tables that transform gracefully

• Basically the upshot is: use tables for tabular data only, rather than for layout when possible

• Putting this into practice has not always been easy, but is possible using CSS for columnar layout:

• www.csszengarden.com provides multiple examples of CSS-only based layout

• Many CSS templates now use columnar layout as a default





Table Linearity


• •Screen readers read the content of Web pages as if there were no HTML tags at all. They read everything in the order that it appears in the source markup.

• To a screen/Braille reader, this page will start with the second statement and finished with the first (example from: www.webaim.org/techniques/tables)

• If you have the Opera browser, you can turn off tables completely to see what it does to your existing layout







6. Ensure that pages featuring new technology transform gracefully

• Basically, ensure that your pages are still usable when scripts, applets or other programmatic objects are turned off or not available to the user

• Organize your pages so that they can still be read without style-sheets (CSS)

• Another practical example: poor web page rendering on a mobile browser







7. Ensure user-control of time-sensitive content changes

• In other words, if it moves, blinks, scrolls or auto-updates, ensure that the user can stop them – easier said than done in many cases however (remember the infamous <blink> tag?)

• In many instances, ask yourself whether or not the addition of these types of elements truly enhances the experience of your Web site

• People with photosensitive epilepsy can have seizures triggered by flashing elements ranging from 4 – 55 flashes per second (Hertz) ; PEAT (Photosensitive Epilepsy Analysis Tool) is a free program for testing web content for possible seizure-inducing risk, available from trace.wisc.edu/peat/







8. Ensure direct accessibility of embedded user interfaces

• This one is aimed squarely at Flash and Java applets that contain their own UI. Basically, ensure that your application is navigable/usable for people with accessibility requirements

• Consider that the majority of Flash content is not natively accessible to those using screen readers







9. Design for device-independence

• Essentially, ensure that your Web pages are not locked into using a specific input device

• For example, a form control that requires a mouse to access it renders it unusable for people using keyboard or voice input alone

• Providing text-equivalents for these types of input is a good thing to do





WCAG 2.0 Additions


• Text Alternatives : Provide text alternatives for any non-text content so that it can be changed into other forms people need.

• Time-based Media : Provide alternatives for time-based media.

• Keyboard Accessible : Make all functionality available from a keyboard.

• Enough Time : Provide users enough time to read and use content before an action occurs.

• Input Assistance : Help users avoid and correct mistakes





WCAG 2.0 Additions (cont.)


• Navigable : Provide ways to help users navigate, find content and determine where they are.

• Readable : Make text content readable and understandable.

• Predictable : Make Web pages appear and operate in predictable ways

• Input Assistance : Help users avoid and correct mistakes.





Accessibility and Haptic Devices


• Still experimental are haptic (touch) components added to map interfaces, where the blind can get a touch interface

• Demos: youtube.com/watch?v=1wnBWpeGiWM and money.cnn.com/video/technology/2012/04/19/ts-senseg-screen.fortune/





Accessibility Heuristics


• W3C's “Quick Tips to Make Accessible Web Sites” for WCAG 1.0: w3.org/WAI/quicktips/

• W3C's “WCAG 2 at a Glance”: w3.org/WAI/WCAG20/glance/

• IBM's Web accessibility checklist: www-03.ibm.com/able/guidelines/web/accessweb.html

• Canadian Federal Gov’t: Web Experience Toolkit (WET): github.com/wet-boew/wet-boew





In Class Assignment: Identify Accessibility Issues on Your Target Web Si te


• Assemble into your groups

• Methodically go through top and second- level pages, looking for and identifying any accessibility issues you find





Assignment # 2


• Do a usability/accessibility assessment of a Web site of your choosing

• This should not be an exhaustive critique of every single page on the site; rather, focus on pervasive issues/problems that you find

• Don't forget to include whatever is good from an accessibility standpoint!


• When due: February 21st 2013 (one week after final class)


