ConceptualDesignMattiasArvola

WeekAssignment

35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 1 2

1.Userresearch group

1.Userresearch individual

2.Conceptideationandsketchinggroup

2.Conceptideationandsketchingindividual

3.Userinterfacesandprototyping group

3.Userinterfacesandprototyping individual

4.Computerprototypeandusabilitytestgroup

4.Computerprototypeandusabilitytestindividual

TheTaskforConceptIdeationandSketching

3

1.Ideate a wide variety of design concepts with an absolute minimum of one concept per group member. 2.Evaluate concepts using Pugh-charts. 3.Develop a concept proposal 4.Decide the most important requirements 5.Make first, initial, and preliminary user interface

sketches 6.Prepare presentation

TheExciter

4

• https://www.youtube.com/watch?v=ocycEGSkSo0

Adesignconceptis

5

• An of expression of a goal • A solution to a problem that has not yet been solved,

or today is solved in a unsatisfactory way • Useful if it serves attaining of the goal, and useless if

not • A basis and identity for the work • A story

• It can have many origins

Adesignconcept(Keinonen,2006;Henderson,2011;Ylirisku,2013;Arvola2014;Arvola&Walfridsson,2015)

6

• Is a description of a product/service that is: • Anticipatory/

actionable • Well-founded • Focused • Communicable

• It consists of: • Name • Purpose • Users • Situation of use • Design principles • Consequences

ConceptDesign

RevisionsandDetailedDesign

UserResearch

concept revisions detailing

designcriteria

ideas

concept

prototype

product

fuzzyfrontend: uncertainty>>paWerns>>insights clarity>>focus

Design Concept Sheet. Mattias Arvola 2014.

Design Concept No.

Project:

Date:

Researcher:

WHO the user is:

WHEN and WHERE it will be used:

WHAT the name of the concept is:

WHAT the concept is:

WHAT it does (main function and content):

HOW it should be:Principles and qualities

WHY the user whants to have it and use it:

HOW it is used (draw a storyboard):The user's experience before

The user's experience afterwards

Interaction step 1 Interaction step 2

Interaction step 3 Interaction step 4

Consequences:For people, environment, or society

http

://w

ww

.ida.

liu.s

e/~m

atar

/too

ls.e

n.sh

tml

Design Concept Sheet. Mattias Arvola 2014.

Design Concept No.

Project:

Date:

Researcher:

WHO the user is:

WHEN and WHERE it will be used:

WHAT the name of the concept is:

WHAT the concept is:

WHAT it does (main function and content):

HOW it should be:Principles and qualities

WHY the user whants to have it and use it:

HOW it is used (draw a storyboard):The user's experience before

The user's experience afterwards

Interaction step 1 Interaction step 2

Interaction step 3 Interaction step 4

Consequences:For people, environment, or society

Design Concept Sheet. Mattias Arvola 2014.

Design Concept No.

Project:

Date:

Researcher:

WHO the user is:

WHEN and WHERE it will be used:

WHAT the name of the concept is:

WHAT the concept is:

WHAT it does (main function and content):

HOW it should be:Principles and qualities

WHY the user whants to have it and use it:

HOW it is used (draw a storyboard):The user's experience before

The user's experience afterwards

Interaction step 1 Interaction step 2

Interaction step 3 Interaction step 4

Consequences:For people, environment, or society

Design Concept Sheet. Mattias Arvola 2014.

Design Concept No.

Project:

Date:

Researcher:

WHO the user is:

WHEN and WHERE it will be used:

WHAT the name of the concept is:

WHAT the concept is:

WHAT it does (main function and content):

HOW it should be:Principles and qualities

WHY the user whants to have it and use it:

HOW it is used (draw a storyboard):The user's experience before

The user's experience afterwards

Interaction step 1 Interaction step 2

Interaction step 3 Interaction step 4

Consequences:For people, environment, or society

ConceptIdeation

13

• Play with and vary who does what, when, where, how and why in a systematic manner.

• What kind of product or service would it become if…

LevelsofInteractionDesign(Arvola&Artman,2007)

14

