UX Movement » Content http://uxmovement.com User Experience Movement Sun, 14 Jan 2018 02:59:05 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.19 How Letterspacing Can Make All Caps Easier to Readhttp://uxmovement.com/content/how-letterspacing-can-make-all-caps-easier-to-read/ http://uxmovement.com/content/how-letterspacing-can-make-all-caps-easier-to-read/#comments Tue, 19 Apr 2016 19:35:15 +0000 http://uxmovement.com/?p=9330

]]>
All caps text is like a spice, you don’t want to overuse it. A little can go a long way when you use it on content and menu headings to show contrast from regular body text. But when your headings contain more than a few words, users need to make an effort to read them. This is because all caps text is easy to spot, but hard to read.

All Caps Letterspacing

If you want to make your all caps headings easier to read, increase the letterspacing. All caps text with no letterspacing makes the letters tight and crowded. When the letters are too close, the words are harder to distinguish.

all-caps-readability

It makes the shape of each word look like a rectangle with straight edges. This means all letters have the same height and lose their ascenders and descenders. Ascenders and descenders increase the recognizability of words. Without them, users need to focus closer to recognize each word. This slows users down when they read.

Increasing the letterspacing gives the edges of each word a teeth shape instead of a straight line. The teethy edges give off a unique shape for each word. This allows users to perceive each word differently for faster word recognition. Users don’t need to focus as closely and can read words at a quick glance.

all-caps-letterspacing

Avoid Too Much Letterspacing

Having no letterspacing can make all caps hard to read. But too much letterspacing can also hurt readability. When letters are too far apart, users can have trouble associating letters with words.

A good rule of thumb is to add between 5-12% letterspacing to your all caps text. In CSS, you would set the letterspacing property in the range of 0.05-0.12em. Use your designer’s judgment to know what works best for you.

Letterspacing Example

Apple Music’s app makes good use of letterspacing on their content and menu headings. Their all caps text is easy to read at a glance. This means they didn’t add too much letterspacing, but just enough.

They used all caps to contrast the headings from the body text. But they could’ve used a different font weight and size as well. Sometimes all caps isn’t necessary. For them, it was a stylistic choice to add appeal to their brand.

apple-letterspacing

When All Caps Is Easy to Read

There are cases where all caps text is easy to read and don’t need letterspacing. But those come under certain circumstances. For instance, all caps at large sizes is always easy to read. This is because any text at a large size is easy to read in general.

Another case is when your all caps text only contains 1-2 words. With only a couple words, there’s not much to read as there is to scan. There’s no benefit on helping users read 1-2 words quicker. It’s on making those words easy to spot. This is where all caps text is useful.

Letterspacing works well on all caps headings that have many words. This makes all the difference when users need to read instead of scan. All caps do have a place on user interfaces. But designers need to use them in the right way so that they don’t compromise readability.


]]>
http://uxmovement.com/content/how-letterspacing-can-make-all-caps-easier-to-read/feed/ 5
Why Your Gray Text Should Never Exceed 46% Brightnesshttp://uxmovement.com/content/why-your-gray-text-should-never-exceed-46-brightness/ http://uxmovement.com/content/why-your-gray-text-should-never-exceed-46-brightness/#comments Tue, 05 Apr 2016 14:34:15 +0000 http://uxmovement.com/?p=9246

]]>
The color gray comes in many different shades. You can find them on different elements across most sites. Dark gray is often used for headings and body text. Light gray is often used for metadata, labels, and descriptions. But the shade that’s abused the most is light gray.

gray-text-usage

Light Gray Text Problems

Grays that are too light for text can cause readability problems. If you make your gray text too light, users will have trouble reading it. The color brightness causes text to blend into a light background. This makes words and letters faint and hard to distinguish. Trying to read it can cause eye strain.

Light gray text can also cause navigation problems. If users can’t read the options in your menu, they can click the wrong one or won’t bother clicking at all. This is especially frustrating on menus with many options. Sometimes they can even miss options because they look disabled.

Low contrast text not only affects normal users but especially low-vision and elderly users. Not only that but some users have low-resolution monitors, read on a mobile device or in poor lighting. The color contrast of your text affects all users.

