Simian Design

Doug Bowman has a _fantastic_ read on how he, and the rest of the team over at Google, recreated some buttons that just launched the other day over at gMail.  The problem they were looking to fix was one of complex actions, where a button can do more than one thing.

A basic 

<input type="submit">

 could be used for single actions, a 

<select>

element could be used for a compact menu of actions, and 

<input type="radio">

 could be used for selecting mutually exclusive options. But we’re left with no way to represent other interactions common in desktop apps. Such as a checkbox that represents more than just on or off. Or the use of auto-complete to refine or narrow the options in a drop-down menu. On top of this, the controls we can render have significantly different appearances across browsers and platforms. Even within a single browser, buttons and select menus have quite different designs.

Enter: the concept of custom buttons.

If you care reading about interaction design, functionality, usability or things about how to sweat the details like making pillbox buttons then go read this, read it now.  It’s fantastic.

Theresa Neil has an excellent article up on 12 standard design patterns.  These concepts are central to enterprise application and web productivity application design.

The image shown here is just a high-level overview of what those patterns are, and she delves into what each of these patterns are and what encompasses them.

Quick quote in regards to the Master/Detail pattern:

Master/Detail screen pattern can be vertical or horizontal. Ideal for creating an efficient user experience by allowing the user to stay in the same screen while navigating between items. Horizontal layout is a good choice when the user needs to see more information in the master list than just a few identifiers- or when the master view is comprised of a set of items that each have additional details.

A very useful article.    Lots of really good info.

I ran across this great article by Angela Colter on Exploring User Mental Models of Breadcrumbs in Web Navigation.

Breadcrumbs have three main types. Location breadcrumbs show the current position within the hierarchy, Path breadcrumbs show the path the user has taken, and attribute breadcrumbs show item meta-data. Most people are familiar with location and path breadcrumbs.

The most common connector for breadcrumbs is >, at 47%. Number 2 comes in at the colon (:) at 11%. That’s huge. This is probably indicative that being different might not be ideal. I say this because of several factors.

Breadcrumbs only appear on 17% of sites (that were surveyed). Only 72% of users even noticed the breadcrumbs. Only 52% even use them.

…if users do not have a clear mental model of breadcrumbs, it may be because they do not encounter them often enough to know what they represent.

So breadcrumbs need to thought about a bit more.  Angela also talks about the details of the three types of breadcrumbs (location, path, attribute) in greater depth, and really helps explain them clearly.

[Andy Hagens][1] has written a great article over at A List Apart. [1High Accessibility Is Effective Search Engine Optimization][2] is just great.

> …high accessibility overlaps heavily with effective white hat SEO.

The title says is all. The quote above is DEAD-ON. If you want __good SEO then make your site accesible__. Just an excellent article.

[1]: http://alistapart.com/authors/h/andyhagans
[2]: http://alistapart.com/articles/accessibilityseo

Wow. I really think [Jakob][1] has been on a tear recently. I mean, I really think a couple of his last articles (such as his [Forms vs Applications][2]) make a great deal of sense.

His latest laments the [death of WYSIWYG interfaces][3]. The reasoning behind this death call is [Microsoft Office 12][4]. His reasons seem pretty solid. I’ve seen the interface of the new Office, but didn’t give it a lot of thought. But apparantly it is going to cause a shift in thinking behind interfaces.

> If the new interaction style works as well as early predictions indicate, users will quickly expect many other user experiences to provide the power of a results-oriented design. People don’t like messing with commands and preference settings on the Web, which is why most customization features fail. It’ll therefore be interesting to see how these new ideas translate into environments far beyond Office-like productivity applications.

I’ll be very interested to see how this plays out. Some great ideas in this article as well on __results-oriented interfaces__. Well worth the read.

[1]: http://www.useit.com/
[2]: http://www.useit.com/alertbox/forms.html
[3]: http://www.useit.com/alertbox/wysiwyg.html
[4]: http://www.microsoft.com/office/preview/uioverview.mspx

