Improving conversions with better UX design

  • Published on
    18-Feb-2017

  • View
    1.371

  • Download
    0

Embed Size (px)

Transcript

Improving conversions with better UX

Presented by Vbout.comRichard Fallah - CEOImproving conversions with better UX1

1

Table of Contents2

Infographic: Usability from different points of view7 Second Rule: Credibility , Value Proposition, Trust, Digestibility, UrgencyPsychology of color & usabilityTracking and toolsAppendix: List of tools to use to improve and analyze UX design

Does it better will always beat did it first.Aaron Levie, CEO at Box2

3

Usability from different points of view

Infographic

3

4

Credibility & Trust: Example

5

DigestibilityGood 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 youre asking someone to make with your product to get to the bottom of the funnel.

Good design is easy to digestthe brain shouldnt have to expend a ton of energy to figure out what the heck its looking at. With any luck, people will just get it without needing a 6-section explanation.This goes beyond clear, easy-to-read copy. People sometimes need guidance to make decisions, so a menu with a list of 12 inline items may seem daunting. Organizing with some hierarchy (size, color, icons) can help highlight the more common choices, which allows someone to find what theyre looking for faster.Another good example of digestible design is the new user guide, often presented as staggered tips that a person can process one at a time. But imagine the opposite, hitting a brand-new user with a whole stack of instructions, removed from the context of the product. No one likes a confusing surprise.Consider all the decisions youre asking someone to make with your product to get to the bottom of the funnel. The brain has a limited amount of cognitive resources during the dayusing them up needlessly is rude.

5

Make it easy to buy from youYour 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 beintuitiveand 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: ExampleHeres 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.Heres 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 beauthentic.

Do not lie to your customers, ever.If its fake scarcity, people will know and yourtrustworthiness plummets.Urgency

27

10

If the supply of your product is endless, you can give out time-sensitive bonuses, a free gift to first X amount of buyers or a discount if they complete the purchase within a certaintime frame.

10

Urgency

Heres 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 CTAsUnderstanding the Color Wheel: Complementary colors.

Clockwork Conversion Color Model Angie Schottmuller of Three Deep Marketing

13

13

Clockwork Conversion Color Model Angie Schottmuller of Three Deep Marketing

The Psychology of Colors and UsabilityDeveloping 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

14

Clockwork Conversion Color Model Angie Schottmuller of Three Deep Marketing

The Psychology of Colors and UsabilityUse 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

15

The maximum benefit of main website color vs CTA color can be seen below.

The Psychology of Colors and Usability

33

16

16

Clockwork Conversion Color Model: Angie Schottmuller of Three Deep Marketing

The Psychology of Colors and Usability

34

17

17

Clockwork Conversion Color Model Angie Schottmuller of Three Deep MarketingThe Psychology of Colors and Usability

35

18

18

Clockwork Conversion Color Model Angie Schottmuller of Three Deep MarketingThe Psychology of Colors and Usability

36

19

19

Clockwork Conversion Color Model Angie Schottmuller of Three Deep MarketingThe Psychology of Colors and Usability

37

20

20

Clockwork Conversion Color Model Angie Schottmuller of Three Deep MarketingThe Psychology of Colors and Usability

38

21

21

UI/UX EXPERIENCE : What to use to analyze, test, measure and optimize.

Tracking and Tools

Bounce RateAverage Session TimeConversion RateHeat MapsClick MapsScroll MapsA/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

23

Metrics to track: Average Session Time

Tracking and Tools

41

24

24

Metrics to track: Conversion RateTracking 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

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

26

Metrics to Track: Click Maps

Tracking and Tools

44 See where users are clicking in order to better design your UI.

27

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

28

Metrics to track: A/B TestingTracking and ToolsExample: If you had two possible headlines for your page and couldnt 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

Your goal should be to have at least one, and preferably several A/B tests running at any given time on your site. Theres no perfect when it comes to marketing sites, and the only way you learn about what works and doesnt work is to continuously test.

30

Uxpin.com

invisionapp.com

marvelap.com

Balsamiq.com

*Full list of tools in the appendixTop sites for prototyping: Tracking and Tools

48

31

clickjar

crazyegg

mouseflow

Visual Website OptimizerTools for heatmaps, clickmaps, and scrollmaps: Tracking and Tools

Vbout.com49

32

33

Appendix: UX/UI ToolsUX/UI DESIGN TOOLDESCRIPTIONTASKPOPULARITYPidocohttps://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 needsTrusted by small and large companies in over 50 countriesVonn Mobile Material Design UI Kithttps://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 kitProduct review: Average rating--- 4.81 (out of 5), with 67 respondentsFireflyhttps://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

34InVisionhttp://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 servicesover 1 million usersAppCookerhttp://www.appcooker.com/--prototyping studio for Apple Watch, iPhone and iPad apps--less time programming--realistic look and feel of prototypesProduct review: Average rating---4.5 stars1123 Twitter followersUser Testinghttps://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 professionalsAce iOS 8 Mobile UI Kithttps://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 appsPickFuhttps://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 minutesTrusted by Hundreds of Companies (i.e. Comcast)302 Twitter Followers

Omni Grouphttps://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 wireframeswon 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 awardsPowerMockuphttp://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 phaseThousands of professionals worldwide love prototyping with PowerMockup.Notismhttps://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 information620 Twitter followersUsed by HARVARD, DEEPEND, SINNERSCHRADER

36Protthttps://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 apps741 Twitter FollowersMarvelhttps://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 designUsed by 238,497 designers, startups, students and teamsUXPinhttps://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 designsused by the best designers on the planet15.7K Twitter FollowersProto.iohttp://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 FollowersUsed by DISNEY, BBC, SAMSUNG

JustInMindhttp://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 workflowUsed by YAHARA, INKLING, DEXPERIOAxurehttp://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--...

Recommended

View more >