/Culture/ The top 10 design mistakes
24/10/2008 | Filed under Discover > Culture
Bad design is all over the web like a rotten smell. Craig Grannell counts down the ten biggest online design crimes, and looks at how to avoid them – with a little help from expert industry opinion
It’s all very well us rattling on every month about the very best in design, offering you expert tutorials, insight and wisdom, sucked directly from the brains of the brightest in the industry.
But while adding that extra layer of polish to your site is important, it’s also vital not to neglect the design basics. However attractive-looking your homepage, however cutting-edge your images, break one of design’s fundamental rules and you’re heading for disaster on a truly monumental scale.
So hold your nose and screw up your eyes: we’re going to take you on a journey through design’s biggest crimes and plumb the very depths of awfulness. It’s won’t be pleasant, but it’s necessary to face up to the true horrors lurking out there.
We’ve canvassed some of the industry’s top experts on where so many sites go wrong, and how to avoid falling into the same traps yourself. As a result, we’ve compiled our ultimate top ten list of design mistakes. Commit them at your peril – you have been warned …
01 Non-standard UI elements
With web design, it’s tempting to define not only the appearance of page content, but also the browser controls. This is commonplace with forms and scrollbars, but Jakob Nielsen of useit.com reckons mucking about with these elements is dangerous. “Basic GUI widgets are the lexical units that form dialogue design’s vocabulary,” he cautions. “Changing their appearance or behaviour is like injecting foreign words into a natural-language communication.”
Nielsen cites usability studies that show how users overlook some of their options upon encountering non-standard scrollbars, and says the less work you do, the better your scrollbar. “Some of the world’s best interaction designers have refined the standard look and feel of GUI controls over 30 years, supported by thousands of user testing hours,” he points out. “It’s unlikely you’ll invent something better over the weekend.”
Even if you do create an amazing interface component that’s evaded the likes of Apple and Microsoft, Nielsen recommends sticking with the defaults. “Users may fail if you deviate from expectations on something as basic as UI controls. Even if they don’t, they’ll expend substantial brainpower trying to operate something that shouldn’t require a second thought. Users’ cognitive resources are better spent understanding how your site can help them achieve their goals.”
02 Inconsistent design
Gone are the days when designers peppered layouts with every font known to man and the kind of colour palette that would make a drunken hippy blush. However, design consistency isn’t at the fore of every designer’s mind, and Eugene Reisch, senior art director at Digital Outlook, reckons it should be. “People need to know where they stand, and clear differentiation between elements is vital,” he says. “If your design elements are inconsistently designed or laid out, the result will look clumsy and be hard to use.”
With modern tools and rigorous use of style sheets and semantic markup, it’s not like consistency is particularly hard to achieve anyway. “Just make sure when you make a design convention, you stick to it and keep it simple,” advises Reisch. “If your buttons are round, make them all round. If they’re glossy, make them all glossy. Avoid having 20 different button styles going on in one website, or a dozen font styles, or your layout will end up looking like a jumble sale.”
03 Following the crowd
Everyone wants to be like the cool kids. But when designers follow suit to impress their peers – often at the expense of client needs – something’s gone very wrong. “Unfortunately, it takes longer for the penny to drop for some,” complains Aaron Bimpson of Switch Media. “Whether the latest design trend is 3D gel effects, unreadable small type or Web 2.0 reflective nonsense, you can bet your life they’ll be found all over the latest web launches for shopping centres, law firms, plumbers, schools and any client not clued up enough to know any different.”
Bimpson reckons if certain designers spent as much time reading and responding directly to client briefs as they do browsing myriad ‘CSS showcase’ sites, the web would be a more interesting place. “We’re all guilty of perusing ideas from time to time,” he admits, “but inspiration can be found everywhere you point your noise, from print to architecture and street art.” Online, Bimpson recommends concentrating on researching your clients’ competition and relevant sources, such as marketing literature and financial reports, to get a feel for brand awareness. “Above all, steer clear of dodgy back-patting CSS portals.”
04 Design before content
The mantra ‘content is king’ has been hammered home since people finally realised Flash intros weren’t big and weren’t clever, and yet many sites appear to have been constructed with little thought to their content. Olav Bjørkøy explains: “You should never design anything before you have a clear grasp of the content. In other words, design for your content: don’t insert content into the design as an afterthought.”
Sometimes, designers argue, this is inevitable. Clients leave it late to provide material, leading to designers hurriedly placing content as a deadline draws near. However, Bjørkøy reckons every design element should only exist if it enhances the presentation of the content: “If an image or colour makes content easier to grasp, keep it. Otherwise, throw it out.” This is often easier said than done, but rolling deadlines can help – provide relative timescales for portions of a site build, rather than specific dates. So can planning ahead regarding likely generic elements. A good starting point is Ryan Singer’s An Introduction to Using Patterns in Web Design on 37signals.
05 Version targeting and capping
Oh, how we used to fume when we visited a site with Netscape and were told to ‘upgrade’ to Internet Explorer, or when we’d have the latest Flash plug-in installed, but were told to ‘upgrade’ to the previous version, in order to view some lame animation. Yet capping and version targeting persist, with websites citing specific browsers or specific versions of a specific plug-in. Sometimes, perhaps, it’s unavoidable, but if you find the need to splash similar warnings around a site, do so with a little intelligence. “I’m fed up of being informed by websites that my browser ‘does not support JavaScript’ or I have ‘the wrong version of Flash installed’,” rants Ryan Roberts. “No! I have JavaScript disabled for security reasons, and if you can’t be arsed to provide alternative content, at least tell me I ‘may have JavaScript disabled’.” And some quick plug-in maths from your correspondent: setting a lowest version number for a plug-in = not the worst thing in the world; setting a highest version number and forgetting to amend it when an updated version arrives = stupid in the extreme. You have been warned.
06 Making HTML-like Flash sites
This mistake could probably have gone under the broader title of ‘using the wrong technology’, but, hey, it’s the Flash issue that really gets our goat. Siim Vips, CEO of internet development and marketing company Modera, agrees. “I’m sick of seeing Flash sites that look like regular HTML,” he says. “They look like normal web pages, but you can’t scroll using regular keys, often can’t copy and paste text, and so on.”
The problem echoes Nielsen’s earlier complaint about non-standard UI elements: users’ expectations are confounded, and for no real reason. Vips elaborates: “On such sites, you can’t select or zoom in the normal way. The website simply doesn’t do what you’d expect, thereby breaking simple usability rules.” He suggests going the whole hog when creating Flash websites, and building something unique, to make users aware that regular functions are unlikely to work. Alternatively, use Flash elements for specific components, and stick to HTML for the rest.
07 Not making a site’s purpose clear
“You can’t expect all users to put in effort,” says Dave Luff, senior designer at Digital Outlook, on what he calls ‘the biggie’ of design mistakes. He’s talking about sites that ‘force’ users to put in work finding out what the site is about. “There’s no reason to force a user to your ‘About’ section to find out who you are,” he says. “No matter how good your website looks, if I don’t know roughly what’s going on, I’ll leave.”
The solution, he argues, is astonishingly simple: “From the moment a user hits your home page, get your site’s purpose across. If it’s selling rubber gloves, I need to know that sharpish.” Luff’s point is bang on: too many sites make stupid assumptions, and a diminishing number bother to say why a site exists and what the organisation that owns it actually does. Amazon can get away with this, but any site that’s not a gargantuan brand can’t. “When users arrive, provide a brief, clear story: who you are and what you offer,” concludes Luff. “They don’t need an essay, just a flavour to tempt them in.”
08 Not listening
What we’re talking about here is not listening to client wishes, demands of users, advice from the community, and even your own instincts. “Design is all about solving problems,” states Mark Boulton. “To do this, you need to ask questions and listen to answers, otherwise how will you really know what the root of the problem is? You have to ask users, otherwise how will you know your solution works for them?”
In a sense, this is a warning about design itself: it’s not purely about visuals, and it’s not just about getting code right and satisfying the usability lobby. It’s about crafting a complete solution that’s fit for purpose. “Never feel stupid for asking the simplest of questions,” says Boulton. “Clients are more familiar with their products than you, and so milk them for every ounce of information.” He also warns never to underestimate your own instincts, especially early on in the design process: “If you get a feeling, act on it. Nine times out of ten, you’ll be right. And if it’s a bad feeling about the client or project, make sure you act on it: a bad project, coupled with a bad client, makes for a very miserable designer.”
09 Inflexible CSS layouts
With an increasing number of designers heading towards CSS-based layouts that make heavy use of fixed, floated divs, inflexibility is causing problems, as Bart Szyszka, design technologist at NYTimes.com, explains: “Designers often specify margins and padding in CSS when they needn’t and shouldn’t. If divs are floated, everything has a set width and the margins are all specified, there’s no breathing room, and layouts can wrap, notably in Internet Explorer 6.”
This mistake comes to a head most often when large sites are edited by many hands. Layouts become fragile when someone puts in an image that’s a couple of pixels too wide. “This can make the entire layout break, and entire columns of content may wrap underneath the ones they’re supposed to be alongside,” explains Szyszka.
The solution is to rethink how you’re defining various page components. With a two-column design, for example, it might be best to not define a right-hand margin for the second column, or to float it right and not set a right-hand margin on the left column. “It’s best to make columns more breathable by deliberately having empty space where you’d expect a margin or padding,” concludes Szyszka.
10 Visual flair over user experience
One for the technologists, here, and we’re already hearing graphically oriented designers tutting over their lattes (and Nielsen’s smile widening). But this point is one far too often ignored: no matter how pretty a site is, people won’t bother with it if the user experience is poor. “This is a pet hate of mine, because it shows a lack of thinking and concept development,” says Ian Barrington-Light of Ralph. He’s not suggesting creativity be substituted for user experience, but that the two should work in harmony. If people can’t use your site, no one will see it, and if there’s no focal point, you’ll struggle to attract and retain users. “The human eye needs a focal point,” says Barrington-Light. “Use one to pull users towards content you want to sell.” He recommends limiting your font palette and sticking to it, keeping typography consistent site-wide, and using limited colours, settling on two or three choices and a couple of complementary accents. “Also, create a basic structure to your site; where the navigation belongs, where the content exists, etc. Once you’ve made these rules, stick to them and you can build your eye-candy around a strong foundation.”
Bookmark with:
Comments
Ali Whiteley / 25/10/2008 / 12:17 / http://www.alistairwhiteley.co.uk
I think some of these common mistakes are often what makes some designs so unique, and I'm talking about only the select few where it can work. Designing within rules and boundaries is never going to offer anything new or exciting and I believe it's when you experiment and try out new ideas that something special is likely to appear.
On the subject of flash, I'm no flash expert but I like to add bits to my websites. Flash offers a whole different selection of tools to display content but a large chunk of the web community seem to see or fear it. It's only recently that I read Flash movies are to be indexed by Google. But why can't Google and Adobe work together and allow the content within flash movies to be indexed too and solve the SEO problems surrounding it. I can't believe that the technology can't be tweaked to do this. As for Flash which looks like html... why not? we often see javascript which looks like php or css layouts which looks like traditional table layouts. Isn't it all about the communication of the content rather than the channel of communication?
Øystein / 25/10/2008 / 13:04
Great article. I've seen too many examples of that last point. Nothing is more annoying than people claiming to be web designers just because they know photoshop, totally oblivious to the fact that its just about so much more than that.
Eddie / 27/10/2008 / 20:00
Here's a mistake - using FIXED SIZE TEXT like on this site, moran.
Martin Bean / 28/10/2008 / 12:03 / http://www.mcbwebdesign.co.uk
Well Eddie, you would think one knew have to spell "moron" before calling an international publication such a thing...?
Nevertheless, good read. Designers that tend to follow trends are the ones that will be left behind and each and every site that they have produced with "modern techniques" at that time will instantly become dated when the trends change in the near future.
Kimberly / 30/10/2008 / 16:52
Thanks for the tips. I'm mainly a print designer. I'm currently working on my MFA in Integrated Design. Breaking into web design has caused me some anxiety because I want to do it the right way. This tips are really helpful. Thanks again!
PS- Why the hate Eddie?
Louis Simoneau / 09/11/2008 / 04:00 / http://louissimoneau.com
Using an absolute measurement for text size (pixels, like on this site) rather than relative measurements (like ems or %) was a problem because Internet Explorer 6 refused to let users resize text set in pixels (or points, for that matter). However, with the release (and widespread adoption) of version 7 of said browser (which is available as a free download and runs on Windows XP and Vista, and features full page zooming), using an absolute measure is no longer so much of a crime. It also allows a much finer control over the presentation of a site and more consistent display of a page across browsers.
There is however no arguing that the default text size on this page is much too small :-) But Ctrl-Scroll solves that in a hurry.
Evan Monaco / 23/12/2008 / 18:00
Keep it simple and clean.
Oh...and get to the point!
James / 28/05/2009 / 09:29 / http://www.creativresponse.com
Good artical, there are still so many websites out there that are shocking bad, with over complicated designs and basiclly forgetting all about the target audience and usalbilty.
Mr. Zzapback / 03/07/2009 / 13:54
@James
Coming soon: an 'artical' from Craig about websites with hilarious bad spelling and dire 'usalbilty'.
Make sure you don't miss it! (I heard your name's in it)