Wow. [Jakob writes his best piece in a LONG time about Forms vs. Applications][1]. The summary alone is brilliant.

> Once an online form goes beyond two screenfulls, it’s often a sign that the underlying functionality is better supported by an application, which offers a more interactive user experience.

The idea of making online forms, because that’s what _everyone_ is used to having. And that’s not always the best idea. The ideal place to take these ideas into practice is your intranet.

Forms work when all you’re doing is plain data entry. But once you start moving beyond that, then you can start thinking of an application. And by application, he’s talking about __programmable logic and workflow__.

Just go read this. It’s once of his pieces in a while. It’s solid, smart and a very intruiging read.

[1]: http://www.useit.com/alertbox/forms.html

[Desire Lines][1] is an excellent name to a phenomenon of [tactile user reaction][2]. [Peter Merholz][3] wrote about this years ago, and [Tanya][4] talks about this concept in relation to the physical world.

The whole idea is one of emergent design techniques based upon what your users are telling you. In the case of Berkely they listened, and said “No”. But the idea, and term, is a great one. ([via][viaURL])

[1]: http://www.pixelcharmer.com/fieldnotes/archives/process_designing/2005/000622.html#000622
[2]: http://www.peterme.com/archives/000073.html
[3]: http://www.peterme.com/
[4]: http://www.pixelcharmer.com/
[viaURL]: http://del.icio.us/

[YourTotalSite.com][1] is a good resource. Good site, thorough information and nice collection of links and articles. Using the site is pleasant, the design is clean and open, and is worth bookmarking.

[1]: http://www.yourtotalsite.com/

Wow. This is a wonderful read with some really big ideas. Maybe not good ideas, but they’re BIG.

Robin Good questions [What Should Drive Site Organization And Design: Consistency Or Flow?][uURL1]. Basically, he advocates taking _everything_ you know about page design, walking over to a window, opening the window, and throwing it right out. At the very least turn it on it’s ear.

Henrik Olsen also advocates turning navigation on it’s ear. Or at least recognizes that [navigation isn't what it's cracked up to be][uURL2].

Top menus, left menus and breadcrumbs that are placed throughout the website are at best ignored – at worst distracting.

Others, such as Kristoffer Bohman, conclude that pervasive navigation (the one that appears across all site pages) should die since it’s rarely needed, hard to interpret and takes up valuable space.

According to Jakob Nielsen there is no need to link to all sections from each and every page on a site.

We should limit pervasive navigation to five or six basic features and let people go back to the front page, if they want to start from the top. Instead, we should focus on getting users to what they want and provide useful links to related content.

So basically designers continue this old idiom of “from every page to every section” without really looking at the end result.

I can’t imagine a site, a working site, that really follows these principles. But the ideas are very sound I think.

* _Identify users’ goals on each page._
* _De-emphasize or remove any elements that don’t help to accomplish the goal._
* _Emphasize any elements that help to accomplish the goal._
* _Focus on the users’ goals_

Hmm. Some really interesting ideas in there. I’m not sure. I’ll probably end up taking a bit away from this, and rolling it into my normal processes.

[uURL1]: http://www.masternewmedia.org/2005/02/01/what_should_drive_site_organization.htm
[uURL2]: http://www.guuui.com/issues/01_05.php
[uURL3]: http://www.goodexperience.com/about/mark.php

[Luke Wroblewski][iURL1] has a really smart article on [Web Application Form Design][iURL2]. It’s geared towards UI theory and not implementation, so don’t expect samples of HTML, CSS and JavaScript to copy and use.

Instead expect a well written article on the pro’s and con’s of various form layouts, user flow, and the benefits of all the different ways of laying out forms. The selling points, to clients, of these graphics are HUGE. Very, very nice stuff.

[iURL1]: http://www.lukew.com/about/leadership.html
[iURL2]: http://www.lukew.com/resources/articles/web_forms.html