• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Information Architecture: Part 2 - Spring 2013 - Class 2
 

Information Architecture: Part 2 - Spring 2013 - Class 2

on

  • 4,244 views

Slidedeck for the second class on Information Architecture: Part 2. This one examines the basics of how to create a set of wireframes and accessibility requirements for the Web.

Slidedeck for the second class on Information Architecture: Part 2. This one examines the basics of how to create a set of wireframes and accessibility requirements for the Web.

Statistics

Views

Total Views
4,244
Views on SlideShare
4,236
Embed Views
8

Actions

Likes
1
Downloads
15
Comments
0

1 Embed 8

http://www.linkedin.com 8

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Information Architecture: Part 2 - Spring 2013 - Class 2 Information Architecture: Part 2 - Spring 2013 - Class 2 Presentation Transcript

    • Information Architecture: Part 2 Class #2 Keith Schengili-Roberts Copyright © 2013, The iSchool Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Instructor Keith Schengili-Roberts keith.schengili-roberts@utoronto.ca Class #2 January 31, 2013 Keith Schengili-Roberts Copyright © 2013, The iSchool Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Today’s Class • How to make a wireframe (with in-class exercise*) • Web accessibility (with in-class exercise*) * time allowing Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Pictures from Last Week’s Class• Can be found at: www.infoarchcourse.com/gallery.php Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Image from: ceciliahuster.com/articles/how2WF.htm• Ultimately defines the website that will be built Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Wireframing Tools for WindowsFollowing 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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/omnigraffl e/• Axure is also available for iOS• OpenOffice.org: distributions available for Linux and Mac as well as for Windows Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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_s tencils_for_information_architects/ (or more simply: bit.ly/MC8DT) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #4 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #4 Web Accessibility Auto-Wireframing Tool (cont.)• Can be a good starting point, but Pro version is required to export the result Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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/2 010/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… Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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.) Example from: tokyowebdesigns.com/advice/1487/wireframing-your-site-what- why-and-how#.UP1dUyc8B8E ought to be recognizable as such• Use numbered call-outs to indicate areas of interest/focus Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 University of Waterloo results: screen resolution sizes of users: uwaterloo.ca/web-advisory-committee/refresh-university-waterloo- common-look-and-feel 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/ hicksdesign.co.uk/ uses an adaptive version of the 960.gs column system or 960.gs/ Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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. Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Establish the Page StructureGrouping• 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. Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Add Detail to Your WireframeGrouping, 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. Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility What to Wireframe: Home PageTop Level/Home Page• Location/order of navigation bar(s)• What do you want people to focus on (and where?)• Header/Footer elements Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility What to Wireframe: 2nd Level“Typical” Second Level Page• Provides a more detailed look at a subject via a link from the main page• 2nd -level navigation elements(?) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility What to Wireframe: 3rd LevelThird Level Page• “Real” content here (3- click rule)• Samples from: webops.uwaterloo.ca/Docs/u w_common_look_feel_2005.d oc (no longer extant) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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/0 1/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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility IA Considerations for the Mobile WebChief 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Mobile “Fast Facts” from GoogleIn 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) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Layout is DifferentGenerally, design for a “portrait” browsing experience rather than typical “landscape” mode used for desktop browsersDispense with usual primary navigation at top, with secondary navigation to the left side(images from: http://mobithinking.com/sit es/mobithinking.com/files/d otMobi_Mobile_Usability_ Best_Practice.pdf) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Tablet Growth Has Been HugeFrom Mary Meeker’s presentation on Internet Trends Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Tablet Growth Has Been Huge (cont.)From Mary Meeker’s presentation on Internet Trends Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Apps Becoming More Prevalent than Web UseFrom “State of the Appnation: A Year of Change and Growth in U.S. Smartphones” on nielson.com: bit.ly/L5LT14 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Don’t Expect Your Website to Transform Gracefully to the Small Form FactorIt 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Strip Navigation to the Bare EssentialsOne option is to make mobile Web site transactional, and use the top-level screen purely for navigation elementsImages are from: www.slideshare.net/kdmcinfo/the-mobile-web-for-mobile-audience Keith Schengili-Roberts Copyright © 2013, The Scott Institute Katherine &iSchoolProcter Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Consider Making Mobile Web Site TransactionalAs 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/mobithink ing.com/files/dotMobi_Mobile_Usabilit y_Best_Practice.pdf) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility IA for Mobile Sites May Need to Be Shallower• Search for iPad covers on Best Buy mobile site is 5 levels deepFrom Mobile Usability, by Jakob Nielsen and Raluca Budiu (2012) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Wireframe the EssentialsAnother consideration: orientation. Best Practice is not to fix the orientation to either portrait or landscape, as readers like the flexibility to choose for themselves Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 siteFrom Mobile Usability, by Jakob Nielsen and Raluca Budiu (2012) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Can Test Designs Easily on Emulators ipadpeek.com/ www.opera.com/developer/tools/mini/iphone4simulator.com/ Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 JakobNielsen and Raluca Budiu (2012) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Comparison Between Mouse and Finger as Input DeviceFrom Mobile Usability, by Jakob Nielsen and Raluca Budiu (2012) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Seven Usability Guidelines for Mobile Web Sites1. Meet user’s needs quickly2. Don’t repeat the navigation on every page (breadcrumbs work better)3. Clearly distinguish selectable items4. Make user input as simple as possible5. Only show essential information6. Place basic browsing control (like “Back”) on the page7. Design mobile-friendly page layoutsFrom: http://www.webcredible.co.uk/user-friendly- A design which is not mobile-friendly resources/web-usability/mobile-guidelines.shtml Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Mobile Validators Also AvailableHRSDC site as checked by W3C mobileOK Checker (validator.w3.org/mobile/) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Creating a “Before” Wireframe in Visio: Step 1• Launch Visio. Choose “Basic Flowchart”.• Go to bit.ly/MC8DT and 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) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Creating a “Before” Wireframe in Visio: Step 2• 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Creating a “Before” Wireframe in Visio: Step 3• 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) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Creating a “Before” Wireframe in Visio: Step 4• 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 (dont forget the material at the bottom!) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Creating a “Before” Wireframe in Visio: Step 5• 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!) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Creating a “Before” Wireframe in Visio: Step 6• 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) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Sources of Information on Wireframes/Wireframing• “Visio - the interaction designers 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/ Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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• Format 8-12 written pages (including screenshots)• When Due: February 14th 2012 (Final class) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Web Accessibility Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 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 courtShe 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/don na-jodhan-succeeds-in- accessibility-challenge- to-federal-websites/ Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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/jaw s-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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 nav elements 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Web Accessibility Tricks: Designing for High Contrast• Also implemented using CSS, typically turns a colourful Web site to (largely) black and whiteExamples:• 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/ Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Web Accessibility Tricks: Changing Font SizeYet another CSS trick; toggles size of displayed fontAn 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. Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Accessibility: The Legal ResponsibilitiesSome countries require that commercial Web sites (especially those that do business with government) meet certain accessibility requirementsOntario: 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Canadian Federal Government WebsitesCanada: 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) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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/tar get/jwtdeclaration.pdf, which serves as an excellent example of how to do this Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Other CountriesAustralia: 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 sitesUnder 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 readersAdapted from: http://www.rnib.org.uk/professionals/webaccessibility/lawsandstandards/Pages/uk_law.aspx Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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). Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility A Quick Tour Through WCAGStart with WCAG 1.0 principles, then on to WCGA 2.01. 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility A Quick Tour Through WCAG (cont.)2. Don’t rely on colour aloneEnsure that text and graphics are understandable when viewedwithout colourWhy? • 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Colour BlindnessInformation derived from www.visibone.com/colorblind Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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/ Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Colour Blindness: One Example•Want an interactive version that check possible colour issues on your website? Try: www.vischeck.com/ Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Colour Blindness: Another ExampleDeuteranope 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 withyour target site, do a screen capture, save it and upload to Vischeck instead) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility A Quick Tour Through WCAG (cont.)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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility A Quick Tour Through WCAG (cont.)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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility A Quick Tour Through WCAG (cont.)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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility A Quick Tour Through WCAG (cont.)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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility A Quick Tour Through WCAG (cont.)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/ Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility A Quick Tour Through WCAG (cont.)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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility A Quick Tour Through WCAG (cont.)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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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. Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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/ Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Accessibility Heuristics• W3Cs “Quick Tips to Make Accessible Web Sites” for WCAG 1.0: w3.org/WAI/quicktips/• W3Cs “WCAG 2 at a Glance”: w3.org/WAI/WCAG20/glance/• IBMs 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility In Class Assignment: Identify Accessibility Issues on Your Target Web Site• Assemble into your groups• Methodically go through top and second- level pages, looking for and identifying any accessibility issues you find Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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• Dont forget to include whatever is good from an accessibility standpoint!• Format 8-10 written pages (including screenshots)• When due: February 21st 2013 (one week after final class) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2