Website Usability

Things a Web Designer Should Know About Website Usability

We all know that change is the only thing which is constant. Even if there are certain rules and regulations for designers, they too have changed with the passage of time. However, when it comes to usability principles, a few principles can be modified but cannot be changed. The reason behind these principles staying the same is because they have been adopted by human nature and they need to be kept in the same way for proper usage. If you want to change them, basics will always stay the same. As with any project from designing layouts for calendar printing to designing an online store, you should follow a protocol to make sure all important elements are included.
Let us take a look at few timeless usability principles for website designers:

Who Will Be Visiting Your Website

Things a Web Designer Should Know About Website Usability

As a designer, you are obviously spending a lot of time designing for others and when clients come to you, they have a certain kind of people in mind that they would like to target to. Therefore, you need to design the website keeping the target audience and their preferences in mind. Also, you will have to keep in mind if you have to design an e-commerce website where visitors can buy the product or if you have to simply design a website which provides information. It is also possible that your clients might want to target more than one kind and as a designer it is your responsibility to make a design targeting the right kind of audience.

So, the first principle is to keep the target audience in your mind. While keeping the target audience in your mind, you need to accomplish the objectives of your website. The objective of you website could simply be attracting more users to sign up for the website or buy products or interact. For instance, your website offer design services of marketing collateral like flyersbrochurespostcardsbusiness cardspostersbookletsrack cards andcalendars etc, then it should speak for its services in terms of design and usability.

Each and every step on the website should be well planned. If you want visitors to sign up for your website, give them half of the information they are looking for and rest of the information should be provided once they sign up. Always give them a good benefit of signing up.

Do Not Leave Your Visitors Confused and Unanswered

Things a Web Designer Should Know About Website Usability

Well, when a user visits a website, he obviously has a few questions in mind and he would like to have answers to those questions. You have failed as a designer if you are unable to answer a few basic questions of a visitor.

Whenever someone’s visit your website, he should be able to judge what your website is all about in the first glance because the most basic question that pops up in to a user’s mind is ‘Where am I’. Now, the name of website should be visible and clear enough. There should always be an ‘About Us’ tab highlighted on the main page of your website for user to get basic information about your products. Also, whenever a visitor visits other pages of your website, you need to highlight those tans so that he knows where he will land up if he clicks on the same tab again.

The second question that will pop up into user’s mind would be ‘what is his purpose’ behind visiting the website off course and will the website serve the purpose. Now, this depends on the objective of the website because if you have an e-commerce website, make it prominent that this website is for buying products. If it is not an e-commerce website and simply an informative website about your product, it should be designed in the same manner.

The third question would obviously be ‘Why should I read or buy from this website’. As a designer, your design will make the visitor stay on the website. Now convincing a visitor to buy stuff or read online, your writer has to work really hard. Your job is to provide a perfect design and space to the writer so he is capable of conveying information in a proper way.

Less Thinking and More Scanning

Things a Web Designer Should Know About Website Usability

There is a lot of difference in reading on a paper and reading online. When a user is reading online, he would like to get more information in a short span of time and would not really want to think. When it comes to online reading there is more of scanning and less of thinking. As a designer, it is your responsibility to design the page in a way so that it gets feasible for readers to scan and find the most important part.

Also, if you really want to build a user base, you need to make them think less and for this the designing and navigation of your website should be simple and easy yet stylish. The best way to do this is to put yourself in visitor’s shoe and if you find something complicated, obviously your visitor will find it to be complex too hence leaving your website. While designing you need to think from visitor’s perspective so that they can think less.

The text used on the website is also very important. Your writer might have an amazing vocabulary but your visitors might not so he needs to use layman language. Instead of using difficult words, he needs to keep things simple for users to be able to understand each and every tab. A simple example would be, you can use ‘Who We Are’ instead of using ‘About Me’ or ‘Contact Us’ would be better instead of using ‘Customer Care’. So the key is to keep things simple and understandable.

Knowing and Understanding Your Ideal Visitor

Things a Web Designer Should Know About Website Usability

You need to think from your visitor’s perspective but for that, you need to know and understand your visitor really well. Only then you will be able to put yourself in his shoes and think accordingly. What you need to do is find the common traits of the people who visit your website and then try to think from those people’s point of view. Always keep in mind that you will not be able to satisfy everyone. If you have managed to satisfy 80-85% of your customer base, you have managed to come up with a successful website.

Even as a designer, you need to think technically at times so that you can grab the attention of right kind of clients and visitors. If you are designing an e-commerce website, your goal should be bringing the products and their information to forefront. Do not make your visitors go in circle in order to find the information of their favorite product. As said earlier, understand your visitor and think from their mind, not yours.

Users Love the Feeling of Being Familiar

Things a Web Designer Should Know About Website Usability

