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.

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.

* [Brett's Robot.txt Blog][1] might be the most innovative blog I’ve seen in a long, long time. The design is just so smart. I LOVE it.
* [The Making of Rudolph The Red-nosed Reindeer][2] is a fun read on a TV classic.
* [Babies in water][3]. [Some][3c] [great][3a], [great][3b] [photos][3d].
* I, for one, welcome our new [Alien Overlord Masters][4]
* The [John Singer Sargent] Gallery has some [very][5a] [nice][5c] [pieces][5b].

[1]: http://www.webmasterworld.com/robots.txt
[2]: http://www.tvparty.com/xmasrudolph.html
[3]: http://www.urchinrock.com/
[3a]: http://www.urchinrock.com/gallery_pages/image59.php
[3b]: http://www.urchinrock.com/gallery_pages/image19.php
[3c]: http://www.urchinrock.com/gallery_pages/image30.php
[3d]: http://www.urchinrock.com/gallery_pages/image64.php
[4]: http://ufocasebook.com/bestufopictures.html
[5]: http://www.jssgallery.org/index.htm
[5a]: http://www.jssgallery.org/Paintings/10195.html
[5b]: http://www.jssgallery.org/Paintings/10140.html
[5c]: http://www.jssgallery.org/Paintings/10195.html
[6]: http://ian-albert.com/misc/gamemaps.php
[6b]: http://ian-albert.com/dont_hotlink.php/0/misc/hw-zelda3-2.jpg
[7]: http://positioniseverything.net/articles/onetruelayout/
[8]: http://forums.mozillazine.org/viewtopic.php?t=327735
[9]: http://www.alistapart.com/articles/sensibleforms
[10]: http://24ways.org/advent/naughty-or-nice-css-background-images
[11]: http://www.nickfinck.com/stencils.html
[11b]: http://www.garrettdimon.com/resources/templates-stencils-for-visio-omnigraffle
[12]: http://www.cocomment.com/
[13]: http://www.muffinresearch.co.uk/archives/2006/02/7/CSS_Drop_Column_Layout.php
read more »

The classic body switcher has been updated. By [Malarkey][1] and [Brothercake][2]. It is an efficient object-oriented style sheet switcher, which offers independent switching of multiple media types, and supports an unlimited number of options and controls. It works in all modern graphical browsers except Mac/IE5 (with javascript enabled), and is available in a range of modes and interfaces.

[1]: http://www.stuffandnonsense.co.uk/resources/iotbs.html
[2]: http://www.brothercake.com/site/resources/scripts/iotbs/
read more »

The listing of [Ajax Mistakes][1] really could be applied to many other, non-Ajax instances.

__Breaking the Back Button__ is one my giant peeves. I hate it when I press back and things go all goofy. Gmail used to be really bad at this.

__Inventing new UI conventions__ is another I really agree with. While it might be cool, try and make it obvious at least. Be aware of what you’re changing, and why.

__Not using links__. I should be able to deep-link to any Ajax app.

It’s a high-level list, and doesn’t even try to go into how to fix these problems. It’s more of things to avoid from the get-go. If you do any sort of javascripting, then go read this. Hell, if you do any UI work at all, go read this.

[1]: http://swik.net/Ajax/Ajax+Mistakes

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

This [Ajax component autocompletes words][1] very nicely. Not just one word, but word after word. In a text-area. It’s slick.

Try it out. Try a long word. Hit `tab` and move on.

Very, very nice. ([via][via])

[1]: http://www.challenger.se/samples/woco.htm
[via]: http://del.icio.us/pecesama

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

After many, many posts on the subject, I’ve finally put together a [stand-alone, master page that collects my propaganda links][1].

I’ve tried to categorize and talk about the various aspects of propaganda here, and any new posts on this subject I’ll also include on this page.

I’ve also linked to my [cobbled together form example][2]. This isn’t a self-coded form, but rather a collection of effects from all over the place. I’ll occasionally update this form and the script to include any new form effects I enjoy/use.

[1]: http://simiandesign.com/other/propaganda.php
[2]: http://simiandesign.com/other/forms/index.php

I’ve been out on vacation for the past week, and really busy the month before that. So I’m apologize for the lack of posting to all three people that read this site.

In an effort to clean out some of my back-log, I’m gonna be posting a couple of big link dumps. Here is part one.

* Scott Andrew [nails why Google Maps is so perfect][1]. Hint, it’s not really Ajax, nor scrolling. It’s much more usability related.
* Pinki is an [OS X menu bar utility for quickly creating icon thumbnails][2]. ([via][wdik])
* An [Easter Egg on Incredibles DVD][3]. ([via][wdik])
* [Document Palette][4] is a pretty neat OS X utility. It will create new documents directly into open folders. Much cooler than the previous sentence sounds, trust me. ([via][wdik])
* Alessandro has a massive post [links-article about javascript][5] that is really worth reading. Tons of good links in there about JavaScript. (One of these days I’ll have to pick up my sorry ass and start posting over at web-graphics again.)
* Here is a fun little JavaScript DOM for you to play with. It’s a [complete Drag & Drop Library][6] which adds Drag Drop functionality to layers and to any desired image. Fun to play with. ([via][jz])
* An amusing post by [Tim Bray on the Microsoft XML Patent][7]. ([via][jz])
* If you have a [LinkSys anything][8], this is the place for you. ([via][jz])
* Interesting Idea: Having [forms in your RSS Feeds][9]. Russell Beattie did it recently, and it worked well for getting comments back quickly. It’s an interesting idea. ([via][laughing])
* Good article by Dave Shea about [semantic markup][10]. Read it, and be sure to check out his [markup guide][10a].
* [Really tiny houses][11]. ([via][simple])
* What [Pixel Artists use][12] when creating icons. ([via][simple])
* How to [prevent JavaScript memory leakage][13]. This script stores events and removes them on `unload`. This really helps out IE, since it has the worst memory leakage with JavaScript of all the browsers.
* To find out if IE is leaking memory, run [Drip, the IE Leak Detector][14]. Drip is a standalone app that lets you open an HTML page (or pages, in succession) in a dialog box, mess around with it, then check for any elements that were leaked. ([via][simion])
* [XHTML2][21] looks interesting. Wonder if it will ever see the light of day. ([via][simion])
* [Google Sitemaps][15]. This could be very cool. Have to play with it some more.
* [Trixie is Greasemonkey for IE][16]. Anything that makes IE more like Firefox is improving IE in my opinion. Except I’m hesitant to install any extra for IE. Old habit I guess. ([via][simion])
* A bunch of [iCal resources][17]. ([via][foo])
* A good [Ajax blog][18]. Lots of good links and examples in here. ([via][foo])
* [Firefoxy][19] is a Platypus script to make Kevin Gerich’s [fancy Firefox widgets][19a] quick to install. If you’re running Firefox on a Mac, you MUST install the Fancy Widgets. It makes things so much better. ([via][foo])
* Create [additional MoveableType DB Fields][20]. I’ve been thinking about dropping MovebleType and trying out WordPress, but nonetheless this look intruiging. ([via][etc])

[1]: http://jszen.blogspot.com/2005/05/why-google-maps-wins.html
[2]: http://www.mkd.cc/pinki/
[3]: http://blogs.law.harvard.edu/philg/2005/05/25#a8621
[4]: http://verticaleye.net/dp/
[5]: http://web-graphics.com/mtarchive/001568.php
[6]: http://www.walterzorn.com/dragdrop/dragdrop_e.htm
[7]: http://www.tbray.org/ongoing/When/200x/2005/06/03/Microsoft-XML-Patent
[8]: http://www.linksysinfo.org/
[9]: http://www.russellbeattie.com/notebook/1008482.html
[10]: http://www.mezzoblue.com/archives/2005/05/30/who_cares_ab/index.php
[10a]: http://mezzoblue.com/downloads/markupguide/
[11]: http://www.tumbleweedhouses.com/houses.htm
[12]: http://www.yellowlane.com/archives/icon_design/confessions_of_a_pixel_perfectionist.html
[13]: http://novemberborn.net/javascript/event-cache
[14]: http://jgwebber.blogspot.com/2005/05/drip-ie-leak-detector.html
[15]: https://www.google.com/webmasters/sitemaps/
[16]: http://www.bhelpuri.net/Trixie/Trixie.htm
[17]: http://ohtogo.com/?p=3
[18]: http://www.ajaxian.com/
[19]: http://www.amake.us/software/firefoxy.html
[19a]: http://kmgerich.com/archive/000072.html
[20]: http://www.waywardpuppy.com/archives/2005/05/adding_addition.html
[21]: http://www.w3.org/2005/Talks/05-steven-xtech/

[wdik]: http://whatdoiknow.org/enjoying/
[jz]: http://jeremy.zawodny.com/linkblog/
[laughing]: http://laughingmeme.org/mlp/
[simple]: http://www.simplebits.com/notebook/
[simion]: http://simon.incutio.com/blogmarks/
[foo]: http://randomfoo.net/
[etc]: http://www.fortysomething.ca/mt/etc/