46% Brightness

Knowing that light gray text is hard for users to read is not enough. It’s important for designers to know how light is too light. Without a specific standard, “too light” is relative.

The World Wide Web Consortium (W3C), an international web standards organization, published WCAG 2.0. They are guidelines that specify how to make content accessible. It recommends that regular-sized text should have a contrast ratio of at least 4.5:1.

Gray is the only color that has no hue or saturation, only brightness. The more brightness it has the lighter the gray. Brightness is calibrated on a percent scale.

gray-text-46-brightness

Applying the ratio to gray text on a white background means that the text should not exceed 46% brightness (#767676). That’s the maximum brightness your gray can go without violating the contrast ratio. The inverse of that is also true. A gray background against white text should not exceed 46% brightness.

58% Brightness for 18+ Font

For text larger than 18 font points, you can make your gray lighter. This is because larger sized text is easier to read. Your gray text on a white background should not exceed 58% brightness (#949494). Too light of a gray can even make large text hard to read.

gray-text-58-brightness

Threshold for a Light Gray Background

The thresholds above are for text on a white background. If you put your text against a light gray background you need to make your text even darker. A light gray background is one that’s no less than 90% brightness (#E6E6E6). That puts the 4.5:1 threshold for regular-sized text at 40% brightness (#666666). For 18+ font, the threshold is 50% brightness (#7F7F7F). Your text brightness should not exceed these numbers for a light gray background.

The Meaning of “Too Light”

Designers don’t choose to use light gray text to make it harder for users to read. They use it to make their primary text stand out more. But the problem arises when they don’t realize how light their gray is and how it makes users suffer.

The WCAG 2.0 contrast ratio gives designers a specific standard of what “too light” means. “Too light” is no longer an impractical sentiment. Designers now have a reference point when they hear from users that their gray text is too light.


]]>
http://uxmovement.com/content/why-your-gray-text-should-never-exceed-46-brightness/feed/ 7
How We Made Our Client’s Site Accessible by Lawhttp://uxmovement.com/content/how-we-made-our-clients-site-accessible-by-law/ http://uxmovement.com/content/how-we-made-our-clients-site-accessible-by-law/#comments Tue, 22 Mar 2016 15:28:46 +0000 http://uxmovement.com/?p=9197

]]>
It was another day at the office until we got a request from a new client. This particular request was a first for our team. We only had experience doing web design and development projects so far.

This client was a California-based disability center. The easy part was that we had to rebuild his website. But the challenge was that we also had to follow certain web legislations passed in their state.

We were so used to clients asking for an “engaging” website. But this was the first time a client has asked us to design an “accessible” website.

Web Accessibility Lawsuits

On UXMovement, we’ve seen articles on how designers can ease disability problems. More designers are becoming conscious of their work for the welfare of the disabled.

accessibility-lawsuits-chart

But web accessibility is still struggling as more sites are adjusting to the rules. Since the start of 2015, there have been 61 lawsuits filed or removed to federal court. Retail websites are getting the most attention.

With our client’s site, we’re not only obligated to follow design principles, but we have to be aware of Section 508. It outlines “binding, enforceable standards that must be adhered to in order for E&IT products to be accessible to persons with disabilities.”

Our client emphasized that web accessibility was the main concern that he had on his site. There were several concerns we had in building his website:

  • He started his site around the early 2000s, so the site is full of Flash applications.
  • Website elements such as meta tags and image texts aren’t present.
  • He has a lot of content on his website, particularly PDF guides and Videos.
  • He has a big photo gallery of his center.

Sounds like a typical, old website just ripe for a redesign, right?

Our Approach

After running an audit, we salvaged the remains of his old site and did away with things he no longer needs. The site content was frequently updated with blog posts, PDF guides, and videos.

Before we proceed on redesigning the site as a whole, we referred to Section 508 Checklist. It’s not the official documentation, but it’s a guide that extracts the principles from it.

Here’s a step-by-step approach of how we dealt with the redesign.

SEO Audit

