At this point, every great architect
and designers understand the significance of ease of use for their work. Usable
sites offer awesome client encounters, and incredible client encounters lead to
glad clients. Charm and fulfill your guests, as opposed to baffle and disturb
them, with shrewd outline choices. Here are convenience issues that sites
regularly face, and some suggested answers for each of them.
1. Tiny clickable area
Hyperlinks are intended to be
clicked, so to make them usable, it bodes well to guarantee that they're
anything but difficult to click. Here's a case of connections that are very
little; clicking them is harder than it ought to be. These are the remarks
joins on Hacker News, a social news site. (Interactive zones are highlighted in
red):
Here’s an example of the same
interface element, the comments link, but this time with a much larger
clickable area:Website
Design Bangalore
Why would we want a larger clickable
area? Simple. Because our hand movement with the mouse isn’t very precise. A
large clickable area makes it easier to hover the mouse cursor over the link.
To ensure we get a large clickable area, we could either make the whole link
bigger or increase the padding around the link using the CSS “padding”
property. Here’s the code: Web Designers Bangalore
The CSS has been placed inline
together with the markup to make the example simpler, but in real life you’ll
likely want to add this styling to your CSS file by giving the link a class or
id and targeting it with that.
You can read more about padded link targets for better mousing in a 37signals article on padded link targets. According to the article, padding provides users with “a feeling of comfort. It’s just really easy to click the links. It feels like the links are working with you instead of against you.”
You can read more about padded link targets for better mousing in a 37signals article on padded link targets. According to the article, padding provides users with “a feeling of comfort. It’s just really easy to click the links. It feels like the links are working with you instead of against you.”
2. Pagination used for the wrong
purpose:
Pagination alludes to part up
substance onto a few pages. This is regularly found on sites that have not
insignificant arrangements of things; for instance, items in a store or
pictures in an exhibition. Utilizing pagination for this reason bodes well on
the grounds that showing an excessive number of things on one page would make
the page slower to download and prepare.
In any case, there is another way
that pagination is utilized on the Web today. Content pages, similar to blog
articles, are in some cases split into a few pages. Why is this done?
What's the increase? It's improbable
that the article is long to the point that it requires pagination; as a rule,
it is utilized to expand site hits. Since a considerable measure of sites and
magazines get their income through promoting, getting more online visits (i.e.
singular page loads) helps their survey insights and permits them to charge
more for every promotion.
While this may seem like an easy way
to squeeze more money from your ads, it poses two main problems. The first is
that it’s just really, really annoying. Having to load several pages just to
read one article isn’t fun. You’re creating a barrier for your visitors that
doesn’t have to be there.
The second reason has to do with SEO (search engine optimization). Search engines use the content on your page to make sense of what it is about and then index it accordingly. If the content is split into several pages, it is diluted, and so each page makes less sense on its own and holds less keywords about its topic. This may negatively affect the ranking of the article in search engine results.
The second reason has to do with SEO (search engine optimization). Search engines use the content on your page to make sense of what it is about and then index it accordingly. If the content is split into several pages, it is diluted, and so each page makes less sense on its own and holds less keywords about its topic. This may negatively affect the ranking of the article in search engine results.
3. Duplicate page titles
The title of each Web page is important. Page titles are the
pieces of text we write between the <title> tags in the <head>
section of our HTML code. Sometimes people create a generic title while working
on their website’s template — their website’s name, for example — and then
re-use the same title across the whole website. This is wrong because it robs
each page of a couple of key benefits.
The first benefit is that a good title communicates to your visitors a lot of information about what the page is about. People can quickly figure out if they’re in the right place or not. Remember that this title doesn’t just show at the top of the browser window; it’s also shown on the search engine results pages. When people see a list of results on a search engine like Google, they read the page title to figure out what each page is about. This alone is a good enough reason to spend a little time optimizing your page titles.
The second reason has to do with SEO. Search engines need different information to rank the results of a particular query. Page title is one of the more important pieces of information they use to gauge how relevant your page is to a particular search term. This doesn’t mean you should load as many keywords as possible into the title — that defeats the first benefit — but you should ensure that each title succinctly describes the content of the page, including a couple of words you think people will search for.
Here’s an example of a good page title. This is a Smashing Magazine page title as seen inSafari: Web Developers Bangalore
The first benefit is that a good title communicates to your visitors a lot of information about what the page is about. People can quickly figure out if they’re in the right place or not. Remember that this title doesn’t just show at the top of the browser window; it’s also shown on the search engine results pages. When people see a list of results on a search engine like Google, they read the page title to figure out what each page is about. This alone is a good enough reason to spend a little time optimizing your page titles.
The second reason has to do with SEO. Search engines need different information to rank the results of a particular query. Page title is one of the more important pieces of information they use to gauge how relevant your page is to a particular search term. This doesn’t mean you should load as many keywords as possible into the title — that defeats the first benefit — but you should ensure that each title succinctly describes the content of the page, including a couple of words you think people will search for.
Here’s an example of a good page title. This is a Smashing Magazine page title as seen inSafari: Web Developers Bangalore
Here we have the title of the
article, the category of the article and the name of the website. Putting the
name of the website last puts more emphasis on what the page itself is about,
rather than on website branding, which is still there. Here’s what the HTML
code looks like in the markup:
And here’s how the page is displayed
in a Google search result:
4. Content that is difficult to
scan
To guarantee that your site is
usable, you can't just have a decent outline; you likewise require great
duplicate. Duplicate is a term used to depict the greater part of the content
substance on a site. Yes, great configuration will direct your guests around
the site, center their consideration on the things that matter and help them
understand data pieces; yet guests will at present need to peruse content to process
data. This makes duplicate a vital piece of your general site plan.
Before you can compose great duplicate, however, you have to see how individuals will really see your site. Try not to accept that your guests will read everything through and through. That would surely be incredible, however sadly that is not how it functions. The Web barrages individuals with data, and the vast majority of us attempt to devour however much of it as could reasonably be expected. This prompts exceptionally wild perusing conduct: we bounce starting with one bit of substance then onto the next, starting with one site then onto the next. Individuals tend not to peruse sites through and through; they begin perusing whatever pops out at them to begin with, and afterward move to the following thing that catches their advantage. The example looks similar to this:
Before you can compose great duplicate, however, you have to see how individuals will really see your site. Try not to accept that your guests will read everything through and through. That would surely be incredible, however sadly that is not how it functions. The Web barrages individuals with data, and the vast majority of us attempt to devour however much of it as could reasonably be expected. This prompts exceptionally wild perusing conduct: we bounce starting with one bit of substance then onto the next, starting with one site then onto the next. Individuals tend not to peruse sites through and through; they begin perusing whatever pops out at them to begin with, and afterward move to the following thing that catches their advantage. The example looks similar to this:
The red circles indicate the areas
where visitors tend to focus their gaze, and the numbers indicate the order in
which they look at these elements. Users dash from one interesting part of the
page to another. To take advantage of this chaotic browsing pattern, you need
to structure your copy a certain way. Here are a few pointers:
- Have a few points of focus. These are the parts of your page that attract the attention of visitors. This can be achieved by stronger, higher-contrast colors and larger fonts. You can also use images, such as icons, next to text to give these areas even more visual pull.
- Each focus point should ideally be accompanied by a descriptive heading. Without reading the copy any further, visitors should be able to understand what this bit of content is about. Don’t make headings mysterious or vague to draw people in. Keep them informative yet concise. People want information quickly, and withholding it only annoys them.
- Any other text should be short and easy to digest. Provide just the essentials, and strip out the rest. In most cases, extra text that copy writers put in to make a point less ambiguous only adds dead weight. People will read bite-sized pieces of text but are put off by long paragraphs. Cut your copy down until no fat is left to cut.
The “Why you should use OpenOffice” page could definitely use
improvement. No clear points of focus are provided, aside from the large banner
at the top; and the copy is grouped together in huge chunks, making it daunting
to read.
5. No way to search
A lot of people start looking for a
search box as soon as they arrive on a page. Perhaps they know exactly what
they’re looking for and don’t want to spend time learning the website’s
navigation structure. Jakob Nielsen calls these people search-dominant
users:
Our usability studies show that more
than half of all users are search-dominant, about a fifth of the users are
link-dominant, and the rest exhibit mixed behavior. The search-dominant users
will usually go straight for the search button when they enter a website: they
are not interested in looking around the site; they are task-focused and want
to find specific information as fast as possible.
Whether you run an online shop or
blog, you need search. People may come looking for a particular product or for
an article they remember reading a while back, and chances are they’ll want to
find it with a quick search. The good news, if you haven’t already implemented
search on your website, is that it’s very easy to do.
You don’t need to code your own search
feature; search engines like Google and Yahoo have very likely already
indexed most, if not all, of your website’s pages, so all you need to do is
pick the one you want to use and plug in a search box. Here’s the form code for
using Google as your search engine:
<form
action="http://www.google.com/search" method="get">
<fieldset>
<input
type="hidden" name="sitesearch"
value="smashingmagazine.com" />
<input
type="text" name="q" size="31"
maxlength="255" value="" />
<input
type="submit" value="Google Search" />
</fieldset>
</form>
And here’s the one for Yahoo:
<form
action="http://search.yahoo.com/search" method="get">
<fieldset>
<input
type="hidden" name="vs"
value="smashingmagazine.com" />
<input
type="text" name="p" />
<input
type="submit" value="Yahoo Search" />
</fieldset>
</form>
To make it work, all you need to do
is change the value of the “hidden” field to your website’s domain name.
This will limit the scope of the Google or Yahoo search query to just your
website. You may also want to modify the value of the “Submit” text to say
whatever you want.
6.
Too much functionality that requires registration
Your website may have some content
or features that require visitors to register before using. That’s great, but
be careful how much content is put behind this registration shield. Very
interactive Web applications, such as email, document editing and project
management, restrict 100% of their functionality to registered users. Other
websites, such as social news websites, do not. I can browse all the stories on
Digg and Reddit without
having to log in; users do not have to identify themselves to enjoy some
functionality.
When you implement a log-in barrier,
be careful that you don’t lock away features that don’t really need user
identification. Some blogs require people to register before posting. Sure,
that will significantly decrease spam, but it will also significantly
decrease the number of comments you see, too.
User participation on your website
is affected by how many barriers there are. Removing barriers such as
registration will almost certainly increase user participation. Indeed, once
users start using your website, they will more likely sign up, because
they’re already involved.
The GetSatisfaction
interface allows you to fill in your comment about a company or product and
then click the “Post” button. Instead of seeing your feedback posted, you’re
greeted with an unexpected “Log in or register” message. Not good, considering
the customer may already be frustrated.
The landing page for Pixlr, an
online graphic editing app, has a link titled “Jump in n’ get started!”
Clicking on it opens the app. No trials, no registration; you test drive the
app right away.
Posterous, a blog hosting network, doesn’t even
require registration to start using it. Just send an email with your post, and
a new blog is created for you.
7. Old permalinks pointing
nowhere
A permalink is a link to a page that
isn’t meant to change; for example, a link to a blog article such as the one
you’re reading now. Problems occur, though, when a website moves to another
domain or has its structure reorganized. Old permalinks pointing to
existing pages on the website become dead unless something is done about them.
That something is called a 301 redirect.
301 redirects are little
instructions stored on your server that redirect visitors to appropriate pages.
So, if someone arrives on your website using an old link, they won’t see a 404
error page (“Page not found”): the 301 redirect forwards them to the right
location, provided that you’ve set it up correctly. The number “301”
designates the type of redirect that it is: permanent.
There
are various ways to do 301 redirects. How they’re implemented depends partly on
the Web server you’re using. Here are the basics of handling 301 redirects on
the most popular Web server right now, Apache.
The following code should go in a
file called “.htaccess” in your main website folder. Yes, the file name
begins with a full stop. This means it’s a system file, which standard file
browsers tend to hide by default. So, if you can’t see it using your file
browser or FTP client, turn your “Display invisible files” option on. Just
create or (if it’s already there) edit this file using your editor of choice.
This file is retrieved whenever a visitor arrives on your website, and any
redirect rules you put in there will be applied.
Here’s a simple 301 redirect code:
RewriteEngine
on
Redirect
301 /oldpage.html /newpage.html
The code is fairly self-explanatory.
When somebody tries to access “yoursite.com/oldpage.html,” they will
immediately be redirected to “yoursite.com/newpage.html.” The “RewriteEngine
on” bit at the top ensures that the mod_rewrite engine is turned on (the
default is off). This is the engine that handles the redirects.
8.
Long registration forms
Registration forms are barriers. They
are barriers because it takes effort to fill them in, and the task itself is no
fun. People have to invest time and effort to register, and then they
have to invest even more time and effort in future to remember what user name
and password they used.
We can shrink this barrier by making
the sign-up form as short as possible. At the end of the day, the purpose of a
registration system is simply to be able to identify each user; so, the only
requirements are a unique identifier, such as a user name or email address, and
a password. If you don’t need more information, don’t ask for it. Keep the
form short.
Less Thinking
Usability is all about making things
easier to use. Less thinking, less frustration. A website should do all the
work and present visitors only with the things they’re looking for. Usability
is also about the experience people have using your website, so attention to
detail matters, as do the presentation and feel of the page.
For More Details:
