user interface

Practical Guidelines for Using Background Videos on Your Website

Posted on by Mario

When to use background videos on your websites

Nowadays, as a web developer you can use background videos as a great way to improve your website’s look. Moreover, it will also make your videos more enjoyable for visitors. Why? Because good videos can tell the story of a business which each business will surely have their own story that can be told better. So, now you are interested in making background videos, but don’t know how to start? Let us guide you! All you have to do is just keep scrolling and reading.

Best Practices for Adding Background Video

The best reason why you use a background video is because when you use it, your website will look better. Therefore, it is tempting to use any video that looks shiny and interesting without considering its impact. Even though those shiny things may contribute you a lack of minimal advantage, in most cases, they are also the biggest factors that contribute you a slower site. Therefore, trading a static image for video must be worth it.

Below are some things to consider:

  • Select a short length video that loads quickly.
  • Don’t use sound. Sound adds the file size and gives little value.
  • Use a placeholder. This is used to anticipate if the video is stopped or can’t be played.
  • Replace the video with an image for the mobile experience. You can hide the background video element at mobile breakpoints to reveal the background image. Besides, it will give the best experience for the mobile visitor.

When You Shouldn’t Use a Background Video

For some reasons, a background video is good at grabbing attention. However, instead of focusing on your copy, a background video might take up all the attention on them.

On the other hand, if you are too aggressive with your background video, it will overpower the important content. When you want to present complex ideas, like sales-related content to read, videos can be distracting. In terms of explaining, words are still the best. So, don’t run the risk of distracting or losing visitors with a video.

Choose Useful Over Complex

When we are deciding whether or not to add an element, you have to think about the mistakes that it might cause. For instance, it’s easy to make the mistake of thinking you’ll enhance an experience by sprinkling in some fun animations or by hiding and revealing elements, but you might actually be adding an obstacle.

So, the simplest way to keep thing simple is to make it as simple as possible. Your background video should reinforce the content message, eliminate barriers, and complement the rest of your site’s content. In other words, it should bring out the aesthetic element of the website, not stand alone or get in the way.

The Smarts behind Adding a Background Video

A best-case scenario is when background videos supplement or enhance the CTA.

  • Make It Personal

Generally, people want to see other people. It will be easier for users to decide whether they have to take an action, like signing up, making a purchase, or getting in touch once they see a person. Therefore, adding a short video will allow people to visualize themselves working with you.

  • Make it Pop

Most of the case, people want to have text layered on top of the background video, so make sure it’s easy to read throughout the entire video loop. Furthermore, you can aim for a strong light/dark contrast between the background video on the copy.

You can also apply a solid, monochromatic filter on top of the video to ensure full, legible contrast. This technique will not only make this look super professional, but the color contrast also makes the text, form, and landing page CTA look impressive. Other method that you can also try is by including a text shadow, or a semi-opaque color block behind the text.

  • Keep It Short

It is important to keep the video short. Therefore, it is better to make a video with the length no longer than 10 seconds, but make sure that this short, looping video should be enough to get the point across without impacting the load time.

Sometimes, creating a loop can be challenging, the loop will appear out of place or incomplete if the video is too short. On the other hand, if the video is too long, your visitors can easily click away from the site or to another page before the video’s had a chance to do a great thing.

If you can’t produce your own video, you can search for other places to get stock video clip. Double check the copyrights associated with any video before you use it. However, we would recommend you to always produce your own video to make it more personal.

  • Make It Unstoppable

Be confident, as long as you give a good quality and on brand video content, your visitors will likely press play or pause. The best way that you can offer is to play the background videos automatically. This will surely grab the visitor’s attention and keep them interested, as soon as they see the video element.

Don’t Forget the Analytics

It’s important to run a test, such as an A/B test to compare how your page performs with a background video compared with a static image. Just to be safe, you can start by pushing a small portion of your traffic towards the page. However, most usability specialists lean on experience, gut, and personal opinion when deciding what design brings customers satisfaction. This method is, of course, not right as you can use data as a great way to know what your customers actually think, as opposed to what they say they think.

