Concept Design Mattias Arvola 2 Today’s Lecture • • • • Ideation using structured design concept divergence Structured detailing of concepts ideas Storyboards at a conceptual level Pugh charts 3 Film Time • The Exciter • https://www.youtube.com/watch?v=ocycEGSkSo0 36 37 38 39 40 41 42 43 44 GROUP PROJECT 1 WORK 45 45 47 48 49 50 51 52 1 2 PROJECT 2 1 day/week Checkpoint Research Deadline Concept Checkpoint Revisions Deadline Detailing Deadline Idea Log (and Process Book) INDIVIDUAL DESIGN WORK 1 day/week READINGS Seminar 1 Seminar 2 Seminar 3 (Deadline Critical Review) 3 5 AFTER THE USER STUDY THE OVERARCHING DESIGN IS TO TAKE FORM AND WHAT TO DO IS TO BE DECIDED 6 User Research Deliverables • Research-based Personas and Problem Storyboards • Design and UX Goals 7 Concept Ideation Deliverables • • • • • A wide variety of concepts Pugh-charts A concept proposal Poster Other design material? CONCEPT DESIGN REVISIONS & DETAILED DESIGN USER RESEARCH fuzzy front end: uncertainty >> paZerns >> insights revisions t pr od uc pr ot ot yp e pt concept co nc e id ea s de sig n cr ite r ia clarity >> focus detailing 10 A process characterized by • • • • • Uncertainty Experiments of thought Sketching Judgement and assessment Decisions 11 Levels of Interaction Design (Arvola & Artman, 2007) • 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. 12 The Conceptual Level • Who does what, when, where, how and why? • Agent, act, scene, means och purpose (Arvola, 2005) • The Concept Sheet: • http://www.ida.liu.se/~matar/tools.en.shtml Design Concept No. WHAT the name of the concept is: WHO the user is: WHAT the concept is: WHEN and WHERE it will be used: WHAT it does (main function and content): WHY the user whants to have it and use it: HOW it is used (draw a storyboard): The user's experience before Interaction step 1 Interaction step 2 Interaction step 3 Interaction step 4 The user's experience afterwards HOW it should be: Consequences: Principles and qualities For people, environment, or society Project: Date: Researcher: Design Concept Sheet. Mattias Arvola 2014. Design Concept No. WHAT the name of the concept is: WHO the user is: WHAT the concept is: WHEN and WHERE it will be used: WHAT it does (main function and content): WHY the user whants to have it and use it: HOW it is used (draw a storyboard): The user's experience before Interaction step 1 Interaction step 2 HOW it is used (draw a storyboard): The user's experience before Interaction step 1 Interaction step 2 Interaction step 3 Interaction step 4 The user's experience afterwards Interaction step 3 Interaction step 4 HOW it should be: Consequences: Principles and qualities The user's experience afterwards For people, environment, or society Project: Date: Researcher: Design Concept Sheet. Mattias Arvola 2014. 17 What should it be? Perspec6ve Object Highlighted aspects Tool A material Prac6cal Medium Other people or content Communica6onal Partner The ar6fact in itself or quasi-‐other Prac6cal System Other system components Organisa6onal, Technical Machine The ar6fact in itself Technical 18 Dynamic Gestalt • Overarching character • More than the sum of the parts • Temporal flow and drama structure may be inspiring, dull, obvious or maybe repetitive 19 To what genre does it belong? Arvola, Lundberg & Holmlid (2010) • Recurring form, content and purpose • Phone bill: • Layout (form) showing • phone calls and their cost (content), • to inform the receiver how much to pay, when, and exactly for what he or she is paying (purpose). 20 What posture should it have? (Cooper, 1995) • Sovereign: monopolizes the user's attention for long periods of time. • Transient: Called when needed, it appears and performs its job, then it quickly leaves, letting the user continue her more normal activity. • Daemonic: background processes that require no direct user interaction. • Parasitic/Auxiliary: A limited, focused set of functionality and occupy a small space persistently and can be used for a long period of time. 21 Ideation by structured design concept divergence • Play with and vary who does what, when, where, how and why in a systematic manner. • Make experiments of though: • What kind of product or service would it become if… • Divergence is the mother of design work and iteration its father. 22 WORK SYSTEMATICALLY WITH RANDOMNESS! 23 • • At conceptual level, different: At an interactional level, different: • Purposes • Target groups • Input and output • Situations of use • • Kinds of products/services Interaction styles (forms, menus, direct manipulation) • Platforms • Perspectives: 1st, 3rd • User experiences • Interaction techniques (zooming, panning, pointclick) • Controls At functional level, different: • • • Objects and actions At strucutral level, different: • At presentational level, different: • Layouts • Navigation structures • Styles • Ways to group information • Associations • Icons Project time 21 Level of abstraction 25 Functions-‐driven divergence • Functions-driven divergence The purpose is that you should be able to: The purpose is that you shou able to Look at films Communicate with others Find your way Control what the kids are doing Play games Communicate with others Look at films Play games Find your way Control what the kids are doing Communicate with others Look at films Play games 24 Find your way Control what the kids are doing 28 Metaphor-‐driven divergence Metaphor-driven d • The character of action should be like a:The character of a like a: Tool Medium Dream Person Game Medium Tool Dream Game 26 Person Medium Tool Dream Game 27 Person 31 Quality-‐driven divergence • How should it be experienced in use? Quality-driven d How should it b use? Discoverably Full of feeling Imaginatively Surprisingly Suggestively Full of feeling Discoverably Imaginatively Suggestively 29 Surprisingly Full of feeling Discoverably Imaginatively Suggestively 30 Surprisingly 34 Functions-‐driven divergence based on Brainwriting 3-‐6-‐5 • 6 persons writes 3 functions and passes the paper on: 108 functions • What should the persona be able to do with the product or service? • Every function consists of a verb and a noun: ”pile up chairs” • Provocative situations of use if you get stuck. • Troup transport • On the way home from a football game • For the Prime Minister • At an accident Problem Statement: What should the user be able to do? Idea 1 Idea 2 Idea 3 1 take photos make call find friends 2 edit photos send message announce statements 3 send photos keep track of appointments … 4 5 6 36 Functional Analysis • Go through the functions and categorise them from the perspective of you personas: • Necessary (N) • Desirable (D) • Unnecessary (U) • Unnecessary but fun (UF) 37 • List all N, some of the most interesting D, and some UF. • Consider what it would be like if one of them was the main function (MF) that would dominate and structure the entire system. • Name the resulting product or service • Detail the concepts using the concept sheet 38 SKETCHES AND DESCRIPTIONS OF CONCEPTS 39 The Sidekick The visitors can see the guidés virtual sidekick through the mobile phone. In Vimmerby it could be a ”rumpnisse” who constantly asks Why is that? and gives the guide opportunities to explain things further. 40 The Time Machine You can at some places point the camera towards a view and manipulate a time filter towards the past. 41 Show and Tell 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. 55 43 Sketchy Concept Video 44 Concept Selection with Pugh Charts 45 Good Design in Different Ways Technical Build Quality Practical Functionality Communication Organization Aesthetic Impact Ethics 46 Criteria for Concept Selection • Concept selection is based on maximizing 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 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 + 0 1 4 3 1 2 5 3 Total - 0 1 1 0 3 2 1 3 Total 0 0 3 3 -2 0 4 0 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 + 0 1 4 3 1 2 5 3 Total - 0 1 1 0 3 2 1 3 Total 0 0 3 3 -2 0 4 0 51 49 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. 50 Context Scenarios • A scenario that shows how the idea is meaningful for one of the personas • Gives a natural sequential flow to the interaction • Written or illustrated in a Concept Storyboard 51 Concept Proposals in Storyboards • Show and Tell: • A function for guides to show things not visible to the naked eye. E.g. hidden processes, global systems, or what a plant look like at another season. When the guide wants the group to see something on their phone he/she takes up visual marker. The visitors point the camera of the phone towards the marker to acjvate whatever the guide wants to show. On the display of the phone the visitors can see both the camera view and the object or animajon the guide wants to show. To change the image or the animajon the guide just changes or adds a new marker. MINNESMARK MINNESMARK Maria,&Tom&and&Owen&start&the&Minnesmark&app& to&go&on&a&computer&augmented&treasure&hunt. Maria&chooses&which& treasure&hunt&and&they& are&off.&They&take&part& of&stories&at&places& along&the&way. Use&the&iOS&app&Minnesmark&and& invite&to&in&a&computer& augmented&treasure&hunt,&where& parLcipants&can&explore&both&the& physical&environment&and&media& that&you&have&prepared.&Use&the& editor&to&create&the&treasure&hunt. Minnesmark&is&an&AR< browser&(AR&=&augmented& reality)&that&builds&on&a&principle& of&physical&interacLon&in&the&real& world.&It&contributes&to&a& moLvaLng&acLvity.&The& parLcipants&find&treasures&in&the& form&of&media,&which&is&sent&to& them&via&email&at&the&end&of&the& treasure&hunt.&Using&the&editor,& anyone&can&set&up&their&own& treasure&hunts. Marker<based&augmented&reality&is&used&to& animate&the&story&so&that&virtual&objects&are& embedded&with&the&camera&view&in&the& background.& There&are,&at&some&places,&panoramas& that&show&the&place&as&it&once&was.&Tom& navigate&a&panorama&by&holding&his&iPad& infront&of&him&while&turning&around. MaJas&Arvola @maJasarvola [email protected] www.minnesmark.se They&find&treasures&in&the&form&of&various& media&along&the&way,&and&the&treasures& are&sent&to&Owen's&email&address&at&the& end&of&the&treasure&hunt.&It's&great&that& Owen's&teacher&could&use&the& Minnesmark&Editor&to&set&up&this&trail&for& them. NÄRSTÅENDE INGALILL GICK BORT FÖR MÅNGA ÅR SEDAN, MEN DIN SON - SIMON, KOMMER ATT HÄLSA PÅ REDAN I MORGON VAR ÄR INGALILL? SIMON KAN GENOM INVÅNARTJÄNSTERNA MEDDELA PERSONALEN T EX NÄR HAN PLANERAR ATT BESÖKA SIN PAPPA. I SAMMA GRÄNSSNITT KAN PERSONALEN OCKSÅ KONTAKTA SIMON OCH FÖRA ANTECKNINGAR KRING ALBERT. DE SER OCKSÅ DEN INFORMATION (SOM ÄVEN FINNS I JOURNALEN) SOM SOM ÄR VIKTIG FÖR ATT GE VÄRDIG VÅRD - SÅSOM INTRESSEN OCH MATVANOR MM. SIMONS PAPPA ALBERT HAR ALZHEIMERS SJUKDOM. BÅDE SIMON OCH ALBERT SJÄLV VILL ATT ALBERT SKA KUNNA BO KVAR HEMMA SÅ LÄNGE SOM DET FUNGERAR MED DE DAGLIGA RUTINERNA. ALBERT VET FORTFARANDE HUR MAN TVÄTTAR SIG, VÄRMER MAT OCH TAR MEDICINER MEN IBLAND GLÖMMER HAN BORT. DÄRFÖR HAR SIMON MED HJÄLP AV INVÅNARTJÄNSTERNA STÄLLT IN PÅMINNELSER FÖR DE AKTIVITETER HAN INTE FÅR GLÖMMA BORT. VID SIDAN OM ATT HJÄLPA SIN PAPPA KAN SIMON SJÄLV OCKSÅ FÅ STÖD OCH RÅDGIVNING FRÅN INVÅNARTJÄNSTERNA I SIN ROLL SOM ANHÖRIG. elit. Ut adipiscing a mollis ctetur ndisse amet, conse e. Suspe tristique, dolor sit lobortis congu san felis porttitor. ipsum , accum eros Lorem vitae quam vel e a nisi dictum uada tellus eu augue gravida odo lectus a rutrum. Pellentesqu cursus males quam. nibh. Proin dolor. In commfacilisis enim quat. interdum adipiscing as conse ulum luctus eget Morbi od. Vestib at erat egest Sed r euism m enim vel elit. tempo mentu a, quam tate non Proin commodo a t vulpu quat eget elit et a mollis Fusce condi um nibh. enim dolor. In conse a elit laoree re eros Suspendisse ue, interd adipiscing luctus facilisis quat. unt felis r. In erat erat, laoreet posue semper. tristiq eget conse felis ulum tincid as san aucto Nulla ulum tor. Morbi od. Vestib vestibulum lectus, erat egest dapibus dolor. Vestib vitae porttitempor euism m enim at s diam aliquet nec turpis Sed enim malesuada aliquet orci pulvinar. Mauri m nec vel elit. mollis eu augue condimentu mollis nt a, tate non . Fusce dolor id us a velit. Aliqua diam s. Praese t vulpu quat eget elit rutrum s. . Proin sodale tincidunt conse et sodale a elit laoree iaculis vitae, faucib odo massa Phasellus Donec ut vulputate unt felis r. In erat erat, t posuere eros Donec quis, comm ar quis urna.quis. Nulla tincid us aucto laoree s neque pulvin porttitor semper. , porttitor et, varius ulum dapib ulum t tempu it nunc alique fringilla, at in sollicitudin dolor. Vestib turpis vestib s diam lectus fringilla, eu suscip malesuadaaliquet orci nec pulvinar. Mauri m nec enim placerat ligula urna, erat, placer neque dolor, Morbi nt ulum dolor id mauris. Praese velit. Aliqua diam erat, vestib us a unt neque us Proin tincid faucib ulum faucib massa. iaculis llus vestib elementum tate vitae, commodo ut vulpu urna. Phase quis, Vestibulum s neque pulvinar quis tempu quis. et, tudin varius ligula urna, tie in sollici suscipit nunc Morbi moles mauris. . Morbi dolor, eu at. faucibus vitae augue e placer elementumid, porttitor pellentesqu vitae porttitor Vestibulumullamcorper m odio, vehicula s. Etiam s pretiu sa non sodale facilisis ultrice nt tempu um, us diam et massa lacus. Praese Nulla dapib Maecenas interd et lobortis convallis ut. nibh. ue tellus, Ut sed ligula at metus metus tristiq malesuada Quisque placer r, libero san. uada aucto accum quis males sapien iscing ur adip consectet congue. amet, lobortis dolor sit ipsum quam vel eros , accum Lorem tellus a nisi dictum gravida tesque malesuada lectus elit. Ut . Pellen cursus quam Proin commodo a a mollis um nibh. enim dolor. In Suspendisse ue, interd adipiscing luctus facilisis tristiq eget ulum san felis tor. Morbi od. Vestib vitae porttitempor euism eu augue 3 4 5 6 8 9 10 11 12 13 15 16 17 18 19 20 25 26 27 1 7 14 21 iscing ur adip consectet congue. amet, lobortis dolor sit ipsum quam vel eros , accum Lorem tellus a nisi dictum gravida tesque malesuada lectus elit. Ut . Pellen cursus 2 30 22 23 24 IDAG SÅG VI EN OVANLIG FÅGEL NERE VID VATTNET. elit. Ut adipiscing a mollis ctetur ndisse amet, conse e. Suspe tristique, dolor sit lobortis congu san felis porttitor. ipsum , accum eros Lorem vitae quam vel e a nisi dictum uada tellus eu augue gravida odo lectus a rutrum. Pellentesqu cursus males quam. nibh. Proin dolor. In commfacilisis enim interdum adipiscing ulum luctus eget Morbi od. Vestib r euism tempo GENOM INVÅNARTJÄNSTERNA HAR ALBERT GETT SITT MEDGIVANDE TILL ATT SONEN FÅR SE HANS VÅRDPLAN OCH ÄVEN VARA DELAKTIG I BESLUT. NÄR ALBERTS SJUKDOM FORTSKRIDER BLIR DET TILL SLUT DAGS ATT FLYTTA TILL ETT VÅRDHEM. DÅ KAN SIMON NOGA JÄMFÖRA OLIKA ALTERNATIV OCH VÄLJER ETT SOM PASSAR. SIMON ANVÄNDER INVÅNARTJÄNSTERNA TILL ALLA PRAKTISKA FÖRBEREDELSER KRING FLYTTEN. SIMON KÄNNER SIG TRYGG MED ATT PAPPAN FÅR BRA VÅRD, OCH KAN SE PLANERADE OCH GENOMFÖRDA AKTIVITETER. ...OCH NÄR SIMON TRÄFFAR SIN PAPPA PÅ VÅRDHEMMET KAN DE UMGÅS OCH PRATA OM DAGEN. PERSONEN SOM SVARAR KAN SE ATT OLLE SÖKT PÅ BETT, OCH DÅ HAN ÄVEN KAN SE VAR OLLE BEFINNER SIG SÅ GÅR DET LÄTT ATT HITTA NÄRMAST TILLGÄNGLIGA VÅRD AV RÄTT NIVÅ. DET ÄR VIKTIGT ATT DU FÅR ANTIBIOTIKA OM BETTET ÄR INFEKTERAT. JAG TYCKER VI BOKAR IN DIG PÅ NÄRMSTA VÅRDCENTRAL, REDAN IDAG. PLÖTSLIGT BEHOV AV VÅRD JAG SKICKAR BOKNINGEN TILLSAMMANS MED EN VÄGBESKRIVNING TILL VÅRDCENTRALEN PÅ STORGATAN 10 -TILL DIN TELEFON DU HAR EN TID PÅ VÄXJÖ VÅRDCENTRAL IDAG KL 14.15 Växsjö Närakut ÄNDRA TID VÄGBESKRIVNING ! ! ! J A A HAN SÖKER UPP INFORMATION - OCH RINGER DIREKT FRÅN EN ARTIKEL. OLLE HAR REST TILL VÄXJÖ. DÄR BLIR BITEN I HANDEN AV EN KATT. VÅRDCENTRALEN BLIR OCKSÅ INFORMERADE ATT OLLE KOMMER IN OCH FÅR DE UPPGIFTER HAN LÄMNAT TILLSAMMANS MED PERSONNUMMER. BETTET ÄR GANSKA DJUPT OCH BLIR SNART SVULLET OCH ÖMT. OLLE ÄR LITE EXTRA OROLIG DÅ HAN ÄR I EN FÖR HONOM NY STAD DÄR HAN INTE HITTAR. HEJ, SKA JAG RINGA AMBULANS? ÄR DET BRÅTTOM? Ditt recept på antibiotika finns nu inlagt och du kan hämta ut medicinen på närmaste apotek. Klicka nedan för att se närmaste apotek med varan i lager. INSTRUKTIONER NÄRMASTE APOTEK KORT EFTER SIN BEHANDLING FÅR OLLE ETT MEDDELANDE FRÅN SIN LÄKARE VIA 1177 VÅRDGUIDEN MED RECEPT PÅ ANTIBIOTIKA. INFORMATIONEN/ORDINATIONEN ÄR ANPASSAD FÖR OLLE. DET FINNS INSTRUKTIONER FÖR ANVÄNDNING OCH ÄVEN EN KNAPP FÖR ATT SÖKA RÄTT PÅ NÄRMASTE APOTEK MED PRODUKTEN I LAGER. KRONISK SJUKDOM 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 DET HÄR ÄR HABIB. EFTERSOM HON HAR DIABETES STÅR HON I REGELBUNDEN KONTAKT MED VÅRDEN. VÅRDCENTRAL SOM INLOGGAD KAN HON BESTÄLLA UTRUSTNING OCH HJÄLPMEDEL... ...TILL EXEMPEL FÖR PROVTAGNING DIREKT IN I DIABETESAPPEN. EN SAMLAD BILD LEDER TILL ETT BRA MÖTE PÅ VÅRDCENTRALEN 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. HON FÅR VISUELLA MÄTVÄRDEN ÖVER TID 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. OCH MOTIVATION TILL FYSISK AKTIVITET 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 ... SLUTA RÖKA FÖRSTA DAGARNA GÅR BRA NADINE FÅR OCKSÅ UPPMUNTRANDE MEDDELANDEN OM ATT HON GÖR RÄTT SOM INTE RÖKER. en id Vårdgu NADINE VILL BLI GRAVID OCH HAR BÖRJAT FUNDERA PÅ ATT SLUTA RÖKA, MEN INTE TAGIT FÖRSTA STEGET ÄN. 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 HON TRÄFFAR EN VÄN PÅ ETT CAFÉ OCH BERÄTTAR OM SIN VILJA ATT BLI GRAVID. VAD ROLIGT ATT NI VILL HA BARN! MEN DÅ MÅSTE DU JU SLUTA RÖKA MED DETSAMMA. HÄR, TESTA DET HÄR, DET ÄR ETT HJÄLPMEDEL FÖR ATT SLUTA SOM JAG BLEV TIPSAD OM PÅ MVC. ÅH, DET SER SJYSST UT, JAG STARTAR NU, ALDRIG MER RÖKA.. IP BL IP BL ETT VERKTYG SOM FUNGERAR BRA FÖR NADINE ÄR ATT ANVÄNDA FORUM. HÄR FÅR HON KONTAKT MED ANDRA OCH KAN ABST INENS DELA TIPS. FORU M Lorem ip sum do lor sit am adipisc ing elit. et, cons Pe risus te mpor vo llentesque at ectetur mauris lutpat. volutpat ve Mauris a lacini lorem en l a Ut lacini molestie im, a bibend massa ut urna , fringilla ac od um sapi dictum io. en vulp , sed nibh ut utat ni Fusce ul si interdum or e. Integer quis nare ve tricies m l ve Proin po agna ve l cursus l lectus. rt tristique Nam al a lorem sed co iquam m . m etus rhon modo faucib us. cus mas sa Lorem ip sum do lor sit am adipisc ing elit. Pellentes et, consectetu r que at m auris ve l Pellentes que at m volutpat auris ve !!!!! l ris us tempo r 59 Final words • The conceptual design phase ends in a decision on what to do and overarching design. • The Revisions of Ideas phase starts with turning objectives and concepts into: • Requirements • Sketched sitemaps • Sketched wireframes • Paper prototyping • Formative UX testing mattias.arvola@liu @mattiasarvola www.liu.se
© Copyright 2024