FOLLOW US     
           
    + 34 951 16 49 00    
Spanish Italian English
ERASMUS+

Building community resilience through communication & technology

Web Usability
Download    Play Audio
The user and the web

Objectives and goals

At the end of this course you will be able to:

• Create your site accessible to all
• Recognize the mistakes of website designers and managers
• Understand the evolution of the web and the impact on the user browsing the internet
Web Usability

What are the prerequisites for usable websites?

The user is impatient, he remains about 27 seconds on a short web page convincing.

 

The success of a website: deep links

They are those links that allow the user to access more specific searches.

How are deep links supported?

 Let's make our site clear!

- Company name and logo at the top left of the web page

- Direct link to the homepage

- Search box, top right

How long do we have to convince a user to use our site
The use of the search engine

88% of users use a search engine rather than a specific site

The Search Engine is:

- A digital tool that is used to convey advertising
- A tool used for specific answers
 
RESPONSE ENGINE

 

 

                                                      

 

 

How does the user behave when surfing the internet?

User behavior is explained with the theory of information foraging:

The user is identified as an information provider.

And for the theory cited: the easier it is to find new information resources, the less time users will devote to each of them.

The arrival of the user from a search engine

In order for the user to be interested in browsing your site, you must try to:

 

The search results page: SERP

The SERP (Search Engine Results Page) is the search results page. Every time a user asks a search engine a question, he gets an ordered list as an answer that will be made up of two types of LINKS: organic and sponsored

Organic links: found on the web as the best response to the user Sponsored links: advertising.

To evaluate how to attract a user with their answers, a company that manages a site will evaluate how much it will be willing to pay for each keyword and will make an offer to the search engine.                                                          

Key word advertising

The design of a website

Site design approaches: standards, convention and confusion

The search for a 'typical' user

Through a search engine, the user, by typing 2/3 words, will only see to the first results of the SERP.

These sites that will be displayed if they do not appear important, will be abandoned by the user within 2 minutes.

Values of a site that meets standards
Information Foraging: sniffing out the content

The most famous concept of information foraging is that of information scent: information trace.

Users, are like hunting animals, evaluate the possibility of success by establishing whether the path they are following will lead them to reach the goal.

How to 'smell' the trace of information
Make a site interesting

Make sure that the site does not have good content but difficult to use or easy to use but of little interest.

It is now extremely easy for users to find quality sites, in fact if a site does not allow the achievement of the goal, the user will abandon it with the certainty of finding useful information elsewhere.

The internet connection

The use of the internet connection has significantly changed the user's approach.

Internet connections now make it possible to always be connected and encourage 'Information snacking'

Short online searches for FAST answers

 

Differences in the use of a site between an expert user and a novice

An experienced user spends less time visiting a site than a novice, for this:

The user can be selfish, lazy and ruthless when analyzing the costs and benefits of a site.

34 main usability issues and guidelines to address them

When testing sites, it is not always possible to highlight usability problems. For this reason, designers do not always deal with these difficulties encountered by users.

Designers often misjudge some problems, calling them small although for the user these are very concrete problems and a source of great frustration.

Usability problems have been divided into 3 macro levels:

  • LEVEL 1: minor problem that usually does not cause a site to fail
  • LEVEL 2: medium impact problem: it is necessary to address the problem but it may not be at the top of the site designer's priorities.
  • LEVEL 3: problem that has a major impact on the site's usability.

 Any critical review of the site must take this issue into account

 

Links that do not change color after being visited: LEVEL 3

In 74% of sites the link changes color, which is why the user expects this convention.

If this does not happen, the user does not understand where he is on the site and the other choices available.

However, there is an exception to links that do not change color: ACTIVE LINKS,    these they do not change color when the same action linked to the link can be repeated  several times.

'Back' button that does not work: LEVEL 3

The 'back' button is the second function used in browsing web site (the first is the links).

Advantages:

 

Fitts's law: pointing and clicking an object on a screen

Fitts' law says that the time it takes to reach a target (point on the screen) in a targeting task depends on:

- Distance of the object

- Dimensions of the object

 

Open new browser windows: LEVEL 3

By clicking a link or a button a user expects a new page take the place of the current one.
To cancel this action, the user expects to having to click 'back'.

