When developing information for a website, which of the following is an important consideration?

in Tips for Getting Started

This page introduces some basic considerations to help you get started making your user interface design and visual design more accessible to people with disabilities. These tips are good practice to help you meet Web Content Accessibility Guidelines (WCAG) requirements. Follow the links to the related WCAG requirements, detailed background in the “Understanding” document, guidance from Tutorials, user stories, and more.

Page Contents

Foreground text needs to have sufficient contrast with background colors. This includes text on images, background gradients, buttons, and other elements. This does not apply for logos, or incidental text, such as text that happens to be in a photograph. The links below provide more information on the minimum contrast ratio as required by the WCAG and how to check contrast. “Contrast ratio” is a short version of the more technically correct term “luminance contrast ratio”.

Example: Contrast ratio

Insufficient

Some people cannot read text if there is not sufficient contrast between the text and background. For others, bright colors (high luminance) are not readable; they need low luminance.

Sufficient

Some people cannot read text if there is not sufficient contrast between the text and background. For others, bright colors (high luminance) are not readable; they need low luminance.

More Information

While color can be useful to convey information, color should not be the only way information is conveyed. When using color to differentiate elements, also provide additional identification that does not rely on color perception. For example, use an asterisk in addition to color to indicate required form fields, and use labels to distinguish areas on graphs.

Example: Using color to convey meaning

Color only Color and symbol

Example: Refer to something using color alone

Color only Color and number

1Green triangle: Angles are 30°, 60°, 90° 2 Blue triangle: Angles are 30°, 30°, 120° 3 Red triangle: Angles are 30°, 60°, 90° 4 Yellow triangle: Angles are 40°, 70°, 70°

More Information

Ensure that interactive elements are easy to identify

Provide distinct styles for interactive elements, such as links and buttons, to make them easy to identify. For example, change the appearance of links on mouse hover, keyboard focus, and touch-screen activation. Ensure that styles and naming for interactive elements are used consistently throughout the website.

Example: Unique styles for different link states

Style links to stand out from text

Some people can't use a mouse and use only a keyboard to navigate through web pages.

It is important that users can reach all interactive elements using the keyboard, and that it is clear which element has focus.

Visible keyboard focus could be a border or highlight that moves as you tab through the web page.

More Information

Ensure that navigation across pages within a website has consistent naming, styling, and positioning. Provide more than one method of website navigation, such as a site search or a site map. Help users understand where they are in a website or page by providing orientation cues, such as breadcrumbs and clear headings.

More Information

Ensure that all fields have a descriptive label adjacent to the field. For left-to-right languages, labels are usually positioned to the left or above the field, except for checkboxes and radio buttons where they are usually to the right. Avoid having too much space between labels and fields.

Example: Labels and input fields associated by proximity More Information

Provide easily identifiable feedback

Provide feedback for interactions, such as confirming form submission, alerting the user when something goes wrong, or notifying the user of changes on the page. Instructions should be easy to identify. Important feedback that requires user action should be presented in a prominent style.

Example: Using error list, icon, and background color to make errors stand out

Please correct the following errors:

More Information

Use whitespace and proximity to make relationships between content more apparent. Style headings to group content, reduce clutter, and make it easier to scan and understand.

Example: Spacing highlights relationship between content

More Information

Create designs for different viewport sizes

Consider how page information is presented in different sized viewports, such as mobile phones or zoomed browser windows. Position and presentation of main elements, such as header and navigation can be changed to make best use of the space. Ensure that text size and line width are set to maximize readability and legibility.

Example: Content and navigation adapt to smaller mobile screen

When developing information for a website, which of the following is an important consideration?
When developing information for a website, which of the following is an important consideration?

Display in a wide window with small text uses multiple columns for primary content, visible navigation options, and visible secondary information.

Display in a narrow window, such as a mobile phone, or with large text uses single column for primary content, navigation options are revealed using an icon, and secondary information is also revealed via icon.

More Information

Provide a place in your design for alternatives for images and media. For example, you might need:

  • Visible links to transcripts of audio
  • Visible links to audio described versions of videos
  • Text along with icons and graphical buttons
  • Captions and descriptions for tables or complex graphs

Work with content authors and developers to provide alternatives for non-text content.

Example: Design includes links to a transcript and to an audio described video

When developing information for a website, which of the following is an important consideration?

More Information

Provide controls for content that starts automatically

Provide visible controls to allow users to stop any animations or auto-playing sound. This applies to carousels, image sliders, background sound, and videos.

Example: Show play/stop and selection controls in carousel design

When developing information for a website, which of the following is an important consideration?

More Information Learn More About Accessibility
Back to Top

Many businesses make the mistake of neglecting usability. Usability is critical for the success of any website and should never be overlooked. Good usability can improve the performance of your website and increase your chances of success. It can also boost sales and revenue for your business.

For your website to successful, it should not only look good but also provide a seamless user experience for visitors. This is why good usability is important. It will set your website apart from your competition.

In web design, good website usability is about making it easy for visitors to find the information they need quickly and easily.

There are many ways to improve the usability of your website. This article takes a look at 11 essential characteristics of a user-friendly website. These simple usability recommendations can make your website more appealing for customers and improve your chances of success online.

