Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Inclusive Design

We’ve come a long way since the days of the first Macintosh and the introduction of graphical user interfaces, going from monochrome colors to millions, from estranged mice to intuitive touchscreens, from scroll bars to pinch, zoom, flick and pan. But while hardware, software and the people who use technology have all advanced dramatically over the past two decades, our approach to designing interfaces has not. Advanced technology is not just indistinguishable from magic (as Arthur C. Clarke said); it also empowers us and becomes a transparent part of our lives. While our software products have definitely empowered us tremendously, the ways by which we let interfaces integrate with our lives has remained stagnant for all these years.

In the accessibility industry, the word “inclusive” is relatively commonplace; but inclusive design principles should not be reserved for the realm of accessibility alone, because they apply to many more people than “just” the lesser-abled. Interface designers frequently think in binary terms: either all of the interface is in front of you or none of it is. But people are not binary. People aren’t either fully disabled or not at all, just like they aren’t merely old or young, dumb or smart, tall or short. People sit along a vast spectrum of who they are and what they are like; the same is true when they use interfaces, except that this spectrum is of expertise, familiarity, skill, expectations and so on.

So, why do we keep creating interfaces that ignore all of this? It’s time for us to get rid of these binary propositions!

What Is “Inclusive” In The World At Large? Link

In the world at large — meaning not one particular industry, country or demographic — the term “inclusive” applies to cultures in which, for example, women are as welcome to contribute their opinion as men are; in which a person’s race or sexual orientation has no bearing on their acceptance by a group; in which everyone feels safe and comfortable, and no one feels suppressed, stymied or silenced; in other words, a culture of equal opportunity. But when we apply the term to interfaces, it doesn’t mean that interfaces should be equal for everyone; rather, it means that they should be equally accessible to everyone, and equally empowering no matter what the user’s skill level or familiarity. When these two aspects are combined, the product gets the best of both worlds: it is accessible to more people, without being compromised for advanced users.

Super Mario Bros. was accessible to play for anyone, and fun (and sometimes frustrating) for all.

An excellent example of software that has done this well is in the video game genre, going back as far as 1985 with Nintendo’s Super Mario Bros. It was a game that truly anyone could pick up and play, with an invisible interface that taught you everything you needed to know to get started and become good at it. The screen would only scroll right, so you couldn’t walk left. You could jump, but standing on top of special bricks did nothing, so you would try to jump against them from below. Pipes visibly led down, so you’d try your luck with the down arrow on the direction pad. And at the end of the level, the bonus flag was raised high, encouraging competitive players to jump to the very peak for top points. All of the game’s mechanics were explained in one level, without a single instruction, tutorial or guiding word.

Many games since 1985 have not featured this principle to any significant degree. Super Mario Bros. truly was a game whose interface was equally empowering; meaning, the interface and product magnified the results of your efforts based on the (skill) level of your input. Put differently, beginners would see good results from their efforts, while advanced users would see far greater results from theirs. These principles aren’t limited to video game design either; they apply just as much to software applications and productivity tools, even websites! So, let’s start with some simple inclusive design concepts.

Language And Aesthetics Link

Language has an impact on everything, because it is the primary way we communicate as a species. Its significance is also frequently overlooked; a Duke University study revealed that gendered language in job listings affects a job’s appeal2, independent of the type of job. There’s more: while not a single participant in the study picked up on the gendered language, each of them did find the listings more or less appealing as a result. This raises the question: how much of an impact does the language chosen for our designs have on the number of new users who sign up or the number of customers we convince to purchase our products? No good study in this area seems to exist or be readily available, but one study (of a sort) that is available is the W3C’s own resource on people’s names around the world3 and its effect on form design. Let’s call it a good start and do more research into how language shapes the Web.

