In this session, Michel will discuss:

• The main traffic channels that truly move the needle
• What actually converts visitors (hint: it’s not just “more leads”)
• How to align usability, messaging, and strategy into one clear system

If you care about conversion, clarity, and real growth — this is worth the watch. To schedule a 30 min FREE consultation with Michel to create your own marketing strategy, email her at michel@cuecamp.com.

Watch the Webinar Recording:

View Slides:

The post Traffic to Customers, A Marketing Strategy That Converts (Webinar Recording) appeared first on CueCamp.

Why You Watch: User-Friendly Website Design Tips

• Menu navigation: Make it effortless for users to find what they need through well-organized, easy-to-understand menus on your website.
• Content placement: Optimize your layout to guide visitors with ease to content that they are looking for.
• User journey: Ensure every interaction is intuitive, and there are not too many steps to find content of relevance.

Learn how to create a website that keeps your audience coming back. A user-friendly website is key to creating a simple and intuitive user experience. Don’t miss this opportunity to elevate your digital presence!

Free Resource: Get a free review of the user experience (UX) of your website by requesting a free marketing and UX analysis from CueCamp today. You will receive a report with recommendations for your website.

About the Speaker: Michel Ann Sharritt

Cue Camp, Founder and Vice President

Michel Sharritt, a leader in playability and usability, has over a decade of experience helping Fortune 100/500 companies like Microsoft, Disney, and Sony create engaging, accessible, and successful products. An expert in game design and user experience, Michel has presented globally and published extensively on usability, accessibility, and design methodologies.

The post User-Friendly Website Design Tips (Webinar) appeared first on CueCamp.

1. Make Navigation Simple and Intuitive

Navigation is a critical component of UX. Visitors should be able to find what they are looking for quickly and easily. A well-designed navigation menu should be simple, clear, and intuitive. Consider using clear and concise language, organized categories, and a hierarchical structure that guides visitors to the information they need. Want a research-driven report on your website for free? Ask CueCamp for a free UX analysis of your website.

2. Use High-Quality Visual Content

Visual content, such as images and videos, can be extremely impactful in engaging visitors and improving UX. High-quality visual content can help visitors better understand the information being presented and can break up large blocks of text, making it easier to read. When selecting images and videos, be sure to choose high-quality, relevant content that supports your message.

3. Provide Relevant and Valuable Content

The content of your website is one of the most important aspects of UX. Make sure your content is relevant to your target audience and provides value to them. This can include information about your products or services, blog posts, and resources such as how-to guides or eBooks. Keep your content updated and consider using a content management system to make it easy to manage and update your website’s content.

4. Make Sure Your Website is Mobile-Friendly

With the increasing use of mobile devices, it is more important than ever to make sure your website is mobile-friendly. A mobile-friendly website should be optimized for smaller screens, with easy-to-use navigation and clear, concise content. Consider using responsive design to ensure that your website looks great on any device.

5. Optimize for Speed

Website speed is a critical component of UX. Visitors expect websites to load quickly and will quickly become frustrated if a website takes too long to load. Make sure your website is optimized for speed by using a fast hosting service, compressing images and other media, and using a content delivery network (CDN) if necessary.

6. Consider User Feedback

Finally, it’s important to consider user feedback when designing and improving your website. Ask for feedback from your customers, friends, and family and use this feedback to make changes to your website that will improve the user experience. You can also use analytics tools to track how visitors are using your website and make changes based on the data.

In conclusion, improving the user experience for your website can have a significant impact on the success of your business. Free tools are available to review your website’s UX, such as CueCamp’s free user experience analysis. By following these tips, small business owners can create a website that is user-friendly, visually appealing, and provides value to their visitors. In doing so, they can increase website traffic, customer loyalty, and overall business growth.

The post User Experience Tips for Websites appeared first on CueCamp.

UX: What Is It and Why Is It so Important?

UX is a popular acronym for user experience. Simply put, the term describes how the user interacts with the software. Was it easy to navigate? Did they have to deal with multiple pop-up ads? How long did it take for the page to load?

The best digital marketing campaigns offer seamless experiences that compel users to take action and share the pages with other prospective users. This is why you need to invest in the services of an experienced UX developer or at least learn advanced UX through online courses if you want to control your campaign.

How Does UX Impact Your Content Strategy

The user experience of your website, mobile application, or blog can affect your content strategy positively or negatively. This piece addresses some of the positives of investing in high-quality user experience.

1. Improves User Engagement

Digital marketing campaigns allow you to widen the horizon and increase your reach. However, digital users need to remain engaged long enough to find out if your products or services are worth their time. By investing in a high-quality user experience, you will improve content engagement, thus increasing your chances of generating leads for your business.

2. Faster Return on Investment (ROI)

The more engaging and efficient your digital marketing campaign is, the faster you will get a return on your investment. It is important to note that digital marketing campaigns are more affordable than traditional marketing campaigns and they are also more likely to go viral. One client who is satisfied with your content can share it with others who will be more willing to trust your brand.

3. High-Value UX Puts You Ahead of the Competition

