Needles and Plastic

Thoughts and musings about information design

• home
• about us
• contact

Introducing user-centred web design

07 July 2009

Needles and Plastic author Bruce Russell has written the first of an excellent four-part article about user-centred web design (often termed UCD) in Computerworld.

Bruce writes:

Web initiatives are now a commonplace strategy for business and government alike. Increasingly, websites form the centre of organisational communication and marketing strategies. As a result, most of these organisations have got over the thrill of simply having a presence in cyberspace. Now people are asking the hard questions, like:

“What’s our website really for?”

“How do we use the web to make our business grow?”

“Are our customers satisfied with the experience of using our site?”

If business owners aren't asking these questions, they should be. Not only is the web a very cost-effective mechanism for providing product and service information, especially in these ultra cost-conscious times, it is also a perfect way to deliver good customer service and after-sales support. In general, businesses in New Zealand are still seeing the web as some sort of multi-media version of TV advertising, something they know they must have, alongside the Yellow Pages listing and an 0800 number.

Too often the responsibility for the design and content of the company's web site is out-sourced to the whatever advertising or media company they deal with. Instead of becoming a key form of communication between customer and business, the result is many New Zealand commercial web sites are just online brochures, that deliver very little value for the business or their customers.

How do you fix this? Read Bruce's article for a good start.

Labels: user experience, web design

posted by Greg on Tuesday, July 07, 2009, ,

Trends in web design: footers

21 May 2009

I could write a post about trends in the design of footers in modern web design. In fact, I'd LIKE to write such an article. But I don't have the time and reckon the Smashing Editorial team have done a much better job than I could ever do.

So, I thoroughly recommend this article about the latest design of web site footers by Smashing Magazine. It is very, very good. Actually, just about everything those people do is good.

Labels: web design

posted by Greg on Thursday, May 21, 2009, ,

Web design trends in this century so far

15 May 2009

Is good web design ephemeral and led by fashion, or does what is considered good design evolve and change, mature even, over time? In an attempt to answer to this question, I'd like to contribute the results of a small potted survey I did on this recently, which asked "is web design really changing over time?" from a user-centered point-of-view.

Recently we moved our home office to a new, smaller space and I had to purge some of my books. In the process I re-discovered two old books showcasing commercial web design, and found myself examining the contents, thinking "keeper or sleeper?" Both books were from the beginning of the century, with a strong bias towards the sites of commercial companies, rather than the social-networking and Web 2.0 type of sites we have now. Both tended to rave about designs that at the time the books' authors obviously considered innovative and creative.

This is fair enough when celebrating something from a graphic design point-of-view, but web sites today are about more than the presentation, or rather they should be. As Gerry McGovern is prone to say, these days generally,

when people come to your website they are on a mission

and if you make it hard for people to use your site by using a purely visual approach to the design, they'll not come back.

Looking through the books, I was curious to know how many of the sites were still operating and what they looked like now. Nine years is a very long time on the web, so I was expecting to see some changes.

The two books were

• Web Design that Works, by Lisa Baggerman, published by Rockport in 2001, and
• Cyber Shops, by Claudia Gerdes and Jutta Nachtwey, published by Thames & Hudson in 2000.

I followed the URL for each web site featured in the books, noting the site's current status, and what, if anything, had happened to the design. It wasn't a very scientific survey (see notes about this below) but the results were interesting nevertheless.

Of the 72 sites featured in both books, 68% were still operating, with around a third no longer in existence. This is surprising. Considering the economic and social events of this century so far, I expected to find more dead sites than this. Maybe the good designs from the beginning of the century had stood the test of time? In fact, not. Further examination revealed a significant trend.



Of those still operating, the majority had new designs, and many of them had moved away from the design ideas so lauded and featured in the books. Several of the sites (7%) that previously used radical navigation and quirky presentation, had morphed into the now standard E-commerce site model, using the familiar product catalogue, product details, shopping cart structure.

It was disappointing to see some of the sites still using Flash only (10%), although this design-ethic is still very common today, sometimes appropriately, sometimes not. On the other hand, it was was good to see many (20%) were now using a web standards approach, with valid HTML/XHTML and CSS for layout and presentation.

A significant design trend

The overall design trend of the web sites in these books indicates a normalising of web design, using elements and layouts most likely considered "standard characteristics" for a web site now. These characteristics include:

• a clean, less cluttered look,
  
• a centered, fixed width layout,
  
• consistent layout and placement of site components like search and navigation,
  
• more accessible use of colour across the content body of the page (as opposed to that around the content, where visual design has become spectacular in some areas thanks to creative use of CSS),
  
• invariably white or pale backgrounds for the main content,
  
• more common use of standard or uniformly installed web fonts
• type size generally set larger and easier to read.

None of this is surprising considering some of the things discovered and written about by people like the Nielsen Group and others (see list below).

So can the design trends seen in the web sites featured in these books, be extrapolated to other web site types, like those found now in these "Web 2.0" times? I think so. Obviously the purpose of a commercial site can be quite different to that of a social networking site, but people do use both, so the design metaphors or elements that people recognise, and are familiar with using, are likely to be common for both types of site to succeed.

A problem with these graphic design books is that mostly the sites were being judged purely on their visual appeal not the usability or user-friendliness criteria considered good practice today. In doing so, these books illustrate nicely the warning that Jakob Nielsen and others give about departing from the norm in terms of web design – be very sure your audience can cope with this or you site will be doomed. On reflection, I think we've come a long way since the beginning of the century.

Greg ----------------------

Some worthwhile articles about good web design:

• Robin William's advice
• Advice from Smashing Magazine
• Excellent survey of modern good practice by Web Design from Scratch with fine examples.

Footnote: Why this survey might not be very scientific.

• I based it only on two random books, which may or may not have been good judges or relevant indicators of the web design industry – fair call, but the books were from reputable publishers, written by leading web design experts of the time, so unlikely.
  
• Maybe the books picked rubbish sites – not really, most were from highly successful retail brands and businesses, which would be expected to have commissioned leading designers of the time.
  
• There was a bias in the sites featured, in that most were commercial sites, not the more modern Web 2.0 sites we have now, where people expect to interact more – indeed, it's been my observation that the business world in general doesn't understand the web at all.
  
• My categories are completely arbitrary, and not based on any scoring system – actually the categories more or less created themselves based on what had happened to the sites.
• I didn't use any specific design criteria – true, but maybe I used experience and a trained eye.
  

Labels: web design

posted by Greg on Friday, May 15, 2009, ,

Optimise your web site for iPhones & touch-screen devices

20 February 2009

The second generation iPhones have been around for a while now and owners seem pretty happy with them. Other mobile devices and mobile browsers have appeared that use similar finger touch-screen interfaces, and people have had a chance to work with them and understand just what a change the touch interface makes to using a mobile device.

On top of this, the increase in people connecting to the internet and in particular the web, seems to have surprised many, especially in the web design industry. I've met web designers who laughed when I said we should think about optimising our sites for mobile users. "Hardly anyone looks at web pages on a phone!" has been the usual reply. Why do many web designers seem to just want to cater to the majority - "hey, most people have IE, so who cares about other browsers!" Why would you cut off potential visitors just because of the technology they use?

