1. 7/24/2018 8:48 AM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. Designing Mobile Applications
7/24/2018 8:48 AM
P4048
Designing Mobile Applications
David Ortinau
Senior Program Manager, Mobile Developer Tools
@davidortinau
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

3. Microsoft Build 2017
7/24/2018 8:48 AM
You’re new to mobile application design
Maybe you have experience with desktop or web
Or you have built some mobile apps and want to improve
We ALL have a role in design.
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4. Conduct User Testing Provide as little context and direction as needed
Microsoft Build 2017
7/24/2018 8:48 AM
Conduct User Testing
Provide as little context and direction as needed
Encourage them to verbalize their thoughts
Listen. Watch. Observe.
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5. Mobile Design Principles
Microsoft Build 2017
7/24/2018 8:48 AM
Mobile Design Principles
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

6. One thing per screen Microsoft Build 2017 7/24/2018 8:48 AM
How do you know if you’re violated this principle?
When observing user testing you’ll see people hesitate or be slow to perform that task. Or they may miss it completely
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

7. Navigation UWP iOS Android Microsoft Build 2017 7/24/2018 8:48 AM
Use the navigation model that users expect on that platform
UWP and Android have back button on the device
iOS swipe off the edge
Flyout / Drawer menu can also happen on iOS and is increasingly popular.
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

8. Accessibility Set accessible name and description
Microsoft Build 2017
7/24/2018 8:48 AM
Accessibility
Set accessible name and description
Use resizable text units of measure
Color contrast
Use the navigation model that users expect on that platform
UWP and Android have back button on the device
iOS swipe off the edge
Flyout / Drawer menu can also happen on iOS and is increasingly popular.
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

9. Design for Touch One handed—49% Cradled—36% Two handed—15%
Microsoft Build 2017
7/24/2018 8:48 AM
Design for Touch
One handed—49%
Cradled—36%
Two handed—15%
Steven Hoober study
2013 study on how people hold their phones. really-hold-mobile-devices.php
Steven Hoober
Images: Stephanie Walter
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

10. Design for Touch Ugh! M’kay Yes! Microsoft Build 2017
7/24/2018 8:48 AM
Design for Touch
Ugh!
M’kay
Is it bad to now have something in a difficult to reach area? No, just not something I need to get to regularly.
One handed users will use a variety of grips. Don’t use these as exact areas, use them as basic guides. Important things that users need to easily touch should be near or within these areas.
- Images
Yes!
Steven Hoober “Designing Mobile Interfaces”
blog.usabilla.com/designing-thumbs-thumb-zone/
Images: Stephanie Walter
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

11. Design for Touch Hit area 40px + 5px margin Microsoft Build 2017
7/24/2018 8:48 AM
Design for Touch
Hit area 40px + 5px margin
How big should my buttons be?
Add button visuals, build UI.
----
Principle
Design for input – TOUCH
40px + 5px margin – Microsoft usability guide
44px guideline – Josh Clark
9.5mm? 22mm?
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

12. Pixels?! Apple Android UWP Point (PT)
Microsoft Build 2017
7/24/2018 8:48 AM
Pixels?!
iOS
Pixel Size
Factor 1x
40px 2x
80px 3x
120px
Android
ldpi
20px
0.5x
mdpi
hdpi
60px
1.5x
xhdpi
xxhdpi
xxxhdpi
160px 4x
UWP
100% Scale
125% Scale
50px
1.25x
150% Scale
200% Scale
300% Scale
Apple
Point (PT)
Android
Density Independent Pixels (DiP or DP)
Scale Independent Pixels (SP) for fonts
UWP
Device-Independent Pixels (DIP)
XF uses the underlying platform default unit
These are relations in inches
iOS: 160 units to the inch
Android: 160 units to the inch
Windows Phone: 240 units to the inch
These are relations in centimeters if you prefer metric system
iOS: 64 units to the centimeter
Android: 64 units to the centimeters
Windows Phone: 96 units to the centimeters
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

13. Design with Vector Graphics
Microsoft Build 2017
7/24/2018 8:48 AM
Design with Vector Graphics
Where possible design in vector at 1x and let the tool export as needed.
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

14. Vector Export Microsoft Build 2017 7/24/2018 8:48 AM
Where possible design in vector at 1x and let the tool export as needed.
Maybe screenshot of Sketch and alternative for Windows?
Adobe Experience Design
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

15. rendr.io/from-sketch-to-app-a-design-to-development-workflow/
Microsoft Build 2017
7/24/2018 8:48 AM
rendr.io/from-sketch-to-app-a-design-to-development-workflow/
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

16. Integration with other devices
Microsoft Build 2017
7/24/2018 8:48 AM
Offline Features
Offline / Online Sync
Location Services
Mapping
Voice
Design for Context
One Handed Use
Privacy
Noisy
WIFI vs Cellular Data
Bluetooth/WIFI
Integration with other devices
Be aware of expected and unexpected contexts.
BLE or GPS location based
Online or Offline
Wifi or Cell data
What considerations might these contexts raise?
How would I design differently considering?
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

17. 57% multiple devices 21% concurrently Video Streaming Gaming
Microsoft Build 2017
7/24/2018 8:48 AM
57% multiple devices
21% concurrently
Video Streaming
An activity may begin on one device and resume on another.
Research stats to support this?
People don't often perform a single activity on one device. Some activities span multiple devices. Real world example? Shopping?
Gaming
Mobile First
Shopping
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

18. Microsoft Build 2017
7/24/2018 8:48 AM
Affordance
“A perceived signal or clue that an object may be used to perform a particular action.”
Explicit
Pattern
Metaphor
Negative
Push Me
Today | Schedule | Settings
Login
An “affordance” is a perceived signal or clue that an object may be used to perform a particular action.
Explicit – “push” or “log in” or “submit”
Pattern Affordance – by following a pattern it affords behavior. Disjointed words across the top or bottom of a screen are likely navigation. It follows an established pattern metaphor
Hidden Affordance – revealed based on another action. Hovering a link. Tricky on mobile. Think Pinterest scroll reveals buttons.
Metaphor – icons, affordance is drawn from real world experience. Magnifying Glass. Printer. Phone. Envelope.
Negative – disabled grey state.
Push Me
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

19. Call to Action: Know Platform Culture
Microsoft Build 2017
7/24/2018 8:48 AM
Call to Action: Know Platform Culture
Each platform publishes design guides
Android
developer.android.com/design/
iOS
developer.apple.com/ios/human-interface-guidelines/overview/design-principles/
UWP
developer.microsoft.com/en-us/windows/apps/design
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

20. 7/24/2018 8:48 AM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.