Digital marketing is evolving faster than any other form of marketing. If you pay attention to trends and implement UX best practices, you will stay ahead of the competition. Search engines also rank websites higher when they have good UX and a low bounce rate. Since people are more likely to click on the first few websites when they search for a product or service, using UX to boost your ranking is a good idea.

4. Promotes Customer Retention

Everyone loves return customers but getting people to return to your business requires building their trust and incentivizing loyalty. If customers have a terrible user experience because you did not invest in a great UX, they are unlikely to patronize your service a second time. It may seem like you are spending a lot during the initial creation, but it would be worth it for conversions in the long run.

5. Cuts Down Maintenance Cost

If you are trying to create websites as part of your digital marketing campaign, you will have to keep a software engineering team on standby for web or mobile app maintenance. The cost of maintenance will be significantly higher if the initial UX was less than adequate. In no time, you may need to overhaul the entire platform instead of performing basic bug fixes.

6. Increased Sales

A good UX should come with a good user interface and high-quality products or services. Combined, all these features will help you create a lucrative sales funnel that will boost revenue for your business. There are different ways great UX can improve sales. You can provide real-time support, smart searching, quick payment, quick checkout, and an all-around smoother experience.

Conclusion

Digital marketing isn’t going to lose relevance anytime soon. Digital advertisers are projected to spend over $616.00 billion on advertising by the end of 2022, according to Statista. Since you have already established that UX is an important aspect of any digital marketing strategy, you should look for ways to optimize your UX to improve sales, increase customer retention, and get a faster return on investments in your business.

The post How UX Impacts Your Digital Marketing Strategy appeared first on CueCamp.

A considerable amount of that success derives from the ongoing effort of Airbnb’s design team to create a user experience for its booking platform which surpasses that of other similar services.

Airbnb’s Landing Page design (above the fold) as I am typing this

As a designer, I was always astonished of how Airbnb approaches their product design challenges and delivers a product that converts, for years now. So in this article, I’ll try to identify what makes their landing page design different and why it is successful.

Visual Clarity and Minimalism

I strive for two things in design: simplicity and clarity. Great design is born of those things.” — Lindon Leader

Using colour contrast and shadows, the user interface is basically structured as two layers: The card, which contains the explanatory text and the Call-to-Action (CTA) button, forms the upper layer, while the rest of the page is perceived as the background layer.

Perceived layers of user interface

With little to no cognitive effort, users can identify the upper layer (card) as the area with which they can interact. The page as a whole does not overload the users with information, hence framing a clear interaction path for users who land on it.

Reducing the cognitive load the user needs for achieving his goals is of the utmost importance when designing for humans.

Let’s see how it compares to Booking’s landing page design, in terms of visual clarity, by using predictive technology:

Measuring optical clarity of the landing pages (above the fold) for Booking.com and Airbnb via VisualEyes plugin

More clarity contributes to easier and driven scanning of information. Two metrics that can determine how an interface is efficiently designed for human interaction is Visual Complexity and Prototypicality. The conjunction of those two metrics affects the aesthetics processing of the user significantly and, thus, defines how he will interact with the interface.

More complexity requires more cognitive load. More cognitive load means less user engagement and, sequentially, less conversion and profitability.

Key Takeaway:

Airbnb has set an interaction focal point; therefore users have already determined where they will have to “lay their eyes” in order to forage information.

The Double Z-Pattern

The Z-Pattern (for people that read from left to right)

Humans have a natural reading pattern, which is applied when visual stimuli are present. Following the natural flow of eye-scanning a layout, the Z-Pattern complements better single-purpose webpages that contain only one CTA.

This specific pattern “traces” eye movement of the users, thus allowing for strategic placement of visual elements.

So, Airbnb used the Z-Pattern.

Twice.

Airbnb is setting focal points for their users, using the Z-Pattern

By utilising this layout, Airbnb’s designers achieved to establish a concise visual hierarchy. Areas of interest that convey some kind of message are pinpointed and brought up to the user’s attention. Below you can view how Airbnb’s Z-layout translates into attention heatmaps:

Attention Heatmaps generated in Figma, using the VisualEyes plugin.

Attention heatmaps suggest that the selected areas are drawing the most of the user’s attention in this particular instance.

As it is shown on the right image, the Area of Interest, in which the Card is placed, stands out three times more than the focal point of the hero image, while the CTA Button on the bottom right of the white card is almost three times more prominent than the card itself.

Key Takeaway

Airbnb augments, even more, the pre-established interaction path, by driving most of the attention to the single action -clicking the button- needed in order to “dive deeper” into their product.

Read more on the Z-Pattern here.

Priming

“Priming is a technique whereby exposure to one stimulus influences a response to a subsequent stimulus, without conscious guidance or intention.”

In other words, priming takes place when taking one’s memories or mental associations and using them to influence his future behaviour towards an upcoming matter.

The first image (Hero) someone views when interacting with Airbnb’s website

Almost all websites/products apply the “priming” effect to their audience in some way. In our case, the Airbnb landing page design, visitors are subject to associative priming with the use of imagery. The design team is doing an excellent job in finding images that fit the company’s target group perfectly, so they can ensure that the desired emotions will be triggered.

