7 Essential Guidelines For Functional Design

Advertisement

Look at what you’ve made. Beautiful, isn’t it? But does it work? For whom does it work? Of course you can use it, but can anyone else? In short, is it functional?

At the heart of every piece of practical design, whether it be a website, product package, office building, manufacturing system, piece of furniture, software interface, book cover, tool, or anything else, there is a function, a task the item is expected to perform. Most functions can be achieved in a variety of ways, but there are some basic elements a designer needs to take into account to create a product that best fulfills its intended function.

These are the elements of functional design, the process of responding to the needs or desires of the people who will use an item in a way that allows their needs or desires to be met. Functional design is both an outcome and a process. As an outcome, it describes products that work well to perform their assigned tasks; as a process, functional design is a set of practices guided by the principles that produce that positive outcome. (Functional design is also a computer modeling technique, but that’s not what we’re discussing here.)

In order to create a product that works, there are seven questions you should keep in mind about the product you’re designing, who will be using it, and how they’ll be using it.

1. Consider the product’s goal.

Consider the screwdriver. The goal of a screwdriver is pretty straight-forward: to drive screws. Although there’s certainly a lot of room for innovation in screwdriver design — there are screwdrivers with more ergonomic handles, ratchet-assemblies, magnetic tips, and exchangeable heads — ultimately everything in a screwdriver’s design is aimed towards the accomplishment of that single goal: driving screws.

Screwdriver
Ultimately everything in a screwdriver’s design is aimed towards the accomplishment of that single goal: driving screws. Image source1.

Now, consider a website like Amazon.com2. What is the goal of Amazon’s website? Amazon has a lot of different uses, some intended by Amazon and its designers and some not intended — you can look up reviews, compare product prices while you’re in a store considering a purchase, promote your brand by leaving lots of reviews, scam shoppers by creating fake storefronts, collect images of book covers for a school project, search book text for half-remembered quotes, and so on.

Amazon.com
For the folks at Amazon, the website has one purpose: to sell stuff. All the features that allow those other uses were put in place as ways to sell more products.

But none of those are the reason the site was built. For the folks at Amazon, the website has one purpose: to sell stuff. All the features that allow those other uses were put in place as ways to sell more products. (And it seems to be working!)

2. Consider who will be using it.

Perhaps the single most important consideration in the design process — and the one most often forgotten — is the intended audience for the product. What works perfectly well for one user might be completely dysfunctional for another. And if the hoped-for users fall more into the second category than the first, you’ve got a problem.

Think about the way your parents or grandparents use their computers. Anyone with a bit of tech-savviness has probably fielded dozens of "tech support" calls from family members who are simply baffled by things like adding an email account to their email program, downloading family pictures from the Web, or dealing with a too-full hard drive.

CNN
Since CNN’s web-site is supposed to be used by huge and versatile audience, it has to work equally well for all its potential users if it’s to accomplish its goal.

Why do people have so much trouble with their computers?

  • They don’t know enough about how computers work.
  • They don’t have enough experience with computers.
  • They don’t have time to figure things out.
  • They don’t enjoy tinkering until they find a solution to a computer problem.
  • The manuals are written in a dense, uninviting language that they find boring and difficult to comprehend.

Considering the kinds of problems they have can give us a clue about the kinds of questions designers should be asking about their audience.

  • What kind of knowledge do your users bring with them?
  • How much experience do they have?
  • What kind of time do they have? Are they looking for a leisurely diversion or do they want to get in and out fast?
  • What kind of personalities do they have?
  • How much support will they need, and what form should it take?

Obviously there are likely to be several audiences for any given product. Plenty of computer users have the knowledge, experience, and personality types to easily do whatever they choose to do on their computers. If you’re designing a niche product — a website for Linux users, for example — perhaps you can get away with directing yourself towards only one, narrow audience. In most cases, though, a product has to work equally for all its potential users if it’s to accomplish its goal.

3. Consider what your audience intends to do with it.

