Archive for the ‘Usability and ergonomics’ Category

Finding things: ideas about cities

Sunday, June 30th, 2013

In these ‘Finding things’ posts I record the paths by which I found – or didn’t find – things I was looking for online. This is inspired in part by Peter Morville’s great explanation of the ways we find things (in his book ‘Search Patterns‘.)

Diagram from book 'Search Patterns' showing how people search in different ways.

Diagram from Search Patterns by Peter Morville.


Writing presentation to introduce a film made in 1930s Shanghai – looking for information about the cultural tensions / relations between countryside and city, particularly port cities; for examples of designs which embody the state of the city and can act as touchpoints to illustrate the forces at play (economic, social, other)

Searches / finds

Failed search:

Google search gave mainly technical specialized articles, books, policy papers by urban planners of ports. Not useful. Re-formulation of specific queries (cultural history of Shanghai, modern Chinese history, etc.) produces mainly general interest, either too broad, or totally unrelated (antique store selling ancient Chinese porcelain, etc.)

Rich learning search:

Pinterest – search with ’1920′s Shanghai’ reveals a wealth of potentially interesting objects / artefacts. Saved 1920′s women’s fashion page from university course site; postcard image; various images of architectural features which could be ‘touchpoints’ for my presentation. Including:
- Jazz age portraits by Sioma Lifshitz
- publication about graphic design in China in 20′s, 30′s

Learned new terms, including names of streets and buildings and a publication and ‘qipao’, a type of dress.


NODE: NY Times article: Stealth wear aims to make tech statement
Why: I always scan the Tech section of the NY Times, to keep up with developments in interaction and media design

NODE: ‘Internet of dreams‘ blog; mentioned in the article in the context of wearable computing – future-oriented blog.
Why: The article mentions ‘untapped desires’ of people which can become new products; related to my interest in design strategy.

NODE: Re-posted blog post by Witold Rybczynski (in ‘Internet of Dreams’), ‘It’s hard to tell anymore’ about a book containing not only pictures of real building, but extremely realistic CGI renderings
Why: Perhaps interesting for an architect friend.

NODE: Witold Rybczynski’s site
After reading the original post, I notice a Book section; there I find two books that look promising:

Makeshift Metropolis

City Life

In his description of himself, Rybczynski mentions that ‘the artefacts I’ve kept longest include well-used hand tools’. Interesting – shows he may have an appreciation of the way an artefact can also be a ‘node’ revealing much about its historical context.

NODE: Amazon site, with ‘Look inside’ book function

The books focus on American cities, and aren’t quite what I’d hoped, but are definitely useful for non-professionals like me trying to find out more about cities are experienced, planned, perceived.


I once debated someone who believes that ‘traditional journalism’ – the kind of thing done by the NY Times – is dead, replaced by a flood of blogs, articles and various kinds of citizen journalism that is faster, closer to the source and more accurate.

As I ponder the way I found Rybczynski and his books, it occurs to me that this may be the answer. The combination of a heavyweight network of professionals like the NY Times journalists, and personal curation and sharing, is extremely powerful. The point is: when reading the NY Times, I always find things I need to find, whether I’m looking for them or not. And I find them quickly. And of course, the expertise and policies of the journalists guarantee a high level of reliability.

Functional form: thoughts on ’19th-century modern’ and interface design in 2013

Sunday, March 31st, 2013

In ‘Nineteenth Century Modern’ Herwin Schaefer argues that vernacular and technical design played a key role in establishing the aesthetics that later crystallized in the functionalism of Gropius and others. He also argues that this role was ignored or written out of history by later commentators and analysts, who replaced it with a more heroic interpretation in which enlightened innovators successfully rebelled against Victorian bad taste. In this version, functionalism is the happy end, producing modernist design which was ‘…clear…organic… whose inner logic will be radiant and naked, unencumbered by lying facades and trickeries…’ (Walter Gropius, quoted by Peter Gay in ‘Modernism: the lure of heresy‘).

