Desire Paths & Inclusive Design

Slide 1

Slide 1 text

#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

Slide 2

Slide 2 text

#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

Slide 3

Slide 3 text

#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

Slide 4

Slide 4 text

#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?

Slide 5

Slide 5 text

Slide 6

Slide 6 text

#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?

Slide 7

Slide 7 text

#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

Slide 8

Slide 8 text

#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

Slide 9

Slide 9 text

#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?

Slide 10

Slide 10 text

#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)

Slide 11

Slide 11 text

#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

Slide 12

Slide 12 text

#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

Slide 13

Slide 13 text

#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

Slide 14

Slide 14 text

#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?

Slide 15

Slide 15 text

#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

Slide 16

Slide 16 text

#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.

Slide 17

Slide 17 text

Slide 18

Slide 18 text

#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

Slide 19

Slide 19 text

Slide 20

Slide 20 text

#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

Slide 21

Slide 21 text

Slide 22

Slide 22 text

#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

Slide 23

Slide 23 text

#DesignForImpact | http://bit.ly/desire-paths-design @nitya @nitya Let’s talk about Design Resources! Image Credit: https://undraw.co

Slide 24

Slide 24 text

#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)

Slide 25

Slide 25 text

#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

Slide 26

Slide 26 text

#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

Slide 27

Slide 27 text

#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

Slide 28

Slide 28 text

#DesignForImpact | http://bit.ly/desire-paths-design @nitya @nitya Let’s talk about Development Resources!

Slide 29

Slide 29 text

#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

Slide 30

Slide 30 text

#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.

Slide 31

Slide 31 text

#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

Slide 32

Slide 32 text

#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.

Slide 33

Slide 33 text

#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

Slide 34

Slide 34 text

#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

Slide 35

Slide 35 text

#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

Slide 36

Slide 36 text

#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

Slide 37

Slide 37 text

#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.

Slide 38

Slide 38 text

#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

Slide 39

Slide 39 text

#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