2020 fridge magnets

Our Top 5 Posts from 2020

2020 is behind us and the new year has begun but we thought we'd take one last look back at our Top 5 posts from our blog. We wrote a lot of different kinds of articles over the year from opinion pieces on the industry to guides on how to get the most out of your digital store front with design and CRO and these 5 are the posts that users were drawn to and spent the most time with.

Here is our Top 5.

 

AR & Furniture Retail | A match made in heaven? We Think So.

Read Post

 

 

Is Magento a good choice to launch your first online store?

Read Post

 

 

 

The ROI of UX & why not investing in it is a huge problem for you.

Read Post 

 

 

What it a User Journey Map?

Read Post

 

 

 

Testing in testing times

Read Post

 

 

 

We hope you enjoyed our posts and insights in 2020 and that you'll be joining us again this years as we've got even more great stuff planned.


Man on mobile

Why You Should Be Designing For Mobile And How To Do It

This is a follow-up blog from the latest Webinar done in partnership with SAP, The Evolving Customer and their need for Mobile First Commerce. You can register to watch the webinar as an On-demand recording here to see Lucy present the information along with a demo of SAP’s latest platform, SAP Upscale, that puts Mobile First Commerce at the heart of every interaction and offers an experience, unlike others.


We’ll take a look at why you should be focusing your website designs on a mobile-first approach. What the benefits are of doing this and some practical steps you can implement on your website today.

 

Why focus on mobile

To put it simply most people are accessing your website through their mobile phone. Smartphones were first introduced to the public back in 2007. Since the first iPhone hit the UK shelves there has been a steady increase in people accessing the internet on these devices. The graph below shows this trend in the UK. In October 2019 mobile usage overtook desktop for the first time and despite Covid sending everyone indoors mobile usage is still up on the year before. This trend is even more obvious globally where mobile overtook desktop back in 2016.

The reason for their popularity is that they are so versatile. We’re now able to have a computer with us all the time and can play games, browse the internet and go shopping all while sitting on the bus. It’s estimated that 95% of UK households have a smartphone. Being able to use a smartphone to take high-quality photos and share them instantly with your friends on social media has also made them wildly popular. Instead of carrying around a camera, all you need is your mobile. Smartphones are cheaper and more portable than a desktop so it’s no surprise that fewer people have been accessing the internet through a traditional desktop computer.

 

Other benefits

Since mobile takes up the majority of the market share Google ranks for mobile-friendliness. Since 2017 Google has been using mobile-first indexing this means that Google will look at the mobile version of your website for indexing and ranking. If you want your website to rank highly on Google, and let’s face it who wouldn’t, you need to make sure the mobile version of your site is designed well and meeting Google’s criteria.

Adobe discovered that companies with mobile-optimized sites triple their chances of increasing the mobile conversion rate to 5% or above. It’s a no brainer good mobile design increases conversion.

 

Success story

Sincerely Nude was founded by London based Michelle Asare in 2018. She noticed that she could never find any nude clothing close to her skin tone. This realisation became a frustration. She has always loved fashion and wanted to be part of the change she wanted to see in the world. Sincerely Nude aims to empower women to feel beautiful and sexy in their skin tone no matter what shade or size.

In an interview with Below the fold, Asare explains that having used Instagram as a personal account she began to study how businesses of all sizes used the platform as a marketing tool. From here she launched the clothing brand and eCommerce site and it picked up in just a few days after they launched. Through great product development and a killer Instagram strategy they now have a following of 16,700. Michelle estimates that 70% of her customers are driven by Instagram traffic. Since Instagram is almost exclusively used on the mobile app all of those customers are viewing her website on a mobile. So, it was important for the brand to have a seamless mobile experience. By harnessing the power of social media Michelle was able to drive traffic and sales through her website. A great success story for a business in its first 2 years of operating.

 

Designing for mobile

Now we've looked at why it’s so important to have a great mobile website let’s get to the nitty-gritty of how you can improve your site for mobile. Despite the upward trend for mobile people are slow to change and are still designing for desktop.

 

The old way – Graceful Degradation

Responsive web design has become the norm. Creating designs that can be resized to suit any screen size. This ideology is known as graceful degradation it is where all the details and complexities are added to a website for the desktop. Once you have the complex version of the design the features are stripped away to suit a mobile screen. The problem with this is that often the most important features and content get muddled together. This can result in the most important information and priorities of the website for the user on a mobile device to be lost.

 

The new way – Progressive enhancement

The future is mobile-first. This is because that’s where most people will be accessing your site from so they must get the best possible experience when they do. This is why you should move to the progressive enhancement method where you start with mobile and scale-up. By starting the design process with mobile then upscaling to larger devices it makes sure that the key information is presented to the user.

 

How we interact with mobiles

We interact with mobile devices differently to desktops instead of a mouse and cursor we use our fingers and thumbs. These are larger surface areas so we must increase the size of clickable elements and increased the space between them. As a rule, 30px or 7mm is the minimum height you should be looking at for a button for example. Any bigger than this then you may have to compromise other areas of the design and any increase in size after this has little impact on missed taps. The graph below shows the number of missed taps compared to the target size.

(ux.stackexchange.com)

These touchpoints should be within the parts of the screen that is most accessible known as the ‘Thumb zone’. Particularly if they require additional interactions like swiping. This diagram shows the easiest areas for people to reach. Keep this in mind when thinking of placement of CTA and add to cart buttons.

 

Image Credit (smashingmagazine.com)

 

Mobile-only features

