Linkedin Learning: Multidevice Design
Devices
- Desktop
- Tablet
- Computer
- Watch
- TV
- Audio Interface
Design for the user. Design for the ecosystem and understand how devices interact with each other. Design for a coherent experience so that the user knows how to use the device.
Design framework:
- Consistency: have the same feature across multiple devices
- Continuous: being able to use the app from different devices
- Complementary: use multiple devices to create a holistic experience
Content of Use
Understand the condition and the environment the user is interacting with the product.
Responsive Design: deliver the same web experience between desktop, tablet and mobile device by scaling the content
Pros:
- the website is easier to manage
- easy access for content
Cons:
- slower loading time
- not all tasks are appropriate for the device size
- high functional websites are not suitable
Native Apps: specific guidelines to help the app maintain the same design style; Google Material Design, Apple Design, Microsoft Design.
Pros:
- take advantage of the native decide capabilities like camera and notification
- consistent with the device
- faster experience
Cons:
- maintain multiple platforms
- access only through app store
Hybrid Apps: a combination of native app and responsive web design.
Pros:
- single code base
- cheaper solution
Cons:
- cannot access some device functionality
- slow loading
Mobile First Design: design for mobile device first and then scale up the screen size to accommodate other devices
Interfaces
Touch Interfaces
For mobile or tablet devices:
Google suggests at least 48 x 48 dpi and Apple suggests at least 44 x 44 pts.
- don’t ask the user for too many data entry when signing up
- use Touch ID to gather information when necessary
- use different gestures for different interaction
- animation helps with smooth interaction such as loading
- layout consideration: landscape or portrait
For smart watches:
- small touch screen
- design for highly focused task
- text should be legible and viewable
- notification should be easy to view and interact with
- glanceable information: headline, picture, etc.
- fitness data
Visual Interface
For TV:
Navigation for TV are usually at least 10 ft away and relies on remote control: up, down, left and right.
- minimal text on the screen
- large text
- contract between the text and the screen
- clear menu and information flow
- use standard navigation pattern
- color changes from screen to screen
Use cases:
- video based apps and home decor apps use the large screen TV
- gaming uses the visual and audio features of TV
- shopping utilizes high resolution functionality of TV
Audio Interface
For voice assistance:
- the design is hands and visual free
- give brief and clear feedback
- give the user information quickly
- design conversational tone
- consider the varied context and responses
Use cases:
- concrete tasks with concrete responses: math, time, facts
- information look up: wiki
- personal lists: shopping list, reminder, timer
Case Study: Creating a Fitness App
Problem Statement: users have trouble creating, sharing and finding workout plans
Design Outcome: a native fitness app
User Research
Create a brainstorm of how people would want to interact with the app
Persona:
Kate likes to workout every morning
Scenario:
- Kate goes on a run and turns on tracking on her smart watch
- Kate checks her smart watch for the work time and calorie burn
- Kate uses her smart phone to check out a fitness blogger
- Kate finds a HIIT workout plan and follows the workout video
- Kate skips a workout using her smart watch
- Kate uses her smart phone to skip a workout
- Kate creates a workout plan
- Kate shares an end of workout progress on her social media using smart phone
Organizing Information
App functions: play workout video, create workout plan, share workout progress and find new workout, skip workout, search for workout on watch, phone, tablet and desktop
Information Architecture:
Create an IA diagram to help organizing the information
