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.

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.

User-friendly Experience + Simplified Buying Journey = More Sales

For the business owner, a well-designed e-commerce platform allows them to run their business easily, and can help streamline daily operations and customer service calls. Following are some tips and best practices to follow to help grow both organic traffic and sales conversions.

Search Engine Optimization (SEO) and UX

User Experience and SEO are critical components of any e-commerce site, especially as industry verticals are becoming more competitive. Digital advertising prices continue to rise and generating organic traffic is essential. In addition, cross-functional expertise is required to build a website that has good UX and SEO, as these fields continue to overlap. Google algorithms are becoming better at reading page content, placing priority on well-designed content that is not artificial. Prior black-hat tactics to raise search rank, like loading page footers with keyword-dense text, are now causing page ranks in search engines (like Google or Bing) to drop. Driving organic traffic can feel daunting and will take time, but will pay-off in the end with good SEO practices.

Website Sitemap

Part of good UX and SEO involves a well-designed sitemap. A sitemap reflects the website page and navigation structure, and hierarchically organizes website content. Adding a sitemap to Google Search Console is important for any e-commerce site, so that search engines crawl and understand product information. Google will be notified to any changes that you make to your site, which should happen on a frequent basis so content does not become stale. A sitemap not only makes the new content you post discovered quickly by search engines, but is reflected in the website navigation to users (helping tell them about the content on your website).

Simplify Page Content (and Clutter)

Clear, simple to understand content can raise engagement with your audience. In many instances, “less is more” – as said by Ludwig Mies Van der Rohe, a German-American architect that pioneered the minimalist movement. Your website visitors appreciate you communicating your message in a simple, yet efficient manner.

Similar to a cluttered advertisement, websites with distracting content, too much text, or an unclear message will lose their effectiveness. Over time, more and more things fight for our attention, and the average user has a shorter attention span. Users are willing to spend less time figuring out what you’re trying to get across, so get the job done with simple, clear messaging on your website. Design each page using proper keyword research and ensure landing pages have a clear engagement goal in mind so that your content has a purpose.

Optimizing Website Structure and User Journey

Supporting the intentions of website visitors is critical to raising conversion rates. Whether the goal is to sell a product or communicate an important piece of information, users should be able to fulfill their needs as efficiently as possible when using your website. If a product is difficult to find or a message becomes muddled, conversion rates will fall.

Part of optimizing the user experience (UX) of a website is to ensure that different types of users (personas) are able to achieve their goals efficiently: whether it be completing an action or finding information. A well-designed navigation structure will help the user journey, so that users can find what they want in the least amount of clicks (and with less confusion along the way).

Make Sure Your Site is Responsive

More people are becoming accustomed to purchasing groceries, clothing, home décor, and vehicles in the comfort of their homes. According to Forbes, Cyber Week had 62% of traffic coming from mobile in 2018, and fifteen percent of orders of were placed on mobile phones over the Thanksgiving holiday. Other sources place over 60% of website visitors (and climbing) using a mobile device like a phone or tablet. With this in mind, websites need to use a responsive design to be sure that content is optimized for mobile devices. The lack of an intuitive UX can result in user frustration, causing visitors to leave before completing a purchase on a website.

Website speed

Website performance contributes heavily to page rank and SEO, as well as usability. Research by Google describes how sites appearing on page one of Google display 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 and improve your website speed are Website Grader by HubSpot, Google PageSpeed Insights, and Pingdom Website Speed Test.

SSL (Secure Socket Layer) certificate

An SSL certificate authenticates your website to encrypt data that is being transferred from a website to users. SSL certificates ensure that a website is secure when visitors make purchases, which is important is the growing age of e-commerce. An SSL certificate encrypts sensitive user data, such as personal bank information, phone numbers and addresses.

Google Chrome, the most-used browser, has begun notifying users when a website is not fully secured with an SSL certificate. 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. In a world where data breaches and security are becoming commonplace, users will trust and show loyalty to brands that value their privacy and sensitive information: highlighting the need for SSL certificates on websites.

Conclusion

Optimizing your website has a powerful effect on your marketing effectiveness, as well as your bottom line. Increasing conversions on your website, whether serving a goal of purchasing products or communicating information about your business (in a clear, efficient manner) will attract new customers and build loyalty. By optimizing the user journey for your website, different types of users can be served in a more effective manner.

