Does Font Choice Affect User Experience?

font

When creating new website content, social media posts, and emails for your company, there are several things you need to consider about formatting and organization. One of the most important things to consider that people often overlook is the font. Believe it or not, your font choice can have a huge impact on the way your content is absorbed by consumers online. If you are a bit confused, this article includes several reasons why font makes a difference, especially when it comes to user experience and consumer acceptance. Here is what you need to know.

[Font matters. So do a number of elemental components significant to functional web design. Please visit our Basics of Web Design guide to learn more.]

Shows Creativity

One benefit of having a good font is the ability to showcase your creativity and the creative brand of your business. Choosing a font that best represents you and your company is important. However, when choosing a creative font, be sure that the font can be easily read in all formats. This includes mobile, desktop, and email options. Typography can be a great way to get your message across as well as show off your creativity, but you want your font to be easily read by your consumers. If the font is not easy to read, it can be more ineffective than a boring font, and consumers will no longer be interested in what you have to offer or say.

Establishes Your Message

In addition to showing off your creativity, a good font can help establish the message of your company, business, and brand. Some of the ways in which you can better showcase your message is by using a variety of colors and sizes that best represent your brand. Contrasting colors is an effective way to draw the eye to the most important part of the message. Likewise, using contrasting fonts can help break up the monotony of content, making it easier for consumers to read. In most cases, they are going to look for the brightest and biggest items on the page, and you should be sure to draw their eye to the most important part of the content. For example, if a consumer sees the words “sale” in bright red with bold lettering, they are going to be interested and read the rest of the content.

Complements Design

Part of having effective content is making sure it looks organized and neat. Your font choice can give off a smoother design effect that makes your content appear more organized to consumers. For example, pick a basic font for the majority of your content. Then you can create a stylized header that makes the title of the newsletter, post, and website area stand out to the eye at a glance. Again, you can use various font styles, sizes, and colors to create the perfect combination to complement your brand and company. Plus, a clean design looks more organized to consumers, and better organization can produce more clicks on your website links, posts, and more.

Evokes Feeling

Part of effective advertising is evoking the right mood or feeling in consumers. Fonts can alter the feelings of the consumers, even if they don’t know it is happening. If you want to create a serene mood in your consumers for the advertisement of your new calming lotion, you can use lavender or blue tones to help create a feeling of peacefulness or calmness. The same can be said for the font style as well. To give off that peaceful feeling or mood, you can use a gently flowing font instead of a blocky, bold font on your content. In most cases, using simple fonts is more effective than fancy fonts, unless you are going for a more creative business option. Remember that fonts are a reflection of your business, and you want to create the right feelings in your consumers when sending them content.

Conveys Professionalism

Believe it or not, people can tell whether you have a professional business or not based on the fonts used for social media content, newsletters, or even website design. Choosing fonts that do not mix well together or choosing typography that doesn’t reflect your business can be detrimental to your marketing campaigns. However, if you take time to find the right balance between font size, style, and color, you can convey a sense of professionalism that will attract consumers. Not only can fonts attract consumers, fonts can instill a sense of trust and peace in the company, especially if the design is appealing to the eye. It is important to remember that typography reflects on the content being shared as well as the business, and if you want consumers to read the content being shared, an appealing font style can help draw their eye to the content.

Conclusion

When dealing with font styles, sizes, and colors, it is critical that your company create an organized and styled font for website design, newsletters, emails, advertisements, and social media posts. By considering the fonts you are using and mixing, you can more effectively adjust your content to attract consumers of all types to your business and your products or services. Remember, fonts are more important than many people think. Just because they are small, does not mean they should be ignored when creating new content.

Categories

Guest

In addition to being the editor at DesignrFix and writing about tech, web, and graphic design, James loves hiking and enjoying nature. If you can’t reach him, he’s probably in a place where there’s no internet connection.

 

In addition to being the editor at DesignrFix and writing about tech, web, and graphic design, James loves hiking and enjoying nature. If you can’t reach him, he’s probably in a place where there’s no internet connection.

 

Categories

Risky Website Redesigns and Tanking Organic Traffic

Tanking Organic Traffic after a Website Redesign: Why Evolutionary Redesigns are Optimal

People buy based on emotion. A redesign can be a sexy idea, sold to you by a creative agency that knows how to wow and amaze. But, it's rarely in your best interests. Sure, sometimes you reach a point where things are so bad that you have to scrap everything and start over...but how do you know how bad is too bad?

