Steps for improving the Usability of Your Website

The term “Usability” is a nightmare for me. It’s a small word with a large meaning.Regarding the usability of a websites, an entire industry has formed – called User Experience (UX) – with the idea of improving how a visitors to your website can get an interactive experience and consume the content. If you can make it easy to find what they’re looking for, they’re more likely to hang around your website and continue reading/watching/interacting. Such a huge impact is hidden inside such an ordinary word.

In light of the big implications about usability, this article discusses some of the higher level concepts around UX, and following these techniques will give you some practical steps to improve the usability of your site.

Check on Several Versions of Browsers

The browser which you are using is not the only one that visitors to your site will be using. Make sure that your website is looking proper on any other browsers, and if it does not, make the appropriate changes. For example, check your site on Chrome, Firefox, Internet Explorer, Safari, and use mobile devices (Android and Apple) to check how your site translates. You may find that certain elements don’t load properly, like Flash, on mobile devices. You may need to develop a completely different version of your website for mobile accessibility.

Stick on with One Color Scheme

A consistent color scheme is not only more attractive but also it will support your brand. Choose 2-6 colors that work very well together and do not try  vary them from page to page. Also make sure the color scheme you choose represents your business. This is where CSS plays a big part in making it easier for brand or re-brand your site quickly .

Selecting Consistent Image Sizes

Your website will make more sense,if the image sizes are consistent. Try to use the same size for all of your thumbnails. Make all of your product pictures uniform in size also use same sizes for all of your extra images. Of course exceptions occures, such as your header graphics or sidebar images. But try keep it consistent whenever possible.

Use Minimal Fonts

The more fonts you use, the more cluttered and unprofessional your website will look like. Stick on with two or three font styles and sizes and use them consistently throughout. For instance, use the same size and font for titles/subtitles and the same font and size for text. Consistency is the key and will improve the ability for users to decide which information on the page is important.

Create Easy Navigation

Using standard navigation elements like a nav bar at the top of the site with common terms like “home”, “about”, and “contact” will definitely help users to quickly find critical content. Search tools are a must these days as users often have queries about specific product or service they’re looking for. The key is to make these tools clear and easy to find so visitors can get to the content they want.

Use a Fluid Layout

A fluid layout helps your website to be viewed on a larger screen. Fixed layouts are not so convenient enough to chase away potential customers. With the use of mobile and handheld devices,generally a much broader array of screen sizes  it’s critical that your site adapts to the user and makes it easy for them.

Feedback Interaction

Have you ever tried to fill out a form and mistyped your email address, and you encountered a situation of either no explanation for your error or else simply a “form was filled out incorrectly” message without further explanation? This is a typical example for poor feedback interaction on elements like forms or search results. Take the time to make forms, searches easy as possible for users.

“Usability” is such a nice-sounding word. But visitors will not use nice words to describe your website if the usability is sub-par. Even worse, they will leave your site never to return. UX is a very important part of website design so be sure to follow the advice of top UX designers or else hire a professional designer to ensure that the functionality of your website never gives visitors a reason leave you lonely.


Common myths and mistakes in typography

Every graphic or web designers works with typography all the time ,even if we don’t call all of us typographers , setting type in one form or another is unavoidable.Its in an important part of our job.And for hundreds of years it was our job alone well, technically speaking it is the duty of a type setter’s.desktop publishing came along and situation has changed.

Since the first GUIs introduced anyone with a computer has been able to set their own type,thus alivated the typewriters job obviously that was a great revolution

Now, if you’re a designer,infact if you know your typography probably you are not gonna learn anything new from this little post, eventhough it might help you to educate your clients some common myths and mistakes in layman’s typography.

Here it goes.

Double Space After a Full Stop (.) importance

Let’s be clear about it: not neccessary to have a double spaces after a full stop,do you agree?. You may never have encountered, or noticed, such a situation, but if you have you’ll know how annoying it is to have to go through the full document and correct it,but as you all know, searching and replacing makes this easier, but auto-correcting a 100 page document without manually controlling the result is never a good idea.Do you have any idea about,where did all those extra spaces come from?

Is the double space (top) necessary to divide the sentences or is a single space (bottom) enough?

Double spacing, i.e. putting two spaces after full stops, became popular with the introduction of the typewriter in the late 1800s. Like typewriters were using monospaced fonts it was felt like a single word space is notwide enough to separate sentences. Thus, an extra space is inserted to help mark the end of a sentence.

That was a reasonable concern a few decades ago, like noticing the start of a new sentence definitely helps readability . Nowadays, type designers assign appropriate horizontal space to each character – including the humble full stop – making double spacing obsolete. A single space combined with a capitalized first word marks the next sentence very much clear. So let’s just stop that method

About title case headers

While speaking about capitalising first words, how about capitalising all of them (in headers, that is)? Up next, the incredibly annoying and, unfortunately, equally wide-spread: Title Case Headers.

Well the,Sentence case (bottom) makes sense for readability – why do we cling to disturbing capitalisation (top)?

Most of the people mistakenly refer to title case as camel case, though the comparison is fitting: using title case makes your headline about as calming and legible as a line of camels stampeding across the page. Why on earth would people insist on a practice that deters readability?

The process of capitalising headers started since a long time back and probably stems from the Germanic urge to capitalize “important” words. Historically we’ve capitalized a lot – including nouns, pronouns, places, honorifics, even adjectives – and are we still doing it .

As a result the rules of titling are little confusing: Capitalize all words, except for closed-class words such as articles, conjunctions and prepositions. Unless the preposition is a long word like ‘Between’, that is the capitalize pronouns, even though they’re closed-class. Also just make your own mind up when it comes to hyphenated words.

