Dieter Petereit June 15th, 2018

Design the Smallest Spaces: Atomization is the Future

Modern design needs to work everywhere, not just on the desktop. In order for that to work, it has to be as compartmentalized as much as possible. In the following article, I'll show you the best way to atomize your design.

In the Past: Design was Space-Consuming

Edenic times. Designers used to design for a rectangular page format and argued whether they should optimize the design for 800 x 600 or 1.024 x 768 pixels. Abilities the browser didn't have were added via a plugin (Flash, Java, and dozens of others). This is how the web was dynamic and entertaining twenty years ago. [caption id="attachment_104636" align="aligncenter" width="500"] Hero areas were already common about ten years ago. With Flash, pretty much everything had a hero look. (Screenshot: Smashing Magazine)[/caption] Then, we got the first wave of digital handheld devices. People tried to establish WAP as the technology for mobile internet access. Everyone who fancied themselves had an own WAP site. There weren't all that many. And the WAP pages were not related to visual aspirations whatsoever. It was more like some kind of BTX; just as ugly as the old screen text, but much smaller. I have never created or operated a site like this, and I never had clients asking me to. Then came the iPhone, followed by Android shortly after, and everything changed. The beautiful design rectangle blew up. All of a sudden, the screens were higher than they were wide, and the possible resolutions multiplied faster than we could adjust our designs. We believed to have found an answer to the resolution chaos with responsive design. Then, we got smartwatches, and we had to rethink the whole thing. Speech assistants are a rapidly spreading hardware feature. Amazon's Echo Dot is less than 40 Euro by now, and even the bigger Echo only has a double-digit price tag. This competition from Mountain View is distributed for 59 Euro in the Home Mini version, with the big Google Home version costing 149 Euro. In terms of pricing, there's a lot going for Amazon, while the two rivals have few differences in terms of functionality. [caption id="attachment_104638" align="aligncenter" width="1000"] Amazon's Echo Dot is the least expensive speech assistant on the market. (Photo: Amazon)[/caption] Even cars are equipped with more and more intelligent solutions. On top of that, there are smart TVs, intelligent sound systems, like the Sonos, as well as tons of devices that relate to the internet of things in some way.

Your Digital Offer Needs to be Omni-Available

When selling a digital product, or using digital means to sell a product, or offer services, being represented on as many devices as possible should be in your interest. Even if you don't agree - your customers will expect to be able to use your offer on all their devices. If you don't want to fulfill that wish, just know that one of your rivals will do it either way. So you don't really have a choice. So, you're faced with the problem of having to present your digital offer on a variety of devices with various specifications, some with and some without screens. The design approach that allows for that is called atomization. When looking for a solid design approach that can support you on your way, read my article on atomic design. The approach wasn't meant for this purpose, but it does suit the trend pretty well.

Divide Your Service Into Atomic Particles

The concept of atomization assumes that a design should be split up into small units, in order to reassemble it across a wide number of different devices. Atomization could even mean that the service itself is divided into its components, and reappears in a different context, or even as a part of a third party offer. In this context, you'll often hear the word "headless". This describes a service that works without necessarily needing an own user interface. If you're interested in the topic, read my article about headless browsers. Notification Systems The case I mentioned last, the integration of content into third-party offers, is most commonly represented as the increasingly more popular notification systems on smartphones, as well as Windows and macOS. Here, small bits of information or control elements are displayed outside of the actual brand context. Without having to start a weather app or a calendar, your notification stream shows you if it's raining, and when you need to go to the dentist. The app is installed, but not needed for the display. [caption id="attachment_104634" align="aligncenter" width="1000"] Today, users consume when and wherever they want to. (Photo: Depositphotos)[/caption] By now, notification systems are evolving, offering options for the next logical follow-up interaction, like replying to a tweet, right from within the notification. The actual app does not need to be started up. A Minimal or No User Interface at All Things get even more interesting if you want to provide your service on devices that only have a minimal user interface or none at all. The paragon for this kind of design atomization is Spotify. Spotify runs smoothly on a desktop, smartphones, tablets, smart TVs, the PlayStation, in cars by Ford, Volvo, BMW, and others, and even on sound systems like Sonos, Pioneer, Sony, and the Google Home and Amazon Echo boxes. [caption id="attachment_104635" align="aligncenter" width="1000"] There's not much room for a visual UI left. (Photo: Depositphotos)[/caption] In order to achieve this omnipresence, Spotify had to divide its service into atomic particles. As a monolithic desktop application, the service couldn't be used on the Apple Watch, and don't get me started on Sonos.

Problems That You Didn't Have Before

The atomization of a service is no simple feat for confident brand owners, as it always means giving up some control. You can't control your brand the way you could if you were able to fully influence the environment. This will be especially tough for older brands. I still remember the corporate design guidelines of past customers. Some of them were about the size of a phone book. At the same time, of course, it is necessary to maintain contours, and to stay recognizable as a brand. Otherwise, you'll pretty much get absorbed by the technological platform that you want to be present on, preventing you from being an independent part of the customer consciousness. This would also prevent you from creating a customer relationship. Spotify solved the task by focusing on the logo and the color scheme, forgoing any further branding elements. This makes it easy to recognize the service on all devices, from the green logo alone. [caption id="attachment_104637" align="aligncenter" width="1000"] There's barely any room on the Gear Fit. Spotify is still recognizable. (Photo: Spotify)[/caption] When it comes to atomization, consistency is key. As long as the respective device allows for it, major control elements should always be located in the same spot, and be operated in the same way. Here, Spotify has an easy time implementing its core functionality. After all, they are directly inspired by the common player controls.

Different Devices Have Different Abilities

Part of the atomization as a design principle is targeted usage of the abilities of the respective device. Google Play Music, for instance, gives location-based suggestions. Spotify on the smartphone is able to react to the running speed. In Google notes, users can set location-based reminders, like "buy shaving cream" when they're near a supermarket. Fitness apps use GPS or heart rate features and synchronize them across all devices. For the user, using the service must feel homogenous. No matter what device they're using. Conclusion: Atomization Increases Your Range Those who divide and reassemble their services properly have a rather simple time trying to be present across multiple devices. However, you have to be willing to let go of some control. Other Sources (Image Source Post Image: Depositphotos)

Dieter Petereit

Dieter Petereit is a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called web design and has carried on ever since. Two decades ago he started writing for several online publications, some well, some lesser known. You can meet him over on Google+.


Leave a Reply

Your email address will not be published. Required fields are marked *