Menu Search
Jump to the content X

Designing For A Hierarchy Of Needs


Based on Maslow’s hierarchy of needs1, the idea of a design hierarchy of needs rests on the assumption that in order to be successful, a design must meet basic needs before it can satisfy higher-level needs. Before a design can “Wow” us, it must work as intended. It must meet some minimal need or nothing else will really matter.

Is this true? Or could a design that’s hard to use still succeed because it makes users more proficient or meets certain creative needs? Do you have to get all of the low-level needs exactly right before considering higher-level needs? To answer these questions, let’s start by looking at Maslow’s hierarchy.


Maslow’s Hierarchy Of Needs Link

In his 1943 paper, “A Theory of Human Motivation2,” American psychologist Abraham Maslow proposed the idea of a psychological hierarchy of needs in human beings.

  • Physiological needs are the requirements for human survival. They include breathing, food, water, shelter, sex, clothing, sleep and comfort.
  • Safety needs can be seen as a way to meet tomorrow’s physiological needs. They include personal and financial security, health, order, law and protection from elements.
  • Love and belonging needs are about social interactions. We don’t want to go through life alone. Social needs include friendship, love, intimacy, family, community, belonging and relationships.
  • Esteem needs include self-esteem as well as recognition from others. Esteem can come in the form of achievement, status, prestige, recognition, mastery, independence and responsibility.
  • Self-actualization needs relate to becoming more than what we are, and they can come from peace, knowledge, self-fulfillment, realization of personal potential, personal growth and peak experiences.

According to Maslow, if you try to satisfy the needs of one level in the hierarchy without having first met the needs of the prior level, your place in the hierarchy will be unstable. You can’t be expected to work well on a team (level 3) if you’re awaiting medical test results to determine whether you have cancer (level 2).

Lower levels in the hierarchy serve as the foundation for higher levels. If your foundation shakes, then you get pulled back down to a lower level to stabilize your foundation before moving back up the hierarchy. If not, you’re led to thoughts and feelings of stress and anxiety.

Criticism of Maslow’s Hierarchy Link

Not everyone agrees with Maslow. Many challenge the hierarchy3 because it doesn’t account for selfless acts, bravery and charity. Nor does it account for the phenomenon of “starving artists,” who seek self-actualization even while their basic physiological needs are hardly being met.

Critics point to a lack of empirical evidence and the limited scope of observation before Maslow developed his theories. Maslow doesn’t account for the spiritual side of people and leaves out too many instances that don’t fit his theory. A good idea and start, perhaps, but still far from being accepted as is. Intuitively, it feels right, but Maslow’s hierarchy has limitations4, as summarized below:

While Maslow’s hierarchy makes sense from an intuitive standpoint, there is little evidence to support its hierarchical aspect. In fact, there is evidence that contradicts the order of needs specified by the model. For example, some cultures appear to place social needs before any others. Maslow’s hierarchy also has difficulty explaining cases such as the “starving artist” in which a person neglects lower needs in pursuit of higher ones. Finally, there is little evidence to suggest that people are motivated to satisfy only one need level at a time, except in situations where there is a conflict between needs.

Chilean economist and environmentalist Manfred Arthur Max-Neef has put forth a different theory of fundamental human needs5, one without a hierarchy beyond the fulfillment of basic human survival. Instead, the satisfaction of needs is inter-related and pursued simultaneously, with trade-offs in the process.

In this system, one could fulfill creative needs without having first to fulfill needs for protection and safety.

Design Hierarchy of Needs Link

Maslow’s hierarchy can be translated to design, for which the hierarchy from low to high would be functionality, reliability, usability, proficiency and creativity.


Functionality Link

A design must be able to function before anything else. An MP3 player needs to be able to play, pause, rewind and fast-forward MP3 and other digital audio files in order to be considered an MP3 player. If it can’t perform these functions, then the design has failed.

Number of features is another story. Even though one MP3 player can pull in album cover art, others don’t necessarily have to. But if most MP3 players can do this, then yours will need to as well. What defines which features are required? The product itself? The designer? The market?

Designs that meet only basic functionality needs are considered to be of little to no value. A design is expected to meet basic functionality needs; doing so isn’t considered anything special.

Characteristics of a website that meets functionality needs might be pages that load in a reasonable amount of time, working links and pages that respond to basic browser buttons like “Back” and “Forward.”

Reliability Link

Once your design has met functional needs, it can move up to the next level in the design hierarchy: reliability. Your design should now offer stable and consistent performance. It not only works, but works again and again.

If your MP3 player sometimes plays and sometimes doesn’t, then it has failed to meet reliability needs. If it always plays but does it erratically (skipping here and there, slowing down and speeding up at times), then it has also failed to meet reliability needs.

Designs that meet only reliability needs are perceived to be of low value. Again, we expect the products that we buy to work and to work consistently.

A reliable website functions consistently. What worked yesterday should work today. When new pages and sections are added, they function just as well as existing pages and sections.

Usability Link

How easily can users accomplish basic tasks? Can the person with the MP3 player easily figure out how to turn it on and off? What about how to play, stop, pause and select a song? These are usability needs6. Your design now works consistently. The question is, can people figure out how to use it?

In addition to being easy to use, is your design forgiving? Pressing the wrong button shouldn’t delete all of the songs on your MP3 player. Consequences for simple mistakes shouldn’t be dire. If a slip of the finger deletes all music, then the MP3 player has failed to be usable.

Usable designs are perceived to be of moderate value. We do have some basic expectations of usability, but we recognize that many things don’t quite work as we expect or would like. A usable design partly distinguishes your website from those on lower levels.

A usable website has a navigation system7 that is easy to understand and use, an organization8 that makes content easy to browse, readable text, and a layout in which orienting oneself is straightforward.

Proficiency Link

Does your design empower people to do more and to do better? Does the MP3 player allow you to build playlists and easily search through songs? Does it provide an easy mechanism for downloading songs from the Internet and transferring them to and from other devices?

These are proficiency needs. It is not imperative that your MP3 player makes recommendations of new songs based on your favorites, but it is desirable and would improve the design considerably.

Designs regarded as proficient are perceived to function at a high level. A design that allows people to do things not previously possible and to expand on basic functionality is considered to be great.

A proficient website might include advanced search options, the ability to combine data from different sources into more sophisticated levels of information and Web-based tools.

Creativity Link

Once all of the lower-level needs have been met, your design can move on to creative needs. With these met, your design can now interact with people in innovative ways. The design can explore and create things that expand on the product itself.

Perhaps your MP3 player teaches music theory by making recommendations based on the musical structure of the songs you listen to most, and it provides chord charts and notes that play visually in time with the audio. Your MP3 player might allow custom skins or allow you to combine parts of songs to create new music. Your MP3 player might be the most beautiful one on the market.

Designs that meet creative needs are perceived to be of the highest level. They generate a loyal fan base. If you’re confounded by Apple’s success, wonder no longer. It satisfies creative design needs.

A creative website might include AJAX effects, aesthetic appeal and interaction through voice commands.

Criticism of the Design Hierarchy Link

The same criticism applied to Maslow’s hierarchy could be applied to the design hierarchy. Does a design have to be reliable before it can be usable? Can’t you meet both at the same time? Could your design satisfy proficiency needs for advanced users while not being the most usable for beginners?

Do we really have to get everything right at one level before committing resources to higher levels? Will a market tolerate a product that fails for no reason 10% of the time if it does everything beyond expectations the other 90%?

Again, while the hierarchy intuitively makes sense, the needs and desires of the market will likely determine what is most critical to improve in the hierarchy.

Other Hierarchies of Needs Link

Maslow’s hierarchy has been applied to more than design. Many related disciplines use it to describe what they do and propose how to do it better.

Maslow Applied to Marketing Link

Maslow’s ideas are often applied to marketing9. Whatever you are selling, the product is intended to fulfill a need somewhere in the hierarchy. To best market your product or service, identify where in the hierarchy it sits, and understand your target user’s motivation to meet those needs. A classic example is Michelin Tires. Rather than simply list the specs of its tires and boast how well they grip the road, Michelin commercials show tires that are protecting babies, with the tagline, “Because so much is riding on your tires.”

The commercial taps into our need for safety. It also tap into the next level in the hierarchy, our social needs10—in this case, our love for our children. Specs are boring. A story about making sure that you and your family are safe satisfies deep psychological needs.

Maslow’s hierarchy also helps us determine which market to target and how best to reach that market. For example,11 you have a great idea to fill the niche demand for confidence-building. Fantastic.