Radical website redesigns are modern-day one-night stands for marketers.

The following graphs show what happened to a new client of ours earlier this year when their previous vendor launched their radical redesign.

Organic SEO traffic tanking after website redesign

Here's another view from SEMrush, based on number of ranking organic keywords, for mobile devices (site launched in late April): 

Another view of website SEO traffic tanking after website redesign

Organic traffic (SEO) was already declining. The client surely panicked, the older site was indeed quite outdated, and yes, they panicked with good reason. It's hard to stay calm in the face of tanking traffic. Panicking, and going to a vendor who played into that panic, was part of the pitfall.

The creAtìve AgénCy elixir surely tasted good in the moment, and scrapping that outdated site surely felt like the right thing to do...but this radical act under pressure actually did more harm than good.

The agency they chose not only massacred our client's business by improperly handling post-launch SEO planning, they created a broken user experience that is impacting commerce on the site, not to mention that the information architecture and navigation are botched, the value proposition is unclear and in bits and pieces around the entire site, and user engagement is deeply impacted by all of this as well as a slow-loading site and a fancy but not performant inter-page browsing experience that has to be devastating to conversions.  

The new website is pretty, but it's not doing anything. It should be working hard for the client's business, but it's not.

Yes, it is possible to do revolutionary redesigns right. But, it's hard, and requires a lot more data than most are willing to wait for and collect. And even then, you're still gambling, depending on how revolutionary you are with the extremely sensitive components of the redesign (navigation, expected user journeys, calls to action, microcopy, content, keywords, visual hierarchy, and the like).

How many times have you seen radical redesigns on Amazon.com? 

You don't see them, because they do evolutionary redesigns – continuous, incremental improvements along the way.

Evolutionary website redesign

Image source

If you're feeling like sexy will win, it's an urgent need, and will appease your management team, then just reskin what you have as a first step. Design is incredibly important in instilling trust, and yes, good design – no, great design – is extremely important. It effects conversions and website engagement, and thus your business profits. Then, make incremental improvements from there.

Another way to think of it visually is this:

Origin Eight approach to continuous incremental improvement

This is a good cost/benefit results visualization of the concept as well: 

Origin Eight approach to continuous incremental improvement

This is difficult stuff to grasp, but indeed a very powerful concept. We coined the term Digital Impact Optimization™ for this idea that "incremental improvements can lead to exponential demand", and also the idea that "redesigns don't have to suck, especially if you consistently keep up your optimization game" – but the following is also true:

Incremental improvements can save you from exponential losses.

It's not a new concept in its entirety, but how we incorporate it into a full-picture offering and analysis is. Here's a diagram of how we see it:

Digital Impact Optimization

 

Learn more about Our Approach

 

 

Responsive Images And Faster Downloads in 2019

Responsive Images And Faster Downloads

It's 2019, and providing good user experience around images has never been more challenging. It's one of the most elemental components of functional web design. With high-resolution screens and lots of mobile devices at various browser sizes, developers need to tackle a fundamental tradeoff between a fast user experience (smaller images) and a high-quality user experience (larger images). Luckily - like imagecache/image styles before it - the Drupal community has developed a tool that makes this challenge much more manageable: the Picture module.

But first, let's review what functionality we want around the display of images:

  • Minimize bandwidth demands on the visitor
  • Provide images of a resolution appropriate to the visitor's device
  • Tailor scaling, cropping and other processing (image styles) to screen size

In other words, we want to both maximize performance and ensure high quality art direction on our sites. Luckily, new HTML techniques - srcset and picture - have been advanced to provide the sophistication needed to meet these needs. The details of how these work are outside of the scope of this article, but you can find lots of background(link is external) articles(link is external) if you're interested. Suffice to say that the picture element provides multiple image sources to the browser, along with instructions regarding which to load for the visitor. The browser then only downloads and displays the appropriate image source.

The Picture module(link is external) takes care of all the low-level mechanics for you. It works extensively with two other modules: core's Image Styles and Breakpoints(link is external). The high-level steps are as follows:

  • Decide the screen widths at which your site's design will change in a responsive manner (breakpoints)
  • Identify the art direction needed for images on the site
  • Create image styles that provide the proper art direction and resolution for each width (image styles)
  • Map sets of image styles to breakpoints (picture mappings)

