This chapter draft from my upcoming book “From One to Zero: Minimalism in Programming” will appear in revised form in 2021 with NoStarch (SanFrancisco). Stay tuned for updates on the book launch:
In this chapter, you’ll enter a vital area in computer science that greatly benefits from a minimalistic mindset: design and user experience (UX). There’s hardly an area where minimalism has become more accepted as in the design of websites, software applications, and hardware gadgets. To get an idea of the importance of minimalism in design and UX, think of the differences between Yahoo Search and Google Search, the Blackberry and the iPhone, and OKC and Tinder. The winner technologies often come with a radically simple user interface. Could it be that less is more in design?
Let’s take a brief tour over some creations that have benefited tremendously due to the radical focus of their creators.
Minimalism in the Evolution of Mobile Phones
A prime example of minimalism in computing can be seen in the evolution of mobile phones (see Figure 9-1). The Nokia Senator, a “mobile” phone in the 1980s weighed 10 kilograms and was quite complicated to handle. Complexity and bloated products are a great business opportunity for companies that manage to simplify and reduce. A year later, Motorola marketed its model “DynaTAC 8000X” that was 10x lighterâweighing only 1kg. But it didnât stop there. In 1992, Nokia came up with the model 1011 halving the weight of the mobile phone again. And in 2000, Nokia achieved mega-success with its iconic Nokia 3310 weighing only 88g. Surprisingly, with the growing sophistication of mobile phone technology, user interfaces, and features, the complexity of the user interface, size, weight, and even number of buttons reduced drastically. The evolution of mobile phones proves that radically minimalistic design can be doneâeven as the complexity of the applications increases by orders of magnitude. You could even argue that minimalistic design has paved the way for the success of smartphone apps and their exploding usage in today’s world. For instance, you’d have a hard time browsing the web, using mapping services, or sending a video message to your friend with the Nokia Senator!
Figure 9-1: The evolution of mobile phones â some milestones.
But minimalistic design is not only apparent in smartphone development. Individual companies use it to improve user experience and create focused applications. What better example could there be than the Google search engine?
Minimalism in Search
In Figure 9-2, I’ve sketched a minimalistic design that resembles how Googleâand their copycatsâdesign their primary user interface as a radically simplified gate into the web. But make no mistake, the minimalistic and clean design is not an accident. This landing page is frequented by billions of users every dayâmultiple times. It may be the primary real estate on the web. For example, a small advertisement on the Google landing page would instantly generate billions of clicks and, likely, billions of USD in revenue for Google. But Google has managed to keep the landing page clean, despite the loss of short-term revenueâbecause they know that maintaining their brand integrity and focus on search, expressed through the minimalistic design, is even more valuable than the revenues generated through selling out their prime real estate.
Figure 9-2: A minimalist design example of a modern search engine.
Now, compare this clean, focused design with what alternative search engines have usedâand still useâto exploit their primary real estate (see Figure 9-3).
Figure 9-3: Search engine or news aggregator?
Figure 9-3 shows a more unfocused approach that was used by many companies providing basic web search. Yahoo was a popular example but other search engines followed the same path: they cluttered the valuable real estate with news and advertisements to boost short-term revenues. But these revenues didn’t lastâbecause this decision drove away the commodity that generated it: users. Reduced usability and increased friction in search led to competitive disadvantages and continuous erosion of users’ habitual search behavior. Any additional website element that is unrelated to search, increases the cognitive challenge of the user to ignore attention-grabbing headlines, ads, and imagesâthe smooth search experience is one of the reasons why Google continuously increased its market share. The last word isn’t yet spoken but the rising popularity of focused search engines during the last decades indicates the superiority of minimalistic and focused design.
Material Design
As it turned out, Google went even further in its attempt to foster minimalistic web designâwith the creation of the Material Design philosophy.
Material Design describes a way to organize and design screen elements according to what users already understand intuitivelyâphysical world elements such as paper, cards, pens, and shadow. Figure 9-3 shows such an example of material design. The website is structured into cardsâeach card representing a piece of content that resembles a newspaper with an image and some headline text. The look and feel of the website are almost materialisticâeven though the 3D effect is a pure illusion on the 2D screen. In principle, designers could create a completely unrealistic user interfaceâthat may even be more efficient. For instance, you may ask: what’s the use of adding a shadow around a card elementâand what’s the use of the card element in the first place?
Figure 9-4 compares a material with a non-material design where all those unnecessary elements are stripped out. You could argue that the non-material design is more minimalisticâand, in a way, you would be right. It takes less space, fewer colors, and fewer visual elements. On the other hand, if you go back to the website example in Figure 9-3, the non-material design may be much more confusing to the readerâbecause of the lack of material metaphors and boundaries. The true minimalist will always use fewer costly resources to accomplish the same task. In some cases, this means reducing the number of visual elements on a website. In other cases, this means adding some elements to reduce the time the user has to think. As a rule of thumb: user time is a much more scarce resource than desktop space.
Figure 9-4: Material vs “non-material” design
You can find a full introduction to material design with many beautiful case studies on this excellent web resource: https://material.io/design. New design systems will emerge and users will get more and more used to digital work, so that the material metaphors may easily become less useful for the next generation of computer users. For now, just note that minimalism requires careful consideration of the relevant resources: time, space, moneyâand you must weigh them according to the needs of your application. But keep in mind that with the exponential improvements in hardware and software technology, human time is a far scarcer resource than computing time!
Let’s quickly summarize the benefits of a minimalistic design before you’ll learn how to achieve it.
Benefits
By stripping away all the clutter of a web page and focusing on its core value proposition, you maximize the relative value to the user. Relative value is a critical driver of success on the web. A competing website is only a few clicks away, so users tend to access multiple services to accomplish their goals rather than using one for everything. For example, you may use Google for Search, Uber for mobility, WhatsApp for communication. You have no big issue with switching to another site with the best-in-class value proposition because the friction of switching is so low. Thatâs why only the best in class services that offer the most relative value compared to all other services tend to survive. For instance, suppose Uber created a search engine that is almost as good as Google. It would have a huge absolute valueâin a world where no other search engine existed. But in a world with a great search engine already in existence, Uberâs search engine would have very little relative value.
By using a minimalistic web or app design, you leverage this insight by focusing on the thing youâre doing best. To keep using our search example, say, youâre creating a search engine for code. Your competitor provides similar value but also offers other services on its main website such as news and recommended videos. By focusing your user interface only on code search, you can create a competitive advantageâeven though your search engine may not be superior at that point. Your superior positioning will give you a small edge and a little bit more traffic to your site and higher retention rates. This leads to a little bit more data to learn and improve your search engine resulting in a small technical edge of your search engine compared to your competitorsâ. Your market share increases by a small margin which, in turn, leads to even more data, experiences, efficiencies of scale, profits, and network effects. This builds momentum towards a higher and higher market share until your competitor cannot catch you anymore because of the higher relative value proposition youâve accumulated through an initial small advantage and your focused execution.
Apart from focusing on the core features and maximization of relative value, there are many additional benefits to minimalistic design such as the trust you built with your users, the joy it generates using your application, and the reduced friction and annoyance experienced by users. To sum up, minimalistic design gets rid of all unnecessary elements and the result is a beautiful product that likely delights your users.
How to Achieve Minimalistic Design?
Next, youâll learn some technical tips and methods on how to achieve a focused, minimalistic design.
Use Whitespace
Whitespace is one of the key pillars of minimalistic design. Adding whitespace to your application first may seem like a waste of valuable âreal estateâ. You must be crazy not to use every inch of a highly-trafficked website, right? For instance, you could replace whitespace with advertisements, call to actions to sell more product, more information about the value proposition, additional features, and more personalized recommendations. The more successful your app becomes, the more stakeholders will fight for every bit of attention they can get: every team in your organization, every feature in your application, even users and other companies will constantly try to convince you to add more stuff to your app. At the same time, nobody will ask you to remove non-whitespace elements from your app. Thinking âsubtractivelyâ does not come naturally to us humans.
Yet, replacing design elements with whitespace will improve clarity and result in a more focused user experience. Ironically, even though users will love the fact that your app has more whitespaceâtheyâll still never stop asking you to add more elements, features, or widgets. Successful companies manage to keep the main thing the main thing â and they use whitespace to remain focused and sharp. Google uses a lot of whitespace in their main search screen. Apple uses lots and lots of whitespace when presenting its products. Successful companies know that âif you confuse them, youâll lose themââand they use whitespace to reduce confusion and increase clarity of their user interfaces.
Figure 9-5: Use lots of whitespace.
Figure 9-5 shows a simple design idea for a pizza delivery service online: an image of a tasty Pizza and a button that says âOrder Your Pizzaâ. The rest of the page consists of whitespace. The whitespace supports the focus on the main thing: getting customers to order pizza. This seems simple enough and itâll be very effective for sureâbut seldomly will a pizza delivery service be bold enough to use whitespace in such an extreme way.
There are many additional ways to add whitespace to improve clarity. Have a look at Figure 9-6 that compares two ways of formatting a paragraph. Which one do you prefer?
Figure 9-6: Whitespace in text.
The left part of Figure 9-6 shows a large text block without using a lot of whitespace within the text. The right part of the figure displays the text in a more relaxed manner. It uses different ways to inject more whitespace in the text in order to improve readability and user experience: margins on the left and right around the text block, indentation of paragraphs, an increased line-height, top and bottom margins around paragraphs, and increased font size. Sure, these introductions of whitespace come at a cost: it takes more space to display the same text. Yet, the costs of this additional space are negligible: scrolling is cheap and we donât have to physically cut more trees for paper production anymore. At the same time, the benefits are very tangible: the user experience of your website or application improves significantly!
Remove Design Elements
This principle is a generalization of the previous one: it shows you how to achieve whitespace, increase focus, and reduce confusion. The principle is simple: go over all design elements and throw out most of them. Design elements are all visible elements of the user interface such as menu items, calls to action, featured lists, buttons, images, boxes, shadows, form fields, popups, videos, and everything else that takes some real estate in your user interface. Literally, go over all design elements and ask: Can you remove it? Youâll be surprised how often the answer will be: yes!
Figure 9-7: Idealized editing process.
Make no mistakeâremoving design elements is not easy! The sunk cost bias causes you to hold on to your creations even when theyâre unnecessary. Youâve spent time and effort creating them, and, these sunken costs make it hard to justify getting rid of them. Figure 9-7 shows the idealized editing process at playâand when I first learned about it in a scientific writing workshop, it completely transformed the way I thought about editing. Each element can be classified according to its importance regarding the user experience. For example, how does a menu item referring to, say, your companies blog help the user in the checkout process when ordering a product? Not much. It may even distract them and reduce the user experience. Amazon has stripped all unnecessary design elements from the ordering process, for instance, by introducing the 1-click buy button. Removing unimportant and less important design elements is a no-brainer because it guarantees to improve usability with little risk. But only the truly great designers have the boldness to remove important design elements that are not very important. Yet, this is what separates great from merely good design.
Figure 9-8: Remove unimportant elements. Left: Unfocused order page with many design elements. Right: Focused order page with unnecessary design elements removed.
An example is shown in Figure 9-8. On the left, you can see an order page for our pizza delivery service how you may see it in practice. Some elements are very important such as the address to deliver the pizza and the order button. Some elements are not so important such as a too detailed ingredient list. Some elements are unimportant or even distracting such as the âWhatâs New?â info box on the bottom. On the right, you see an edited version of this order page. We removed unnecessary elements, focused on the most popular upsells, combined the ingredients list with the headline, and combined the labels with the form elements. This allowed us to add more whitespace and even increase the size of a very important design element: the image of the tasty pizza! The reduced clutter and increased focus are likely to increase the conversion rate of the order page through an improved user experience.
Remove Features
The previous point was about removing unnecessary design elements from your application or website. If you rigorously do it, itâll carry you a long way towards creating a more focused design. Yet, your biggest leverage point as a minimalist is to remove whole features from your application! Youâve already studied this idea in Chapter 3 about creating minimum viable products. Recall that an MVP is a product version with a minimum number of features needed to validate a hypothesis. But minimizing the number of features is not only helpful when first creating a product and testing the market. It is equally helpful for an established business to refocus its product offerings. Over time, more and more features will be added to any application which gradually shifts the focus towards maintaining the functionality of existing features. This reduces the agility of an organization and sacrifices flexibility, focus, and ability to change. But with changing markets and user needs, any application must change as well. If you had infinite time and money to perfect any feature of your application, it may be a good idea to add more and more of them. But you donât have infinite resources, do you? The idea of removing features is to release energy, time, and resources and reinvest those into the few features that matter to your users.
Youâve already seen examples of feature-creep and their harmful effects on usability. Some popular examples are Yahoo, AOL, and MySpace that all somehow lost their focused products by adding more and more stuff to the user interfaces. Yet, when selecting these ânegative examplesâ of feature creep, we have to acknowledge that thereâs an availability bias at play: youâve never heard of organizations that didnât develop a successful product in the first place. So most examples of unsuccessful products are not well-knownâthey have to be.
Consequently, the terms âsoftware bloatâ, âfeature creepâ, and even âbloatwareâ have sprung up to describe the phenomenon where a piece of software has become inefficient, complex, and slow due to the never-ending addition of new features. Similarly, the most successful products in the world are very focused and have resisted the feature bloat, even if it doesnât look like they are. A great example is Microsoft for which a common perception is that itâs slow, inefficient, and loaded with too many features. But the availability bias is at play, again: what you see is all there isâyou donât see the features Microsoft has removed or never even implemented. While Microsoft is huge, feature-wise, itâs very focused considering that hundreds of thousands of software developers write new software every day. Hereâs what Eric Traut, a famous engineer whoâs worked for both Apple and Microsoft, has to say about Microsoftâs focused approach to software engineering: âA lot of people think of Windows as this really large, bloated operating system, and that may be a fair characterization, I have to admit. It is large. It contains a lot of stuff in it. But at its core, the kernel and the components that make up the very core of the operating system actually is pretty streamlined.â
To sum this up, when creating a piece of software or a web application that is used by many users for a long period, removing features must be a core activity of your daily effort because it frees up resources, time, energy, user interface space that can be reinvested into improving features that matter. Apart from many other benefits in productivity, a disciplined approach to feature removal results in a much more focused and efficient user interface.
Reduce Variations of Font Types, Font Sizes, and Number of Colors
Extensive variability leads to complexity. If you vary the font types, font sizes, and colors too much, itâll increase cognitive friction, increase perceived complexity of the user interface, and sacrifice clarity. As a minimalistic designer, you donât want to build these psychological effects into your application. For example, effective minimalist design often focuses only one or two font types, one or two colors, and one or two different font sizes. For instance, you may want to have the same colors, fonts, and font sizes for all application elements and only use variability to make the unique value proposition of your application stand out. Figure 9-9 exemplifies the consistent and minimalistic use of font types, sizes, colors, and contrasts. But please note that there are many approaches to designâand many ways to accomplish focus and minimalism on all levels. For example, you could also imagine a minimalistic design with lots of different colorsâfor instance, when you want to make the playful, colorful attributes of an application stand out.
Figure 9-9: Minimalistic use of font sizes, font types, colors, and contrasts.
Be Consistent
An application doesnât normally consist of a single user interface but a series of interfaces handling the user interaction. This leads us to another dimension of minimalistic design: consistency. We define consistency as the degree to which weâve minimized the variability of design choices in a given app. Instead of presenting the user a different âlook and feelâ in each step in the interaction, consistency ensures that the application feels like a coherent whole. For example, the iPhone provides lots of apps such as browsers, health apps, or mapping services. While it is challenging to get different app developers to agree on a consistent design, it must still be done to improve the strength of the Apple brand. To ensure brand consistency, Apple, Google, and many other software companies use brand guidelines that any contributing developer must adhere to. Make sure to check off this box when creating your own application. For websites, this can be accomplished with the consistent use of templates and (CSS) stylesheets.
Conclusion
In this chapter, youâve learned that minimalistic designers have come to dominate the world of design, exemplified by some of the most successful software companies such as Apple and Google. More often than not, the winning technologies and user interfaces are radically simple. Nobody knows what the future holds. But speech recognition and virtual reality are likely to result in even simpler user interfaces. Itâs hard to imagine a future with more complicated and harder-to-use interfaces. If you think about it, the ultimate minimalistic design is invisible. With ubiquitous computing on the riseâAlexa and SiriâI think weâll see even simpler and even more focused user interfaces in the decades ahead. So, to answer the question posed in the beginning: yes, less is more in design!
In the next and final chapter of this book, weâll conclude with a love story about focusâand its relevance for todayâs programmers.