SlideShare a Scribd company logo
user experience WORKSHOP



                           1
THE “GOOD DESIGN” WORKSHOP



                             2
Chapter 1: introduction



                          3
What exactly is good design?



        Write down your answer




                                 4
INTRODUCTIONS




                5
DIETER RaMS
ON GOOD DESIGN

1   Good design is innovative.
                                                   6   Good design is honest.


2   Good design makes a product useful.
                                                   7   Good design is long-lasting.


3   Good design is aesthetic.
                                                   8   Good design is thorough, down to the last detail.


4   Good design makes a product understandable.
                                                   9   Good design is environmentally-friendly.


5   Good design is unobtrusive.
                                                  10   Good design is minimal.




                                                                                                     6
all we need is good design?

                           Q
        What is the difference between good design
                 and user-centered design?


                           A



                                                     7
The history of ux
          Ergonomics                                                                          User Experience
  1950s




                                                                                      1990s
                                                                                                 iPad



                               Usability
                       1980s




                                       Application
                                           File    Edit View Draw Object

                                                    New

                                                    Open

                                                    Close
                                                  Application
                                                       File   Edit View Draw Object

                                                              New

                                                              Open

                                                              Close




                                                                                                                8
Where to focus?



     Function     Behavior   Emotion




                                       9
why focus on users?

    •	 Users are sophisticated and demanding.
    •	 People expect more than transactions; they
    	want connections.
    •	 The relationship between brands and people
    	 is ever-evolving.




                                                    10
Goal of the workshop

                            ***
    Explore current standards and trends in user experience
     design, the conceptual foundation for these practices,
       and how they create a more gratifying experience
                         for the user.

                            ***

                                                              11
WHY
GOOD...
AND NOT
			GREAT?
            12
Q
Why has current thinking evolved from user-centered
        design to user experience design?


                        A




                                                      13
CHAPTER 2: user experience design




                                    14
User Experience
    What it is




                  15
User Experience
   What it is Not




                    16
Step 1: capture
•	 Functionality
•	 Content
•	 Design


Step 2: ENGAGE
step 3: CONVERT


                   17
Step 1: capture
Step 2: engage
•	 If a customers engages with your brand and the reward is clear, they 		
	 will tune in.


step 3: convert



                                                                             18
Step 1: capture
Step 2: engage
step 3: convert
•	 UX is successful when it conveys the brand’s purpose, engages the user’s 		
	 emotion, and influences behavior.




                                                                                 19
user experience: 10 principles
    1               2                 3                   4                 5
  Stay out of       Limit      Create a hierarchy    Provide a strong   Design flows
 people’s way   distractions      that matches      information scent
                                 people’s needs




                                                                                       20
6    Provide context
     with cues and
     signposts




7    Makes actions reversible




8    Use constraints appropriately




9    Provide feedback




10   Make a good first impression
                                     21
A word on e-commerce sites
•	 Results are quantifiable.
•	 Designs tend to be results-oriented.
•	 There is less motivation to innovate.
•	 It is easy to fall into the trap of focusing only on numbers.
•	 Traditionally, metrics like page views, bounce rates, and 				
	 conversion rates are not enough to measure user experience.




                                                                    22
DO NOT FOCUS ON
EXECUTING AN IDEA...




                       23
FOCUS ON
EVOKING A SENSATION AND
   DESIGNING AN
       OUTCOME.


                          24
25
Chapter 3: a focus on users



                              26
A SHIFT IN PERSPECTIVE

                 Let’s think about...




                      thinking.
                                        27
Theory of “mindtime”
how it works
We have thoughts that address the past, present, and future:


             PAST: A record of successes and failures, the standard
             established to define truth

             PRESENT: Trends, assets, resources. Involves
             monitoring the environment to make plans to
             move forward

             FUTURE: New possibilities, exploration, adaptation,
             scanning ahead


                                                                      28
our application of “mindtime”
•	 People come to a site with a purpose,
   rooted in a particular mindset.
•	   Understanding how the user’s 				
	    thoughts are oriented (past, present, 		
	    or future) can help you engage them 	
	    with a meaningful experience.
•	 Understanding the user’s mindset is 	
	 critical to user-centered design.




                                                29
What is a persona?




                     30
Elements of personas

   DEMOGRAPHICS   PRIMARY GOALS        ROLES




    EXPERIENCE    ORGANIZATIONAL      MINDSET
                    ATTRIBUTES     OR MOTIVATION




                                                   31
User experience design
parallels to dating
1st impression                  branding, visuals

         engage                 navigation, content

           relate               interaction, flow

        connect                 content

           close*               conversion

*or stay on her mind so that she will call/is open to a relationship



                                                                       32
user experience design
Points to evaluate
Appearance: How does it look?

Interaction: How do I access it?

Information: What is it?

Structure: How is it presented?

Conceptual Model: Does it make sense to me?

Value: Does it matter to me?

                                              33
Activity
1.	 Identify a persona
  	




2.	 Define a customer journey




                                34
Chapter 5: interaction design



                                35
introduction
As defined by the Interaction Design Association:


“Interaction Design (IxD) defines the structure and
 behavior of interactive systems. Interaction Designers
 strive to create meaningful relationships between
 people and the products and services that they use,
 from computers to mobile devices to appliances and
 beyond. Our practices are evolving with the world;
 join the conversation.”




                                                          36
The main question


        How can we use
        psychology to create
        fun, engaging and effective
        interactions with customers?




                                       37
The activities of interaction design
•	 Gather & Define Requirements
•	 Create Scenarios
•	 Structure the Framework
•	 Design the Solutions
•	 Evaluate
•	 Refine




                                       38
site maps
•	 Identify the structure of websites
•	 Simplicity comes from structure
•	 GOAL: To help people understand where they can locate content



                     HOME




                                 SUB     SUB     SUB     SUB
                                TOPIC   TOPIC   TOPIC   TOPIC




                                                                   39
site map structure types
                        Linear structure




            •	No active user intervention possible
            •	Each item of information built on others




                                                         40
