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.

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.

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.

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.

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.

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.

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.

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.

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. http://www.uxmatters.com/mt/archives/2013/02/how-do-users- really-hold-mobile-devices.php Steven Hoober www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php Images: Stephanie Walter © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

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. https://blog.stephaniewalter.fr/en/mobile-touch-areas-freebies/ - 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.

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.

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) http://stackoverflow.com/questions/29808498/xamarin-forms-widthrequest-value-meaning 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 medium.com/@pnowelldesign/pixel-density-demystified-a4db63ba2922 © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

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.

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.

rendr.io/from-sketch-to-app-a-design-to-development-workflow/ Microsoft Build 2017 7/24/2018 8:48 AM http://rendr.io/from-sketch-to-app-a-design-to-development-workflow/ 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.

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.

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 www.thinkwithgoogle.com/articles/device-use-marketer-tips.html © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

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.” www.smashingmagazine.com/2014/06/affordance-most-underrated-word-in-web-design/ 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. https://www.smashingmagazine.com/2014/06/affordance-most-underrated-word-in-web-design/ Push Me © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

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.

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.