HELLO‣ Dries‣ Concrete‣ PhD,    Artesis & TUDelft‣ Design    Research‣ dries@concrete.be‣ @driesderoeck
USER EXPERIENCE DESIGN         ster             eoty                 pe                         ‣ Academic   interpretatio...
‣ ASUS   Ultrabook UX21‣ Apple   Macbook Air
INDUSTRIAL DESIGN‣ Itis ‘Design’                   pe‣ Expensive, exclusive         oty                         st ere‣ Vi...
Designer slash model (desigerslashmodel.com)
COMMON MISCONCEPTION‣ Design     is more than meets the eye •   in most cases                                          Tha...
“there is no such thing asa UX design profession”                             Peter Merholz, Adaptive path
ON TERMINOLOGY‣ Terminology   discussions are useless‣ User  experience design‣ Interaction design‣ User centered design‣ ...
USERSFIRST
HUMAN CENTERED DESIGN‣ Generic  approach • Software • Hardware • Service • Digital / Non-Digital‣A   way of thinking, deep...
HUMANCONTEXTINTERACTION
Stephen P Anderson - www.poetpainter.com         .
BERG - berglondon.com
CASES‣ Total   design processes‣ Mixing  • Product design  • Interior design  • Service design
ASSURAX SHOP-CONCEPT‣ Eigen  project  • Uitvoering analyse  • Implementatie concept‣ Online verzekeringsmakelaar  • Explor...
ASSURAX PERSONAS‣ Analyse     : opstellen personasLuciano / 28 jaar            Daisy / 32 jaar          Albert / 76 jaar  ...
ASSURAXPERSONAS                     eerste contact       producten                                                  vergel...
ASSURAX ONTWERPPROCES‣ Ontwikkeling  retailconcept  • Integratie online service &    fysieke kantoren  • Multi-toepasbaar‣...
aan de balie krijgt u persoonlijke aandacht
individuele werkplekvoor de medewerker
samen met de klant aan 1 zijde van de tafel
Net4c‣ Eigen project  • Analyse  • Prototyping  • Opvolging software    development‣ Sociaalnetwerk voor senioren  • Lange...
METHODES‣ Persona   creatie‣ Scenario’s‣ Interaction flows‣ Prototyping   • Paper   • Functional
Text‣ Persona      interactie‣ App   flow
PAPER PROTOTYPING‣ First   interface & interaction ideas
FUNCTIONAL PROTOTYPING‣ Collaboration   with developers‣ Keynote prototyping • Animation (Smart move) • Webcam integration...
FUNCTIONAL PROTOTYPING‣ Dopeople understand the system? • Not just the interface
Straatstarters‣ Samenwerking  ‣ Concrete    & Pantopicon‣ Sociale   cohesie  • Stad  • Straatniveau‣ Ontwerpmatige       i...
PROCES‣ Overzicht   processtappen
CULTURAL PROBES‣ Opdrachten-set‣ Verzamelen           rijke informatie • Gekoppeld aan interview
CULTURAL PROBES
CONCEPTGENERATIE‣ Interne brainstrom‣ Input van probes & interviews
CONCEPT GENERATIE‣ Draft     ideeën visueel communiceren
CONCEPT GENERATIE‣ Opbasis van brainstorm ideeën • Focus op complete concepten‣ Worden gebruikt als ‘spraakmaker’ in co-cr...
TJIIIIES!‣ Voorbeeldstoryboard
PARTICIPATORYDESIGN‣ Werksessie‣ Buurtbewoners   + stad Antwerpen
FINAAL SCENARIO‣ Delen   van een
Mealbutler Demetra‣ Opwarmtoestel voor thuisgeleverde maaltijden‣ Interview& observatie  • Huidige situatie  • Relevante s...
EENVOUD‣ Gebruik  •  Enkel relevantie functies   • Knop   • Verborgen display‣ Technisch   • Standaard   • Kostreductie
EANDIS SLIMME METER‣ Context •   Kelder‣ Eindegebruiker is niet de primaire  gebruiker   • “gebruiksfase” is op moment    ...
VORMGEVING‣ Basisvormgeving‣ Focus   op installatie
HUIDIG MODEL& CONTEXT
aankoop                                  eigen        onderdelen                              onderdelen                  ...
USER DRIVEN SIMPLIFICATION‣2 manipulaties • Installatietijd gereduceerd • Technical improvement
Deli’Do‣ Chocolademaken • Doelgroep : kinderen‣ Contextobservatie • Co-Creatie • Evaluatie huidige producten
CO-CREATIEIN CONTEXT
CONCEPTGENERATIE
HERDEFININTIE PRODUCT‣ Oorspronkelijkidee klant  • Chocolade smelten  • Gebruik door kinderen‣ Op basis van gebruikersobse...
EVOLUTIONS OF TECHNOLOGY     & IMPACT ON DESIGN“Honestly, if your business isn’t considering howcomputation changes things...
HUMAN COMPUTER CONFLUENCE                            BERG Little Printer
THE NEW AESTHETIC‣ Influence  of digital world world on  things around us   New type of visuals   New ways of thinking‣ Di...
Sudnderland Station, Jason Bruges Studio
Shapeways & Minecraft : Mineways (flickr pmin00)
FABRICATION ANYWHERE‣ Products   exist as data                             Makerbot & Thingiverse
“…the object is no longer an object, butan instantiation”                 Bruce Sterling, Shaping things
DESIGN PROFESSION‣ The    product is less often ‘just’ the  hardware‣ It is the whole trajectory of use   • Usage cycle   ...
USEFUL TOOLS & RESOURCES                           IDEO Human Centered Design Toolkit
MAP-IT
SERVICE DESIGN TOOLS
USEWELL
IN CONCLUSION‣ User  Experience Design is a dangerous term   • Lot of connotation   • Be aware of the stereotypes‣ It is n...
IN CONCLUSION, cont.‣ Design  is connecting • Overview of a process • Identify opportunities • Bring people together • Fac...
PROCES OVERZICHT                                            creative                               evaluatie              ...
WWW.CONCRETE.BE
lecture User Experience Design for Howest
lecture User Experience Design for Howest
lecture User Experience Design for Howest
lecture User Experience Design for Howest
lecture User Experience Design for Howest
lecture User Experience Design for Howest
lecture User Experience Design for Howest
lecture User Experience Design for Howest
lecture User Experience Design for Howest
lecture User Experience Design for Howest
lecture User Experience Design for Howest
lecture User Experience Design for Howest
lecture User Experience Design for Howest
lecture User Experience Design for Howest
lecture User Experience Design for Howest
lecture User Experience Design for Howest
lecture User Experience Design for Howest
lecture User Experience Design for Howest
lecture User Experience Design for Howest
Upcoming SlideShare
Loading in …5
×