Different target audiences, different hero images.

Which words pop in your mind when viewing the house on the left image? Maybe something like soothing, peaceful, refreshing, unique, care-free or even vacation-material?

Key Takeaway:

By “priming” their target audience, Airbnb’s designers use carefully-picked images to spark the emotions that could be associated with the subsequent expected experience: Staying in an awesome place for their vacation.

Read more on Priming from NN/g here.

Simple, strong and effective language

The text serves two purposes:

1. Validate the reason a user visited the website in the first place — “I’m where I was supposed to.”
2. Set a user goal — “Now I should search for places I want to visit.”

Using simple and clear language when communicating messages is essential in web design, as it establishes that your audience will not misinterpret your offering. Remember that communication is a “two-way street”:

“How well we communicate is determined not by how well we say things, but how well we are understood.” — Andrew Grove

Airbnb avoids unnecessary jargon, while choosing a set of words that their target audience will comfortably understand.

Key Takeaway:

Text content was carefully selected to disclose a specific message and the value of the product as quickly as possible, with few words in the play. All that without endangering that their audience will not understand the offering.

Conclusion

Insightful design is human-oriented and drives human actions and emotions. Airbnb’s design team found a very subtle -almost transparent- way to direct users’ actions on their website. The framing of the experience was so delicately designed that it accelerates interaction while keeping the primary user goal in mind.

Thanks for tuning in!

Written by: Thanos Dimitriou (via Medium)
Posted by: CueCamp

The post How Airbnb drives users’ actions with their landing page design — a UX analysis appeared first on CueCamp.

Visual / Content Trends

Clean-lines and simple designs are still being used across several industries, but the use of shapes in web designs will be used more in the future. From a design perspective, this will help draw a consumer’s attention, as it is unexpected and differentiates the brand, given typical design aesthetics we are used to seeing. In the coming year, a rise in animated content, bold colors and fonts, and video will dominate website marketing trends.

Bold Colors & Serif Fonts

Bold colors are on the palette: offering marketers a way to brand their company in a way that sticks out to consumers.

Large, chunky fonts seen in decades past are resurfacing, providing a way for marketers to differentiate themselves and their brand. Serifs, or decorative stroke that finishes off a letter, are trending upwards in web marketing. As screen resolutions rise across mobile devices and desktop screens, serif fonts are becoming more popular. Sans-serif (no serifs) fonts were the trend of years past when screen resolutions were not as high, and these fonts looked better on lower-resolution displays (making them cleaner and easier to read).

Animation / 3D View

Animations on your homepage create visual interest that can attract and engage consumers. Besides the resurgence of animated gifs, micro-animations will continue to grow in importance: especially for e-commerce websites and the fashion and décor industries. For example, consumers may want to see a 360 degree view of clothing, jewelry, or home décor. Consumers want to see the entire look of a piece they are buying. Augmented reality apps are on the rise, allowing users to visually see paint colors, furniture or other items placed in their home by overlaying the product using a smartphone and its camera.

Raising Engagement with Video

We know that everyone’s attention span is directed towards animated visuals and video, as animation is a great way to capture attention. Videos provide a source of information and guidance that lead to higher conversion when done appropriately. Video content needs to be part of your marketing strategy in order to capture consumer’s attention, while providing rich, engaging content. Typically, less than one-minute videos are recommended across both website and social channels to get a message across efficiently.

Security and Performance Metrics

Data Security

Google Chrome, the most-used browser, will notify users when a website is not secured with an SSL certificate. These requirements will continue to tighten, notifying users when they visit a website that is not fully secured. Just having an SSL certificate is no longer enough – all resources on a web page (images, form data, etc.) need to be transmitted securely in order to pass muster. Fully encrypting data using SSL will provide users the best, most secure experience: ensuring that sensitive data is transmitted securely between the browser and web server.

If you have a website or plan to launch one soon, be sure that every page on your website is secured using SSL. Not securing your website will not only negatively impact the user experience, but will also lower search rankings for the website. In this day and age, consumers are concerned about privacy issues. Maintaining a secure site is important so that consumers feel that they can browse and purchase items from your site without compromising their privacy. According to CA Technologies, 86% of those surveyed value security over convenience when purchasing a product. 78% of those interviewed felt that high security of their personal information was of primary concern. Privacy is a requirement for customer loyalty: making security of critical importance.

Mobile-First Design

Mobile visitors have already surpassed desktop visitors across the web, making it even more important for your website to be responsive: available to users on both platforms. Responsive design allows content to scale and lay-out differently based upon the size of the screen in which the content is being viewed. This trend towards mobile will continue , making a mobile-optimized website a necessity.

Website Performance / Speed

These two items are the most important when it comes to SEO, page ranking and usability. Research provided by Google earlier this year outlined that sites that appear on page one of Google display their primary content in 1.19 seconds on average, while those on page two display primary content in 1.29 seconds.

Some tools that can help you gauge your website speed are Website Grader by HubSpot (shown above), Google PageSpeed Insights, and Pingdom Website Speed Test.

