User Experience for Multi-Platform Applications

by Tanya Zavialova

We’ll take a look atUX specifics for different platforms

Industry standards

Best practices of creation of the multi-platform applications

Some myths about platforms

why do people need so many devices?

different in size and weight

different in mobility and productivity

different in levels on security and freedom

because there are different needs

why do people need so many devices?

along with personal preferences we:• solve different problems;• work in different conditions;• integrate into different environments

who is a typical desktop user?

who is a typical desktop user?

job specifics: office chores that require a high concentration during a long period of time

environment: proper chair, proper table, many people around, limited personal space, annoying air-conditioning

by profession: engineer, administrative employee, support, etc.

equipment requirements: steady Internet connection, cheap but productive hardware

who is a typicallaptop user?

who is a typicallaptop user?

job specifics: always on the move, multitasking, communicate with many different people

environment: constantly changes, noisy, often without a proper desk or in a poor light conditions

by profession: sales people, writers, managers…

equipment requirements: quick start, lightweight, durability,autonomy: possibility work without Internet and power

who is a typicaltablet user?

who is a typicaltablet user?

job specifics: coordination and monitoring when major tasks are done away from a desktop

environment: comfortable with a sudden possibility to change a location for a short period of time

profession: retired, housewife, doctor, top-manager

equipment requirements: quick start, lightweight, durability,autonomy: possibility work without Internet and power

who is a typicalsmartphone user?

who is a typicalsmartphone user?

job specifics: quick and urgent tasks

environment: in the move

profession: any

equipment requirements: quick start, lightweight, durability,autonomy: possibility work without Internet and power, do not bother people around, possibility to share

task specifics

Platform Screen size(px)

External keyboard Mobility Active parallel

tasksTime to

complete a single task

Acceptable system idle

time

desktop 1024+ + - 100500+ hours up to 1 min

laptop 1280+ + + 5+ up to 30 min. up to 30 sec.

web 1024+ n/а + 1–5 up to 10 min. up to 10 sec.

tablet 800+ - + 1–2 up to 5 min. up to 2 sec.

smartphone 320+ - + 1 up to 2 min. up to 1 sec.

industry standards

overview• Desktop: OSX HIG, Windows 7, Windows 8

• Web: W3C, Nielsen Usability Heuristics

• Mobile: iOS HIG, Adroid, Windows Mobile

Apple OS X Human Interface Guidelinesavailable since 2001include: • philosophical principles;• general approach to the application user

interface, menus and screens building;• whole list of user UI elements with full

description and usage patterns;• icon creation guidelines;• texts composition guidelines

Windows 7 Human Interface Guidelines2010include: • to many letters and images;• basic screen building patterns;• UI elements list with descriptions• texts composition guidelines

Windows 8 Human Interface Guidelines2014 improved include: • animation;• dialog behavior patterns;• UI elements;• advertisement placement rules;• design fro several screens guidelines;• flexible layouts

Web Standardsthere are many articles on a general practice and UI frameworks with own specifics. Among others I highly recommend to read: • W3C Web Accessibility Initiative

http://www.w3.org/WAI/users• Nielsen Usability Heuristics

http://www.nngroup.com/articles/ten-usability-heuristics/

10 Usability Heuristics for User Interface Design by JAKOB NIELSEN

1. Visibility of system status2. Match between system and the real world3. User control and freedom4. Consistency and standards5. Error prevention6. Recognition rather than recall7. Flexibility and efficiency of use8. Aesthetic and minimalist design9. Help users recognize, diagnose, and recover from errors10. Help and documentation

Apple iOS Human Interface Guidelinesavailable from the first days of iOS (2008)include: • basic principles of UI design;• UI elements description and

usage guidelines;• steps to take to make an app;• case studies;• description of available technology

Android Designalways online since 2012include: • basic UI design principles;• UI specifics for particular devices;• philosophy behind chosen stylistic

approach;• interaction patterns;• standard UI components description;• graphical assets to start designing fast

Windows Phone Designonlineinclude: • philosophy of the platform as awel as

ecosystem behind;• design approach;• application structure suggestions;• animation;• UI elements;• graphical assets to start designing fast

