3 components of good web design

3 components of good web design

Actually the site PSDTUTS has great tutorials for Web Designers. But one of the recent articles about what design roles that constitute a good web design discipline did not convince me. The reason is that the author uses rather weak definitions of the core terms.

The article proposes three components:

  1. Aesthetic Design
  2. Interface Design 
  3. Information Design

These terms are not very specific in their application to web design – and yet the article uses rather narrow definitions.

But a better terminology for the core question the article is raising would be

  1. Visual Appearance
  2. Interaction Design
  3. Information Architecture

With these terms a reader would find much more useful information.

Content, structure and form


Any design problem can be separated into questions of content, structure and form. This is most simple approach is to reflect them (even web design). A given design task touches three domains:

  • Making sense with given CONTENT
  • Creating appropriate STRUCTURE
  • Finding the optimal FORM

And this is how these three domains relate to the terms I proposed above:

  1. Visual Appearance asks »How does FORM interact with CONTENT?«
  2. Interaction Design asks »How does STRUCTURE interact with FORM?«
  3. Information Architecture asks »How does CONTENT interact with STRUCTURE?«

PS: While I have concerns about that particular article I think the PSDTUT website offers a lot of very good tutorials. The site even offers a $9/month plus membership with additional material for people with professional ambitions. I think that is a very fair deal!

Design for discovery

One of the most interesting topics for information architecture is search. There are ways to find, explore, browse and discover things in digital domains. The value of information increases with the possibility of being found. So design for findability becomes the most important strategy to increase the value of information.

One of the distinct experts in the field of Information Architecture is Peter Morville. He gave an interesting one-hour talk at Google about »Ambient Findability and the Future of Search«:

He talks a lot about the problem of search in general (he is speaking at a search engine company). How to enable better search and findability is a question of a) metadata and b) representation.

It is the representation aspect of searching and finding, that is still a huge area for design innovations. While improving the Google search result page may be too difficult, there are a lot of very specific problems where searching and navigating an information domain gets a very interesting and particular design issue.

A designer needs a good understanding of the fact that users have different approaches of locating things depending on

  • the nature of the information,
  • the structure and relations,
  • the quantity of data,
  • their habit of solving things systematically and
  • the prior knowledge about the domain.

Naturalism vs. explicitness

There constantly is a discussion about making the computer feel more “natural” to the user. I do think that this approach led to the graphical user interface we are all used to today and it is philosophically the right approach to deal with technology. But I also do believe technology is not yet ready to allow “natural” interaction in most occasions.

If you don’t believe me this video will hopefully bring this discussion to an end:

And don’t miss this Second Life parody:

UI Design and market success

UI Design and market success

While researching some information about user interfaces for video sharing websites I stumbled over a statement in an article at news.com by Alonso Vera of NASA Ames Research:

»Design is starting to change who succeeds and who fails. A few years ago that wasn’t true. If I had a better algorithm, I would win!«

I had a conversation about this yesterday. Users are fed up with lousy interfaces. Whenever I do a research into a UI field – mobile phones, websites, software applications – I run into these strange situations, that the user is left alone with an error message and litterally no practical advice what to do. It really baffles me, that obvious pitfalls are left open until release of the software or product and kept unadressed for month if not years. So if Design comes a market driver, that is a very good sign!

Example: If you are a Macintosh Users (and some are indeed) and you go to hi5.com – a music/video community website with 50 million users (!) and you want to upload a video file (one of the core features), you will be presented with a form where you can enter title, tags and category for your video. Fine.

Screenshot of a Hi5.com blooper

But after clicking you will see this error screen (above) telling you that someone named VideoEgg (What by the way do they have to do with it?) does not support the browser you are using and that you need to go to videoegg.com to check a list of supported browsers.

While I wondered that I was not presented with that list (or at least a link to that list) directly (Again when were Hyperlinks introduced to the World Wide Web??), I almost got angry after unsuccsessfully trying to find such a list anywhere on the proposed site. Remember: Hi5.com claims to serve 50 million users!

I took me half an hour to try all browsers available on my system – costing me time and quite some nerves AND money. And the effect of this really obvious and simple UI problem: I won’t give hi5.com a second shot on me or recommend that site.

What does that mean? Maybe the “web 2.0” market is one where idiots happyily buy stuff from slightly smarter idiots?

Multi-touch screens

Tobias Jordans pointed to a new astonishing video of a 8-by-3 inch two-panel multi-touch sensitive wall mounted screen:

The video makes evident, that the interaction feels continuous and natural. And since Apple has shown with the iPhone that multi-touch can improve small interfaces as well, I think this technology could replace the mouse one day.

There as an article at Fastcompany.com stating that Jefferson Han was already approached by media companies and intelligence agencies to partner.

Update: There is also a short presentation in February 2006 by Jeff Han on The TED 2006 conference.

Leopard preview

Leopard preview

Keynote presentations from the WWDC are always very entertaining to watch – even though the author of this Wired article thinks the presentation was uninspiring. I don’t think so.

