Desire Paths & Inclusive Design

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

5b392dc79d5b6d1dab580bf60e26fb7c?s=128

Nitya Narasimhan, PhD

September 10, 2020
Tweet

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