Designing for Multiple Devices? Keep it Simple.

 

mobile-devices-responsive-design

Usability experts Nielsen Norman Group (NN/g) believe the key to effective mobile design is simplicity.

Keeping it simple means taking into consideration the communication channel’s capacity and we’re not just talking hardware or bandwidth.

Claude Shannon was the man responsible for introducing some decades ago, the concept of information theory, which not only revolutionised concepts in signal processing, but also having sweeping affects across other disciplines, ranging from artificial intelligence, computer science, and even cognitive psychology.

One idea stemming from information theory revolved around how communication systems consist of modules linked through limited-capacity communication channels.

In information theory, the communication system is the most basic concept, consisting of the following:

  • Two modules, the information source and a destination
  • A communication channel that channels data from the source to destination.

The communication system has a specific limit on the amount of information it can send to and from the source and destination. For example, a local area network connecting two computers is essentially a communication system; in this case the network bandwidth, or the amount of data that can be channelled between the two machines is the channel capacity.

Let’s say you have a 20 Mbps Internet connection, this means your computer can receive 50 million bits per second through the local network—this is the channel capacity

When people use a computer or mobile device, they are basically forming a communication system consisting of two modules (the user and computing device) and a communication system relaying information between them.

Therefore, the channel capacity depends on the combined capabilities and quality of the device and people using it.

These variables include:

  • The user’s working memory
  • The level of attention given by the user to the communication
  • Screen size of the device

NN/g analysed how these characteristics come together to influence mobile design, doing so with the goal of determining just how much information a user internalizes when interacting with information on their screens.

mobile-auto-parts

User Working Memory and its Effects on the Communication Channel Capacity

When someone listens to a lecture, that person depends on his memory to retain and process the information shared by the speaker with stock knowledge or other points of interest discussed in the lecture.

In this example, a person’s working memory is in overdrive, granted he’s paying attention. His mind is busy remembering the information presented before him to understand further points of interested introduced as the lecture moves forward.

This process is similar to how users browse the web and keep information about their goals ‘floating’ in their working memory. This can be anything from “Looking for cheap flights out of the country” to “I am looking for cheap prices on a product.” A user’s working memory is also active when retaining contextual information about a website, about the webpage being viewed, and about the site’s layout and interface.

This means that the channel capacity of the human–device communication system depends largely on a user’s working memory, which in turn means that overloading a user with too much new information (e.g. complex or unusual web content) inhibits the quality of communication.

Screen Size and its Effects on Communication Channel Capacity

When a user fails to comprehend the content shown on a website, he usually looks at the other information found on the screen/page. This means the size of a screen has a direct effect on how much information users can see at once on their devices, before scrolling down or moving to a different page.

As such, it can be said that the capacity of the communication channel in the human–device information system depends heavily on screen size. Common sense tells us that the bigger a screen’s size, the more information relayed between device and user.

This is one of the major challenges in designing mobile pages, which NN/g notes, is twice as hard than designing desktop content. Due to size constraints, users have to depend more on their working memory to retain information on the page, but not visible to their eyes (as is the case when a user scrolls up and down).

Attention and its Effects on Communication Channel Capacity

The level of attention given by the user to the device also affects the capacity of the communication channel. Although the portability of mobile devices means people are more likely to use them everywhere, the chances of them being interrupted are also higher than using a desktop, say at home or work.

And with users expecting information on their mobile devices to be quick and easy to consume, their attention spans have become poorer.

The Problem with Mobile Design

When designing for different screen sizes, it’s important to first consider the capacity of the communication channel. Although there aren’t really any hard rules on which way to approach mobile design, all attempts to solve mobile constraints take into account the limited channel capacity of the platform.

The most popular approach to multi-device design is responsive design, which aims to provide the same functions and content across all types of devices. This design addresses the capacity problem by splicing the site into cells on a fluid grid, changing the layout of these cells when on a smaller screen in such a way that the importance of the content on each cell is considered.

In a nutshell, responsive design deliver the same content through a narrower communication channel, allowing all the content to be available even on smaller screens. However, this also means that users will have to work harder and use their working memory more to navigate through the site with the amount of information on the smaller real estate.

Keep it Simple

Given the limitations of channel capacity in mobile design, a simple app or barebones mobile webpage works best with users, as they don’t have to work hard to reach their goals. Simple mobile designs are capable of circumventing both attention and working memory limitations when using a mobile device, as well as screen size issues.

However, it’s also important that designers understand that simple interfaces for mobile devices is not a one-size-fits-all matter. What works for a smartphone will not necessarily work on a tablet or desktop, which is why blown-up phone apps get a lot of flak.

The Future

The future of the Internet and computing lies in an ecosystem of interconnected devices ranging from smartphones, tablets, TVs, wearable tech like watches and eyeglasses, and even smart ‘home devices’ like thermostats, and light bulbs.

NN/g believes that there’s a need for a unfied theory for web design across all screen sizes, something that doesn’t only focus on the common denominator across these devices, because ultimately, the variety of devices out there will expand, and very soon designers will have to tackle scaling web content not just for tablets and phones, but also smartwatches.