Web usability -04-.

Web usability -04-

Web usability What is usability anyway?

Web usability What is usability anyway?
Clear and concise information presentation

Clear and concise information presentation Easy navigation through a complex site architecture

Clear and concise information presentation Easy navigation through a complex site architecture Present no ambiguities about the consequences following a user’s action

Clear and concise information presentation Easy navigation through a complex site architecture Present no ambiguities about the consequences following a user’s action Show only relevant information

Clear and concise information presentation Easy navigation through a complex site architecture Present no ambiguities about the consequences following a user’s action Show only relevant information Give the users what they came for…

Clear and concise information presentation Easy navigation through a complex site architecture Present no ambiguities about the consequences following a user’s action Show only relevant information Give the users what they came for… To put it simple, make it enjoyable and satisfactory to visit your site

Web usability Why do you need to think about it?

Web usability Why do you need to think about it?
As web developers you have to care about the users…

As web developers you have to care about the users… Users visit your web sites - it is your responsibility to satisfy the reason they arrived

As web developers you have to care about the users… Users visit your web sites - it is your responsibility to satisfy the reason they arrived; Why? You are the advocates of your users’ needs, not your managers, sales departments, and so on…

As web developers you have to care about the users… Users visit your web sites - it is your responsibility to satisfy the reason they arrived; Why? You are the advocates of your users’ needs, not your managers, sales departments, and so on… Users are your biggest asset

As web developers you have to care about the users… Users visit your web sites - it is your responsibility to satisfy the reason they arrived; Why? You are the advocates of your users’ needs, not your managers, sales departments, and so on… Users are your biggest asset An unhappy user, usually will not return

Web usability So, what to do?

Web usability So, what to do?
Your websites need to be efficient for the users

Your websites need to be efficient for the users Users visit your web sites because They want/need information They want/need to make a purchase / donation They want/need to be entertained They want/need to be part of a community

Your websites need to be efficient for the users Users visit your web sites because They want/need information They want/need to make a purchase / donation They want/need to be entertained They want/need to be part of a community The users just want solutions to their problems

Your websites need to be efficient for the users Users visit your web sites because They want/need information They want/need to make a purchase / donation They want/need to be entertained They want/need to be part of a community The users just want solutions to their problems Fancy graphics don’t do the trick, on the contrary…

Your websites need to be efficient for the users Users visit your web sites because They want/need information They want/need to make a purchase / donation They want/need to be entertained They want/need to be part of a community The users just want solutions to their problems Fancy graphics don’t do the trick, on the contrary… The KISS principle was shown to be most effective in focusing user’s attention

Web usability Thinking about the user

Web usability Thinking about the user
Help the user reach her objective easily

Help the user reach her objective easily Clear presentation Easy on the eye Websites are predictable, don’t fight it… Humans are predictable, use it…

Help the user reach her objective easily Clear presentation Easy on the eye Websites are predictable, don’t fight it… Humans are predictable, use it… Easy interaction The navigation should not require a GPS People like fast websites better Straight to the point

Web usability Clear presentation What is your website about?

Web usability Clear presentation What is your website about?
A user should be able look at the home page of the website and figure out what the site is about within four seconds

A user should be able look at the home page of the website and figure out what the site is about within four seconds The website should tell the user how it is going to solve her problems, rather how wonderful it is

A user should be able look at the home page of the website and figure out what the site is about within four seconds The website should tell the user how it is going to solve her problems, rather how wonderful it is What does this website solve?

A user should be able look at the home page of the website and figure out what the site is about within four seconds The website should tell the user how it is going to solve her problems, rather how wonderful it is What does this website solve? You home page is just one page – don’t overload it with information, like these guys did

A long, misleading web page, confuses people and they leave; usually it is because you failed to organize your site properly

A long, misleading web page, confuses people and they leave; usually it is because you failed to organize your site properly Try to fit the important content into the first screen making it clear how to proceed

A long, misleading web page, confuses people and they leave; usually it is because you failed to organize your site properly Try to fit the important content into the first screen making it clear how to proceed Another example of overdoing it:

A long, misleading web page, confuses people and they leave; usually it is because you failed to organize your site properly Try to fit the important content into the first screen making it clear how to proceed Another example of overdoing it: Just keep it simple and organized

People have expectations about web sites and they don't like surprises

People have expectations about web sites and they don't like surprises Baby Duck Syndrome describes the tendency for users to stick to the first design they learn and judge other designs by their similarity to that first design.

People have expectations about web sites and they don't like surprises Baby Duck Syndrome describes the tendency for users to stick to the first design they learn and judge other designs by their similarity to that first design. A dentist website, should look like a dentist website

People have expectations about web sites and they don't like surprises Baby Duck Syndrome describes the tendency for users to stick to the first design they learn and judge other designs by their similarity to that first design. A dentist website, should look like a dentist website; moreover a dentist should look like a dentist!!!

A dentist should look like a dentist!!!