process

what to do when?

http://www.duncanistan.com/2012/10/embracing-ux-process.html

what to do when?

1. Find out goals of the business, customer and user

2. Suggest and choose a concept

3. Check feasibility with development team

4. Detail the concept, create prototype

5. Check usefulness and initial usability of the concept using

prototype to do a user testing with end users

6. Improve prototype

7. Help developers to implement the design

Goals of business,customer and users

How to understand what the business needs?

Business exists for revenue.

Find out:

What products and services are profitable?

How is it communicated via brand language?

How your project is related to it?

How to understand what the customer needs?

Customer is the business representative

who persuades among others his/her own interest.

Ask:

What have been done already? What is the project status?

What problem is being solved currently?

Who is the target audience?

What users like about the current implementation

(if there is current implementation)?

How to understand what the user needs?

The user is simply wants to perform his/her regular tasks

without being disturbed.

Ask:

What tasks user performs?

How does the user do theses tasks (have done before)?

What does the user likes in current implementation

and what can be improved in his/her opinion?

Design project goal

Good goal helps to stay focused, chose the best possible

alternative, insure in the choice and convince others.

We as designers and usability specialists have to stay focused

first of all on the users goals while keeping in mind

the goals of the business and the customer.

Design project goal

create <a form of solution>, that helps <target audience>

to perform <activity> with a given <level of support>

based on elevator speech design goal by Suleman Shahid

Opportunities

even if there are 100500 similar solutions currently presented on the market, there must be some points that either not yet covered, poorly implemented or there is no such technology to unleash their fool potential

information about such points you can find initial via user study among things people complain about

there those as opportunity areas that if addressed can provide a strong competitive advantage

concept

Concept

Treat the concept phase as an exploration of possible

solutions on how to make a good product or in other words

on how to help the user to accomplish his/her goals

To create concepts:

• write down user goals and tasks;

• explore existing solutions;

• combine existing and suggest new ones

Technical feasibility

Before presenting concepts to your customer

check feasibility with technical experts

To do so:

• visualize several screens;

• invite experts;

• evaluate, discuss;

• brainstorm on alternatives ( these can be even better

then initial concepts)

Detailing

When you have checked feasibility it is the time to detail your concept

Steps to follow:• prepare a scenario of the system usage in order to perform

a specific user’s task;• draw a schematic diagram to visualize the system flow

between screens while performing tasks according to scenarios;

• draw screens in detail;• you can also make an interactive prototype, so you have a better

feeling of the proposed design

users

why do you taste soup when cooking?

User Testing

You have to make sure that you proceed in the right direction,creating a useful product and do not miss important details

Consider:• you create a system to perform tasks –

check the success of the performance;• think beforehand what are you going

to measure and evaluate;• invite right users (target audience representatives);• do not interfere or help the user while he/she

performs the task;• use the test results to improve the product

multi-platform interfaces

Multi-platform interfaces

Think of switching between multiple platforms like of traveling abroad: you have already get used to a certain environment and now you go to a place where people behave differently, look differently and speak incomprehensible language.

How to get prepared? You have to learn:• vocabulary (UI elements library);• attractions (distribution store top apps);• life style and rhythm (interaction design patterns);• myths and superstitions

Vocabulary

Mind:• content;• shape;• size;• layout;• elements behavior

Attractions

Lifestyle and Rhythm

Myths and Superstitions

#1 Mobile First or at the start of the project you must optimize concept to be viewed mostly on mobile

I’d suggest to optimize for each and every platform concentrating of:- tasks;- context of use;- technical possibilities;- common sense

Myths and Superstitions

#2 Responsive Design is the panacea

Good application starts with the content and representation follows.

Consider:- what user requires;- what technology has

to offer;- then how it

could be displayed

Myths and Superstitions

#3 The behavior must be the same for all platforms

A rare user has simultaneously iPhone and Android in his pocket.

First optimize to a specific platform and then make sure the user gets the most from it.

Myths and Superstitions

#4 Desktop is outdated

Mobile and desktop are two parallel realms and we as designers are able to make the coexistence as easy and consistent as possible.

thank you!uxcookbook.com