Search Trends

As previously mentioned, website speed is important not only for the user experience, but also for search rankings. Besides page speed, voice search, and a trend towards user-friendly content, will be seen as search algorithms are better able to process human language.

Voice Search

Voice Search will see an increased share of search queries on search engines such as Google. With the increased usage of bots and intelligent devices in the home, people will use technologies like Alexa, Siri and Google Assistant to look up information. This preference will raise the rates of search queries using more natural language, as opposed to keywords. For example, a traditional search for “Chicago weather” might be replaced with “What is the current weather in Chicago?”, and could yield different search results depending on the algorithm and website SEO.

ComScore put out a study in 2019 that half of all online searches will be voice-based by 2020. Anticipate that Google will be changing with the times and changing their search algorithms, which will impact your search campaign strategies that you go to market with today.

Search Algorithm Changes

Google search algorithm changes can have a major impact on the SEO of websites, and the ranking achieved on Google. In the past, websites would focus on adding as many keywords as possible (for example, listing towns in a page footer) to attract as much traffic as possible. However, Google search algorithms are getting better and better at ‘reading’ content in a fashion similar to users, and interpreting what your content actually says. This reinforces good copywriting practices, and creates a better user experience (UX) for your users.

Conclusion

With a new decade upon us, we will see the rise of new technologies and a continuation of some existing trends within digital marketing. Unfortunately, the days are gone where a sole webmaster can handle the wide variety of expertise involved in creating a well-designed website. A combination of overlapping skills is required: in addition to programming, graphic design, SEO, security, social media marketing, content writing and user-experience expertise is needed.

To gauge how your website currently measures up, a great way to measure its effectiveness is to request a free usability analysis from CueCamp. This report is in video form, generated by CueCamp’s team of experts to show the user-friendliness and marketing effectiveness of your website. Start out on the right foot, and reach out today.

Authors: Shannon Olear and Matt Sharritt, Ph.D. (CueCamp)

The post Website Trends: Marketing Opportunities to Maximize Growth appeared first on CueCamp.

Consider the ease of simply clicking a button within an attractive user interface, following the vehicle as it comes to your door and enjoying a smooth ride. For all the talk about their technology, their business model and their strategy, experience is what ensures customers continue to use the service. This idea has brought me to the concept of UX as strategy. It’s the idea that today, more than anything else, your UX will determine the success or failure of your software and your business.

A killer UX creates deeper customer engagement and loyalty.

A powerful and engaging UX doesn’t just make your product easier to use — it helps you engage more deeply with your customers, ensuring they stay loyal to you rather than looking to your competition. It builds brand loyalty and increases the chances that your customers will become your most effective advocates. Your UX also plays a key role in enrichment, ensuring your customers purchase additional products and services.

Your UX now forms the heart of your competitive differentiation.

I don’t believe I’m writing anything new in highlighting the importance of UX for software and applications. What is new, however, is how your UX can form the basis of your competitive differentiation. Building long-term, sustainable, competitive differentiation is one of the toughest objectives that executives face. In today’s digital world, the UX of your products and services plays a fundamental role. People engage with brands and companies via their software, and thus via their UX.

It is your brand, plus highly satisfied customers and fans, that will result not just in your business growing, but in building competitive differentiation. For example, it’s incredibly hard for other companies to match the loyalty of people who love Apple’s products and services. Even when other manufacturers build products that can compete on a technical and functional level, and that may even sell at lower price points, people remain loyal to the brand. Apple has been at the forefront of blending the concept of a brand with people’s identity, their image of who they are as individuals. Apple’s UX is at the very heart of this.

Making UX Your Strategy

At a high level, I recommend the following actions as you make UX your business strategy:

• Link your design metrics to your business metrics.

Those individuals responsible for the design of your software are now at the heart of the success of your business. As a result, we also need to ensure that their success, and that of your design, becomes linked to your business’s key performance indicators.

• Use the latest technology to build hyperpersonalized services.

Increasingly, in order to build these powerful experiences, organizations will need to use the latest technologies, from automation to machine learning. Customers now consider such personalization the norm, part of the overall experience of using your software. Airbnb’s personalized travel recommendations after you book a trip, such as offering a tour of Boston’s live music scene just after you reserve a stay in the city, is one such example.

• Build design systems.

Leading organizations such as Adobe and Salesforce have increasingly spoken about the need to create “design systems” to build these powerful user experiences. These are the systems and processes that enable them to scale their design best practices, rather than constantly reinventing the wheel. Forrester analyst Gina Bhawalkar points out that they also play a key role in linking your design team to your development team. She mentions that design systems should “also include the reusable code behind those design elements, and for this reason they should be created as a partnership between design and development teams.”

• Foster a product-centric culture and mindset.

If you listen to any of the founders of the UX-centric companies I’ve mentioned before, you will realize that they obsess about their products and the experiences their customers have with them. I would argue that if it’s not their top priority, it probably ranks very high. This is something easy to achieve as a startup, but much harder when you are, for example, a large financial institution that is used to thinking that your “product” is a checking account or a home loan, instead of the app or website your customers use to buy and manage those financial solutions. I often wonder whether the top executives at large firms even use their software products because some of them are so bad.

The democratization of technology helps drive better UX.

Ultimately, this is all part of what many people have referred to as the “democratization of technology.” This is because, fueled by cloud computing and new open-source technologies, it’s not just large companies or tech giants that can create these compelling user experiences.

So while effective UX design is one of the hardest aspects of product development, new technologies, tools and approaches are making it possible even for startup teams on a budget to build these compelling digital experiences. We’re seeing organizations take advantage of this to move nimbly and build light, attractive, mobile-first experiences. This is what it means to make UX your strategy, and in 2019, I believe it is the only way your organization will achieve success.

Written by: Alex Robbio (Co-founder of Belatrix Software and Member of Forbes Technology Council)
Posted by: CueCamp

The post User Experience (UX) Is Now Your Business Strategy appeared first on CueCamp.

Common landing page design element mistakes to avoid

1. Content is not broken down into logical blocks

It is easier for users to digest information if it’s grouped into logical blocks. Set padding to 120 px-180 px and separate blocks of text by using colour backgrounds.

There is little padding between sets of related information, plus this design needs colour blocks to divide content into logical sets. As a result, this information is hard to digest and it is unclear which text should go with each block

Paddings are large enough, and the blocks are separated by colour, which makes one thing immediately clear – these blocks contain different types of content

2. Uneven spaces between items on a webpage

Same-size spaces should be set around logical blocks. Otherwise your page will look messy, and users may not give equal consideration to each section.

Spaces of various widths look uneven and create an impression that company information is linked to the header although every block is equally important

Same-size spaces around headings and the body copy help perceive the logical blocks as carrying equally important information

3. Padding that is too small means that users cannot break down content into logical blocks

To avoid logical parts from blending in, keep them separate and insert a large space (at least 120 px) between them.

Use narrow padding, and the blocks that make up the site stick to each other. This overloads the page and is quite confusing — a site visitor is led to believe that this is one solid text and not parts with different meaning

Padding is large enough so the difference between these two blocks is immediately visible

4. Avoid low contrast for text copy on an image

There should be sufficient contrast between text and background. To make copy prominent, place a contrasting filter over the image. Black is a popular colour but you could also use bright colours and mix and match them.

Another option is using a contrasting image from the start and placing the copy on top of a dark section of a photograph. This image is too light, which makes reading the text copy too difficult

A filter applied to the photo makes the copy easy to read

5. Too many styles on one page

Too many typographic and webpage design styles on one page make it look unprofessional and hard to read. To avoid this, limit yourself to a single font and two options for saturation, for example, normal and bold.

Because of too many typography styles beings used, it’s unclear where the emphasis lies

One font, one colour and two types of saturation. The typography on the page looks neat and clear

6. The colour block is too narrow

Avoid emphasising narrow page elements with colour. It just doesn’t look good. For example, headings are already well marked thanks to their size, type saturation and paddings. Would you like to highlight a particular point on a page? Use a colour background for the entire block, including a related heading and text copy.

Headings placed on a colour background break up the page’s continuity and look like separate, independent design elements

Both the heading and a related text share the same background. It shows they belong to the same logical set

7. Too much text copy inside narrow columns

When there is a lot of text copy in narrow columns, it is difficult to read because site visitors have to skip from one line to the next. Plus, it just doesn’t look good! It’s best to cut on the number of columns and shorten the text copy, otherwise nobody will read it.

Long, contered columns are hard to read

There is little text in these columns, so reading it is easy

8. Too much centered text

Centering text on the page works well when there is little text, otherwise it’s hard for users to navigate it efficiently. At the same time, increase the font size starting from 24 pixels.

If you need to include a lot of text, use the blocks featuring collapsable text copy (in Tilda, it’s blocks TX12, TX16N or the button BF703).

Long, centered texts are not easy to read

A short text under a headline (both centered) look good on a page

9. Text copy is superimposed over an essential part of an image

Avoid covering meaningful parts or small details of an image with text. This way, you will both obscure the image and make the text illegible. Try different positions for the lines such as centering them or aligning text left or placing them vertically.

This headline gets in the way of the woman’s face. With so many tiny details, it’s hard to read the text

The image and text copy are easy to read and form good composition

10. Misusing visual hierarchy

For information hierarchy to be clearly visible on a page, the title on the cover should be bigger than the rest of the headings or at least the same size, especially if the headline is long, for example.

The heading on the header is disproportionally smaller than the following heading, which is confusing. Why? It makes the second heading appear more prominent

The heading on the header is bigger than the one in the following block, so the whole page looks consistent

The same principle applies to visual hierarchy within a logical block. The headline should be the largest design element on the page, followed by a smaller, less prominent subhead. Next, features titles that follow should be noticeably smaller than the heading, and of the same weight. The smallest fonts should be used for features descriptions.

This will help site visitors distinguish between the most important and less important information.

The headline is smaller than features titles and seems secondary, although it’s more important in this context

The headline is the most prominent design element on the page and although features titles are written in a smaller type, they are still clearly visible