Redesigning and making a site accessible isn’t all Photoshop/Illustrator magic. We had to run an SEO audit on the site and found there were a lot to fix.

seo-audit

HTML helps screen readers read out text on a site. Aside from text, screen readers can also read graphics through the ALT text image attribute. It has been a common, lazy practice to write the filename as the ALT text of images. But reading out the filename isn’t descriptive for users.

Section 508 suggests that writing ALT texts should be accurate and succinct in describing photos. We wrote the ALT text as it is, describing what we see in the photo. To avoid confusion, decorative elements for visual appeal were given an empty ALT tag as recommended in Section 508.

Contrasting Button Shape

The design we used appealed to the eyes, but we did not only use color to convey important information. This way, users with color perception problems would not miss out.

contrasting-button

One technique we implemented on the navigation menu is a contrasting button shape. Instead of mere color and an underline to guide users in selecting an item, we used a color-filled box to make it more obvious.

Screen Reader Testing

To ensure the site was screen-reader friendly, we tested it with NVDA (NonVisual Desktop Access). We made it possible to browse the site with the use of keyboard strokes.

There were instances where we needed to hide content from screen readers due to visual cues only applicable to sighted users. We included a Skip Navigation button so they can view the main content right away. Along with a Back to the Top button once they reach the bottom of a page.

Managing Media

Perhaps the most challenging part was managing our client’s PDF guides and video content. Although we reduced the materials to a workable amount, it was still a struggle.

Video Captioning

Working with videos requires caption synchronization and accuracy. Knowledge of technical jargons was necessary. There were medical terms mentioned that we had to double-check for correct spelling.

video-caption-spelling

We also had to make sure that the captions were readable and evenly spaced in the video. It’s important to use a neutral background in creating video demos like the one above. It makes the subject matter easier to focus on, and easier for the video editor to place captions in.

video-closed-caption

Another way to aid the hearing disabled is to include descriptions of non-speech elements in the video. Closed captions help fill in the silence when there’s no one talking. They are the text for non-speech information such as the identity of speakers, their manner of speaking, along with music or sound effects.

Some media players offer captions that are color blind friendly. These captions highlight discussions between two speakers using distinct colors to avoid confusion on who’s currently speaking.

Transcriptions can also help you get your message across to the hearing impaired. Arrange it in an outline form to make presentable and easy to read. Not only does it make the video content accessible, it’s also good for search engine optimization.

Flash

Say goodbye to Flash and design your site with HTML5. Flash is no longer supported on major browsers. Expect poor accessibility from using Flash in your design.

Another type of flash you should say goodbye to are flashing effects in videos. What seemed to be an innocent children’s show triggered seizures in hundreds of viewers in Japan. Photosensitivity can cause nausea, vomiting, or worse, epileptic seizures like what happened in Japan.

PDF Files

The site used PDF files to disseminate documents for printing. Documents such as e-book guides were saved as a PDF.

We followed HHS.gov’s PDF File 508 Checklist and set these guidelines for the client before publishing another PDF guide.

One of the major struggles in re-creating these PDF files was restructuring the content. Most of the PDF files were saved without a hierarchical outline to make it accessible. We had to reformat them with a clickable outline so that users could locate content without traversing through many pages.

Images that accompany your text need subtitles underneath, so screen readers can read the description. If possible, you should translate images with heavy text into a table format.

pdf-graphic-table

Table 1.1 What Do We Waste Most?

FoodsStatistics
SaladsAlmost 50% of what we buy, we throw out
Fruit & VegetablesAlmost 25% of these are thrown out.

Potatoes are the most wasted vegetable.

Bananas and apples are the most wasted fruits.

Bread & BakeryAlmost 20% of these are wasted
Meat & Fish10% of these are wasted

The easiest way to get a PDF accessible file is through Microsoft Word. Use the Styles and Formatting pane to titles, headings, quotes, etc. If you’re working on a long guide with section headers, it’s best to include a Table of Contents. Generate the table of contents via Word, don’t do it yourself.

word-doc-formatting

Afterward, save your file as a PDF. Before you click OK, make sure to click on Options, then tick all the options under “Include non-printing information”. This will include PDF structure tags within the document to make it accessible for all.