site map structure types
                             Tree structure




           Users reach various subsidiary pages from the homepage.
           •	The branches offer various navigation possibilities
           •	Logical structure (hierarchical structure)


                                                                     41
site map structure types
                   Single frame structure




           •	Experienced as a single page by users
           •	No hierarchies

                                                     42
site map structure types
                   Jump-line structure




            •	Linear screen arrangement
            •	User can reach any page from the homepage
            •	Little interactivity


                                                          43
task flows
•	 Take site maps further by identifying the actions that users can 		
	 take within a section of the site.
•	 Draw connections to error states.


                                         Sign In


                             Did user provide valid credentials?



                    Error Screen    No               Yes
                                                             Signed In
                                                               View



                                                                         44
swimlanes
•	 Align and integrate task flow with business processes, 	 	 	 	 	
	 technical requirements, and online/offline dependencies.
               TASK FLOW
               BUSINESS ANALYST
               TECHNICAL




                                                                      45
wireframes
             •	 Show the layout of an interface 			
             	screen.
             •	 Describe each element and behavior.
             •	 Focus on layout, labels, and 					
             	interactions.
             •	 Avoid finished design elements such 	
                as color and photos, instead use      	
                placeholders for copy and images.



                                                      46
interaction design: Prototypes
•	 Mimic the functionality of a website
•	 Iterative
•	 Getting buy-in
•	 Can be used to evaluate with users
•	 It is part of a process, not an artifact




                                              47
The tools
  •	 Microsoft Visio
  •	 Balsamiq
  •	 Axure
  •	 OmniGraffle
  •	 Adobe InDesign
  •	 Adobe Illustrator
  •	 Keynote or PowerPoint



                             48
navigation
Users should always know where they are, where they came from,
how to get back, and where to go next.




                                                                 49
Important questions for navigation

What is the purpose of the site?
What actions can the user perform on the site?
Do they understand how to get there?
Will the user’s goals be met?




                                                 50
Navigation design: 10 principles

1   Let users know where they are	
                                              6   Stay consistent


2   Let users know where they were
                                              7   Follow web conventions


3   Let users know where they are going
                                              8   Do not surprise or mislead the user


4   Make it easy to get there
                                              9   Provide users with support and feedback


5   Provide the correct navigation options
                                             10   Give users an “out”




                                                                                            51
buttons
•	Buttons serve the purpose of getting the user to perform an action.

•	An effective call to action:
       •	 Draws the user’s attention by being a larger size in comparison to surrounding elements.
       •	 Is positioned prominently on the page.
       •	 Is set apart with ample whitespace.
       •	 Is usually a contrasting color.
       •	 Offers a secondary, alternative action (Sign Up Now or Take A Tour.)




		

		

		
                                                                                                     52
buttons




          53
tabs
•	Buttons that are usually aligned side-by-side horizontally

•	Distinguished by the fact that they are connected to a larger container

•	Websites started using tabs for navigation purposes (Amazon, 1998)

•	Excellent metaphors of real-life file tabs

•	Improve content organization

•	Visually pleasing




                                                                            54
WHEN TO USE TABS
•	Grouping related information

•	Information that does not need to be compared or accessed simultaneously

•	Terse content		




                                                                             55
TAB GUideLineS
•	Tabs must look and behave like tabs.

•	Place navigation at the top of the page.

•	Only have one row of tabs.

•	Always have one of the tabs pre-selected.

•	Clearly indicate which tab is currently active
 and which tabs are currently inactive.

•	The active tab should appear connected to
 the content area.

		

		                                                 56
TAB GUideLineS
•	Consider grouping related tabs.

•	Arrange tab labels in an order that makes
 sense for your users.

•	Use title style capitalization.

•	Tab labels should be only one-to-two words
 and written in plain language.

•	Ensure fast response time.

•	Do not use tabs to replace breadcrumbs.



                                               57
forms
•	Forms have undergone a similar evolution to shopping carts.

•	Originally, each field was filled out manually.

•	Now, there auto-fill pulls your information from other sites and
 browser history.




                                                                     58
a successful form
•	Indicates the user’s progress when multiple pages are involved.

•	Asks only for information that is necessary (no marketing questions.)

•	Keeps the fields simple, direct, and easy to read.

•	Confirms the submission of the form.




                                                                          59
errors
•	Traditionally, errors were pointed out using red text or a dialog box.

•	Today, the best error recovery indicators use alternatives to text.

•	Consider human-to-human interactions and other types of language that a user
 can understand beyond text alone.




                                                                                 60
mobile
 •	 People use their mobile devices to enhance productivity, 			
 	 comfort, and pleasure, everywhere and at anytime
 •	 Mobile applications need to focus on a core utility; content
 	 must be relevant in the context that it is being used (on the
 	go.)
 •	 They need to be fast and reliable in order to be valuable in 		
 	 those environments.




                                                                      61
What percentage of smartphone owners use
their devices to check prices in stores?




                                           62
63
“If you haven’t used your mobile phone to initiate some kind of financial transac-
tion, then you better get on board because it is quickly becoming the fastest-grow-
ing segment in the consumer financial world. According to IDC Financial Insights, the
number of consumers using their smartphones to complete online or offline transac-
tions has doubled as of May 2012.

About 37 percent of consumers said they plan to compare prices on their mobile de-
vices while at brick-and-mortar stores, according to PriceGrabber.com.”

-Bloomberg, July 2012.




                                                                                        64
When planning an app:

What should our app do?
Why?

What should our app do differently from its competitors?
What should our app do better than its competitors?




                                                           65
define ui brand signatures
 •	 Each user interaction should reflect the story of the brand.
 •	 Features, visuals, wording, fonts, and animations make a difference.


 i.	Differentiate
 ii.	 Represent key functions
 iii.	Set the pattern of the design language




                                                                           66
OPTIMIZE FLOWS AND UI ELEMENTS
 •	 Users will not wait.
 •	 “Every millisecond counts.” -Google




                                          67
balance:
functionality
aesthetics
usability
performance



                68
touch points
   DO:                 DON’T:

   Bigger the better   Switch from fingerpad
                       to fingertip
   Limited options
                       Group targets near
                       each other




                                               69