Mobile phones have a great advantage over the desktop because they have a built-in camera. This feature opens up so many opportunities that can’t be recreated on a desktop. That means there's the potential to have a mobile experience that’s even better than desktop.

Search by photo – With this feature users can take a photo on their mobile and upload it straight into a search which will return visually similar product images. The eliminates the need for typing and lets users snap a picture of items they like while they’re out and about.

Card scanning – This is used for capturing card details which is a big pain point for users and can be a big sticking point in the checkout flow. This is a way to alleviate this frustration, instead of having to manually type out 16 digits the camera on the phone can scan the details and enter them automatically.

Augmented Reality – Plenty of big brands are starting to make use of AR to show products in consumers in their real-life environment. For example, with Ikea place, you can see how a table would size in your own kitchen. This isn’t just for large companies either with solutions like Eclipse’s Ares AR solution it’s possible to implement it on your own site.

 

Practical solutions you can implement to improve your UX/UI

  • Keep only the most important information. This is probably the most important thing to consider when designing for mobile. Without the luxury of space, you must keep only the most important information that the user needs to complete the journeys on your site.
  • Don’t be afraid of a scroll. It may be tempting to hide away content in carousels and accordions to fit everything nicely into the small screen. In doing this you create more work for the user by increasing the number of actions they need to take to get the information they want, that’s if they find it at all. Instead, make use of vertical scroll people have become accustomed to scrolling to find the information that they want so having it open and accessible by only a scroll away will come naturally to users getting them to where they want to be as quickly as possible.
  • Think about where your site will be accessed. If people are on the bus on a train or out and they may have poor connectivity to the internet. People will still expect a fast-loading time. By focusing on designing/developing for 3G by default you make sure you’re still providing a great experience when connectivity is limited.
  • Make use of mobile devices native UI for example date pickers. These are familiar to people as they use them daily.
  • When there is a form field that requires an input with numbers use the numerical keyboard. This will prevent mistyping and allow people to fill out the form more quickly.
  • Integrate Apple/Google Pay in the checkout. These stop the users having to enter their card and shipping details making the checkout experience seamless and easy for users. They also have the added benefit of additional security and are easy to set up.

 

Final thought

Mobile phones aren’t going anywhere so businesses must adapt to the ever-changing market. I hope you found this article useful and that you have taken away some useful tips for designing for mobile. If you’d like more advice on optimising your mobile experience contact us, we’d be happy to help.

 


Black Friday image

Preparing for Black Friday, Cyber Monday and Christmas

The last two months of the year tend to be the busiest for retail and this year should be no exception. The temptation of Black Friday and Cyber Monday bring out the bargain hunters and Christmas brings people together as we all lookout for the perfect gift for our significant others and our families.

This year things are going to be a little different what with being in the middle of the second lockdown and Black Friday and Cyber Monday falling right in it, people are turning to online, much like they have over the last few years but this time, there is no choice for alternatives.

Christmas might have the benefit of stores re-opening, assuming there are no adjustments to the lockdown, and with many people making it their highlight for 2020 the opportunity for online is huge. People have gotten used to the convenience of it and those wanting to avoid potential crowds after stores reopen will embrace it.

With this huge opportunity coming down the line there are things you need to do to ensure the most success and things that you could do to make the absolute most of every chance you get. It’s about being prepared and not leaving things to fate. We’ve pulled together a few areas for you to look at so that you can call yourself prepared.

 

Double and Triple Check Your Site Speed, Checkout Process and Scalability

When we’re talking about anything websites or the internet, a lack of speed will turn customers off. In fact, it has been found that 46% of shoppers have said they’ll never return to a slow website. You want to make sure that doesn’t happen to yours. You’ve done all that work to get them there, the last thing you want to do is send them packing because things don’t load or take too long. Using Google Developer PageSpeed Insights tool will give you a good idea of how things are loading and what you might need to do to fix it, if there is an issue.

You’ll also want to make sure your checkout process is as good as it can be. Black Friday, Cyber Monday and Christmas shoppers are fickle. They have thousands of stores to select from and a limited amount of time. They will leave your store if your checkout isn’t running smoothly. This is an area often overlooked by site owners but when it comes to CRO or conversion rate optimisation it is an area that can offer a great uplift. Our Experience team have helped plenty of our clients do just this by analysing the checkout process and implementing changes that have driven huge revenue increases. Taking time to improve your checkout process will pay off for you with every customer post the changes taking place. For a quick win, you may consider adding extra payment options like Paypal. We have a partnership with Adyen who's payment services can allow a business to add things like Apple Pay and Google Pay incredibly easily. If this is something you'd like to look at in more detail, speak to us and we can give you an idea of how to build it into your development plans.

Scalability might be something that you’ve not heard of or it might be something you’ve never thought about, but it relates to your sites ability to handle increases of traffic during these busy times. Plenty of companies have been caught out during past Black Fridays, and when the first lockdown was put in place a lot of websites fell over and put people into queues or even served errors because they just couldn’t deal with the influx. To combat this, it all comes down to hosting. Being on a cloud platform allows you to leverage scalability and open and close gates as needed. Our DevOps team at Eclipse know all about this and have helped a lot of clients build-in backstops to ensure uptime when it counts. They’re happy to talk to anyone who needs a little more information on why this is important and how to use it to stay competitive.

 

Think About Enhancing the Experience For Your Customers

As we mentioned before, shoppers have the option of thousands of stores and when they’ve chosen you, you’ll want to make the experience for them as easy and enjoyable as possible.

Keep offers clear and highlight the reasons why customers should stay and shop with you. Extended returns periods, seasonal discounts, free delivery and exclusive products all give you something to shout about. So, do it.

But beyond that, think about how the products are sorted on the website. Do you have a sale section or gift finders? Is everything in a place that is easy to find and then filter by price or amount of discount? Does the site search work well so that when people use it they’re being shown an accurate reflection of what they’re looking for and what you have on offer? All these things make a massive difference to the shopping experience.

You’ll also want to put some thought into your upsell and cross-sell opportunities. These are great ways to highlight other products that may be of interest to your customers and also lift the average order value of your checkout basket. Do you sell products that have bundles of accessories that make them better or a range of products that offer more functionality the further up the price ladder you climb? Tell people! Things can be easily missed and if a customer looks at something and assumes it doesn’t do what they need it to, they may leave to look elsewhere but if you have an alternative that might fit their need, you need to highlight it. And when it comes to cross-selling, the old problem of batteries not included on Christmas morning come to mind. Don’t let people fall into a trap of missing an important add on purchase that could take their experience from great to troublesome.

If you really want to take your customer experience to the next level adding functionality like AR (Augmented Reality) to your website really steps you apart and gives customers an experience like never before. It gives them the ability to bring your products into their home, try them in their space or even on themselves. It reduces your return rate and gives people assurance that what they’re looking at online will be what they receive. Our AR solution, Ares, is a total end to end solution for adding AR to your website and we can help you implement it with ease.

 

Getting People to Your Site

Having your site up and fully optimised is vital but just as important is going to be letting people know what you’ve got on offer, so they’ll head over and visit you.

Using Social Media is a great way to do this. If you’ve built up a loyal following they’ll be keeping an eye out to see what you have on offer but using paid social promotion and ads on platforms like Facebook and Instagram will help you reach out to a target market that you may not have been in front of before. The audience-building options in these platforms are great when you have a set of buyer personas in mind. The trick is to widen it enough to reach a good amount of people but not to have it so broad that you’re putting offers in front of people that are likely to be uninterested.

Make sure you use good imagery to highlight products in their best light and add well-written descriptions including details about discounts, features and any other information that you think gets you to stand out from the competition. Video works incredibly well too, and it gives you a chance to highlight products from different angles or even show products being used. One of the most effective formats when it comes to ads on Facebook and Instagram are carousel. These give you a chance to add 4 or 5 different products or even features of a single product in a single location that is easily scrollable.

To help drive more engagement on your organic posts, especially those on Instagram look for hashtags that are getting high levels of use. Adding these to your posts can help it be seen. People will be following hashtags such as #blackfriday or #offers. In our own experience, we’ve seen high levels of engagement on Twitter and Instagram when the right hashtags have been used. Getting these right can give your posts a turbo boost.

To further support this kind of activity, look at creating blog posts that pull together lists. List posts get high levels of engagement and things like ‘Our Top 10 Black Friday Deals’ or ’20 Gifts for the Man Who Has Everything’ will get people clicking. Just make sure that the blogs are backed up with great contact that clicks out to the individual products you’ve highlighted.

Another powerful tactic here is the use of reviews and word of mouth. People buy from people and having real honest reviews that can be shared on social media will give buyer confidence in you and your products, but the key here is that they’re REAL and not paid for reviews. There has been a lot in the news recently about fake paid for reviews and people are being told to look out for them. It is an unethical practice and something that you should not engage in any way but having real customer reviews or testimonials in the forms of images, videos, quotes or third party reviews like from TrustPilot or Google Reviews helps build trust.

 

Come Talk to Us

Hopefully, you’ve found these tips helpful and you’ll be able to use them to drive an increase in business over this sale and holiday period. If you’ve got questions about anything you’ve read, or you’d like to take advantage of any of these tips and you’re not sure where to start Eclipse is here to help. Reach out to us and we can work with you to make sure you can maximise every opportunity that lays ahead of you.


2 people looking at phone

How to Conduct a UX Audit

What is a UX Audit?

A UX audit is an analysis to discover how users are interacting with your website, product or app. This is usually done to optimise your site for better conversion or better user experiences. The audit will provide recommendations for tests and improvements that can be made to your site. These suggestions are based on the data and research found through the audit. An audit will help you uncover some of the struggle's users are having on your site so then you can enhance the experience.

 

What is the Benefit of Conducting an Audit?

Great user experience is something that customers are coming to expect from brands. Conducting an audit is the first step in improving those experiences. The value of UX can be seen in the numbers “Forester Research shows that, on average, every dollar invested in UX brings 100 dollars in return.” (Forbes.com 2017) Eclipse clients have experienced this themselves for example, on the first round of the conversion rate optimisation (CRO) programme, HM Post Office reported cost savings of over £250,000 within the first 6 months.

 

What to do Before Starting the Audit

Define business objectives – It’s important to understand the goals of your organisation so you have an aim for your audit’s solutions and outcomes that you can measure against the objectives. Without them, the report is subjective and not measurable. Usually, the goals are around conversion rates and user satisfaction.

Decide on your resource – The amount of time and money you can commit to an audit will have an impact on the output. If you choose to do an audit in two days this will not have as many actionable insights but maybe you need a quick turnaround. Make the decision that is right for your business before you get started.

 

The Audit Processes

Find out who the users are – Define who your users are, their demographic, how they’re getting to your site, and what device they’re using to access it. Platforms like Google and Adobe Analytics can be great for getting this information. Alternatively, your business may have a set of user personas, these will be helpful at this stage. If not, you should look at creating some and this post gives you everything you need to think about when creating them.