Unsolicited windows pollute the SPACE - SCREEN. Furthermore, a user may not always find a button to close these windows.

REMEMBER: the user who wants more windows is an expert and therefore knows how to open them. 

 

Open new browser windows: LEVEL 3

HARMFUL EFFECTS:

 

Guidelines for opening non-web content

REMEMBER: one of the reasons for usability is to take into account the extreme variety of skills and abilities of users

 

POP UP windows: LEVEL 3

Users are always annoyed by popups and tend to install software to block them.

Legitimate uses of pop ups are also misinterpreted as they have one dubious reputation.

Pop ups are often used for porn or gambling sites.

Pop up: the most hated advertising technique.

 

Parts of the interface that look like advertisements: LEVEL 3

The user tends to defend himself from unwanted information on the web as he is often attacked by attempts to capture attention by distracting him from the goal.

The user is 'blind to banners': the need not to be distracted by information apparently irrelevant or advertising.

The graphic boxes can easily be exchanged for advertising outside the site.

EXPERT ADVICE: use simple text links on your site, these attract more than graphic elements because they are contextualized and give an impression of credibility.

 

Violation of web conventions: LEVEL 3

Users apply to a site the operating expectations they have developed by visiting other sites.

On average, you have 1 minute and 49 seconds to convince a user to use our site.

 

Faint content and free sensationalism: LEVEL 3

Many companies on their sites tend not to speak clearly and simply. This is a problem with users, almost all of them impatient, as they spend little time on each page.

How to make a site more visible by search engines?

SEO (Search Engine Optimization): clear and simple words, therefore more specific is a better text will be the position in the search engines.

 

Rich content and free sensationalism: LEVEL 3

In terms of information foraging: large blocks of text take the user away from the site, the user would have to struggle too much to achieve the goal.

What should web texts be like?

They should be: short, approachable, written to be scanned rather than read.

 

Technological evolution and the impact on usability

Although the web has radically changed since 1990, usability guidelines have remained stable.

Usability is a problem of human behavior and humans have not evolved for a decade.

Of the 34 usability problems mentioned, 7 have been reduced due to the evolution of: Browser, bandwidth and internet.

 

The 7 usability problems that have been significantly reduced:

 

Search on the site with little relevant results: LEVEL 2

Many sites in the past had really poor search capabilities and didn't prioritize their results.

Even today, few sites have a truly efficient and functional search capable of satisfying the user's needs in a short time.

 

Multimedia and video: LEVEL 3

Video and multimedia are acceptable today for 3 reasons:

The bandwidth has grown to allow for video uploads.
The quality of the videos has improved.
Web producers produce videos and do not use television productions as they did before.
 

Frozen layouts: LEVEL 2

The layout is locked when the information inside it has a fixed width independent of the window that occupies it.

USABILITY TESTS SAY: users hate horizontal scrolling.

The user expects vertical scrolling. If the page can scroll both horizontally and vertically, users have to move long two dimensions which is DIFFICULT.

 

Frozen layouts: LEVEL 2

Locked layouts generate difficulties but their criticality has dropped from level 3 to 2 as medium to large screens have spread among users.

The most appropriate suggestion for a web page is the 'liquid layout' which widens and shrinks adapting to the window that hosts it.

 

Incompatibility between platforms: LEVEL 2

How the user affects usability

Over time, the user has adapted to the online environment and has acquired greater ability to use websites.

The user is therefore adapting to problems that over the years have lost levels in the ranking of usability problems mentioned above.

 

Uncertain clickability: LEVEL 1

 

Scrolling: LEVEL 2

The user is resistant to the scrolling of web pages, often decides where to go without scrolling the content.

Even the most experienced user needs visual indications to know that the page continues outside of what is visible.

It is therefore necessary to ensure that the design of a site does not suggest end-pages where there are none.

 

Registration: LEVEL 1

When internet use became widespread, site registration was a barrier as people did not know whether to trust and provide their personal information to the sites. Many sites have now redesigned their purchasing processes so as to allow the user to complete a purchase without registration.

The user will have to provide information  such as a card number, but will consider it less invasive as it is part of a sale.

The sites that require premature registration (they are few) lose many customers.

 

Complex URL: LEVEL 2

URL what is it? It is a sequence of characters that uniquely identifies the address of a web page.

