HTML DOM visualizer
Here’s a great HTML DOM visualizer applet that lets you view the structure of a web page in a beautiful, almost organic way. Suddenly, this site looks very pretty indeed:
Here’s the key to the colours:
- blue for links (the A tag)
- red for tables (TABLE, TR and TD tags)
- green for the div tag
- violet for images
- yellow for form elements
- orange for linebreaks and blockquotes
- black for the HTML tag
- grey for all other tags
User testing : quick-and-dirty picture-in-picture
A simple usability testing tip : if you have access to a PC projector, simply project the user’s monitor onto the wall behind you. By doing this you can record both the screen and the user in real time using only a conventional camcorder. There’s no need for post-processing or specialist equipment such as scan converters and mixers. Obviously the quality isn’t as good, but it’s quick, easy and cheap.
Design funnels: order out of chaos
Here’s a beautiful graphical representation from the Central Office of Design (via Noise Between Stations) showing the conceptual transition from a state of design uncertainty (with multiple possible solutions), through to a single, clear design solution. It’s actually a very similar concept to Bill Buxton’s design funnel; see What Sketches (and Prototypes) Are and Are Not (PDF, 37K).
The great thing about both of these concepts is that they explicitly show that there are mutiple possibilities in design space; that there are dead ends as well as exciting innovations, and that we need to invest in research and prototyping to help us to reach the best possible design.
Punctuated equilibrium in product development?
I’m intrigued to see that there’s a new holding page on IAWiki for Punctuated Equilibrium. Punctuated Equilibiurm is the theory proposed by Niles Eldredge and Stephen Jay Gould that evolutionary change happens in small bursts of rapid change, interspersed by periods of relatively little change (or stasis).
I’ve never heard of this theory being explicitly applied to anything in the field of IA/design/development/technology before, but I’d definitely say that something akin to Punctuated Equilibrium happens in product development iterations. When I’m working on a prototype website or application, it often stays the same for a while, with only relatively minor tweaks and adjustments. Then suddenly (and usually for reasons entirely unknown to me), my whole view of the design can change. The bigger picture suddenly emerges, the loose ends connect, and the prototype is transformed into a very different (and hopefully a simpler and more elegant) beast. This idea also ties in nicely with Dan Ward’s Simplicity Cycle concept; left unchecked, products tend to slowly, inevitably become larger, more complex and more unwieldy over time as features are added. A rapid design revolution or breakthrough is needed to steer them back towards a “simple-but-good” trajectory.
It’s not just about product development either. Bigger cultural technological changes such as Web2.0, or the iPod appear (superficially at least) to follow this pattern of punctuated equilibrium, although in these cases the change is based on a rapid spread of memes.
Update: I’ve just found reference to Punctuated Equilibrium in Jeff Sutherland’s Agile development: lessons learned from the first scrum (PDF, 137K). The relevant passage is:
The most interesting effect of Scrum on Easels development environment was an observed ‘punctuated equilibrium’ effect. This occurs in biological evolution when a species is stable for long periods of time and then undergoes a sudden jump in capability. During the long period of apparent stability, many internal changes in the organism are reconfigured that cannot be observed externally. When all pieces are in place to allow a significant jump in functionality, external change occurs suddenly. A fully integrated component design environment leads to unexpected, rapid evolution of a software system with emergent, adaptive properties resembling the process of punctuated equilibrium observed in biological species. Sudden leaps in functionality resulted in earlier than expected delivery of software in the first Scrum.
I don’t think I agree with his description of Punctuated Equilibrium, though – there aren’t hidden internal changes in organisms that drive external changes. It’s more to do with sudden external changes (e.g. climate, disruption, isolation) driving rapid genetic change within a gene pool. I’d say the analogy between the theory of Punctuated Equilibrium and product development lies entirely in the rate of change and nothing else.
Cahoot redesign
It’s nice to see that Cahoot have produced a decent redesign for their website.
This was the old site:
And this is the new:
What I like about the new site is:
- It’s visually cleaner, with a much nicer visual hierarchy
- It has better use of colour; it’s warmer and more inviting
- It has a bit more personality in terms of language. I’m not entirely sure about the “The only person who’ll lend you money at a lower rate is probably your Nan” thing, but at least it’s trying to have a bit of fun!
- It’s a pure CSS design
- It’s (almost) standards-compliant – there are a couple of minor XHTML and CSS validation errors, but nevertheless a big improvement
- It has pretty good accessibility. They even claim to have (gasp!) tested the site with screen readers
- The home page content has been simplified and prioritised. Rather than chuck all their products into the home page mix, they’ve focused on a few key ones and introduced an “other products” navigation option. Suddenly everything looks really clear and focused
- It has a picture of a battenburg cake. What more could you want?!
The only real downside is that the old, clunky, inaccessible site kicks in as soon as you apply for anything online, which could be a bit of a let-down for many disabled users after the promise of the top levels of the site. I can’t believe that they’ll leave it as it is for long, though. I certainly hope they won’t.
Seek and ye shall not find
April 18, 2006 | Posted by stuartchurch | Filed under IAWith so many good examples of site search to follow these days, it’s quite surprising to come across search functionality that is truly awful. It’s especially surprising when it’s Debenhams, a big company with a good reputation that clearly invests a lot of money in their online presence.
Consider a simple task, like the one I was trying to carry out – trying to find a new blind for my office. I knew that Debenhams sell things for homes, but didn’t know whether they sold blinds or not. On the Debenhams home page, the first thing that strikes you about the home page is an extremely unsubtle hint that they’re having a sale. I think people will just about get the message there. The second thing, especially if you’re looking for a blind, is that there is no search.
Blinds should be in Home and Furniture, so at least there’s a sensible navigation option for me to follow. There’s nothing too obvious on the Home and Furniture page, but a search box has appeared, so it makes sense to just type “blind”.
Hang on, though – what’s this? Light pink sleeveless tie back jersey top? Yellow broderie anglais frill bikini halter neck top? Not exactly the sort of search results I’d expect to get from a search for ‘blind’. In fact, as far as I can tell, there is absolutely no mention of blind – or any products vaguely related to blinds – anywhere in the first page of results.
It turns out (as far as I can tell) that if you type in any non-fashion item (e.g. spoon, sofa), the results presented are always in the context of one of Debenham’s departments – usually the women’s or men’s clothing departments. This seems bizarre in the extreme, especially when the results seem to be completely unrelated to the search term. You have to select the “home and furniture” results to find a venetian blind in the results. And even then “Leather 3 seat sofa” appears before it!
There seem to be at least three quite elementary lessons for Debenhams to learn here:
- Provide a search box on the home page (and every page!)
- Make sure that the search term actually occurs in the results that are displayed (just what search algorithm are they using?!)
- Don’t impose context for your search results (although allowing users to filter all results by departments would be OK)
It’s not rocket surgery, is it?
About
I'm Stuart Church, a user experience consultant with Pure Usability in Bristol, UK. Sensorydrive is my personal blog and covers user experience design, information architecture, product design, psychology, research methods, perception and pretty much anything else that takes my fancy! You can find out a bit more about me if you want...
Latest Flickr images
