design john barr Comp 306 Mobile Development 1" barr - - PowerPoint PPT Presentation

▶
design
SMART_READER_LITE
LIVE PREVIEW

design john barr Comp 306 Mobile Development 1" barr - - PowerPoint PPT Presentation

Mar 10, 2024 519 likes •1.01k views

design john barr Comp 306 Mobile Development 1" barr ")" Comp 306 " design define design ? a plan for the construction of an object form meets function many solutions what are concepts are involved in good

slide-1
SLIDE 1

design

john barr

Comp 306 Mobile Development

1" barr")"Comp 306"

slide-2
SLIDE 2

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"

slide-3
SLIDE 3

barr Comp 306" 3"

slide-4
SLIDE 4

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"

slide-5
SLIDE 5

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"

slide-6
SLIDE 6

barr Comp 306" 6"

slide-7
SLIDE 7

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, HTML5, iPod

– build site around tool – learn new skills

barr Comp 306" 7"

slide-8
SLIDE 8

barr Comp 306" 8"

slide-9
SLIDE 9

XXX-Centered Design

Organization-Centered Technology-Centered Design-Centered

– Cool, Colorful, Hip – Overwhelming – Hard to Use

barr Comp 306" 9"

slide-10
SLIDE 10

barrbarr Comp 306" 10"

slide-11
SLIDE 11

XXX-Centered Design

Organization-Centered Technology-Centered Design-Centered problem: forces user to learn/adapt to product

barr Comp 306" 11"

slide-12
SLIDE 12

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"

slide-13
SLIDE 13

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"

slide-14
SLIDE 14

Human-Centered Design

Ethnographic studies – observe, interview, survey

  • 1. Comparative Analysis
  • 2. Use Cases
  • 3. Participatory Design Session
  • 4. Prototype Testing
  • 5. Usability Testing
  • 6. Design for Errors

barr Comp 306" 14"

slide-15
SLIDE 15

In practice

  • 1. Idea Generation
  • 2. Initial Research
  • 3. The Design Cycle
  • 4. Development
  • 5. Testing
  • 6. Launch
  • 7. Maintenance

barr Comp 306" 15"

slide-16
SLIDE 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" 16"

slide-17
SLIDE 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" 17"

slide-18
SLIDE 18

Initial Research

Comparative Analysis

– Closely examine similar apps – Create a feature matrix – List strengths & weaknesses – Identify defining features

barr Comp 306" 18"

slide-19
SLIDE 19

barr Comp 306" 19"

slide-20
SLIDE 20

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"

slide-21
SLIDE 21

ha an ar h oon arn

  • o h no
slide-22
SLIDE 22

a b brora or n n ar h baan o a a ho ha on a a hr onn ro ra n h a hr an ho ha on h ra bon on h ho a

  • rah harar oaon ah

harar on nr an hor

slide-23
SLIDE 23

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

  • ne 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.

slide-24
SLIDE 24

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?

slide-25
SLIDE 25

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.

slide-26
SLIDE 26

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"

slide-27
SLIDE 27

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"

slide-28
SLIDE 28

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"

slide-29
SLIDE 29

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"

slide-30
SLIDE 30

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"

slide-31
SLIDE 31

In practice

  • 1. Idea Generation
  • 2. Initial Research
  • 3. The Design Cycle

1. Additional Research 2. Rapid Prototyping

Wireframes, UI Mockups, Prototypes

3. Test the crap out of it 4. Repeat until (some) users rave about it

  • 4. Development

barr Comp 306" 26"

Repeat initial research steps as necessary (feedback loop)

slide-32
SLIDE 32

The Design Cycle

Wireframes – paper prototype

barr Comp 306" 27"

slide-33
SLIDE 33

The Design Cycle

Wireframes – layout & flow

barr Comp 306" 28"

Demo%

slide-34
SLIDE 34

The Design Cycle

User Interface Mockup – look & feel

barr Comp 306" 29"

Demo%

slide-35
SLIDE 35

Prototype

barr Comp 306" 30"

Demo%

slide-36
SLIDE 36

Prototyping Tools

barr Comp 306" 31"

slide-37
SLIDE 37

Prototyping Tools

barr Comp 306" 32"

slide-38
SLIDE 38

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"

slide-39
SLIDE 39

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"

slide-40
SLIDE 40

The Product

  • 1. Idea Generation
  • 2. Initial Research
  • 3. The Design Cycle
  • 4. Development
  • 5. Testing
  • 6. Launch
  • 7. Maintenance

barr Comp 306" 35"

slide-41
SLIDE 41

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"

slide-42
SLIDE 42

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"

slide-43
SLIDE 43

resources – boxes and arrows

barr Comp 306" 38"

slide-44
SLIDE 44

resources – Adobe blog

barr Comp 306" 39"

https://theblog.adobe.com/10- dos-donts-mobile-ux-design/

slide-45
SLIDE 45

resources – Mobile User Experience (UX) Design

barr Comp 306" 38"

https://www.interaction-design.org/literature/topics/mobile-ux-design

slide-46
SLIDE 46

resources – Bad Designs

barr Comp 306" 40"

slide-47
SLIDE 47

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"