• Design Concept • Who does what, when,

where, how and why? Overarching gestalt, posture or genre

• Functions and content • Actions and objects

• Structure • Temporal, spatial and

logical

• Interaction • How does the user navigate

the structure to use the functions and manipulate content?

• Presentation • Look & feel. What meets

the senses and how is it interpreted.

Divergencecanbedrivenondifferentelements

15

• Functions • Metaphor • Quality

16

ConceptSketches

ShowandTell

17

The guide can broadcast film to the visitors mobile phones. Pre-recorded or live. Even the people in the back can see, and details not visible to the naked eye can be pointed out.

18

SketchyConceptVideo

19

ConceptSelectionwithPughCharts CriteriaforConceptSelection

20

• Maximising the contribution to effect goals • Main product goals • Critical project goals

Criteria for Concept Selection

Concept selection is based on maximising the contribution to the most important effect goals for the users and other central stakeholders

Important product and project goals can also be included

Look back at the results from the user research

49 50

The Time

Machine

The Walking

Quiz

Show and Tell

The Interactive

Map

The Sidekick

Mythical Creatures

Spatial Talking Book

Leaving Traces

Curiosity 0 0 - + + + - -

Focus on the Landscape

0 0 0 0 0 0 0 -

Communicate Astrid Lindgren

0 - 0 0 0 - + -

Support Outdoors Education

0 0 + 0 0 - + +

Cost 0 0 0 0 - 0 + +

Feasibility 0 0 + 0 - 0 + +

Viability 0 0 + + 0 + + 0

Longterm Experience

0 + + + - 0 0 0

Total +

Total -

Total

0

0

0

1

1

0

4

1

3

3

0

3

1

3

-2

2

2

0

5

1

4

3

3

0

51

The Time

Machine

The Walking

Quiz

Show and Tell

The Interactive

Map

The Sidekick

Mythical Creatures

Spatial Talking Book

Leaving Traces

Curiosity 0 0 - + + + - -

Focus on the Landscape

0 0 0 0 0 0 0 -

Communicate Astrid Lindgren

0 - 0 0 0 - + -

Support Outdoors Education

0 0 + 0 0 - + +

Cost 0 0 0 0 - 0 + +

Feasibility 0 0 + 0 - 0 + +

Viability 0 0 + + 0 + + 0

Longterm Experience

0 + + + - 0 0 0

Total +

Total -

Total

0

0

0

1

1

0

4

1

3

3

0

3

1

3

-2

2

2

0

5

1

4

3

3

0

Concept selections using Pugh charts

1. Consensus about criteria

2. Consensus about alternatives

3. Assessment of alternatives

4. Adding it up

5. Revisit negative assessments

6. Design decisions and syntheses.

52

ConceptSelectionUsingPughCharts

22

1. Consensus about criteria 2. Consensus about alternatives 3. Assessment of alternatives 4. Adding it up 5. Revisit negative assessments 6. Design decisions and syntheses.

ConceptProposalsinStoryboards

23

SHOW&TELL

Whentheguidewantsthegrouptoseesomethingontheirphonehe/shetakesupvisualmarker.

Thevisitorspointthecameraofthephonetowardsthemarkertoac^vatewhatevertheguidewantstoshow.

Onthedisplayofthephonethevisitorscanseeboththecameraviewandtheobjectoranima^ontheguidewantstoshow.

Tochangetheimageortheanima^ontheguidejustchangesoraddsanewmarker.

Inför ditt besök 21/10

Du behöver lämna ett blodprov BOKA NU

Överför din insamlade data ÖVERFÖR

Att tänka på inför besöket:Du kommer ombes lämna urinprov...

DET HÄR ÄR HABIB. EFTERSOM HON HAR DIABETES STÅR HON I REGELBUNDEN KONTAKT MED VÅR-DEN.

...TILL EXEMPEL FÖR PROVTAGNING DIREKT IN I DIABETESAPPEN.

HON FÅR VISUELLA MÄTVÄRDEN ÖVER TID OCH MOTIVATION TILL FYSISK AKTIVITET

