The layout must die
Web is not print. This is a truism that is (fortunately) gaining ground. Unfortunately, its implications seem to be less clear to developers and designers.
Print is a linear medium. The designer decides how people are going to move through the book, leaflet, and so on, and designs accordingly. Even then, the customer stubbornly tries to use media in a way that suits him/her.
Examples:
- People leaf through magazines to get at the section they like best first.
- Brochures are read according to what the customer thinks is the most important info, not the designer.
- Dictionaries have most wear and tear on the pages with dirty words.
- People “zap” through TV-channels.
On the Web, where nothing is really linear in nature, this habit becomes the norm rather than a minor issue to advertisers.
No front door
Try as we might, there is no “front door” to a website. People can enter anywhere they like, be it through the “home” page, or any sub page which interests them more, ranked higher for their search in Google or they bookmarked earlier.
Users don’t move through a site like Pac-Man through his maze, but rather like a herd grazing; nibbling grass here, some hedge there, with some leaves from a tree for afters.
Finding this, apparently natural, behaviour facilitated enforces it. Users are finding freedom on the web that print does not offer, and in truly human form they demand more and more. The inevitable trend is towards users using not only the site as a whole, but individual pages in this grazing way.
I read many blogs through an RSS feed, without going there at all. I see their content out of the context of their layout, and if I do go to the site, I rarely see the front page. Sites I like are bookmarked on the section I want to see. Google offers me the content I’m looking for and if a site insists on routing me through a front-page after I click a search result, I assume the information has gone and I leave.
The state of current technology, and the limits of effort users are willing to expend, may mean most users still leave stuff where they find it but at the very least you should work from the notion that users skip and hop through your content, rather than move single-file from top to bottom and front to back.
Users want information presented in a way that suits them. This does not necessarily mean that they want control over the interface. Anything that requires a learning curve is a killer to conversion. Even if it’s just clicking a button to fold open or close a block. (Although I’ve seen some nifty implementations of this.) I’m not decided, therefore, on the Web 2.0 idea of letting users move content around on sites. But I do think that content should be presented in a way that allows the visitor to quickly move the eye towards the areas of interest.
I also strongly believe that websites should adapt to how the user wants to use them.
Reactive or proactive
Users express their preferences in their behaviour. By what browser they use, at what resolution, where they go on a site and where not, and so on.
These things, to a degree, are measurable. Good designers adapt their designs to what they observe. But that’s always, by definition, after the fact. Better designers allow for some leeway for their users; they anticipate different types of behaviour and allow for them in their design. Truly kick-ass designers, however, anticipate the un-anticipatable and make their sites such that they conform themselves to whatever the user does to them, whether it’s a huge 50” monitor with extreme resolution or a mobile phone screen. Or anything else a user could try to make a site be comfortable for him/her.
The same goes for information architects and the way information is structured.
Playing with Lego’s
The best, if only, approach to this is to not think of a website as a book or magazine, but as a collection of “blocks” of information, like LEGO’s, and to allow the user to graze.
Does this mean you truly can’t design a cool layout? It means you can’t think of your website as having a layout. Rather, you should think of your website as a collection of islands, each to be made to look as good as you can on their own and in any possible combination. So, keep the cool, ditch the layout.
Bad example
Hyves.nl has a fixed layout. They are not the best example out there. But they do cater to how users “graze”. They offer information in easily found blocks, in a more or less consistent arrangement, allowing users to use the site as they like.
Recently they allowed paying members to preview their new design, a design mimicked from Facebook where users are presented with all new information in a mish-mash of unsorted little shouty-boxes. To get at what a user wants to see, the user must scroll down, possibly indefinitely.
I’ve added arrows to indicate how I use the old layout, and how Hyves wants me to use the new.
Hyves old style, with several arrows indicating how I skip through blocks of interesting content, skipping info which I'm not (so) interested in.
Hyves new style with one arrow pointing downwards indicating how Hyves wants me to use their new layout.
Sad. Sad. Sad.
In short:
Bad: A website where the layout mimics existing media to a point where the user is forced to wade through irrelevant content to get at what he/she looking for.
Better: A website which offers clear and consistent navigation throughout allowing the user to skip ahead and back as they please, working from a decentralised information structure.
Best: A website which does the above, but also adapts to the user’s viewport, allows users to structure information according to personal preferences and get irrelevant sections out of the way.
Bad: Fixed websites with pixel-precise positioning.
Better: Fluid websites which allow the information to present optimally on each platform by using available space, adapting font sizes (within accessibility limits) and not relying on design and presentation for conveying the information.
Best: Websites which do the above, and look good too, no matter what.
There’s a challenge here, for sure. But not as big a challenge as you might think. Picking individual items, matching them together and making them compliment each other in many, if all, possible combinations within their context is what interior designers do all day long.
Let’s face it; if they can do it, we should be able to, too. It’s just a new way of thinking about design. In fact, I feel that the layout is a straightjacket which has held us back for far too long.
“It feels so good to kill the thing that stood between the truth and I, make it fast, make it clean, let the blood run down.”
-Sullivan, New Model Army-
We are entering an era of unparalleled design freedom and possibilities, if only we ditch the straightjacket.
The layout must die.
9 Comments
Comment by David Dylan Jessurun — November 29, 2009 @ 9:24 pm
PS: I know, my own blog fails my rule. The reason for this is that I had very little content at first, so to prevent empty pages, I went with this. A new design is in the works.
Comment by Marlies — November 30, 2009 @ 10:09 am
Good blog David, and a good point.
Scrolling down forever to get at the next point of interest is “not done”, visitors tend to leave before they get there.
I’m not saying I’m a top-notch designer, but I DO listen to what my visitors have to say about my site.
Now if I only knew how to make it function right in FF…
I’ve come here FROM Hyves, because of your posts there protesting their new layout.
Keep that up please, even when I tend to give up by now…
Pingback by Tweets that mention Portfolio David Dylan Jessurun -- Topsy.com — November 30, 2009 @ 4:19 pm
[...] This post was mentioned on Twitter by JamesWilk, David Dylan. David Dylan said: The layout must die: http://www.defcon0.com/the-layout-must-die/ [...]
Comment by David Dylan Jessurun — November 30, 2009 @ 8:25 pm
Why don’t you post your question regarding FF here? :-) Thank you for the kind words. :-)
Comment by Jeroen Coumans — November 30, 2009 @ 11:55 pm
Some remarks:
- non-narrative print is not linear but is designed to help you get to the most important content very fast. Designers even help you with this by offering all kinds of navigational aids, such as color-coding articles, a table of contents, highlights etc.
- the point of non-linearity in websites is mute since users may not enter through the homepage, as you point out yourself. Furthermore, how can a layout enforce linear reading if a website is filled with potential exit paths in the form of links and sidebars? Similarly, you can skip the entire sports section in the newspaper, or ads in a magazine.
- the LEGO approach is exactly what magazines, newspapers, brochures etc. do to enable users to cherry-pick content, it’s not exclusive to web sites.
- a liquid design is not always the optimal solution in displaying a stream of chronological information, be it a list of blog posts, an article or a stream of updates, since you’re always confined to ideal line lengths of 30-40 words. This is one of the most essential rules to keep content readable and usable – something you do on your blog as well.
- users don’t like to think about how they should process information. It’s the job of the designers to facilitate this as much as possible. That’s where a grid, typography, colors, whitespace etc. come into play. Remember when you first saw the Hyves homepage? I bet you found it incomprehensible, because you weren’t familiar with it at all. It’s through regular use and familiarity of content that you’re able to efficiently use it. Just as with a newspaper, or a magazine.
- I strongly believe in design according to the needs of your audience. But that should always be based on facts gathered through research, ideally a mix of marketing, sociological research and quantitative measurement (e.g. statistics), not assumptions.
Comment by David Dylan Jessurun — December 1, 2009 @ 12:26 am
Hi Jeroen,
Thank you so much for your insightful comments.
“- non-narrative print is not linear but is designed to help you get to the most important content very fast. Designers even help you with this by offering all kinds of navigational aids, such as color-coding articles, a table of contents, highlights etc.”
Very true, yet it’s still in nature a linear medium. The phenomenon you describe is fairly recent, too. (I have worked in old-school publishing.)
“- the point of non-linearity in websites is mute since users may not enter through the homepage, as you point out yourself. Furthermore, how can a layout enforce linear reading if a website is filled with potential exit paths in the form of links and sidebars? Similarly, you can skip the entire sports section in the newspaper, or ads in a magazine.”
I think that underscores my point, rather? Yes, you can skip, but you can’t go sideways. Web-users jump from Hyves, to Wikipedia, to a LOLcat picture, to an MSN conversation (brb, MSN coming in) (back) and, increasingly, display the same behaviour on the actual website.
“- the LEGO approach is exactly what magazines, newspapers, brochures etc. do to enable users to cherry-pick content, it’s not exclusive to web sites.”
Quite true, but the web does it better. If we let it.
“- a liquid design is not always the optimal solution in displaying a stream of chronological information, be it a list of blog posts, an article or a stream of updates, since you’re always confined to ideal line lengths of 30-40 words. This is one of the most essential rules to keep content readable and usable – something you do on your blog as well.”
True, although my blog is a rush-job of good intentions shelved due to a relatively sudden rush of jobs/work, waiting for much-needed updating.
There is fluid, and there is fluid. There is such a thing as too much of a good thing. But because we can, we should try to accomodate all known viewports, and anticipate the unknown ones.
“- users don’t like to think about how they should process information. It’s the job of the designers to facilitate this as much as possible. That’s where a grid, typography, colors, whitespace etc. come into play.”
They come into play, but who says they are playing the same game? I never said to ditch those. (Keep the cool) I just said to think about them in a different way.
“Remember when you first saw the Hyves homepage? I bet you found it incomprehensible, because you weren’t familiar with it at all. It’s through regular use and familiarity of content that you’re able to efficiently use it. Just as with a newspaper, or a magazine.”
You are assuming I get the interface now. Bad example, baaaaad example. :-P You are absolutely right. I mention this, although I gloss over it a bit.
But people are more and more becoming familliar with RSS readers, mobile devices, etc., too. My point isn’t that you shouldn’t think about your presentation, but that while doing so you should anticipate that it may become obsolete, or at the very least may not be present when the visitor sees your content. (Hence the reading blogs through RSS readders example.)
“- I strongly believe in design according to the needs of your audience. But that should always be based on facts gathered through research, ideally a mix of marketing, sociological research and quantitative measurement (e.g. statistics), not assumptions.”
Check out my resume. I spent six years in research. :-)
Greetz.
DD.
Comment by Somewhatbent — December 1, 2009 @ 1:33 am
Well said. Another friend was Just blogging about design v development. I’ll send you a link when I’m not reading on my phone. Your blog works in Android, BTW, so you’re effectively practicing what you preach. Having worked in ‘old school’ publishing I can somewhat appreciate what truly effective web designers/developers must do.
Comment by Tjerk — December 1, 2009 @ 10:53 pm
I think viewing a website as block of information is a rather simplistic approach. Information can be best represent as a network with nodes and connections.
Also known as Graphs in computer science: http://en.wikipedia.org/wiki/Graph_theory
You should also separate the concepts data and information. Information is data that is relevant to the user. And often the most recent data is the most relevant. And time itself is inherently linear in nature.
So if you, as a designer, want to offer the user the most relevant data, linear is not such a bad idea after all.
I agree with you on liquid layouts, but they are very difficult to maintain in large developer groups and large sites. A fixed layout prevents a lot of bugs.
One last note: the linear approach is also less chaotic and easier to use as a a user. For myself i didnt know where to start looking at the old hyves homepage.
Just my 2 cents :-)
Comment by David Dylan Jessurun — December 1, 2009 @ 11:10 pm
Hi Tjerk,
Thank you for a very informative post. You are, of course, absolutely right. However: These nodes and connections need not lay in a straight line at all, and what is relevant to someone depends heavilly on the needs of this user. For example; People visiting my tutorials may not want to follow them all the way through, but may just be looking for a snippet of code which solves an entirely different problem for them.
As for time being linear: This is commonly held to be true, but the rate at which information/data loses relevance is not.
The linear approach is only easyer if a majority of the information is useful for the user and/or there’s a good index.
Since there is no way of knowing what information is relevant to which user, at the very least even linear data should provide an adequate means of selecting and “cherry picking”, i.e. an index in books, or a clear and consistent navigation.
Also, each “node” should be thought of as a separate entity which could survive on its own. This helps the user to utilize the data in a meaningful way, to the user, which is why we build sites in the first place.
Any other approach will simply fail because users will leave, and not return.
Simple real-world examples:
-Make sure pertinent information (address, for example) is on every page.
-Make sure information which could conceivably be scraped into RSS feeds still does what you want it to do outside of original context. (Sell/market products or ideas, for example.)
-While providing a base-state is fine, anticipate the user’s unanticpateable wishes in regards to structuring data according to their needs and, if at all technologically possible, provide a means to do so. (Do not block the user from bookmarking sub-pages, for example, or force users to route through a “front page”.
-You yourself may be the user. I’m redesigning this blog, and all data stored in the database needs to be fitted in a new design. Some CMS’es store markup with content, if this had been the case, I would have been in trouble.
-Allow users to “cherry pick”. They want to. Research, observeable behaviour, shows this. So if you don’t, they will leave.
Just a few examples. Sorry for being simplistic, I try to cast a wide net with this blog.
Greetz.
DD.