The skill sets involved in designing a website continue to broaden and overlap. Experts in development, graphic design, SEO, UX, marketing and content writing need to know how their design decisions impact other areas of design. For example, designing a page around a keyword (SEO) impacts the website structure (UX), written content, and image content on the page (which can also impact website speed). A working knowledge of these fields is required to balance design decision trade-offs to make websites more effective, and this expertise can yield powerful improvements. In many instances, a simple analysis of a website by an expert can present some low-hanging fruit, which can have a huge impact on results.

To gauge how your website currently measures up, and identify some low-hanging fruit that can improve your website, request a free website marketing 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 & Matt Sharritt, Ph.D. (CueCamp)

The post Boost Store Profits: E-commerce Experience Optimization appeared first on CueCamp.

Connecting with your customer base can be challenging given how inundated we are with social media marketing posts: whether it is through Facebook, Instagram, LinkedIn or emerging platforms such as TikTok. With the rise of social media, everyone has been given a voice online, making it harder to stand out and be relevant. For brands to generate awareness and be relevant to consumers means staying on top of the ever-changing social media landscape. What worked a few months ago is not necessarily going to work today, meaning companies need to stay ahead of the trends in order to stand out to their audience.

Following, we will discuss three trends to follow when generating social media marketing material that coincides with three up and coming trends: minimalism, wellness and personal connection.

Minimalism

People want simplicity: not only with the content with which they interact, but also in how they approach their lives. When serving up new content, always strive for simple imagery and direct video content. Technology continues to have an increased presence in our lives, making us feel increasingly distant from the physical world.

By decluttering the social content you post on your accounts, you can create a consistent powerful message across all of your digital touchpoints: including social media marketing platforms, digital ads, and your website. The following post from Tasty blurs the background to create negative white space around the focal point (instructional text), while the post from Home Depot presents a less streamlined, more complex, and cluttered image:

Straightforward, simple to understand content will increase engagement with your audience. In many instances, “less is more” – as said by Ludwig Mies Van der Rohe, a German-American architect that helped pioneer the minimalist movement.

Wellness & Nature

People are looking to seek balance through nature: as a way to counteract the stressful, technical and disconnected worlds in which they live. According to Janine Garner, “What you actually need for exponential growth is a network of transformational rather than transactional connections. It’s about connecting in the right way, engaging in two-way conversations and sharing value with each other.” The following Instagram post offers organic coffee and connects to nature in a clean and simple way:

The products and services that draw attention on social media increasingly represent the desire to de-stress, and feel reconnected with nature and natural products. Wellness does not only represent the physical; but includes mental, emotional and spiritual states. Content that connects an audience with this balance speaks volumes, making for powerful marketing efforts. The following example on Groupon promotes a winter getaway, using nature and an outdoor activity to promote a vacation package:

In short, use imagery that is calming, clean and up-lifting when it appropriately reflects your brand message. Clean, simple and calming messaging draws your audience to interact and engage with your brand.

Engagement via Personal Connection

The amount of technology that we interact with on a daily basis can be overwhelming. People crave personal interaction, which can be accomplished using social media marketing as a tool to interact with others. Marketers can inspire interaction through content such as instructional videos, ratings and reviews, or requests for tips or suggestions on both products and services that you have to offer. While the following example from Starbucks draws criticism from followers wanting other beverages from years past, it appropriately sets the stage for indulging in specialty holiday coffee:

Likewise, personalization can promote feelings of personal connection. The following landing page below from Stitch Fix highlights an inclusive, inviting approach, with main categories for men, women and kids helping to offer a personalized shopping experience for those respective shoppers:

Summary

How your brand messaging is designed will determine how compelled your viewers are to engage with your content. Images should be clean, crisp, and concise in order to capture the attention of your audience and future audiences. A simple message presented through calming, yet highly effective means can be a powerful tool for engagement with your audience. In addition, being aware of environmental and cultural trends that are grabbing the attention of consumers can have a strong impact on your marketing.

Being mindful of the things that mean the most to your audience when developing the imagery and video content should be top priority to your marketing efforts. Set yourself apart from the pack by engaging your audience with clean, calming, and consistent social media marketing content, and watch your brand continue to grow.

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

The post Social Media Marketing Techniques to Differentiate Your Brand 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.

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.

Engagement is, without question, a complicated subject matter – and practice – thanks in part to the variety of definitions that could be, and often are, applied to it. By creating unique and memorable digital experiences, however, it is possible to develop productive and profitable relationships with customers.