I have seen a lot of designers trying to make changes in the basic conventions of a website designing just to make their website look different. This idea will not work really well for every visitor because you are confusing them more. At times, you have to avoid experimenting and keep things simple and conventional. When a user visits your website, he should sense a familiarity and since users are quite used to conventions, they will find navigating through your website quite easy.

As mentioned earlier, users do not like confusing websites and if you are experimenting, you re forcing them to think which is highly disliked by them. Instead of understanding your website, they will leave it. One example would be keeping the navigation menu always above. Stick to basic principles of website usability and you will not regret it.

Posted in 1. Comments Off on Website Usability

Google Fonts Tutorial

How to Use Eye Catching Fonts from Google’s Library

Once designers were limited to using system fonts in web design, which spawned a trend of creating text-based images and graphics. This technique may have made websites look better, but it introduced other problems. Webpages loaded slower and there was zero SEO value in using graphical headings. Along came changes to browsing that allowed font embedding, but this too was a cumbersome and inconsistent method of getting around Arial and Comic Sans.

Today, support for cloud fonts is almost a standard, to the joy of designers everywhere. While premium services such as Typotheque and Typekit let you take advantage of a huge selection of fonts, they are costly and not always practical. Google’s solution with Version 2 of their free online font libraryhas been to provide a high quality and dependable service for embedding fonts. Here are a few ways you can get the most out of using this fantastic resource. (updated from designzzz.com)

Google Web Fonts

Find the perfect font

Allow your website content to drive your choice of font and choose appropriate styles, which suggest the qualities you want your design to communicate. Enter preview text into the font finder interface, and then proceed to fine-tune your search by selecting filters and setting attributes using the handy sliders in the left sidebar. If you have a hard time getting results, reduce the specifications by collapsing one of the attributes such as the “width” option.

Choose the Right Style

Each font in the Google library has several different styles associated with it. If you plan to use the font as a heading, a heavier weight may grant a more powerful effect. Many fonts also include a bold or italic version that should be used in favor of the default typeface. These various styles are hidden in the default preview list, so you will need to click the “show all styles” link in the bottom right corner of the font’s preview box to see what it has to offer. Clicking “hide all styles” will collapse the preview.

Choose Harmonic Combinations

Limit yourself to a small number of typefaces when building your font combinations – three or less should do. Choose fonts that share similar attributes or consider using different weights or styles of the same font.However, go for a bit of contrast; if your fonts are too similar with only a small variation, it can make your typography look confused. The goal is to highlight a distinct style.

Some Excellent combinations put together by designer Josh Johnson are:

  • Lobster & Cabin
  • Allerta & Crimson
  • Arvo & PT Sans
  • Corbin & Nobile
  • Ubuntu & Vollkorn

Test Drive

Once you have found the perfect font combination, selected your styles, and added them to your collection, clicking the “Review” button will bring you into the Test Drive interface where you can view your font selections in action and make any necessary adjustments.

Use one Header Link for Multiple Fonts and Styles

When you add fonts to your collection, a blue bar will appear at the bottom of the screen with a big“Use” button. Select the styles you wish to include and note the page load meter on the right side. The more styles and fonts you select, the heavier the page load will be, and including individual fonts and font styles will make the load even worse. With version 2 of Google Fonts, the code snippet generated for you will combine multiple fonts and selected styles into one stylesheet for you, which is preferable to linking each one-by-one.

To understand how this method works, each font is separated by a pipe. Specific styles are appended to the font name by a colon and separated using commas. Spaces in the font names must be replaced with a plus.

Example: http://fonts.googleapis.com/css?family=Gentium+Book+Basic:700,700italic|Ubuntu:400,700italic

Always place your link code before any “<script>” tags in your head to allow Internet Explorer to detect them properly. As an alternative, you can opt to use @import in your CSS document instead:

/* Google Fonts Import
-------------------------- */
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:
 regular,bold|Droid+Sarif:regular,italic,bold,bolditalic&subset=latin);

Add a Transparent Shadow for Text Smoothing

A common complaint with embedded fonts viewed in Windows is the jagged edges that plague some font styles. This is a serious problem for designs that use extremely light or thin fonts, where jagged edges completely ruin the font’s elegance or readability. Thankfully, there is a solution in the CSS text:shadow property. By setting a 1pixel transparency, browsers that support this rule will display the text with a light anti-aliasing effect. Add the property to any class where one of your Google fonts is specified, or use it in your universal declarations to apply it to the whole site.

text-shadow: 0 0 1px transparent;

Google Fonts for WordPress

If you are like thousands of designers, you probably use WordPress for your own portfolio or as a platform for client sites. The “WP Google Fonts” plugin uses the Google fonts API to provide a slick interface for selecting up to 6 fonts and associating them with specific elements. There is a custom CSS box for assigning fonts to special classes as well. This is an excellent worry-freealternative to embedding fonts or font options directly into the theme; frequent updates to the plugin ensure changes to the Google API will not affect your website.

+++Updated from designzzz.com

Posted in 1. Comments Off on Google Fonts Tutorial