word-doc-pdf-tags

Tools We Used

We used the following tools to aid us in checking the accessibility of the site. Please note that most of the tools we used are related to visual impairment because of the nature of our client’s business:

WAVE Web Accessibility Tool
A general evaluation tool that assesses how accessible your site is. You can browse the tab at the left for errors that need resolutions.wave-tool

Tanaguru Contrast-Finder
Tanaguru Contrast-Finder finds correct color contrasts for web accessibility. It can calculate the contrast between two colors, and check if it is high enough. It also tests for alternatives you can use.

No Coffee – Chrome Extension
This was used specifically to simulate different visual impairments. Since the target users of our client’s website were visually impaired, we needed to get a “feel” of what they saw. It was hard to find a proper color combination for the site’s theme, but it was an eye-opener for us designers who worked on this project.

Visolve
This tool helped us with quick simulations of color vision deficiencies. it was easier to upload the image we were working on. Our goal was to use colors that didn’t fade together. We wanted to make it easy for users with any type of color blindness to navigate the site.

visolve-tool

SEMRush / Raven
We used several auditing tools such as Raven and SEMRush. In our experience, Raven helped in specific parts of the audit. SEMRush helped us detect issues such as language declaration.

If you don’t have the budget for these tools, I recommend using free website auditing tools such as MySiteAuditor and Screaming Frog. While they’re limited in function, they get the job done.

Final Thoughts

According to World Bank, one billion people (15 percent of world population) experience some form of disability. One-fifth of the estimated global total (110-190 million people) experience significant disabilities.

Because of technological innovations, we have the potential to make the internet a place not just for anybody, but for everybody. Web accessibility can help one billion people discover and learn information that was once unavailable to them. By taking advantage of these accessibility tools and best practices we can all make the web a better place.


]]>
http://uxmovement.com/content/how-we-made-our-clients-site-accessible-by-law/feed/ 0
Absolute vs. Relative Timestamps: When to Use Whichhttp://uxmovement.com/content/absolute-vs-relative-timestamps-when-to-use-which/ http://uxmovement.com/content/absolute-vs-relative-timestamps-when-to-use-which/#comments Tue, 19 May 2015 16:22:48 +0000 http://uxmovement.com/?p=8101

]]>
Information evolves over time like a living organism. What’s relevant this year might not hold as much weight a few years from now. That’s why it’s important to append timestamps to your content. But if you don’t display your timestamps in the right format users could have trouble using them.

Absolute vs. Relative Timestamps

There are two types of timestamps that most sites use. Relative timestamps display the number of minutes, hours, days, weeks or years ago a post was published. Absolute timestamps display the exact date and time a post was published.

Both formats offer utility in different ways. But when should you use one over the other? And how should you display them? These factors will determine whether your timestamps are usable or not.

absolute-relative-timestamp

When to Use Absolute Timestamps

There are times when users need to look back on past content to retrieve information. Without absolute timestamps, users can’t target a specific period to find the information.

Sites that host photos, documents, messages, tasks and events all need absolute timestamps. These content will hold utility in the future when users need to reference them. Use absolute timestamps when users can go back and make use of past content.

Friendly Formatting

The benefit of absolute timestamps over relative ones is that they offer a precise date and time. But dates and times are hard to interpret because not all users live in the same timezone or country. That’s why it’s important to display your absolute timestamps in a friendly format.

Converting Timezones

A problem with absolute timestamps is that they force users to convert timezones to get their local time. This will frustrate those who don’t live in the same timezone as your server. Users should be able to get the right time without making calculations or errors.

timezone-conversion

Imagine a user who is attending event and doesn’t notice the change in timezone or makes a mistake converting it. The user would end up missing that event, which could lead to unfortunate consequences. In contexts like these, it’s so important that your absolute timestamps are timezone friendly. The way to do this is to optimize your code so that it detects and displays the user’s local timezone instead of the server’s.

Start by storing your timestamps in UTC on your server. UTC is the universal standard that’s not affected by daylight savings time. To display the user’s local time, you need to have the user’s timezone offset, so that you can add it to your database’s UTC value. You can get user’s timezone offset by auto-detecting them with this Javascript Timezone Function.

Converting 24-hour Clock Times

If you have users around the world, not all them will use the same type of clock. Don’t force them to convert times to the clock they use.

clock-tooltip

Most english-speaking countries use the 12-hour clock as the dominant written and spoken system of time. Other countries use the 12-hour clock in spoken time and 24-hour clock in written notation. But most people in 24-hour countries are so used to both systems that they have no problem switching between the two (source).

Because of this, you should display your times in 12-hour clock as the default. But if you have many users who prefer the 24-hour clock, you could display the 24-hour time in a link or icon tooltip that opens on mouse hover.

Reading Numeric Date Formats

Time formats aren’t the only issue users face when reading an absolute timestamp. Dates can also give users trouble if they’re displayed in a numeric format.

numeric-date-formats

Different countries interpret numeric dates in a different order. Some put the day number first, some put the month number first and some put the year first. Figuring it out is taxing on the cognitive resources, and can lead to user error.

Avoid confusing users by using a written date format on your timestamp. Write out the month name in full or abbreviated form, but don’t abbreviate the year. An abbreviated year can cause confusion with the day number. You can display formatted dates for different countries with this Javascript Date Library. 

When Not to Use Absolute Timestamps

You may not have to deal with all these formatting issues if you don’t even need to use an absolute timestamp. Sometimes a relative timestamp is a better fit. 

If your site content updates often, or has a lot of user activity, you should use relative timestamps. Sites that publish news, or have forums where users post links and comments need to show immediacy. This allows users to stay up-to-date with new information as it comes in.

When to Use Relative Timestamps

Accuracy isn’t important with relative timestamps, but immediacy is. When users want to know how long ago a site published a post, they prefer time units in written form. This way they don’t have to mentally calculate dates and times and count back from the present day.

Not only that, but users don’t have to convert time zones with relative timestamps. Content published an hour ago or five hours ago makes no difference to users who only need a general sense of recency.

Friendly Formatting

There are a few formatting issues with relative timestamps that you should know. Unlike absolute timestamp issues that deal with interpretation, these deal with mental work.

Adaptive Time Units

The trouble with relative timestamps start when the time unit format doesn’t adapt to duration. Instead, it only displays a small subset of time units.

adaptive-time-units

For example, a site may display relative timestamps in minutes, hours and days. But after days it doesn’t display the time units that follow that. Users can get frustrated trying to calculate number of days in the hundreds.

Your relative timestamp should always adapt to duration and display time units accordingly. After 30 days, it should display months. After 12 months, it should display years.

Precise Time Units

If your site doesn’t display content in order of submission, users won’t be able to tell how far apart they were published. You either need to use absolute timestamps, or include precise time units in your relative timestamps.

precise-time-units

Precise time units combine different time units together. Instead of only displaying hours in your relative, you would display hours and the minutes that follow to get a more precise time. This gives users a better sense of the time lapse between posts.

Time Unit Abbreviations

Relative timestamps can sometimes take up more space than you want. If you’re displaying them in a confined area, such as a content card or mobile site, you should use time unit abbreviations.

time-unit-abbreviations

Use standard abbreviations that users can recognize. For the plural forms, don’t add the letter “s” to an abbreviation, use the same form as the singular (source). Here’s a table of standard abbreviations for every time unit.

Automatic Updating

When first viewing a web page, users get an accurate impression of how old each post is. But a fresh timestamp that reads “2 minutes ago” will no longer hold true the longer the user stays on that page.

This is because most relative timestamps don’t automatically update. Users have to refresh their page to get accurate timestamps. If you want to give users accurate relative timestamps, use this jQuery Plugin for automatic updating.

When Not to Use Relative Timestamps

There are times when relative timestamps aren’t as effective as absolute timestamps. When users need to reference a post, it’s easy to do with absolute timestamps because they display unique times. Posts with relative timestamps are harder to reference because they can display the same times.

Another disadvantage with relative timestamps is that they make time proximity harder to measure. Users won’t be able to view how much time has passed between different post submissions. This is important in messaging contexts such as chat, email and discussions.

When to Combine Relative and Absolute Timestamps

Each type of timestamp has their benefits. You can get the benefits of both by combining them together. If your site updates often and hosts past archives for referencing, you may want to combine timestamps.

Friendly Formatting

The challenge with combining both timestamps is finding the right time to convert them and handling the space it takes up.

Inline Display

One way of combining them is to display them inline with each other. You can display the absolute timestamp first and put the relative timestamp in parentheses.

inline-space-saving

Absolute timestamps include a date and time. Displaying both inline with a relative timestamp can take up a lot of space. You can save space by showing what’s relevant in the moment and leaving out what’s implicit.

To save space, display the time first, but exclude it after 24 hours and replace it with the date. To save even more space, exclude the year and display the full date after the current year passes.

Automatic Conversion

Another way is to convert relative timestamps to absolute ones over time. You can do this by setting the absolute timestamp to display over the relative one when the age of a post passes a certain period.

auto-conversion

For example, when a post is older than 4 weeks, it’ll display the published date and time. This allows for a graceful self-archiving of content, which is useful for large sites. Choose a time to convert to absolute timestamps when the pageviews of new content starts to taper off.

Tooltip Timestamps

If you want to display both, but need to conserve space, use tooltip timestamps. When the user hovers their mouse over the relative timestamp, the absolute one will display in the tooltip.

timestamp-tooltip

Users won’t know they can view the absolute timestamp on mouse hover if you don’t give them a visual cue. You could use a dotted underline on the timestamp to make it clear. Or you could place a clock icon next to the timestamp that displays the tooltip when they hover over it.

Final Thoughts

Time is a universal concept that transcends cultural barriers. Every user understands time, but not every user will understand your timestamp if it’s not formatted in a friendly way.

The practices and techniques in this article should help you find that friendly format. It’s time to treat timestamps more than just a stamp. They’re an ever-evolving mark of relevancy.


]]>
http://uxmovement.com/content/absolute-vs-relative-timestamps-when-to-use-which/feed/ 12
Why You Should Remove Orphans from Your Body Texthttp://uxmovement.com/content/why-you-should-remove-orphans-from-your-body-text/ http://uxmovement.com/content/why-you-should-remove-orphans-from-your-body-text/#comments Tue, 21 Oct 2014 17:34:33 +0000 http://uxmovement.com/?p=7274

]]>
Did you know that the way your paragraph text wraps can affect how users read it? You could create orphans that hurt readability. Orphans are short lines that appear at the end of a paragraph. They are caused by paragraph length.

When users read lines of body text, they build up a reading rhythm. Orphans interrupt the user’s reading rhythm and cause an awkward ending. The shortness of the last line makes finishing the paragraph feel abrupt. When reading aloud, orphans make the ending sound disjointed. A good paragraph should flow from beginning to end.

orphan-text

Orphans don’t just make your text sound awkward, they also make it look awkward. They create disproportionate rags in your body text. This makes the paragraph look asymmetrical and off-balance. The rags can also create lines of whitespace that can distract users. An ideal rag should go in and out from line to line in small increments.

To avoid orphans, try to extend the ending line of your paragraphs past the midpoint of the body text. There are a few ways you can do this.

  1. Adjust the spacing between words to create tighter or looser paragraphs.
  2. Adjust the column width of the body text so that the lines form proportional rags.
  3. Edit the paragraph wording so that the orphan connects to its preceding line.

The best way to remove an orphan is to edit the paragraph so that it uses more or fewer words. This is because adjusting word spacing and column widths changes the consistency of your page layout text. It’s best to remove an orphan after you’ve written your paragraph. This way you’re only changing the wording, not the message of the paragraph.

Don’t write paragraphs for your website and leave it at that. Look for orphans and remove them from your body text to give users the best reading experience. It’s not possible to remove every orphan especially if your site uses responsive design. But try to at least keep your orphans to a minimum for users who view your site on their desktop device.


]]>
http://uxmovement.com/content/why-you-should-remove-orphans-from-your-body-text/feed/ 16