design - microsoft azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. the design...
TRANSCRIPT
![Page 1: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/1.jpg)
design
john barr Comp 306 Mobile Development
1"barr")"Comp 306"
![Page 2: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/2.jpg)
design define design? – a plan for the construction of an object– “form meets function”– many solutions
what are concepts are involved in good design? – functionality– usability– aesthetics– consistency– simplicity– organization
barr Comp 306" 2"
![Page 3: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/3.jpg)
barr Comp 306" 3"
![Page 4: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/4.jpg)
Interactive Design Define interactive design? – a plan for the construction of an service or event– flow– marry goals with user requirements
Interactive Design involves – Cognitive Psychology
• metaphor, affordances, expectations
– Human-Computer Interaction– User Interface Design
barr Comp 306" 4"
![Page 5: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/5.jpg)
XXX-Centered DesignOrganization-Centered – assumes prior knowledge– overwhelming at first but useful in the end– e.g., blackboard, hospital intranet
barr Comp 306" 5"
![Page 6: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/6.jpg)
barr Comp 306" 6"
![Page 7: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/7.jpg)
XXX-Centered DesignOrganization-Centered – assumes prior knowledge– overwhelming at first but useful in the end– e.g., blackboard, Hospital intranet
Technology-Centered – start with bleeding-edge tool
• e.g., Flash, HTML5, iPod
– build site around tool– learn new skills
barr Comp 306" 7"
![Page 8: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/8.jpg)
barr Comp 306" 8"
![Page 9: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/9.jpg)
XXX-Centered DesignOrganization-Centered
Technology-Centered
Design-Centered – Cool, Colorful, Hip– Overwhelming– Hard to Use
barr Comp 306" 9"
![Page 10: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/10.jpg)
barrbarr Comp 306" 10"
![Page 11: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/11.jpg)
XXX-Centered DesignOrganization-Centered
Technology-Centered
Design-Centered
problem: forces user to learn/adapt to product
barr Comp 306" 11"
![Page 12: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/12.jpg)
Human-Centered Design Designed around target audience
Extensive user testing at each stage – generate ideas– validate assumptions– evaluate potential
Focus on tasks & goals – Who is the user? (profile) – What do they want to do? (task)– Why are they doing it? (goal)
barr Comp 306" 12"
![Page 13: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/13.jpg)
Human-Centered Design Visibility
– User can predict what to do based on visual inspection
Accessibility – ease of information gathering– navigation, search, table of contents, page numbers– chunking – breaking info down into bites size pieces
Legibility – Easy to read– Contrast, Font, Font Size
– Kindle vs. iPad
Language - short, meaningful sentences- using simple words
barr Comp 306" 13"
![Page 14: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/14.jpg)
Human-Centered Design Ethnographic studies – observe, interview, survey
1. Comparative Analysis2. Use Cases3. Participatory Design Session4. Prototype Testing5. Usability Testing6. Design for Errors
barr Comp 306" 14"
![Page 15: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/15.jpg)
In practice 1. Idea Generation
2. Initial Research
3. The Design Cycle
4. Development
5. Testing
6. Launch
7. Maintenance
barr Comp 306" 15"
![Page 16: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/16.jpg)
Idea Generation Starts as a seed and grows when natured – Brainstorm– Bounce your ideas off colleagues
• knowledge about domain• brutal honesty• open to suggestion but stand ground
– Reflection– Simplify to core idea
barr Comp 306" 16"
![Page 17: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/17.jpg)
In practice 1. Idea Generation
2. Initial Research– Explore existing apps
• Comparative Analysis
– Identify your audience– Develop personas, use cases, & storyboards
3. The Design Cycle
4. Development
barr Comp 306" 17"
![Page 18: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/18.jpg)
Initial Research Comparative Analysis – Closely examine similar apps– Create a feature matrix– List strengths & weaknesses– Identify defining features
barr Comp 306" 18"
![Page 19: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/19.jpg)
barr Comp 306" 19"
![Page 20: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/20.jpg)
Initial Research Target Audience– Demographic Information
• Objective, Factual Information• Age, gender, geographic location, education
– Psychographic Profile• Political & Religious Beliefs• Environmentalist, Socially Conscious• Fun Loving, Hard Working• Free-spirited, family-oriented• Lover of Music, Movies, Dance, Wine, Food, Video Games
barr Comp 306" 20"
![Page 21: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/21.jpg)
ha a n ar h o o n a r n oo h no
![Page 22: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/22.jpg)
a b
bro ra o r n n ar h ba an o a a
ho ha on a a hr on n ro ra n h a hr an ho ha on h ra b on on
h ho a
o ra h hara r o a on a h hara r on n r an h or
![Page 23: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/23.jpg)
What demographics are identified in the following description?
The audience for the LeftyStuff Web site is potential purchasers of LeftyStuff products who have responded to one of LeftyStuff’s banner ads and are interested in items designed especially for left-handed people. Most are adults, equally divided among men and women, between the ages of 25 and 50, who live in the US or Canada, are sports-minded, and have family incomes greater than $50,000. Most have never visited the site before.
![Page 24: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/24.jpg)
Steps in defining the audienceAsk your client the following questions about site visitors:
Who are they?
Why are they at the site?
How did they get there?
How old are they? What’s the range of their ages?
Where do they live?
What gender are they? Mostly men/women? why?
How wealthy are they compared to the rest of the population?
What’s their history of dealing with your organization?
What have they done before at your web site?
Are there any common characteristics that stand out?
![Page 25: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/25.jpg)
Exercise
Talk with the people on either side of you and describe the audience for an app that allows a user to scan in a required book in the bookstore and determine whether it's available in the library or on Amazon. Write your description on a whiteboard.
![Page 26: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/26.jpg)
Initial Research Personas & Use Cases (Scenarios)
Alice, 22 years old, just moved to Philly, recent college graduate, barista at local coffee shop, likes Franz Ferdinand, hates sports, owns an iPod
Wants to passively discover good alternative rock bands and small venues/bars in Fishtown. Turns on her iPod, and goes to megsradio.com. Sees list of local bands and their types of music. Clicks on one and one of the band's songs starts to play.
barr Comp 306" 21"
![Page 27: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/27.jpg)
Initial Research Personas & Use Cases
Nurse collecting medical history at a doctor's office Initial assumption: The patient has seen a medical receptionist who has created a record in the system and collected the patient’s personal information (name, address, age, etc.). A nurse is logged on to the system and is collecting medical history.
Normal: The nurse searches for the patient by family name. If there is more than one patient with the same surname, the given name (first name in English) and date of birth are used to identify the patient.The nurse chooses the menu option to add medical history.The nurse then follows a series of prompts from the system to enter information about consultations elsewhere on mental health problems (free text input), existing medical conditions (nurse selects conditions from menu), medication currently taken (selected from menu), allergies (free text), and home life (form).
barr Comp 306" 22"
![Page 28: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/28.jpg)
Initial Research Storyboarding
Bobby comes to SITE after doing a Google search for “central new york indie rock”.
He see a link that says “promote your band”.
He is asked to create a login, which he does
He enters a myProfile portal
barr Comp 306" 23"
![Page 29: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/29.jpg)
Initial Research Storyboarding
Bobby comes to SITE after doing a Google search for “central new york indie rock”.
He see a link that says “promote your band”.
He is asked to create a login, which he does
He enters a myProfile portal
barr Comp 306" 24"
![Page 30: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/30.jpg)
Initial Research Storyboarding
Bobby comes to SITE after doing a Google search for “central new york indie rock”.
He see a link that says “Promote your Band”.
He comes to a pages that show “Bands we are Currently Promoting” with images, links to free music downloads, lists of upcoming events
He sees a “Start Promoting Your Band” button
This takes him to a “walk through” account creation interaction…
barr Comp 306" 25"
![Page 31: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/31.jpg)
In practice 1. Idea Generation
2. Initial Research
3. The Design Cycle1. Additional Research
2. Rapid PrototypingWireframes, UI Mockups, Prototypes
3. Test the crap out of it4. Repeat until (some) users rave about it
4. Development
barr Comp 306" 26"
Repeat initial research steps as necessary (feedback loop)
![Page 32: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/32.jpg)
The Design Cycle Wireframes – paper prototype
barr Comp 306" 27"
![Page 33: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/33.jpg)
The Design Cycle Wireframes – layout & flow
barr Comp 306" 28"
Demo%
![Page 34: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/34.jpg)
The Design Cycle User Interface Mockup – look & feel
barr Comp 306" 29"
Demo%
![Page 35: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/35.jpg)
Prototype
barr Comp 306" 30"
Demo%
![Page 36: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/36.jpg)
Prototyping Tools
barr Comp 306" 31"
![Page 37: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/37.jpg)
Prototyping Tools
barr Comp 306" 32"
![Page 38: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/38.jpg)
The Design Cycle Individual Testing – Collect Demographic and Psychographic info– Ask about experience with related web site– Step through Prototype & Ask Subject to
“verbalize” thoughts– Take notes– Be welcoming– Ask for feedback & suggestions
Scale of testing becomes larger as design progresses.
barr Comp 306" 33"
![Page 39: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/39.jpg)
Design Cycle Summary Wireframes – boxes & text UI Mockup – colors, images, layout Prototype – app with limited functionality
Testing at after stage Don’t move on until it is perfect Use tools to help you rapidly prototype
barr Comp 306" 34"
![Page 40: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/40.jpg)
The Product 1. Idea Generation
2. Initial Research
3. The Design Cycle
4. Development
5. Testing
6. Launch
7. Maintenance
barr Comp 306" 35"
![Page 41: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/41.jpg)
8 Random Tips Design views that respond quickly
– Keep graphics to a minimum to reduce load times– Compress all images and videos
Simplify navigation
Be consistent with fonts, colors and menus – Choose good color scheme – ask photoshop– Keep sufficient contrast between the text and background.
Use plenty of “white space”
barr Comp 306" 36"
![Page 42: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/42.jpg)
8 Random Tips Don't overuse flashing/animated graphics.
No pop-up windows
Provide users with a way to contact you
Preview app on both iOS and Android
barr Comp 306" 37"
![Page 43: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/43.jpg)
resources – boxes and arrows
barr Comp 306" 38"
![Page 44: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/44.jpg)
resources – Adobe blog
barr Comp 306" 39"
https://theblog.adobe.com/10-dos-donts-mobile-ux-design/
![Page 45: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/45.jpg)
resources – Mobile User Experience (UX) Design
barr Comp 306" 38"
https://www.interaction-design.org/literature/topics/mobile-ux-design
![Page 46: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/46.jpg)
resources – Bad Designs
barr Comp 306" 40"
![Page 47: design - Microsoft Azureclasses.eastus.cloudapp.azure.com/.../design_2018.pdf · 3. The Design Cycle 1. Additional Research 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes](https://reader030.vdocuments.net/reader030/viewer/2022041022/5ed40ef98d46b66d2263601b/html5/thumbnails/47.jpg)
Aside: Virality What does viral mean?
Socially: people recommend to friends
Mathematically: the growth rate is > 1.0 ! (1.1)^n (exponential growth)! (0.9)^n (exponential decay)
But sometimes a site needs a little PR nudge…
barr Comp 306" 41"