As we saw in the case of Amazon.com, there are a lot of ways that users use a product besides those that directly fulfill the product’s main goal. In fact, every user comes to a product with his or her own intention — and they are rarely the goals that designers have in mind. For example, nobody in the history of humankind has ever wanted to record what was on channel Three between 9 pm and 10pm on Thursday the 27th — yet for years that was how VCR designers insisted we program our VCRs. No surprise, then, that few people programmed their VCRs.

Instead, what people want to do is record House tomorrow night. Likewise, your dad doesn’t want to configure his POP3 and SMTP settings. He doesn’t even want to send and receive email. He wants to send pictures of the baby to Aunt Jill in Iowa. Engineers and designers have long suffered from a tendency to substitute concrete specifications and processes for fuzzy user behaviors — but users don’t do that.

TVs
Engineers and designers have long suffered from a tendency to substitute concrete specifications and processes for fuzzy user behaviors — but users don’t do that.

Adequate knowledge of who your audience is requires some sense of what their intentions are and how they are going to think about your product. That’s what Tivo3 did when they replaced the complicated process of recording a show on a VCR with a process that better reflected their users’ intentions — just select a show you want to record and hit "Record".

4. Is it clear how to use it?

The best design, as often said, "speaks for itself". It is immediately clear — at least to its target audience(s) — what a product does and how to use it. Clarity is key to functional design. Probably one of the best-designed objects in the world is the ball. With minimal instruction even infants can use it!

Chipotle.com Homepage4

In contrast, look at the website above. That’s the home page for Chipotle5, the Mexican fast food restaurant known for its use of free-range, organic, and locally-grown ingredients. Not that you’d know that from the homepage. What you know is a) they have a logo, and b) there’s something you should know about jalapeño peppers. If there were no food scare involving jalapeños, you’d see only the logo. What do you do? We can assume the site has a goal — probably to get you to buy some tasty Mexican food — but how do you, the visitor, fulfill your own goal of finding what you want to know about Chipotle?

This is a classic example of what Vincent Flanders calls "mystery meat navigation6" (presumably free-range, organically-grown mystery meat), a website navigation system so clever, so stylish, that visitors have no idea what the site does or how to do it. Make your product difficult enough to understand and it won’t get used at all — which means it doesn’t achieve its goal, which in turn means it doesn’t function.

5. How does your user know it’s working?

Thumbs up!

Remember in the Bad Old Days of the Web, when you’d make a purchase online and the "Submit" button would say underneath something like:

Please press the "Submit" button only once. Pressing more than once will duplicate your purchase.

We’ve come a ways since then, but it’s surprising how many times you still come across a website feedback form that doesn’t tell you when your message has been sent, or a search form that doesn’t tell you that it’s working on your request.

This problem is by no means limited to the online world. How often do you double-check to see that your alarm clock is set to go off, and at the right time, before you can relax and go to sleep? Or maybe you’ve run into this problem: you hit "Program" on your CD player (assuming you still have one) and key in the tracks you want to hear, but aren’t sure whether to hit "Program" again or just hit "Play" — and if you hit the wrong one, whether your program will be lost and you’ll have to re-do it.

These are all examples of inadequate feedback — it’s not clear whether you’ve completed the task you inteded to do or if there are more steps still required. While technically a product is functioning even if you don’t know it’s working, it’s not functioning well from the user’s standpoint — and products that don’t function well tend not to create very loyal users.

6. Is it engaging to your users?

One of the great products of recent years, at least in terms of engagement, is the Blackberry. Blackberry owners can’t stop fiddling with their devices — they check their email, flick the trackball around, check email again, send a text, scroll around the home screen, and then do it all over again. And again.

It’s no accident it’s earned the nickname "Crackberry."

Paper prototyping
Usability testing and paper prototyping are common methods to understand the way your target group will interact with you web-site and find out if it is engaging to your users. Image source7.

