by Erik Loehfelm,

Design patterns originated as an architectural concept by Christopher Alexander in his book A Pattern Language: Towns, Buildings, Construction from 1977. When used in the context of interaction design, patterns document common interaction models. In other words, design patterns are familiar, reusable interface building blocks. Patterns simplify our designs.

“Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.” – Peter Alexander

Design patterns in user experience design have been fairly static with regard to their physical context – desktop web patterns were mainly used on the desktop with a mouse as a pointer. Recently, patterns have crossed the bounds of physical device and have become common on multiple platforms with different inputs. A simple example is the carousel. On the desktop, an image with arrows to the left and right or some visual indication of an image sequence will cause the user to click or drag their mouse to see the next or previous image. On a mobile device, the same visual cue, causes a user to swipe left and right to advance images.

A flexible and powerful design pattern commonly used today, is the off-canvas design pattern. This pattern places content outside of the visible area of the screen. When called upon, the main view area is either moved to reveal the content below, or the off-canvas content is moved over the top of the main content. The simplicity of this solution masks a really powerful visual metaphor of content outside the constraints of the viewable area. This understanding from a user perspective opens a ton of opportunity to present content on demand that wouldn’t normally fit in the interface.

md-patterns10_lukew

Image courtesy Luke Wroblewski (www.lukew.com)

 

Luke Wroblewski (www.lukew.com) speaks to this pattern this way: “there’s always more space off-screen for layout adjustments than there is on-screen”. He describes the use of off-canvas in the context of responsive web design and multi-device layouts. This is a fantastic application for this concept, but not the only one, or the first. Facebook, Path, and the beautiful National Parks by National Geographic iPhone apps, all use off-canvas patterns for their native iOS applications. The fact that Facebook used this pattern – and I believe they were the first to implement it – makes the pattern universally understood! 1.06 billion monthly users… yeah, everyone’s seen and understands how to use this interface.

This pattern is also highly flexible. If you have or are considering a responsive web solution, think about using the off-canvas pattern as part of your site structure. Try organizing your off-canvas content on-canvas when viewed on larger screens (desktop and tablet). Then, when you switch form factors to the smaller mobile sizes, allow the supporting content to move off-canvas.

md-patterns2_lukew

Image courtesy Luke Wroblewski

 

So, the next time you’re challenged with having enough screen real-estate to show content, consider designing your content off the screen bounds and implement the off-canvas design pattern!