What is Consistent Design?

Posted in Web
Tags: , ,

Consistent design, the most common multi-device approach applied today, happens when the same essential experience, with the same content and features, is ported across devices in a like manner.

In many cases, it’s the desktop experience that is replicated on the mobile device, with some adjustments made to accommodate different devices’ characteristics.


These adjustments address differences between devices in facets like form factor, screen size, interaction model (touch, keys, voice), and sensors (GPS, accelerometer, gyroscope, and others). They can be visual—  adapting screen layouts, grids, and user interface (UI) element size, but they can also involve other experience layers, like information architecture (IA).

For example, a common visual adjustment is taking a standard multi-column page layout on a desktop website and organizing it as a single column on a smartphone to fit its smaller screen size. Additionally, UI elements like buttons and images often change in size between devices, to optimally fit the available screen real estate.

An example of an IA adjustment is shifting the navigation model from a flat hierarchy on the desktop (where several levels of menu items are offered on the same page) to a deep hierarchy on mobile devices (dividing  the content along several screens, which require more drill-down steps).

An alternative practice that has gained popularity on mobile devices is placing the entire navigation menu behind a “hamburger” icon, usually located at the top-left corner of the page.

This way, the same navigation structure and organization can remain consistent across all devices, keeping the interface adjustments between devices mostly visual. In big-screen devices, the full menu is exposed  on screen at all times, while in smaller-screen devices the same menu is one click away, located behind a dedicated control, helping to keep the screen design clean and clear.


Leave a Reply

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