Styling Links

• When styling links, design for users to scan, not read (as that’s what most users do).
• Always make sure the link is obvious
• Links should also indicate where they will take the user
• These can be customised in the CSS via

a:link { }
Unvisited link.

a:visited { }
Visited links.

a:hover { }
What appears when users mouse cursor hovers over the link

a:focus { }
The user clicks on a link.

a:active { }
The user has clicked a link.

Ensure Contrast

• Links should stand out not only from the background but from the surrounding text.
• If the font colour is blue and the link colour is blue there is a problem
• Make your links stand out by using one or more than one of the following techniques.

text-decoration: underline;
Underline.

font-weight: bold;
Bold.

font-size: 1.4em;
Enlarge.

color: #ed490a;
Color.

background-color: #c0c0c0;
Background.

border-bottom: 2px solid #a959c3;
Border.

If you decide to make links red, make sure no other text such as headlines and subheadings is the same colour because users will expect it to be a link too.

A point to add is not to underline text that is not a link. In standard web design, links are underlined so don’t confused readers.

Also keep in mind that users with poor eye sight such as those who are color blind may not be able to distinguish clearly a red heading from a green link – you can address this issue by under, bold or italic links as an alternative to colour.

Don’t Forget About Visited Links

a:visited { }

For better web design usability, it is helpful to users to know which pages they have been before to avoid wasting time. Just like differentiating links to paragraph text, visited links ideally should be differentiated to un-visted links. You can do this by giving links a darker or lighter tone of colour – so that they stand out but aren’t as obvious as unvisited links. Google would be a good example.

Title Attributes

<a href=”example.com” title=”This is an example link”>Example</a>

The title attribute is a convenient way to add descriptions to your links and can be especially useful for those who rely on screen readers.

Use Button Styles

Making a link a button grabs more attention and is an excellent call to action technique. Buttons are useful as they can be used many times without restyling multiple times.

Hover State

a:hover { }

It is a nice feature to let users know they are hovering over a link via a change of font colour, background or style (such as removing the underline).

Normally a mouse cursor will transform into a hand cursor when the user hovers over the link – however this can be lost. Add the cursor via CSS: a:hover span { cursor: pointer }

Active State

a:active { padding-top: 2px; }

An active state link is when a user clicks on a link the user knows they have done so. E.g. making the link move 2 pixels downloads to imitate the look that the link has been pressed like a button.

Apply Padding

a { padding: 5px; }

Adding padding to link is good usability. More padding means the link is larger and easier to click. The user can hover in close proximity and still be able to be directed to a new page. This technique works best of the navigation of a website.

Using Icons for Quick Communication

If your link leads to a download of a PDF document for example, placing an icon of the PDF logo will inform a user better. This prepares the user for the type of file type they are downloading and icons are a quick representation of the file type as well.

This can also be applied to navigation links. E.g. a link pointing to the homepage may have an icon of a house or of the company logo or a link pointing to a twitter page may include the twitter bird icon.

Make Anchor Text Descriptive

Links with descriptive text are not only user friendly but will also will improve the SEO of a website. E.g. a text link such as “Click Here” is not as effective as “Get a Free Consultation” Having a simple “Click Here” forces users to find out what “Click Here” is actually about.

Link Your Logo

Always link your logo to the home page – this is the web norm and it is found that most users will click on a company’s logo to return to the homepage.

Don’t Open Links in New Windows

All users like control over what they search and how they search. Imagine if you had many tasks in your toolbar and a website forces you to add one more causing you to jam in more tasks in your already crammed taskbar – annoying right? Most users will expect a link to open in the same window – if the link must be opened in a new window; make sure you let the user know.

 
A – Attention (Awareness): attract the attention of the customer.
I – Interest: raise customer interest by demonstrating features, advantages, and benefits.
D – Desire: convince customers that they want and desire the product or service and that it will satisfy their needs.
A – Action: lead customers towards taking action and/or purchasing.

