<!--#include virtual="../s5/commontop.html" -->
<title>Lecture 17: Usability & Accessibility — INFO 343 Autumn 2011</title>
</head>
<body>
<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1>INFO 343 Lecture 17</h1>
<h2>Usability & Accessibility</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1>Usability & Accessibility</h1>
<h3>Lecture 17</h3>
<!-- <h4>
Reading: 12.1–12.2;<br/>
<a href="http://css3.bradshawenterprises.com/"><cite>Using CSS3 Transitions, Transforms, and Animation</cite></a> by Rich Bradshaw
</h4> -->
<p class="license">
Except where otherwise noted, the contents of this presentation are Copyright 2010–11 Marty Stepp, Jessica Miller, Morgan Doocy.
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="../s5/images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="../s5/images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<!-- <div class="slide titleslide">
<h1>Metadata, Microformats & Snippets</h1>
<ul>
<li><strong>Metadata, Microformats & Snippets</strong></li>
<li>Cookies & Session Storage</li>
</ul>
</div>
<div class="slide">
<h1>
Web page metadata:
<a href="http://www.w3schools.com/tags/tag_meta.asp"><code><meta></code></a>
<span class="readingsection">(2.3.3)</span>
</h1>
<p class="description">
information about your page (for a browser, search engine, etc.)
</p>
<pre class="examplecode html">
<<em>meta</em> http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<<em>meta</em> name="description"
content="Authors' web site for Building Java Programs." />
<<em>meta</em> name="keywords" content="java, textbook" />
</pre>
<ul>
<li>placed <strong>in the <code>head</code></strong> section of your XHTML page</li>
<li><code>meta</code> tags often have both the <code>name</code> and <code>content</code> attributes
<ul>
<li>some <code>meta</code> tags use the <code>http-equiv</code> attribute instead of <code>name</code> (for HTTP headers)</li>
</ul>
</li>
<li>using a <code>meta</code> tag <code>Content-Type</code> stops validator "tentatively valid" warnings
</li>
</ul>
</div> -->
<!-- <div class="slide">
<h1>Microformats</h1>
<p>Semantic </p>
</div> -->
<div class="slide">
<h1>What is usability?</h1>
<ul>
<li><span class="term">usability</span>: a measure of the ease of use and learning of a thing</li>
<li><span class="term">web usability</span>: assessing and characterizing the usability of a particular web site</li>
<li>studying and improving software usability in general is part of the field of <span class="term">Human-Computer Interaction</span> (HCI)</li>
</ul>
<p style="text-align: center"><img src="images/dilbert.png" alt="Dilbert" /></p>
</div>
<div class="slide">
<h1>Key concepts in user interface design</h1>
<ul>
<li><span class="term">visibility</span>: current state is self-evident, and possible next actions are obvious
<ul>
<li><em>What can I do next?</em></li>
</ul>
</li>
<li><span class="term">feedback</span>: (immediate) response to interaction
<ul>
<li><em>I can see that I did what I thought I did…</em></li>
</ul>
</li>
<li><span class="term">consistency</span>: reliable, predictable outcome for identical/similar/related actions, and reliable visual treatment of identical/similar/related things
<ul>
<li>recognition (familiarity) reduces mental workload</li>
</ul>
</li>
<li><span class="term">simplicity</span>: keep it uncomplicated, uncluttered, intuitive
<ul>
<li>simplicity of <em>user</em> experience sometimes inverse of <em>developer</em> experience</li>
</ul>
</li>
<li><span class="term">grace</span>: mistakes are easily corrected
<ul>
<li><em>Oops! Meant to do this instead…</em></li>
</ul>
</li>
</ul>
<!-- <p style="text-align: center"><img src="images/visibility.png" alt="visibility example" /></p> -->
</div>
<div class="slide">
<h1>Web Conventions</h1>
<p>Jakob’s Law of the Web User Experience: users spend most of their time on other sites, so that’s where they form their expectations about how the Web works</p>
<p>Using conventional design elements allows you to capitalize on familiarity.</p>
<ul>
<li>some elements should always be conventional</li>
<li>can successfully “re-train” users sometimes</li>
</ul>
<p>Some conventions:</p>
<ul>
<li>Site logo: top left</li>
<li>Utility links: top right</li>
<li>Site utility links: footer</li>
<li>Primary site nav: in band beneath masthead, or list on left side</li>
<li>Secondary site nav: list on left/right side</li>
</ul>
</div>
<div class="slide">
<h1>Writing for the web</h1>
<ul>
<li>People read web page text differently than they read books, etc.</li>
<li>Writing for the web includes:
<ul>
<li>subheads</li>
<li>bulleted lists </li>
<li>highlighted keywords </li>
<li>short paragraphs </li>
<li>the "inverted pyramid"</li>
<li>(put the most newsworthy information at the top, and then the remaining information follows in order of importance, with the least important at the bottom)</li>
<li>a simple writing style</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Common web usability problems</h1>
<ul>
<li>cluttered or otherwise poor layout</li>
<li>requires horizontal scrolling, or makes assumptions about user's screen size</li>
<li>poorly chosen colors</li>
<li>uses frames</li>
<li>uses splash screen(s)</li>
<li>poor or missing navigation controls (Back, Forward, Home)</li>
<li>text is not skimmable (can't be read quickly)</li>
</ul>
</div>
<div class="slide">
<h1>Content usability problems</h1>
<ul>
<li>most important content isn't on the first page / screenful</li>
<li>nondescript headings</li>
<li>too many ads (or things that appear to be ads)</li>
<li>important site content is contained in PDF documents</li>
<li>isn't designed to be easily indexed by a search engine <br />
(HTML title, meta tags, page text, link text, etc.)</li>
<li>tiny thumbnails of detailed large photos: <img style="vertical-align: top" src="images/tiny_thumbnail.png" alt="tiny thumbnail" /></li>
</ul>
</div>
<div class="slide">
<h1>Users do not read</h1>
<p style="text-align: center;"><img src="images/toomuchtext_1.png" alt="too much text" /> vs. <img src="images/toomuchtext_2.png" alt="better text" /></p>
<ul>
<li>this also often applies to CSE students</li>
</ul>
</div>
<div class="slide">
<h1>Link usability problems</h1>
<ul>
<li>links that don't say where they go</li>
<li>badly chosen link text (such as "Click <span style="text-decoration: underline">here</span> for more info")</li>
<li>links that forcibly open a new browser window</li>
<li>links opened by complex Javascript needlessly</li>
<li>visited links don't appear in a different color</li>
</ul>
</div>
<div class="slide">
<h1>Feature usability problems</h1>
<ul>
<li>poorly performing site search</li>
<li>having a web search feature (why??)</li>
<li>not having a site map or other means to navigate the site</li>
<li>relying on non-standard plugins or browser versions (e.g. Overly reliant on Flash, Java applets, etc.)</li>
</ul>
</div>
<div class="slide">
<h1>Web design suggestions</h1>
<ul>
<li>place your name and logo on every page and make the logo a link to the home page</li>
<li>provide search if the site has more than 100 pages</li>
<li>write straightforward and simple headlines and page titles that clearly explain what the page is about</li>
<li>structure the page to facilitate scanning and help users ignore large chunks of the page in a single glance: for example, use grouping and subheadings to break a long list into several smaller units</li>
<li>instead of cramming everything about a product or topic into a single, infinite page, use hypertext to structure the content space into a starting page that provides an overview and several secondary pages that each focus on a specific topic</li>
<li>use link titles to provide users with a preview of where each link will take them, before they have clicked on it</li>
</ul>
</div>
<div class="slide">
<h1>More web design suggestions</h1>
<ul>
<li>Use relevance-enhanced image reduction when preparing small photos and images: instead of simply resizing the original image to a tiny and unreadable thumbnail, zoom in on the most relevant detail and use a combination of cropping and resizing.</li>
<li>Ensure that all important pages are accessible for users with disabilities, especially blind users</li>
<li>Do the same as everybody else: if most big websites do something in a certain way, then follow along since users will expect things to work the same on your site</li>
<li>Jakob's Law of the Web User Experience: users spend most of their time on other sites, so that's where they form their expectations for how the Web works</li>
<li>Test your design with real users as a reality check. People do things in odd and unexpected ways, so even the most carefully planned project will learn from usability testing. </li>
</ul>
</div>
<div class="slide">
<h1>Sites about web design</h1>
<ul>
<li><a href="http://alistapart.com">A List Apart</a></li>
<li><a href="http://www.cssplay.co.uk">CSS Play</a></li>
<li><a href="http://meyerweb.com/eric/css/edge/">css/edge</a></li>
<li><a href="http://www.designbyfire.com">Design by Fire</a></li>
<li><a href="http://www.zeldman.com/">Jeffrey Zeldman Presents</a></li>
<li><a href="http://www.quirksmode.org/">QuirksMode</a></li>
</ul>
</div>
<div class="slide">
<h1>Web pages that suck</h1>
<p>What's wrong with each of these web sites?</p>
<ul style="font-size: smaller">
<li><a href="http://www.envy-hair.co.uk/index.html">http://www.envy-hair.co.uk/index.html</a></li>
<li><a href="http://www.corvalliscommunitypages.com/">http://www.corvalliscommunitypages.com/</a></li>
<li><a href="http://www.pigletscatering.co.uk/">http://www.pigletscatering.co.uk/</a></li>
<li><a href="http://www.bigbearparties.com/">http://www.bigbearparties.com/</a></li>
<li><a href="http://www.developingwebs.net/">http://www.developingwebs.net/</a></li>
<li><a href="http://www.bobmarshall.com/">http://www.bobmarshall.com/</a></li>
<li><a href="http://www.orchy.com/dictionary/">http://www.orchy.com/dictionary/</a></li>
<li><a href="http://www.delmarvadatacenter.com/main.html">http://www.delmarvadatacenter.com/main.html</a></li>
<li><a href="http://www.videosphotosanddjs.com/">http://www.videosphotosanddjs.com/</a></li>
<li>credit: <a href="http://bad.webpagesthatsuck.com/">webpagesthatsuck.com</a></li>
</ul>
</div>
<div class="slide">
<h1>Ajax usability</h1>
<p style="text-align: center;"><img src="images/gmail_loading.png" alt="Gmail loading" /></p>
<ul>
<li>since Ajax requests happen in the background, users may not know the page is loading</li>
<li>well-designed web sites give visual cues to the user so they know to wait</li>
</ul>
</div>
<div class="slide">
<h1>Forms and usability</h1>
<ul>
<li>client-side validation</li>
<li>lighting up required elements left blank or filled out incorrectly</li>
<!-- this is just a good tip in general; elevate to its own slide, or earlier? -->
<li>avoiding <code>alert</code> unless absolutely necessary</li>
</ul>
</div>
<div class="slide">
<h1>Search Engine Optimization (SEO)</h1>
<ul>
<!-- <li>often “snake oil”</li> -->
<li>get people to link to your site (particularly popular sites!)</li>
<li>use relevant keywords in link text
<ul>
<li>example: My friend <a href="http://faculty.washington.edu/stepp/">Marty Stepp</a> is a swell guy!</li>
</ul>
</li>
<li>set descriptive <code>meta</code> tags</li>
<li>use a site URL and page title that contains the keywords you want to match</li>
<li>don't do "black-hat" stuff (link farms, hidden text, etc.)</li>
<li>use Google Webmaster Tools: <a href="https://www.google.com/webmasters/tools/">https://www.google.com/webmasters/tools/</a></li>
</ul>
</div>
<div class="slide">
<h1>Accessibility</h1>
<p><strong>Accessibility</strong>: the ability for a diverse range of audiences to consume your content</p>
<ul>
<li>typically this is interpreted as applying only to persons with disabilities — e.g., blind users</li>
<li>however, it applies equally well to users of mobile devices, text-only browsers, etc.
<ul>
<li>example: iOS users can’t view Flash-only video content; provide it in an alternative format</li>
</ul>
</li>
<li>rule of thumb: provide the same <em>content</em> for all audiences; change only the <em>presentation</em> or <em>format</em></li>
<li>think of all possible means of consuming your content, and be sure each approach is successful</li>
<li>best integrated into the design process from the beginning</li>
</ul>
</div>
<div class="slide">
<h1>Accessibility Standards</h1>
<p>Primary standards:</p>
<ul>
<li>Web Content Accessibility Guidelines, by W3C’s Web Accessibility Initiative (WAI)</li>
<li>“Section 508” guidelines for accessibility of U.S. federal government content</li>
</ul>
</div>
<!--#include virtual="../s5/commonbottom.html" -->