SlideShare ist ein Scribd-Unternehmen logo
1 von 91
Downloaden Sie, um offline zu lesen
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 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
                       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 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.
                      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 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.
                      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 Page
Top 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 Level
Third 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 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



                       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 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)



                            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 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/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 Huge




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


   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 Use




From “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 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
                           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 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
                            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 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/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 deep




From 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 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


                               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 site

From 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 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


   Comparison Between Mouse and Finger as Input Device




From 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 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-                      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 Available




HRSDC 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 (don't 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 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/


                       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 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/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 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/
                        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 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.


                      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 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




                       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 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)

                       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 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




                         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 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

                             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 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




                       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 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




                       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




Information 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 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)
                          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
•    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



                          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
•   Don't 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

Weitere ähnliche Inhalte

Ähnlich wie Information Architecture: Part 2 - Spring 2013 - Class 2

Responsive web design with various grids and frameworks comparison
Responsive web design with various grids and frameworks comparisonResponsive web design with various grids and frameworks comparison
Responsive web design with various grids and frameworks comparisonDhrubaJyoti Dey
 
Stacker's the way you connect the world .pptx
Stacker's the way you connect the world .pptxStacker's the way you connect the world .pptx
Stacker's the way you connect the world .pptxBOBY RISHABH KUMAR SHARMA
 
Monkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web DesignMonkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web DesignSerge Hufkens
 
The Paradox of Agile Architecture Quality: Designing for Failure
The Paradox of Agile Architecture Quality: Designing for FailureThe Paradox of Agile Architecture Quality: Designing for Failure
The Paradox of Agile Architecture Quality: Designing for FailureJason Bloomberg
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practicesmintersam
 
Talk 03 responsive-web-design
Talk 03 responsive-web-designTalk 03 responsive-web-design
Talk 03 responsive-web-designMonkeyshot
 
Getting started with Vue.js - CodeMash 2020
Getting started with Vue.js - CodeMash 2020Getting started with Vue.js - CodeMash 2020
Getting started with Vue.js - CodeMash 2020Burton Smith
 
Bowen Gao resume 2016 (2)
Bowen Gao resume 2016 (2)Bowen Gao resume 2016 (2)
Bowen Gao resume 2016 (2)Bowen Gao
 
Responsive Web Design - Why and How
Responsive Web Design - Why and HowResponsive Web Design - Why and How
Responsive Web Design - Why and HowJudi Wunderlich
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design mrscammels
 
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...uxpa-dc
 
Justin Segler Resume
Justin Segler ResumeJustin Segler Resume
Justin Segler ResumeJustin Segler
 
Making Great User Experiences at Cleveland C# .Net Meetup July 27 2017
Making Great User Experiences at Cleveland C# .Net Meetup July 27 2017Making Great User Experiences at Cleveland C# .Net Meetup July 27 2017
Making Great User Experiences at Cleveland C# .Net Meetup July 27 2017Carol Smith
 
2022 COMP4010 Lecture 6: Designing AR Systems
2022 COMP4010 Lecture 6: Designing AR Systems2022 COMP4010 Lecture 6: Designing AR Systems
2022 COMP4010 Lecture 6: Designing AR SystemsMark Billinghurst
 
第1回バイオインフォマティクスデータ可視化セミナー@Riken
第1回バイオインフォマティクスデータ可視化セミナー@Riken第1回バイオインフォマティクスデータ可視化セミナー@Riken
第1回バイオインフォマティクスデータ可視化セミナー@RikenKeiichiro Ono
 

Ähnlich wie Information Architecture: Part 2 - Spring 2013 - Class 2 (20)

Responsive web design with various grids and frameworks comparison
Responsive web design with various grids and frameworks comparisonResponsive web design with various grids and frameworks comparison
Responsive web design with various grids and frameworks comparison
 
Stacker's the way you connect the world .pptx
Stacker's the way you connect the world .pptxStacker's the way you connect the world .pptx
Stacker's the way you connect the world .pptx
 
Monkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web DesignMonkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web Design
 
The Paradox of Agile Architecture Quality: Designing for Failure
The Paradox of Agile Architecture Quality: Designing for FailureThe Paradox of Agile Architecture Quality: Designing for Failure
The Paradox of Agile Architecture Quality: Designing for Failure
 
RWD - Bootstrap
RWD - BootstrapRWD - Bootstrap
RWD - Bootstrap
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
 
Talk 03 responsive-web-design
Talk 03 responsive-web-designTalk 03 responsive-web-design
Talk 03 responsive-web-design
 
