Erik Loehfelm

Quick Tips #8: Off-Canvas Design Pattern FTW!

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.

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.

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!

Design Trends to Watch in 2013

Well, the Mayan’s were wrong. Or at least, our interpretation of the end of their calendar was a bit sideways. Personally, I always thought they just ran out of tablets to scratch on and were bored with keeping the calendar going… but, I digress! We’re still here and going strong, so let’s look to 2013 and where some interesting design topics may be moving.

1. Contextual Design
We have apps. We have powerful pocket hardware. We’re starting to collect legitimate big data on people. Where it goes from here is up to the imagination of designers and technologists! There’s an incredible opportunity to leverage the intersection of these resources that is just beginning to be realized. The time of ‘smart’ applications that leverage social, mobility and location data to react and present intelligent, contextually relevant, content is here. Contextual Design will be the next ‘secret sauce’ in successful digital experiences.

For those of you new to the term Contextual Design, imagine this scenario: You’re walking into BestBuy to shop for a new camera. You have your iPhone with you and location services are turned on. You’re phone ‘knows’ you’re at BestBuy. You find a few cameras that seem like the perfect fit for your needs, but you’d like to see some reviews to be sure. You ask Siri on your iPhone for information on the new Nikon you’re holding in your hand. She returns data in the form of public reviews, reviews from your trusted friends on Facebook, information served from BestBuy on accessories and product details, and pricing from BestBuy, Amazon and a local camera shop. You browse the information and confirm that this is the camera for you. You could order the camera on Amazon because it’s 5-10% less expensive than in the store, but because you are in BestBuy, and have accessed the data served to you through Siri from BestBuy, BestBuy decides to sweeten the deal buy sending you a ‘live’ promotion in the form of a 15% discount on accessories for the camera if you purchase it from them while in the store today. Sold! You grab the gear, and make your purchase in store using your BestBuy Rewards app to apply the offer and collect your reward points.

Possible? Absolutely! Everything mentioned in this scenario is absolutely doable with today’s technology, but it hasn’t been designed or executed yet. The opportunity to supply users with contextually relevant content on the go is huge! What you do for your customers requires you to understand them and cater to them… which you should already be doing, right?

