design john barr Comp 306 Mobile Development barr

design john barr Comp 306 Mobile Development barr Comp 306 1

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

%FTJHOPG &WFSZEBZ 5 IJOHT PO "NB[PO barr Comp 306 (JWF BOFYBNQMFPG TPNFUIJOH UIBUJTXFMMEFTJHOFE( / 0 5 FMFDUSPOJD) 3

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

XXX-Centered Design Organization-Centered – assumes prior knowledge – overwhelming at first but useful in the end – e. g. , blackboard, hospital intranet barr Comp 306 5

barr Comp 306 6

XXX-Centered Design Organization-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, HTML 5, i. Pod – build site around tool – learn new skills barr Comp 306 7

barr Comp 306 8

XXX-Centered Design Organization-Centered Technology-Centered Design-Centered – Cool, Colorful, Hip – Overwhelming – Hard to Use barr Comp 306 9

barr Comp 306 10

XXX-Centered Design Organization-Centered Technology-Centered Design-Centered problem: forces user to learn/adapt to product barr Comp 306 11

Human-Centered Designed around target audience Extensive user testing at each stage – generate ideas – validate assumptions – evaluate potential Focus on tasks & goals – Who is the user? – What do they want to do? – Why are they doing it? barr Comp 306 (profile) (task) (goal) 12

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, – Kindle vs. i. Pad Font Size Language - short, meaningful sentences - using simple words barr Comp 306 13

Human-Centered Design Ethnographic studies – observe, interview, survey 1. 2. 3. 4. 5. 6. barr Comp 306 Comparative Analysis Use Cases Participatory Design Session Prototype Testing Usability Testing Design for Errors 14

In practice: the process 1. Idea Generation 2. Initial Research 3. The Design Cycle 4. Development 5. Testing 6. Launch 7. Maintenance barr Comp 306 15

In practice: the process 1. Idea Generation 2. Initial Research 3. The Design Cycle 4. Development 5. Testing 6. Launch 7. Maintenance barr Comp 306 16

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 17

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" 18

Initial Research Comparative Analysis – – Closely examine similar apps Create a feature matrix List strengths & weaknesses Identify defining features barr Comp 306" 19

barr Comp 306" 20

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" 21

Initial Research Target Audience – Demographic Information • Objective, Factual Information • Age, gender, geographic location, education – Psychographic Profile • • • barr Comp 306" Political & Religious Beliefs Environmentalist, Socially Conscious Fun Loving, Hard Working Free-spirited, family-oriented Lover of Music, Movies, Dance, Wine, Food, Video Games 22

Initial Research What audience are the following sites addressing? Look them up now. http: //www. disney. com http: //www. noaa. gov/ https: //www. fidelity. com/growing-managingwealth/overview

Initial Research Example: Fidelity web site Fidelity brokerage customers living in large sities with balances of at least $250, 000 who have conducted at least three online strock trades in the last three weeks and who have clicked on the Trade button on the Fidelity home page. 2 demographic characteristics (location, wealth) 2 characteristics on interest and history.

Initial Research What demographics are identified in the following description? The audience for the Lefty. Stuff Web site is potential purchasers of Lefty. Stuff products who have responded to one of Lefty. Stuff’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.

Initial Research Steps in defining the audience Ask 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?

Exercise Talk with the people in your breakout room 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.

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" 28

Initial Research Personas Alice, 22 years old, just moved to Philly, recent college graduate, barista at local coffee shop, likes Franz Ferdinand, hates sports, owns an i. Pod Wants to passively discover good alternative rock bands and small venues/bars in Fishtown. Turns on her i. Pod, 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

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" 30

Initial Research 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

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" 32

Initial Research Storyboarding Many different meanings depending on the context Here, we’re just laying out the steps that a user will take to use our app barr Comp 306" 23

Initial Research Storyboarding Bobby searches for an app that rates movies on the App store. He finds your app, sees that it is free and downloads it. He starts the app and is asked to create a login, which he does He enters a my. Profile portal barr Comp 306" 23

Initial Research Storyboarding Bobby searches for an app that rates movies on the App store. He finds your app, sees that it is free and downloads it. He starts the app and is asked to create a login, which he does He enters a my. Profile portal barr Comp 306" Violates ease of use! 23

Initial Research Storyboarding Bobby searches for an app that rates movies on the App store. He finds your app, sees that it is free and downloads it. He see a list of images of highly rated movies and a list of categories. He clicks on “Sci-Fi” and goes to a screen with a list of Sci-Fi movies ordered by rating… barr Comp 306" 23

In practice 1. Idea Generation 2. Initial Research 3. The Design Cycle 1. Additional Research Repeat initial research steps as necessary (feedback loop) 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes 3. Test the crap out of it 4. Repeat until (some) users rave about it 1. Development barr Comp 306" 26

The Design Cycle Wireframes – paper prototype barr Comp 306" 27

The Design Cycle Wireframes – layout & flow Demo barr Comp 306" 28

The Design Cycle User Interface Mockup – look & feel Demo barr Comp 306" 29

Prototype Demo barr Comp 306" 30

Prototyping Tools barr Comp 306" 31

Prototyping Tools barr Comp 306" 32

In practice 1. Idea Generation 2. Initial Research 3. The Design Cycle 1. Additional Research Repeat initial research steps as necessary (feedback loop) 2. Rapid Prototyping Wireframes, UI Mockups, Prototypes 3. Test the crap out of it 4. Repeat until (some) users rave about it 1. Development barr Comp 306" 26

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

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

The Development Process 1. Idea Generation 2. Initial Research 3. The Design Cycle 4. Development 5. Testing 6. Launch 7. Maintenance barr Comp 306" 35

Our process Mon 2 Nov Proj Overview 1 page document due Present idea and bid to be a client Tues 10 Nov Proj Part 1 Summary Statement, 2 x Persona, 2 x Use Cases due Present to Client Every Tues Present deliverables to client Choose new requirements for next week Update wireframes or prototype Tues 17 Nov Proj Part 2 3 x wireframes, initial requirements due Present to Client

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

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 i. OS and Android barr Comp 306" 37

resources – boxes and arrows barr Comp 306" 38

resources – Adobe blog barr Comp 306" https: //theblog. adobe. com/10 dos-donts-mobile-ux-design/ 39

resources – Mobile User Experience (UX) Design https: //www. interaction-design. org/literature/topics/mobile-ux-design barr Comp 306" 38

resources – Bad Designs barr Comp 306" 40

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