design john barr cs205 advanced web programming barr")"cs205"

Size: px

Start display at page:

Download "design john barr cs205 advanced web programming barr")"cs205""

Aron Patrick
5 years ago
Views:

1 design john barr cs205 advanced web programming barr")"cs205" 1"

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 - CS205 2"

3 Design of Everyday Things on Amazon Give an example of something that is well designed (NOT electronic) barr - CS205 3"

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 - CS205 4"

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

6 barr - CS205 6"

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

8 barr - CS205 8"

9 XXX-Centered Design Organization-Centered Technology-Centered Design-Centered Cool, Colorful, Hip Overwhelming Hard to Use barr - CS205 9"

10 barr - CS205 10"

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

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 - CS205 12"

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 - CS205 13"

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 - CS205 14"

15 In practice 1. Idea Generation 2. Initial Research 3. The Design Cycle 4. Development 5. Testing 6. Launch 7. Maintenance barr - CS205 15"

16 Idea Generation Starts with 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 - CS205 16"

17 In practice 1. Idea Generation 2. Initial Research Explore existing sites Comparative Analysis Identify your audience Develop personas, use cases, & storyboards 3. The Design Cycle 4. Development barr - CS205 17"

18 Initial Research Comparative Analysis Closely examine similar sites Create a feature matrix List strengths & weaknesses Identify defining features barr - CS205 18"

19 barr - CS205 19"

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 - CS205 20"

21 What audience are the following sites addressing? Look them up now

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

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

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?

25 Exercise Talk with the people on either side of you and describe the audience for a web site for Mac s store. Write your description on a whiteboard.

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

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

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

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 - CS205 22"

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 - CS205 23"

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 - CS205 24"

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 - CS205 25"

31 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 4. Development barr - CS205 26"

32 The Design Cycle Wireframes paper prototype barr - CS205 27"

33 The Design Cycle Wireframes layout & flow Demo% barr - CS205 28"

34 The Design Cycle User Interface Mockup look & feel Demo% barr - CS205 29"

35 Prototype Demo% barr - CS205 30"

36 Prototyping Tools barr - CS205 31"

37 Prototyping Tools barr - CS205 32"

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 - CS205 33"

39 Design Cycle Summary Wireframes boxes & text UI Mockup colors, images, layout Prototype HTML & CSS, limited functionality Testing at after stage Don t move on until it is perfect Use tools to help you rapidly prototype barr - CS205 34"

40 The Product 1. Idea Generation 2. Initial Research 3. The Design Cycle 4. Development 5. Testing 6. Launch 7. Maintenance barr - CS205 35"

41 8 Random Tips Design webpages that load 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 - CS205 36"

42 8 Random Tips Don't overuse flashing/animated graphics. No pop-up windows AJAX coming soon Provide users with a way to contact you Preview website on many different platforms OSs, Browsers, Form Factors barr - CS205 37"

43 resources boxes and arrows barr - CS205 38"

44 resources a list apart barr - CS205 39"

45 resources Bad Designs barr - CS205 40"

46 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 - CS205 41"

Lesson Guides PRE-INTERMEDIATE

Lesson Guides PRE-INTERMEDIATE British Council 2018 The British Council is the United Kingdom s international organisation for cultural relations and educational opportunities. PRE-INTERMEDIATE LESSON