ellipsis flag icon-blogicon-check icon-comments icon-email icon-error icon-facebook icon-follow-comment icon-googleicon-hamburger icon-imedia-blog icon-imediaicon-instagramicon-left-arrow icon-linked-in icon-linked icon-linkedin icon-multi-page-view icon-person icon-print icon-right-arrow icon-save icon-searchicon-share-arrow icon-single-page-view icon-tag icon-twitter icon-unfollow icon-upload icon-valid icon-video-play icon-views icon-website icon-youtubelogo-imedia-white logo-imedia logo-mediaWhite review-star thumbs_down thumbs_up

Design rules you need to break

Design rules you need to break Evan Gerber

For 10 years, designers and business strategists have created desktop websites by following certain fundamental best practices. Many of these guidelines are perfect for a keyboard-and-mouse monitor, but they fall flat when applied to the touch-based and mobile web. In the mobile space, data is consumed across multiple screens, in a fragmented device environment, by distracted users. Therefore, when designing for mobile, it is important to sit back and assess all of the rules that used to be taken for granted.

Design rules you need to break

These outdated best practices live all across the design spectrum, and unyielding adherence to them will lead to stagnant, uninspiring digital experiences that fail to engage and convert users.

Here are the rules you need to be breaking.

Too many clicks isn't a big deal

Many of us have been religiously trained not to bury the content our users seek. Even now, the retort of "it's too many clicks" is frequently the death-knell at a creative review. With large monitors and small mice, this was a valid concern. But in the mobile space, it's not a one-size-fits-all philosophy for a few reasons.

On smaller form factors, it's easy to find buttons and other affordances without thumb gymnastics. Check out Sony's responsive navigation for an example of how deeper structures can be navigated easily.

Source: Thanks to Brad Frost for his great article, in which he went to the trouble of making .gif movies for us to view.

For a tablet, the same goes. However, designers must consider how the user will be holding the device and how much information needs to be displayed. Mashable's iOS tablet UI can make it easier to browse through smaller numbers of high-level categories and leave room for rich content. This is particularly nice for laptop computing and sitting down.

Additionally, numerous clicks can be a benefit if a user is trying to digest complex content. Long, overwhelming pages of data can be frustrating to internalize on a big screen, never mind the smaller ones. For example, in a study done by Jakob Nielsen, it was determined that users retained 18.93 percent of the data they were shown on a smartphone versus 39.18 percent on a monitor.

Maximizing data for the sake of minimizing clicks can, at times, not only frustrate your user, but it can also impair task completion. For this reason, it is better to give users small, digestible chunks of data and let them parse through. This is really a function of the content being displayed, however, and how it's intended to be consumed. Data-rich tables are great for data retention, but a reading experience constantly interrupted by page loads is not.

Affordances can be minimized

One of the old design mantras was to make sure that anything interactive on the page was completely obvious. When engaging content with a keyboard and mouse, this makes perfect sense. Keyboards add a layer of abstraction to the content when compared to touch. Dragging a mouse is harder than swiping a finger and requires a greater cognitive load. For example, pointing and swiping is easier to do than clicking, holding, and dragging. Because it's easier and more natural, it encourages play and exploration.

The fact that touch encourages this free-form interaction allows designers more latitude in how they display content. By using movement to hint at information or creating finger-friendly experiences that encourage touching, more functionality can be incorporated with less clutter on the page. For example, the interaction design of Paper by FiftyThree's sketchbook app enables users to swipe to turn from page to page. Not only does this promote the "sketchbook" feel of the app, but it also frees the screen from obstruction.

Source http://support.fiftythree.com/fiftythree/topics/colour_palette

When designing an application, interface designers should examine whether there are obvious metaphors or areas that the finger will travel. Interaction on a smaller screen is more likely to be found, and it trains users to continue exploring. Another example of relying on exploration versus explicit placement of information is Facebook's mobile interface. Swiping sideways at the top of the iOS app exposes the navigation.

Source http://www.facebook.com/note.php?note_id=274858025896557

So don't be afraid to downplay some interactions on the page; there is a good chance that users will find them. That said, don't bury anything critical. And unless you are very sure of your user base, always offer simple and straightforward paths to content. So long as fundamental interactions are obvious to new users, per Jakob Nielsen, then hidden shortcuts will only benefit experts.

Navigation can move

It used to be that there was only one digital channel: the desktop world wide web. In the realm of the web, hiding navigation was tantamount to suicide; if anything, the trend was to expose more and more information. From the emergence of the DHTML expanding navigation in the late '90s to its evolution into the type of big box navigation seen on ESPN, information architects worked to ensure users could quickly and easily learn what was where on a website.

Source http://espn.go.com/

Nowadays, on smaller form factors, other options need to be considered. Navigation needs to be included and must be easy to understand and learn, but designers no longer have the luxury of elevating everything.

The responsive build of the Boston Globe is an excellent example of how large navigation can be minimized for smaller form factors. Responsive design, the concept of building one interface that can be redrawn depending on a user agent's screen size, takes one treatment of navigation and shows it in multiple different ways. To see this, open BostonGlobe.com on your desktop and then resize the window. Note how the screen keeps redrawing.

At the largest level, we see everything exposed. However, as we drill into the tablet and smartphone sizes, navigation becomes smaller and more concealed. At the smallest form factor, the navigation is hidden under a tap, and even once exposed, it is prioritized with other options available under a second click.

Horizontal scrolling is no longer forbidden

With the exception of more artistic or edgy sites, horizontal scrolling was considered to be a terrible design decision. Users did not want the hassle of pointing their mouse at the bottom of the screen, and scrolling away from the navigation was considered death to decent usability. However, with the advent of smaller touch screens, as well as minimized navigation schemas, it's safe to use the horizontal scroll on mobile devices. In fact, some information treatments rely on it to create a compelling and informative experience. Check out Pulse, for example, where users can scroll and view news stories.

Finally, it was always considered bad practice to have different user interfaces for different platforms. It made sense from a long-term cost of ownership perspective, but constraints imposed by browsers like IE6 could really limit a team's creativity. However, now that everything is so fragmented, businesses are sometimes better off picking their main channels and focusing on them. Additionally, because of the multitude of form factors and interfaces, there is room for engaging and innovative differentiation. For example, were one to Google the local weather on a desktop, the interface would be very different from the tappable screens on the iPad.

There is no question that the way content is designed for the mobile web is changing drastically as more and more devices come to market. The common sense rules that governed information presentation and great desktop design no longer apply, and it's crucial that brand managers and design strategists reconsider what makes a great design.

Where before information hierarchies were flat and fewer clicks was a laudable end goal, now designers can combine smart button placement and encourage tapping. Tappable areas don't always need to be immediately apparent; instead, advanced users can discover the interactions through exploration. Navigation links can be hidden on smaller form factors, where before it was considered insane not to have them immediately available. Scrolling, once the bane of good information design, is now an integral part of a solid mobile look and feel.

As teams consider how they will build out their web designs to apply across multiple form factors, it's crucial that they throw away the old rulebook, spend some time exploring, and boldly venture into the new world -- with new rules and new opportunities.

Evan Gerber is VP of mobile user experience at Fidelity Investments.

On Twitter? Follow iMedia Connection at @iMediaTweet.

"An illustration of a fist" image and "education concept" image via Shutterstock.

Since the late ‘90s, Evan Gerber has created innovated technology solutions for unique business problems. Evan is the Vice President of Mobile Design and Emerging Interactions at Fidelity Investments.  An avid technophile and self...

View full biography


to leave comments.