SAMORDNING, VALFRIHET OCH KONTROLL ÖVER SINA UPPGIFTER ÄR EXEMPEL PÅ SÅ-DANT SOM INVÅNARTJÄNSTERNA HJÄLPER TILL MED OCH SOM ÄR VIKTIGT FÖR ATT SJUKDOMEN INTE SKA TA FÖR STOR PLATS I HABIBS VARDAG.

EN SAMLAD BILD LEDER TILL ETT BRA MÖTE PÅ VÅRDCENTRALEN

VÅRDCENTRAL

DET HÄR SER BRA UT,OCH DET SYNS PÅ DINA VÄRDEN ATT DU HAR BÄTTRE HÄLSA NU

MOT NÄR VI SÅG SIST.

KRONISK SJUKDOM

SOM INLOGGAD KAN HON BESTÄLLA UTRUSTNING OCH HJÄLPMEDEL...

JAG HAR INTE HUNNIT SKICKA IN

VÄRDENA FRÅN MOBILEN. SKÖNT ATT ALLT FINNS PÅ MITT KONTO SÅ KAN

VI KOLLA DÄR

ABSTINENS FORUMLorem ipsum dolor sit amet, consectetur

adipiscing elit. Pellentesque at mauris vel

risus tempor volutpat. Mauris lorem enim,

volutpat a lacinia molestie, fringilla ac odio.

Ut lacinia massa ut urna dictum, sed bibendum sapien vulputate. Integer quis

nibh ut nisi interdum ornare vel vel lectus.

Fusce ultricies magna vel cursus tristique.

Proin porta lorem sed commodo faucibus.

Nam aliquam metus rhoncus massa

Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Pellentesque at mauris vel

Pellentesque at mauris vel risus tempor

volutpat!!!!!

SLUTA RÖKA

MEN VISSA STUNDER ÄR DET SVÅRT OCH NÄR HON ÄR NÄRA ATT FÅ ÅTERFALL SÖKER HON STÖD OCH MOTIVATION GENOM TJÄNSTEN

ETT VERKTYG SOM FUNGERAR BRA FÖR NADINE ÄR ATT ANVÄNDA FORUM. HÄR FÅR HON KONTAKT MED ANDRA OCH KAN DELA TIPS.

NADINE FÅR OCKSÅ UPPMUNTRANDE MEDDELANDEN OM ATT HON GÖR RÄTT SOM INTE RÖKER.

NADINE VILL BLI GRAVID OCH HAR BÖRJAT FUNDERA PÅ ATT SLUTA RÖKA, MEN INTE TAGIT FÖRSTA STEGET ÄN.

FÖRSTA DAGARNA GÅR BRA

HÄR, TESTA DET HÄR, DET ÄR ETT HJÄLPMEDEL FÖR ATT SLUTA SOM JAG BLEV

TIPSAD OM PÅ MVC.

VAD ROLIGT ATT NI VILL HA BARN! MEN DÅ MÅSTE DU JU SLUTA RÖKA MED

DETSAMMA.

ÅH, DET SER SJYSST UT,JAG STARTAR NU, ALDRIG

MER RÖKA..

HON TRÄFFAR EN VÄN PÅ ETT CAFÉ OCH BERÄTTAR OM SIN VIL-JA ATT BLI GRAVID.

BLIP

BLIP

Vårdguiden

Requirements

28

UserStorieshttps://www.mountaingoatsoftware.com/agile/user-stories

29

As a <type of user>, I want <some goal> so that <some reason>.

As a power user, I can specify files or folders to backup based on file size, date created and date modified. As a user, I can indicate folders not to backup so that my backup drive isn't filled up with things I don't need saved.

InitialUIScribblesketches

30

https://goo.gl/images/eM0WqN https://goo.gl/images/mavHo9

MoredetailedrequirementsandUIdesign

33 DifferentKindsofRequirements 34

• Data • Objects (nouns) +

attributes from a persona’s mental model

• Things that someone search for, manipulate, read…

• Functions • The verbs that

describe what users should be able to do

with the product (or the data)

• Product Qualities • Performance, response

time, security • Constraints