11. One logical set is split into two

A full-screen image or gallery, following a text, resembles a separate, independent block. If you add padding around the gallery, both text copy and images will look as a logical whole thanks to a shared background.

A full-screen gallery looks disjointed from the headline above and looks like a standalone block

The gallery shares the same backdrop as the heading right above it, which makes the whole composition look solid

12. The title is too large and long

A very large font is perfect for a short sentence. If the headline is long, use a smaller size font. It will be easy to read and leave plenty of space to all other design elements on the page.

A headline that is too big takes up an entire cover, while design elements jostle for space and the headline is hard to read

This page is composed well, all the design elements are in balance with each other, and the copy is easy to read

13. Wrong use of border styling for buttons

Borders are necessary when a button is transparent. Adding a border for a colour button does not make sense, it’s just another meaningless design feature that overloads a page and makes it difficult to read it.

14. Using too many colours

Using too many colours on a page is confusing, and it’s unclear which bits are more important. One or two colours are enough to give visual prominence to what’s really important.

There are too many bright colours on the page; this is confusing

One colour accent creates variety and doesn’t distract from the contents of the page

15. Overloaded menu

People visit websites to find solutions to their problems. Help them! Use the menu to help people navigate the website and find what they need quickly and easily. Don’t overload them with with excessive information. It’s enough to have 5-7 menu items. This menu carries too much information, making site navigation more difficult

A simple menu makes finding what you need easy

Mistakes in article design

1. Long, solid copy

A wall of text makes reading difficult to understand. For easy navigation, split it into paragraphs or introduce breaks such as a key phrase or an image.

A wall of text is hard to look at

Elements such as pull quotes or images make reading texts easier

2. Headline is positioned at the same distance between previous and next paragraphs

A headline should not ‘hang’ between chapters at a similar distance because it belongs to the paragraph that follows. The distance above a headline should be 2-3 times bigger than the space under it. At the same time, the distance under a headline should be roughly the same as the space between paragraphs, or slightly larger. This way, the header will visually refer to the subsequent text.

The heading is positioned at an equal distance between paragraphs above and below it, and it’s unclear which paragraph it belongs with

Thanks to the use of padding under the heading, it’s obvious that the heading belongs with the text that follows

3. There is no logical order

In typography, contrasting is used to visually divide different levels of text and establish a strict hierarchy. Main headings should be the most prominent on page, subheads should be considerably smaller but still clearly visible.

A heading and subhead are approximately the same size, and there is no clear hierarchy between them

Logically, the heading is more important than a subhead

4. Different padding above and below blocks

If blocks carry the same weight, they should have the same look and feel and be positioned at an equal distance from each other.

If the space between the header and an author’s image is too narrow, it looks as if the author has more to do with the header rather than the text that follows

Thanks to identical size padding above and below the image, blocks appear equal

5. Caption is positioned too close to an image

On one hand, an illustration and its caption form a whole but these are two separate design elements, and captions should not interfere with images.

The caption sticks to the image and we have trouble properly engaging with either of them

There is a lot of white space between the image and its caption, yet it’s clear that the caption goes with the image

6. There is too little space between subhead and text copy

A subhead and text copy that follows belong together but if the space between paragraphs in an article is bigger than the space between the subhead and the following paragraph, the article looks disjointed.

Space between a heading and a paragraph is smaller than between paragraphs themselves

Space after the heading is slightly bigger than space between paragraphs

7. Stand-out design elements are placed too close to the main text

Design elements used as expressions of emphasis such as key phrases or quotes are independent objects. For them to truly stand out, set them at 75-120 px from the main body copy.

There is too little space between the main text and stand-out elements

A pull quote truly stands out thanks to big padding

8. Low-contrast design elements

If you’d like to emphasise a certain phrase, be bold, make a key phrase bigger than the main text by 10-15 px. Let the key phrase really stand out from the rest of the text.

Now everyone can see it thanks to a large font and sufficient padding around the text

9. Colour background for a narrow text block

If you’d like to highlight a small section of a page such as author information, it’s enough to set sufficient padding around this, which will create an impression of space. Don’t place this section on a colour background; this will look out of place.

Don’t use colour for the subhead. Using a bigger font and padding should be sufficient to make it pop on the page

10. There is an empty space between two full-screen images

When you are using several full-screen images in a sequence, avoid leaving a space between them. The border will still be visible, and there is no need to add an additional design element. It just doesn’t add anything.

An empty space between full-screen images make no sense and doesn’t look good

There is a harmonious flow between images in this example

11. Too many design accents being used

Design accents (such as boldface here) work well when there are few of them. Put in too many, and this will get in the way of reading the page. |
Many words are marked in bold, so the text copy appears broken

A few marked words draw attention to themselves, and don’t interfere with the rest of the text

12. Too many typography styles

Design should not interfere with readability. The fewer typography styles there are, the more important design elements are visible. It’s enough to emphasize headlines and subheads, and use contrast for key phrases.

This text has too many typographic devices. They are distracting to the reader

Very few typography styles, emphasis is clear, and text hierarchy is observed