Good design draws users in, whether through visual appeal, feel, ease of use, or sheer amazement. Anyone who has ever picked up a well-made hand tool and felt the desire to build something has experienced this — the tool just feels right.

This is, in part, the aesthetic value of the design — we are naturally drawn to things we find pretty. But aesthetics are hardly the limit of what makes something engaging. There are plenty of websites out there that are downright hideous — but they work. Those long form sales pages that litter the Web hawking "get rich quick" programs and miracle cures (like this landing page8 which won the SEOmoz landing page contest9 last year) are as ugly as human ingenuity can make them — but they consistently succeed in leading visitors (at least the kind of users that the pages are designed for) to the inevitable sale.

7. How does it handle mistakes?

Blue Screen of Death

How often have you visited a web page, realized it didn’t have the information you were looking for, clicked the "Back" button, and ended up on the same page again?

You made a mistake, to be sure — you clicked the wrong link — but that happens. It was the designer, though, who decided to make your mistake difficult to undo. Good design takes into account the possibility that users make mistakes.

Unless your only desired user is a member of that very small demographic of people who don’t ever make mistakes, your design should accommodate and even anticipate mistakes as much as possible. Web designers have come up with all sorts of ways to accommodate visitors’ mistakes, from persistent menus and "breadcrumbs" to 404 pages ("Page Not Found" pages) that link to the pages the websurfer was likely to have been looking for.

Designers who don’t make room for — and offer solutions to — users’ mistakes create non-functioning products.

Conclusion

Design is necessarily a relationship between users with problems to solve and designers with solutions to offer. Too often, though, users are left out of the designer’s considerations. Whoever designed the Chipotle site, for instance, had no conception of how any part of their target audience would approach the site. They had a clever idea — "it’s minimalism, man!" — and ran with it, to the detriment of potential diners, and possibly to the detriment of Chipotle.

Unless your specialty is creating concepts that have no possibility of being made into actual products, the ultimate goal is to design things that will be used. Think about how and why your product will be used, and by whom, as a central part of the design process to assure that your designs not only can be used, but will.

Related articles

You may want to take a look at related articles:

Footnotes

  1. 1 http://www.flickr.com/photos/-po/302360126/
  2. 2 http://www.amazon.com
  3. 3 http://www.tivo.com
  4. 4 http://www.chipotle.com/
  5. 5 http://www.chipotle.com/
  6. 6 http://www.webpagesthatsuck.com/mysterymeatnavigation.html
  7. 7 http://www.alistapart.com/articles/paperprototyping
  8. 8 http://www.seomoz.org/landing_pages/9.html
  9. 9 http://www.seomoz.org/blog/announcing-the-seomoz-landing-page-competition-winner
  10. 10 http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  11. 11 http://www.smashingmagazine.com/2008/04/24/5-more-principles-of-effective-web-design/

↑ Back to topShare on Twitter

Dustin M. Wax is a freelance writer and anthropologist with a long-standing interest in design. You can contact him or find links to his work around the Web at his site at dustinwax.com.

