Best Practices for Multi-Device UX Design

In a nutshell, good user experience design strives to meet the needs of the user in an easy and frictionless manner. The software should not only be functional, but simple and intuitive to use as well.

“User experience design (UXD or UED) is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product.” – Wikipedia

User interface (UI) is a subset of user experience. If the user experience were a road trip (getting from point A to point B), the UI would be the roads and the scenery. If the roads and the scenery were great, but ultimately didn’t get you where you wanted to go, then the overall experience would be a failure.

In this post, I will focus on user experience best practices. There are many key items to consider when building any application. I’ve tried to assemble some of the items that are most important to consider when developing for multiple platforms and devices.

Design for Multiple Screens

One size doesn’t fit all

When designing for multiple devices and platforms, it is imperative to keep in mind that one size does not fit all scenarios. At a minimum, you should be designing for each form factor (i.e. phone, tablet, desktop, etc.), taking advantage of the strengths of each while minimizing exposure to the weaknesses.

This is not to say that each one should be radically different. There should be subtle changes as appropriate. Consider the following:

Use appropriate conventions for each platform

Each platform has its own conventions. These include tab location, button color, graphic cues, animation effects, gestures, etc. Make the effort to make your application adhere to the guidelines put forth by each platform, and you will maximize your users’ experience on that platform. The goal is not to make the user learn something new, but to take advantage of pre-existing conventions and hit the ground running with your app right away.

Landscape vs. portrait

Consider how the experience changes based on the way your user holds their device. The goal is to support the user in whatever way they are most comfortable using their device. Your UI should adapt to the altered layout and adjust. In some cases, this is not feasible, and in these cases it is OK to lock the orientation, but the preference is to support both.

UI Location

Because of the limited range of the average user’s thumbs, certain areas of the screen are harder to reach than others on a mobile device. This issue is magnified with the recent increase in size of mobile screens. Consider placing the most used UI elements within the “sweet spot” to increase satisfaction.

Keep it Simple and Intuitive

Avoid cognitive overload

Cognitive overload happens when the user is presented with too many ideas or choices at once, resulting in the user becoming overwhelmed. As a developer, we tend to want to cover every scenario and support every type of user, but ultimately we can end up serving no one.

There’s an apt figure of speech that says “Jack of all trades, master of none.” Your job is to winnow the list of all possible features down to only those that provide the most functionality to the largest number of users.

Not every form factor needs all features

Once you have this reduced set of features, evaluate each one to determine if it is appropriate for a specific form factor. Think about the context in which the user will be using your app and adjust as appropriate.

Suppose you are building a large data entry app. The odds of a user wanting to enter large amounts of data on a phone’s tiny on-screen keyboard seem slim. Perhaps you might decide to limit the functionality of the phone app to searching, browsing and editing, and leave the data import/entry functions to the larger form factors.

Function over form

Usability is more important than style. While it’s tempting to make a sexy interface with tons of animations and transitions, make sure you don’t distract the user from performing the tasks provided by your app.

There’s a reason that the flat design aesthetic is so popular now. It strips down the UI to the bare minimum design cues and lets the user focus on what’s important. Depending on your app it may be the content or the functionality. The point is: Get out of your user’s way!

Recognition is easier than recall

A multiple choice test is easier than a fill in the blanks test. The same holds true for your interface: Tried and true methods of interactivity will always be easier for a user than having to learn new methods.

Don’t make your user think. Every time s/he has to stop to figure out what to do next is an opportunity to lose that user. Grease the skids and make your user comfortable using your app by embracing common practices and iconography.

Finger or mouse

Context is key when engaging with your users. Since you are developing for multiple form factors, keep those form actors in mind when crafting your experience.

“In Sweden, the Automatic Teller Machines have very large buttons. I hadn’t noticed this particular design element on previous visits, which have usually been in warmer months. In 1996 I was in Stockholm in February and immediately realized why the ATM buttons are so big: you can press them wearing thick gloves.” – Jacob Nielson

Desktops have larger screens and are typically mouse-driven. This gives you the ability to put more on the screen and have more precise action targets (i.e. smaller buttons, checkboxes, sliders, etc.).

Phones and Tablets have smaller screens and are touch-driven. Targets need to be larger, and keep in mind that the finger itself may block the user from being able to see smaller items in the screen. When precise manipulation is required, consider implementing pan and zoom gestures.

Obvious design cues

Use obvious design cues to clue the user in on what is happening with the app. Make sure you focus on the following:

• Where is the user in relation to the app? Make sure there’s an easy way to get back to the previous screen or even the home screen.
• What is the current state? If a text element is active, highlight it. If a button is being pressed, make it visibly different from the non-pressed state.
• What will the result be? Don’t make your user guess what an action will do. Use design cues (colors, icons, etc.) to guide the user.
• Is there a change I should be aware of? If clicking a button will disconnect a user and end a session, notify the user before performing that action.
• Highlight important changes. When a user has performed an action that has no obvious manifestation on-screen (i.e. adding a record, saving a file, etc.), give a brief cue to reassure the user. This can be an animation, a flash of color or even a message.

Offer personalization options

Allowing the user to hide unused features, rearrange menus and save shortcuts can go a long way toward making your app more usable for each individual user. Allowing users to customize apps in a way that makes sense to them can go a long way toward curing many usability issues.

Focus on the Minimum Viable Product

Too many times we get tied down with trying to run before we’ve learned how to crawl. Focusing on the minimum viable product (MVP) allow you to focus on your core set of features that you believe will solve a key set of problems.

“The minimum viable product is that product which has just those features and no more that allows you to ship a product that early adopters see and, at least some of whom resonate with, pay you money for, and start to give you feedback on.” – Eric Ries

You don’t want to waste your time building a product that doesn’t resonate with your customers, and ultimately doesn’t sell. The quicker you you get to your MVP, the quicker you can get it into the hands of real-world users and learn if you are on the right track.

Don’t be afraid to fail. This is the point of the MVP; to test your suppositions. If you’re on the wrong track, ask your customers what they didn’t like. Take these learnings and roll them back into the product, or possibly even use them to create a brand new product serving an entire new problem.

When you get the core right, then you can go back and focus on supporting features. By following this one rule, you’ll save countless hours programming features no one needs or uses.

Prototype Early and Often

Design is not an afterthought

If you only follow one point in this document, this is the point! I’ll repeat it: Design is not an afterthought. Do not build a product then hand it off to a designer to “pretty it up”. The UX designers need to be engaged from the early planning stages all the way to completion.

As I mentioned previously, UI is only a subset of user experience. UX is the entire trip from point A to point B. Your user experience designers will help ensure that the entire experience fits together in a cohesive and intuitive manner.

Listen to your customers – get insights early

Listen to your customers, but understand that what customers think they want is not always the correct way to go. Their insights are often jaded by their own experiences, or by the options currently available to them.

“If I’d have asked my customers what they wanted, they would have told me ‘A faster horse.’” – Henry Ford

That being said, they can still offer a wealth of information. Sometimes we are too close to a product to see the “forrest for the trees”, so it’s beneficial to get an objective view. Share your wireframes, prototypes, alphas and betas with your customers as often as possible. The earlier you can course correct, the better.

Use your own product

This is often referred to as “eating your own dog food”. The premise is that if you expect others to pay for your app, you should be willing to use it as well. This will actually help solve two potential problems.

Problem One:
Suppose that you are building an email client, but nobody in your company wants to use it because it’s not as good as other clients available on the market. Now you know you have a problem that needs to be addressed. If you won’t use it for free, then you can’t expect others to be willing to pay for it.

Problem Two:
If you are using your own product, the likelihood that you will encounter bugs is greatly increased. This will ultimately allow you to ship a higher quality product.

By using your own product, you allow yourself to course correct if needed and to ship a higher quality product. You may also find out that the idea just isn’t viable, saving yourself the cost and frustration of releasing a product that doesn’t sell.

Define a Target and Build Toward That

Before you begin designing your product, you need to know who you are designing for. In user experience design, the “who” is just as important as the “what”. These are generally referred to as “personas”.

Ask yourself the following questions:

Will the user be a novice or experienced?
Novice users tend to move a little more slowly and cautiously through an application, need more handholding and like a reduced set of features. Experienced users will be more confident, expect power features and want to jump in with both feet. Think about the needs unique to each group and decide how they should be addressed in your app.

Will the usage of this app be frequent or infrequent?
Frequent users are more willing to learn how to use software. If you use it enough, it becomes second nature. Infrequent users, however, may need to relearn your app each time they open it. If the app is designed around infrequent use, make sure you embrace existing metaphors and restore state over subsequent sessions to ensure familiarity.

Conclusion

Know your audience.  Understand where and how your customers will be using your application, as well as their goals and needs.  If need be, adapt to changing environments and aptitudes.  Find a trusted group of users and test iterative designs to stay on track.

Doing the above won’t guarantee success, but it will help maximize the opportunity while mitigating the potential for failure.