Download pptx - 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

http://conversionxl.com/wp-content/uploads/2011/10/hurry.jpg

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


30

Colors and CTAs

Understanding the Color Wheel: Complementary colors.


13



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



• 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.


33

16

Clockwork Conversion Color Model: Angie Schottmuller of Three Deep Marketing


34

17

Clockwork Conversion Color Model –Angie Schottmuller of Three Deep Marketing


35

18



36

19



37

20



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

[email protected]

/vboutcom vbout www.vbout.com