Advertising
  1. 1

    Useful resource. Thanks :)

    0
  2. 2

    Very usefull, big thanks

    0
  3. 3

    Remember in the Bad Old Days of the Web, when you’d make a purchase online and the “Submit” button would say underneath something like: Please press the “Submit” button only once. Pressing more than once will duplicate your purchase.

    I wish that was left behind in the Bad Old Days of the Web, but unfortunately I still see it all too often. This is a very interesting and informative article. Thanks, Dustin!

    0
  4. 4

    Very useful.
    Might note that the Chipotle link is linked to http://www.smashingmagazine.com/www.chipotle.com. As far as i know, Smashing does not have a Chipotle page. :)

    0
  5. 5

    Great article.

    0
  6. 6

    Very usefull, I hope more

    0
  7. 7

    nice article

    0
  8. 8

    Rhyming Designer

    August 5, 2008 9:03 pm

    Whether designing a Web page, rocking chair, or jet engine, the No. 1 consideration must be “form follows function.” Unless you live it, don’t call yourself a designer.

    0
  9. 9

    Useful article for getting back to basics of application design. I would love to see an article about a good method for actually DOCUMENTING a functional design.

    0
  10. 10

    Great article. A lot of these are forgotten once to often, even today.

    0
  11. 11

    I needed this article :)

    0
  12. 12

    Thanks smashing M… nice article

    0
  13. 13

    Awesome article. We are in the process of creating an application for some clients and this will definitely guide us!

    -1
  14. 14

    Вот жалко, что таких русскоязычных сайтов нет. Во всяком случае, я аналогов не встречал.

    0
  15. 15

    Nice article, want more..

    0
  16. 16

    its about time you realise you are destroying the minds of young designers out there. You have no grounds to talk the rubbish that you do. Do you just pick a topic out of a hat and then make up whatever you please while trying to make it sound insightful and educational? Its horribly obvious you people talk shit. sort it out.

    0
  17. 17

    Good article.

    Just one small criticism. The first title should be: 1. Consider the product’s goal. There is no need for “what is”.

    0
  18. 18

    richard, its about time you shut the f¨*#%& up. Dont be so ridiculous… If you disliked it, tell why, not just that bull shit you wrote.

    1
  19. 19

    wonderfully useful

    0
  20. 20

    naldzgraphics.com

    August 6, 2008 3:02 am

    such a very useful article.i just dugg it.

    0
  21. 21

    excellent article. good images, too! :)

    0
  22. 22

    Clear and to the point–nice article.

    0
  23. 23

    I also appreciate that your comment system knows to convert two hyphens into a dash appropriately.

    0
  24. 24

    power to functionality!!

    0
  25. 25

    Excellent post! Another great resource on function and design is sitepoint’s usability book, or their website: http://www.sitepoint.com/subcat/usability. The book is a bit lengthy (with very few pictures!) but it has some great points and ideas as well, especially for large sites. Thanks!

    0
  26. 26

    can someone please suggest a good salon and spa site ? i have a client who needs a salon and spa site i am looking for inspiration ? ok thanks

    0
  27. 27

    Terrific article! Even more thrilled to know it was written by you, Dustin! Very easy-to-read and understand why each of these guidelines is important — and the specific examples coupled with the pictures are a lot of fun, too.

    0
  28. 28

    Great post, but it brought to mind something that Seth Godin wrote about watering down an experience so even “n00bs” can understand. The key is like you said, know your audience. If you are designing for the web dev crowd, you don’t want to dumb it down for grandma.

    0
  29. 29

    Very good article, however, I couldn’t agree less about the Chipotle site… aside from the note (which is a temporary and necessary evil, and not to be considered when assessing the design), the logo is the only thing on the page, and it starts to change if the mouse is within a couple of diameters of it. I could have been dead for three weeks and still, instinctively, my mouse would move towards the only visible element on a seemingly-static page, and then, voila! – a perfectly self-explainatory menu.

    There has to be a limit to how dim or inexperienced a reader we cater for, or we’ll end up in a world where washing machines have labels on them warning you not to use them to wash small children, and pieces of art have polystyrene stuck onto the sharp pointy bits, ignoring aesthetic. Oh, wait a minute…

    0
  30. 30

    “…nobody in the history of humankind has ever wanted to record what was on channel Three between 9 pm and 10pm on Thursday the 27th — yet for years that was how VCR designers insisted we program our VCRs. No surprise, then, that few people programmed their VCRs.”

    I disagree. I often, even weekly or daily, programmed my VCR to record programs on a certain day (Thursday the 27th for example) to record a show that was on between 9pm and 10pm. MAYBE I had the VCR begin recording at 8:58pm to 10:05pm to make sure it didn’t cut anything off.

    I thought the comment was inaccurate. So I guess I am the only person “in the history of humankind” to record a program the way the VCR manufacturers intended…

    MHO

    0
  31. 31

    Thanks to everyone for all the great feedback. This was my first post here at Smashing Mag, and I was worried I might get savaged (or smashed, I suppose). Could still happen…

    One comment, for Stacek: You may have used the VCR the way that was required by the designers — lots of people did. But your intent was not, I think, to record whatever came on between certain times on a certain channel (as evidenced by the time you came home expecting to find the latest episode of “Firefly” and instead found a baseball game that went over time or a presidential address). Your intent was to record a program that you enjoyed — but you learned to recast your intent in the language of the VCR’s interface designers, because that was the only way to realize that intention. Like I said, lots of people managed to use their VCR — but a lot more people didn’t, leading to VCR+ and ultimately the TiVO, which my 6-year old can use. Unfortunately :-) (People who watch “Chowder” also enjoy…)

    0
  32. 32

    uhhh, Stacek – you missed the point. The VCR recording reference is meant to illustrate the difference between programming a VCR and Tivo:

    “…That’s what Tivo did when they replaced the complicated process of recording a show on a VCR with a process that better reflected their users’ intentions — just select a show you want to record and hit “Record”.”

    Yeah YOU can program a VCR, but millions of people can’t (or won’t) which is kind of the point of the article – approach usability for everyone, not just yourself.

    0
  33. 33

    Quote Catcher Website Design

    August 6, 2008 10:50 am

    Great article. Shows the importance of functional specifications and research prior to serious investments in concept and design.

    0
  34. 34

    Great now that Tivo’s here all i need now is an Alarm clock which only goes off when i intend to go to work and not at 7.00 am every weekday.

    0
  35. 35

    Thanks for a nice article.

    0
  36. 36

    Ok. You win.

    Question: How did you know I love Firefly?!

    sweet serendipity.

    0
  37. 37

    Finally a web designer who knows there exist something called “users”. A refreshing contrast with 95% of the webmasters!
    Versailles, Fri 8 Aug 2008 01:05:00 +0200

    0
  38. 38

    How many designers here have had clients show them Chipotle as an example of a site that they liked?

    0
  39. 39

    Alick Nyangulu (South Africa)

    August 7, 2008 11:31 pm

    Very useful advice in all circles of life!
    Thanks!

    0
  40. 40

    3/5 stars

    0
  41. 41

    Great article, all makes so much sense yet so many people forget the simple things..

    0
  42. 42

    Stacek: Lucky guess, I suppose. Doesn’t everyone on Internet like “Firefly”?

    0
  43. 43

    The first function of a screwdriver is to be the one you choose to buy in the shop.

    Just being able to do the job well is not enough.

    If you think logic is what drives a consumer to buy anything, you are in the wrong business.

    0
  44. 44

    Get a MAC!!! Every apple user relates to what this article is all about. It is a native feeling for those who get the opportunity to interact with apple products.

    0
  45. 45

    web design company

    August 24, 2008 8:43 pm

    tumbl – In order to create a product that works, there are seven questions you should keep in mind about the product you re designing, who will be using it, and how they ll be using it.

    0
  46. 46

    Great info Dustin.

    0
  47. 47

    Kudos! to this article
    Thanks….

    0
  48. 48

    Dustin,
    How do you feel about putting together a site map for the customer prior to getting really deep into the web design?

    0
  49. 49

    The Chipotle Home page was cleared because this was an emergency. The health of their customers was at issue and they wanted to be sure the message got out. Bravo to Chipotle for putting marketing concerns AFTER health concerns. IT was NOT “mystery meat navigation”. I am a webmaster at an airline and we have a similar emergency page to post during an emergency event.

    0
  50. 50

    Very good article.

    0
  51. 51

    brilliant. very helpful :)

    0
  52. 52

    thanks a lot,

    this article had helped me to make our working better and easier than before

    0
  53. 53

    nice article…and nice SEO! You popped up number one- before wikipedia :)

    0

↑ Back to top