SlideShare une entreprise Scribd logo
1  sur  39
Télécharger pour lire hors ligne
Visualizing User
Experience
Prasanna 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
You
I 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 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
Saturday, July 13, 13
Important elements of visualizing
Imagine / new possibilities
Empathize / emotions
Synthesize / blend seamlessly
Create / new methods
Reduce / Finetune
Saturday, July 13, 13
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
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 / Typography
Layout / Composition
Contrast / Intensity
Visual Story / Theme
Palette / Clarity
Saturday, July 13, 13
Create Your Story
Saturday, July 13, 13
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
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

Contenu connexe

En vedette

Bolzoni 360 Rotator Model RC
Bolzoni 360 Rotator Model RCBolzoni 360 Rotator Model RC
Bolzoni 360 Rotator Model RCBrian_Garner
 
Donetsk Twitter
Donetsk TwitterDonetsk Twitter
Donetsk Twitterdudarev
 
Functional Programming in Python
Functional Programming in PythonFunctional Programming in Python
Functional Programming in Pythondudarev
 
Who are we?
Who are we?Who are we?
Who are we?dudarev
 
Presentatie Xbiv5 1 0 Slide Share
Presentatie Xbiv5 1 0 Slide SharePresentatie Xbiv5 1 0 Slide Share
Presentatie Xbiv5 1 0 Slide ShareSvenConvenso
 
Refactor Yourself with Balalaika
Refactor Yourself with BalalaikaRefactor Yourself with Balalaika
Refactor Yourself with Balalaikadudarev
 
Presentatie Xbiv5 1 0 Slide Share
Presentatie Xbiv5 1 0 Slide SharePresentatie Xbiv5 1 0 Slide Share
Presentatie Xbiv5 1 0 Slide ShareSvenConvenso
 
Carton Clamp Model KS-Z
Carton Clamp Model KS-ZCarton Clamp Model KS-Z
Carton Clamp Model KS-ZBrian_Garner
 
360 Degree Rotating Paper Roll Clamps
360 Degree Rotating Paper Roll Clamps360 Degree Rotating Paper Roll Clamps
360 Degree Rotating Paper Roll ClampsBrian_Garner
 
Bolzoni Auramo Push Pulls 2010
Bolzoni Auramo Push Pulls 2010Bolzoni Auramo Push Pulls 2010
Bolzoni Auramo Push Pulls 2010Brian_Garner
 
Fork Presentation 01 2010
Fork Presentation 01 2010Fork Presentation 01 2010
Fork Presentation 01 2010Brian_Garner
 
Operator Training Paper Roll Handling General
Operator Training Paper Roll Handling GeneralOperator Training Paper Roll Handling General
Operator Training Paper Roll Handling GeneralBrian_Garner
 
Forcematic-Clamp Pressure Control
Forcematic-Clamp Pressure ControlForcematic-Clamp Pressure Control
Forcematic-Clamp Pressure ControlBrian_Garner
 

En vedette (16)

Bolzoni 360 Rotator Model RC
Bolzoni 360 Rotator Model RCBolzoni 360 Rotator Model RC
Bolzoni 360 Rotator Model RC
 
Donetsk Twitter
Donetsk TwitterDonetsk Twitter
Donetsk Twitter
 
Functional Programming in Python
Functional Programming in PythonFunctional Programming in Python
Functional Programming in Python
 
Prodinzova
ProdinzovaProdinzova
Prodinzova
 
Rat Pack
Rat PackRat Pack
Rat Pack
 
Who are we?
Who are we?Who are we?
Who are we?
 
Presentatie Xbiv5 1 0 Slide Share
Presentatie Xbiv5 1 0 Slide SharePresentatie Xbiv5 1 0 Slide Share
Presentatie Xbiv5 1 0 Slide Share
 
Refactor Yourself with Balalaika
Refactor Yourself with BalalaikaRefactor Yourself with Balalaika
Refactor Yourself with Balalaika
 
Presentatie Xbiv5 1 0 Slide Share
Presentatie Xbiv5 1 0 Slide SharePresentatie Xbiv5 1 0 Slide Share
Presentatie Xbiv5 1 0 Slide Share
 
Carton Clamp Model KS-Z
Carton Clamp Model KS-ZCarton Clamp Model KS-Z
Carton Clamp Model KS-Z
 
