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’m working on a project that requires some vertical text.  But I was unsure as to the “correct” way for the vertical text to be set, 90 degrees clockwise or counter-clockwise.  Luckily, I didn’t have to do a lot of research, as it’s been done for me. Robust Vertical Text Layout outlines the basic rules for vertical text for me.

In a purely physical layout scheme, each of these text layout properties would be given as an absolute: The inline progression of this run of English is top to bottom, its glyph orientation is 90 degrees clockwise, its block progression is from right to left.

But absolutes don’t hold much water.

For scripts in a non-native orientation, the natural inline text flow depends on the direction of line stacking: the text is most comfortably laid out as if the whole text block were merely rotated from the horizontal. For example, English text in vertical lines that stack from left to right will face with the glyphs’ tops towards the left and the text direction running from bottom to top. The same text, by the same logic, would in a right-to-left line stacking context face right and flow within each line from top to bottom.

Basically it boils down to this from what I can determine: Have the bottom of the text point in the direction of the block progression.

“This 12-month Carbon Trust-funded project seeks to produce best practice guidance and training material for manufacturers of controls. The aim is to improve the design and usability of controls, particularly controls provided for occupants of buildings. Building services designers and architects will also be targeted to improve the specifications for controls systems in ways that highlight usability as well as functionality. “

This is a quick overview of their upcoming survey and report on Improving the usability of building controls, and it’s intriguing.  A true inside-out view of usability, it focuses on user-design from the end-user view.

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.

A bunch of design and development links for you today. The majority (90%?) of these links came from [etc][via] the past couple of months.

* [Create really cool new windows][1] using [prototype][1a]. You can then use [script.aculo.us][1b] to have the sexy effects on the window. You _must_ try the demos.
* [24ways][2] really deserves it’s own post. It’s got [24 great tutorials/posts][2] on how to do things. Things such as:
* [Swooshy Curly Quotes without Images][2a] is great for pullout quotes.
* [Improving Form accessibility with DOM Scripting][2b].
* [An explanation of ems][2c].
* Russ Weakley shows us how to create [simple, accessible external links][3]. He uses a class in this example, but I’ve seen the same thing done using a Regex parser to loop through all the links. But that’s probably a bit much.
* [Tagcloud lets you create and manage clouds][4] with content you are interested in, and lets you publish them on your own website.

[1]: http://blogus.xilinus.com/pages/javawin
[1a]: http://prototype.conio.net/
[1b]: http://script.aculo.us/
[2]: http://www.24ways.org/
[2a]: http://24ways.org/advent/swooshy-curly-quotes-without-images
[2b]: http://24ways.org/advent/improving-form-accessibility-with-dom-scripting
[2c]: http://24ways.org/advent/an-explanation-of-ems
[3]: http://www.maxdesign.com.au/presentation/external/
[4]: http://www.tagcloud.com/
[5]: http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
[5a]: http://www.gr0w.com/articles/code/php_5_star_rating_system_using_hreview/
[6]: http://www.formarchitect.com/index.php
[7]: http://www.dragon-labs.com/articles/octopus/
[8]: http://www.skimcss.com/skimlist
[9]: http://www.smileycat.com/miaow/archives/comment-showcase.html
[10]: http://paularmstrongdesigns.com/weblog/css/navigation-magnification
[10a]: http://www.asktog.com/columns/044top10docksucks.html
[11]: http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/
[12]: http://alltheheroesaredead.com/weblog/archives/2006/02/external-related-links-on-mt-blog
[13]: http://www.cssplay.co.uk/menus/dd_valid.html
[14]: http://www.mapsurface.com/
[15]: http://www.cssplay.co.uk/menu/one_page.html
[16]: http://pro.html.it/niftycube/
[16a]: http://www.cssplay.co.uk/boxes/snazzy.html
[16b]: http://www.spiffycorners.com/

[via]: http://www.fortysomething.ca/mt/etc/
read more »

* [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

[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