So, have you tried background video in your website? It’s worth trying the method that will surely make your site look more sophisticated and smart. Good Luck!

Having Lawyers as Your Client? Here’s How You Will Please Them with Your Web Design for Their Law Firm

Posted on by Mario

As a web designer, we meet different kinds of people from different kinds of professions as clients, including from law firms. A law firm is a business entity made by lawyers to provide legal services and take part in the practice of law. They represent legality, liability, and dependability. If you own a law firm, this can be tough when it comes to designing the website, but don’t worry; we’ve got tips to deal with it!

Law firms, like any other business entity, have clients and potential clients visiting their website to see if they are credible or trustworthy. For that reason, we have to excel in designing the website with these following tips:

Don’t Separate User-friendliness from Esthetics
A good website is the one that can combine “user-friendliness” and “esthetics.” A website that is not only easy to access, but also good-looking at once. You have to pay attention to the balance between usability and esthetics. If your website is easily accessible, make sure the design is not too plain, even if you are designing a strict law firm website. A website is somewhat your potential clients’ first impression; therefore, create a friendly user experience if you want to turn your potential clients into the real clients.

Navigation – Make it Simple
Your website’s navigation is the crucial part that has a big impact on your website’s result. For that reason, your website’s navigation will determine whether your website is a success or a failure. Remember, the main objective here is to create a user-friendly website. First, avoid creating overwhelming multiple navigation choices, as this will cause your visitors to skip the important parts of your website due to the too many choices.

Your main menu should be limited to no more than 7 menu choices. This way, your site’s visitors will not skip the important parts. Also, place the navigational menus in places that can reach visitors’ eyes easily, such as horizontal navigation across the top or vertical navigation down the left side. Simple navigation means more visitors to come.

Content – Brief and Understandable
Most of law firms’ “bad habit” is that they provide long written texts that can ruin their website’s look and efficiency. Your website content should not present long written texts. Too much content will only make visitors skip it and leave your website immediately. We recommend using strong headlines and subheadings to define your law firm as a whole; to make a point of what your law firm does. Make sure it gives the right and strong message to the visitors. You can also use bulleted or numbered lists, as they are easier for people to read and understand the majority of what your law firm does.

Remember, be concise and clear at the same time. Also, you can use graphics and videos to entertain your visitors without making them read any more text that will tire them out.

Color – Let Your Palette Communicate
Color has an important role for your law firm’s website. Color is a powerful form of communication that can represent your website’s value. It can attract your visitors’ reaction, change their way of thinking as well as actions. Here’s the overview of the “meaning” conveyed by some colors for your inspiration.

Color Positive Meaning Negative Meaning
Red Passionate, exciting, and courageous Defiant, aggressive, and urgent
Blue Trustworthy, loyal, and logical Cold, aloof, and unfriendly.
Green Faith, peaceful, and efficient Boring, stagnate, and bland
Black Sophisticated, formal, and elegant Evil, cold, and menacing
Grey Conservative, refined, and professional Boring, pessimist, and depressing
White Pure, safe, and truthful Plain, boring, and unfriendly
Brown Timeless, dependable, and earthy Materialistic, predictable, and humorless
Purple Creative, luxurious, and wealthy Inferior, gloomy, and suppressive

 

Law firms represent truth, loyalty, courage and formality. The combination of black and grey will be suitable to present your law firm.

Typography – For a Readable Text
Typography is not always about making the text look beautiful; it is the art of making things readable but also attractive at the same time. Even though law firms don’t always rely on attractiveness, making an exception is a good step towards a great website. The best result of typography depends on how you arrange the use of words, color, and graphics.

The first thing you have to pay attention is the font; don’t over use fonts. Keep your typeface consistent to make it readable. Also, you should be consistent in applying the heading size, font, and attributes. Once you choose the typeface, size and color, keep it that way and don’t change it.

That’s all the tips you need to know to design your law firm’s website. Remember, keep it simple and understandable. Your law firm should not explain too much details on the website as it can ruin your website’s practicality. Make it conservative but concise. That way, you can create the best quality law firm website that can attract many visitors and turn them into your real clients in the future.