“Don’t shrink, rethink.”
                NOKIA




                           70
responsive design
•	 The website responds to you, rather than making you deal with it 	
	 (by scrolling or magnifying or whatever-else-ing in order to view 	
	 it comfortably.) -Fast Company




                                                                    71
72
responsive design
•	 Code the website once but allow it to be flexible to fit the device.



              Good news:                    Bad news:


                Coded once                   Many more
                                             wireframes



                                                                          73
74
Fun THeory VIdeos




                    75
REASON OR EMOTION ?




                             76
You can’t make decisions without EMOTions
                                Saver and Damasio (1991)




                                                           77
CAN DO						 WILL DO




                              78
79
excitement




             80
social




         81
love




       82
effort




         83
why did you join facebook?




                             84
85
PERSUASIVE design
There are seven main methods in the persuasive design “arsenal”:

1	 Reciprocation - “I like to return favors.”

2	 Commitment - “I like to do what I say.”

3	 Social Proof - “I go with the flow.”

4	 Authority - “I’m more likely to act on information if it’s told by an expert.”

5	 Scarcity - “If it’s running out, I want it.”

6	 Framing - “I’m influenced by the way prices are framed.”

7	 Salience - “I care about what’s relevant to me right now.”



                                                                                    86
The evolution of the shoppinG cart
•	 The user flow from product page to order 	
	 submission has evolved over time.
•	 Originally, it was a long process: 		
	   Add to Cart > Checkout > Register/Sign In >
	   Enter Billing/Shipping Info > Submit Order

•	 Today, there is 1-Click Checkout, 	 			
	 paying through PayPal, having one shopping 	
	 cart from multiple stores (or sellers, like on 	
	eBay.)




                                                     87
today’s shopping cart
•	 The online shopping cart is more flexible than its physical counterpart.

•	 Improvements come about from thinking outside the box.




                               THINK OUTSIDE THE BOX




                                                                              88
successful shopping cart traits
•	Welcomes users by name.

•	Points out that an item has been added (immediate feedback.)

•	Links back to the original product.

•	Gives users the option to keep shopping and brings users back to the
 same place on the page.

•	Estimates the total cost (plus shipping and discounts based on zipcode.)

•	Allows for easy quantity edits/removal.




                                                                             89
successful shopping cart traits
•	Saves items in cart across multiple sessions and windows.

•	Saves items in cart for adequate time periods.

•	Allows people to buy without registering.

•	Allows to save for later.

•	Can put on waitlist if out of stock.

•	Get e-mail notification or auto-purchase if out of stock.




                                                              90
CHECKOUT PROCESS
•	 Does not have sub-pages or flows (e.g., referred shipping address, create an 	
	   account.) It is a linear process.

•	 Provides the opportunity to gift wrap or include a personal message.

•	 Moves forward to the next step.

•	 Visualizes journey/show progress.

•	 Steers clear of ambiguous language such as back, next, proceed (e.g.,continue 	
	   could mean “continue shopping” or “continue checkout” depending on state of 	
	   mind of shopper.)




                                                                                    91
BROWSING




           92
Outfit Builders




                  93
94
Multiple Views




                 95
what are GREAT INTERACTIONS
IN E-COMMERCE?


                              96
LIVE FEEDS




             97
98
SHOPPABLE MEDIA




                  99
100
EXPERTS’ PICKS




                 101
DIRECT CONTacT




                 102
CUSTOMIZED EXPERIENCES




                         103
pop quiz
                           Q
       What is the difference between navigation and
                  information architecture?


                            A



                                                       104
CLOSING



          105

More Related Content

What's hot

Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
Koombea
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
Murali Krishna
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
Vibloo
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
Peeyush Sahu CAPM®
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
Maksym Babych
 
UI/UX Workshop - Hackvision
UI/UX Workshop - HackvisionUI/UX Workshop - Hackvision
UI/UX Workshop - Hackvision
Prottay Karim
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
Shrestha Raaz
 
Ux design process
Ux design processUx design process
Ux design process
Junying Chang
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
GDGKuwaitGoogleDevel
 
Good UX Bad UX
Good UX Bad UXGood UX Bad UX
Good UX Bad UX
Michał Aleksander
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
DMI
 
UX Workshop
UX WorkshopUX Workshop
UX Workshop
Angela Park
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
Inova LLC
 
UX design
UX designUX design
UX design
Tanay Kumar
 
What is UX?
What is UX?What is UX?
What is UX?
David Carr
 
UI/UX - The Bigger Picture
UI/UX - The Bigger PictureUI/UX - The Bigger Picture
UI/UX - The Bigger Picture
Mayank Lambhate
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
Joan Lumanauw
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
Shrutee Aneja
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & design
Morgan McKeagney
 
User interface design
User interface designUser interface design
User interface design
Oleksii Leonov
 

What's hot (20)

Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
 
UI/UX Workshop - Hackvision
UI/UX Workshop - HackvisionUI/UX Workshop - Hackvision
UI/UX Workshop - Hackvision
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
Ux design process
Ux design processUx design process
Ux design process
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
 
Good UX Bad UX
Good UX Bad UXGood UX Bad UX
Good UX Bad UX
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
 
UX Workshop
UX WorkshopUX Workshop
UX Workshop
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
UX design
UX designUX design
UX design
 
What is UX?
What is UX?What is UX?
What is UX?
 
UI/UX - The Bigger Picture
UI/UX - The Bigger PictureUI/UX - The Bigger Picture
UI/UX - The Bigger Picture
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & design
 
User interface design
User interface designUser interface design
User interface design
 

Similar to User Experience Workshop

50 UX Best Practices (By Above the Fold)
50 UX Best Practices (By Above the Fold)50 UX Best Practices (By Above the Fold)
50 UX Best Practices (By Above the Fold)
Cristiano Caetano
 
How to Overhaul Your Design Without Upsetting Your Users
How to Overhaul Your Design Without Upsetting Your Users How to Overhaul Your Design Without Upsetting Your Users
How to Overhaul Your Design Without Upsetting Your Users
Mary Piontkowski
 
