Download - Visualizing User Experience
![Page 1: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/1.jpg)
Visualizing User ExperiencePrasanna Revan, Y!Design, Yahoo! Bangalore
Saturday, July 13, 13
![Page 2: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/2.jpg)
Hi, I am Prasanna Revan.
My passion is design. My distractions are, Motorcycling, Arduino, Farming, Kinect, Indology, Vampires, Comic Books, Spaceships, Nature, Birds, Steampunk, Stories, Pigments, Nibs, Calligraphy, Typoholics, Startrek, Adele, Country Music, 1930s Talk Radio, Mridangam, Breaking Bad, Craftwerk, Alan Moore, Renaissance Art, Post Modernism, Green Tea, Red Wine and Blues Music.
Saturday, July 13, 13
![Page 3: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/3.jpg)
Me
YouI need to make a confession!
Aarthi Ramamurthy http://www.flickr.com/photos/aarthi/437923767/sizes/o/in/photostream/Saturday, July 13, 13
![Page 4: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/4.jpg)
To visualize user experiences you need no
training.experience.special skills.fancy tools.
by vill3r http://www.flickr.com/photos/viller/8925872014/sizes/h/in/
Saturday, July 13, 13
![Page 5: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/5.jpg)
Well, all you need is
a warm heart.passion for users.a keen sense.eye for details.&courage to fail!
By muscolinos www.flickr.com/photos/muscolinos/2435217016/sizes/l/in/photostream/Saturday, July 13, 13
![Page 6: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/6.jpg)
I have two broad questions for you...
What is Art?
and What is Design?
Saturday, July 13, 13
![Page 7: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/7.jpg)
This is Art.
Saturday, July 13, 13
![Page 8: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/8.jpg)
Philips Livingcolors - 16 Million Color LED
This is Design
Saturday, July 13, 13
![Page 9: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/9.jpg)
Today’s topics
How it connects with User Experience?
What is to Visualize?
Saturday, July 13, 13
![Page 10: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/10.jpg)
The answer lies in one word.
“Interface”
Saturday, July 13, 13
![Page 11: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/11.jpg)
Interface is everywhere!
David.Asch - http://www.flickr.com/photos/trinity-of-one/20562069/sizes/o/i
Saturday, July 13, 13
![Page 12: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/12.jpg)
Graphical user interfacesWeb user interfaces Touchscreens (Display)Command line interfaces Touch user interface (Touch pads) Attentive user interfaces (Present warnings)Conversational Interface Agents (Robots, Etc) Gesture interfaces (Kinect)Intelligent user interfaces (Combination of many)Motion tracking interfaces (body motions to cmd)Multi-screen interfaces (one UI many screens)Tangible user interfaces (Touch and environmental)Task-Focused Interfaces (tasks, not files, as primary)Voice user interfaces Natural-language interfaces (Search) Zero-Input interfaces (Sensors) Zooming user interfaces (Cubes, data)
Yes, Everywhere!
http://en.wikipedia.org/wiki/User_interface_design
Saturday, July 13, 13
![Page 13: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/13.jpg)
Saturday, July 13, 13
![Page 14: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/14.jpg)
Important elements of visualizing Imagine / new possibilitiesEmpathize / emotionsSynthesize / blend seamlessly Create / new methodsReduce / Finetune
Saturday, July 13, 13
![Page 15: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/15.jpg)
Imagine the impossible.MIT'S ORBSFrom MIT’s Media Lab, a series of levitating orbs can be rearranged--placed right in midair--to interface with any computer simulation you can imagine. It’s a 3-D user interface that you can touch.
Saturday, July 13, 13
![Page 16: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/16.jpg)
Empathizing with scrap-bookers.
Saturday, July 13, 13
![Page 17: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/17.jpg)
Empathizing with independent artists.
Saturday, July 13, 13
![Page 18: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/18.jpg)
Synthesize everything!
Saturday, July 13, 13
![Page 19: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/19.jpg)
Fine-tune and re-invent.
Saturday, July 13, 13
![Page 20: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/20.jpg)
Creating with simple interactions
Saturday, July 13, 13
![Page 21: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/21.jpg)
Surprise!
Saturday, July 13, 13
![Page 22: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/22.jpg)
Visual Elements
Type / TypographyLayout / CompositionContrast / IntensityVisual Story / ThemePalette / Clarity
Saturday, July 13, 13
![Page 23: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/23.jpg)
Create Your Story
Saturday, July 13, 13
![Page 24: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/24.jpg)
Create Your Story
FORD KEYFREEFord’s Keyfree has nothing to do with cars. Instead, this promotional app stores all of your passwords on your iPhone,
AIRBNBAirbnb redesigned this year with a focus on social. Airbnb switched the interaction, from clicking a star to clicking a heart. Engagement grew by 30%. Why? Stars mean nothing. Hearts (or love?) are aspirational.
TWINETwine, a puck filled with sensors detects anything from moisture to magnetism. Stick it anywhere and it’ll tweet status updates at your command and there is no coding skill required.
Saturday, July 13, 13
![Page 25: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/25.jpg)
Build a Visual Design Strategy
http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-2/9084309
Saturday, July 13, 13
![Page 26: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/26.jpg)
Know Your Composition Basics
The Fibonacci sequence starts like this: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55 and so on forever. Each number is the sum of the two numbers that precede it. It's a simple pattern, but it appears to be a kind of built-in numbering system to the cosmos.
Saturday, July 13, 13
![Page 27: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/27.jpg)
Composition and Golden Ratio
Saturday, July 13, 13
![Page 28: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/28.jpg)
Define your Grid
Saturday, July 13, 13
![Page 29: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/29.jpg)
Examples of Responsive Grid Design
Saturday, July 13, 13
![Page 30: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/30.jpg)
Create simple Navigation
Saturday, July 13, 13
![Page 31: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/31.jpg)
Define Key Page-types
Login CRUD Dashboard
And identify patterns...
Saturday, July 13, 13
![Page 32: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/32.jpg)
Contrast is key
Saturday, July 13, 13
![Page 33: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/33.jpg)
Know Your Typography
Saturday, July 13, 13
![Page 34: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/34.jpg)
Type can evoke powerful feelings.
Saturday, July 13, 13
![Page 35: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/35.jpg)
Play with the Palette
Saturday, July 13, 13
![Page 36: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/36.jpg)
Key steps for visual thinking
Artifacts Model Refine
Saturday, July 13, 13
![Page 37: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/37.jpg)
Visual experience is beyond front-end.
It has to be a part of your product strategy.
Saturday, July 13, 13
![Page 38: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/38.jpg)
The goal is not to create a deliverable, it’s to change something in the world—to create an outcome.
Saturday, July 13, 13
![Page 39: Visualizing User Experience](https://reader030.vdocuments.net/reader030/viewer/2022032618/55b5ad1bbb61eb7a448b4759/html5/thumbnails/39.jpg)
Thank you!
The goal is not to create a deliverable, it’s to change something in the world—to create an outcome.
Saturday, July 13, 13