But language is just one metric that we don’t take into consideration as often as we should. Aesthetics play a significant role as well, yet there is a lot more to aesthetics than taste and general appeal. The placement of elements, whether shapes are angular or rounded, and our use of color all affect how different genders, demographics and cultures respond4 to interfaces. Because no one color scheme will please everyone all the world over, the more international our (targeted) audiences are, the more fully designed our localizations will need to be.

Interface Design Legacies Link

In the world of interface design, being inclusive means being accepting and welcoming of the many different cognitive skills and levels of expertise among users. Historically, we have striven for the perfect middle ground between approachable and empowering. Making interfaces more intuitive plays a significant role in that process, but it often demands that we dumb interfaces down (i.e. remove features), which can be undesirable for the advanced user who wants more functionality or control. With more comprehensive interfaces, a frequent “solution” to this problem is to allow users to customize the interface to their needs. But is this truly empowering? When research shows that less than 5% of people adjust default settings5, it is highly questionable whether customization and settings are truly empowering in interfaces.

Earlier, I mentioned how most interfaces offer a binary proposition: either the application is open or it isn’t. When it’s open, the entire user interface (UI) is typically available to you, whether or not you need all of it. This makes sense from a historical perspective—when all we had were physical interfaces—but it makes little sense with our modern software ones, especially since most software interfaces are far more comprehensive than a typical hardware interface.

When Steve Jobs announced the iPhone at MacWorld in 2007, he compared the yet-to-be-revealed iPhone to popular smartphones of the time, noting their main problem as being “the bottom 40%” — i.e. the hardware buttons on all of those devices. The buttons were there “whether you need them or not.” The solution, according to Apple, was a large touchscreen with fully software-based UI controls. That way, each application’s interface could be optimally designed for its particular purpose.

The point Apple made along the way was that sticking to convention is a bad idea if you want to move an industry forward. Hardware buttons used to be all a phone had. Then, they were used to supplement a tiny screen. The iPhone showed that, when it comes to innovation in interfaces, the screen should be the full surface, a blank canvas onto which software could paint any interface. The unparalleled success of the iPhone suggests that Apple has proven their point well.

But as fantastic as the iPhone may have been compared to the smartphones before it, it still suffered from this same binary UI problem. The iPhone merely shifted the problem from being device-wide to being specific to individual applications, and then it masked the remaining issues by removing features or hiding them in drill-down views, until one very elegant, simplified UI remained for each app — one that lacked the ability to become more sophisticated for users who wanted, or needed, more.

To pilots, this is a familiar view. To others, it is a smörgåsbord of buttons. Image Source: Julien Haler7

To be clear, removing features is not in itself a negative. Most interfaces get better from the process, because every visible feature, every UI control adds to the overall cognitive load of the user. Think, for instance, of an airplane cockpit and its countless little controls, dials and meters covering every surface. If you are not a pilot, the mere sight of it would overwhelm you. To an experienced pilot, however, it is simply what they need in order to fly the plane. Is this really the best we can do, though? Super Mario Bros. showed us we can do better.

In software, we have a situation that calls for the kind of innovation I’m talking about. As it is, more complicated, advanced and powerful applications feature more complex interfaces, and some can be downright overwhelming to first-time users. But not everyone wants to fly a plane — some of us are just trying to get some simple work done. Application developers try to alleviate this problem with tutorials, guided tours, help screens and overlays that explain each aspect of the UI; a great solution these things are not. What we need are better interfaces, interfaces that understand that we are human beings with different needs. What we need are…

Adaptive Interfaces Link

For interface designers with an eye on accessibility, most of their efforts have long focused on the technical challenges faced by users. Many commentators have encouraged us to consider cognitive (or learning) disabilities as one part of the broader area of (Web) accessibility, but rarely has anyone explained how to do this. Additionally, when someone sees the term “cognitive disability,” they understandably think of the mentally handicapped. But there is a huge range of cognitively able people, and they exist not on a linear scale: a quantum physicist might have a tough time figuring out how to use a feature phone, whereas the average teenager would have no problem with it.