While they cause usability and search engine ranking issues, they remain a critical issue.

Most sites should have a URL between 20 and 50 characters.

The expert user is able to manually modify a complex URL, but this happens very rarely.

 

Drop-down menu and hierarchical menus: LEVEL 1

Self-control: How designers have reduced usability problems.

The experience of the designers has made it possible to reduce 13 usability problems.

However, it happens to run into some of these problems if the designers are novice.

In the next slides we will list these 13 problems that are improving over time.

 

Plug in (non-autonomous program that intervenes to expand the functions not present in the main software) and cutting-edge technologies: LEVEL 1

Sites that forced the use of plug-ins or to update software have lost many customers.

By now customers know how to close a window does not accept.

 

3D user interface: LEVEL 1

They are problematic to use since three-dimensional images are displayed on a two-dimensional surface, the screen, and controlled with a two-dimensional tool, the mouse.

Most web applications do not have an inherent need for three-dimensionality.

 

Baroque design: LEVEL 1

Fortunately, sites with baroque and hyperbolic design are less and less popular.

Welcome Pages: LEVEL 1

Small and medium-sized business sites often care too much about the welcome page  rather than the user's need. RESULT: the user receives a message that the site is more attentive to design than to solve his problems.

 

Do not disclose who is the source of the information: LEVEL 1

IT IS ESSENTIAL to be recognizable and to give trust and credibility. For a website to  be successful, users need to know who is behind it, how it is funded, and if it is credible.

It is necessary to have an 'About us' section, this allows the user to have all the information on the site and on the 'seller' of the product.

 

Invented words: LEVEL 1

When the internet developed, it was fashionable to put invented words on your site.

Invented words reduce usability as users have no idea what they mean.

The invented words also frustrate search engine rankings because the user will never search for a word he does not know.

 

Dated content: LEVEL 2

High-level problem for smaller sites.

The big sites now, professionally managed, try to keep all the important pages up-to-date.

 

Entirely inconsistent sites: LEVEL 2

Companies since 2000 have been trying to present themselves to the customer with consistent websites that are made up of linked web pages.

The only problem occurs when companies have portions of the site created by a different designers.

 

Premature requests for personal information: LEVEL 2

If a website becomes intrusive too soon, the user refuses to answer questions.

Before asking questions a site must build its credibility.

Some sites mistakenly believe that asking for personal information early is a good marketing ploy. In reality, this scares the user and causes him to leave the site.

 

Multiple Sites: LEVEL 2

There are often many microsites associated with advertising campaigns. Multiple pages yes but they must be associated with the same website.

Orphan pages: are those pages that have no links and whoever ends up in them cannot go anywhere.

 

On the web, usability does not play a dramatic role, but it can decide whether a            website will be successful or not.

 

According to website studies, usability problems have been classified according to.     levels of criticality:

 

- High

- Average

- Low

 

What does the criticality depend on?

Remember: a third of the difficulties that users encounter in visiting a site are attributable to two fundamental characteristics. 

RESEARCH AND AVAILABILITY.

 

What makes the user wrong?

There are critical issues that users are able to stem.

The problem of research and information architecture often leads to errors because if the user cannot find what he is looking for, the rest fades into the background.

Poor readability leads the user to leave the site and not notice information.

DIFFICULT OR MISSING information: causes 19% of errors.

 

Is it enough to deal with the most serious problems?

If the user is continually harassed by small problems on the same site, he will end up not have great confidence in the site; in fact, if small problems give an overall  negative impression, the user will leave the site and will never return to it.

It is important to have the information the user is looking for and to present it in Clear language for the site to be successful!

 

What is usability that matters?

 

 

Why does the search within a site have to be better than that on the generic web?

How to have a better search:

 

Using better search software is worth the money.
Design the search interface according to the guidelines.
Adapt the pages to make the titles catch at a glance.

The web usability guidelines explain how to design a good search function that  matches what the user expects.

 

The 'search' button.

The search interface should appear at the top right as that is where the user searches for it.

It should be on every page of the site as you cannot predict when the user gets lost and where this will happen.

Often the user uses the search in all categories to evaluate the breadth of the results: narrowing the search risks making the user lose interesting results.

 

Length of the QUERY and the search field

A longer search field is better for 2 reasons:

It encourages the user to do longer searches, which produces more precise and therefore more useful results.
When the user reads everything he writes, he makes fewer typos and errors.

We recommend a 27 character search box, large enough to accommodate 90% of queries without scrolling the text.

 

Contextual search:

Search limited to a given context. It is useful when users only want results from a certain area.

It can be dangerous because: Users may not understand that most results are filtered.

Furthermore, the user may think that what he is looking for is in a part of the site, he cannot find it in a contextual search although the site has a rich offer in this regard.

 

Best Bet: those pages that can be nominated as the best result for certain queries.

There is no way to tell an external search engine which pages of your site are most important for each query.

But for each website's engine and for the most important queries you can compile a list of sorted results called Best Bet.

This must:

Respond to brands or product names
Respond to catalog numbers or codes
Respond to category names
Respond to the names of key executives or personnel
 

Sorting a SERP:

A serp is usually sorted by relevance.

Give users the ability to sort responses by attribute (price, date, etc) it can be useful.

It is advisable to give the possibility to choose whether to order in ASCENDING OR DESCENDING way.

 

No results in SERP:

It is important to indicate to the user the absence of query results because it could.  lead the user to wait for the search to be completed, if there is no indication that it has already been completed.

 

Only one result in SERP:

If the query gives only one result, it is not recommended to bring the user to the page found.

Seeing a website page appear instead of a results page can be confusing for the user.

 

SEO: Search Engine Optimization

It is a set of methods that can improve a site's ranking in search engine.

Acceptable SEO methods concern 3 areas:

SEO on language

It is essential to express yourself in the words the user knows and uses.

This is because search engines tend to give more weight to the words that appear  in the headlines.

Users scan the result and often only read the title.

There is no point in attracting more users for the sole purpose of having them bounce off as the page is garbled or impractical.

The methods for discovering the language of the user of your site are your own logs (to discover the queries used by users) and tests.

IMPORTANT: Think of SEO in terms of key phrases, these tend to lead multiple users / customers.

 

SEO on architecture

It is important for:

- Ensure that the pages of a site are indexed.

- Ensure an adequate link structure to guide programs that surf the web by  collecting information for the engines (spiders) through the contents.

Make sure there is a precise sequence of links from the homepage to any page you want to see indexed in search engines.

 

Reputation SEO

Search engines pay great attention to the reputation of the sites.

They do this by counting the number of links pointing to a particular site.

Key concept: If many sites consider your site to be trusted, it means yours site is important.

LINK: decisive criterion for web reputation.

 

Navigation and information architectures:

A well-structured site gives users what they are looking for when they look for it.

The 4 features that are collectively called AVAILABILITY cause the greatest search problems.

Findability determines how easy it is to find something by browsing rather than using the search function.

 

4 functions that are collectively called AVAILABILITY:

REMEMBER THAT:

Navigation: a consistent navigation structure helps the user.

The navigation elements and their positions (bar, section names, the 'back' button) are steps that help the user to move from one section of the site to  another.

Navigation is the MEANS. THE PURPOSE is to allow the user to get to the search content

Any kind of dynamic navigation must first of all be easy to use.

Tests and research made it possible to understand that:

Users aged 6 to 12 are interested and like the 'treasure hunt' effect of the sites.

In adolescence and beyond, the user has no patience and wants results quickly.

 

LINKS, BUTTONS, LABELS: you need to be specific!

It is necessary to make sure that the user easily understands and knows how to use the navigation buttons.

Eliminate unnecessary words

Use keywords

Give specific information

 

Hierarchical menus (menus and submenus)

They should be used little and must not have more than 2 levels.

It is necessary to make sure that the dynamic menus remain on the screen long enough for the user to make his choice.

Menus that require too much precision and open and close with every mouse movement are difficult to manage.

 

Can I click it?

RULE: never create doubts for the user about the clickability of something.

It is advisable to follow the standards: BLUE AND UNDERLINED LINKS.

When the user is able to understand what a site allows him to do we can say that the usability of that interface is good.

DIRECT ACCESS TO THE HOMEPAGE: it is important to place direct links on the homepage to a small number of quick operations.

 

Typography and readability of a site

To form a positive first impression of a site and sustain it throughout the site, you need to choose the fonts and colors that work best on the web.