lecture User Experience Design for Howest

988 views

Published on

lecture by Dries De Roeck
9/5/2012

Published in: Design

lecture User Experience Design for Howest

  1. 1. HELLO‣ Dries‣ Concrete‣ PhD, Artesis & TUDelft‣ Design Research‣ dries@concrete.be‣ @driesderoeck
  2. 2. USER EXPERIENCE DESIGN ster eoty pe ‣ Academic interpretation • Interface design • Quantify ‣ Marketing interpretation • Superficial work • (fake) emotion
  3. 3. ‣ ASUS Ultrabook UX21‣ Apple Macbook Air
  4. 4. INDUSTRIAL DESIGN‣ Itis ‘Design’ pe‣ Expensive, exclusive oty st ere‣ Visual look
  5. 5. Designer slash model (desigerslashmodel.com)
  6. 6. COMMON MISCONCEPTION‣ Design is more than meets the eye • in most cases That Squiggle of the Design Process - Damien Newman
  7. 7. “there is no such thing asa UX design profession” Peter Merholz, Adaptive path
  8. 8. ON TERMINOLOGY‣ Terminology discussions are useless‣ User experience design‣ Interaction design‣ User centered design‣ User centric design‣ Design thinking‣ Conclusion : In practice, they are very similar
  9. 9. USERSFIRST
  10. 10. HUMAN CENTERED DESIGN‣ Generic approach • Software • Hardware • Service • Digital / Non-Digital‣A way of thinking, deeply rooted‣ Know the people that will use your product‣ Know the context in which your product will be used‣ Know the interactions between both
  11. 11. HUMANCONTEXTINTERACTION
  12. 12. Stephen P Anderson - www.poetpainter.com .
  13. 13. BERG - berglondon.com
  14. 14. CASES‣ Total design processes‣ Mixing • Product design • Interior design • Service design
  15. 15. ASSURAX SHOP-CONCEPT‣ Eigen project • Uitvoering analyse • Implementatie concept‣ Online verzekeringsmakelaar • Exploratie belang van fysieke kantoren‣ Ontwikkeling shop-concept‣ Voorstudie • In-context observatie / interview • Persona’s
  16. 16. ASSURAX PERSONAS‣ Analyse : opstellen personasLuciano / 28 jaar Daisy / 32 jaar Albert / 76 jaar Dirk / 44 jaarfotograaf actieve huisvrouw gepensioneerde dokwerkerregelt alles via internet: informeert zich via de informeert zich via regelt alles via de shop:informeren, vergelijken, shop en beslist thuis internet en beslist en informeren, vergelijken,bestellen en beheren. samen met haar man via besteld in de shop bestellen en beheren internet.
  17. 17. ASSURAXPERSONAS eerste contact producten vergelijken beslissings- moment eindproduct + beheren via gedrukte bespreekt alle beslist thuis samen tastbare + virtuele‣ Costumer journey reclame, via opties in de shop met haar man en verzekerings- kennissen, via PR met de agent... en vind vlot haar weg portefeuille.‣ Touchpoint analyse zet haar studie op de online stunts. thuis verder (waar interface. ze de nodige extra beheert alles is al enkele malen informatie kan virtueel, maar keert voorbij gewandelt vinden). keert eventueel terug naar de shop en gaat de shop terug naar de shop voor nieuwe (onvoorbereid) voor meer info. contracten. binnen uit nieuws- gierigheid. Daisy / 32 jaar Shop “...als het over onze actieve huisvrouw “...ik wil persoonlijk verwittigd geldzaken gaat, vind ik worden indien er zich betere of een persoonlijk informeert zich via de goedkopere producten aandienen.” aanspreekpunt best shop en beslist thuis belangrijk!¨ samen met haar man via internet. “Ik hou van een duidelijk en overzichtelijk product dat rustig thuis kan bestuderen” “... ik heb wel graag ook afgedrukte exemplaren van mijn documenten die ik verzamel in een kaft”
  18. 18. ASSURAX ONTWERPPROCES‣ Ontwikkeling retailconcept • Integratie online service & fysieke kantoren • Multi-toepasbaar‣ Huisstijl • ‘transparant’ • ‘onafhankelijk’ • ‘vertrouwen’ • ‘professioneel’ • ‘onderscheidend’‣ Onderzoek • Bestaande concepten in financiële sector
  19. 19. aan de balie krijgt u persoonlijke aandacht
  20. 20. individuele werkplekvoor de medewerker
  21. 21. samen met de klant aan 1 zijde van de tafel
  22. 22. Net4c‣ Eigen project • Analyse • Prototyping • Opvolging software development‣ Sociaalnetwerk voor senioren • Langer thuiswonen • Sociaal contact‣ Integratievan leeftijdsgroepen • Cross platform • Device onafhankelijk‣ Stigma overstijgen • “Zorg”
  23. 23. METHODES‣ Persona creatie‣ Scenario’s‣ Interaction flows‣ Prototyping • Paper • Functional
  24. 24. Text‣ Persona interactie‣ App flow
  25. 25. PAPER PROTOTYPING‣ First interface & interaction ideas
  26. 26. FUNCTIONAL PROTOTYPING‣ Collaboration with developers‣ Keynote prototyping • Animation (Smart move) • Webcam integration (Quartz composer) • Movie export‣ Expression blend • Direct follow up of development
  27. 27. FUNCTIONAL PROTOTYPING‣ Dopeople understand the system? • Not just the interface
  28. 28. Straatstarters‣ Samenwerking ‣ Concrete & Pantopicon‣ Sociale cohesie • Stad • Straatniveau‣ Ontwerpmatige interventie • Prototype • Evaluatie
  29. 29. PROCES‣ Overzicht processtappen
  30. 30. CULTURAL PROBES‣ Opdrachten-set‣ Verzamelen rijke informatie • Gekoppeld aan interview
  31. 31. CULTURAL PROBES
  32. 32. CONCEPTGENERATIE‣ Interne brainstrom‣ Input van probes & interviews
  33. 33. CONCEPT GENERATIE‣ Draft ideeën visueel communiceren
  34. 34. CONCEPT GENERATIE‣ Opbasis van brainstorm ideeën • Focus op complete concepten‣ Worden gebruikt als ‘spraakmaker’ in co-creatie‣6 totaalconcepten • Storyboard • Draft sketches
  35. 35. TJIIIIES!‣ Voorbeeldstoryboard
  36. 36. PARTICIPATORYDESIGN‣ Werksessie‣ Buurtbewoners + stad Antwerpen
  37. 37. FINAAL SCENARIO‣ Delen van een
  38. 38. Mealbutler Demetra‣ Opwarmtoestel voor thuisgeleverde maaltijden‣ Interview& observatie • Huidige situatie • Relevante stakeholders‣ Eenvoud in gebruik • Niet inboeten op ontwerp • Stigma overstijgen
  39. 39. EENVOUD‣ Gebruik • Enkel relevantie functies • Knop • Verborgen display‣ Technisch • Standaard • Kostreductie
  40. 40. EANDIS SLIMME METER‣ Context • Kelder‣ Eindegebruiker is niet de primaire gebruiker • “gebruiksfase” is op moment van installatie
  41. 41. VORMGEVING‣ Basisvormgeving‣ Focus op installatie
  42. 42. HUIDIG MODEL& CONTEXT
  43. 43. aankoop eigen onderdelen onderdelen stock onderdelen assemblage ledigen tassen config. 1 config. 2 config. 3 config. 4 config. 5 lege onderdelen tassen oude meters in tassen recyclageorder stock kasten
  44. 44. USER DRIVEN SIMPLIFICATION‣2 manipulaties • Installatietijd gereduceerd • Technical improvement
  45. 45. Deli’Do‣ Chocolademaken • Doelgroep : kinderen‣ Contextobservatie • Co-Creatie • Evaluatie huidige producten
  46. 46. CO-CREATIEIN CONTEXT
  47. 47. CONCEPTGENERATIE
  48. 48. HERDEFININTIE PRODUCT‣ Oorspronkelijkidee klant • Chocolade smelten • Gebruik door kinderen‣ Op basis van gebruikersobservatie • Probleem = proper werken‣ Focus van het project werd aangepast
  49. 49. EVOLUTIONS OF TECHNOLOGY & IMPACT ON DESIGN“Honestly, if your business isn’t considering howcomputation changes things, you’re toast – especiallythose industries that haven’t traditionally beencomputerised or modernised.” Chris Heathcote - www.anit-mega.com
  50. 50. HUMAN COMPUTER CONFLUENCE BERG Little Printer
  51. 51. THE NEW AESTHETIC‣ Influence of digital world world on things around us New type of visuals New ways of thinking‣ Different frame of reference‣ Ongoing discussion Megabytes of spring - Reed + Rader
  52. 52. Sudnderland Station, Jason Bruges Studio
  53. 53. Shapeways & Minecraft : Mineways (flickr pmin00)
  54. 54. FABRICATION ANYWHERE‣ Products exist as data Makerbot & Thingiverse
  55. 55. “…the object is no longer an object, butan instantiation” Bruce Sterling, Shaping things
  56. 56. DESIGN PROFESSION‣ The product is less often ‘just’ the hardware‣ It is the whole trajectory of use • Usage cycle • Production cycle • After-use cycle‣ Digitalservices are part of this, but should not become dominant • Integrated products‣ All-round creative
  57. 57. USEFUL TOOLS & RESOURCES IDEO Human Centered Design Toolkit
  58. 58. MAP-IT
  59. 59. SERVICE DESIGN TOOLS
  60. 60. USEWELL
  61. 61. IN CONCLUSION‣ User Experience Design is a dangerous term • Lot of connotation • Be aware of the stereotypes‣ It is not • a step in a process • a profession • something to be added in the end‣ It is • a deeply rooted way of working • about processes and strategies • understanding people, context and interactions
  62. 62. IN CONCLUSION, cont.‣ Design is connecting • Overview of a process • Identify opportunities • Bring people together • Facilitate > create‣ Product= service = product • Design for the whole experience‣ Adapt methods, be flexible • Get the data you need
  63. 63. PROCES OVERZICHT creative evaluatie co-design sessie sessie extern klankbord stakeholder<klant> analyse intern veldonderzoek conceptualisering touchpoints desk research prototyping afbakening concept generatie implementatie
  64. 64. WWW.CONCRETE.BE

×