Effective UI design can, without a doubt, improve your conversion rate. However, there are at least three criteria that your user interface needs to satisfy in order to attract, convert, and retain visitors to your site or app: it has to be engaging, captivating, and it needs to trigger an emotional response.

Read on for six of the most most commonly made app and website layout mistakes that are sure to turn your customers off and kill your conversion rates.

01. Unresponsive design

It's no secret that people now regularly use a range of different devices to complete a task. That means your website needs to be responsive in order to engage the audience no matter how they access your site. A poor user experience caused by a site that hasn't been optimised for mobile or tablet users is sure to dissuade potential customers.

If that doesn't convince you, complying with Google’s ranking requirements is another major reason to consider placing a lot of emphasis on responsive web design principles. Back in 2015, the search giant released an algorithm that prioritises mobile-friendly pages.

02. Uninviting CTAs

Koto created an inviting look for Airbnb Plus

It’s impossible to over-stress the importance of calls to action. Not giving your CTAs the love they deserve is one of the most commonly made UI mistakes. To help up your clicks, these are the things you should be considering:

Shape: Clickable buttons are usually rectangular and surrounded by white space, to help define them and make them stand outLocation: Position CTAs right next to the main proposal – this is the most logical next step in your customer’s journeyColour: There isn’t a universal 'best' colour for CTAs – aim to fit with your site's colour scheme, but ensure these elements stand out the mostSize: Make your CTAs large enough to stand out, yet not overwhelming 03. Lack of social proof

Customers trust other customers. A recent survey showed that 60 per cent of consumers look for Google reviews before putting their trust in a business. Not only should you definitely consider displaying positive reviews of your product or service, but you also need to make sure they're positioned properly. Customer reviews can help reassure potential customers of your brand's credibility, if you display them somewhere towards the beginning of your sales pitch.

04. Too much of everything

A cluttered layout is one of the most off-putting things a user can come across. While it’s understandable that you want to display as much information as you can, this approach won’t get you far in terms of conversions.

Robot Food created a simple but appealing UI for this cereal

Here are some good rules of thumb to get you started. First, the design scheme that you choose shouldn’t contain more than three main colours and more than two font types. For more advice, take a look at this article on how to choose the perfect colour palette.

Second, you need to guarantee that the imagery you do use is of top quality. Avoid using low-resolution videos, photos and illustrations. If you can't afford to shell out for a pro, don't worry – there are plenty of places you can find good quality free vector art online.

UI animations have been a growing trend for some time time. They can help guide your users and create interest, while also ensuring your interface stands out (want to get started? Here are some CSS animation examples you can recreate yourself).

05. Slow loading pages

Did you know that one of the most common reasons for abandoned ecommerce shopping carts is slow page load time? Data shows that 40 per cent of people abandon a website that takes more than three seconds to load.

