Create an account


Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Tut] Less Is More in Design

#1
Less Is More in Design

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!

https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 604px) 100vw, 604px" />

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.

https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 605px) 100vw, 605px" />

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).

https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 604px) 100vw, 604px" />

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.

https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 604px) 100vw, 604px" />

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.

https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 604px) 100vw, 604px" />

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?

https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 604px) 100vw, 604px" />

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!

https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 604px) 100vw, 604px" />

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.

https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 604px) 100vw, 604px" />

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.

https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 604px) 100vw, 604px" />

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.

References


The post Less Is More in Design first appeared on Finxter.



https://www.sickgaming.net/blog/2021/02/...in-design/
Reply



Forum Jump:

[-]
Active Threads
Sick Gaming Welcomes All Gamers
Last Post: Bryanthusy
Today 07:29 AM
» Replies: 2
» Views: 9704
(Indie Deal) FREE CMC: Ice Crusade, 80% ...
Last Post: xSicKxBot
Today 03:46 AM
» Replies: 0
» Views: 2
(Free Game Key) Foglight Online - Free o...
Last Post: xSicKxBot
Today 03:46 AM
» Replies: 0
» Views: 4
AppleInsider - Jailbreak tool ‘unc0ver’ ...
Last Post: xSicKxBot
Today 03:45 AM
» Replies: 0
» Views: 2
News - Beta: Bedrock 1.16.210.59/60/61
Last Post: xSicKxBot
Today 03:45 AM
» Replies: 0
» Views: 2
News - Panzer Dragoon II Zwei: Remake Ta...
Last Post: xSicKxBot
Today 03:45 AM
» Replies: 0
» Views: 1
Xbox Wire - Call of Duty: Black Ops Cold...
Last Post: xSicKxBot
Today 03:44 AM
» Replies: 0
» Views: 2
News - Hiro Capital leads $15 million in...
Last Post: xSicKxBot
Today 03:44 AM
» Replies: 0
» Views: 12
News - Get a job: Join Insomniac Games a...
Last Post: xSicKxBot
Today 03:44 AM
» Replies: 0
» Views: 13
News - Feature: Zelda II: The Adventure ...
Last Post: xSicKxBot
Yesterday 09:11 PM
» Replies: 0
» Views: 2

[-]
Twitter

[-]
Sponsored
Get the Deal of the Week at RefurBees.com

Copyright © SickGaming.net 2012-2020