Vignette. Dit is het niet:

Maat: px
Weergave met pagina beginnen:

Download "Vignette. Dit is het niet: https://play.google.com/store/apps/details?id=uk.co.neilandtheresa.newvignette&hl=en"

Transcriptie

1

2 1 Formats

3 Vignette A vignette is a short, well written sketch or impressionistic scene. It does not have a plot which would make it a story, but it does reveal something about the elements in it. It may reveal character, mood or tone. It may have a theme or idea of its own that it wants to convey. It is the description of the scene or character that is important. Dit is het niet:

4 Criteria 1. Formats: Er is expliciet gekozen voor een vorm (tour, sketch, short story, soundscape, game) die in de juiste verhouding staat tot de inhoud 2. Interactie: de gebruiker interacteerd aktief met de applicatie en de context 3. Motivatie: Er is een doel dat de gebruiker motiveert (conflict, drama, spel, voordeel, enz.) 4. Locaties: De Vignette speelt zich af op drie locaties (lineair, non-lineair, interactief) 5. Grounding the narrative: Er is een duidelijk verband met elke locatie (context); de interactie met de locatie is benoemd en betekenisvol 6. Sociaal: Er is een sociale relatie met een ander; de interactie met die ander is benoemd en betekenisvol 7. Design: vormgeving, interaction design, gebruik van gestures vormen een afgestemde eenheid 8. Maar van doorslaggevend belang is dat de gebruiker een vloeiende ervaring ondergaat. Het moet dus 'lekker' lopen en aansprekend zijn.

5 Format (vorm) Locative audio Urban gaming Personalized landscapes Pervasive games Geocaching Treasure Hunts Spatial storytelling Serious gaming Psycho-geographic walks

6 Format (inhoud) Informatie verstrekken Tourisme Kunst theater events Entertainment Game Educatie Social / Social Media Co-creation collaboration Locative audio Time based informatie Where is the nearest? Ask a local

7 2 Interactie

8 The Mobile Fronteer By Rachel Hinman. Rosenfeld Media, June 2012.

9 The Mobile Book By Smashing Editorial

10 LBS

11 The Mobile Context The Mobile Fronteer by Rachel Hinman. The Mobile Book by Smashing Editorial How do we determine the context of our mobile users? one eyeball and one thumb. Mobile context = anywhere and everywhere Ontwerp ervaringen die specifiek zijn voor mobile Marshall McLuhan : We march backwards into the future Good mobile experiences progressively reveal their nature Content becomes the interface Task switching GPS drift Alternatieven (Alternatives) The opportunity cost

12

13

14 3 Motivatie

15

16 Macht, behoefte om invloed te hebben Nieuwsgierigheid, behoefte aan kennis Onafhankelijkheid, behoefte om autonoom te zijn Status, behoefte aan sociale erkenning en aandacht Sociaal contact, behoefte aan gezelschap en spelen Wraak, behoefte om quitte te spelen, maar ook om te strijden en te winnen Eer, behoefte om te gehoorzamen aan traditionele morele normen en waarden Idealisme, behoefte om de samenleving te verbeteren en om altruïstisch en rechtvaardig te zijn Lichaamsbeweging, behoefte om de spieren te trainen Liefde en romantiek, behoefte aan seks en hofmakerij Gezin, behoefte om kinderen groot te brengen Orde, behoefte om te organiseren en rituelen uit te voeren Eten, behoefte om voedsel tot zich te nemen (dorst is volgens Reiss geen basisbehoefte, omdat het onvoldoende voor psychologen interessant alledaags gedrag verklaart) Acceptatie, behoefte aan bevestiging Kalmte, behoefte om onrust en angst te vermijden Sparen, behoefte om te verzamelen en zuinig te zijn.

17 Rules of Play, game design fundamentals - Katie Salen Eric Zimmerman Game Design Workshop - Tracy Fullerton A Theory of Fun for Game Design - Raph Koster To design a good game, first build a good toy Denk vanuit de spelende speler Ga! Kom! Doe! (UX NU!) Waar denkt de speller aan wanneer hij een beslissing neemt? Welk gevoel hoort daarbij: opwinding, nieuwsgierigheid,? Gamification patterns Bordspelen en locaties Psycho-geographic walks Mars door Amsterdam Designing a game is not about thinking up a storyline but about what the player does and sees while playing your idea Alternatieven (Alternatives)

18 Big Urban Game Frank Lantz, Katie Salen en Nick Fortugno

19

20 Ga! Kom! Doe!

21 4 Locatie

22 Sequentie patterns Lineair Non lineair Interactief / keuze Branching Geschiedenis Module / modulair ontwerp Tijd & Geld Werkverdeling

23 Het maakt niet uit hoe vaak je een Model in een spel gebruikt. Als het maar relevant blijft voor het verhaal. De Modellen kunnen ook gecombineerd worden, waardoor je talloze mogelijkheden hebt om een andere route te volgen of om een spel elke keer anders te laten voelen.

24 5 Grounding the narrative

25 Tot 1857

26

27

28

29

30 Stoepkrijt

31 I don t believe we can front-load all of the necessary design decisions at the beginning of a project for any platform, least of all for mobile.

32 Our work needs to be conceived of and fleshed out in the real context of use. The Mobile Frontier, Rachel Hinman

33 6 Sociaal Designing for emotion

34

35 Design for emotion - Aarron Walter Why do we settle for usable when we can make interfaces both usable and pleasurable? pleasure, fun, joy, and delight We can transcend usability to create truly extraordinary experiences Emotional Engagement It can all be effective in getting your audience to fall in love with your brand. But your tactics must be appropriate for your audience and brand experience. There is no formula for emotional design, only principles of psychology and human nature to guide you. Let s think of our designs not as a facade for interaction, but as people with whom our audience can have an inspired conversation. Products are people, too.

36 Design Persona: If your website were a person, who would it be? Is it serious, buttoned up, all business, yet trustworthy and capable? Is it a wise-cracking buddy that makes even mundane tasks fun? As designers, we re in a unique position to help users follow their gut instincts. Using common design tools like layout, color, line, typography, and contrast, we can help people more easily consume information and make a decision driven by instinct more than reason. Style tile

37 HowTo Is the personality I ve created for my brand authentic and well matched to the profile of my audience? Is my brand personality too similar to those of my competitors? Is my content well written and relevant to my audience s needs and interests? Do the emotional design methods I m using interfere with the base layers of the user s hierarchy of needs (making the site less functional, reliable, usable)?

38 HowToTwo Ask your users openended questions that will give you the insights you seek: Describe your initial reactions to the website. How does the website make you feel? If this website were a person, who would it be and why? Would you recommend this site to a friend? Why or why not? Are there site sections or features that are more important to you than others? Less important? Why?

39 Risk & Reward Showing emotion in design, as in life, is risky. Some people won t get it. Some people will even hate it. But that s okay. An emotional response to your design is far better than indifference.

40 Remember, emotional design should never interfere with usability, functionality, or reliability.

41 Persoonlijkheid Let s think of our designs not as a facade for interaction, but as people with whom our audience can have an inspired conversation. Products are people, too.

42 Design Persona If your website were a person, who would it be? Is it serious, buttoned up, all business, yet trustworthy and capable? Is it a wise-cracking buddy that makes even mundane tasks fun?

43 HowTo Is the personality I ve created for my brand authentic and well matched to the profile of my audience? Is my brand personality too similar to those of my competitors? Is my content well written and relevant to my audience s needs and interests? Do the emotional design methods I m using interfere with the base layers of the user s hierarchy of needs (making the site less functional, reliable, usable)?

44 HowToTwo Ask your users openended questions that will give you the insights you seek: Describe your initial reactions to the website. How does the website make you feel? If this website were a person, who would it be and why? Would you recommend this site to a friend? Why or why not? Are there site sections or features that are more important to you than others? Less important? Why?

45 Risk & Reward Showing emotion in design, as in life, is risky. Some people won t get it. Some people will even hate it. But that s okay. An emotional response to your design is far better than indifference.

46 Remember, emotional design should never interfere with usability, functionality, or reliability.

47 7 Design

48

49 Mobile first - Luke Wroblewski Content first (nav later) Reduction is the best layout approach available to you on mobile Too many mobile Web experiences start the conversation off with a list of navigation options instead of content, writes Luke Wroblewski in his book Mobile First. Time is often precious on mobile and downloads can cost money, so get people to what they came for as soon as you can. Web experiences should lead with content and confine primary navigation to page bottom. That s page bottom, not screen bottom. This is the footer anchor navigation style that Brad Frost introduced in his Responsive Design Patterns chapter. MobileDesignPatterns

50 Footer anchor

51 Content becomes the interface Off canvas 10 x 10 mm Finding What You Can t See. Gestures are unlabeled, invisible. To discover them, we rely on visual clues or, even more usefully, past experience. If an interface element looks or behaves like a physical object, people will try to interact with it like one. Web experiences should lead with content and confine primary navigation to page bottom. That s page bottom, not screen bottom. You ll have to learn how to lead with the content, not the interface. Leading with the content means creating screen layouts that focus less on iconography and buttons and more on the content itself (images, videos, and text).

52 MobileDesignPatterns details.php?colid= &setid= &s=1 Responsive Patterns

53

54 10 x 10 mm bij 315 ppi = 124 px bij 132 ppi = 52 px

55

56 Reduction is the best layout approach available to you on mobile

57 one eyeball and one thumb.