People have expectations about web sites and they don't like surprises Baby Duck Syndrome describes the tendency for users to stick to the first design they learn and judge other designs by their similarity to that first design. A dentist website, should look like a dentist website Look at other websites with the same goal as yours, then try to do something similar, but DON’T COPY

The credibility of the website is very important; will users trust your website?

The credibility of the website is very important; will users trust your website? It turns out that users “judge a book by its cover”…

The credibility of the website is very important; will users trust your website? It turns out that users “judge a book by its cover”… An impression that the website was designed by professionals is as important as its functionality

The credibility of the website is very important; will users trust your website? It turns out that users “judge a book by its cover”… An impression that the website was designed by professionals is as important as its functionality Compare these two, who do you trust more?

Web usability Clear presentation Easy to understand and follow
Don’t make it difficult for users to understand the information on your websites Divide the content into logical categories, which the user understands; NOT like this or this

Inverted pyramid The inverted pyramid is a writing style where the summary of the article is presented in the beginning of the article Web users want instant gratification; plan your websites accordingly to provide them with what they need

Inverted pyramid The inverted pyramid is a writing style where the summary of the article is presented in the beginning of the article Web users want instant gratification; plan your websites accordingly to provide them with what they need If a user wants to make a purchase, don’t stand in her way…

Inverted pyramid The inverted pyramid is a writing style where the summary of the article is presented in the beginning of the article Web users want instant gratification; plan your websites accordingly to provide them with what they need If a user wants to make a purchase, don’t stand in her way… Think of user’s goals and provide information how to reach them

Banner-Blindness Web users tend to ignore everything that looks like ads

Banner-Blindness Web users tend to ignore everything that looks like ads Interestingly, they’re pretty good at it; although ads are noticed, they are almost always ignored

Banner-Blindness Web users tend to ignore everything that looks like ads Interestingly, they’re pretty good at it; although ads are noticed, they are almost always ignored Users have developed methods for different web tasks; they focus only on the parts of the page where they would assume the relevant information could be, i.e. small text and hyperlinks

Banner-Blindness Web users tend to ignore everything that looks like ads Interestingly, they’re pretty good at it; although ads are noticed, they are almost always ignored Users have developed methods for different web tasks; they focus only on the parts of the page where they would assume the relevant information could be, i.e. small text and hyperlinks Anything else is perceived as ads, and therefore ignored

Banner-Blindness So, don’t make your content look like an ad, as it might be overlooked

Banner-Blindness So, don’t make your content look like an ad, as it might be overlooked Ads that look like content will get people looking and clicking – although it is good in terms of revenue, it has a devastating impact on your credibility

Banner-Blindness So, don’t make your content look like an ad, as it might be overlooked Ads that look like content will get people looking and clicking – although it is good in terms of revenue, it has a devastating impact on your credibility Also, don’t hide information/links between ads – users will definitely not appreciate it

Users focus on faces People instinctively notice other people right away when they come into view On web pages, users tend to focus on people’s faces and eyes

Users focus on faces People instinctively notice other people right away when they come into view On web pages, users tend to focus on people’s faces and eyes Moreover, we actually glance in the direction the person in the image is looking in

Users focus on faces People instinctively notice other people right away when they come into view On web pages, users tend to focus on people’s faces and eyes Moreover, we actually glance in the direction the person in the image is looking in Facial expression is also very important – use smiling people 

White spaces White space de-clutters a page by giving items room to breathe

White spaces White space de-clutters a page by giving items room to breathe Items which are physically close are perceived as a group by the user

White spaces White space de-clutters a page by giving items room to breathe Items which are physically close are perceived as a group by the user It is important to show relationships between items and to build a hierarchy of elements on the page

Satisficing Users don’t prefer optimal ways to find the information they’re looking for They permanently scan for quick solutions which are “good enough”

Satisficing Users don’t prefer optimal ways to find the information they’re looking for They permanently scan for quick solutions which are “good enough” Don’t torture them with complex and sophisticated navigation, they will find a shortcut anyway For example, don’t create a navigational menu which makes sense to you; make sense to the users

Some more tips

Some more tips Make your text easy to understand (don’t use terms or words which are not part of audience’s vocabulary)

Some more tips Make your text easy to understand (don’t use terms or words which are not part of audience’s vocabulary) Avoid errors – it hurts your credibility

Some more tips Make your text easy to understand (don’t use terms or words which are not part of audience’s vocabulary) Avoid errors – it hurts your credibility Cherish first-time/one-time users by using a Walk-Up-And-Use design

Some more tips Make your text easy to understand (don’t use terms or words which are not part of audience’s vocabulary) Avoid errors – it hurts your credibility Cherish first-time/one-time users by using a Walk-Up-And-Use design Be consistent in presenting the information (e.g. the position of logos, navigation, etc… ); physical consistency is essential for better orientation

Web usability Clear presentation Easy on the eye
Contrast, contrast, contrast Without proper contrast, users can't read the text and if they can't read it, they will leave the website