But loading speed isn’t just important for conversions – it’s important for your overall site discovery, especially in 2019. In the video above, marketing expert Neil Patel revealed that page loading speed is going to be an increasingly important factor for SEO in 2019 (jump to just after the 3 minute mark for Patel's advice on this).

06. Little to no video content

Our brains process videos about 60,000 times faster than they process text. Videos can entertain and explain in a visual way. And they're incredibly underused. Take a look at the explainer video for Young Alfred by Fireart Studio below as an example.

Here are a couple of quick tips you might want to consider if you’re using video content already.

First, it’s a good idea to insert some sort of the lead capture elements in the video. For example, remind people to subscribe at the beginning of the video or thank them for watching and liking at the end of the video. Second, it’s also very important to make use of customised thumbnails – you need to encourage people to watch your video in the first place.

However well-designed your user interface may be, at some point or other, the people using it are going to have to wait for something to load.

Photo: Marco Giumelli, “Waiting”

A 2014 MIT study showed that humans can perceive discrete images in as little as 13 milliseconds however deciding where to focus takes between 100 and 140 milliseconds. In practical terms, this gives us around 200 milliseconds to present a user interface state change in order to appear instant.

Between 200 milliseconds and 1 second, people feel they are within the flow of their actions. After 1 second without any other feedback, focus starts to shift. Beyond 10 seconds, user focus is likely to be lost entirely.

To make people happy, we need to give an indication that something is happening. This leaves us with three basic options:

progress bar if we can measure the duration; spinner if we can’t; and nothing at all.

Psychological studies into progress indicators show that our interpretation of them is anything but linear. Our method of processing a delay doesn’t match up with reality.

Understanding this concept leads us into the realm of manipulating interfaces in order to improve perception.

In software design, skeleton screens provide an alternative to the traditional methods. Rather than show an abstract widget, skeleton screens create anticipation of what is to come and reduce cognitive load.

Skeleton Screens in the Wild

Apple have incorporated skeleton screens into their iOS Human Interface Guidelines under the name “launch images”. Apple’s guidelines recommend showing an outline of the initial application screen excluding text and any elements that may change.

Apple’s Clock

Apple’s Clock is a classic example of a skeleton screen. The launch screen sets the expectation of what the app will look like and creates an impression of the app loading faster than it actually does.

This launch screen shows the basic outline of the app and the four icons at the base of the screen.

Once launched, all the text and variable UI elements are filled in.

Nintendo

Nintendo has recently launched their first mobile application, which pays absolutely no attention to UI guidelines or common decency.

The initial launch screen shows the title of the app and a background image none of which reflect the application’s use.

After launch, a load screen first has a “Loading” text indicator as a minimalist spinner.

Then you get a numeric progress indicator.

And that’s followed by another spinner.

Finally, the application itself appears.

Over an incredible 14 second load time, Nintendo use two spinners and one progress bar, none of which do much to ease the load time. The dynamic “tips” during the load screen also act as a spinner by changing the UI state and creating a sense of progress.

Each discrete screen requires a new visual scan and makes the launch process seem even slower than it actually is.

The post How to Speed Up Your UX with Skeleton Screens appeared first on SitePoint.

So you have jumped into the world of freelancing, learned about the common problems freelancers face and how to fix them. You’ve learned what to put in your contract, that criticism can help…

Visit hongkiat.com for full content.

https://www.primarytech.com/wp-content/uploads/2013/04/PrimaryTechnologies-Logo-new1-300x144.png00adminhttps://www.primarytech.com/wp-content/uploads/2013/04/PrimaryTechnologies-Logo-new1-300x144.pngadmin2019-02-01 17:30:062019-02-01 17:30:067 Traits That Make Clients Love You

What is a landing page? Knowing this can help you generate leads and retain more customers when you design a website. Simply put, a landing page is where someone “lands” after clicking on a search result, call to action, or advertisement. These pages have one core focus: converting people into customers. Any page on your site can be a landing page for certain search terms.

These awesome landing pages are a great source of inspiration when you’re trying to improve your own. Take a look and see why they work so well!

Spotify

If you’re going to make your homepage your landing page, take a tip from Spotify. While navigational elements exist, they’re overshadowed by the huge background banner and noticeable button asking you to register. The pitch may be only three sentences long, but it says all it needs to.

Netflix

Netflix opens with an absolutely huge call to action button that’s just begging to be clicked on. When you do, you’re taken to a clean page, free of distractions but for a simple footer. Walking through the sign-up process doesn’t take long, and it even saves your progress if you leave the page.

Mango Languages

Mango Languages does a great job on its landing pages. The sign-up link is very prominent and posted multiple times on the homepage. Clicking it leads you to a page free of distracting navigation. Just choose your language and sign up!

Web Profits

Sometimes it’s impossible to condense your landing page down to a single action for users to take. The best thing you can do is make the distinction clear, and that’s what Web Profits does. The homepage is very simple with just three distinct links. Click one, and you’ll be directed to a landing page more suited to what you’re looking for. The page may be long, but the inclusion of at least four identical CTAs makes sure there’s always a button in sight when you’re ready to get started.

Google Store

Google’s full-screen, animated page already does a great job putting the focus on the products. Click one of the calls to action and you’ll be presented with a page that gets right to the point. Pricing and order buttons are always visible in the header as you scroll through videos and feature lists. And, advertisements for other products are kept at the bottom of the page.

Upwork

When you’re creating a landing page, it’s extremely important that you waste no time. Upwork’s sign-up dialogue exemplifies this quality. An eye-grabbing header and title draw your eye towards the Get Started button, which immediately begins walking you through creating a job post and the sign-up process. You may only have a few seconds to grab a visitor’s attention, so make sure you waste no time. This is also a fantastic example of above-the-fold content, with the site features all being below it and the important CTA above.

Facebook

If you visit Facebook without an account, they keep their pitch simple. With three concise bullet points explaining what the site is and an obvious sign-up form right on the page, it’s easy for anyone to get started. They also keep the form short and leave the in-depth questions for later, which is a good practice.

Design Great Landing Pages

The best landing pages are concise, have few distractions, and get the visitor to take the action you want them to take. Remember that when you’re designing your next landing page for your email campaign or advertising banner! Make your argument short, compelling and tailored to the audience likely to click on the landing page. Accomplish that and you’ll be converting in no time.