Visualizing User Experience

1. Visualizing User
Experience
Prasanna Revan, Y!Design, Yahoo! Bangalore
Saturday, July 13, 13

2. 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

3. Me
You
I need to make a confession!
Aarthi Ramamurthy http://www.flickr.com/photos/aarthi/437923767/sizes/o/in/photostream/
Saturday, July 13, 13

4. 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

5. 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

6. I have two broad questions for
you...
What is Art?
and What is Design?
Saturday, July 13, 13

7. This is
Art.
Saturday, July 13, 13

8. Philips Livingcolors - 16 Million Color LED
This is Design
Saturday, July 13, 13

9. Today’s topics
How it connects with User Experience?
What is to Visualize?
Saturday, July 13, 13

10. The answer lies in one word.
“Interface”
Saturday, July 13, 13

11. Interface is everywhere!
David.Asch - http://www.flickr.com/photos/trinity-of-one/20562069/sizes/o/i
Saturday, July 13, 13

12. Graphical user interfaces
Web 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

13. Saturday, July 13, 13

14. Important elements of visualizing
Imagine / new possibilities
Empathize / emotions
Synthesize / blend seamlessly
Create / new methods
Reduce / Finetune
Saturday, July 13, 13

15. Imagine the impossible.
MIT'S ORBS
From 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

16. Empathizing with scrap-bookers.
Saturday, July 13, 13

17. Empathizing with independent artists.
Saturday, July 13, 13

18. Synthesize everything!
Saturday, July 13, 13

19. Fine-tune and re-invent.
Saturday, July 13, 13

20. Creating with simple interactions
Saturday, July 13, 13

21. Surprise!
Saturday, July 13, 13

22. Visual Elements
Type / Typography
Layout / Composition
Contrast / Intensity
Visual Story / Theme
Palette / Clarity
Saturday, July 13, 13

23. Create Your Story
Saturday, July 13, 13

24. Create Your Story
FORD KEYFREE
Ford’s Keyfree has
nothing to do with cars.
Instead, this promotional
app stores all of your
passwords on your
iPhone,
AIRBNB
Airbnb 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.
TWINE
Twine, 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

25. Build a Visual Design Strategy
http://www.behance.net/gallery/Google-Visual-Assets-
Guidelines-Part-2/9084309
Saturday, July 13, 13

26. 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

27. Composition and Golden Ratio
Saturday, July 13, 13

28. Define your Grid
Saturday, July 13, 13

29. Examples of Responsive Grid Design
Saturday, July 13, 13

30. Create simple Navigation
Saturday, July 13, 13

31. Define Key Page-types
Login CRUD Dashboard
And identify patterns...
Saturday, July 13, 13

32. Contrast is key
Saturday, July 13, 13

33. Know Your Typography
Saturday, July 13, 13

34. Type can evoke powerful feelings.
Saturday, July 13, 13

35. Play with the Palette
Saturday, July 13, 13

36. Key steps for visual thinking
Artifacts Model Refine
Saturday, July 13, 13

37. Visual experience is beyond
front-end.
It has to be a part of your
product strategy.
Saturday, July 13, 13

38. The goal is not to create a deliverable,
it’s to change something in the world
—to create an outcome.
Saturday, July 13, 13

39. 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