Multi-dimensional: Building 21st Century Experiences for Financial Outcomes
Multi-dimensional:  Building 21st Century Experiences for Financial Outcomes Multi-dimensional:  Building 21st Century Experiences for Financial Outcomes
Multi-dimensional: Building 21st Century Experiences for Financial Outcomes
Harriet Wakelam
 
Setting Course: Design Research to Experience Roadmap
Setting Course: Design Research to Experience RoadmapSetting Course: Design Research to Experience Roadmap
Setting Course: Design Research to Experience Roadmap
Jason Ulaszek
 
UofC Digital Marketing Lecture 3
UofC Digital Marketing Lecture 3UofC Digital Marketing Lecture 3
UofC Digital Marketing Lecture 3
John Hutchings
 
How design decisions affect user performance
How design decisions affect user performanceHow design decisions affect user performance
How design decisions affect user performance
Rachna Mittal
 
Introduction into User Experience
Introduction into User ExperienceIntroduction into User Experience
Introduction into User Experience
Abdullah Al Nady
 
Web Usability and Conversion
Web Usability and ConversionWeb Usability and Conversion
Web Usability and Conversion
Paul Sherman
 
Portfolio Pitch
Portfolio PitchPortfolio Pitch
Portfolio Pitch
Vinay Mohanty
 
UxD For Product Managers (Heroes)
UxD For Product Managers (Heroes)UxD For Product Managers (Heroes)
UxD For Product Managers (Heroes)
Mary Piontkowski
 
UofC Digital Marketing Lecture 3
UofC Digital Marketing Lecture 3 UofC Digital Marketing Lecture 3
UofC Digital Marketing Lecture 3
JOHN Hutchings
 
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
Josh Levine
 
Pull | Experience Design
Pull | Experience DesignPull | Experience Design
Pull | Experience Design
David Moskovic
 
Web Usability: Making Your Sites More Awesomer
Web Usability: Making Your Sites More AwesomerWeb Usability: Making Your Sites More Awesomer
Web Usability: Making Your Sites More Awesomer
Jennifer Riehle McFarland
 
Digital Process
Digital ProcessDigital Process
Digital Process
Crista Conaty
 
Wud2008 Experiencability
Wud2008 ExperiencabilityWud2008 Experiencability
Wud2008 Experiencability
JIM COUCH
 
App Development: Beginning with the end-user in mind
App Development: Beginning with the end-user in mindApp Development: Beginning with the end-user in mind
App Development: Beginning with the end-user in mind
Femi Longe
 
PxS’12 - week 4 - UX design techniques
PxS’12 - week 4 - UX design techniquesPxS’12 - week 4 - UX design techniques
PxS’12 - week 4 - UX design techniques
hendrikknoche
 
Content Strategy for the Web
Content Strategy for the WebContent Strategy for the Web
Content Strategy for the Web
Karen McGrane
 
Refining & Designing Your Website
Refining & Designing Your  WebsiteRefining & Designing Your  Website
Refining & Designing Your Website
Michael Rawlins
 

Similar to User Experience Workshop (20)

50 UX Best Practices (By Above the Fold)
50 UX Best Practices (By Above the Fold)50 UX Best Practices (By Above the Fold)
50 UX Best Practices (By Above the Fold)
 
How to Overhaul Your Design Without Upsetting Your Users
How to Overhaul Your Design Without Upsetting Your Users How to Overhaul Your Design Without Upsetting Your Users
How to Overhaul Your Design Without Upsetting Your Users
 
Multi-dimensional: Building 21st Century Experiences for Financial Outcomes
Multi-dimensional:  Building 21st Century Experiences for Financial Outcomes Multi-dimensional:  Building 21st Century Experiences for Financial Outcomes
Multi-dimensional: Building 21st Century Experiences for Financial Outcomes
 
Setting Course: Design Research to Experience Roadmap
Setting Course: Design Research to Experience RoadmapSetting Course: Design Research to Experience Roadmap
Setting Course: Design Research to Experience Roadmap
 
UofC Digital Marketing Lecture 3
UofC Digital Marketing Lecture 3UofC Digital Marketing Lecture 3
UofC Digital Marketing Lecture 3
 
How design decisions affect user performance
How design decisions affect user performanceHow design decisions affect user performance
How design decisions affect user performance
 
Introduction into User Experience
Introduction into User ExperienceIntroduction into User Experience
Introduction into User Experience
 
Web Usability and Conversion
Web Usability and ConversionWeb Usability and Conversion
Web Usability and Conversion
 
Portfolio Pitch
Portfolio PitchPortfolio Pitch
Portfolio Pitch
 
UxD For Product Managers (Heroes)
UxD For Product Managers (Heroes)UxD For Product Managers (Heroes)
UxD For Product Managers (Heroes)
 
UofC Digital Marketing Lecture 3
UofC Digital Marketing Lecture 3 UofC Digital Marketing Lecture 3
UofC Digital Marketing Lecture 3
 
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
 
Pull | Experience Design
Pull | Experience DesignPull | Experience Design
Pull | Experience Design
 
Web Usability: Making Your Sites More Awesomer
Web Usability: Making Your Sites More AwesomerWeb Usability: Making Your Sites More Awesomer
Web Usability: Making Your Sites More Awesomer
 
Digital Process
Digital ProcessDigital Process
Digital Process
 
Wud2008 Experiencability
Wud2008 ExperiencabilityWud2008 Experiencability
Wud2008 Experiencability
 
App Development: Beginning with the end-user in mind
App Development: Beginning with the end-user in mindApp Development: Beginning with the end-user in mind
App Development: Beginning with the end-user in mind
 
PxS’12 - week 4 - UX design techniques
PxS’12 - week 4 - UX design techniquesPxS’12 - week 4 - UX design techniques
PxS’12 - week 4 - UX design techniques
 
Content Strategy for the Web
Content Strategy for the WebContent Strategy for the Web
Content Strategy for the Web
 
Refining & Designing Your Website
Refining & Designing Your  WebsiteRefining & Designing Your  Website
Refining & Designing Your Website
 

More from Motivate Design