Here are 12 essential characteristics of a user-friendly website.

1. Mobile Compatibility

As more and more people use their mobile phones to access the Internet, creating a mobile optimized website has become a necessity.

The first step is to check how your existing website appears on mobile. You can use Google mobile site tester to find this out. If your website cannot currently be accessed on mobile, you can create a mobile version of your website for free with the help of web-based mobile website builders.

When developing information for a website, which of the following is an important consideration?

2. Accessible to All Users

A user-friendly website should also be accessible to everyone including blind, disabled or the elderly. These users typically use screen-readers to access the Internet. The 508 website accessibility guidelines highlights simple web design techniques that can be applied to make sure your website can be accessed easily on-screen readers, making your website available to a larger audience.

When developing information for a website, which of the following is an important consideration?

3. Well Planned Information Architecture

How information is organised and presented on your website is vital for good usability. However, it is often neglected. It has become even more important today as websites offer a wide range of information and resources to attract their target market. Plan your website sections and categories carefully and present information in a way that it is easy for users to find. Always think from the perspective of your users. This is particularly important if you offer a lot of content on your company's website.

4. Well-Formatted Content That Is Easy to Scan

The average Internet user skims through the content on a web page instead of reading each and every word from top to down. Users tend to scan through key parts of the page quickly to determine if it is relevant to their needs.

It is important to format your content with this in mind. Correct use of headings, sub-headings, paragraphs, bullets or lists help to break up text, making it easy for readers to scan.

When developing information for a website, which of the following is an important consideration?

5. Fast Load Times

Nothing is more annoying for website visitors than a website that takes long to load. In fact, slow speed is one of the main reasons why visitors leave a website. Making sure your website loads within 4 to 6 seconds is important for good usability. It also affects your search engine ranking.

You can use free tool such as Pingdom to test the speed of your website and to get suggestion on what you can do to improve your speed.

I have found third-party website plugins and widgets including website tracking, social media, to be one of the most common factors that affects website speed. Try to limit their use and only use the ones that are absolutely necessary.

It is also one of the main reasons visitors leave your site. Customer expectations have changed significantly in recent years. A typical customer will only wait for a few seconds for your page to load, after which they will most likely navigate away to a competitor's site never to visit again.

When developing information for a website, which of the following is an important consideration?

6. Browser Consistency

Browser compatibility can be easily overlooked. Even the websites of some of the most reputable companies suffer from this problem due to neglect. This is bad for branding and has a negative affect on website usability.

Although modern browsers have evolved and become more efficient, some inconsistencies still exist in how a website is interpreted by different browsers. It is important to ensure your website appears and behaves consistently across all major browsers such as Chrome, Internet Explorer, Firefox, Safari and Opera. Simple things like this set a professionally designed website apart from the rest.

7. Effective Navigation

Good navigation is one of the most important aspects of website usability. Simple HTML or JavaScript menus tend to work best and appear consistent on all browsers and platforms.

It is equally important for the navigation to be clutter-free. Try to limit the number of menu items as far as possible. A drop-down menu or sub-navigation may work better on large site with many sections and pages.

Advancement in DHTML, and JavaScript libraries such as Motools and Ajax also opened the doors to many new possibilities for creating innovative navigation systems. Take a look at Mashable's example below.

When developing information for a website, which of the following is an important consideration?

There is more to navigation than menu. Here are some other aspects to consider:

  • Good search feature.
  • Multiple ways to explore content e.g. top 10, most rates, most popular, etc.
  • Custom 404 Page.
  • Good Internal Linking
  • Informative header and footer

8. Good Error Handling

Good error handling and description on-screen messages are very important for good usability. However it is often overlooked. Correct handling of errors at a code level ensures the website is robust and free from bugs. Displaying the right error message improves the user experience and overall usability.

When developing information for a website, which of the following is an important consideration?

9. Valid Mark-Up & Clean Code

A website that adheres to the relevant web design best practices and standards is often more robust and dependable. It also ensures the website will load faster and appear consistent across browsers and devices. It also makes it easier to locate problems and troubleshoot if the need arises.

More information and mark-up validation tools can be found on W3C's website.

10. Contrasting Colour Scheme

The right contrast between the background of the website and content is one of the most basic yet most important web design principles that should never be overlooked. Good contrast between background and text e.g. black text on a white background makes your content legible and easy to read. Lack of contrast, on the other hand, makes it very difficult for visitors to read your content.

When developing information for a website, which of the following is an important consideration?

11. Usable Forms

Forms are a very important element on business websites. They allow users to interact with the site. Forms are also very useful for generating leads for a business.

To get the most out of your site, it is important to ensure the forms are easy to use and accessible to everyone.

When developing information for a website, which of the following is an important consideration?

Here are some tips:

  • Use correct labels for all fields
  • Follow good form design principles
  • Try to keep the number of fields to a minimum
  • Offer tooltips and suggestions
  • Display on-screen message on completion
  • Use correct validation

Conclusion

Website usability plays a vital role in the success of a website. Good usability helps to provide a seamless experience for visitors and improves your chances of success. It is one of the factors that sets a professionally designed website apart from the rest. Given above are 11 usability characteristics that every website must display. It can help to make your website a success.