Whether it is all about words or just nouns, ultimately it seems to be about adding emphasis or importance to words. Surely, though, the whole headline is emphasised by definition so unless you want to go full uppercase, why not just leave it as it is? Fortunately that’s what exactly many British publishers,including The Economist, The Guardian, The Times decided to do. Sentence case is much more easier to read, and no-one (well, apart from the Germans) capitalizes nouns anymore anyway.

Justified Text is a need or not?

If there’s any client request that invites my confused face once more by asking “can you make my logo bigger?” it’s got to be “justify everything”. It is easy to reason against it, of course, but just what is it about justified text that makes it so appealing? It seems every Tom, Dick and Harry wants – no, craves – it, no matter how illegible it makes their copy.

Notice the islands and rivers of white space in the justified paragraph (left) contradicts the even spacing of the left aligned )(right). Which is much more easier to read?

Long back it was thought that left aligned text was “disorderly” due to the irregular lines on the right side, and so justified compositions became part of a tradition of symmetrical construction around the central folds of pages. That is history, however, and I fail to see the reason why this idea is so prevalent still. Granted, when it’s done right justified text may have a look somewhat like a tad “prettier” than left-aligned, but if the modernist typographers taught us anything it’s that the purpose of typography is not to be pretty, but to be readable.

And that brings into another significant question about argument for justified text: that it utilises the space better. This is partly a false notion as justified text doesn’t actually fit much more on a line, it mainly moves the irregular spaces from the right hand side into your content. This creates disturbing rivers of white space that actually disturbs good readability ,you can help this by carefully adjusting your H&Js in inDesign, though it’s not possible with CSS.

In short, do not go for justified text unless you really have a good reason to – if you want to save space or can’t live with irregular lines, hyphenate and manually add soft breaks to even it out. If you can’t do that infact web has it’s limitations, just suck it up. After all the readability of your content is more important than forced symmetry.

“In a perfect world, all text should be unjustified and range left.” – Enric Jardi

Why Double or Single Line Space?

During my school time, I was always told to set our my essays in a certain font at a certain size (usually 12pt) at a certain line space – either 1.5 or double. Umm, double what, exactly? For reasons unknown Microsoft Word decided to dumb down their software and not only change the term leading to line space but also change our concept of it from points (“please set the text at 12pt using a leading of 15pt”) to vague units (“you’re probably too stupid to understand the basic concept of leading, so just hit the button that says “double line space”).

Granted, a limited set of line space variables may be easier to comprehend for the end users – if we underestimate and patronise them – and the consistency of school reports may be impeccable, but at what cost? Imagine if plumbers and electricians all used the metric system, whilst consumers were only taught imperial in school – it simply wouldn’t be very efficient. Changing the global consumer’s understanding the typographical concept only extends the bridge between designers and our clients. I know explaining leading to people is pretty straightforward, but wouldn’t it be easier if we all spoke the same language and used the same units of measurement? Refering to leading as single or double line space is not just confusing, it’s also inaccurate.

Now, why CSS calls it line-height is a different story.

Using Bold and Italics as Styles

One of my biggest gripes with Microsoft Word and any other simplistic “publishing” software and “WYSIWYG” editors is how they apply bold and italics. I’m not gonna criticise the usability here – clicking a button or still, pressing CMD+B is faster than selecting “Helvetica bold italic” from a dropdown – but I am asking about the underlying concept. As with line spacing, the simplified alternatives to professional typography offered by such a mass-market software creates separate sets of terminology and understanding. Reducing bolds and italics to mere buttons means that they are simply styles applied to whatever font you’re using. They’re not and are carefully crafted fonts emerged from months of hard work and incredible attention to detail.

Bold: Is Akzidenz Grotesk (AG) regular with bold applied in MS Word (top) and AG bold as supplied by the foundry (bottom)

Italic: Is AG regular with italic applied in MS Word (top) and AG italic as supplied by the foundry (bottom).

If you apply italic without having the italic font of a particular typeface installed, MS Word will automatically create the italic font for you. The computer – not a type designer – alters the font to whatever it determines the font should look like. Not only does this result in sub-par typography, it also makes it unnecessarily difficult to explain to a client why they need to find out for the whole family of fonts in order to get the range of weights needed.

So make sure your client is aware of it: they’re not styles, they’re fonts.

Fantasy fonts?

Well, next is the fantasy fonts. Isn’t it amazing that we can write the word “Cactus” with prickly letters and use a font made from vine leaves to spell out “Wine”? No. we can’t. It is needed to use Bleeding Cowboy to accompany your Western comic, nor is Double Feature the ideal typeface for a bloody horror flick.

The timeless elegance of the original Scream poster is easily ridiculed by using an over the-top fantasy font.

Choosing the right typeface is a bit difficult process, but using the physical attributes of the thing you’re designing for like the criteria to make the choice is seldom a good idea. Instead, if you choose a typeface that compliments the underlying emotions or mood of the text ,often leads to a more subtle, professional and timeless result. Better , don’t worry too much about adding flair to the text you’re setting. Instead make sure you’re not communicating anything you or the author does not want to communicate with. say for example, setting a party invitation in Comic Sans (though not strictly a fantasy font) might communicate that the party is informal, but it also signals like it will be immature, childish and completely void of finesse.

All typography conveys a certain mood and it does so best through subtle means. If the difference between serif, slab and sans isn’t having much variations, imagine the incredible diversity possible when adding different weights, cases, tracking and contrast to the mix. Some would even argue we have too much variation and that a single font – Helvetica, for example – that what we need.