I don’t know which aesthetic ideas may have influenced the designers of the New Orleans streetcar, but it provided my first vivid experience of functionalist design. There were times when riding it reminded me more of sitting at a sidewalk cafe, than being in a vehicle. You could watch people, even hear conversations from close by, while waiting at a traffic light.

Interior of streetcar: note the white metal ceiling with bare bulbs, the plain wooden seats, the canvas shades: all materials that are their own ornament. Image from:

It’s a 20th-century design, but I suspect it’s the kind of experience Schaefer was talking about, had by people in all walks of life, as they were exposed to the beauty of devices whose form derived from their adaptation to function, especially from the actions they performed.

The machine age may have strengthened the bond between ergonomics and aesthetics which was already present in much practical, vernacular design. Ergonomics – the ‘match’ between a machine or component and its users and environment – became a profoundly determining influence on aesthetics. In Schaefer’s words, a ‘logic of function’ was found which gave these aesthetic qualities to the products of the nineteenth century.

Q: Is there a ‘logic of function’ for virtual interfaces?

As designers of interfaces in virtual environments, we’re confronted with a new transition, the opposite of the one described above: as Dan Saffer points out, the elements in a virtual interface can take almost any form – and often any function – we wish. Functionally speaking, clicking a cartoon bear gives the same result as clicking a picture of a button, faithfully reproduced to evoke the affordances of a real physical push-button.

So is there a logic of function – an ergonomic basis – for our aesthetic design decisions in these interfaces? Here are some first thoughts towards design principles:

1. Let the design reflect the form of the path taken by the user. Interactive media has a unique capacity to register and display the unique individual path taken through a product (current examples include the breadcrumb trail and pearl-growing and social navigation features). Like a handle fits the hand, perhaps the interface can be made to fit ever more exactly to the exact path taken by users through the structure over time. To date, many attempts to ‘personalize’ in this way have been unsuccessful, because they fail in predicting the user’s behavior and hide essential ‘road signs’, often along with the very content users are seeking. But as algorithms and behavior change, can we perhaps do a better job?

2. Watch out for overdecoration in visual metaphors. I hate most ‘skeumorphic’ interfaces (for example, the imitation of the reel-to-reel tape recorder in the Apple Podcast app). They look to me like the overdecorated Victorian designs that modernists rebelled against. (In this, I’m probably already a typical over-50. Younger users with no real experience of reel-to-reel tape recorders tell me it adds a welcome touch of character.)

3. Be sensitive to emerging conventions. The tiny representation of a forgotten type of 3.5 inch disk, as a symbol for ‘save’, seems to be here to stay. And why shouldn’t we cultivate such things as artefacts that connect us with our history?

Victorian interior (image from:

Image of old-fashioned reel-to-reel tape recorder used in Podcast app from Apple.

One I personally hate: the largely useless, visually confusing 'reel-to-reel' metaphor in the Podcast interface.

Infographic representation of user test results

Tuesday, January 1st, 2013

Created a neat new way to visualize the efficiency / effectiveness exhibited by small groups of test respondents. The example in this document is based on a real test, but of course the client and organization have been eliminated for reasons of confidentiality.
Now: which one of you wants to create a little app that generates this infographic automatically? I have some suggestions for the player interface :)

Infographic chart showing vertical time line with rectangles representing web pages found during browsing by usability test respondents.

Chart shows vertical time line for each user - each dot is 10 seconds. The green squares are right pages clicked, the red ones are wrong ones.

Here’s an example of a page with results of 7 users. Note how the end points make a neat little graph showing the success rate. In the remarks at bottom, you find an explanation of one user’s behavior, which looked like failure but actually wasn’t.

Example of chart with results of usability tests for seven respondents.

Note how the end points form a graph of the success rate.

Talking to Amazon: online form with packaging feedback

Sunday, May 31st, 2009


A simple case: Amazon sent the box set of three little books by Jim Krause in a box that was too small. This caused the book box to break. Was their packaging feedback form able to contain this simple story? Not really.


The form contains a rating, followed by a list control (radio buttons) about the size of the Amazon package. This is the right topic, but the options ‘Too small’ and ‘Way too small’ are not included! The only options are: ‘about right’, ‘too big’, and ‘way too big’. So I leave it blank, thus leaving out the most important feedback. The rest of the form works pretty well – good scannability, path to completion is clear, responsive enabling and disclosure makes uploading the photo and indicating its relevance easy. And the success message leads me into checking and eventually revising the form.

Visually, the form is well-organized. The highlighting of the three topics with pale blue bars and large font size, the clear vertical scan line, the color deviation of the success message, all minimize eye movement and create a clear visual hierarchy and flow.

Improvised input devices: plastic card for touchscreen

Sunday, January 11th, 2009

Saw an interesting example of ‘folk’ input devices at Dudok cafe – rather than fingers, almost all the waiting staff use their ID cards as input devices. This works well, especially because the touch screen contains elements too small to comfortably select with fingertips. The following two photos show the starting screen of the interface, and a total view of the user. A nice example for the first-year students becoming acquainted with the use of ethnographic research techniques in design. Observations like this can result in new input devices.


Anti-usability classics: the doorbell

Sunday, November 4th, 2007


How difficult can it be to make a doorbell that is intuitive to use? Apparently very. Look at this thing! Note that the company finally had to label the bell button twice (the word ‘bel’ with arrow and the white label on the bell button, with the name worn away by hundreds of fingers). Note that the the bell icon on this button is on its side instead of the normal, vertical position. The button competes with at least three other square panels which look no less or more like buttons than it does. The entire thing couldn’t do a better job of concealing the most essential feature: the button you press to ring the bell!

Affordances: a classic example of how NOT to do it

This is a good example of what happens when design ignores ‘perceived affordances’. This principle, invented by psychologist J. Gibson and popularized by Don Norman in his book ‘The Design of Everyday Things’. Simply put: the general appearance, especially the shape of things gives you strong intuitive clues about the potential ways we might use them. If something has an opening and is hollow, you might put something in it (think of a cup to hold liquid). If I tell this to a first-year class without an example, they look at me like I’m nuts. But just look at what happens in expensive, professional products like this doorbell! Do any of the little square panels of which it is made look more ‘pushable’ than others?

The PIN machine: solving a usability mystery

Saturday, October 27th, 2007


For more than a decade, we’ve been using little machines on the counters of shops to pay, by inserting our card with the magnetic strip on one side… and usually we insert it into the slot with the magnetic strip on the wrong side. The handy pictogram above the LED screen (above at left) somehow doesn’t work. There have been tens of re-designs, but we still stubbornly misinterpret it. In a moment of brilliance, I figured out how to re-design the pictogram and make it work. A neighborhood office services shop ‘Vlug ‘n Zeker’ (Fast ‘n Reliable) has implemented the pictogram to test my idea – the first results are coming in today…


Usability Crime: Marnixbad Swimming Pool

Saturday, November 4th, 2006

Remember the old days at the pool? Standing in a puddle with an armful of winter clothes and shoes, discovering that the locker only can be used by inserting a 10-cent piece that went out of circulation 40 years ago?

Marnix Bad BraceletTo avoid these kind of annoyances, the recently completed Marnixbad swimming pool provides visitors with a digital bracelet. When you wear the bracelet, doors see you coming and swing open, lockers offer space, and the cash register in the corner quietly notes your payment. At least, that’s how it’s supposed to work… Here’s the bracelet at right. Now follow me while I try to go for a swim in this environment filled with embedded intelligence. And discover a Great Usability Crime…


Fisheye Menus

Saturday, October 21st, 2006

A interesting applet with a interesting new solution for searching in absurdly long menus.

The Fisheye Menu is designed to be self-explanatory. All of the items are visible, and can be accessed by moving the mouse. No mouse clicks are necessary for navigation! Because there are so many items, a small mouse motion will move to the next item, so a focus lock mode has been implemented which lets you select items near the focus more easily. Move the mouse on the right side of the fisheye menu to enter focus lock mode, or on the left side for regular fisheye mode.