Breakpoints

It's worth reading the documentation(link is external) on breakpoints, especially the warning(link is external) about how to order them. The process is a little picky. This step codifies the "what" you are responding to in your responsive web design. These are generally the same widths that your theme already has in the form of media queries in its CSS. Deciding on breakpoints is also outside of the scope of this article (and somewhat dependent on your theme's design), but let's just use these as an example:

  • wide: (min-width: 1200px)
  • normal: (min-width: 979px)
  • narrow: (min-width: 768px)
  • mobile: (min-width: 0px)

Breakpoints are set at Admin menu > Configuration > Media > Breakpoints. Make sure to check the multiplier checkboxes - ie "2x" - that you want in order to serve higher resolution images to devices with "retina" style screens. Once set, save your breakpoints to a group.

Art Direction

Art direction is another subjective question that mostly depends on your theme and content needs. Art direction is a term that covers all of the visual choices you make about presenting images on the site. Does the image take up the full width of the column, or only a certain fraction of it (with text flowing around)? Is the image cropped a certain way? Is a watermark or other effect applied to it?

These are questions we're used to answering via Image Styles. However, there's a potential extra wrinkle when considering responsive design: does the art direction change when the screen size changes? What if you have a really wide-and-short (super landscape) image style? That works well on desktop, but might obscure important details from the image on a skinny screen. You might choose a different art direction in that case. Perhaps cropping the image so that it is relatively taller (and narrower). Like breakpoints, these are really design and user experience decisions. Drupal configuration flows from them.

Image styles

OK, you have breakpoints and art direction. Here's the tedious part: now create an image style for (almost) each combination of art direction and breakpoint. Let's say you decided you want one art direction where the image is the full width of a column (called 'article-full-width'), and another where the image is only a third of the column's width (called 'article-third-width'). Let's assume that the column is 66% the width of the layout at breakpoints narrow and above (below that, 100% of the width), and maxes out at 1000 pixels wide (even on a desktop with a large screen). Here are the styles you'd need, given the example breakpoints above:

  • article-2000 (scaled to 2000px width)
  • article-1584
  • article-1536
  • article-1294
  • article-1000
  • article-792
  • article-768
  • article-660
  • article-647
  • article-524
  • article-508
  • article-428
  • article-330
  • article-262
  • article-254
  • article-214

Lot of styles, huh? I've created a spreadsheet that demonstrates the calculations I'm doing to decide on these. Given the permutations of browser width, column width, image-width-as-fraction-of-column, and mobile exceptions, it's not easy to keep track in my head.

Picture mappings

Here's where everything comes together. A picture mapping is what drives how Picture module spits out the picture HTML elements. Think of each picture mapping as a distinct art direction (or a set of related art directions, in cases where browser width changes the art direction). For that art direction, it maps an image style to each of your breakpoints. In this example, we'd create just two mappings:

  • Article - Full width
    • wide 2x : article-2000
    • wide 1x : article-1000
    • normal 2x : article-1584
    • normal 1x : article-792
    • narrow 2x : article-1294
    • narrow 1x : article-647
    • mobile 2x : article-1536
    • mobile 1x : article-768
  • Article - Third width
    • wide 2x : article-660
    • wide 1x : article-330
    • normal 2x : article-524
    • normal 1x : article-262
    • narrow 2x : article-428
    • narrow 1x : article-214
    • mobile 2x : article-508
    • mobile 1x : article-254

Note that in our examples above, the mobile styles are actually wider than some of the others, because in this example, the theme's design switches the column to full-browser-width and the image to full-column-width when the browser is under 768px wide.

Apply your mappings to image fields

Now you have the Picture system completely set up. But not yet doing anything! The last step is to activate the system for displaying content. One of the easiest ways to do that is to use Picture to display the content of image fields. I'll assume you already have a Content Type configured that has at least one Image field:

  • Go to Admin > Structure > Content Types > [your content type]
  • Click the Manage Display tab
  • Under the Format column, choose "Picture" in the drop-down associated with the image field
  • Click the "gear" icon to change display settings for the field
  • Choose the appropriate Picture mapping value
  • Click "Update"
  • Click "Save"

Great! Now your image field is set to display the image as a Picture element. Clear caches as necessary, and check out your content at a variety of browser widths.

Let's connect