One enterprise, for example, might define engagement as repeat visits with purchase amounts over a certain level, while another might be laser-focused on those moments along the user’s journey when activity reaches a certain level – X number of pages viewed, Y number of items shared on social or Z number of friends referred as the indicator of a genuine level of engagement. In each of these instances it is easy to see how deeper connections and greater revenue can be achieved from engagement.

Essentially, Web businesses (all businesses really) will measure engagement in different ways based on enterprise objectives. Regardless of how an enterprise defines and plans to increase engagement among its users, however, one thing should be certain – it is essential to success.

Customer Engagement Today Starts with Tech

While an incredible amount of investment (time and financial resources) is required to achieve true improvements to the state of user engagement, there are plenty of technologies and techniques that can be leveraged to get enterprises where they need to be.

Authentication solution LogMeIn, for example, recently acquired Nanorep, a company that provides a self-service chatbot and virtual assistant. The Nanorep products use artificial intelligence (AI) and natural language processing (NLP) technologies to create solutions (bots) that make self-service more engaging and intuitive (see image). Brands including Intuit, FedEx, Toys“R”Us and Vodafone are just a few of the companies currently using Nanorep for some of their key customer service initiatives.

LogMeIn also recently released a new customer relationship (or engagement) management platform, Bold360, and many will see the Nanorep acquisition as another opportunity to deliver more human, more personalized and more intelligent customer engagement solutions. LogMeIn seems to be headed toward developing digital experiences that enable them to establish better ’Net relationships with consumers, but what about you?

The reason that engagement is such a tricky subject to discuss (besides the fact that it can be defined in so many different ways) is that the factors and elements we are dealing with here (emotions and data) are so wildly different for each user.

The Secret to Customer Engagement

When users feel a connection with a brand, a bond or rapport with the experience that has been presented, what ultimately ensues is familiarity (the precursor to customer engagement).

The secret to engaging users therefore is actually quite simple: know the user.

Knowing users’ wants, desires and ultimately their emotions provides an opportunity to spark their interest. Engagement only grows when users are confident that businesses actually care about their well-being and meet their expectations – or, at least to care more than taking their money alone.

Despite loads of evidence that personalized digital experiences outperform those that are not tailored to a person’s history, behaviors and attributes, Web retailers have been relatively slow to adopt technology to make it happen. Omnichannel commerce platform Kibo and Astound Commerce have released a joint study that assessed the current personalization and omnichannel sophistication of retailers testing metrics across desktop, mobile and in-store buying touchpoints; and the results are disheartening to say the least.

Seventy percent of personalization experiences on an e-commerce site, for example, only happened when the shopper was logged into an account. What is even worse is that just 4 in 10 retailers did not send an email following an abandoned cart on a website. Of those retailers that did send an email, zero offered an incentive to purchase. And here is another: 4 in 10 retailers did not even display recently visited items on a website upon a consumer’s return visit.

How can e-commerce merchants, or any ’Net professional, expect to develop a productive relationship with that level of effort?

The point is there is more that can be done to improve the experience of users and truly engage them – which can only be achieved by creating unique,dynamic and interesting experiences.

Creating & Crafting Experiences

Now that the secret to customer engagement is known (remember, it is to have an emotional connection with the user) – enterprises are ready to create and craft experiences that truly engage users.

Step 1: Identify why users are not engaging currently If current rates of conversion and rates of interaction are known, enterprises can compare participation levels among audience groups and content categories to position their products and offers in a way that delivers an experience that is in-demand. Analytics help track and collect data about user profiles, which is the only sound way to develop an engagement strategy.

Step 2: Foster collaboration People have some weird, human and internal need to share their stories, struggles, victories and losses. They also love to talk about themselves and will “love” businesses that provide them an opportunity to do that. When users are able to send messages to one another, post videos/images, share their opinions and expertise with others, they will be delighted by the opportunity and the chance of return increases dramatically.

Step 3: Develop memorable experiences The experiences that brands create must be memorable and lead to some pre-defined performance gain.

Loyalty software provider OfferCraft, for example, defines engagement as “motivation.” In other words, how can brands use digital outreach and digital experiences to incite action?

OfferCraft’s VP of Marketing Dan Grech suggested it comes down to getting people to do what it is the enterprise wants them to do. And how do they do that exactly?

Enterprises may want to consider approaching that question through the prism of science (specifically behavioral economics and decision theory).

“One of the ways we do that is through games,” said Grech. “Games are tremendously motivating to people. If you take any promotion and you gamify it, you accelerate it – you get more people to do what you want them to do.”