360 Degree Rotating Paper Roll Clamps
360 Degree Rotating Paper Roll Clamps360 Degree Rotating Paper Roll Clamps
360 Degree Rotating Paper Roll Clamps
 
Bolzoni Auramo Push Pulls 2010
Bolzoni Auramo Push Pulls 2010Bolzoni Auramo Push Pulls 2010
Bolzoni Auramo Push Pulls 2010
 
About playdocja
About playdocjaAbout playdocja
About playdocja
 
Fork Presentation 01 2010
Fork Presentation 01 2010Fork Presentation 01 2010
Fork Presentation 01 2010
 
Operator Training Paper Roll Handling General
Operator Training Paper Roll Handling GeneralOperator Training Paper Roll Handling General
Operator Training Paper Roll Handling General
 
Forcematic-Clamp Pressure Control
Forcematic-Clamp Pressure ControlForcematic-Clamp Pressure Control
Forcematic-Clamp Pressure Control
 

Similaire à Visualizing user experience

Advanced business models i catapult
Advanced business models   i catapultAdvanced business models   i catapult
Advanced business models i catapultFounder-Centric
 
The Future is Responsive
The Future is ResponsiveThe Future is Responsive
The Future is ResponsiveJonathan Smiley
 
Mobile vs Desktop
Mobile vs DesktopMobile vs Desktop
Mobile vs DesktopC.T.Co
 
ThoughtWorks Quarterly Technology Briefing June 2013, Berlin
ThoughtWorks Quarterly Technology Briefing June 2013, BerlinThoughtWorks Quarterly Technology Briefing June 2013, Berlin
ThoughtWorks Quarterly Technology Briefing June 2013, BerlinThoughtworks
 
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3NAVER D2
 
Ruby como-lenguaje-de-programacion
Ruby como-lenguaje-de-programacionRuby como-lenguaje-de-programacion
Ruby como-lenguaje-de-programacionEmmanuel Delgado
 
The Seneca Pattern at EngineYard Distill 2013 Conference
The Seneca Pattern at EngineYard Distill 2013 ConferenceThe Seneca Pattern at EngineYard Distill 2013 Conference
The Seneca Pattern at EngineYard Distill 2013 ConferenceRichard Rodger
 
Building Scalable, Resilient Infrastructure on CloudStack by Sebastian Stadil
Building Scalable, Resilient Infrastructure on CloudStack by Sebastian StadilBuilding Scalable, Resilient Infrastructure on CloudStack by Sebastian Stadil
Building Scalable, Resilient Infrastructure on CloudStack by Sebastian Stadilbuildacloud
 
Windows phone 8 Design
Windows phone 8 DesignWindows phone 8 Design
Windows phone 8 DesignMaria Nasioti
 
Instructional Coaching Technology PD Create It A
Instructional Coaching Technology PD Create It A Instructional Coaching Technology PD Create It A
Instructional Coaching Technology PD Create It A Jennifer Gatz
 
Frontend United: Etching wireframes & agile UX
Frontend United: Etching wireframes & agile UXFrontend United: Etching wireframes & agile UX
Frontend United: Etching wireframes & agile UXWunderkraut
 
Euro Lottery Games Workshop - Creating a Great Mobile Game
Euro Lottery Games Workshop - Creating a Great Mobile GameEuro Lottery Games Workshop - Creating a Great Mobile Game
Euro Lottery Games Workshop - Creating a Great Mobile GamePlayScreen
 
A survey of robotics in Ruby
A survey of robotics in RubyA survey of robotics in Ruby
A survey of robotics in RubyAdam Dill
 
Digital Kids Summit 2013: Joby Otero, Former VP Art and Technology, Activisio...
Digital Kids Summit 2013: Joby Otero, Former VP Art and Technology, Activisio...Digital Kids Summit 2013: Joby Otero, Former VP Art and Technology, Activisio...
Digital Kids Summit 2013: Joby Otero, Former VP Art and Technology, Activisio...engagedigitalkids
 
Intro to Photoshop Basics
Intro to Photoshop BasicsIntro to Photoshop Basics
Intro to Photoshop BasicsJay R
 