Why Can't You Get What You Want At Work? - HOW Design Live 2016
Why Can't You Get What You Want At Work? - HOW Design Live 2016Why Can't You Get What You Want At Work? - HOW Design Live 2016
Why Can't You Get What You Want At Work? - HOW Design Live 2016
Motivate Design
 
Lessons From An Entrepreneur: UX Growth
Lessons From An Entrepreneur: UX GrowthLessons From An Entrepreneur: UX Growth
Lessons From An Entrepreneur: UX Growth
Motivate Design
 
How To Be A Successful Entrepreneur
How To Be A Successful Entrepreneur How To Be A Successful Entrepreneur
How To Be A Successful Entrepreneur
Motivate Design
 
TEDxNewBedford - See Problems as Opportunities
TEDxNewBedford - See Problems as OpportunitiesTEDxNewBedford - See Problems as Opportunities
TEDxNewBedford - See Problems as Opportunities
Motivate Design
 
Designers Are From Mars, Engineers Are From Venus
Designers Are From Mars, Engineers Are From VenusDesigners Are From Mars, Engineers Are From Venus
Designers Are From Mars, Engineers Are From Venus
Motivate Design
 
UXPA Boston 2015 | Discussion Guides Presentation
UXPA Boston 2015 | Discussion Guides PresentationUXPA Boston 2015 | Discussion Guides Presentation
UXPA Boston 2015 | Discussion Guides Presentation
Motivate Design
 
Selling Your Great Idea
Selling Your Great Idea Selling Your Great Idea
Selling Your Great Idea
Motivate Design
 
Excuses, Excuses, Excuse Personas
Excuses, Excuses, Excuse PersonasExcuses, Excuses, Excuse Personas
Excuses, Excuses, Excuse Personas
Motivate Design
 
The What If Technique presented by Motivate Design
The What If Technique presented by Motivate DesignThe What If Technique presented by Motivate Design
The What If Technique presented by Motivate Design
Motivate Design
 
An Introduction to Ethnography
An Introduction to EthnographyAn Introduction to Ethnography
An Introduction to Ethnography
Motivate Design
 
Designing Fresh Experiences
Designing Fresh ExperiencesDesigning Fresh Experiences
Designing Fresh Experiences
Motivate Design
 
Disrupt and Become Indispensable
Disrupt and Become IndispensableDisrupt and Become Indispensable
Disrupt and Become Indispensable
Motivate Design
 
Web Design Rules for B2B UX
Web Design Rules for B2B UXWeb Design Rules for B2B UX
Web Design Rules for B2B UX
Motivate Design
 
The Future of Personas
The Future of PersonasThe Future of Personas
The Future of Personas
Motivate Design
 
IGNITE@UxPA2012- The Y-Factor: How a 20-something can be a UX leader
IGNITE@UxPA2012- The Y-Factor: How a 20-something can be a UX leaderIGNITE@UxPA2012- The Y-Factor: How a 20-something can be a UX leader
IGNITE@UxPA2012- The Y-Factor: How a 20-something can be a UX leader
Motivate Design
 

More from Motivate Design (15)

Why Can't You Get What You Want At Work? - HOW Design Live 2016
Why Can't You Get What You Want At Work? - HOW Design Live 2016Why Can't You Get What You Want At Work? - HOW Design Live 2016
Why Can't You Get What You Want At Work? - HOW Design Live 2016
 
Lessons From An Entrepreneur: UX Growth
Lessons From An Entrepreneur: UX GrowthLessons From An Entrepreneur: UX Growth
Lessons From An Entrepreneur: UX Growth
 
How To Be A Successful Entrepreneur
How To Be A Successful Entrepreneur How To Be A Successful Entrepreneur
How To Be A Successful Entrepreneur
 
TEDxNewBedford - See Problems as Opportunities
TEDxNewBedford - See Problems as OpportunitiesTEDxNewBedford - See Problems as Opportunities
TEDxNewBedford - See Problems as Opportunities
 
Designers Are From Mars, Engineers Are From Venus
Designers Are From Mars, Engineers Are From VenusDesigners Are From Mars, Engineers Are From Venus
Designers Are From Mars, Engineers Are From Venus
 
UXPA Boston 2015 | Discussion Guides Presentation
UXPA Boston 2015 | Discussion Guides PresentationUXPA Boston 2015 | Discussion Guides Presentation
UXPA Boston 2015 | Discussion Guides Presentation
 
Selling Your Great Idea
Selling Your Great Idea Selling Your Great Idea
Selling Your Great Idea
 
Excuses, Excuses, Excuse Personas
Excuses, Excuses, Excuse PersonasExcuses, Excuses, Excuse Personas
Excuses, Excuses, Excuse Personas
 
The What If Technique presented by Motivate Design
The What If Technique presented by Motivate DesignThe What If Technique presented by Motivate Design
The What If Technique presented by Motivate Design
 
An Introduction to Ethnography
An Introduction to EthnographyAn Introduction to Ethnography
An Introduction to Ethnography
 
Designing Fresh Experiences
Designing Fresh ExperiencesDesigning Fresh Experiences
Designing Fresh Experiences
 
Disrupt and Become Indispensable
Disrupt and Become IndispensableDisrupt and Become Indispensable
Disrupt and Become Indispensable
 
Web Design Rules for B2B UX
Web Design Rules for B2B UXWeb Design Rules for B2B UX
Web Design Rules for B2B UX
 
The Future of Personas
The Future of PersonasThe Future of Personas
The Future of Personas
 
IGNITE@UxPA2012- The Y-Factor: How a 20-something can be a UX leader
IGNITE@UxPA2012- The Y-Factor: How a 20-something can be a UX leaderIGNITE@UxPA2012- The Y-Factor: How a 20-something can be a UX leader
IGNITE@UxPA2012- The Y-Factor: How a 20-something can be a UX leader
 

Recently uploaded

Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
sexytaniya455
 
How to Choose the Perfect Exterior Paint Colors for Your Home.pptx
How to Choose the Perfect Exterior Paint Colors for Your Home.pptxHow to Choose the Perfect Exterior Paint Colors for Your Home.pptx
How to Choose the Perfect Exterior Paint Colors for Your Home.pptx
Anit Kapoor
 
