Category Archives: Web Design

Web Accessibility for the 21st Century

Posted on by
Reply

by dreamwidth on Jan 31, 2013

1,283 views

You know it’s important for your web project to be accessible to people who use all kinds of assistive technology to access the internet. But all the guidelines for web accessibility you can find don’t go much beyond "make sure all your images have alt text", and all the resources you can find treat "accessibility" as a synonym for "making your site work in a screen reader". You know there are other things you should be doing and other forms of assistive technology you should be accomodating, but all the best practices documents are a complicated morass of contradicting information (if you can find best practices documents at all.)

Have no fear! This tutorial gives you a number of concrete steps to take to make things more accessible.

This presentation has downloadable notes and exercises available at http://denise.dreamwidth.org/tag/a11y . Video of the talk should be available later.

via Web Accessibility for the 21st Century.

Stop Misusing Select Menus – UX Movement

Posted on by
Reply

Some pretty good advice on use/abuse of the <select> tag via Stop Misusing Select Menus – UX Movement.

Stop Misusing Select Menus

by anthony on 01/22/13 at 8:34 am

A form has many user interface elements. If you don’t know how to use them all properly, you could make filling out forms difficult for your users. One interface element that’s commonly misused is the select menu.

Sometimes you’ll find a select menu with 2 options and sometimes with over 20 options. In both cases, the select menu is used wrong. When you have less than 5 options for users to select from, you should use radio buttons. This allows users to make their choice faster and easier because all they have to do is look at their options and click once. With a select menu, users have to click the menu, scroll to an option and click again. A select menu also keeps the other options hidden until the user clicks it. When you have less than 5 options, it’s better to visibly lay them all out on the form with radio buttons so that users can scan them quicker.

Much general goodness here. The TL;DR on it is summed up as:

When do I use a select?
When you have more than a handful of items to choose from, and when the number of selection items is not so long as to make scrolling through them onerous.
When do I label a select field?
Always.
When should I use a default option?
When the vast majority of your users will choose that item. (That’s a lot less often than you think.)
When should I group select options?
Whenever there are clear distinctions. (This might be more often than you realize.)
When should I use a select tag for navigation?
Much less often than you want to. Sure, it’s a neat idea, but it breaks things for a lot of users, especially on mobile.

Link: “What are great examples of viral UX/UI design patterns?” – in Curaqion

Posted on by
Reply

This is a pretty great article discussing some design patterns that can help a web site go viral.

via What are great examples of virality UX/UI design patterns? – curaqion.

UX Design Pattern Library

The UX design patterns below are organized by phase. Each
pattern is color coded to show which part of the virality K-factor
equation they impact (see above for key). There are five basic
phases:

  • The act of Sharing/Inviting
  • The Invitation
  • Sign up
  • First Run Engagement
  • Deepening Engagement

This is a general approach and the order and importance of each
phase will vary for different products, for example, some products
may not have a sign up at all.

Curaqion is a curated question and answer site. Found via Smashing Magazine Issue 71

Space Ipsum

Posted on by
Reply

Very cool net thing. Lorem Ipsum generators abound, but this one is right near to my heart. The random bits generated come from people talking in, or about, space.

Have you ever needed filler text, but wished you had more exciting options then the generic “lorem ipsum” variations? If so, you are in luck! We’ve created this space themed random content generator, that uses phrases from historic moments in spaceflight.

By @seanherron, @skytland, and @eshgah

via Space Ipsum.

Example:

The Earth is a very small stage in a vast cosmic arena. Think of the rivers of blood spilled by all those generals and emperors so that, in glory and triumph, they could become the momentary masters of a fraction of a dot. Think of the endless cruelties visited by the inhabitants of one corner of this pixel on the scarcely distinguishable inhabitants of some other corner, how frequent their misunderstandings, how eager they are to kill one another, how fervent their hatreds.

The surface is fine and powdery. I can kick it up loosely with my toe. It does adhere in fine layers, like powdered charcoal, to the sole and sides of my boots. I only go in a small fraction of an inch, maybe an eighth of an inch, but I can see the footprints of my boots and the treads in the fine, sandy particles. There seems to be no difficult in moving around, as we suspected.

The vehicle explodes, literally explodes, off the pad. The simulator shakes you a little bit, but the actual liftoff shakes your entire body and soul.

This is rather disappointing….

Posted on by
Reply

The State of E-Commerce Checkout Design 2012 over at Smashing Magazine gives an overview of their survey of e-commerce sites in view of what the current state-of-the-practice is in UX design. This was a followup to a previously published set of design guidelines for e-commerce checkout.

Overall, I found the survey a bit depressing, in that things are not really getting better in terms of usability, and further encroachments on the relationship between retailer and consumer. In brief:

Here’s a walkthrough of just a handful of the interesting stats we’ve found when benchmarking the top 100 grossing e-commerce websites’ checkout processes:

  • The average checkout process consist of 5.08 steps.
  • 24% require account registration.
  • 81% think their newsletter is a must have (opt-out or worse).
  • 41% use address validators.
  • 50% asks for the same information twice.
  • The average top 100 checkouts violate 33% of the checkout usability guidelines.

Great article on perception, making inferences and implications

Posted on by
Reply

A List Apart, a fabulous weblog about web design, has an article on how stories relate to making inferences and implications, and how that affects the design of a web site:

Stories have been around as long as we have, helping us understand our world and ourselves. We learn and retain information best through stories, because they turn information into more than the sum of its parts. But what makes a story a story, and what does it mean for the digital world we’ve built?

Making up Stories, by Elizabeth McGuane and Randall Snare.

Stories have long fascinated me. I have made up stories for people, especially for my kids, to entertain, teach, sooth, tire out (especially the kids), and just for fun. Stories as metaphors reach deep into our subconscious to open up pathways to learning new things and discovering new insights. Applying storytelling to web design is the way to engage the reader in something more than just another web site: it gives them a reason to link your site with something they want to experience more than once.