2. We’ll take a look at
UX specifics for different platforms
Industry standards
Best practices of creation
of the multi-platform applications
Some myths about platforms
8. why do people need so
many devices?
along with personal preferences we:
• solve different problems;
• work in different conditions;
• integrate into different environments
9.
10. by profession: engineer, administrative employee, support, etc.
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
equipment requirements: steady Internet connection,
cheap but productive hardware
who is a typical
desktop user?
11.
12. by profession: sales people, writers, managers…
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
equipment requirements: quick start, lightweight, durability,
autonomy: possibility work without Internet and power
who is a typical
laptop user?
13.
14. profession: retired, housewife, doctor, top-manager
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
equipment requirements: quick start, lightweight, durability,
autonomy: possibility work without Internet and power
who is a typical
tablet user?
15.
16. profession: any
job specifics: quick and urgent tasks
environment: in the move
equipment requirements: quick start, lightweight, durability,
autonomy: possibility work without Internet and power, do not
bother people around, possibility to share
who is a typical
smartphone user?
17. task specifics
Platform
Screen size
(px)
External
keyboard
Mobility
Active parallel
tasks
Time 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.
19. overview
• Desktop: OSX HIG, Windows 7, Windows 8
• Web: W3C, Nielsen Usability Heuristics
• Mobile: iOS HIG, Adroid, Windows Mobile
20. Apple OS X Human Interface Guidelines
available since 2001
include:
• 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
21.
22. Windows 7 Human Interface Guidelines
2010
include:
• to many letters and images;
• basic screen building patterns;
• UI elements list with descriptions
• texts composition guidelines
26. Web Standards
there 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/
27. 10 Usability Heuristics for
User Interface Design by JAKOB NIELSEN
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation
28.
29. Apple iOS Human Interface Guidelines
available 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
30. Android Design
always online since 2012
include:
• 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
31.
32. Windows Phone Design
online
include:
• philosophy of the platform as awel as
ecosystem behind;
• design approach;
• application structure suggestions;
• animation;
• UI elements;
• graphical assets to start designing fast
36. 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
37.
38. 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?
39. 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)?
40. 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?
41. 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.
42. 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
43. 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
44.
45. 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
46. 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)
47. 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
50. 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
52. 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
56. 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
57. 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
58. 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.
59. 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.