Why UI Changes Annoy People and How to Handle It

Posted on by Mario

When it comes to designing for good user interfaces, especially for website design interfaces, there are so many reading patterns that you can apply. Each pattern has their own knowledge of how people perceive visual information and theory of how to improve user experience while reading or observing content. Among so many theories, there are three patterns that gain the most popularity. They are the Gutenberg Diagram, the F-pattern, and the Z-pattern. If you are a web designer, we  highly recommend this article for you!

The Gutenberg Diagram
This theory reflects the western culture of reading which is top to bottom and left to right.

image 1 for UI changes

From the diagram above, we can see that there are four quadrants. For key contents like a headline and a logo, you’d better place it in the top left quadrant. Then, you can place logical conclusion in the bottom right quadrant in the bottom quadrant. Therefore, it is recommended to put a CTA (call-to-action) in this section in the form of text, a video, or a link.

The F-Pattern
In F-pattern, people start engaging with content by moving their eyes in a horizontal line. Then, they scan a vertical line trying to find the points they’re interested in. Then, they will continue what they’re looking for after scanning the content horizontally.

image 2 for UI changes

 

You can use elements like bullet, points, typography, colored buttons, and highlighted texts and so on to improve the user experience. These elements give visual weight to the interface and indicate important points.

The Z-Pattern
Many people consider Z-pattern as the king of landing pages since it covers important aspects including visual hierarchy, content structure, and CTAs. Different from F-pattern, which is more suitable for text- or content-heavy page, the Z-pattern efficiently grasps users’ attention on landing pages with minimal copy. Here is an image of Z-pattern.

image 3 for UI changes

You can follow the structure below when designing with the Z-pattern:

  1. A top horizontal line should include catchy contents and elements like the logo and navigation bar (so users can quickly access the website’s pages).
  2. Following a classic storytelling approach, a diagonal line should introduce users to the main content including the main copy, attention-grabbing images, slideshows, and so on.
  3. Finally, a lower horizontal line should feature a CTA that stimulates users to perform a certain action such as signing up, subscribing, or making a purchase.

How to Prevent User Dissatisfaction with Interface Changes

Since everyone is unique,  we cannot determine which pattern that might suit your users. To know what kind of pattern that might suit your readers; you can apply the following methods to evaluate the design and functionality of a new or an existing system with real users. Here are some of the methods:

A/B Testing
Comparing two different concepts is called as A/B testing or split testing. In A/B testing, you can compare buttons, CTAs, color schemes, and banners. The aim of A/B testing is to figure out which of various options is the most successful, for instance, which button gets the most clicks. Each case of A/B testing is unique. What elements you test depends on your business goals. However,  the following elements are generally tested:

  • Copy (product descriptions, button text, etc.)
  • Calls-to-action (for example, their placement or wording)
  • Application forms
  • Layouts
  • Images
  • Color Schemes

Bear in mind that in order to get relevant results, the A/B testing should be performed simultaneously. Besides, doing A/B tests will avoid you from audience backlash and can even help you achieve better conversion rates by making necessary tweaks to an interface.

Hallway Testing
If you are looking for an informal way, the hallway testing is the answer. It involves going to a crowded area and simply asking passers-by to test and evaluate an interface. For example, you may go to local Starbucks and do little interviews with strangers in that cozy place. You can also apply this method with your office colleagues. Therefore, to conduct testing successfully, you can plan everything in advance.

By performing this method, you can figure out what elements of an interface puzzle users and how your users conceive the system as a whole.

Five-Second Testing
The main purpose of 5-second testing is to elicit the user’s first impressions to an interface and discover whether a website or an app communicates its purpose to its visitors. In 5-seconds, they have to view an interface and try to remember as much as possible. Then, they will be given some questions regarding the sense of their reactions.

Through 5-second observing, you can generally aim at evaluating a visual UI component rather than the whole interface.

Conclusion
Even though the changes of UI will upset people,  ignoring the last trend will ruin your product. Therefore, you need to study your pattern before applying it. This trick will make the necessary tweaks without scaring off your users.