Improving conversions with better UX design
Transcript of Improving conversions with better UX design
1
Presented by Vbout.comRichard Fallah - CEO
Improving conversions with better UX
Table of Contents 2
1) Infographic: Usability from different points of view2) 7 Second Rule: Credibility , Value Proposition, Trust,
Digestibility, Urgency3) Psychology of color & usability4) Tracking and tools5) Appendix: List of tools to use to improve and analyze UX
design
“Does it better” will always beat “did it first.” – Aaron Levie, CEO at Box 2
3
Usability from different points of view…
Infographic
3
4Credibility & Trust: Example
5Digestibility
• Good design is easy to digest.• Organize content (size, color, icons)
to help highlight more common choices so visitors can find items faster.• No one likes a confusing surprise.• Consider all the decisions you’re
asking someone to make with your product to get to the bottom of the funnel.
Make it easy to buy from you• Your need to make doing business with
you as easy as possible. • Your users easily see how to purchase
or where to click for info they want. • It has to be intuitive and self-evident. • Should have as few clicks as possible.
Could your grandma buy from your site within 1-2 minutes?
Digestibility
23
6
Do not give users too many options.
Choice paralyzes. If you have a lot of products, build better filters, so your prospects can identify the right one for them without spending too much time.
Digestibility
24
7
Digestibility: Example
Here’s a perfect example of simple, clear design.
First, the company has one product.
Instantly, you know what they are selling, how to buy, and where to find additional information.
The design is neat and clean.
25
8
Add incentives to take action right away.
• Is there an indication that the action needs to be taken now?• The tone of the presentation,
offers and deadlines all influence urgency.• Here’s a great example:
Urgency
26
9
Nothing creates urgency like scarcity.
There are 2 kinds of scarcity:• quantity-related scarcity (2 seats left at this price)• time-related scarcity (last day to buy)
Word of advice: the reason for scarcity has to be authentic.
Do not lie to your customers, ever.If it’s fake scarcity, people will know and your trustworthiness plummets.
Urgency
27
10
UrgencyHere’s a great example of limited-stock urgency
28
11
The Psychology of Colors and Usability
The Psychology of ColorsUnderstanding the Color Wheel: Complementary colors
Colors convey different emotions and feelings and are extremely important to how a visitor experiences your content.
Clockwork Conversion Color Model – Angie Schottmuller of Three Deep Marketing
12
The Psychology of Colors and Usability
30
Colors and CTAs
Understanding the Color Wheel: Complementary colors.
Clockwork Conversion Color Model – Angie Schottmuller of Three Deep Marketing
13
Clockwork Conversion Color Model – Angie Schottmuller of Three Deep Marketing
The Psychology of Colors and Usability
Developing a CTA and placing it is just 10% of the challenge in maximizing conversions.
In order to better understand how to get the most out of your CTA button - we get into the mind of the customer.
31
14
Clockwork Conversion Color Model – Angie Schottmuller of Three Deep Marketing
The Psychology of Colors and Usability
• Use the color wheel to find the most complementary color to your site.
• A blue themed website should have a Yellowish colored CTA button.
• Text is equally important so pay mind to making sure it correlates well.
32
15
The maximum benefit of main website color vs CTA color can be seen below.
The Psychology of Colors and Usability
33
16
Clockwork Conversion Color Model: Angie Schottmuller of Three Deep Marketing
The Psychology of Colors and Usability
34
17
Clockwork Conversion Color Model –Angie Schottmuller of Three Deep Marketing
The Psychology of Colors and Usability
35
18
Clockwork Conversion Color Model – Angie Schottmuller of Three Deep Marketing
The Psychology of Colors and Usability
36
19
Clockwork Conversion Color Model – Angie Schottmuller of Three Deep Marketing
The Psychology of Colors and Usability
37
20
Clockwork Conversion Color Model – Angie Schottmuller of Three Deep Marketing
The Psychology of Colors and Usability
38
21
UI/UX EXPERIENCE : What to use to analyze, test, measure and optimize.
Tracking and Tools
• Bounce Rate• Average Session Time• Conversion Rate• Heat Maps• Click Maps• Scroll Maps• A/B Testing
39
22
Metrics to track: Bounce Rate
Tracking and Tools
40
Bounce rate is the percentage of visitors who leave after viewing one page.
A rising bounce rate is a sign your homepage is boring or off-putting.
23
Metrics to track: Average Session Time
Tracking and Tools
41
24
Metrics to track: Conversion Rate
Tracking and Tools
42
The conversion rate is the percentage of users who take a desired action.
The archetypical example of conversion rate is the percentage of website visitors who buy something on the site.
25
Metrics to Track: Heat Maps
Tracking and Tools
43
Gain a better idea of where users are lingering their mouse on your site. Areas with the most red are high traffic zones.
26
Metrics to Track: Click Maps
Tracking and Tools
44
See where users are clicking in order to better design your UI.
27
Tracking and Tools
45
Metrics to Track: Scroll Maps
Scroll Maps allow you to track where users scroll the most on your pages.
28
Metrics to track: A/B Testing
Tracking and Tools
Example: If you had two possible headlines for your page and couldn’t decide which to use, run an A/B split test to find out which works better.
Determine optimal design by conducting A/B testing on different items and analyzing if it impacts your conversions.
46
29
How does it work?
• A/B testing software directs 50% of the incoming traffic to page A and 50% to page B. • Both pages have a call to action, and in
the end you count how many people took the action.• The page with more conversions
(more people taking action) wins.
Tracking and Tools
47
50% 50%
A/B
30
Uxpin.com
invisionapp.com
marvelap.com
Balsamiq.com
*Full list of tools in the appendix
Top sites for prototyping:
Tracking and Tools
48
31
clickjar
crazyegg
mouseflow
Visual Website Optimizer
Tools for heatmaps, clickmaps, and scrollmaps:
Tracking and Tools
Vbout.com
49
32
33
Appendix: UX/UI ToolsUX/UI DESIGN TOOL DESCRIPTION TASK POPULARITY
Pidoco https://pidoco.com/en
--look and feel of a real app in the midst of the design process when you are using rapid prototyping as your design approach --positioning design templates on global layers to not lose control over where you are at (If you make a change to one layer, other affected layers will change as well.)-quickly create click-through wireframes and fully interactive UX prototypes
--use for sharing, editing, and tracking needs
Trusted by small and large companies in over 50 countries
Vonn Mobile Material Design UI Kit https://visualhierarchy.co/shop/vonn-material-design-mobile-ui-kit/
--compatibility with Google's Material Design Guidelines--ability to create stunning, fresh-looking apps filled with bold colors and clever animations--100 drag and drop templates in 9 logically-defined categories that you can open with Adobe PhotoShop
-- build mobile Android apps using a drag and drop UI kit
Product review: Average rating--- 4.81 (out of 5), with 67 respondents
Firefly https://www.fireflyapp.com/
--design management function keeps configuration control when designing a product by means of rapid prototyping-- easy design annotation and proofing tool for widely distributed teams
--upload information you wish to share, receive feedback, and edit on the fly, while maintaining version control in the process
34
InVision http://www.invisionapp.com/
--ease of use--“drag and drop features”--Seamless design communication--Design-driven project management--Real-time design collaboration and tours
--transforming static screens into interactive, clickable prototypes--Free, unlimited user testing--provides users exclusive access to great partner products and services
over 1 million users
AppCooker http://www.appcooker.com/
--prototyping studio for Apple Watch, iPhone and iPad apps
--less time programming--realistic look and feel of prototypes
Product review: Average rating---4.5 stars 1123 Twitter followers
User Testing https://www.usertesting.com/
--innovative testing approach for your website, app, or prototype
--provides videos of people viewing or using what you have created--test your prototypes or apps on iOS and Android devices (metrics provided)
Trusted by over 34,000 marketers and UX professionals
Ace iOS 8 Mobile UI Kit https://visualhierarchy.co/shop/product/ace-mobile-ios-8-ui-kit/
--highly-organized--ready for use to mock up iOS mobile app designs
--Designing a mobile app for iPhone--set of available screens will enable you to turn out over 1000 different apps
PickFu https://www.pickfu.com/
--a polling service--provides detailed, unbiased, audience-driven data and demographic information--giving an objective third-party point of view
--get users' comments or suggestions on anything ranging from prototype and app usage to document content--provides unbiased feedback in just minutes
Trusted by Hundreds of Companies (i.e. Comcast) 302 Twitter Followers
Omni Group https://www.omnigroup.com/
--suite of iOS development tools --developing applications exclusively for Mac, iPad, and iPhone--i.e. OmniGraffle is a powerful tool for creating anything from sketches and schematics to wireframes
won three Macworld Editors’ Choice awards, a MacUser UK “Maxine” award, Macworld Expo Best of Show, two Mac Observer Editors’ Choice Awards, an iPhone Alley Editors’ Choice award, and five Apple Design awards
PowerMockup http://www.powermockup.com/
--Mockup and Wireframe Toolkit for PowerPoint--an add-on that integrates a library pane into the PowerPoint window, giving you easy access to the included wireframe and mockup shapes--800+ User Interface Elements
--creating a decent presentation using PowerPoint--easier for non-technical stakeholders to understand & offer constructive feedback as you proceed through the design phase
Thousands of professionals worldwide love prototyping with PowerMockup.
Notism https://www.notism.io/home
-- Share and collaborateon design & video work.
--allows you to communicate your ideas and information to co-workers and clients by video--create interactive prototypes on this tool and share them, along with sketches, notes and other information
620 Twitter followers Used by HARVARD, DEEPEND, SINNERSCHRADER
36
Prott https://prottapp.com/
--An intuitive, fast and collaborative tool UI to make prototyping simple--reasonably priced--Work more efficiently with Slack, Hipchat, Dropbox and Sketch integrations
--Prototypes can be created across all devices, iOS and Android screen resolutions are fully supported, and display sizes are easily customized--best for creating mobile apps
741 Twitter Followers
Marvel https://marvelapp.com/
--easiest way to turn your sketches, images and mockups into realistic mobile and web prototypes
--fast and easy way to create interactive prototypes--using Dropbox Sync to iterate your design
Used by 238,497 designers, startups, students and teams
UXPin https://www.uxpin.com/
--a design platform that makes it easy to go from static design to fully animated prototypes - without any code--provide dozens of advanced interactions and animations
--simple drag-and-drop, add any icons, images, and custom UI elements to any mockup--graphic design editor also lets you customize typography, UI elements, backgrounds--everyone can comment directly on designs
used by the best designers on the planet 15.7K Twitter Followers
Proto.io http://www.proto.io/
--tool of choice to bring your mobile app idea to life--has component library that provides multiple pre-built UI elements for a number of device platforms--makes fully-interactive high fidelity prototype of your mobile app designs--a bit more challenging to learn
--offers an easy and intuitive drag-and-drop interface to help you prototype your app idea and make it look and work exactly like the real app should--gives you the power to communicate the whole user experience and interaction design--Everything works in your web browser. No need to download.
5380 Twitter Followers Used by DISNEY, BBC, SAMSUNG
JustInMind http://www.justinmind.com/
--full-featured prototyping environment with elegant design application coupled with powerful interaction tools--Code-Free Application Prototyping--fit all different screen sizes
--synchronization with Photoshop, integration with user testing tools and services, mobile gestures, transitions, mobile application viewers for iOS and Android, support for conditional logic and team workflow
Used by YAHARA, INKLING, DEXPERIO
Axure http://www.axure.com/
--Create Prototypes of Websites & Apps Without Coding--Stakeholders, developers, and testers can view and interact with your prototype without installing Axure RP or a player--Group workflow, version control, and team collaboration features are available in the Pro version
--with tools designed to help you work at the right fidelity for your project (boxes, placeholders, shapes, text, color, gradients, semi-transparent fills, images, grids--power over own evaluation, client feedback, or user testing--generates your design to an HTML and JavaScript prototype that can be viewed in IE, Firefox, Safari, or Chrome
Used by over 60% of the Fortune 100 Works for over 80,000 design and business professionals 11.1K Twitter Followers
Coolors https://coolors.co/
--a color schemes generator --a color palette randomizer with the ability to lock down or enter colors you gotta have, while exploring potentially harmonious color combinations--save multiple palettes, and export the colors into an eps file format for easy application in Illustrator, Photoshop, and Sketch
1269 Instagram Followers Trusted by TREEHOUSE, SMASHING, CODROPS, WIRED and other 500+ creatives
LucidChart https://www.lucidchart.com/
--an online tool for creating flowchart diagrams, UI mockups and prototypes
--allow documents to be created with up to 60 elements and with two collaborators for free--utmost compatibility with other programs, i.e Google Apps--the only web app to offer complete support for Microsoft Visio documents
Trusted by over 5,000,000 users
Specctr https://www.specctr.com/
--blueprints for the web --spell out sizing, font details, color, and padding for clarity--set measurements in percentage and scale up specs without having to alter your art
Used by GOOGLE, AUTODESK, INTUIT, YAMMER
Protonotes http://www.protonotes.com/
--tool that allows you to add post-it type notes to a prototype in order to capture feedback--annotation tool--HTML prototyping collaborating tool
--simply add a little bit of JavaScript to each page of the prototype and Protonotes does the rest
Talked about in Twitter,Mentioned in Web Worker Daily, Wall Street Journal, Web Analytics Book
Noun Project https://thenounproject.com/
--gives you access to “Thousands of glyph icons from different artists
--allows designers to drag and drop icons directly onto their artboards
39
Improving conversions with better UX
www.vbout.com/blog
www.vbout/p/request-a-demo
/vboutcom vbout www.vbout.com