Nowadays some have added another letter to form AIDA(S): S – Satisfaction – satisfy the customer so they become a repeat customer and give referrals to a product.
 

BOSCH-Formula

• Be inquisitive, ask open questions
• Offer solutions, talk about the end result benefits for the customer
• Stimulate the senses, let the customer test your product
• Cross your sales, think of all the necessary accessories
• Hit the closing point; sell when the customer is ready to buy
• Experiment with few colours
• Dark body copy on white background and light body copy on black background are passive
• Vibrant colours can help to highlight some specific elements of the site which you’d like to point users’ attention to
• Sometimes it’s useful to pick a moderate number of colours and use them efficiently

Strive for Balance

• Provides users with some sense of closure
• Gives the feeling of permanence and stability.
• Balanced designs are easier to digest and to understand; because they create a visual hierarchy which clearly displays what is more important on the web-site and what is less important.

Strive for Clarity

• Clarity of both layout and presented information should be given one of the highest priorities in the design process.
• If there is any chance of misunderstandings and ambiguous titles make sure to get rid of them or specify explicitly what is meant
• Being more specific is usually better than being less specific
• The more organized your categories are, the easier it will be for your visitors to find their path through your site
• Address your users’ needs
• The primary task to comfort your visitors by addressing their needs
• Providing them with sufficient clues for seamless and intuitive navigation
• To maximize your exposure you have to consider various types and profiles of your visitors
• Identify major groups and offer each group the functionality its members would be comfortable with
• Integrate multiple levels of user interaction in one single design layout
• Important to enable frequent users to use shortcuts — to increase the pace of interaction use abbreviations, special keys, hidden commands etc.
  Bookmarks and toolbars

The most important message that must be communicated by every website is its purpose.

As visitors arrive at the website, they should be able to quickly and accurately understand why the website exists and what is offered, and from this they should be able to determine if it is something that interests them.

Homepage should communicate the purpose

What is offered?

• Visitors should quickly learn what the company or website offers them.
• E-commerce websites need to clearly communicate to visitors the types of products that can be purchased.
• Service companies should clearly communicate the services that are available to visitors.
• Websites that are content-rich, such as blogs, should communicate to new visitors what type of content is available to visitors and subscribers.

How Can Visitors Benefit?

• How these products and services can specifically benefit them and why they would be better off with them.

What Action Can Visitors Take?

• Call to action
• Do something

Tips for Effective Communication:

Now that we’ve looked at how websites communicate with visitors, some typical challenges and what should be communicated, here are some tips that can be put into practice to help with the process of developing websites that communicate effectively.

Prioritize

• Knowing exactly what should be communicated to visitors.
• State the main point, purpose or message of your website, it’s unlikely that visitors will be able to understand that message accurately.

Determine What Visitors Should Know About the Company or Website

• Every company and website has something that it specifically wants visitors to learn about it. It’s critical that this is identified, otherwise it will be impossible to communicate it effectively to visitors. Ideally, the website would be used as a tool to brand the company, so the messages that are being communicated should fit the overall branding efforts and strengthen those efforts.

Keep it Simple

• Communicating effectively is much easier when the messages are short and simple.
• Focus on the most important aspects.

Keep it Relevant to Your Target Audience

• Consider your target market and audience when developing the website.
• Who is the most critical audience for your company and website?
• The website should be designed and developed so that it can communicate specifically with these visitors.
• Additional efforts can be taken to communicate with other audiences as well, but

Make the Message Impossible to Miss

• The most effective way to ensure that visitors receive the most important messages of a website is by making it very obvious
• Large text, colour text or some other design technique to make the message stand out are common.
• Other techniques include automatically loading audio, video and pop-ups, each of which brings its own usability issues and concerns.
• Visual cues e.g. highlighted text

Use Headers and Sub-Headers

• On pages that consist of a significant amount of text, breaking it up and identifying the main points with headers and sub-headers can be very effective.
• Headers not only help to make the text more readable by creating white space and using bold font to add variety to the page
• Also communicate a structure of the content to visitors and can summarize the primary messages of the content.