13. Centering text in a long article

Centering is usually applied to headlines and block quotes to distinguish them from the rest of the text. A centered long text is difficult to read.

A centered text looks messy, plus it’s hard to read

A text aligned to the left is easy on the eye

14. Headline appears too close to the image

A headline is an individual design element. It should not sit too close to an image that follows. For a winning combination, set padding at no less than 60 px, and add a subhead – it will unfold the contents of the page and place the right emphasis where you need it.

The headline sits too close to the image, there is no breathing room on this page

Here the headline is separated from the image by a subhead, and it relates to the entire section, not just the image

15. Using italics when they are not needed

Italics are used to highlight a word or a short phrase within a text. It is not as immediately noticeable as bold type but it does allow you to make an emphasis where you need it.

Don’t write everything in italics (body copy, headlines). And if sans-serif fonts are used in text copy, avoid italics altogether.

The phrase stands out already thanks to the font size and padding, so the italics are not really needed here

Italics are in the right place, adding the right amount of emphasis

16. Blocks appear out of place relative to the centre of the page and each other

You can spot this error easily yourself if you take a small break after editing your page (changing font size, alignments or indentation) and taking a look at what’s on it.

In this example, the headline is shifted to the left, and text copy to the right

All text elements are in harmony with each other

Written by: Ira Smirnova, Masha Belaya, Julia Zass (via Tilda blog)
Design and layout: Julia Zass
Posted by: CueCamp

The post Common Webpage Design Element Mistakes appeared first on CueCamp.

With 1.3 billion websites on the internet, there is competition aplenty in nearly every industry. If your site doesn’t provide the best experience, users will simply find another. A user-centered design is going to be highly usable. Everything will function perfectly and without error. Here are nine simple things you can focus on to create a usable site:

1. Get Right to the Point

If you have targeted the right audience, they are already interested in your service or product when they land on your page. Instead of adding in unrelated things, simply get to the point. People are quite busy and don’t have time to wade through a lot of information to get to what they want. Add prominent call to action (CTA) buttons that are easy for the consumer to find.

Note how Grace gets right to the point about why you’ve come to their site. They give a quick explanation of how their box subscription kits work and offer a CTA in green that says, “Get Started.” They also offer half-off your first box to entice you a bit further.

2. Visible Navigation Structure

Your navigation structure is the backbone of your website. It guides the user through your pages almost from the first minute they arrive. Among visitors referred to your website, on average, 50 percent of them will use the site’s navigation to get themselves oriented. But navigation isn’t simply your nav bar across the top of your page — it’s also the sales funnel you guide the user through from the landing page, plus minor details such as linking your logo to the home page to serve as a breadcrumb for visitors to find their way back to start.

3. Actionable CTAs

Your call to action invites your site visitor to take a specific action and to convert from simple site visitor to subscriber or customer. A lot of factors come into play when creating the perfect CTA. The language you use, the color of the button and even page placement can make a difference. You also aren’t limited to a single CTA on a page, but you do need to make sure each one has a clear direction.

HydroWorx offers very clear CTAs on their landing page so site visitors know exactly what action to take and when. The CTAs are a bright orange, which stands out against the white background and complementary dark blue design. The placement is smart because it lines up with each section and helps answer questions the user might have. The wording is clear and includes, “Request a consultation,” “Estimate profit” and “Get a profitability analysis.”

4. Instant Feedback

Have you ever filled out a contact form, hit submit and then weren’t sure if it was sent to the company or not? This is very frustrating for users. Site visitors should receive feedback for any action they take. If the visitor clicks on a submit button, a message should pop up that the form has been received and what the visitor can expect next. Look at the different actions a visitor can take on your site and make sure each one has a response appropriate to that action, such as loading a new page that says, “Welcome!” or “Thank you for us.”

5. Customer Service

The way your company interacts with site visitors has an impact on their overall experience. Do you have a customer service philosophy in place? Is it effective? Around 86 percent of consumers say they will pay more for a product if the overall customer experience is better.

Even though the entire customer experience is about more than just service, the way you handle complaints and questions plays a big role in the overall impression the customer has of your brand. Take the time to get a customer service philosophy in place.

Trader Joe’s has a reputation for excellent customer service. Walk into any brick-and-mortar store and you’ll be treated like royalty. One example of them going above and beyond for a customer was reported on Reddit. In this example, the company went out of their way to deliver food to an elderly man who was snowed-in. Not only did they deliver the food, but they also gave him the food for free. That’s a brand that cares about their customers.

6. Use Heatmaps

Figure out which areas of your site are most attractive to your site visitors and limit choices to those main links. You can, of course, add other elements within the overall structure of your site, but when it comes to where to focus, you want the main elements people are looking for to be front and center. You may also want to move these sections higher up on your landing page so visitors can find them quickly.

7. Offer Valuable Information

One way you can engage users is by educating them on what you sell. The person may or may not have tried your product before, so offering in-depth information allows the user to make an informed decision about whether or not they want to try your product. You can offer this information in the form of guides, articles or a comparison chart. Try offering it in a variety of ways, remembering that visuals are well received by site visitors. You can even conduct some split testing to see which elements work the best for conversions.