Analyse user behaviour – This can be done by using tools to track user's behaviour on your site. You may already have tracking and analytics on your site, or you can set it up at this stage. You should look at heatmaps, mouse flows and screen recordings to see current customer flows to identify any patterns or pain points on the site. This can highlight any pages where you see lots of users exiting the site or getting lost or stuck on a journey.

Collect user feedback on your site – Feedback collected from users can be cross-referenced with the behaviour analysis to back up comments and claims made by users. Many tools can be used to do this, for example, Usabilla and Hotjar.

Review performance of the site – Test the loading speed and check for errors. A slow website can be a disaster for your business with users leaving before getting past the first page. Errors and bugs will cause trust issues and identifying these problems so that they can be fixed is vital to improving your website.

Competitor analysis – Look at industry trends and competitor solutions. Seeing how competitors' websites or products compare to yours gives you an idea of what users expect from your site.

Go through the basics – Check the accessibility, for example, are the colours and font sizes appropriate. Making your website or app accessible will make sure it can be used by as many people as possible.

Analyse page hierarchy – Is it obvious what the user needs to do next. Common problems users have on a website are not being able to find the information they want or not knowing what tasks they need to complete. Spending some time looking at the page hierarchy will help you to spot if this is an issue on your website.

Page Analysis – Look at each page of the website and rate it based on best practice solutions. The main areas to focus on are:

  • Header
  • Footer
  • Search
  • Homepage
  • Product listing page (PLP)
  • Product display page (PDP)
  • Basket
  • Checkout
  • Account
  • Accessibility
  • Performance

Break down these areas further within each section for analysis. For an example of this type of analysis, take a look at our report ‘The state of UX’. It looks at some of the big players in the electronics market and how their sites are stacking up.

Opportunities – Look for other improvement opportunities and usability issues that come up on reviewing the site, make sure you capture these as you go.

Review functions – Look at how well functions such as search and filter work. Is there any room for improvement?

Complete report – Once you’ve collected all the data it’s time to put it into a digestible format. This will highlight the key findings and present hypothesis and solutions to test and implemented on your site.

 

What Next?

Hopefully, you found this useful and you now have a set of hypothesises to test but what’s next? Once you have all these ideas it’s time to create a backlog. You should fix any critical usability first. Then categorising all the issues by the effort required to put them in place and by the impact they will have on the business goals. This will determine their priority.

If you would like some help conducting a UX audit or implementing and coming up with solutions for problems that you have found, we would be happy to help. Get in touch and we can find a solution for your business.


Man on laptop

What is User Testing and Why Do You Need it

Anyone who creates a product or designs a website, whether that be for information purposes or as an eCommerce experience, wants it to be the absolute best it can be. That’s why we put it into the world. No one sets out to create the worst possible experience for their end-users but how do we know it is the best possible experience?

Sure, we can look at it as individual developers or designers and maybe bring in the wider design and development teams but this verges on self-gratification and doesn’t really give you much beyond the fact that you all think you did a great job.

This might sound obvious but surely engaging with the people that are either using or you want to use the product or service you’ve developed is the answer to finding out if it is any good? Well, you’ll be surprised just how many businesses choose not to do this and it is blinding their future development and improvements.

This idea of talking to the end-user isn’t new. Market research and focus groups have been the grounding to some of the biggest advertising campaigns and certainly changed the destiny of several feature films released over the years. What is new is the technology that is being used to achieve this information and the personalisation of that testing to achieve much more detailed data.

 

What We’re Talking About is User Testing.

User testing is when you analyse and measure the experience of a user that is engaging with your product or website either as a whole, or just a portion of it.

In its most simplified explanation, it’s testing and quantifying how someone uses your product, service or website. This in most cases is different from what you think they should be doing with your product or website.

User testing records and observes a set of user’s performing tasks with your product or website to find errors, frustration points and potential areas for improvement to your future product or website development. It can also involve asking a user how the quality of the experience was for them.

Often done with users in location, user testing can also be done remotely which is especially handy when you consider the current various states of lockdown, we find ourselves in. This should not be seen as a blocker to taking to your users.

 

Why User Testing

Outside of getting the valuable information you need from the end-user, several other benefits come along with user testing. At the root, user testing can help save you money, save you time and increase user satisfaction for your business, product or website.

 

Time-Saving

It may seem like an odd suggestion to think that adding another process to your development or design journey is going to save you time, but when you look at the long term the time saving is abundantly clear.

User testing saves you from making mistakes now, rather than later. The longer you stay in isolated product development and planning with your product or website, the longer it will take you to fix issues and functionality down the line. This is especially true in applications and web design, the more complexity and features you add into a product or website, the harder it gets to fix newly discovered problems. And so, it kind of goes without saying but the harder it gets, the more time it takes to unpick and fix them.

 

Money-Saving

Much like the idea of saving time, the suggestion that engaging in user testing which has a cost to it can save you money might sound ludicrous. It isn’t.

If we look back at the long-term benefits, it is clear to see that identifying potential issues early allows them to dealt with before they come intertwined into other developments or feature enhancements.

Rewriting code or redesigning layouts are far from free. Every backtrack or re-work takes hours out of moving forward and those hours have a cost attached to them and they can be substantial especially when you are starting all over again. Finding a problem before a product is completed is almost always cheaper than fixing it later.

And even though you will need to spend a little to undertake the user testing, doing it with a team of experts who can get you the best possible results the first time is another way to ensure that the process is saving you money, making it as cost-effective as possible. Remove the need to try and try again through a period of self-learning and gather valuable insights fast.

 

