Tony Stephens / Simian Design

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/
(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
(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/
(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

[TAW (Web Accessibility Test)][1] is a tool for the automatic analysis of Web sites, based on the [W3C - Web Content Accessibility Guidelines 1.0][2] (WCAG 1.0).

They have three different versions of TAW for your needs. A downloadable version, a web-based service, and a Firefox extension.

All three are free, all three complement each other, all three are very useful. All three pretty much rock.

[1]: http://www.tawdis.net/taw3/cms/en
[2]: http://www.w3.org/TR/WAI-WEBCONTENT/

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