But you’re targeting new business owners. This group is at level two in the hierarchy: security. They’re worried about their jobs and supporting their family. They don’t care yet about feeling confident.

You would need to find either a different story12 to tell in your marketing or a different group to target.

Maslow Applied to Writing Code Link

Patrick Dubrow has looked at Maslow’s hierarchy and the design hierarchy and has put forth a hierarchy of needs for writing code13:


If you’ve ever written code, you can easily see how this hierarchy fits in with both Maslow’s and the design hierarchy. It too is intuitive and could be given the same criticisms as Maslow’s. Sure, poorly functioning code has to be fixed right away, but there’s no reason one couldn’t write elegant and efficient code from the very first line.

Resources Link

Here are a couple of additional hierarchies based on Maslow’s:

Examples Link

All of the websites below are well designed. Each has its own style and, for our purposes, addresses a different level in the design hierarchy. Most naturally meet lower-level needs, but some are more concerned with higher levels and neglect some lower-level details.

Oliver James Gosling17


The websites of Oliver James Gosling and Y3K are both single-page portfolios. They both meet functionality and reliability needs. They are also aesthetically pleasing and start to meet creative needs. Oliver’s website has a “Back to top” link that moves down the page as you do; this nice touch in usability is absent on the Y3K website. Oliver also offers a PDF containing all the information of his website, perhaps adding a bit of proficiency to the design.

Cellar Thief21
Cellar Thief meets functionality requirements and is another aesthetically pleasing website. The aesthetics match the overall message about wines. But reliability and usability could both stand some improvement. The three main links at the bottom of the home page (“Choose a wine,” “Tell your friends,” “Feel good”) all lead unexpectedly to the “About” page. Also, the website sells only the three wines of the day, which is perfectly fine but not immediately obvious.


Elan Snowboards23
Elan Snowboards meets basic functionality and has an interesting aesthetic. A lot is going on, and it’s hard knowing where to look. Links aren’t always obvious, and as you click deeper into the website, it’s not always clear where you are. On the other hand, the website offers a forum, community blogs and video, all of which make the website more proficient for visitors. Overall, the website focuses more on higher-level needs at the cost of some lower levels. Given the audience of the website, this approach is probably justified.

CSS Tricks is likely familiar to most of you. It meets needs of functionality, reliability and usability. Chris Coyier has sections for a forum, screencasts, freebies and code snippets, giving the website a layer of proficiency. Creatively, the website has a nice, albeit familiar, blog aesthetic, and it has appropriate touches of AJAX in the sidebar. Chris has also put a lot of work into small details that help to fulfill creative needs.


Ali Felski27
Ali Felski’s website is a combination portfolio and blog. It functions consistently, and finding your way around is easy. With the three lower-level needs met, the website adds creativity. One of the nice things about the design is that you could remove all of the aesthetic touches and still have a highly functional, reliable and usable design.


Antique Piano Shop29
The Antique Piano Shop meets all the lower-level design needs while offering a pleasing aesthetic. It meets proficiency needs by offering pages where you can identify your piano and sell it. Given the nature of the website, letting visitors hear what the pianos sound like might have helped to meet proficiency needs.


Fluid 960 Grid31
The Fluid 960 Grid System meets lower-level design needs well. It works, works consistently and is easy to use. While not the most beautiful page you’ll encounter, it has quite a few things to meet higher-level design needs. Most every part of the page is a working demo. You can view how each will work using either the jQuery or MooTools libraries, or you can turn JavaScript off completely to see how the demos function. You can also switch between 12- and 16-column fluid and fixed grids.


Summary Link

While Maslow’s hierarchy makes sense intuitively, critics point out the scant evidence to support it, particularly the assumption that lower levels must be satisfied before higher levels. The same could be said of the hierarchy of design needs, or even any hierarchy based on Maslow’s. They make sense on the surface but lack in empirical evidence.

These hierarchies are not absolutes that you must follow. As with all design, look at your success criteria to determine your design objectives33. Your audience may well prefer an aesthetically beautiful website that has occasional hiccups to a boring website that is perfectly reliable.

There’s no reason why you couldn’t satisfy higher-level needs before completely satisfying all lower-level needs, as long as you understand that some low-level needs are absolutely essential. Naturally, if none of your pages load, then everything else is irrelevant. You will have to remedy that problem before worrying about progressive enhancement34.

Look at the design hierarchy as a guide. Most of the time, meeting lower-level needs before attempting to satisfy higher-level needs makes sense. If your website isn’t usable, you will probably want to fix that before giving visitors more ways to be proficient.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34

↑ Back to top Tweet itShare on Facebook

Steven Bradley is the author of Design Fundamentals: Elements, Attributes, & Principles and CSS Animations and Transitions for the Modern Web. When not writing books he can be found writing for his blog at Vanseo Design or on his small business forum.

  1. 1

    design hierarchy of needs graphics fails to be usable due to the inept handling of colours while quick tineye search shows that other instances of Maslow’s diagram use right colours (white text on dark background). Nuff said.

  2. 2

    What a load of rubbish

  3. 3

    I’d add “fun” to the top of the pyramid. Once you move beyond elegance and efficiency, fun is something that can differentiate a product. How do you turn filing claims into a whack-a-mole? How do you turn system administration into Sims City? Once you can turn a task into an addiction then you’ve really climbed to the top.

  4. 4

    Nice Article! Thanks.

  5. 7

    Very informative, Thanks a lot..

  6. 8

    Maslow ‘s hierarchy of needs is a load of rubbish. So a business pay a consultant to find out what their workforce need, and the consultant comes back and says ‘hey, your workforce doesn’t need money to be happy,’, yeah right. Ok that is a very basic analysis but business studies students will be familiar with the background of the study.

  7. 9

    Hmm… I find that I’m forcing myself to find this useful.

  8. 10

    Back in 2007 I presented a talk about how Maslow’s hierarchy of needs was directly in line with the development of Web 2.0. The first web (0.0) was based on concepts from a defense network, built for survival. The second iteration (1.0) was a commerce network, support the im-personal needs of the business. When technology was inexpensive enough and the business needs had been satisfied we moved on to the social aspects of Web 2.0 and social networking.

    The talk can be viewed here:

    The direct tie-in with Maslow starts on slide 234. The military –> commercial –> social transition can be seen in many technologies.

  9. 11

    Funny. Maslow’s Hierarchy of Needs isn’t perfect, but business college programs cite it a lot. Basically if you hire a worker and you’re not paying him/her a living wage, you can’t expect much productivity.

    Conversely, higher wages don’t necessarily correlate to “smart” or “right” decisions or productivity. You have to hire the right people and foster that environment.

    I honestly think each person has their own internal needs hierarchy. It’s finding the person who fits your organizational needs hierarchy.

    As for the design hierarchy, nice :)

    • 12

      I’d agree that we each have our own hierarchy of needs. I do think for most of us there’s a subsistence level of need, Maslow’s physiological needs. In general if we’re having trouble breathing we’re not going to be spending time working on our social network.

      Once past the few things we need to do to keep us alive though, we each develop our own internal hierarchy based on what’s important to us.

  10. 13

    Hey, like everyone, my opinion is that Maslow’s diagram itself is a lot of rubish. But I really like how you adapt it to the webdesign. It is another way to understand design basics.

    Great article!

    ps.: sorry for the messy english…

    • 14

      Thanks. The idea itself isn’t mine. It’s from a book on Universal Principles of Design. Hopefully I managed to add something to the idea though.

  11. 15

    “business college programs cite it a lot”

    Business programs grasp at any straw to give themselves intellectual credibility. Redeploying a concept from the hard(-ish) sciences as a way of claiming authority is a standard move. It’s a shame, because business, design, software development, etc. are their own things, not watered-down science, and people have written intelligently about them. If you’re in business, read Peter Drucker, not Maslow-at-one-remove.

    Now, maybe that was a bit harsh. There is such a thing as creative cross-pollenization, as when someone reapplied Chris Alexander’s pattern-language concept from architecture to software design. So, if you get something useful out of Maslow, fine.

    The problem with Maslow’s hierarchy and the analogues you’ve suggested is that people interpret them to give high-level needs the lowest priority. So aesthetics are an add-on, code elegance is an add-on, etc. That’s a sure-fire recipe for crap aesthetics and crap code, and very likely product/project failure.

    For a master designer, aesthetics are a central part of the general problem-solving strategy. For a master software developer, coding elegance ensures transparency, which in turn makes facilitates functionality, reliability, etc. Don’t even get me started on Maslow’s impoverished notions of spirituality.

    • 16

      I agree with you about Maslow. I tried to point out the criticism behind his hierarchy and all those based on it. I do think there’s something useful we can take away from Maslow, but I didn’t want to leave the impression that you have to work on things from the bottom up and leave the higher levels as low priority. Much of my point was to say you shouldn’t follow these hierarchies slavishly.

  12. 17

    Really constructive and interesting article. As a designer first and a programmer second, I find I often approach the pyramid from the top down and end up flustered. This is a really useful way of thinking about process.

  13. 18

    I can’t say that I agree with Maslow or this post completely, but they got some sense about it

  14. 19

    Great article Steven!

  15. 20

    While I do not agree with the hierarchy of needs in social demographics or design, I do think that there are important concepts that all designers and developers should take from this.

  16. 21

    Very interesting article that cleverly links the purported emotional needs of humans to a corresponding heirarchy of design features and levels of information. I like the spirit of the article but caution that many people will autmatically assume this proposal or theory as “scientific fact” and go off the deep end which could lead to another “Cargo cult” science which is infecting the current fields of User Experience Analysis and Marketing.
    Already the old Psychology concept of the “Hypothalamus controlling the 4 F’s of behavior” has been grabbed by advertizers who are setting up labs to study how the “Reptillian Brain” controls our urge to buy and consume goods. Susequently they are setting up labs to wire people up to record measures such as GSR , HR, and Breathing rates as indicators of emotional buying stimulus. This article does a nice job of warning people that there is no hard fact here yet bu it is worthy of consideration

    • 22

      Thanks. I completely agree about the lack of scientific proof. I think the hierarchies based on Maslow are interesting and worthy of discussion and that there is some good guidelines to take away from them.

      But, yes, it’s important to know that there’s a lack of evidence to support Maslow and the subsequent hierarchies taken from his.

  17. 23

    Lena Tailor | DT

    April 26, 2010 12:05 pm

    Very nice article…Highly informative…

  18. 24

    It is an interesting application of the controversial pyramid. I appreciate how you modified it to web design and coding. It all really boils down to usability = quality as perceived by the user, which indicates how important it is to know your customer and their needs well before you do any design or coding.

  19. 26

    Hah! I read that title as “Designing for a Hierarchy of Nerds”. Go figure.

  20. 28

    I don’t think the word ‘proficient’ means what you think it means.

  21. 29

    Thanks Smashing for this post! It’s amazing how you could integrate Maslow’s ideas to a designer’s ideas and needs.

    That’s basically what we need though, usability then design although I think it falls more on what your purpose is in making an artwork. And well, I think that’s another kind of debate.

  22. 30

    Fantastic! this article takes my breath away!!!! im a psychology graduate and currently studying vector graphics to pursue my childhood dream. i know a lot about this Maslow’s Theory and it amazed me when you merged it with graphic design!

    Ive been searching a lot about the crossroads of psychology and visual arts. Examples are surrealism, gestalt, and now i have this hierarchy.. im so much inspired. thanx a lot.

    • 31

      Thanks. I’m glad I could give you something to think about it. As I mentioned in a couple of comments, the idea for the design hierarchy isn’t mine, but hopefully I’ve managed to add something to the discussion around it.

  23. 32

    The design hierarchy of needs is plagiarized content from a design book. I have it on my bookshelf.

    • 33

      Yes, the idea for the design hierarchy comes from The Universal Principles of Design, which served as inspiration for this post. That doesn’t mean this article is plagiarized unless you’re suggesting that no one can ever write about a topic that someone else has written about.

  24. 34

    This is tricky! I cant agree and cant disagree as well.

  25. 35

    Very helpful and amazing article i would like to add one more site in this list….

  26. 36

    very nice indeed!! i confirm

  27. 37

    nice sharing….i loved the article…quite informative.. great theory that every designer should know

  28. 38

    Nice article!.. I agree with a lot of the comments. Personally, I think the hierarchy needs to differ for each creative individual and client. Both of which should overlap.

  29. 39

    That different culture put different degrees of focus on social needs hints that the hierarchy is culturally bound. If so, studies looking across cultures will homogenize any results.

  30. 40

    Roflcopters at proficiency.


↑ Back to top