Enemy Encounter Standards for Hogwarts Legacy
Enemy Encounter Standards for Hogwarts LegacyEnemy Encounter Standards for Hogwarts Legacy
Enemy Encounter Standards for Hogwarts Legacy
AidanOKeefe2
 
Vista Fashions Outdoor Awnings Brochure.
Vista Fashions Outdoor Awnings Brochure.Vista Fashions Outdoor Awnings Brochure.
Vista Fashions Outdoor Awnings Brochure.
Vista Fashions
 
Art by Sally Booth Advertising Campaigns
Art by Sally Booth Advertising CampaignsArt by Sally Booth Advertising Campaigns
Art by Sally Booth Advertising Campaigns
vsingram
 
AI or not AI?How to detect ai-gen images.pdf
AI or not AI?How to detect ai-gen images.pdfAI or not AI?How to detect ai-gen images.pdf
AI or not AI?How to detect ai-gen images.pdf
Pixeldarts
 
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
monikaservice00
 
Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
monikaservice00
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
Peclers Paris
 
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdfNeom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Mostafa Abd Elrahman
 
Carleton University degree offer diploma Transcript
Carleton University degree offer diploma TranscriptCarleton University degree offer diploma Transcript
Carleton University degree offer diploma Transcript
eamhs
 
Temple Architecture in India - 9 major styles · UPSCprep.com.pdf
Temple Architecture in India - 9 major styles · UPSCprep.com.pdfTemple Architecture in India - 9 major styles · UPSCprep.com.pdf
Temple Architecture in India - 9 major styles · UPSCprep.com.pdf
taradcunha
 
New PPT Template for operations on field.pptx
New PPT Template for operations on field.pptxNew PPT Template for operations on field.pptx
New PPT Template for operations on field.pptx
hicham benkhelifa
 
Vista Blinds Catalogue Brochure by Vista Fashions
Vista Blinds Catalogue Brochure by Vista FashionsVista Blinds Catalogue Brochure by Vista Fashions
Vista Blinds Catalogue Brochure by Vista Fashions
Vista Fashions
 
Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...
77sayre
 
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
sharonblush
 
GRID integration of Wind energy conversion system
GRID integration of Wind energy conversion systemGRID integration of Wind energy conversion system
GRID integration of Wind energy conversion system
sulabhsachan
 
20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf
20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf
20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf
MojtabaMeghdari
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
sonalibook860
 
Product And Design Portfolio - Hemant Nagwekar 2024
Product And Design Portfolio - Hemant Nagwekar 2024Product And Design Portfolio - Hemant Nagwekar 2024
Product And Design Portfolio - Hemant Nagwekar 2024
Hemant Nagwekar
 

Recently uploaded (20)

Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
 
How to Choose the Perfect Exterior Paint Colors for Your Home.pptx
How to Choose the Perfect Exterior Paint Colors for Your Home.pptxHow to Choose the Perfect Exterior Paint Colors for Your Home.pptx
How to Choose the Perfect Exterior Paint Colors for Your Home.pptx
 
Enemy Encounter Standards for Hogwarts Legacy
Enemy Encounter Standards for Hogwarts LegacyEnemy Encounter Standards for Hogwarts Legacy
Enemy Encounter Standards for Hogwarts Legacy
 
Vista Fashions Outdoor Awnings Brochure.
Vista Fashions Outdoor Awnings Brochure.Vista Fashions Outdoor Awnings Brochure.
Vista Fashions Outdoor Awnings Brochure.
 
Art by Sally Booth Advertising Campaigns
Art by Sally Booth Advertising CampaignsArt by Sally Booth Advertising Campaigns
Art by Sally Booth Advertising Campaigns
 
AI or not AI?How to detect ai-gen images.pdf
AI or not AI?How to detect ai-gen images.pdfAI or not AI?How to detect ai-gen images.pdf
AI or not AI?How to detect ai-gen images.pdf
 
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
 
Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Asian Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
 
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdfNeom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
 
Carleton University degree offer diploma Transcript
Carleton University degree offer diploma TranscriptCarleton University degree offer diploma Transcript
Carleton University degree offer diploma Transcript
 
Temple Architecture in India - 9 major styles · UPSCprep.com.pdf
Temple Architecture in India - 9 major styles · UPSCprep.com.pdfTemple Architecture in India - 9 major styles · UPSCprep.com.pdf
Temple Architecture in India - 9 major styles · UPSCprep.com.pdf
 
New PPT Template for operations on field.pptx
New PPT Template for operations on field.pptxNew PPT Template for operations on field.pptx
New PPT Template for operations on field.pptx
 
Vista Blinds Catalogue Brochure by Vista Fashions
Vista Blinds Catalogue Brochure by Vista FashionsVista Blinds Catalogue Brochure by Vista Fashions
Vista Blinds Catalogue Brochure by Vista Fashions
 
Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...
 
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
 
GRID integration of Wind energy conversion system
GRID integration of Wind energy conversion systemGRID integration of Wind energy conversion system
GRID integration of Wind energy conversion system
 
20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf
20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf
20221013093917796jhhhjjjhbvhfgfgfgfg58.pdf
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
 
Product And Design Portfolio - Hemant Nagwekar 2024
Product And Design Portfolio - Hemant Nagwekar 2024Product And Design Portfolio - Hemant Nagwekar 2024
Product And Design Portfolio - Hemant Nagwekar 2024
 