In practice, OfferCraft teamed up with Swinomish Casino & Lodge in Anacortes, Washington, to launch weekly gamified offers that customers can play on the new website SwinBig.com, in email and via social media. And each week, the Swinomish Team offers a live look at each game on Facebook.

The games, themed around a movie series, summer holidays, and casino amenities and anniversaries, have been received enthusiastically by more than 10,000 people, and the prizes have driven hundreds of players each week to visit the property. Since initially launching in May 2017, the weekly gamified offers have driven 6.97 times the number of redemptions compared to similar offers on Facebook and email made a year earlier.

Promotions using Facebook Live videos and SwinBig.com have led to a 15 percentage point increase (from 10 percent to 25 percent) in the reward redemption rate in the 2017 summer movie campaigns compared to 2016.

Understanding the barrier to engagement, fostering community and collaboration among users, and making the experience memorable and enjoyable are all important to the success of engagement initiatives, but there are many other elements that must be considered as well.

The Role of Design in Engagement

It cannot be said enough; everything impacts the level of engagement that consumers will experience. And that everything, of course, includes digital design.

Unfortunately for many enterprises, design can have a deeply negative affect on their consumers’ experience. How often, for example, are the long-term ramifications of digital design decisions made at your company (recently or long in the past) considered in relation to levels of engagement?

Design trends emerge routinely and they often immediately capture the attention of everyone involved in the digital experience, but it is difficult – even among the most data-driven and industry experienced – to understand the result and broader impact of implementing specific elements or leveraging entirely new styles. Such is the case, it appears, with the trend of flat design.

Some research made available recently from nngroup revealed that flat interfaces often use weak signifiers. The eye tracking experiment compared different kinds of clickability clues, and found that user interfaces with weak signifiers require more user effort than strong ones. Essentially, flat user interface (UI) elements attract less attention and cause greater uncertainty – and that is obviously not the ideal scenario.

nngroup investigated how strong clickability signifiers (traditional UI design clues such as underlined, blue text or a glossy 3-D button) and weak or absent signifiers (for example, linked text styled as static text or a ghost button) impact the ways users process and understand Web pages. The results, as you might imagine, are anything but encouraging. The average amount of time was significantly higher on the weak-signifier versions than the strong signifier versions. On average, participants spent 22 percent more time (which means slower task performance) looking at the pages with weak signifiers.

What’s more, the average number of fixations was significantly higher on the weak-signifier versions than the strong-signifier versions. On average, people had 25 percent more fixations on the pages with weak signifiers. nngroup suggested that since their experiment used targeted findability tasks, more time and effort spent looking around the page is not good.

There is no reason to forgo design modifications because of concerns over what might happen to engagement, but it is something to monitor closely. As always, a marketer using his or her best digital judgment is always a good decision. When all else fails, they should follow their digital heart.

Emotional Intelligence & Engagement

It turns out that a high-level of emotional intelligence could greatly benefit brands – particularly those that primarily service the millennial generation.

According to recent consumer research from Klarna UK, millennials experience higher levels of anxiety, impulsiveness and impatience than their older counterparts. The research indicates that two thirds (68 percent) of millennials reported feeling excitement when adding items to their online basket, compared to less than a quarter (24 percent) of people over 55. Other highlights of the study include:

+ 20 percent of millennials would feel less guilty if they were offered deferred payment options, and 1 in 5 would be more likely to complete a purchase if they knew they could spread the cost over time.

+ 89 percent of millennials use the basket as a tool to review costs, while more than three quarters often use their basket as a wish list, compared with only 29 percent of over 55s. Meanwhile, nearly three quarters (74 percent) admit to indulging in ‘buzz browsing’ – adding items to a basket with no clear intention to buy.

+ 58 percent of millennials are more likely to complete a purchase if an online offer is going to expire, so tapping into this fear of missing out by offering time-bound incentives and educating shoppers about pay after delivery or consumer finance options can encourage customers to complete their purchase.

At the core of every data-driven engagement strategy is the ability to target individual customers with precision, in real-time. Knowing how often customers interact with a brand, where they encounter a brand and how much they spend across all channels allows marketers to drive intelligent interactions based on data, not conjecture.

Website owners need to target users with customer lifetime value (CLV) in mind and there is no shortage of solutions emerging to help them do just that.

Customer engagement platform SessionM, for example, recently launched an interesting enhancement to its Audiences Module to enable marketers to go beyond the traditional method of defining and creating customer segments using generic demographics or attribute data filters and target using more specific data such as which items were purchased, spend thresholds, etc.

The update also enables marketers to calculate RFM (recency of purchase, frequency of purchases, monetary value of purchases) data about each customer, which can be aligned with guidance from SessionM’s product recommendation engine to deliver the next-best offer based on individuals’ preferences and past purchasing behaviors.

In (Constant) Pursuit of Customer Engagement

There is no one way to define engagement and no one engaging experience that will apply to every brand. Many elements and processes must be in place to establish genuine connections with consumers and motivate them to take the action desired by the enterprise. Only by focusing on creating technology-driven, unique and memorable digital experiences is it possible to win the hearts, minds and wallets of today’s consumers.

Written by: Peter Prestipino, via Website Magazine
Posted by: CueCamp

The post Customer Engagement, Relationships, and Unique Experiences Matter appeared first on CueCamp.

CueCamp has put a list together of the top five items a powerful homepage design should have in order to retain users.

#1 Include Sharp Imagery

The images that you use on your homepage should be crisp, clear, and showcase your company in a way that embodies your brand’s vision. The images should inspire your website visitors to learn more about your company. One should remember that a website is a highly visual experience. People react to graphics and visuals differently than they do to words.

TIP: It’s also important to avoid using obvious stock photos. While sometimes useful, generic images are a dead give away that your company didn’t spend time on design.

#2 Choosing Fonts

You might not realize it, but the font you choose for your homepage has a psychological effect on your visitors and greatly influences how they feel towards your brand. Understanding your product or service is key to figuring out what font to choose for your website. Always choose a font that is simple, easy to read, and reflects the personality of your business culture.

TIP: Avoid using too many different fonts on your homepage; you want the homepage to have a feel of cohesion and uniformity.

#3 Use of Color

In the same way that your fonts have a psychological effect on your users, your color scheme affects how users interpret and engage with your website. Not only can a poor choice of color send users away, it affects how you communicate your brand to the public. Incorporating too many colors will confuse your branding, while the wrong colors will make the wrong impression.

TIP: Always choose colors for your website that are welcoming and true to your brand. It is always best to start with the colors that are used within your company logo. It helps to keep branding consistent throughout the website.

#4 Keep it Simple

Whenever our team designs a homepage we always look at the design like we are the user coming to the website for the first time. What impression do you want to give? What items need to be front and center?

The mistake that many designers make is adding tons of widgets, calls-to-action, links and other clutter that can distract or overwhelm the user. Ultimately the user is going to get confused and leave the website.

Here are a few design tips for keeping your homepage simple:

• Use easy-to-read text
• Provide plenty of white space
• Clearly label the different sections of your website (don’t make users hunt for info)
• Do not clutter up your homepage with ads, links, calls-to-action, or pop-up chat boxes

#5 Establish Your Identity

You want your website to make a statement about what your company is all about. This is probably the #1 most important part of your homepage design. Too many times, your homepage is designed with too many goals in mind. Creating a unique design, including an interesting logo and memorable look for your homepage, is important in retaining users and encouraging them to return to your site in the future.

Your homepage should:

• Introduce your company to your website’s visitors
• Provide them with clear paths to other pages on your site
• Give them a strong sense of your company’s brand and identity

Your homepage design is undoubtedly an important part of both your website and your company’s success. From immediately appealing to your visitors, to providing them with a user-friendly navigation experience, your homepage is the portal through which they can discover your company and ultimately, your brand.

We hope that this article helped to inspire your company to re-examine your company homepage. In the meantime, if you would like your website reviewed, 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.

#cuecamptips

Written by: Michel Sharritt
Posted by: CueCamp

The post How to Create a Powerful Homepage for Your Website appeared first on CueCamp.

Thankfully there are a few warning signs that indicate whether information on your site is delivered to users in a way that’s easily digestible and navigable, including:

It Takes 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 PageSpeed Tools to make sure your site’s as quick as it needs to be. If it’s not, consider either upgrading your host or cutting excess fat from your site’s pages.

Everything’s Convoluted

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 site’s loaded up 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.

Doesn’t Cater to All 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.

Inclusion, Not Alienation

If you want to avoid having frustrated users abandon your site in droves, your site needs 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 quick brand message throughout
• Professional, high-quality content that is free of mistakes (e.g. broken links, spelling errors)

Simple enough, right?

Written by: Maxim Emelianov, HostforWeb (via Website Magazine)
Posted by: CueCamp

The post 3 Warning Signs Your Website Annoys Users appeared first on CueCamp.