Web Teacher » usability

Optimize your writing for users with impaired vision

vdebolt — Thu, 24 Jun 2010 13:21:20 +0000

Users with screen reader devices will scan and skim your web page in a manner somewhat similar to the way a visual user will. Screen readers can be programmed to read only headings, subheadings and links. When something of interest pops out from this “skimming” process, the user can stop and have all the information in a particular section of the page read completely.

The first step is to write meaningful headings and subheadings that contain important words and phrases. The first paragraph under each heading should clarify what the section of the page content is about.

Next, make sure that link text is informative. Link text should give users some idea what they will find when they click. Link text like “here” or “click here” is not informative. The link text in this example is descriptive and informative: Google is trying a similar thing with HTML5 Rocks. It’s obvious that a click will take the user to HTML5 Rocks.

Finally, write alt text that gives an alternative description of the content or function of an image. For example, in book reviews such as the recent one of Mobile Design and Development, the alt text for the image of the book cover is “get Mobile Design and Development at Amazon.” While it does not say that the image is a book cover, it does tell the user what happens if the image is clicked–functional alt text.

These tips are best practice for all users. Optimizing your writing for users who are surfing your page with their ears will improve your page for users who are scanning the page visually, too. Like many practices that have been adopted as accessibility requirements, good writing benefits all users, not just those with visual impairments.

Useful links: Usability, graphic design, HTML5 Rocks

vdebolt — Wed, 23 Jun 2010 12:28:09 +0000

The You-Don’t-Matter Website is a look at usability and accessibility for some large brands.

Graphic Design Theory: 50 Resources and Articles is from noupe.

Apple’s attempt to wow the world with HTML5 flopped. Now Google is trying a similar thing with HTML5 Rocks. There are tutorials, Chrome developer tools, and the promise that the material in the playground and presentations is open source. Let’s see if Google can do it right.

Now Available! InterACT with Web Standards: A Holistic Approach to Web Design

vdebolt — Tue, 18 May 2010 12:05:56 +0000

InterACT with Web Standards: a Holistic Approach to Web Design is available today.

This announcement is a BIG DEAL.

This book puts everything you need to teach a class in web design or development with web standards into your hands. The book is easy to use in connection with InterACT’s 17 courses in 6 learning tracks making it the perfect tool and resource for teaching or learning contemporary web design best practices.

If you are a student who wants to learn about building a web site with web standards, this book will lead you there.

For educators, your semester will be a snap to plan with this book. It’s all right there for you.

The book is published by New Riders (2010). There are 10 authors. The major contributor being Chris Mills, with additional expertise from Erin Anderson, Virginia DeBolt, Derek Featherstone, Lars Gunther, Denise Jacobs, Leslie-Jensen-Inman, Christopher Schmitt, Glenda Sims and Aarron Walter. I’m really proud to have been a small part of making the book a reality, because I think the book is going to be very important to students and teachers who are looking for the a reliable resource for web design best practices.

In addition to the writers, a number of other people worked to bring this book to life. They include Aarron Walter as project manager, Patrick Lauke as technical editor, Jeff Riley as development editor, Leslie Jensen-Inman as creative director and Jessi Taylor as book and site designer.

Many kudos go to Leslie Jensen-Inman and Jessi Taylor. When you see this book and hold it in your hands you will realize what a work of art it is from a design and typography point of view. It’s a beautiful book.

Take a look at the table of contents:

InterACT
Tools
Learning on the Web
Internet Fundamentals
Writing for the Web
Information Architecture Intro
Site Planning
Content Analysis
Content Strategy
HTML Intro
CSS Intro
Headings and Paragraphs
Whitespace
Links
Images
Lists
Tables
Forms
Floats
Positioning
Accessibility Intro
Accessibility Helps
Accessibility Testing
Bringing it All Together
Index

The InterACT with Web Standards book site has everything you need to know. There, you’ll find links to purchase the book, links to code examples from the book, links to bonus content, and links to the sample project. The site has links to information about InterACT, OWEA, and the Web Standards Project. You can take a peek inside the book, read some reviews, grab links to all the resources cited in the book, and MUCH MORE.

Buy now and take advantage of this limited time offer tweeted by @waspinteract.

InterACT With Web Standards, the first book from The Web Standards Project, is out. Save 35% on it with code INTERACT. http://cot.ag/9RS4rEMon May 17 16:00:20 via CoTweetWaSP InterAct
waspinteract

Useful links: Funny stuff, press Enter, VoiceOver

vdebolt — Fri, 23 Apr 2010 13:07:55 +0000

Need a laugh? How to Successfully Educate Your Clients on Web Development at Smashing Magazine is really funny.

Who moved my Enter key? from Know IT describes the role muscle memory plays in keyboarding. Personally, I’m still waiting for Mac and Windows to agree on the location and function of the Ctrl/Cmd keys. Moving from Mac to Windows and back again is like getting into a car and discovering that the brake and gas pedal are reversed in this particular model. Once you get it working, you go back to the other car and have to learn it all over again.

iPhone VoiceOver Features for People with Disabilities is an informative video describing the iPhone VoiceOver accessibility features.

Useful links: online learning, browser basics, the personal blog

vdebolt — Mon, 16 Nov 2009 17:50:53 +0000

Usability Issues that Impact Online Learning from Faculty Focus doesn’t mention specific tools that meet some of the standards suggested for good usability in online learning, but it does tell you some things to strive for:

