Introduction
This lesson contains 2 activities that you should complete as you go through it.
In this lesson, we’re going to be looking at how we can design products that meet the user in their specific contexts. We need to design interactions based on where the user is, what they’re wanting to do, who they are, and when they’re using the product (by product, we mean website, desktop application, mobile application, etc.).
Each type of device has its own unique way of relating to the user and the user to it. A user will choose a specific device to use based on a number of factors and it’s our job to analyse the opportunities and limitations that each device has to offer and find the best way of engaging the user depending on their situation.
Context
Where
Where is the user using the product? Will they be sitting down at a desk, lounging on a couch, or will they be walking around the town? Will they have access to WiFi?
For example, a mobile app that uses maps should perhaps allow users to download the map while they’re still on WiFi rather than asking them to download maps directly in the location.
What
What goals are the users trying to achieve, and how will they be completing the tasks? Will the user be browsing content or will they be transacting with the site and purchasing from it? All of these sorts of questions influence the type of product we are going to build.
For example, if the user is completing a long application form, we might need to build the product to auto-save as the user inputs details. Or if the user needs to quickly access information on, for example, a restaurant’s website, the content should be structured so that the number, menu and location are easily findable with less important information further down.
Who
Who are the users? Are they tech-savvy and able to use more nuanced navigation? Or are they older people in a rush who need quick assistance and a simple interface to complete their tasks?
What sort of mood are the users in? If they’re in a fun mood and are interacting with the product for leisure reasons, you can use more relaxed language and make the interactions more playful and interesting.
Knowing who the users are is vital to the success of the product.
When
Are the users going to be using the product at night? Will the user be working with your product in a focused session or will they be using it on and off again?
For example, a flashlight application on a phone should be incredibly simple to use because it will be used in the dark and often in important moments. A social media site on the other hand is likely to be used during someone’s free time, and can encourage them to explore and spend more free time.
Designing for Different Devices
We’re now going to take a look at the different devices and how designers can design for them, and what their pros and cons are. We’ll also try to understand why the user has likely chosen that form of device to interact with your product.
You might have a content-rich website and think users would be drawn to browse it on their tablet or desktop, but some users will prefer to browse on a mobile device in free moments. We can’t choose how the user will interact with us, so we need to build responsive sites that can meet the user’s needs.
Screen Sizes
When there was a limited range of screen sizes it was possible to design for specific screens, but today, there are far too many screens to design for specific sizes. Instead we need to create responsive sites that can adjust to various screen sizes and put the power in the hands of the user to decide what size they will use to browse on.
Laptops and Desktops
Laptops and desktops are great for sessions that require finer control or larger amounts of input. The mouse and keyboard allow users to have more accurate sessions, and on many sites the best functionality is on the desktop version.
The use of the mouse allows designers to have smaller target areas than on a phone as users can accurately click with the cursor rather than using their finger to press a control.
Navigation for desktops is usually on the side of the screen or in the corners. This is because you can quickly move your cursor to the side of the screen and it stops automatically at the edge of the screen. You don’t need to be very accurate to get your cursor where you want it.
Tablets
Tablets are better at consuming content than creating it. Users will often read, browse, or play games on a tablet and so the interface should suit this disposition.
Phones
When designing the interaction on mobile it’s important to consider how people will hold the phone and navigate with their fingers. The way the user holds the phone will differ based on the task and their context, but the majority of people user their thumb to navigate. So the area at the bottom of the screen is better for important navigation, call-to-action buttons, or tools.
It’s much harder to click something right in the corner of the screen like on desktop.
Form fields on mobile need to bring up the correct keyboard. If a number needs to be inputted, the number keyboard should come up. You can do this by setting your input type correctly:
or
Web app versus Native App
If your product is going to be an app-style product, it’s a difficult decision to make about either going for a web app (like Facebook.com) or a native app (like Facebook Messenger). You must weigh up the pros and cons for both.
Web app
Firstly, by their very nature, web apps have a larger reach than native apps. Anyone can access a web app from their browser. It doesn’t matter what type of device they’re on or whether it’s Android, Apple, or something else.
The web app is also cheaper to make and maintain. Developers can easily make changes to the web app, and it will be applied across all users, whereas a native app must be updated in each store.
Native apps
One of the negatives of web apps is that you must always have an internet connection and often will take longer to load than a native app. Native apps let you take the content with you wherever you go.
There are also more opportunities for enriched interaction on a mobile device as you can take advantage of gestures in the app itself.
One of the negatives of the native app is that users must be pushed to download the app before they can use it. This creates a barrier to entry and can see a fall off in users.
Flexible Content
When deciding on your content strategy it’s worth deciding what to do with it on different devices. Content is like water and must fill the device it’s placed into, but certain content is best on certain devices.
For instance, you might choose less images for mobile to make the page load quicker, or more navigation options for desktop as there’s more space, and users can navigate quicker using the better inputs.
Although we might adjust our content strategy for various devices, it’s important not to remove important information for smaller devices. Aim to remove superfluous content, but keep the functionality the same.
It’s a very poor experience for the user if they had browsed a site on a desktop and then later needed to check something on their mobile device only to find there’s no way of accessing that same content.
Some sites also push users to download the app with no way of browsing the site on their mobile device. This should also be avoided. Users will decide where and how they want to use your product, and not the other way around.
Activities
💻 WATCH
📖 READ
From About Face: The Essentials of Interaction Design Paperback, 2014, by Alan Cooper et.al.
- Chapter 9: ‘Platform and Posture’ (2h)
Lesson Task
Goal
To see and experience how major sites change depending on the device the user is using.
Brief
Compare how different websites display on various screen sizes and devices. Choose a few apps on your phone that you regularly use that have websites you can browse on your desktop.
Level 1 Process
-
Browse the website on your desktop/laptop and see how they function and relate to you as the user. Where is the navigation? How does the site make you feel?
-
If you have a tablet, try browsing on your tablet and see what changes they have made. If you don’t have a tablet you can use Chrome DevTools to make the page display as though it’s on a tablet.
-
Browse the site on your phone’s browser. What functionality or content, if any, have they removed from the page? How have they adapted to the different screen size?
-
Open the app and see how the interaction differs on there. Do they allow different gestures to the phone’s browser? What makes the app better or worse than the browser view?
Time
2 hours