People invest in an application (and, thus, its interface) in varying degrees, depending on how important the product is to their daily lives. This means that your interface should cater to varying degrees of investment in addition to differing levels of expertise and familiarity.

In an interface, each additional UI element increases complexity and asks for a deeper investment on the user’s part. This is why invisible interfaces (like the one in Super Mario) are so powerful: an interface that appears only when needed reduces the cognitive load, reduces the investment required to understand the product, and makes it easier for the user to focus on the task at hand. A button that is relevant only in certain contexts should be visible only in those contexts.

But we can take this principle to a level even beyond that. An interface that is truly inclusive of all kinds of users is one that begins with only the fundamentals and then evolves and adapts alongside the user. During this process, the interface can both grow and decay, acquiring more features and controls as the user becomes more fluent in using it, and dropping or reducing the prominence of UI controls that the user does not use much, if at all.

Doing this automatically also makes more sense than offering the user a large number of options to customize the UI, for two reasons: first, users shouldn’t be expected to spend a lot of time making an interface usable to them; secondly, people might not always know exactly what they want, but their behavior might make clear what they need. A system that intelligently measures what the user needs in order to deliver the most efficient, effective yet still understandable interface could allow such a thing. A highly effective interface is one that can be changed not to how each user wants it, but to how each user needs it.

Of course, measuring the cognitive skill of a user is difficult, and even then it can only be approximated. Certain aspects of the user’s behavior can be measured, which helps to inform us about how familiar the user is with the interface overall and how fluent they are in using it. The speed with which a user navigates an interface and uses or explores its features is a good metric for how comfortable they are with the interface. The frequency of their use of “Help” and “Undo” features suggests a certain confidence level. Users of keyboard shortcuts are almost certainly looking for more powerful features, and someone who uses quotes and AND and OR in their search queries is likely technically minded. These and many other measurable aspects of people’s behavior can help shape your application’s interface, which can then be adapted to better suit the needs of users.

The Nest thermostat learns from you.

This is not the end of the story; rather, it is only the beginning. Tony Fadell’s new product, Nest, is a great example of an adaptive interface in the real world. The Nest Thermostat9 learns from your behavior patterns as you go about your daily and weekly routines, and it becomes predictive, so that you need to adjust the thermostat less frequently the more you use it.

That’s but one example. The possibilities open up even more with inclusive and adaptive interfaces. One type of user might need Feature A very frequently, whereas another might need Feature B instead; a truly inclusive interface would adapt to these needs and be equally powerful for these two different types of users.

Conclusion Link

We’ve overcome the various technical challenges of interfaces and designs through Web standards, accessibility and ARIA, responsive Web design principles and touchscreen devices. But we have focused so much on these technical challenges that we’ve almost lost sight of innovating the human aspects of interface and design. The next stage of evolution for our industry is to explore how to make our applications and products more inclusive, taking into account the vast spectrum of differences in our audience, and to make our interfaces smarter so that they serve a wider range of people more effectively. Let our exploration of inclusive design begin!

