Hasso Plattner Institute of Design - Emotional Design dmedia2012 - Design Project 3 Design Project 03: Motivate Me What Are You Going to Do? Design Project 1 focused on what a user can see (visual design). Design Project 2 will focus on what a user does (interaction design). Over the next two weeks well design a mobile app that helps an individual improve some aspect of their personal health. Take a broad deﬁnition of “health” and consider exercise, nutrition, monitoring, prevention, education, disease, or any other topic that you might ﬁnd relevant. Also consider both physical healthSource: Emotional Equations and mental health. What’s the Point? This project has three learning goals: ❖ Use the principles of visual, interaction, and emotional design to communicate an experience ❖ Target a behavioral goal and intentionally craft an emotional response that motivates action ❖ Create an interactive prototype with the least amount of user behavior needed to accomplish a goal and feel [insert intended emotion(s)]
Challenge❖ Design an emotionally charged digital experience thatmotivates measurable behavior❖ If you don’t have an idea redesign an existing digital experience*Constraints❖ Anything digital, on any device❖ The behavioral goal for users ideally creates social good❖ If you don’t have an emotion to focus on target emotionsrelated to digital intimacy or identity*❖ Final prototype should be interactiveDeliverables❖ Due Thurs 3/1: One page experience map & prototype #1“Landing Page”❖ Due Thurs 3/8: Prototype #2 “Interactive”❖ Due Thurs 3/15: Present ﬁnal prototype & any insights
Experience Map Deliverable Due Thurs 3/1 by 9ampost to website categories: “Project 3” & “Experience Map”WhatExperience maps visually communicate a story or scenario about coreinteraction(s) and the surrounding context that a user feels. Somefocus on a detailed task view while others visualize the system levelperspective. Often characters, dialogue, actions, uses, emotionalstates, motivational triggers, metaphors, &/or principles are depicted.HowMap out your target user as they walk through the most likelyscenario(s) you envision for the digital experience. Show why they’remotivated and how they feel after your intervention. Be sure tovisualize details about the context. You can use a story board to help.WhyUse the experience map to align people with your vision and to informthe interaction design map as you move to higher resolution.EvaluationDoes it communicate a compelling POV?Do the potential interactions elicit emotion?Do people want the experience to be real?
*Original Landing Page of MintPrototype #1 “Landing Page” Deliverable Due Thurs 3/1 by 9ampost to website categories: “Project 3” & “Iterations”WhatLanding pages are an age old tradition in Silicon Valley and provide justenough information to entice people to take action. Often just a logo,clever copy, provocative imagery, valued beneﬁts, key features &/or astrong call to action.HowStart with copy and develop a strong one liner POV that people canunderstand immediately. Focus on a key value of the experience you’reoﬀering. Visualize 3 characteristics you want to impute and create anemotional connection by showing brand personality.WhyLanding pages are a great way to communicate the essence of a digitalexperience, prioritize the most important feature(s) and help “fake it ‘tilyou make it.” They’re also good for running experiments and testing.EvaluationDoes it communicate a compelling POV?Does the page elicit visceral, behavioral and/or reﬂective emotions?Do people want to take action?
Ex. Experience Map: Service SystemNoticeHeadlines &Themes Timeline + Source:+ Those Pesky UsersSpeech CalloutsBubbles
Ex. Experience Map: Service SystemNotice template Source:User at top adaptive Path
Ex. 10 Experience Map: Social Software Community SystemNoticeDiﬀerent NoticeElements of Use of arrowsCustomer & icons Source:Journey + Adaptive Path+ Feeling &Opportunities Experience Bar
Ex. Experience Map: Social Software Community SystemUser Proﬁle Past Experiences Source:+ + nform Experience MapMotivators Processes
Ex. Experience Map: Task Towards GoalNotice Notice User ReliefScenario + Source: Storytelling+ UI Action + for User ExperienceTask Setup Next Question?
Ex. Experience Map: Key Feature Beneﬁt Notice emotion + Setup of Problem & Solution Notice Comparison + Key Feature Beneﬁt Source: Google Chrome Book
Ex. Experience Map: Use Case Scenarios Notice Point of View + High level product description & Inspiration Notice Context of Use + Motivation Triggers + Emotional states of users Source: UX Driven Startup
Ex. Experience Map: HumorNotice Extremeemotional Source: XKCDTrigger User Response
Ex. Experience Map: Laymen ExplanationNotice Notice Source:Framing with Explanation Dan RoamTitle of System + User Response
Ex. Experience Map: System MetaphorNotice Notice Source: OpenPrinciples of Future Teacher TalkEngagement Questions
Ex. Experience Map: Social Software Community SystemNotice NoticeHeadlines & ConﬂictsThemes ++ Source: ImageThink Use ofSpeech Arrows &Bubbles Color
Ex. Experience Map: ColorscriptNoticeColor Noticecontrast Transitions Source: The Art+ + of PixarScale Environment
Ex. Landing Page: Google NoticeNotice Logo Calls to action Source:+ + Wayback MachineHierarchy White Space
Ex. Landing Page: Tiny Review RandomSite Theme Interactive+ + Source: Its This For ThatHumor Share Call to Action
Resources7 Basic Emotional Design Principles1. Use clues from nature2. Show visual and cognitive contrast3. Add an analogy and map actions to artifacts4. Make things physical5. Have a lasting ﬁrst impression through welcoming and responsiveness6. People should identify themselves with your design7. Be human and communicate with a personalityTOOLS & RESOURCESPrototypinghttp://invisionapp.comhttp://ﬁeldtestapp.comhttp://keynotopia.comhttp://tumblr.comhttp://wordpress.com http://wordpress.orgUser feedbackhttp://verifyapp.comhttp://ﬁvesecondtest.comhttp://revisu.comhttp://reinvigorate.nethttp://www.slideshare.net/LauraKlein1/who-do-i-talk-to-now-diy-user-research-for-startupsDetecting emotionhttp://www.designandemotion.org/toolsmethods/http://www.premo-online.com/en/how-does-it-work/http://twittersentiment.appspot.comhttp://www.emotionwisegroup.org/emotion-testEMOTIONAL SITES & MASHUP EXAMPLEShttp://www.postsecret.com/http://www.fmylife.com/http://9gag.com/http://itsthisforthat.com/http://dearphotograph.com/http://grouphug.us/http://1thingapp.com/http://ushahidi.com/http://www.ﬂuther.com/http://cowbird.com/http://storycorps.org/http://ohlife.com/http://www.tweetfeel.com/http://www.wefeelﬁne.org/
RECOMMENDED READING Designing for Emotion http://www.abookapart.com/products/designing-for-emotion Emotional Interface Design http://thinkvitamin.com/design/emotional-interface-design-the-gateway-to-passionate-users/ Emotional Design http://www.jnd.org/books.html#42 Attractive Things Work Better http://jnd.org/dn.mss/emotion_design_attractive_things_work_better.html 3 Ways Good Design Makes You Happy http://www.ted.com/talks/don_norman_on_design_and_emotion.html Selective Memory http://www.metropolismag.com/story/20090318/selective-memories Emotional Design: People and Things http://jnd.org/dn.mss/emotional_design_people_and_things.html How to cultivate emotional engagement http://blog.kissmetrics.com/mixed-feelings/?wide=1 Design For Emotion and Flow http://www.boxesandarrows.com/view/design-for-emotion Design For Emotion http://designforemotion.com/ Design for Emotion Examples http://www.design-emotion.com/ Emotional Equations http://emotionalequations.com/ Advice For Success- Do several cycles. Most iterations wins!- Consider focusing on one behavior goal to help guide your experience map- Consider focusing on one emotion that drives motivation on your landing page- Beg, borrow and steal resources, images, tools, icons, buttons, graphics etc,- Scope your app for the learning goals of the assignment... aka: KEEP IT SIMPLE!