Increased User Satisfaction

This is a more obviously understandable benefit. Taking feedback and working it into the development and usability of your product or website is going to ensure that when others engage, they won’t be faced with the same issues those in user testing experienced.

Products or websites that focus on user experiences have been proven to increase customer satisfaction. It shows that you care deeply about the experience your users have with your product or website and improving customer satisfaction with enhanced user experience will likely have an impact on sales and your bottom line.

 

User Testing Works

If you need more of a reason to undertake user testing, you only have to look at the results. Usertesting.com has many case studies that highlight the direct benefits of taking this process on.

Zillow increased engagement and conversions by over 8%, Evernote increased user retention by 15% and Walmart Canada increased onsite revenue by 13% as a result of tailoring experiences.

And at Eclipse we’ve been performing user testing for many years and have worked with some of the most well-known brand names in the UK and across the world. Some of our existing clients have found it so beneficial that it is now just included as part of their regular process.

 

How Can Eclipse Help

Hopefully, you can now see the benefits that user testing will bring to your business, product or website and you’re wondering what you need to do to get it going.

The good news is that we’ve developed some ready-to-go packages for remote user testing that we can roll out for you in no time at all. All you need to do is take a look at what is on offer, explore even more of the benefits that can be achieved with user testing and then reach out to our Experience team so that we can make arrangements to gather those valuable insights for you.


Woman working at laptop

5 Animations To Add To Your UI To Improve Your Users Experience

Wondering what all the fuss about UI animation is? Let’s take a look at some of the benefits of adding animation to your designs and 5 examples of the power of animation.

A little bit of animation can go a long way to improve the user experience on a product or site. These small interactions can help users understand where they are on a page and where the menus, modals and new pages are coming from.

Animations can be used to reward users for completing actions. For example, a ‘like’ button with a playful animation can release dopamine which will make users want to keep interacting with it. In the same way, we like to cross items off a to-do list, a visual representation of completing a task is a great way to let users know they have undertaken an action.

Animation can also add hierarchy to a design. An extreme example would be a shaking CTA button. This will grab peoples attention more than anything else on a page. This can have an appropriate use for example if a user keeps missing a field in a form a small nudge can steer them in the right direction. However, overuse can make a design lose all hierarchy, in the same way, making all text large and bold would. This type of animation should be used sparingly.

There can be drawbacks of animating your UI for example it can slow down the experience of an app of a site. It’s important to constantly question why you’re adding animation, is it improving the users’ ability to perform a task or is the animation getting in their way? There is a temptation to add animation for aesthetic purposes but functionality should always be the most important part of the design.

That being said here are 5 examples of animation you can add to your site to improve the UI:

 

1. Submit button

 