Good usability for online learning materials means the site, content, and media are easy to find, use, and navigate. And good usability for people means the interaction tools (such as email and discussion forums) are easy to use and facilitate getting input or help as needed.

It would be nice to see an exploration of the usability of the major online learning systems common to colleges. Has anybody done something like that already?

A Google video that will soon be added to the resources deemed worthy of being included in the InterAct Curriculum is Google Explains What a Browser Is. Excellent explanation of basics for the newbie.

I think it says a lot about the economy, the culture, the Internet, and the power of personal blogging when Dooce can raise money for charity online by selling photos of The Former Congressman Charles. What was it my English teacher used to say? The personal is universal . . .

Improve readability with line-height

vdebolt — Wed, 30 Sep 2009 20:26:59 +0000

The CSS line-height property determines the distance or spacing between the lines of text on the page. In the print world, this property is called leading.

Line-height can be applied to any text element, but it’s probably best to set it in the CSS rule for body in your stylesheet. All the textual elements on your page will inherit that line-height value, which can be adjusted if needed for specific parts of the page.

The perfect line-height will depend on your choice of font-family. In my examples, I’m using a sans-serif font. Some fonts are “taller” than others. Tahoma looks good at 1.5, but Times Roman might not. Generally, you don’t want the lines to be too close together or too far apart. You want enough space between the lines to create maximum readability, or the appearance of ease of reading. You want an open and inviting look rather than a “dense” look, which discourages reading.

I applied different line-height values to some paragraphs so you could see the effect. The rule used in each example is a variation of

p { font: 1em/1.2 Tahoma, Geneva, sans-serif; }

To give you the same rule not in CSS shorthand, it would be

p { font-size: 1em;line-height: 1.2;
font-family: Tahoma, Geneva, sans-serif; }

Notice that there is no unit attached the the line-height value. No px, %, or em units should be assigned to the line-height value. In each example, I put the variation in the line-height rule at the beginning of the image so you could judge for yourself what the effect was. Which examples look the most readable to you? Which encourage reading, which discourage reading?

Example 1

I’m not even going to show you how it looks if left at the default value, which would be 1. It’s a bit crowded at 1.2.

Example 2

I find 1.5 attractive for this font. It’s open and looks easy to read.

Example 3

Even at 1.8, the line-height is still working for me. It’s approaching the point of being too much, and I think 1.5 is better, but it still works. (I’d look at 1.6 or 1.7 before deciding for certain.)

Example 4

With a value of 2, I think the lines are so far apart that readability is impaired for this font. With so much distance between the lines, you lose the sense of proximity that tells you that these lines belong together in a semantic unit.

Useful Links: Open Letter, Blog Action Day, Free Culture, Usability, HTML5

vdebolt — Thu, 24 Sep 2009 14:00:41 +0000

An Open Letter to Mark Shuttleworth at Geek Feminism Blog points the spotlight at another incident in this year’s round of dismissive-to-women conference remarks.

The topic for Blog Action Day this year is Climate Change. Hope all you bloggers out there will participate.

.eduGuru reviews Lawrence Lessig’s Free Culture and says,

This is not a book about education or law, this is a book designed to educate. Because of our proximity to such issues, I think it is critical that we all educate ourselves on the changes that are taking place, and the impact it is going to have on us as we move forward and try to support schools, professors, and students in their pursuit of an open learning environment.

10 Useful Usability Findings and Guidelines at Smashing Magazine has some excellent guidelines. This would make a good reading assignment for web design students.

The HTML5 DOM and RDFa talks about a known problem, in a clear and interesting way.

Useful Links: Snow Leopard and AT, HTML5 and RDFa, Flash accessibility, and writing tips

vdebolt — Fri, 28 Aug 2009 20:38:52 +0000

Snow Leopard Assistive Technology Compatibility List is a very helpful compilation of what works and what doesn’t work on Snow Leopard. From ATMac.

There are so many posts about HTML 5 and RDFa flying around these days that it’s hard to keep up with them all. But here’s one that takes a different approach, Burningbird’s Maxwell’s Silver Hammer: RDFa and HTML5′s Microdata.

Wendy Chisholm chimes in with What I’m Watching about HTML 5.

Adobe Flash Accessiblity: Best Practices is must reading for anyone teaching or using Flash. From Erik Johnson at Six Revisions.

FatDUX has 20 tips for writing for the web that are a great lesson for beginners and a good reminder for the folks who’ve been at it a while.

Useful links: usability in tweets, net neutrality, copyrights

vdebolt — Thu, 27 Aug 2009 12:49:38 +0000

Twitter Postings: Iterative Design from Nielsen’s alertbox takes aim at usability in tweets.

Obama’s FCC to support Net Neutrality at The Hill. So far it’s just a promise, not a behavior.

Your copyright questions answered is a handy summary of copyright basics. Written by a copyright lawyer and published at Book by Its Cover.

Reading with the Kindle Reader on an iPhone

vdebolt — Sat, 09 May 2009 16:22:40 +0000

I just finished the first book I’ve read on my iPhone. I used the free Kindle reader app. I read The Reader by Bernhard Schlink.

I loved the experience. It was a relief to my often achy hands and thumbs to not have a heavy book to hold. The screen resolution is so crisp that I had no problem seeing it, even with my crap-for-eyes.

It went amazingly fast. The line length is so short than you can almost read down the page line by line without having to refocus your eyes again and again to scan across the lines. It’s speed reading without even trying.

I have a feeling that I’ll be buying all books that are available for Kindle in this way from now on.