(al) (il)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Faruk Ateş does creative things on the Web, like Modernizr. He is a designer, developer and an entreprenerd. Faruk previously worked as Product Designer at Apture and UI Engineer at Apple, and is currently working on an exciting new venture of his own. Read more on his site,

  1. 1

    captain anonymous

    January 12, 2012 12:34 pm

    good article, but you know the nest isn’t actually intuitive, right? it’s just fancy marketing for “it repeats your adjustments made during the first week.” it doesn’t actually “learn” anything in the ML or AI sense, so having owned one for 8 weeks or so now, I would recommend not using it as an example of adaptation. it’s a great device though, for other reasons.

  2. 2

    Niels Matthijs

    January 12, 2012 6:52 am

    A pretty interesting approach, but also a very dangerous one.

    I feel that automated suggestions (be it adaptive interfaces or simple product suggestions) can have a pretty negative effect when gone wrong. Many people hate it when a system compensates wrongly for one of their actions. An spelling auto-corrector can fix 99 errors, but people get frustrated with he gets it wrong the 100th time around. It’s often perceived as way more frustrating than correcting all these errors yourself.

    If you could find a non-intrusive way to suggest extra levels of depth without ticking off the users this could definitely work though.

  3. 3

    I’ve been reading SmashingMag for about 4 years now,
    I think this design is impressive from a code point of view, but it looks hurrendous!

    it breaks some very basic fundamentals of web design “white space is good”
    I hate how its squashed into my browser viewport now. Not Happy.

    • 4

      I think the new design looks pretty good (haven’t seen it on a phone yet though). BUT, the font+weight on that first paragraph is horrible. Very hard to read the “v” and “w”s on my desktop monitors.

    • 5

      Christopher Anderton

      January 12, 2012 5:40 pm

      People always complain on redesigns.
      There are some small things to get used to (want more contrast), but I love the new redesign. Much more easy to find things. Focus on content!

      Keep rockin!

      • 6

        The new clean layout is great at home, but not so great for people who are forced to use IE8 at their place of business.
        Two errors with the new design:

        First, we receive the following error on the site:

        Webpage error details
        User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; MS-RTC LM 8; SFIEAUTH1; .NET4.0C; .NET4.0E; InfoPath.3)
        Timestamp: Fri, 13 Jan 2012 13:59:48 UTC
        Message: Object doesn’t support this property or method
        Line: 2059
        Char: 2522
        Code: 0

        Second, if you are in an article and click the Smashing Magazine logo to go to the home page, the url places you in that article’s categories location instead of back to the home page (hitting back on the browser, doesn’t). For example, clicking the logo in this article takes me back to and not back to Not sure if SM intended this to happen or if that is an error as well.

      • 7

        Normally I’d agree with you… but I find the new site very hard to read, and frankly poorly designed. Faint colors everywhere. The usability is reduced tremendously because I simply am too lazy to focus on the awful sky blue font and read anything that is blue. At least the last re-design had a great balance of white space and bolder colors. Now the site feels cluttered and off.

        Seems now they have more inline advertising in their blog posts too. Granted, its more mobile friendly now, but I think the design is borderline hideous and way too cluttered. Whoever designed it must have their brightness and contrast around 20%…

        Mind you, I am a huge Smashing Magazine fan… if they are happy with their re-design then I am happy for them and of course will continue to read! The colors I can read anyway… ;)

  4. 8

    [q]We’ve come a long way since the days of the first Macintosh and the introduction of graphical user interfaces[/q]

    macintosh? its xerox who came up first with it. let me guess you typed this in a macbook.

    • 9

      The same old blah blah blah. The article is not about the history of UI, ok?

    • 10

      Jon MacKinnon

      January 12, 2012 8:37 am

      Those two things just happened to be in the same sentence, the author isn’t implying in any way that it was Apple who invented the GUI.

      • 11

        Why then mention the introduction of a brand that has nothing to do with the introduction of a principle, that was introduced before that brand even existed?

        • 12

          Hi MAVDL, author of the article here.

          Xerox invented the concept, but Apple introduced it to the world with the Macintosh. They’re the ones that brought the GUI to people’s homes and offices, and that’s what’s relevant here.

          Now if you have something to discuss on what the article is actually about, by all means, but let’s not waste any more time discussing a largely irrelevant, minor detail of the piece.

          • 13

            That isn’t entirely correct. Xerox actually built several thousand units of Xerox Alto. It wasn’t sold to the people, but instead distributed internally and too universities and government. It was much more than a concept.

          • 14

            I never said Xerox didn’t sell their concept, but it wasn’t a successful product in any real way. The Alto isn’t what millions of people remember as their first computer with a GUI. That’s what I’m talking about when I say “introduced”.

    • 15

      Let me guess you wrote this comment on your P4 XP machine cause they don’t make them like they used too? Constructive information without the passive aggressive gets your point across better…just a thought.


  5. 19

    The principle sounds great but I would love to read about some examples from the application software world. Physical stuff is easy – you can see how the thermostat could learn based on your feedback and some Bayes stats for example. Games are also easier as they reproduce the real world to some extent.

    I can imagine one or two useful scenarios for the software I develop -for example when displaying a large list of reports, it could show the most commonly used by the user along with a search facility. However, are there any more the author, or anyone else can think of, that wouldn’t just be a pain? I can imagine automatically removing and adding buttons or features would really annoy my users.

  6. 20

    One thing that isn’t really mentioned is that it’s great when a desired feature is discoverable through the interface, without searching the help or internet forums. Any thoughts on how to balance this with keeping the interface clean and avoiding cognitive load?
    I am worried that adaptive interfaces might ‘adapt’ a feature out of sight completely.

  7. 21

    Very cool post. I love to see technology used to serve people. It can never work the other way around.

    Techies and programmers have in their minds how they want things but they should work to serve the users first. This is why the google android has taken off. They are focused on how people want to use their phones.

  8. 22

    Great article and I really enjoyed reading it. I think adaptive interfaces by itself can be the opposite of of inclusive, as users can get frustrated with the inability to have control over what and how they can access and also for the reasons Niels Matthijs mentioned.

    That said, an optional adaptive interface can be useful, especially in combinaton of gamification in some way. One scenario I can see is an optional adaptive interface for smart phones so users can say, select that when they get a new smart phone and as they use the phone more for different purposes, more features open up. This will help with the learning curve of the older generations in learning to use the interfaces that may be intuitive to the younger generations. The game industry uses this quite a bit for games geared towards a wider audience so I’m not sure why we aren’t doing this for other complex technologies

  9. 23

    Did I miss something in this article? Changing the interface based on user behaviour could be a nightmare for most. You come back to a screen and suddenly it is different? Was that the point? To adapt a screen to how users use it would involve a constant change in the interface.

    If this is the case then familiarity with a system and consistently would be lost completely causing major headaches.

    Also nest doesn’t change it’s interface, it just remembers your settings. I don’t get why this example was even used unless there is some advertising connection here.

    • 24

      Changing something “suddenly” or randomly is of course a bad idea. Use proper UI cues to transition the user from state A to state B, making sure they understand and agree with the evolution, and offer them a way to opt out of it.

      But it’s more than that, really. It’s also about letting the user become more fluent through use and exploration when *they’re* ready for it, as opposed to forcing them to do that upfront (which is what we currently do).

  10. 25

    I like the concept. It really pushes our current way of thinking about applications and how they interact with users. At the same time, it’s lacking examples. So, promising concept, but very little real exploration of how it could actually work in the web world.

    • 26

      Examples in the web world don’t really exist yet, and that’s the problem. But since this is a new concept for this industry, the article is not a complaint; it’s a suggestion.

    • 28

      Thank you for sinayg what I’ve been thinking for a while. As much as I want to believe in open source software (I have a dual-boot OS X/Ubuntu setup on my MacBook), I don’t ever see it being competitive with closed-source software for precisely the reasons you lay out. Open source seems to work best for back-end work (Not only Apache, but also development languages like Python, Ruby, etc.) and for programmers who are used to customizing everything (e.g., emacs, vim), but for front-end and general-use applications, most open source software feels like a pale imitation of the proprietary stuff. The few exceptions I can think of, like Firefox, are notable for doing things that, at least when they debuted, the proprietary versions weren’t doing Internet Explorer was (and is) such a mountain of suck that having an alternative that not only avoided its flaws, but made genuine innovations of its own, was a godsend. But that sort of thing is rare, unfortunately.

  11. 29

    What about themes? Try to determine the groups of people that are most likely to use the interface and pre define the interface. Adobe did it with workspace pre arrangement. I agree that it is not a solution on more widely used apps or websites, but covers good number of them.

    I personaly don’t like adaptive interface that changes on it’s own, based on some AI, it’s almost always frustrating.

  12. 30

    Some interesting points made here!

  13. 31

    Moritz Gießmann

    January 13, 2012 12:17 am

    Great article. Now I’ve got to force my designers reading it :D

  14. 32

    Oh I wish every interface had requirements as simple as Super Mario Bros. from 1985.

  15. 33

    Floris Fiedeldij Dop

    January 13, 2012 1:44 am

    KuraFire strikes again.

    Great article, great read, thanks for sharing Faruk.

    • 34

      David CramerMay 31, 2011Thanks, I’m hinopg to get it out very very soon. I found a few typos which I’m trying to fix first.keep a lookout on the blog and the forum.~ David

  16. 35

    Joram Oudenaarde

    January 13, 2012 2:00 am

    I really do love the new Smashing Magazine design, although I find the article text to be absolutely húge. Especially the leading text makes me want to sit further away from the computer to comfortably read it. I think this type size would work very well and look amazing on smaller articles or less wide ones, but with the current setup it kind of feels like it’s going to explode in your face :)

    Nice article :)
    I agree with pretty much everything here, but do want to stress that inclusive design can’t be kept in mind with every job. It’s a bit similar to responsive design… it’s a nice feature that can have a high technical and readability value, but it’s not always the best choice :)

    (plus you can go overboard with it, losing sight of what’s most important on that specific job, but that goes for everything in the design world)

    • 36

      See, I think the exact opposite. The body text is tiny, and I’m forced to zoom in quite a bit to make it comfortable, though that may have to do more with the line measure than the font size. Fortunately, I can go build myself a userstyle, or use Readability.

      It’s more about what you’re used to than anything else. The body text is set to 100%, which means that it properly uses your browser’s default text size. Every site should do this. That way, we can each set our browser to our preference.

      I do like that it adapts to very large screens as well as very small ones, at least in it’s interface. I’ve rarely seen a design effectively utilize a 1900 x 1200 resolution.

      • 37

        Joram Oudenaarde

        January 14, 2012 1:44 am

        Makes sense, and I usually really like big(ger) type and more personal control on sites. But most users don’t use personal styles (some don’t even know how), and in its current interface, the type looks absolutely massive and wether or not I’m on a 20″ screen or 27″ screen, I want to sit further away. And I’m one of those people who don’t know how to make personal styles for websites I visit :)

        Actually, I wouldn’t be surprised if hárdly anyone uses that option or even knows hów to use it. And to be honest, even though I can only applaud more control, changing the design of a website (even if it’s just the type), doesn’t make sense to me personally. A site’s design should be correct shouldn’t it? If anything, they could provide the option themselves :)

  17. 38

    Really great article.Motivative post for web designer.

  18. 39


    thanks for the articles. it somewhat remindes me of alan coopers concept of (let this put me in my own words out of my memory) “computer-should-use-idle-time-to-analyse-and-optimize-user-interactions”.

    the main problem i can spot here is the enormous variety of function within modern applications. if we have a look at the unix concept (one tool for one task) we suddenly discover the elegance and simpicity of super marion bros (one game, one avatar, one action: moving).

    another example of reduction to basic features: on my windows system, i can choose between notepad, wordpad and word to write a text. different apps with different functions. notepad is fine for writing some notes and the interface is quite clean. but elegant? nice? smooth? na… have a look at byword – and a screenshot will show you what i mean. byword is simple and elegant, it’s reducing the work to a blank screen and gives you the tools you are looking for if you search them.

    I found a similar development in the wordpress editor – i just love the full screen editor view. simply reduced to the functions i need.


  19. 40

    I really enjoyed this article.

  20. 41

    Great Arthur C Clarke reference. Wish it could have been expanded on more about what he meant by “magic” and “advanced technology” but nonethless a pleasant surprise to see on Smashing Magazine. Try looking at Jacques Ellul as well.


↑ Back to top