Goals for Communication When Developing a Website

• As you’re designing and developing websites, here are some goals to keep in mind that should help you stay focused on creating ones that communicate effectively.
• Clarity: clear message
• Communication that Truly Helps the Business and Visitors
• Consistency of Message
• Design that Enhances the Message: appearance should compliment
• Communication that Relates to the Target Audience e.g. search box words = ‘what music do u like?
• Use of Website Structure to Build on Communication

Results of Good Communication

• Visitors understand the Purpose of a Website
• Improved Branding
• Reduced Bounce Rates
• Less Frustration for Visitors
• More Sales, Leads, Subscribers, etc.
• Less Unnecessary Inquiries

Restrain the amount of content on a page

• Don’t overcrowd
• Make sure there is no excess information
• Keep it to the point
• Too much content on one page can confuse visitors

Each visitor is unique and will have different needs.

• Design website on a target market, not as a whole.
• Demographics, age, sex, hobbies.

Clarity

• Communicate information in a short amount of time
• The shorter the time to understand something, the longer a visitor will stay.
• Have a clear purpose and priority of the website that is understandable to the visitor
• There must not be too much noise or clutter.
• The message must be communicated in a way that it can be understood by the visitor.
• Using boxes on top of page is simple, quick and obvious
• Make web site content short and concise

 
 Web Design with Personality!

• In online communication, the human visitor receives a message from a website, not directly from a person.
• It is more effective when the website shows some form of personality
• E.g. Representing there is a person or company behind everything can be through a statement

Tiny Clickable Areas

• Hyperlinks are designed to be clicked so therefore should be easy to click, making them small means the user will not click them as they are hard to pinpoint

 Incorrect use of Pagination

• Should only be used for gallery images where loading time is a concern
• Bad for SEO – when content is split into several pages, each page makes less sense on its own as it will hold less keywords

 Duplicate Page titles

• <title> title of page </tile)
• A good title page communicates a lot of information to your viewers
• People can figure if they are in the right place or not
• Each title should describe the category and article of the page

Content that is difficult to scan

• Webpage needs a good copy (all the text content on the site)
• Have focus points: point out information with bolder or brighter colours, larger text or graphics if you need something to stand
  out for more visual pull
• Information should be informative and concise
• All text should be short and easy to digest: cut it down as much as possible
• Create hierarchy of information

 No way to get in touch

• Need a contact form which appears right away after u click ‘contact us’
• Contact form should be brief and quick as possible to fill out
• Putting an email address with plug-in Enkoder allows robots to not be able to read the email address.
• Creating comments boxes also allows for more interaction (like asking questions on a forum)

 No way to search

Certain sites need a search for users to find products quickly: especially online shopping sites

e.g

 Too much functionality that requires registration

• Registration may decrease spam, but will also decrease number of comments
• Registration should be quick and simple to do
• Websites which send users to pages after clicking “post” after writing a comment is bad for user experience as it can frustrate  the user

Long registration forms

• Make registration for short as possible as it will save more time
• Only ask for necessary information
• Optional fields like  don’t need to be there – they can be entered later on in the process in a profile.
• If long forms are unavoidable, consider breaking up the form to multiple pages

Text

• Conveys the basic message of a website

Images

• Communicates messages faster, more clearly and more strongly than text
• Images must work in harmony with the website

Title and Headers

• Allows people to know something quickly
• Can be a summary for the whole website

Icons

• Communicate messages without any text being used

Design Styles

• Themes of websites help communicate information quickly
• Will appeal more to the target market.
• Good design styles will leave a good impression

Colours

• Psychology of colour is important
• Determines how a web page looks but also communicates information
• Research on the effects of colours and what reaction you may want. e.g. The combination of red and yellow is said to stimulate hunger – as can be seen used so prominently with McDonald advertisments

Video and Audio

• Interactive way to communicate to an audience
• Does not use a lot of room

Credits to SmashingMagazine.com