The business numbers were impressive. Apple sales and market share is growing. That is a change. Apple always had a small market share. The machines were said to be unstable, expensive and slow. Gimmicks for design geeks and fashion victims. I think this image changes. The hardware is top notch, capable of runing Windows if needed and comes with a very robust operating system and pre-installed software. The other applications of Apple are offered at fair prices. The new machines are priced very aggressiveley. Apple is now offering the best price/performance ratio for those that want to run Windows (see this blog post). The Mac Pro is a bargain.

The only thing I found pretty low during the Keynote was the Vista bashing. I takes more to compete with the market leader than picking few screenshots and claim Microsoft is ripping off MacOS X. This kind of “comparative marketing” is lousy.

But in any case people have to admit that Apple does in fact innovate. If Time Machine is as easy to use as it seems, this really a breakthrough to fight loss of data on your drives.

The new feature I personally like most is iChat 4. It now allows lecturers to give live presentations to remote audiences with Keynote. Lecturers could be invited to give presentations without the need to travel to remote places. This is very attractive for higher education.

Screenshot of iChat 4.0 showing remote presentation with Keynote

How wonderful it would be if a presenter could stream this video to a QuickTime Streaming Server for viewing by a large audience?



Tim and Simon from send|recieve presented a verly early alpha version of Mnemomap one week ago on the Webmontag event in Cologne (which happened to be the first one in Cologne I couldn’t attend). I am sure they’d love anyone to try Mnemomap and drop some feedback about it.

Screenshot of Mnemomap

The About page states:

mnemomap is a new way to search the internet. It combines technologies of social networking, search engines and other data sources to help you formulate search queries and find really relevant information.

The JavaScript Accessibility Problem

James Edwards from Sitepoint.com looks at AJAX and Screenreaders:

There doesn’t appear to be any reliable way to notify screen readers of an update in the DOM. There are piecemeal approaches that work for one or more devices, but no overall approach or combination that would cover them all.

The Mozilla Developer Center offers some information on the work IBM is doing in this area: Accessible DHTML. Also the W3C is working in a design for making dynamic web content accessible one day.

Mighty Mouse not so mighty

Tim Bruysten forgot his »Apple Mighty Mouse« after his presentation on Web Monday meet-up. I took it with me to hand it back to him later. I am using it now. And I have to say: I don’t like it.

I don’t want to go into too much detail, but generally the absence of physical feedback for the three different “buttons” requires the user to get that from the visual/acoustic feedback on screen. The presence of two more buttons is not visible and not haptic. So it remains a mental concept.

It is a nice object to explicate the notion of affordance.

Consistency in Design is (part of) the right approach

Jared Spool points out that consistency is a matter of dealing with user’s current knowledge – not with formal elements of the visual design. Unfortunatly he uses a very misleading headline for is article which is really not in line with the point he is trying to make. The headline is »Consistency in Design is the Wrong Approach« and he writes:

The problem with thinking in terms of consistency is that those thoughts focus purely on the design and the user can get lost. “Is what I’m designing consistent with other things we’ve designed (or others have designed)?” is the wrong question to ask.
Instead, the right question is, “Will the user’s current knowledge help them understand how to use what I’m designing?” Current knowledge is the knowledge the user has when they approach the design. It’s the sum of all their previous experiences with relevant products and designs.

And then he proposes to focus on current knowledge of a user during the design process and concludes:

Funny thing about thinking about current knowledge: when you’re done, your interface will feel consistent.

Wait! What was the headline saying? Wasn’t it talking about consistency being a wrong approach? He continues:

My recommendation: anytime someone on your team starts talking about making things consistent, change the conversation to be about what the users’ current knowledge is.

Well, finally what Mr. Spool is saying in his article is just that consistency is not a question of form, but rather question of cognition. But maybe a headline like »Consistency is about cognition and not form« wouldn’t have been “news” enough to attract readers. To spin headlines into something more flashy that will potentially catch the eye when it appears in a list of news items is a common practice among web authors. I’d say the message in the headline should be consistent with the message of the article to really allow users to decide if it is worth click (or an actual read) or not.

Anyway, the problem with current knowledge is, that it might not be the right question at all to solve the cognitive problem, because current knowledge is hypotetical most of the time or a statistical measure at best. So after two team members bang their heads about »consistency vs. current knowledge« you might consider to change the conversation to »learnability« (e.g. asking how »user’s current knowledge« actually could be established and how users understand new things instead of speculating there is something they already have understood). And suddenly you are looping back to formal consistency, because learnability also is a question of reinforcing things through similarity and repetition – especially if the signs used are kind of arbitrary (which is more often the case than necessary I admit).

So I think the conclusion suggesting that current knowledge is a better way to think about the cognitive issue is not a good way to address the problem. It is just one way to think about the problem (among two or three valid others).

I fully agree with Jared Spool in this: The idea of formal consistency can lead to a mindset that shortens out the conceptual implications. The constrain to just formal variables has become a bad habit. It’s like you can see that people talk about »look & feel« while actually just talking about »look« and not »feel«.


The article by Jared Spool has been linked by elearningpost and GUUUI.com.