The Whiskey Exchange does a good job of educating their site visitors. They offer different topics the user might be interested in along with a CTA to “Learn More.” The topics rotate from time to time, so those who visit the site regularly can still learn new things. For example, some topics featured include popular products from New Zealand and winter drinks.

8. Social Media Integration

Some of us have multiple social media accounts, but 81 percent of Americans have one at least. The public loves social media because it’s an easy platform to grab information and then share it. There are several ways your site can integrate with social media. Allowing users to share photos and blog posts is one simple way. However, you can also add apps that allow a user to log into your site with Facebook, Twitter or Instagram. Start with the basics of allowing users to share your information and then see what else might be viable.

9. Integrating Video

The statistics on using video in your online marketing is something you can’t ignore — 87 percent of those who market for a living use online video content to drive conversions. Video is a way to get your message across in a way that sticks with the consumer. Videos add information to your website for the user who prefers to watch a video rather than read text or even an infographic.

Bellroy uses a video that highlights some of their products and what they do. If the shopper doesn’t want to read through descriptions, they can view the video and learn a little more quite easily. On the Bellroy site, the video is located under the header, but for the purpose of this case study, we’ve moved the video up so you can see it easily.

Last Thoughts

UX strategies shouldn’t be one of the last things you implement on your site — it should be the first. This will help you avoid frustration on the part of site visitors and retain more of the traffic you drive to your page. Take the time to conduct A/B testing to see which elements work best with your target audience. You should also go through your site step-by-step as though you are a first-time visitor and look for possible issues.

Written by: Lexie Lu, Design Roast (via Website Magazine)
Posted by: CueCamp

The post Make UX Strategies Less Complex & More Functional appeared first on CueCamp.

#6: Company Website Pages Take Forever to Load

If your website does not load in an expected amount of time, users will leave. It may sound like an unreasonable ultimatum, but it’s true: 47 percent of customers on e-commerce websites expect their site to load in two seconds or less, and 40 percent will abandon a site that takes more than three seconds to load.

Do yourself a favor – check out Google’s Page Speed tools to make sure your website is as quick as it needs to be. If it’s not, consider either upgrading your hosting or cutting content that takes to long to load from your website’s pages. A variety of things like interactive ads, uncompressed images, and JavaScript can negatively impact page load times.

#7: Unnecessary Content

It’s incredible how some people have a knack for talking your ear off without saying anything remotely useful. That’s not a good talent to have, especially online where users are bombarded with information.

From a Web design perspective, that means that if your website is loaded with unnecessary information, or the sitemap is filled with too many bells and whistles, people are likely to get frustrated and ditch out for a competitor. Be succinct and keep it simple. Lengthy text should be shortened, making use of headings and subheadings to break up the text and help users scan through page content.

#8: Neglecting Mobile Users

It’s somewhat baffling how many webmasters still don’t see the importance of mobile. After all, mobile searches now outrank desktop searches, and smartphones are quickly supplanting computers as the browsing device of choice. If you haven’t taken active measures to support mobile – for instance, through the implementation of responsive web design – you need to pull yourself out of the past immediately. Mobile-optimized content is vital for good usability on the mobile devices that your visitors use to visit your website. Mobile website visitors should be able to easily scan and read important content, as well as complete basic tasks like finding your contact information.

#9: Missing Your Target

As a web marketer, you understand how important it is to know your target audience. You’ve probably spent hours creating customer profiles and figuring out how to attract consumer attention. This is just as significant in web design. The way your website looks and “feels” will naturally attract a certain type of visitor. Some websites are highly professional; some are trendy and hip, while others are fun and bubbly. Sometimes, a website tries to speak to too many audiences. If you try to please too many types of customers, you can end up with a confusing website that appeals to none of them. Identify and profile your target audience, and cater to their needs.

#10: Poor Navigation

Navigation issues will kill your website’s popularity fast. We live in an age where everything is delivered to us in an instant, and anything longer will make visitors abandon your site. Making your navigation menu difficult to find or use are common web design mistakes. Have you ever been to a website and you can’t find the menu or a search bar? It’s quite frustrating. Make sure the navigational aspects of your website are easily understood and even easier to notice.

Conclusion

If you want to avoid frustrated users that abandon your website, you need the following features:

• Support for mobile users
• A clean, crisp interface
• No excess information; provide users only what you know they’ll want to see
• Fast load times
• A clear and consistent brand message throughout
• Professional, high-quality content that is free of mistakes (e.g. broken links, spelling errors)

To get started fixing up your website, you can check out our top 5 tips for creating a powerful homepage for your website. In addition, if you would like your website reviewed by one of our experts for free, please visit CueCamp and request your free marketing analysis video. You will receive a 5-10 minute video that analyzes the usability and marketing effectiveness of your website, delivered within 48 hours.

Written by: Michel Ann Sharritt
Posted by: CueCamp

The post Part 2: Are You Making the Biggest Web Design Mistakes on Your Company Website? appeared first on CueCamp.