Even today, the legibility of the sites remains a problem. No matter how nice the site is, if you don't read the text it will be a site doomed to failure.

The right use of typography and the right color combinations are essential components of good visual design.

 

 

No fonts and no sizes are suitable for any audience or any situation.

A pleasant body (size) and a good contrast between text and background make a site readable and comfortable for all age groups.

When choosing the text size of your site, prefer a larger body (it will please all users) rather than lose access to the site itself.

 

BODY OF THE TEXT: THE 10 POINT RULE

The minimum text size value should never be less than 10 points

Target audience

Body text measurement

Undifferentiated audience

10 - 12

Elderly and people with vision                impairment

12 - 14

Children and other non-regular readers

12 - 14

Teen and young adults

10 - 12

 

Typography and readability of a site:

Choosing the content of your site carefully is important as dense texts keep users away.

Using fonts (times, Calibry, etc) that are more readable in large body is important since not all users use a new machine with a good quality screen.

Gradually all users will use larger schemes that allow for efficient use of the web and applications.

Until then, the use of small, low-resolution monitors must be envisaged.

 

Relative Specifications:

It is recommended that you specify a site's text size relatively

Rate

It is necessary to provide for the use of your site by users with visual impairments: provide for the ability to change the size of the text.

Choose a font (font)

Not all machines have the ability to read specific fonts.

Most browsers use the following pre-installed fonts:

-   Arial

- Arial black

- Comic sans MS

- Courier New

- Georgia- Impact

- Times New Roman

- Trebuchet MS

- Verdana

 

Which font to choose when in doubt?

If you are not sure which font to use with 'Verdana' you are not mistaken.

It is popular on all platforms, works well in a small body, and is pleasant on the screen.

 

The use of fonts and colors:

Rule 1: Limit the number of typographic styles on your site.

Rule 2: Changing the font can help the reader to distinguish information and grasp the most relevant information.

Rule 3: Do not use more than four colors and three different fonts in the main areas of a website, it would appear unstructured and low-level.

 

AGAINST ALL CAPS

Uppercase text is much slower to read by 10% than lowercase.

- Limit the use of capital letters to short titles

Lowercase words are easier to read, especially in cases where the text has little contrast with the background and is underlined.

 

Contrast between text and background

 

Color Blindness

8% of men and 0.5% of women in the world have color blindness,

Mainly to red and green, it means he can't tell them apart.

This is why we advise you to be careful on your site as the wrong color combination can be illegible.

How to make the colors stand out:

- Do not use colors with strong differences in intensity, better black and white

- Don't rely on color to distinguish information from each other, you need to vary  another attribute in the text.

 

Text images:

A site that relies on graphics raises various classes of problems.

 

IText images:

A site that relies on graphics raises various classes of problems.

The graphic text cannot be selected, the user likes to select the content and be able to paste it on their own document.

Speech synthesizers (vocal reproduction of what is written) have difficulty

with graphic text and for this they need support programs that the user often does not have.

 

Moving text:

The blinking or moving text distracts the user from what he wants to do.

Moving text is problematic for users who have to translate while reading. This happens because the user wants to decide their reading speed without having to be influenced by external factors.

For people with impaired vision and / or neurological problems, moving text does   not allow you to focus and maintain eye contact.

 

Write for the web

A visually pleasing site is good but the quality of the content is more important.

To attract and keep visitors on a site it is important to propose solid and clear content and to provide efficient and intuitive access to that content.

 

Writing for the Web: Poor writing destroys a site

Disorganized content can make simple tasks on the web difficult, such as choosing a product.

In fact, if a site makes it easy to find answers, the user trusts and comes back.

Good design helps the visitor to be satisfied but it is not enough.

 

As the user reads:

The user adapts any strategy to save time.

In fact, it gives a first glance to get an idea of the web page and if necessary goes into the details of the content.

If the site does not quickly reveal what it has in store for the user, the user gets tired and leaves him without the possibility of returning to this page.

 

Write for readers:

If you don't have an editor or an experienced web editor you should hire one.

This is necessary as content requires expertise.

The information must be filtered and processed to be made admissible by the your typical user.

It is necessary to write simple and concise content to demonstrate respect for the  user's time.

 

GUIDELINES FOR A QUALITY WEB TEXT:

 

When self-promotion is justified:

When showing results of particular value with the aim of appearing authoritative without exaggerating.

FORMATTING THE TEXT TO BE READABLE:

 

Highlight keywords:

Draw attention to specific parts of the page.

Instead, highlight long paragraphs: it conveys a sense of crowding and does not allow you to distinguish the important things.

WE RECOMMEND:

Use short titles and headers, these should convey the message with few words.

 

Title hierarchy:

Main titles must be written in a larger body than the body of the text.

Subtitles should be smaller than the titles but distinct from the rest of the page.

Titles must be left justified, the first letter of the first word must be capitalized.

 

The lists: bulleted or numbered

RULES:

REMEMBER: short paragraphs are more manageable, it is a good idea to stay  below 5 sentences.

 

Guidelines for formatting a list:

- Using lists for 4 or more items (unnecessary short lists)
- Anticipate the list with an introductory sentence
- Indent the list with respect to the body of the text
- Don't leave too much space between the period and the text of the entry
- Begin each entry without an article
- Use parallel phrasing (fluid, each voice begins with the same type of word and     completes the opening sentence),
- Don't make too many lists, they are ineffective.

 

How to present the products

To sell or promote online, you need to give people the information they need for an informed and informed purchase.

Predict the customer's questions and make sure the answers are easy to find.

It is important to be direct so that the user can easily find out the price of the product: The additional costs (taxes and shipping) must be explained on the first page of the cart if not before.

 

Win customer trust

Customers trust a site that can explain the product clearly.

INDEED:

- The product and its offer must be sufficiently explained

- Pictures must adequately show details

 

Win customer trust

A typical and serious mistake is when the user clicks on 'enlarge' and the site shows the same photo or enlarges it a little.

It is better to give a sequence of close-ups in order to allow a complete view of all the details of the product the user is looking for.

 

 

Divide the pages

Don't flood your customers with information, you don't need to show all the details in a single solution.

It is good to distribute the information over several layers.

The following slide lists the information you need to link to.

 

Create links for the following info:

Product details

Photos, illustrations and demos

FAQ

Comments from experts and users

Common problems and maintenance

Spare parts and accessories

Information about the manufacturer

Offers and discounts

 

Support Comparative Purchasing:

It is not enough to bring the user to your site, you have to keep him interested.

Fewer choices will result in a better shopping experience.

Make it possible to gradually narrow down the selection criteria and make side-by-side comparisons.

REFINE AND ORDER: if you have a site with many products, give the user the opportunity to select and view the most relevant results.

 

Quality content helps sales

 

The arrangement of the contents, remember that: The user judges a site based on   the first impression.

Frequent layout errors on web pages:

The layout does not highlight the importance of the info

Interactions without indications

Related sections not grouped

Chaotic or absent alignment

Things are not where expected

Too many elements on a single page

 

How to avoid layout errors:

THE 3 CLICK RULE: all information on a site should be accessible from the homepage with a maximum of 3 clicks.

Does the page have to scroll?

A user hardly ever scrolls a page.

When designing a page you can expect a minimum of scrolling but the most important contents must be shown first.

 

The 4 rules of scrolling:

• Respect the design rules, the user only looks for where he expects to find  something.

• If there is white space at the bottom of the screen, the user expects the end of the page.

• The ad-like is a sign of the end of the page

• Contents above the fold signal the presence of contents below the fold.

 

Lead the user step by step

When a search is divided into several phases, the user must be guided along a linear and predictable path without confusing him with too many choices.

SIMILAR TO SIMILAR: Collect related items to make sure they get noticed.

 

Forms paginated without logic

If the fields are arranged in a random and disorganized manner, it is difficult to associate each field with the label that identifies it.

It is therefore necessary: to align things in a suitable way with airy spacing, this allows the user to recognize the different groups of information and the relationships that bind them.

 

Satisfy user expectations: what the user expects depends on the conventions adopted in most sites.

Use empty space:

The empty space allows the user to divide the information into manageable units.

The void around the lists attracts key points and reduces visual fatigue.

 

Balance between technology and user needs

With the spread of fast connections, multimedia sites are becoming more and more popular.

Use of multimedia: carefully integrated, they can promote usability by making content not only more fun and engaging but also more accessible.

To create a successful website, you need to know what degrees of interactivity you need and what tools to use in each situation.