Desire Paths & Inclusive Design

So you have an idea and want to build an app. Have you figured out the design-dev plan yet? In this talk I share my approach for mobile development:

1. Design for Inclusion (Think Personas)
2. Instrument for Understanding (Think Analytics)
3. Prototype for Validation (Think Resources)
4. Reimagine for Affordances (Think Dual-Screen!)

Read the longer series of posts here:
https://bit.ly/desire-paths-design

Transcript

1. #DesignForImpact | http://bit.ly/desire-paths-design @nitya @nitya Desire Paths & Inclusive Design #DesignForImpact http://bit.ly/desire-paths-design Nitya Narasimhan, PhD | Microsoft Cloud Advocate | @nitya Image Credit: Noun Project Image Credit: https://undraw.co
2. #DesignForImpact | http://bit.ly/desire-paths-design @nitya About Me • Phd & Polyglot 20+ yrs software R&D in mobile, web, distributed • Visual Storyteller convey complex concepts to diverse audiences • Cloud Advocate help translate awareness into actionable learning
3. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Objectives • Think Design What does your user want? Is your design inclusive? • Think Development How can you validate ideas? How can you evolve them? • Resources: Share comments, get slides! http://bit.ly/desire-paths-design • Image Credit: https://undraw.co
4. #DesignForImpact | http://bit.ly/desire-paths-design @nitya • User Who is the audience? What does a target user look like? • Concept What is your idea? Does it match your user’s needs? • Platform: Where should you build it? Why? Will it work? So you want to build an app! What’s your design-dev plan?
5. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Why Mobile • 7.26B | users by 2022 • 220 | minutes/user daily • 2617 | clicks/user daily • 48% | access internet on phone • 40% | uninstall apps for unuse • ~80 | apps installed/user (avg) • ~9 | apps actively used (daily) Image Credit: https://undraw.co Source: https://fueled.com/blog/mobile-stats/
6. #DesignForImpact | http://bit.ly/desire-paths-design @nitya • User Who is the audience? What does a target user look like? • Concept What is your idea? Does it match your user’s needs? • Platform: Where should you build it? Why? Will it work? Image Credit: https://undraw.co So you want to build an app! What’s your design-dev plan?
7. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Desire Paths Source: Desire Path: Medium / Jul 2019 Desire paths are the trails created by natural human traffic through an environment .. They emerge as “preferred” shortcuts when the “constructed” alternative is either non-existent or ineffective in user’s context - pay attention! Software Example: Twitter hashtags, threads, photos
8. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Want to learn more? Visit this later. Detect desire paths, then “pave” them for a better user experience Design Example: Wayfinding within mobile apps. Development Approach: Instrumentation & User feedback
9. #DesignForImpact | http://bit.ly/desire-paths-design @nitya • User Who is the audience? What does a target user look like? • Concept What is your idea? Does it match your user’s needs? • Platform: Where should you build it? Why? Will it work? Image Credit: https://undraw.co So you want to build an app! What’s your design-dev plan?
10. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Inclusive Design https://www.microsoft.com/design/inclusive/ Recognize exclusion (biases) Learn from diversity (perspectives) Solve for one, extend to many (constraints)
11. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Recognize Exclusion https://www.microsoft.com/design/inclusive/ Exclusion happens when we solve problems using our own biases! Physical, cognitive, social exclusion behaviors Permanent, temporary, situational exclusion contexts
12. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Learn from Diversity https://www.microsoft.com/design/inclusive/ Put the user in the center of your proccess (& you are not the user!) The insight is in the user’s adaptation behaviors The solution lies in actively building empathy
13. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Solve for one, extend to many https://www.microsoft.com/design/inclusive/ Look for common ground - everyone experiences exclusion The insight is in the beauty of constraints - reuse becomes key The solution lies in perceiving universal benefits
14. #DesignForImpact | http://bit.ly/desire-paths-design @nitya • User Who is the audience? What does a target user look like? • Concept What is your idea? Does it match your user’s needs? • Platform: Where should you build it? Why? Will it work? Image Credit: https://undraw.co So you want to build an app! What’s your design-dev plan?
15. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Approach • Design for User Inclusion Think PERSONAS • Instrument for User Understanding Think ANALYTICS • Prototype for Idea Validation Think RESOURCES • Reimagine for Affordances Think DUAL-SCREEN & MULTI-MODAL Image Credit: https://undraw.co
16. #DesignForImpact | http://bit.ly/desire-paths-design @nitya https://www.microsoft.com/design/inclusive/ The Persona Spectrum We use the Persona Spectrum to understand related mismatches and motivations across a spectrum of permanent, temporary, and situational scenarios. It’s a quick tool to help foster empathy and to show how a solution scales to a broader audience.
17. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Approach • Design for User Inclusion Think PERSONAS • Instrument for User Understanding Think ANALYTICS • Prototype for Idea Validation Think RESOURCES • Reimagine for Affordances Think DUAL-SCREEN & MULTI-MODAL Image Credit: https://undraw.co
18. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Analytics Instrument your app to collect & analyze behavior • Integrate App Center SDK Automatically gather usage data. Define custom events for additional insights. • Collect & visualize key metrics View app analytics, user demographics, session usage & more at scale. • Define & collect custom events Track how users navigate your app, find desire paths and pave them Image Credit: https://undraw.co How App Center Analytics Works
19. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Approach • Design for User Inclusion Think PERSONAS • Instrument for User Understanding Think ANALYTICS • Prototype for Idea Validation Think RESOURCES • Reimagine for Affordances Think DUAL-SCREEN & MULTI-MODAL Image Credit: https://undraw.co
20. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Affordances Microsoft Surface Duo Dual-Screen Layouts Think PAIRED APPS & SPANNED APPS • Unique 360-degree hinge Think MULTI-POSTURE & ADAPTIVE UX • Android + M365 apps Think PRODUCTIVITY & PLAY • Native, Multi-Platform, Web Think DEVELOPMENT-READY Image Credit: https://undraw.co https://aka.ms/sdd-dual-screen https://dev.to/t/surfaceduodev
21. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Approach • Design for User Inclusion Think PERSONAS • Instrument for User Understanding Think ANALYTICS • Prototype for Idea Validation Think RESOURCES • Reimagine for Affordances Think DUAL-SCREEN & MULTI-MODAL Image Credit: https://undraw.co
22. #DesignForImpact | http://bit.ly/desire-paths-design @nitya What is Rapid Prototyping? • Build a mockup of idea, app or design • Validate the idea by demo to users • Do this iteratively in agile teams Image Credit: https://undraw.co
23. #DesignForImpact | http://bit.ly/desire-paths-design @nitya @nitya Let’s talk about Design Resources! Image Credit: https://undraw.co
24. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Design Resources Tools / Principles Design practices & resources from device manufacturers. 1. Microsoft Design (Fluent UI, Inclusive design) 2. Google Design (Material Design, Fonts) 3. Apple Design (SF Symbols, Templates)
25. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Design Resources Content Assets Open source or free assets for professional looking presentations or app views. 1. Images Unsplash, Pixabay, Flickr 2. Icons Noun Project 3. IconFonts IcoMoon
26. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Design Resources Wireframes Wireframes are visual guides to help you blueprint your app design before you build 1. Mockup User Interfaces Balsamiq, Figma 2. Build Interactive Prototypes Invision, FluidUI, NinjaMock Focus on getting design elements (UI, Flows) right
27. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Design Resources Wireframes Wireframes are visual guides to help you blueprint your app design before you build 1. Mockup User Interfaces Balsamiq, Figma, NinjaMock 2. Build Interactive Prototypes Invision, FluidUI Interactive Demo Hosted for mobile/web access, get user feedback
28. #DesignForImpact | http://bit.ly/desire-paths-design @nitya @nitya Let’s talk about Development Resources!
29. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Building Functional Interactive Apps • No Code Use wireframe+mock tools to build, test UI/UX. Cannot integrate or use APIs or services. Think designers. • Low Code Visual drag-and-drop approach to mobile/web app development. Ex: Power Platform. Think citizen devs. • Full Code Build mobile/web app from scratch or boilperplate, integrating APIs or services. Think mobile/web devs. Image Credit: https://undraw.co
30. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Developer Resources Mock Data Placeholder data (text, images, user profiles) to help create realistic UI/UX 1. Generators https://loremipsum.io 2. User Profiles RandomUser.me 3. FakeData Libraries Faker.js, JSONPlaceholder 4.
31. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Developer Resources Mock Data Placeholder data (text, images, user profiles) to help create realistic UI/UX 1. Generators LoremIpsum 2. User Profiles RandomUser.me 3. FakeData Libraries Faker.js, JSONPlaceholder 4. Downloadable dataset or accessible via API
32. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Developer Resources Mock Data Placeholder data (text, images, user profiles) to help create realistic UI/UX 1. Generators LoremIpsum 2. User Profiles RandomUser.me 3. FakeData Libraries Faker.js, JSONPlaceholder 4.
33. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Developer Resources API Integration APIs allow for cross-platform app experiences, addition of remote capabilities. 1. Mock your API Postman 2. 3rd Party APIs Programmable Web Simulate API responses using mock servers for “new” features or workflows you want to showcase
34. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Developer Resources API Integration Placeholder data (text, images, user profiles) to help create realistic UI/UX 1. Mock your API Postman 2. 3rd Party APIs Programmable Web Find APIs for any category or keyword, globally
35. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Developer Resources App Generators The Yeoman tool & workflow simplifies discovery & usage of starter kits to scaffold apps 1. Static Websites JAMStack, GitHub Pages 2. Web Apps React, Vue, Angular, PWA 3. Mobile Apps Android, iOS, Flutter, Hybrid
36. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Recap • Think Design What does your user want? Is your design inclusive? • Think Development How can you validate ideas? How can you evolve them? • Resources: Share comments, get slides! http://bit.ly/desire-paths-design • Image Credit: https://undraw.co
37. #DesignForImpact | http://bit.ly/desire-paths-design @nitya Recap: Hack Your Hackathon! Plan Ahead Design Resources can get you 80% of the way... Prototype Wisely Focus on 20% core idea - use fake data, APIs & generators Perfect Pitch Keep plans simple, execute on checklists.
38. #DesignForImpact | http://bit.ly/desire-paths-design @nitya This is the 25-min talk I gave on Local Hack Day .. Today we’ll just scan some of the resources
39. #DesignForImpact | http://bit.ly/desire-paths-design @nitya @nitya Thanks for Listening! Slides from Local Hack Day: https://j.mp/2020-hacks4hacks Nitya Narasimhan, PhD | @nitya Local Hack Day 2020 Image Credit: Noun Project Image Credit: https://undraw.co