Experimentation and Innovation in Libraries: From Design Thinking to LeanUX
First Impressions Matter: LeanUX Design of Landing Page #1
-
Upload
kazumichi-mario-sakata -
Category
Design
-
view
107 -
download
1
description
Transcript of First Impressions Matter: LeanUX Design of Landing Page #1
![Page 1: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/1.jpg)
First Impressions Matter: LeanUX Design of Landing Page
@sprmari0
Lean Startup Machine Tokyo | May 17th-19th 2013
(Courtesy of Jefrey Bulla)
![Page 2: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/2.jpg)
What’s the point?
Think in their workflow
![Page 3: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/3.jpg)
Why?
• There is an intended behavior we want to
create.
• We have no direct control over user behavior.
• Design gives us means to control the
contextual environment and evaluate the
resulting effect.
![Page 4: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/4.jpg)
Why?
“Customers don’t care about your solution. They care about their problems.”
- @davemcclure
![Page 5: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/5.jpg)
First Touchpoint Experience
Customers are increasingly using the web as first touchpoint. *Winning the Zero Moment of Truth (ZMOT)
First impressions are 94% design related; positive first impressions lead to higher satisfaction. *Persuasive Design of Destination Web Sites: An Analysis of First Impression
*Users love simple and familiar designs – Why website need to make great first impression
![Page 6: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/6.jpg)
“Powers of 10”
0.1sec: Form first impression about a website.
1sec: Stay focused on their current train of thought.
10sec: Often leave the website.
1min: Able to complete simple task.
10min: Long visit to a website.
*Powers of 10: Time Scales in User Experience
(Cont’d)
![Page 7: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/7.jpg)
Starting Point of Journey
*User Experience Journey Map
![Page 8: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/8.jpg)
Make An Assumption of Your Customers
Name and Picture
What does the persona look like? What’s the persona’s name?
Characteristics
What are the persona’s relevant characteristics?
Need and Pain
Why the persona want to use the product ?
*Persona Sets
![Page 9: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/9.jpg)
Test Your Ideas
![Page 10: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/10.jpg)
![Page 11: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/11.jpg)
Create & Encourage Emotional Connection
Build ‘Memorable’ Website
![Page 12: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/12.jpg)
Emotional Design
*Plutchik’s Emotion Wheel
![Page 13: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/13.jpg)
Different emotional layers
*Emotional Design: Why we Love (or Hate) Everyday Things
Visceral
Reflective Behavioral
Visceral – Attractiveness
Behavioral – Usage
Reflective – Self-Image
![Page 14: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/14.jpg)
‘Emotional’ Landing Page
![Page 15: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/15.jpg)
Simplified Layout
Headline
• Key Benefit • Key Benefit • Key Benefit
Social Proof
Large Graphic
Call-to-Action
![Page 16: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/16.jpg)
Headline
First thing read for customers to search for specific solution to their problem.
*Airbnb
Big Picture Hypothesis = Solution Hypothesis = Value Proposition
![Page 17: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/17.jpg)
Key Benefits
How does your product or service benefit the customer?
![Page 18: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/18.jpg)
Large Graphic
Image high-lighting product and conveys happy customer experience.
*Square
![Page 19: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/19.jpg)
Social Proof
Social networks to establish credibility and trust by building multi-touchpoints.
![Page 20: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/20.jpg)
Call-to-Action
Solicit one clear action that tests your riskiest assumptions.
*Flickr
Total number and ratio of early adaptors, interests, etc.
![Page 21: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/21.jpg)
Questions to be answered
Stimulus Awareness Relevance Confidence Satisfaction
Who is this for?
How long will this take?
What should I do next?
Where should I go next?
How should I do it? *ARCS Model
![Page 22: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/22.jpg)
Don’t blow it
• The headline is everything and will probably have
the biggest impact on conversions—A/B Split Test
the Headline.
• Don’t be lazy about the page design. Polish =
Credibility.
• People don’t read. Keep copy clear & concise.
![Page 23: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/23.jpg)
3 Pillars of Emotional Design
Visceral Design
Behavioral Design
Reflective Design
Makes you feel… Helps you do… Says about your…
![Page 24: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/24.jpg)
Skeumorphism
![Page 27: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/27.jpg)
Path
![Page 28: First Impressions Matter: LeanUX Design of Landing Page #1](https://reader033.fdocuments.us/reader033/viewer/2022051515/54c757f44a7959f0518b459a/html5/thumbnails/28.jpg)
First Impressions Matter: LeanUX Design of Landing Page
@sprmari0