• External factors, i.e. deadline, cost, law…

• UX goals/attributes • What users should

experience (adjectives/adverbs)

35

SOURCE DATA FUNCTION QUALITY CONSTRAINT

PERSONA

Scenario Numberofphotosleft

Beabletoremovephotos

Mentalmodel Understandtheeffectofsettings

Goals Professionallook&feel

Context Visiblescreeninsunlight

Skills Handlesharpcontrastautomatically

Fitthehandofaveragefemale

STAKEHOLDER Price4–5000kr

COMPETITION >6megapixel

ContextScenarios1(2) (Goodwin,2009)

36

Laura takes a call from Mr. Cowell, who needs to make an appointment for his cat to have a tumor removed. Laura looks him up and sees that he has two cats. Xena is flagged for follow-up, so she confirms with Mr. Cowell that the procedure is for Xena. She selects that pet’s name and chooses the procedure type. The system shows the next several non-urgent appointments for Dr. Harvey, Xena’s usual vet, when the surgery and hospital space required for the procedure are also available.

ContextScenarios(2/2)(Goodwin,2009) 37

She suggests the first couple of dates to Mr. Cowell, who says he was hoping to take care of it sooner. Dr. Bailey also has an opening sooner, but Mr. Cowell prefers Dr. Harvey. She can also see that Dr. Harvey has two slots that are close to the required parameters but don’t quite fit them. She looks at the calendar to see what’s on either side. One is just Dr. Harvey’s administrative time. She moves that to later in the day and offers the new alternative to Mr. Cowell, who accepts. Laura tells him he’ll get a confirmation in the mail. The postcard immediately gets sent to the printer on Laura’s desk. Laura hangs up the phone and greets the client at the desk, who’s ready to check out.

38

Personas Scenarios

Systemadministrator InstallthesystemAddanaccountChangesettingsRemoveanaccountUpgradethesystem

Enduser FirstuseofthedayUsageduringthedayUsagefromhome

Mobileuser MobileuseUsefromabroad

39

FromScenariostoRequirementsContextScenario(snippet)

FunctionalNeeds(beableto…verbs)

DataNeeds(objects…nouns)

LauratakesacallfromMr.Cowell,whoneedstomakeanappointmentforhiscattohaveatumorremoved.Lauralookshimupandseesthathehastwocats.

Lookupcallersamongexistingclients

- Call- Client- Appointment

Seeoverviewinformationabouteachclientandpet

- Diagnosis- Procedure- Pet

https://www.lucidchart.com/pages/use-case-scenario-example-and-template-UML

CreateaKeyPathScenariowithFunctionalElements(Goodwin,2009)

41

Laura takes a call from Mr. Cowell, who needs to make an appointment for his cat to have a tumor removed. Laura finds him in the client list and opens his record to see detail in the client overview display area, which shows that Mr. Cowell has two cats, one of whom is flagged for follow up. She looks at the pet overview display area, sees that Xena needs surgery, and confirms with Mr. Cowell that the procedure is for Xena. She clicks to create a new appointment and chooses the procedure type in the appointment parameters area.

42

Laura takes a call from Mr. Cowell, who needs to make an appointment for his cat to have a tumor removed. Laura finds him in the client list and opens his record to see detail in the client overview display area, which shows that Mr. Cowell has two cats, one of whom is flagged for follow up.

(Goodwin,2009)

TheTaskforConceptIdeationandSketching

43

1.Ideate and sketch out a wide variety of design concepts with an absolute minimum of one concept per group member 2.Evaluate concepts using a Pugh-chart 3.Develop a concept proposal in a storyboard 4.Decide the most important requirements for the

concept 5.Make first, initial, and preliminary user interface

sketches for the chosen concept 6.Prepare the presentation.

Finalwords:Gettingun-stuck

44

• Get physical to express your thoughts • Return to your research • Brainstorm and play with experiments of thought • Doodle all thoughts you have on paper • Select a few ideas to work a little more focused on • Use your Pugh-chart, but settle on an idea you

personally also feel attracted to

www.liu.se

mattias.arvola@liu@mattiasarvola