User Experience Workshop

  • 4. What exactly is good design? Write down your answer 4
  • 6. DIETER RaMS ON GOOD DESIGN 1 Good design is innovative. 6 Good design is honest. 2 Good design makes a product useful. 7 Good design is long-lasting. 3 Good design is aesthetic. 8 Good design is thorough, down to the last detail. 4 Good design makes a product understandable. 9 Good design is environmentally-friendly. 5 Good design is unobtrusive. 10 Good design is minimal. 6
  • 7. all we need is good design? Q What is the difference between good design and user-centered design? A 7
  • 8. The history of ux Ergonomics User Experience 1950s 1990s iPad Usability 1980s Application File Edit View Draw Object New Open Close Application File Edit View Draw Object New Open Close 8
  • 9. Where to focus? Function Behavior Emotion 9
  • 10. why focus on users? • Users are sophisticated and demanding. • People expect more than transactions; they want connections. • The relationship between brands and people is ever-evolving. 10
  • 11. Goal of the workshop *** Explore current standards and trends in user experience design, the conceptual foundation for these practices, and how they create a more gratifying experience for the user. *** 11
  • 13. Q Why has current thinking evolved from user-centered design to user experience design? A 13
  • 14. CHAPTER 2: user experience design 14
  • 15. User Experience What it is 15
  • 16. User Experience What it is Not 16
  • 17. Step 1: capture • Functionality • Content • Design Step 2: ENGAGE step 3: CONVERT 17
  • 18. Step 1: capture Step 2: engage • If a customers engages with your brand and the reward is clear, they will tune in. step 3: convert 18
  • 19. Step 1: capture Step 2: engage step 3: convert • UX is successful when it conveys the brand’s purpose, engages the user’s emotion, and influences behavior. 19
  • 20. user experience: 10 principles 1 2 3 4 5 Stay out of Limit Create a hierarchy Provide a strong Design flows people’s way distractions that matches information scent people’s needs 20
  • 21. 6 Provide context with cues and signposts 7 Makes actions reversible 8 Use constraints appropriately 9 Provide feedback 10 Make a good first impression 21
  • 22. A word on e-commerce sites • Results are quantifiable. • Designs tend to be results-oriented. • There is less motivation to innovate. • It is easy to fall into the trap of focusing only on numbers. • Traditionally, metrics like page views, bounce rates, and conversion rates are not enough to measure user experience. 22
  • 23. DO NOT FOCUS ON EXECUTING AN IDEA... 23
  • 24. FOCUS ON EVOKING A SENSATION AND DESIGNING AN OUTCOME. 24
  • 25. 25
  • 26. Chapter 3: a focus on users 26
  • 27. A SHIFT IN PERSPECTIVE Let’s think about... thinking. 27
  • 28. Theory of “mindtime” how it works We have thoughts that address the past, present, and future: PAST: A record of successes and failures, the standard established to define truth PRESENT: Trends, assets, resources. Involves monitoring the environment to make plans to move forward FUTURE: New possibilities, exploration, adaptation, scanning ahead 28
  • 29. our application of “mindtime” • People come to a site with a purpose, rooted in a particular mindset. • Understanding how the user’s thoughts are oriented (past, present, or future) can help you engage them with a meaningful experience. • Understanding the user’s mindset is critical to user-centered design. 29
  • 30. What is a persona? 30
  • 31. Elements of personas DEMOGRAPHICS PRIMARY GOALS ROLES EXPERIENCE ORGANIZATIONAL MINDSET ATTRIBUTES OR MOTIVATION 31
  • 32. User experience design parallels to dating 1st impression branding, visuals engage navigation, content relate interaction, flow connect content close* conversion *or stay on her mind so that she will call/is open to a relationship 32
  • 33. user experience design Points to evaluate Appearance: How does it look? Interaction: How do I access it? Information: What is it? Structure: How is it presented? Conceptual Model: Does it make sense to me? Value: Does it matter to me? 33
  • 34. Activity 1. Identify a persona 2. Define a customer journey 34
  • 36. introduction As defined by the Interaction Design Association: “Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction Designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond. Our practices are evolving with the world; join the conversation.” 36
  • 37. The main question How can we use psychology to create fun, engaging and effective interactions with customers? 37
  • 38. The activities of interaction design • Gather & Define Requirements • Create Scenarios • Structure the Framework • Design the Solutions • Evaluate • Refine 38
  • 39. site maps • Identify the structure of websites • Simplicity comes from structure • GOAL: To help people understand where they can locate content HOME SUB SUB SUB SUB TOPIC TOPIC TOPIC TOPIC 39
  • 40. site map structure types Linear structure • No active user intervention possible • Each item of information built on others 40
  • 41. site map structure types Tree structure Users reach various subsidiary pages from the homepage. • The branches offer various navigation possibilities • Logical structure (hierarchical structure) 41
  • 42. site map structure types Single frame structure • Experienced as a single page by users • No hierarchies 42
  • 43. site map structure types Jump-line structure • Linear screen arrangement • User can reach any page from the homepage • Little interactivity 43
  • 44. task flows • Take site maps further by identifying the actions that users can take within a section of the site. • Draw connections to error states. Sign In Did user provide valid credentials? Error Screen No Yes Signed In View 44
  • 45. swimlanes • Align and integrate task flow with business processes, technical requirements, and online/offline dependencies. TASK FLOW BUSINESS ANALYST TECHNICAL 45
  • 46. wireframes • Show the layout of an interface screen. • Describe each element and behavior. • Focus on layout, labels, and interactions. • Avoid finished design elements such as color and photos, instead use placeholders for copy and images. 46
  • 47. interaction design: Prototypes • Mimic the functionality of a website • Iterative • Getting buy-in • Can be used to evaluate with users • It is part of a process, not an artifact 47
  • 48. The tools • Microsoft Visio • Balsamiq • Axure • OmniGraffle • Adobe InDesign • Adobe Illustrator • Keynote or PowerPoint 48
  • 49. navigation Users should always know where they are, where they came from, how to get back, and where to go next. 49
  • 50. Important questions for navigation What is the purpose of the site? What actions can the user perform on the site? Do they understand how to get there? Will the user’s goals be met? 50
  • 51. Navigation design: 10 principles 1 Let users know where they are 6 Stay consistent 2 Let users know where they were 7 Follow web conventions 3 Let users know where they are going 8 Do not surprise or mislead the user 4 Make it easy to get there 9 Provide users with support and feedback 5 Provide the correct navigation options 10 Give users an “out” 51
  • 52. buttons • Buttons serve the purpose of getting the user to perform an action. • An effective call to action: • Draws the user’s attention by being a larger size in comparison to surrounding elements. • Is positioned prominently on the page. • Is set apart with ample whitespace. • Is usually a contrasting color. • Offers a secondary, alternative action (Sign Up Now or Take A Tour.) 52
  • 53. buttons 53
  • 54. tabs • Buttons that are usually aligned side-by-side horizontally • Distinguished by the fact that they are connected to a larger container • Websites started using tabs for navigation purposes (Amazon, 1998) • Excellent metaphors of real-life file tabs • Improve content organization • Visually pleasing 54
  • 55. WHEN TO USE TABS • Grouping related information • Information that does not need to be compared or accessed simultaneously • Terse content 55
  • 56. TAB GUideLineS • Tabs must look and behave like tabs. • Place navigation at the top of the page. • Only have one row of tabs. • Always have one of the tabs pre-selected. • Clearly indicate which tab is currently active and which tabs are currently inactive. • The active tab should appear connected to the content area. 56
  • 57. TAB GUideLineS • Consider grouping related tabs. • Arrange tab labels in an order that makes sense for your users. • Use title style capitalization. • Tab labels should be only one-to-two words and written in plain language. • Ensure fast response time. • Do not use tabs to replace breadcrumbs. 57
  • 58. forms • Forms have undergone a similar evolution to shopping carts. • Originally, each field was filled out manually. • Now, there auto-fill pulls your information from other sites and browser history. 58
  • 59. a successful form • Indicates the user’s progress when multiple pages are involved. • Asks only for information that is necessary (no marketing questions.) • Keeps the fields simple, direct, and easy to read. • Confirms the submission of the form. 59
  • 60. errors • Traditionally, errors were pointed out using red text or a dialog box. • Today, the best error recovery indicators use alternatives to text. • Consider human-to-human interactions and other types of language that a user can understand beyond text alone. 60
  • 61. mobile • People use their mobile devices to enhance productivity, comfort, and pleasure, everywhere and at anytime • Mobile applications need to focus on a core utility; content must be relevant in the context that it is being used (on the go.) • They need to be fast and reliable in order to be valuable in those environments. 61
  • 62. What percentage of smartphone owners use their devices to check prices in stores? 62
  • 63. 63
  • 64. “If you haven’t used your mobile phone to initiate some kind of financial transac- tion, then you better get on board because it is quickly becoming the fastest-grow- ing segment in the consumer financial world. According to IDC Financial Insights, the number of consumers using their smartphones to complete online or offline transac- tions has doubled as of May 2012. About 37 percent of consumers said they plan to compare prices on their mobile de- vices while at brick-and-mortar stores, according to PriceGrabber.com.” -Bloomberg, July 2012. 64
  • 65. When planning an app: What should our app do? Why? What should our app do differently from its competitors? What should our app do better than its competitors? 65
  • 66. define ui brand signatures • Each user interaction should reflect the story of the brand. • Features, visuals, wording, fonts, and animations make a difference. i. Differentiate ii. Represent key functions iii. Set the pattern of the design language 66
  • 67. OPTIMIZE FLOWS AND UI ELEMENTS • Users will not wait. • “Every millisecond counts.” -Google 67
  • 69. touch points DO: DON’T: Bigger the better Switch from fingerpad to fingertip Limited options Group targets near each other 69
  • 71. responsive design • The website responds to you, rather than making you deal with it (by scrolling or magnifying or whatever-else-ing in order to view it comfortably.) -Fast Company 71
  • 72. 72
  • 73. responsive design • Code the website once but allow it to be flexible to fit the device. Good news: Bad news: Coded once Many more wireframes 73
  • 74. 74
  • 77. You can’t make decisions without EMOTions Saver and Damasio (1991) 77
  • 78. CAN DO WILL DO 78
  • 79. 79
  • 81. social 81
  • 82. love 82
  • 83. effort 83
  • 84. why did you join facebook? 84
  • 85. 85
  • 86. PERSUASIVE design There are seven main methods in the persuasive design “arsenal”: 1 Reciprocation - “I like to return favors.” 2 Commitment - “I like to do what I say.” 3 Social Proof - “I go with the flow.” 4 Authority - “I’m more likely to act on information if it’s told by an expert.” 5 Scarcity - “If it’s running out, I want it.” 6 Framing - “I’m influenced by the way prices are framed.” 7 Salience - “I care about what’s relevant to me right now.” 86
  • 87. The evolution of the shoppinG cart • The user flow from product page to order submission has evolved over time. • Originally, it was a long process: Add to Cart > Checkout > Register/Sign In > Enter Billing/Shipping Info > Submit Order • Today, there is 1-Click Checkout, paying through PayPal, having one shopping cart from multiple stores (or sellers, like on eBay.) 87
  • 88. today’s shopping cart • The online shopping cart is more flexible than its physical counterpart. • Improvements come about from thinking outside the box. THINK OUTSIDE THE BOX 88
  • 89. successful shopping cart traits • Welcomes users by name. • Points out that an item has been added (immediate feedback.) • Links back to the original product. • Gives users the option to keep shopping and brings users back to the same place on the page. • Estimates the total cost (plus shipping and discounts based on zipcode.) • Allows for easy quantity edits/removal. 89
  • 90. successful shopping cart traits • Saves items in cart across multiple sessions and windows. • Saves items in cart for adequate time periods. • Allows people to buy without registering. • Allows to save for later. • Can put on waitlist if out of stock. • Get e-mail notification or auto-purchase if out of stock. 90
  • 91. CHECKOUT PROCESS • Does not have sub-pages or flows (e.g., referred shipping address, create an account.) It is a linear process. • Provides the opportunity to gift wrap or include a personal message. • Moves forward to the next step. • Visualizes journey/show progress. • Steers clear of ambiguous language such as back, next, proceed (e.g.,continue could mean “continue shopping” or “continue checkout” depending on state of mind of shopper.) 91
  • 92. BROWSING 92
  • 94. 94
  • 96. what are GREAT INTERACTIONS IN E-COMMERCE? 96
  • 98. 98
  • 100. 100
  • 104. pop quiz Q What is the difference between navigation and information architecture? A 104
  • 105. CLOSING 105