Contrast, contrast, contrast Without proper contrast, users can't read the text and if they can't read it, they will leave the website A very strange phenomenon – web designers produce low-contrast websites, typically switching to gray text color Why? It looks nicer… producing a better visual effect, however the content becomes less readable

Contrast, contrast, contrast Without proper contrast, users can't read the text and if they can't read it, they will leave the website A very strange phenomenon – web designers produce low-contrast websites, typically switching to gray text color Why? It looks nicer… producing a better visual effect, however the content becomes less readable What to do? You might try using a gray background!

Contrast, contrast, contrast Without proper contrast, users can't read the text and if they can't read it, they will leave the website A very strange phenomenon – web designers produce low-contrast websites, typically switching to gray text color Why? It looks nicer… producing a better visual effect, however the content becomes less readable What to do? You might try using a gray background! NEVER TRADE READABILITY FOR VISUAL APPEAL

Web usability Easy interaction Navigation

Web usability Easy interaction Navigation
A user should always be able to easily find an answer to the following questions: Where am I? Where have I been? Where can I go next? Where’s the Home Page?

A user should always be able to easily find an answer to the following questions: Where am I? Where have I been? Where can I go next? Where’s the Home Page? Navigation must be simple and consistent

Web usability Easy interaction Navigation Common mistakes
Different types of navigation on one website A link to the current page on the current page Poorly worded links, giving no information about where it takes a user No or confusing links to the Home Page

Mystery meat navigation (MMN) Describes a situation where it is very difficult for users to understand the destinations of navigational links - or, in severe cases, even to determine where the links are

Mystery meat navigation (MMN) Describes a situation where it is very difficult for users to understand the destinations of navigational links - or, in severe cases, even to determine where the links are The typical form of MMN is represented by menus composed of unrevealing icons that are replaced with explicative text only when the mouse cursor hovers over them Examples:

Web usability Easy interaction Navigation Links
Links need to stand out from the rest of the text Links need to have a good contrast with the background

Links need to stand out from the rest of the text Links need to have a good contrast with the background Blue seems to be the best color, as people recognize it much easier (it is also the browsers’ default) People like to recognize similar website behaviors

Links need to stand out from the rest of the text Links need to have a good contrast with the background Blue seems to be the best color, as people recognize it much easier (it is also the browsers’ default) People like to recognize similar website behaviors At all costs, avoid minesweeping; this is an operation where users rapidly move the mouse over the screen to find those hiding links…

Web usability Easy interaction Navigation The 3-clicks rule
Users stop using the site if they aren’t able to find the information or access the site feature within 3 mouse clicks

Web usability Easy interaction Navigation The 3-clicks rule
Users stop using the site if they aren’t able to find the information or access the site feature within 3 mouse clicks What is more important than the actual number of clicks, is if at all times, the user is aware of her current, previous and next locations Try to find your way here

Web usability Easy interaction Don’t frustrate the user

Web usability Easy interaction Don’t frustrate the user
Users hate waiting; Any action shouldn’t take more than a couple of seconds to finish

Users hate waiting; Any action shouldn’t take more than a couple of seconds to finish Try to keep the website small to load faster

Users hate waiting; Any action shouldn’t take more than a couple of seconds to finish Try to keep the website small to load faster Don’t force users to install software

Users hate waiting; Any action shouldn’t take more than a couple of seconds to finish Try to keep the website small to load faster Don’t force users to install software Try to avoid pop-ups

Users hate waiting; Any action shouldn’t take more than a couple of seconds to finish Try to keep the website small to load faster Don’t force users to install software Try to avoid pop-ups Identify links to non HTML content (e.g. pdf)

Don’t make the user register to access content

Don’t make the user register to access content If the user is required to register, don’t ask for activation

Don’t make the user register to access content If the user is required to register, don’t ask for activation If you ask for an activation, don’t make “I want to receive a newsletter” the default user’s choice

Don’t make the user register to access content If the user is required to register, don’t ask for activation If you ask for an activation, don’t make “I want to receive a newsletter” the default user’s choice In registration, don’t ask for many details – use defaults instead

Web usability What not to do… Examples
(everything) (everything) (contrast) (contrast) (navigation + readability) (navigation + content)

Clear and concise information presentation Easy navigation through a complex site architecture Present no ambiguities about the consequences following a user’s action Show only relevant information Give the users what they came for… To put it simple, make it enjoyable and satisfactory to visit your site

As web developers you have to care about the users… Users visit your web sites - it is your responsibility to satisfy the reason they arrived; Why? You are the advocates of your users’ needs, not your managers, sales departments, and so on… Users are your biggest asset An unhappy user, usually will not return

Help the user reach her objective easily Clear presentation Easy on the eye Websites are predictable, don’t fight it… Humans are predictable, use it… Easy interaction The navigation should not require a GPS People like fast websites better Straight to the point

Web usability -04-.

Similar presentations

Presentation on theme: "Web usability -04-."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Web usability -04-.

Similar presentations

Presentation on theme: "Web usability -04-."— Presentation transcript:

Similar presentations

About project

Feedback