Web usability -04-

Web usability What is usability anyway?

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

Web usability What is usability anyway? Clear and concise information presentation Easy navigation through a complex site architecture

Web usability What is usability anyway? Clear and concise information presentation Easy navigation through a complex site architecture Present no ambiguities about the consequences following a user’s action

Web usability What is usability anyway? 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

Web usability What is usability anyway? 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…

Web usability What is usability anyway? 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…

Web usability Why do you need to think about it? 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

Web usability Why do you need to think about it? 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…

Web usability Why do you need to think about it? 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

Web usability Why do you need to think about it? 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

Web usability So, what to do? 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

Web usability So, what to do? 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

Web usability So, what to do? 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…

Web usability So, what to do? 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

Web usability Thinking about the user 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…

Web usability Thinking about the user 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

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 The website should tell the user how it is going to solve her problems, rather how wonderful it is

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 The website should tell the user how it is going to solve her problems, rather how wonderful it is What does this website solve? http://www.genicap.com/

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 The website should tell the user how it is going to solve her problems, rather how wonderful it is What does this website solve? http://www.genicap.com/ You home page is just one page – don’t overload it with information, like these guys did http://www.arngren.net/ http://www.lingscars.com/

Web usability Clear presentation What is your website about? A long, misleading web page, confuses people and they leave; usually it is because you failed to organize your site properly

Web usability Clear presentation What is your website about? 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

Web usability Clear presentation What is your website about? 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: http://www.mrbottles.com/

Web usability Clear presentation What is your website about? 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: http://www.mrbottles.com/ Just keep it simple and organized

Web usability Clear presentation What is your website about? People have expectations about web sites and they don't like surprises

Web usability Clear presentation What is your website about? 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.

Web usability Clear presentation What is your website about? 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

Web usability Clear presentation What is your website about? 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!!!

Web usability Clear presentation What is your website about? A dentist should look like a dentist!!!

Web usability Clear presentation What is your website about? 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

Web usability Clear presentation What is your website about? The credibility of the website is very important; will users trust your website?

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

Web usability Clear presentation What is your website about? 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

Web usability Clear presentation What is your website about? 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? http://feedafever.com/ http://www.ski-utah-rentals.com/

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 http://www.manidoo.com/ or this http://www.wmgh.com/

Web usability Clear presentation Easy to understand and follow 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

Web usability Clear presentation Easy to understand and follow 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…

Web usability Clear presentation Easy to understand and follow 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

Web usability Clear presentation Easy to understand and follow Banner-Blindness Web users tend to ignore everything that looks like ads

Web usability Clear presentation Easy to understand and follow 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

Web usability Clear presentation Easy to understand and follow 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

Web usability Clear presentation Easy to understand and follow 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

Web usability Clear presentation Easy to understand and follow Banner-Blindness So, don’t make your content look like an ad, as it might be overlooked

Web usability Clear presentation Easy to understand and follow 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

Web usability Clear presentation Easy to understand and follow 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

Web usability Clear presentation Easy to understand and follow 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

Web usability Clear presentation Easy to understand and follow 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

Web usability Clear presentation Easy to understand and follow 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 

Web usability Clear presentation Easy to understand and follow White spaces White space de-clutters a page by giving items room to breathe

Web usability Clear presentation Easy to understand and follow 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

Web usability Clear presentation Easy to understand and follow 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

Web usability Clear presentation Easy to understand and follow 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”

Web usability Clear presentation Easy to understand and follow 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

Web usability Clear presentation Easy to understand and follow Some more tips

Web usability Clear presentation Easy to understand and follow Some more tips Make your text easy to understand (don’t use terms or words which are not part of audience’s vocabulary)

Web usability Clear presentation Easy to understand and follow 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

Web usability Clear presentation Easy to understand and follow 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

Web usability Clear presentation Easy to understand and follow 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

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 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

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 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!

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 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?

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? 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

Web usability Easy interaction Navigation 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

Web usability Easy interaction Navigation 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: http://www.youtube.com/watch?v=wguO93zZd-U http://www.youtube.com/watch?v=w_TgBJEHTuQ

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

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 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

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 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 http://www.leoburnett.ca/

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

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 Try to keep the website small to load faster

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 Try to keep the website small to load faster Don’t force users to install software

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 Try to keep the website small to load faster Don’t force users to install software Try to avoid pop-ups

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 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)

Web usability Easy interaction Don’t frustrate the user Don’t make the user register to access content

Web usability Easy interaction Don’t frustrate the user Don’t make the user register to access content If the user is required to register, don’t ask for e-mail activation

Web usability Easy interaction Don’t frustrate the user Don’t make the user register to access content If the user is required to register, don’t ask for e-mail activation If you ask for an e-mail activation, don’t make “I want to receive a newsletter” the default user’s choice

Web usability Easy interaction Don’t frustrate the user Don’t make the user register to access content If the user is required to register, don’t ask for e-mail activation If you ask for an e-mail 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 http://www.goldenmean.info/ (everything) http://www.gatesnfences.com/ (everything) http://www.vivus.com/pipeline/avanafil (contrast) http://www.xerox.com/index/enca.html (contrast) http://www.cafeintl.net/ (navigation + readability) http://lesailes.hermes.com/us/en/ (navigation + content)

Web usability What is usability anyway? 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? 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 Thinking about the user 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