Usability Design

Question: What are some important considerations of designing for different screen sizes and device types?

The best strategy is to keep the end-user experience in mind. 

1. Core User Experience

 “What are the most common and important tasks that users need to complete?”

 Understand the basic context assumption for the various device types to build good UX.

2. Adapt the Experience for Each Context of Use

Not all features make sense nor can be implemented on all devices. Identify the different scenarios in which the product will be used across the groups of devices, and design an experience suitable for each of those scenarios. Users engage in different interaction modes depending on the type of screen they are looking at and there’s an established method most consume an experience. Mobile phones are mostly for micro-tasks and have short user sessions. Tablets are primarily used for content consumption and aren’t currently considered a work tool for most people.  Desktop experiences are usually robust and a work tool for most people and can support a robust experience.

Different screens allow for different input methods.  Tap targets on Mobile and Tablet needs to be large enough and away from other CTAs and edges of devices to be useful without frustration. There’s no hover on touch screens.

3. Start Small, then Go Big

When you design for smallest relevant screen size first, it forces you to decide what matters most. After a while you will apply the same approach of careful selection to the other versions of the product, be it on desktop, tablet, or TV.

But it’s really not about making a mobile experience wider to fill a large screen, it’s still another design challenge. These screens all have different aspect ratios and some elements cannot be warped or shape-shifted without losing their expected appearance - like video. A 16:9 video can’t be put into the same space as a 1:1 video without the designed space being impacted - the design needs to adapt for the rectangle/square shapes that are absolute.

Also, consideration for large screen specifics include image fidelity and quality of scale - and distance. An image served to a mobile device shouldn’t be the same version of the image served to a television screen. When considering designing for these larger screens (tv, kiosk, wall tours, etc) the distance of the viewer from the screen is also key to consider, especially for readability and functionality.

4. Consistent, Seamless Branding Experience

Ensure that the content consumption on each device is in sync. A consistent user experience, regardless of device, is a key component of a successful user experience and makes it easier for users who have interacted with the design on other devices. It’s best to make a unifying design, treating the design as facets of the same experience on different form factors, creating a seamless experience for all the different device groups. Users shouldn’t have to think about what device they’re using or any changes in context - the functionality and usability should be independent of the device and consistent across all form factors.

5. Test and Observe

I like to actually watch/observe people to see how and why they navigate/use the design on the device. It’s about working early in the process to inform the design and make adjustments as the design is flushed out. This allows for noticing small issues and finding solutions that can be resolved as/before the working prototype is reviewed, gathering a baseline of data that can be quickly adapted/ implemented during the design/early prototype phase. Multiple passes at “hey, can you look at this for a sec” and watching the user interact and resolve any obvious pain points is the goal.

Once the design is in a solid state and ready for more formal review, using unmoderated usability tests offers more insight and can quickly gather a diverse set of feedback and recorded user behavior.

Focus groups can also be used to access feelings on the design, its use, and if it meets the needs of the user — this is not necessarily about the design specifics themselves, but the whole experience itself on the various form factors. Does the user want to use it? What do they want out of it? What are their personal preferences? Do they align with the design, its usability, and business goals? Is this the viable, right path forward that will engage the end user?

Beta testing and A/B testing is used to support competing ideas/designs/elements/implementations. This is good to use when iterating on revised designs. The different types of user testing’s goal is to gather the most valuable feedback on the user experience of the design.

I’m open to new opportunities.

If you're looking to connect, let’s grab a coffee and chat!

crosswalk shot across from the sfmoma with painting that reads think outside the building.