(https://dribbble.com/shots/1426764-Submit-Button)

 

Why it works

It gives users feedback that they have taken an action. This fun animation is satisfying and clear.

 

2. Expanding cards

 

Why it works

This is a great example of giving users context of where they are on an app/site because the animation expands it reinforces the idea that they are still on the original page but viewing more detail of the content. It also allows for more information to be displayed and only surfaced when a user is interested in it.

 

3. Loading screen

 

Why it works

A loading screen like this reassures users that content is loading and that the site is working as expected it’s just taking a little while to get the information. The animation can also be a distraction that keeps the user entertained while they wait.

 

4. Slide-out menu

 

Why it works

Similarly to the expanding cards slide-out menus show the user where the element comes from, where it’s going to and where it is housed.  It makes it clear to the user that there is a layering of content and indicates that they can get back to the previous page by closing the menu.

The animation does all of this in a matter of seconds.

 

5. Toggle Button

 

Why are works

This change of state in the toggle indicates that something has changed from one option to another. Having the animation of the button sliding much like a physical switch makes it clear that the relationship between the two states. Without this animation, it’s not as obvious that you have moved from one option to another.

 

Summary

Hopefully, this gave you some inspiration for ways to add meaningful animation into your next project. Remember your animations shouldn’t get in the way of or slow down the user from performing their task. If you’d like some help animating your next project get in touch and we’d be happy to assist.


Moon image

How User Personas Can Get You To The Moon

In this article, we’ll look at how creating a user personas can be beneficial when designing the UI for a rocket. We’ll take a dive into what this persona would look like. Then how we can apply this persona to inform the design of the UI onboard the rocket.

 

The User Persona

User personas are profiles that capture the most important data from a user base. This data is then used to outline the archetypes of your common users. These are usually one-page documents. They are used as a reference point to remind you who your users are and give you a way to communicate this to others. They help you to understand who you're designing for. Giving you an insight into what the behaviour and thought process of that user is.

User personas are beneficial because they are a way of empathising with the people who use the software. They put the user at the centre of the design process. If you are always looking through the eyes of the user you’re more likely to create a solution that works for them. In a previous article we've covered how to create a persona in more detail, but we've covered some of the important points here to.

 

Creating a User Persona

We started by segmenting and creating hypotheses about our different types of users. There are users with two different roles onboard the spaceship. One user is the pilot who will need the essential information to fly the rocket. The other user is the co-pilot who would need secondary monitoring information. These two roles need separating as they have big differences. Within these roles, we can begin to create more nuanced profiles. 

Take a look at the persona below to find out more about our user.

Applying the User Persona to Design

Now we have the persona we can start applying this to our designs. We can take into account the pain points of our user Tim Peake. We can see he has restricted movement and wears gloves. This could influence the design of the UI. We would want to make sure that the screen size isn’t too large so that Tim can reach it all. There shouldn't be any complex gestures in the UI that would be hard to execute with limited movement. This should be worked into the design by using larger touchpoints. 

 


Crew Demo-2 Mission | Official SpaceX Photos | Flickr

 

Tim is a family man and although no stranger to risk he would inevitably be thinking of his family when undertaking a dangerous mission. Images of his family could be made available to him on the software to give him comfort when there are no tasks that require his attention.

There are times when Tim will experience an expected communication outage and long periods flying through space with nothing to do. The UI could include an entertainment system with access to exploration documentaries and motorsports.

Tim assigns a lot of values to tech and is intelligent. The UI should reflect this by being feature-rich as he will be able to cope with an added level of complexity if it enhances the abilities of the rocket. 

He is living his life long dream flying the rocket to the moon. When Tim is performing some of the more complex tasks like launching and landing the rocket he will be feeling an intense pressure to get it right. Simple and easy to use UI will release some of this pressure. As Tim has a background in flying helicopters and aeroplanes, having UI that is already familiar to him will put him at ease and shorten the learning curve. Using skeuomorphism design which emulates familiar objects/control to increase familiarity and will provide comfort to Tim. This can be incorporated into the designs, for example, using an interface for the speedometer that is similar to an analogue version that Tim would be used to seeing in other vehicles.

 


Crew Dragon Interior | Official SpaceX Photos | Flickr

 

Conclusion

User personas are a great tool to guide your design decisions. They can be used whenever there is a need for a user to interact with software, even when that is intergalactic. There’s also no such thing as ‘done’ when it comes to the personas. You should revisit, review and update them regularly as economic and social climate changes users' online behaviours.

Hopefully, you’ve found this useful and feel inspired to create your own, but drop us a line if you’d like a little help – we’d love to talk to you.


Man on mobile phone

From Gimmick, To Practical

Over the years we’ve seen several attempts to utilise built-in sensors to hardware to improve the user experience, but this hasn’t often been particularly useful – more of a gimmick. In some instances, there are examples with Smart TVs where hand gestures were tried and occasionally it made sense – you’re sitting several feet away from the screen and you’ve lost your remote down the side of the sofa.

For example, you could take simple actions things like swiping across the screen to change channels one at a time, but realistically how many people do that? There are hundreds (thousands even) of channels and the ones you want to watch are rarely next to each other, so unless you want a 20-minute workout to find your channel, you’re best off just finding the remote!

We then come on to smaller devices such as phones and tablets. Companies have delved into this space before and there are apps available that make gesture controls available, but I still wonder how useful these are. The likes of contactless gestures for example feel somewhat limited in usefulness when the device is in your hand. As a result, I thought I’d look more closely at how you can better utilise built-in sensors and settings of modern hardware to provide a better, more practical user experience in a GUI.

 

Utilising the Proximity Sensors

Proximity sensors are commonly used in devices now for actions such as sleep/wake of the device, making the screen inactive when you put it to your ear. This is to avoid accidental input when on the phone when on a call. However, how could this technology be better used to enhance the user experience?

Well, let’s just start by clarifying I’m not going to talk about swipeable carousels or contactless scrolling. One of the challenges on these smaller devices is balancing the hierarchy of information, providing clear CTAs and ergonomics.

In the world of e-commerce, for example, one of the core things any business wants you to do is add to the basket and checkout easily. However, throw in your upsells/cross-sells and special offers and the list goes on, and it’s easy to dilute the visibility of your key CTA. As a result, if you could make use of the proximity sensor so that the closer your finger was to the screen, you could resize elements (such as the ‘buy’ CTA) to draw attention to them and make it easier for a user to checkout.

The other practical use was in reference to ergonomics. There are typically some hard-to-reach areas which also happen to be common positioning for functions such as the menu and search.

Companies have experimented before in this space by having the ability to pull the top of the browser down closer to the main touch area, based on a combination of taps. The alternative approach to this however is to sense the proximity to the top of the screen and bring the functions in the top corners closer to avoid the user having to adjust their grip to reach.

 

 

The same thing applies to exit intent. Many websites utilise exit intent capture forms based on the positioning of the cursor on a desktop computer but utilising a similar function with the proximity to the ‘back’ button, for example, could serve a similar purpose.

While I’m talking about this, I should stress I’m not saying you would put all of these into one UI. After all, it would be easy to over-complicate the experience and ultimately make your site more confusing, but all could be relevant considerations based on your user stories.

With all this talk of using proximity sensors, however, you start to wonder how you could utilise some of these actions on a desktop too. One simple example would be increasing GUI elements such as CTAs based on the proximity of the cursor. This would provide more fluid awareness of UI elements than that of rollover states.

 

Ambient light sensors

Another sensor built-in to devices is the ambient light sensor. The purpose of this is to adjust the brightness and tone of the screen based on environmental lighting. This reduces glare and eyestrain of the user for a smoother experience. But what if you could read that lighting sensor and actually adjust the UI itself? Some simple CSS work would allow you to optimise your GUI and actually highlight elements in a much clearer way based on the intensity of the ambient lighting.

 

Dark mode

Dark mode is popular with many people now for the same reasons highlighted above regarding eye strain and glare. The other reason, however, is that people just think it looks cool. So, if you could identify a device was in dark mode, it may be worth creating a dark mode for your website. This would provide a seamless transition between OS and website and provide a more consistent experience for those users, encouraging them to spend longer on your site.

 

Camera

Before I get into this last one, I should call out this one is just a bit of fun – there are all sorts of question marks around security and performance, but what if you could use the camera to understand the user’s emotion whilst on your site? You could adjust the UI and tone of voice based on a user’s expression. Maybe you pick up frustration or confusion and you can proactively offer help on-screen. We use facial expression analysis with our biometric lab, but being able to present information, help or UI changes based on a user’s expression would give another level of hyper-personalisation.

 

As technology gets better and expectations rise, we’re always looking for new ways to improve the user experience. Where constant innovation is important for all of us and sometimes it’s just about a bit of fun, we should also look to see how these innovations can be put to more practical use.


Woman on laptop

Emerging E-Commerce Growth Trends You Should Be Taking Advantage of.

At Eclipse we live and breathe digital commerce. It’s what gets us up in the morning and keeps us going, and as such, we keep up with the latest and greatest in the industry.

We have done some research and pulled together what we see as the emerging trends for the rest of 2020 and into 2021 that’ll help lead your business into growth.

Across the world, peoples buying habits are shifting and the continued variations on lockdown have even hit the boomers by forcing them to shop online – some for the very first time. This may not seem like a big deal to most, but it is a daunting task and the fears and potential risks seem insurmountable.

If you’ve had a chance to see any of the news around digital commerce, you’ll have seen that COVID has accelerated the e-commerce industry’s growth, putting it way ahead of any previous projections and forecasts to date. More and more businesses are starting to take advantage of this by joining the e-commerce business revolution than ever before. Companies that previously embraced the e-commerce trend have already experienced expansion, in the midst of ‘traditional’ retail shrinking.

By the end of 2020, global e-commerce sales are expected to reach £3.3 trillion, as reported by the e-commerce big player Shopify. However, creating a website and selling your products isn’t that easy. The money doesn’t always just start flowing in once you hit publish on that new site. The competition is getting steeper and online shopping behaviours and customer expectations are changing continuously and rapidly.

The changing market calls for keeping up with emerging trends to cut through the noise, get noticed, and attract and retain customers. This is where our research comes in. Read on to see what we think you should be looking into taking advantage of.

 

Product Visuals That Go Beyond Just A Picture

We can all absolutely relate to this – you find a product, you think it’s going to be exactly what you want and you’ve started to justify the purchase in your head but you’re not totally sure if what you’re seeing on the site, is what you will actually get when you make the purchase. So long story short, you hesitate from hitting the purchase button and the shop loses a chance to get a new customer.

As it stands today, simply having online reviews in isolation are not enough to convince a customer to buy your product. Today’s consumers need to trust your company, product and experience before stepping in and starting to purchase. High-resolution images matter hugely in the digital world but even those as static images are no longer enough, either. Customers are demanding more, and that more is 360-degree and AR experiences that let potential buyers view all angles of the product, bring them into their own space and experience what it is like to have it in their houses.

Our AR solution, Ares, allows you to offer exactly that to your existing and potential new customers. It brings 360-degree and full AR experiences to them, right in the browser which removes the need to have to download an app to use it. Keeping people on-site and offering them something that your competitors don’t is only a good thing, especially when that thing is super experiential and proven to drive engagement with customers.

 

Hyper Personalised Commerce

The most successful e-commerce companies are already leveraging personalisation technology to give their customers a customised experience.

These customised experiences are achieved by dynamically showing content, product recommendations, and specific offers based on browsing behaviour, previous actions, prior purchase history, customer demographics, and other enriched personal data.

E-commerce doesn’t include a retail salesperson to recommend products based on interest, preferences, or taste. Human touchpoints provide many opportunities to beat out the competition and some brands have built their entire experience based on this principle. This is what hyper-personalisation on eCommerce does – mimicking what a customer's in-store experience would be, through a unique online customer journey.

Data is what makes this operation work. Social media platforms and search engine tracking tools let you extract tons of personal data about your visitors and buyers, such as search queries, page visits, purchase history, and more. However, limitations are beginning to be placed on access to this data and there is a need to shift to independent data collection from those using your website already. Making it easy for customers to log into your site when visiting it allows you to gather data that will support your ability to personalise future shopping ‘trips’.

“Personalization is the missing ingredient to a successful online shopping experience and will be key to 2020 and the future of e-commerce,” says Juha Valvanne, Founder of Nosto.

To truly get this right, the help of experts is for the most part required to make sure that things are set up in the right way. That will allow you to fully maximise every opportunity that may be possible. Our Experience team do exactly that, and the research is telling us it is a smart investment.

Research has found that customers spend 48% more when their shopping experience is personalized. And, 57% of online shoppers are comfortable with sharing their personal information with a brand if it benefits their shopping experience.

When this is all done right, a customer will feel like you’re reading their mind. This emotional response generates a sense of loyalty, but you need to remember to not do too much too soon as it could feel like a breach of privacy. We’ve all thought our phones are listening to our conversations and felt like our personal lives have been somewhat invaded, this is not what you’re trying to achieve. It’s a fine line and our Experience team are experts at walking it.

 

Make it easier for customers to check out and pay

It’s one thing to build an incredible shopping journey with AR and 360-degree products, personalised recommendations and seamless transitions whilst browsing but it needs to be carried through to the cart and the checkout experience.

Customers want to get in, have an amazing experience and checkout. It needs to be easy and seamless and so many businesses fall down at this point. Ask too many questions, make it too hard to check out and don’t offer enough ways to pay.

For example, when shopping from an overseas business your customer may expect to be able to buy using their preferred local payment provider or in their local currency.

Additionally, customers are used to the ease of shopping on big online retailers like Amazon and ASOS. They save their customers’ billing and shipping information to make for a fast and easy checkout experience without a lot of data entry. Ecommerce websites are increasingly using payment options like Apple Pay, Paypal, and other financing options that enable a frictionless checkout.

Updating your payment provider with a company like Adyen makes doing this incredibly easy.  Being able to take payments from Apple Pay and Google Pay will help with those mobile shoppers and having repayment options like Klarna allow people the option to spread payments.

These are all things that help with conversion, could help increase the average cart value and keep customers coming back. To find out more about making this change, Eclipse can help too. We’re an authorised partner of Adyen and can help you make that checkout experience your customers want a reality.

 

Create Re-occurring Revenue Opportunities with Subscriptions

We’ve highlighted this before in an article we wrote recently. Recent research has shown that UK consumers now have on average seven subscriptions per household, spending around £46 a month or £552 a year.

During lockdown retail subscriptions jumped 50% with food boxes, wine and grooming leading the way.

In research conducted by Barclaycard, it was found that 8 in 10, that’s 82%, of retailers believe the popularity of subscription services increased during the lockdown as shoppers saw it as a way to take advantage of a safe and convenient way to receive everything from essential items such as groceries all the way through to entertainment.

By getting customers to sign up to a subscription service you’re allowing your product to become part of their routine. It becomes an expected part of the way they live their lives and for the most part, they stop looking at special offers or being distracted by competition for those products. As long as your product continues to shine through speedy delivery and always awesome quality, you’ve got a pretty good bet that you’re going to have a customer for life.

And if you needed more reason to consider it as a new business opportunity the research went on to find that 75% of retailers believe subscription services offer a more reliable and predictable source of income than a one-time charge model. Around 9 in 10 or 87% think subscription services allow their business to keep up with competitors or other brands that launch similar products and 82% also said that subscription services allow them to build customer relationships through increased contact.

These are some of the biggest emerging trends that we’ve spotted, and we’ll always continue our research and bring you the latest emerging trends as we find them. And if you would like to talk to us about anything you’ve read in this article, we’re here to chat it through and offer advice and as much help as we can.


The Good And Bad of Microcopy

The Good And Bad of Microcopy

Microcopy is text on a website or interface that helps to guide the user in their journey. This is the text you see on buttons, forms, tooltips and labels. Microcopy must be clear and easy to understand, no industry jargon. It should provide context and let the user know what actions they are taking. It’s not about persuading and selling so differs from traditional copywriting. 

In this article, we’ll look at some good and bad examples of microcopy used across some familiar brands websites.

Let’s take a look at some examples of great microcopy:

Hello Fresh

On their homepage, Hello Fresh has multiple CTA’s that all go to the same page. By changing the copy on these they capture users who are at different stages of the purchasing process. They can be broadly split into two categories, one where users are still in the research stage so less committal CTAs like ‘see our menus’ and ‘learn more’ will appeal to them. The other CTA ‘get started’  captures those users who are ready to purchase.

Expedia

The microcopy in the search field speaks directly to the user with simple language. It also offers suggestions for the type of thing that they can search for. This will help to guide the user and get them to the information they want to find quickly.

 

Evans Cycles

Evans cycles have added reassurance messaging to their checkout CTA. It is concise and is a great addition considering the high-value purchase a user is about to make. Informing the users of the security at this stage will help to relieve any anxiety they may have over their online purchase.

 

 

invision

This handy tooltip from invision lets the user know what exactly will happen when they choose to get a public share link. The link is copied to the clipboard, the word ‘clipboard’ could be considered technical language but considering the users of this product, there is an assumed level of technical understanding. Users are then reminded of this with positive messaging once they have selected this option.

 

 

Typeform

Typeform has created clarity between the two actions, log in and sign up so there is less chance of users selecting the wrong option. This will get users to where they want to be for the first time creating a smooth journey.

 


When signing up and choosing a password microcopy aids the user by defining the password requirements. Explaining what they need from a user upfront avoids users becoming frustrated by not knowing what action they need to take.

 

 

Now we’ve covered what you should be doing let’s see what mistakes we should avoid making:

Amazon

The text in this search field is ambiguous so it’s not clear what the user should input into the field. This may lead to users not finding the information they are looking for.

 

 

Blackboard

In this registration form, the supporting text in the fields is cumbersome. It doesn’t give the user any more information it just adds to the cognitive load by adding to what the user has to read.

The field ‘Registering as’ is ambiguous and has no supporting information. Supporting microcopy would be useful here to let the user know exactly what is meant by this unfamiliar field.

 

Montblanc 

On Montblanc’s website, they use overly complex language. This may be a deliberate choice to support the brands’ image. While this is valid for marketing when considering the user experience clarity is more important than persuasion at this stage.

 



 

As with most things in life microcopy can be used for good and bad. Let’s take a look at a dark UX pattern that utilises microcopy.

 

Treatwell

In the booking process on Treatwell users are asked about marketing preferences. One of these options check the box if you don’t want to receive marketing updates and the other is check this box if you do want to receive updates. This deliberately confusing language is likely to confuse users into opting into at least one of the updates. While this may serve the business goal it may not be serving the users goal. Whether this is good or bad UX writing I will leave for you to decide.

 

 

In Conclusion

Good UX writing vastly improves the user experience, it builds trust and in many cases increases conversion and engagement. So there’s no better time to review the copy on your website or product to delight your users.