Visualizing User ExperiencePrasanna Revan, Y!Design, Yahoo! Bangalore

Saturday, July 13, 13

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

Me

YouI need to make a confession!

Aarthi Ramamurthy http://www.flickr.com/photos/aarthi/437923767/sizes/o/in/photostream/Saturday, July 13, 13

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

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

I have two broad questions for you...

What is Art?

and What is Design?

Saturday, July 13, 13

This is Art.

Saturday, July 13, 13

Philips Livingcolors - 16 Million Color LED

This is Design

Saturday, July 13, 13

Today’s topics

How it connects with User Experience?

What is to Visualize?

Saturday, July 13, 13

The answer lies in one word.

“Interface”

Saturday, July 13, 13

Interface is everywhere!

David.Asch - http://www.flickr.com/photos/trinity-of-one/20562069/sizes/o/i

Saturday, July 13, 13

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

Saturday, July 13, 13

Important elements of visualizing Imagine / new possibilitiesEmpathize / emotionsSynthesize / blend seamlessly Create / new methodsReduce / Finetune

Saturday, July 13, 13

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

Empathizing with scrap-bookers.

Saturday, July 13, 13

Empathizing with independent artists.

Saturday, July 13, 13

Synthesize everything!

Saturday, July 13, 13

Fine-tune and re-invent.

Saturday, July 13, 13

Creating with simple interactions

Saturday, July 13, 13

Surprise!

Saturday, July 13, 13

Visual Elements

Type / TypographyLayout / CompositionContrast / IntensityVisual Story / ThemePalette / Clarity

Saturday, July 13, 13

Create Your Story

Saturday, July 13, 13

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

Build a Visual Design Strategy

http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-2/9084309

Saturday, July 13, 13

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

Composition and Golden Ratio

Saturday, July 13, 13

Define your Grid

Saturday, July 13, 13

Examples of Responsive Grid Design

Saturday, July 13, 13

Create simple Navigation

Saturday, July 13, 13

Define Key Page-types

Login CRUD Dashboard

And identify patterns...

Saturday, July 13, 13

Contrast is key

Saturday, July 13, 13

Know Your Typography

Saturday, July 13, 13

Type can evoke powerful feelings.

Saturday, July 13, 13

Play with the Palette

Saturday, July 13, 13

Key steps for visual thinking

Artifacts Model Refine

Saturday, July 13, 13

Visual experience is beyond front-end.

It has to be a part of your product strategy.

Saturday, July 13, 13

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

Saturday, July 13, 13

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