2. The Internet of Things
We’ve already spoken of Contextual Design (CD). Combine CD with intelligent, web connected, ‘stuff’ that exists around us, and we’ve got an even more powerful source of data to wrap and bind us with. Enter products like Twine (http://www.kickstarter.com/projects/supermechanical/twine-listen-to-your-world-talk-to-the-internet) – pun-intended!

Twine is a highly successful Kickstarter project. It’s a simple, internet connected sensor device that can be easily programmed through the web to collect data and send messages. By using Twine to monitor a simple thing like the moisture level in your basement, you could be notified via text or email that your sump-pump isn’t functioning properly. Combine this with a simple iPhone app and you could have an emergency preparedness system to protect your home while away.

Nest (http://www.nest.com) is more highly-developed consumer product example of a web-connected device. Nest is a learning thermostat that helps to control the temperature of your home and save you money on your energy bills. It is beautiful and simple and powerful. By using Nest in their homes, consumers are saving some serious money today!

As we open our lives to these new connected devices, the internet of things relevant to each of us becomes more diverse. Data in our day-to-day functions as human beings is captured. How that data is leveraged and utilized is up to us as designers and technologists. There are wonderful opportunities for this information to enhance our lives if we aren’t intimidated by devices watching and learning about how we live.

3. Responsive Web
This is an obvious one, but still merits mention. Responsive Web techniques will move from experimental to mainstream in 2013. A mobile-first approach with Responsive Web techniques will allow your consumers to access content in a contextually relevant way on their terms. For the enterprise, a Responsive approach will allow for a more centralized management of content and help to mitigate desktop only or mobile only approaches to content delivery.

In your Responsive approach it’s important to consider a system that is based on content first. It’s easy to get caught up in the graphical solution of your designs prior to considering the contextual relevancy of the content you are designing for. Therefore, design your experiences from the inside out. Work out the relevant content only, for a mobile user, a tablet user, and a desktop user. Leverage a consistent grid-system of your choice. Then, layer on the graphical solution. You’ll find that by taking this approach, you’ll have a flexible system that is serving content contextually important to your audience while still maintaining your brand experience.

4. Second Screen Experiences
Many are trying, but few have found great success on the second screen. The opportunity however, is too great to ignore. In 2013, the secrets of the Second Screen Experience will be unlocked!

Content distributers and advertisers are constantly looking to differentiate their products. The challenge for a second screen option is in the focus of the viewer. Simply having content that enhances the experience on the big screen is interesting but has proven a challenge.

When watching a game on TV, I’m only interested in statistics during a break in the action. While watching a movie, I’m not interested in the depth of the character that I can look up on my iPad… I’m watching the movie! So how do content providers introduce the extraordinary amount of supplemental content to people in a way that doesn’t interfere with the primary viewing experience? Universal Mind is working closely with some exceptional content providers on this very thing! Stay tuned this year to see some exciting headway in this space.

5. A Return to Simplicity
The shifts at the executive ranks in Apple this fall may have an interesting effect on the design community in 2013. Skeuomorphism has been the preferred flavor of UI design for Apple and many others for some time now, but there had always been a disconnect between the simple elegance of the hardware and the stylized UI metaphors of the OS and software. With Jony Ive at the design helm on all things Apple (hardware and software), we’re likely see some shifts in the UI appearance of the Mac OS, iOS, and Apple created applications. These shifts, as they have done in the past, will drive a design trend towards Apple’s new UI design aesthetic.

Simple, clean, UI design will make a strong presence this year. You can already see the influence of Microsoft’s Metro UI on applications both for Windows and other platforms. The focus of “content over chrome” is an approach that fits very well within the concepts of Contextual Design, mobile first, and Responsive Web.

2013 will be an exciting year to be a designer! We’ll be involved in the tight personalization of services across a connected web of content and devices. We’ll help to streamline the distribution of content in contextually relevant ways for our users. We’ll be simplifying our experiences so that they communicate more effectively. This is not to say that all user interfaces will become text only experiences. The challenge for designers will be the same as it has been in any other medium. We must design experiences that inform, communicate and delight! Happy New Year and hug a Mayan

Accepting AMEX is Good!

‘We don’t take American Express.’ I’m a consumer. I’m Standing at the checkout with your goods in hand with my ‘money out’ and you won’t accept it. How could there be such a customer experience failure at the pinnacle of the entire process?

It would seem to me, that a person trying to sell me goods or services would want to accept any form of payment I’ve presented. You’ve got me! Take my money! If your business is running on such thin margins that you cannot accommodate a few percent overhead on a broader selection of acceptable credit options, you have bigger issues than Amex vs. Visa.

I believe this example is a microcosm for the challenges that organizations face with regard to being customer centric. The choices consumers have for services and products are staggering. Especially if you consider a web based, mobile or direct to consumer options. Why would a company challenge their own profitability by forcing a payment mechanism unfriendly to a customer? Don’t these guys realize, I can stand in-line at the check out of most stores and make the same purchase on my phone for typically less money than I’m about to spend in-store? The only benefit typically is immediacy. A frustrated experience trumps immediacy.

Other consumer challenges exist that we’ve all experienced in some way. How many good support hotlines have you called lately? What does your online bank system look like for your checking account? What benefits does your airline or hotel chain provide to you on your mobile phone? If you’ve had quality experiences, don’t you typically return to those vendors as opposed to looking for new solutions?

The customer experience challenge is about touch points. It should be a company’s goal to tie together these touch points in a cohesive manner and optimize them. An organization should aim for its in-store experience to equal a satisfying on-line experience. Be sure that the customer service representative on the phone is trained and empowered to create the same level of experience quality as a front line salesperson. Make certain that the employees manning the register know a few things about making people feel satisfied they purchased the right thing.

Not accepting AMEX is a snub of the consumer centric concept. I assume that these merchants don’t see this error in their approach to business. Unfortunately for them, they may not until it’s too late. So listen up ‘Mr. local java shop’ or little book store on the corner! Find another way to make up the few points on my purchase by using different light bulbs or something. If you don’t, I’m taking my business to someone who cares about me more.

Facebook API for iOS ‘access_denied’ == hours of wasted time

I’m embarrassed to post this but in the hopes that it will save someone some time… here goes.

Joe (@merhl) and I are working on a fun iOS project that will soon be released to the public. There is a key component in the application that involves logging into your Facebook account and allowing you to post to your timeline. We have a few people set up as developers within our Facebook sandbox as well as a few set up as testers. I’m set up as a developer, my wife is set up as a tester.

My wife was trying to post to Facebook on her new phone with a beta build of the app and was running into issues. I was able to login and post without a hitch on my phone. Long story short, I spent the past 6 hours trying to debug the app and find a reason why she wasn’t allowed to login to the application. She was getting error codes that effectively said “access_denied”. It turns out, she never registered as a “Facebook developer” and accepted the invite to be a tester for our app. I did that for her, and everything worked fine… instantly.

Damn.

Why didn’t I check that first?

iPhone Sketch-board Templates

I posted this on another blog a few years ago, but they are still relevant! We use these printable sketch templates for brainstorming. Combine these freebies with a stencil kit from UI Stencils (http://www.uistencils.com/products/iphone-stencil-kit) and you’ve got all the tools for the next Angry Birds in your hands Enjoy!

Omnigraffle iPhone sketch-board
PDF iPhone sketch-board
Photoshop iPhone sketch-board
EPS iPhone sketch-board
PNG iPhone sketch-board

Quick Tips #6: View Font Choices on Device

When designing for mobile, keep in mind that you are typically not designing on mobile. We’re currently working on an initiative for SoDA – The Society of Digital Agencies (http://societyofdigitalagencies.org/) – to create the quarterly SoDA Report on iPad and Kindle Fire. Part of our standard process is to frequently test our work on device to understand the impact our font selections have on clarity, readability, and balance.

On the SoDA Report project, we are designing both platforms at the same time. Typographic solutions across the iOS and Kindle platform must be thoughtfully considered independently from one another. These differences in type choice in our design tools would be subtle, but on device, they are dramatic. For instance, in our project the body copy is set as:

iOS Body Copy Style: Helvetica Light 16/20
Kindle Fire Body Copy Style: Helvetica Light 19/23

If I were to guess on a font setting without the product on device, I would not have guessed these settings for an optimal, readable experience. Be sure to frequently test your font selections on your device even if you simply capture a screen grab of it and send it to your mobile. View it in the sun. View it in a dimly lit room. View it in the environment your users will consume it in. Be critical and adjust as necessary.

Quick Tips #5: Filter Features with Your Users

In the final consideration of your Application Definition Statement, it’s time to revisit the list of features and tasks and apply them to your previously defined user. Many of your features that were considered for the initial idea, no longer seem as practical as they once did when brainstorming the concept. Your application’s focus begins to take shape. A good example of an Application Definition Statement for the sample zoo app could be:

“A tool for children visiting the zoo, to discover facts about the animals, and play interactive games.”

By clearly stating your application’s target audience and main features in this way, you will have a guiding principle to build your application upon. When considering functionality as you move forward, always ask yourself the question ‘does this new concept answer to my Application Definition Statement?’ If it does, you should feel confident including it. If it doesn’t, you may want to consider this new functionality for another application. Stay focused!

Quick Tips #4: Describe Your Users

In the creation of your Application Definition Statement, you’ll want to spend time considering your users. What are the distinguishing features of your intended audience? What is most important to them? How will they use your application in a physical context? In the zoo example we may ask whether our users:

are children exploring the zoo with a class
are parents guiding their children through the experience at the zoo
intend to use features of the application at home or prior to arriving at the zoo
have children with them on a zoo visit
love to learn about and see animals

Focus on the user of your application is critical to its success and forms the cornerstone of user-centered design theory.

Quick Tips #3: List Your Features

Start creating your Application Definition Statement by listing all of the main functions or activities that are key to your idea. Consider how these activities can be broken into specific tasks or features of your application. For example, let’s imagine the idea is an application that allows people to explore the animals and habitats of your local zoo. With this concept in mind, consider some of the tasks a person would enjoy with this mobile experience, such as:

finding their way around the zoo
learning about the animals
learning about the animals’ habitats
playing interactive games
learning about zoo memberships
purchasing merchandise
taking and sharing photos and videos
best paths to follow in the zoo to see the animals
feeding time schedules
show schedules

Quick Tips #2: The Application Definition Statement

The term ‘elevator pitch’ is used to describe a brief and focused conversation about a business idea; one which could take place in the short time it takes to ride in an elevator. The strength of an elevator pitch is in it’s focus to communicate the idea. For our app designs, we typically create something similar.

In Apple’s iOS Human Interface Guidelines, they describe a simple, but important tool in the design of iOS apps; an application definition statement.

“An application definition statement is a concise, concrete declaration of an app’s main purpose and its intended audience.” ¹

Begin your design process by asking yourself questions such as this:

Who will use this application? Why will they want to use it? How will they use it? In what physical context will they use it in? What aspect of this application will delight and engage the user? What are the main features or functions of this experience?

1 – Apple, iOS Human Interface Guidelines, Feb 2012

Share this:

Share this:

Share this:

Share this:

Share this:

Share this:

Share this:

Share this:

Share this:

Share this: