1 Formats
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: https://play.google.com/store/apps/details?id=uk.co.neilandtheresa.NewVignette&hl=en
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.
Format (vorm) • Locative audio • Urban gaming • Personalized landscapes • Pervasive games • Geocaching • Treasure Hunts • Spatial storytelling • Serious gaming • Psycho-geographic walks
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
2 Interactie
The Mobile Fronteer By Rachel Hinman. Rosenfeld Media, June 2012.
“The Mobile Book” By Smashing Editorial
LBS
•
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
3 Motivatie
•
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.
•
Rules of Play, game design fundamentals - Katie Salen – Eric Zimmerman
•
Game Design Workshop - Tracy Fullerton
•
A Theory of Fun for Game Design - Raph Koster
•
http://gamification.org/
•
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)
Big Urban Game Frank Lantz, Katie Salen en Nick Fortugno
Ga! Kom! Doe!
4 Locatie
• Sequentie patterns • Lineair • Non lineair • Interactief / keuze • Branching • Geschiedenis • Module / modulair ontwerp • Tijd & Geld • Werkverdeling
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.
5 Grounding the narrative
Tot 1857
Stoepkrijt
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.
“Our work needs to be conceived of and fleshed out in the real context of use.” “The Mobile Frontier,” Rachel Hinman
6 Sociaal
Designing for emotion
• 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.
• 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
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)?
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?
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.
“Remember, emotional design should never interfere with usability, functionality, or reliability.”
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.
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?
http://aarronwalter.com/design-personas/
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)?
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?
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.
“Remember, emotional design should never interfere with usability, functionality, or reliability.”
7 Design
• 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
Footer anchor
http://codepen.io/bradfrost/full/mlyvu
• 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).
•MobileDesignPatterns •
http://mobiledesignpatterngallery.com/mobile-patternsdetails.php?colid=6543802972157627607680275&setid=72157629206166752&s=1
• Responsive Patterns •
http://bradfrost.github.io/this-is-responsive/patterns.html
•
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
10 x 10 mm bij 315 ppi = 124 px bij 132 ppi = 52 px
“Reduction is the best layout approach available to you on mobile”
“one eyeball and one thumb.”