Getting started with Vue.js - CodeMash 2020
Getting started with Vue.js - CodeMash 2020Getting started with Vue.js - CodeMash 2020
Getting started with Vue.js - CodeMash 2020
 
Bowen Gao resume 2016 (2)
Bowen Gao resume 2016 (2)Bowen Gao resume 2016 (2)
Bowen Gao resume 2016 (2)
 
Responsive Web Design - Why and How
Responsive Web Design - Why and HowResponsive Web Design - Why and How
Responsive Web Design - Why and How
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design
 
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
 
Justin Segler Resume
Justin Segler ResumeJustin Segler Resume
Justin Segler Resume
 
Spm file33
Spm file33Spm file33
Spm file33
 
Making Great User Experiences at Cleveland C# .Net Meetup July 27 2017
Making Great User Experiences at Cleveland C# .Net Meetup July 27 2017Making Great User Experiences at Cleveland C# .Net Meetup July 27 2017
Making Great User Experiences at Cleveland C# .Net Meetup July 27 2017
 
2022 COMP4010 Lecture 6: Designing AR Systems
2022 COMP4010 Lecture 6: Designing AR Systems2022 COMP4010 Lecture 6: Designing AR Systems
2022 COMP4010 Lecture 6: Designing AR Systems
 
Software Engineering 2014
Software Engineering 2014Software Engineering 2014
Software Engineering 2014
 
Srs
SrsSrs
Srs
 
第1回バイオインフォマティクスデータ可視化セミナー@Riken
第1回バイオインフォマティクスデータ可視化セミナー@Riken第1回バイオインフォマティクスデータ可視化セミナー@Riken
第1回バイオインフォマティクスデータ可視化セミナー@Riken
 
About 4Ward
About 4WardAbout 4Ward
About 4Ward
 

Kürzlich hochgeladen

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 

Kürzlich hochgeladen (20)

20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 

Information Architecture: Part 2 - Spring 2013 - Class 2

  • 1. Information Architecture: Part 2 Class #2 Keith Schengili-Roberts Copyright © 2013, The iSchool Institute Information Architecture: Part 2
  • 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
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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. Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 18. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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. Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 19. 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
  • 20. 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
  • 21. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 22. 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
  • 23. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility What to Wireframe: 3rd Level Third 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
  • 24. 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
  • 25. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 26. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 27. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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/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
  • 28. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Tablet Growth Has Been Huge From Mary Meeker’s presentation on Internet Trends Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute
  • 29. 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
  • 30. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute
  • 31. 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
  • 32. 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 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 33. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The Scott Institute Katherine &iSchoolProcter Information Architecture: Part 2
  • 34. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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/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
  • 35. 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 deep From Mobile Usability, by Jakob Nielsen and Raluca Budiu (2012) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 36. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 37. 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 site From Mobile Usability, by Jakob Nielsen and Raluca Budiu (2012) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 38. 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
  • 39. 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 Jakob Nielsen and Raluca Budiu (2012) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 40. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Comparison Between Mouse and Finger as Input Device From Mobile Usability, by Jakob Nielsen and Raluca Budiu (2012) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 41. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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- 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
  • 42. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Mobile Validators Also Available HRSDC 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
  • 43. 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
  • 44. 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
  • 45. 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
  • 46. 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
  • 47. 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 (don't forget the material at the bottom!) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 48. 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
  • 49. 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
  • 50. 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
  • 51. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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/ Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 52. 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
  • 53. 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
  • 54. 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
  • 55. 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 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/don na-jodhan-succeeds-in- accessibility-challenge- to-federal-websites/ Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 56. 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
  • 57. 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
  • 58. 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
  • 59. 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 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/ Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 60. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web 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. Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 61. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 62. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 63. 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
  • 64. 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
  • 65. 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
  • 66. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 67. 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 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 68. 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
  • 69. 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
  • 70. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 71. 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 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 72. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility Colour Blindness Information derived from www.visibone.com/colorblind Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 73. 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
  • 74. 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
  • 75. 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
  • 76. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 77. 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
  • 78. 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
  • 79. 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
  • 80. 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
  • 81. 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
  • 82. 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
  • 83. 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
  • 84. 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
  • 85. 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
  • 86. 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
  • 87. 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
  • 88. 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
  • 89. Information Architecture: Part 2 How to Make a Wireframe Class #2 Web Accessibility 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 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
  • 90. 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
  • 91. 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 • Don't 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