Anyway, it appears people do want to access web sites on their mobile device, and some predict this will be the most prevalent way people use the web in the future. Many popular sites are already providing mobile-optimised options for their users, including Google, Amazon, TradeMe (the NZ "E-bay" – actually it's a better user experience than E-bay), Air New Zealand (these guys are using the .mobi domain so that proves they acknowledge the need to provide for mobile users), Yellow Pages (NZ), Wikipedia, and one I wouldn't have predicted considering its very rich large-screen monitor-orientated interface, Facebook.

The Facebook iPhone-optimised screen is very interesting, as it shows just how pared down one has to be, or can be, to suit the mobile interface. Here's the way Facebook appears on the iPhone in desktop view (left) compared with the optimised verison on the right (image taken from the .net magazine article mentioned below.)



So what does this mean for those of us designing and running web sites?

If you have a website that is likely to be used by mobile users, then you should consider optimising your site for such devices. I've said this before on this blog, and maybe I stood alone. Not any more.

Craig Grannell has written an article for the excellent .net UK magazine about optimising a site for iPhones (Optimise your site for iPhones, Craig Grannell, .net, January 2009, pp. 72-74). In his article Craig explains that although one can use the Safari browser zoom-in interface that comes with the iPhone, and apparently some prefer it to using a laptop (are they crazy?!), he thinks developers and designers could do much more to make it a better experience to use the web this way.

By default, websites appear in pint-sized versions, with text generally being illegible and links being practically impossible to target. … all is not entirely rosey in the land of the iPhone, and developers could do more to help."

The article (unfortunately it appears to unavailable online as I write this) gives some excellent advice. First, Craig suggests web designers think carefully about whether the site is likely to be visited by a mobile user. The minutes of a local city council meeting are pretty unlikely to be used by mobile users, but the opening times of the council-owned swimming pools or the local museum may well be.

Second, if the site fits the criteria, than hone down the content, keep things tidy and simple, and present a streamlined, simplified version of site that focuses on the key features people want from it (hint: sorry, this isn't Google ads or a beautiful Photoshop-ed banner).

Then he provides two options. Create a mobile-optimised site, or create a mobile-specific site. Personally I prefer the former, as I strongly agree with this next statement he makes:

…working on an iPhone-optimised website is akin to dealing with print style sheets. As long as you're building sites using semantic markup and using CSS to style your layouts, you can [easily] create an alternate style sheet for the iPhone to present a streamlined, simplified version of your website."

Craig suggests browser-sniffing to detect the iPhone device. I'd rather use the technique of providing alternative media type style sheets in web pages – screen, print, aural, handheld, etc – and then letting the browser select which one to use, but this so clearly doesn't work in the web browsers provided with so many mobile phones (I'm talking to you Nokia). This is because the default browser on many mobile phones has been built by the phone's manufacturer and most just seem unaware of web standards. As more third-party web standards compliant browsers (Safari, Firefox, Opera, etc) are provided for mobile devices, this problem will hopefully go away, but in the meantime, I'd follow Craig's advice.

And here's how. According to Craig, the simplest way to implement this is by using Javascript to make sure an iPhone-specific style sheet is used instead. (I'm not sure where this leaves those of use who want to optimise for HTC Touch or the new Palm and Android devices, but I will try to find out for a future post. Is there a standard userAgent id for other devices or do we just use some default mobile one?)

Craig provides the code for this technique as follows:

if ((navigator.userAgent.indexOf('iPhone') != -1) ||
(navigator.userAgent.indexOf('iPod') != -1))
{
var cssNode = document.createElement('link');
cssNode.setAttribute('rel','stylesheet');
cssNode.setAttribute('type','text/css');
cssNode.setAttribute('href','iphone.css');
document.getElementsByTagName('head')[0].appendChild(cssNode);
}

I strongly recommend web designers look into this approach, or variations of it to suit the situation.

Two other tips from Craig's article are worth mirroring here.

Don't think that the superior resolution of an iPhone screen will make it easier for users to read your web site text. I was surprised to read that the higher pixel density of the iPhone screen (163ppi) compared with a typical PC monitor (in the range of 72-95ppi) means fonts that are quite readable on a larger LCD screen tend to look very small on an iPhone.

And don't use Mac-orientated design conventions, because it seems most iPhone users are not Mac users. Say what?! Love to know where he got this from.

Labels: mobile design, web design

posted by Greg on Friday, February 20, 2009, ,

There is life in information design - still

29 October 2008

Has been a while since either of us posted here. Apologies for that. Is certainly not because we haven't had anything to say! Far from it.

I'll hit you with the "we've been busy" cliché first – we've been busy. Bruce has found himself involved in a number of interesting projects, both work and play, and I've started a new job.

There goes the climate

We've both noticed an increased awareness of and demand for the skills of information design, and predict that if the overall business market in New Zealand does contract over the next twelve months, as seems likely, this will just increase competition for better ways to grab market share.

Although spending on things like web design and information management have often been the first to be cut when times got tough in the past, we have a suspicion that competition and the better economies of scale marketing through the web can present will provide good opportunities for those in the wider information design industry. Time will tell.

Labels: mobile design, web design

posted by Greg on Wednesday, October 29, 2008, ,

A web design company that talks about info design

12 March 2008

This must be one of the few web design companies I've seen in NZ that talks about information design: Click Suite based in Wellington (no surprise there - Wellington is where most of the best web work is happening in NZ, IMHO).

Click Suite were also responsible for the UI of these two cool web sites by the National Library in Wellington:

• PastPapers - which "contains more than one million pages of digitised New Zealand newspapers and periodicals. The collection covers the years 1840 to 1915 and includes publications from all regions of New Zealand." You can search for keywords across the scanned papers and the keywords are highlighted for you onscreen over the original scan. Nice work.
  
• Publications New Zealand - which gives public access to information in the huge National Bibliography of things published in New Zealand "from the earliest days of New Zealand publishing through to the present." This site is interesting in using an XML back-end and XSLT to deliver XHTML to the browser. Dat's some clever shit, and it's good to see more web people in NZ know about this stuff.

Labels: information design, web design

posted by Greg on Wednesday, March 12, 2008, ,

Why we don’t hide the front door handle inside the Batcave.

25 January 2008

I’ve just completed another round of usability testing for some clients. At times like these I find myself reflecting (yet again) on how deceptively difficult usable web design really is.

The key problem this time was that old favourite, hidden functionality.

I was testing a B2B online application, effectively a VERY large catalogue site with ordering and online invoice payment functions. The owners had found that uptake was below expectations, and anecdotal feedback was that the site was ‘slow and complex’.

When I did the test sessions I found that users did in fact say this. What they objected to was the ‘pick and add’ cart shopping model. This is all very well in a B2C situation, where retail shoppers might buy 2-3 items and the repetitive steps of finding items and adding them one by one to the cart aren’t too arduous. But when you’re ordering 25-50 items for a shop it’s a bit of a chore.

But in fact, I eventually realised (thanks to a really experienced user), the site had been built with a solution. Users could ‘pre-load’ a range of commonly-ordered items into any number of ‘ranges’, one for socks, one for undies… In effect, these were ‘pre-loaded template carts’. Users merely had to check items in the range to load them into an active ordering cart. No more searching across the whole site for correct styles and sizes - if users added the item to their ‘range’ whenever they first ordered it, the job was then done for next time as well.

Magic! The only fly in the ointment of cleverness was that the developers then made this crucial function effectively invisible.

The main navigation on the left side had a heading called ‘My ranges’ - which in almost all cases was below the page fold line, due to an excessive proliferation of much less important links higher up the navigation bar. As a result, few users ever saw it, and if they did, its lowly placement gave no clues that it was something everyone wanted.

Worse, the home page of the application, which appeared once users logged in, had a handy three-part flow diagram showing the main steps to making your order. The three main user steps (apparently) were:

Product search > add to cart > checkout.

Doh! What’s missing here, people? No wonder no one knew about creating a range… it’s being kept secret!
It’s easy to lampoon this kind of thing, but the simple truth is, if designers don’t spend time with users finding out what their experience of a site really is, then they’ll never realise when their ever-so-clever functionality is actually completely inaccessible.

Batman has lots of cool stuff in the Batcave, which he uses to fight crime. How useful would all that cool stuff be if the only door handle was hidden on the inside of the front door?

Labels: IA, user experience, web design

posted by Bruce on Friday, January 25, 2008, ,

Why can't the farmer and the cowman just be friends? or... Why every town needs its own Marshall

17 January 2008

Plenty of organisations are starting to realise they need to clean up their websites from time to time – so they hire in the usability posse. Like US Marshalls on the lawless Frontier, they call the Pinkerton Agency and hire some detectives from ‘out East’ who sweep in, clean up the outlaws who’ve been raiding the railroad, and then ride out again. Job done.

Or is it…?

I recently went back and read over a website evaluation I wrote a year ago, and then had a look at the website itself. I was flattered, they’d implemented almost all my recommendations. Clearly my massive invoice had had an effect on them! But after a couple of minutes poking about I was forced to ask myself, is this a fully user-centred website?

Well… not really.

The problem, kids, is this. UCD is an iterative process. You do it, you wait for the dust to settle, you do it again. As many times as it takes: “How many times?”

The answer to that question is: “Well, partner, how much string have you got?”

So anyway, this site was much better. It now has one set of navigation, which shows the second level pages in each section. The page headings generally match the menu headings. The home page content focuses on user needs, rather than corporate self-inflation.

But the execution of the recommendations wasn’t done by people who know what user experience really means. The information architecture is still confusing, with 13 top level headings instead of the eight I recommended. The top level pages in each section don’t point clearly to the pages on the next level down – instead they’re as splattered with links as the survivors of a paint factory explosion.

But worst of all, apart from the homepage, the writing has not improved one jot. No topic sentences, no judicious placement of key words for SEO purposes, and more random bullets than a drive-by shooting.

Reading this kind of stuff is tiring, because your brain is doing two things at once, reading the words, and trying to remember them long enough to make sense of entire paragraphs at a time. Good online writing flows like Guinness, you don’t notice it happening at the time, but by the end of the glass, you know what you’ve been drinking.

I’m going to have to reform the posse and ride back into town to clean up the cattle rustlers we missed last time - while we were tidying up the railroad.

Maybe this time the clients will decide they need to hire their own lawman to keep the peace in Silver City when the Pinkerton Men have all gone home. There’s really no replacement for having a web content manager who can actually manage the content in a consistent and user-advocating way.

Contract resources can ‘make it nice’ for a brief period, but if the website is genuinely alive, it won’t stay ‘nice’ for long. The clients need to realise they are committed to an ongoing process, which they either manage properly in-house, or keep tap-tapping regularly on that telegraph to call the hired guns back again from St Louis.

Labels: IA, information design, usability, web design

posted by Bruce on Thursday, January 17, 2008, ,

Web design is like what?

21 November 2007

Mr Zeldman has done it again. Several years ago he completely changed the way I build web sites when I read his web standards approach, and now after starting to despair that so many in the traditional business environment, tv media in particular, just do not understand the web, he has inspired me again.

This article Understanding Web Design is well worth reading, because it is so right on the button.

Labels: web design

posted by Greg on Wednesday, November 21, 2007, ,

iPhone breaks device-free web coding principle

16 January 2007

I can't believe it. Just when I was starting to think there were a few web designers out there who understood the principle of designing sites that can be viewed on any browser on any device, Apple go and break the principle on their new iPhone.

Apple claims the Safari browser built into the new iPhone is really advanced, and

...lets you see any web page the way it was designed to be seen, then easily zoom in by simply tapping on the multi-touch display with your finger."

What? How do they work out how web sites are designed to be seen? Do they mean how they look on their high-definition, wide-screen Mac machines? I hope not.

Google at least see the benefit of pushing a special web page to handheld devices, although I wish they'd used web standards and a handheld style-sheet instead of java script, but the result is the similar and it shows they are thinking about their audience.

Labels: mobile design, web design

posted by Greg on Tuesday, January 16, 2007, ,

Web This Blog

Previous Posts

• How to get value from using Twitter
• Introducing user-centred web design
• Trends in web design: footers
• Web design trends in this century so far
• Optimise your web site for iPhones & touch-screen ...
• There is life in information design - still
• Technical Communication morphs and changes into In...
• Ground Zero: where customer experience and informa...
• A web design company that talks about info design
• Why we don’t hide the front door handle inside the...

Archives

• January 2007
• February 2007
• March 2007
• May 2007
• August 2007
• September 2007
• November 2007
• December 2007
• January 2008
• March 2008
• April 2008
• June 2008
• October 2008
• February 2009
• May 2009
• July 2009
• January 2010

Links

• GDID
• Wired Internet Online Experience Blog
• Optimal Usability Blog
• Contented
• InfoDesign
• Statistically Improbable Phrases

Site feeds

• RSS
• Atom

Powered By

Hosted by

© 2007 – 2009 Needles and Plastic | Site Feed | Back to top
Based on a design by Andreas Viklund | Blogger Template by Gecko and Fly, modified by us

© 2009 Needles and Plastic