UX & Wireframes Know Your Weapon of Choice
UX & Wireframes Know Your Weapon of ChoiceUX & Wireframes Know Your Weapon of Choice
UX & Wireframes Know Your Weapon of ChoiceIntelligent_ly
 

Similaire à Visualizing user experience (20)

Paranoid Android
Paranoid AndroidParanoid Android
Paranoid Android
 
Advanced business models i catapult
Advanced business models   i catapultAdvanced business models   i catapult
Advanced business models i catapult
 
The Future is Responsive
The Future is ResponsiveThe Future is Responsive
The Future is Responsive
 
Mobile vs Desktop
Mobile vs DesktopMobile vs Desktop
Mobile vs Desktop
 
ThoughtWorks Quarterly Technology Briefing June 2013, Berlin
ThoughtWorks Quarterly Technology Briefing June 2013, BerlinThoughtWorks Quarterly Technology Briefing June 2013, Berlin
ThoughtWorks Quarterly Technology Briefing June 2013, Berlin
 
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
 
Ruby como-lenguaje-de-programacion
Ruby como-lenguaje-de-programacionRuby como-lenguaje-de-programacion
Ruby como-lenguaje-de-programacion
 
The Seneca Pattern at EngineYard Distill 2013 Conference
The Seneca Pattern at EngineYard Distill 2013 ConferenceThe Seneca Pattern at EngineYard Distill 2013 Conference
The Seneca Pattern at EngineYard Distill 2013 Conference
 
Building Scalable, Resilient Infrastructure on CloudStack by Sebastian Stadil
Building Scalable, Resilient Infrastructure on CloudStack by Sebastian StadilBuilding Scalable, Resilient Infrastructure on CloudStack by Sebastian Stadil
Building Scalable, Resilient Infrastructure on CloudStack by Sebastian Stadil
 
Gaming Cultures
Gaming CulturesGaming Cultures
Gaming Cultures
 
Windows phone 8 Design
Windows phone 8 DesignWindows phone 8 Design
Windows phone 8 Design
 
GIS is dead, long live GIS!
GIS is dead, long live GIS!GIS is dead, long live GIS!
GIS is dead, long live GIS!
 
Siglibre english
Siglibre englishSiglibre english
Siglibre english
 
Instructional Coaching Technology PD Create It A
Instructional Coaching Technology PD Create It A Instructional Coaching Technology PD Create It A
Instructional Coaching Technology PD Create It A
 
Frontend United: Etching wireframes & agile UX
Frontend United: Etching wireframes & agile UXFrontend United: Etching wireframes & agile UX
Frontend United: Etching wireframes & agile UX
 
Euro Lottery Games Workshop - Creating a Great Mobile Game
Euro Lottery Games Workshop - Creating a Great Mobile GameEuro Lottery Games Workshop - Creating a Great Mobile Game
Euro Lottery Games Workshop - Creating a Great Mobile Game
 
A survey of robotics in Ruby
A survey of robotics in RubyA survey of robotics in Ruby
A survey of robotics in Ruby
 
Digital Kids Summit 2013: Joby Otero, Former VP Art and Technology, Activisio...
Digital Kids Summit 2013: Joby Otero, Former VP Art and Technology, Activisio...Digital Kids Summit 2013: Joby Otero, Former VP Art and Technology, Activisio...
Digital Kids Summit 2013: Joby Otero, Former VP Art and Technology, Activisio...
 
Intro to Photoshop Basics
Intro to Photoshop BasicsIntro to Photoshop Basics
Intro to Photoshop Basics
 
UX & Wireframes Know Your Weapon of Choice
UX & Wireframes Know Your Weapon of ChoiceUX & Wireframes Know Your Weapon of Choice
UX & Wireframes Know Your Weapon of Choice
 

Dernier

UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 

Dernier (18)

UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 

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
  • 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
  • 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
  • 17. Empathizing with independent artists. Saturday, July 13, 13
  • 20. Creating with simple interactions Saturday, July 13, 13
  • 22. Visual Elements Type / Typography Layout / Composition Contrast / Intensity Visual Story / Theme Palette / Clarity 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
  • 29. Examples of Responsive Grid Design Saturday, July 13, 13
  • 31. Define Key Page-types Login CRUD Dashboard And identify patterns... 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