Post by Brett Ludwick on Jan 25, 2015 13:20:35 GMT -8
5 Things That Enhance Web Usability
PART I
1. Design pages for scanning, not reading
The reader is far more likely to be scanning a page looking for what they want versus reading every line you have carefully chosen to include. Use bullet points whenever possible instead of paragraphs along with visual hierarchies very much like an outline to support scanning. Use common conventions such as expected placement of navigation bars, headers, footers, etc., and universal signs and symbols that make it obvious to the reader what it is for. Also, put things that logically go together into clear visual groupings. You can use color, style, borders, line divisions, and/or columns along with nested components that belong to a larger group. Lastly, make it obvious what is clickable and keep distracting colors, text, animations, to a minimum.
2. Omit needless words or anything that has no useful value
Paring down the number of words on a page has several benefits. It reduces the noise level of the page, it makes the words that are left stand out more, and it helps with the ability to scan more of the page at once by eliminating the need to scroll down the page. The first step in making it shorter is to eliminate “happy talk” or introductions that self-congratulate, or promote oneself or the site, and really has no content value for the reader. Eliminating instructions on how to do things on the page is also wise. Instead, design the page so clear and obvious that the reader doesn’t need instructions.
3. Designing clear and simple navigation
Navigation is very important in that it reveals to the visitor what the site contains. When set up correctly, it should easily tell us where to begin, what your your options are, and how to use the site. It also can leave a lasting impression as to the quality of the site. Follow expected website navigation conventions, such as emphasized navigation text letting the visitor know what page they are on, and a larger heading title near the top of the page. Also, keep a consistent look and location of navigation on each page unless it’s a “form” page. This includes the site ID image/text/logo, or header, and a way to always get back to where they started. Four or five top-level primary navigation links is the most you want (including “HOME”) in order to prevent countless others from getting lost in the mix. Lastly, pay attention to page names; every page should have one, be in the right place (framing the content), prominent, and match what the visitor clicks.
4. Usability challenges for mobile devices
The basic principles when designing for usability on a mobile device are pretty much the same as a computer screen. However, there are some challenging new usability problems; one being the changes that are bound to take place with mobile devices and trying to keep up with them. There will likely be tradeoffs such as download time versus content. Screen sizes are smaller, especially on a smart phone, so real estate is at a premium – some things are going to have to be left out that you wouldn’t necessarily leave out for a computer experience. Once selected the remaining items need to have obvious paths to follow to get to the more detailed information.
5. Establishing goodwill with visitors
To help earn a customer’s trust, don’t hide information from them that they will likely want such as phone numbers and prices. Use auto fill-in forms and auto correct whenever possible so the visitor feels “successful”, and don’t forget about making the site accessible for those with disabilities. Don’t include faux sincerity or large numbers of marketing photos, etc. that irritate and discourage. Do make your site look professional: clean, clear, concise, with print-friendly pages where applicable. Be up front and let people know what they likely want to know and provide answers to questions they are likely to ask. Save the customer time and effort by automatizing features and actions they are likely to be looking for or acting on.
PART II
I chose the following website to compare against good web usability practices: www.taylorguitars.com/
1. Design pages for scanning, not reading: Hardly any text at all – even at the second level pages which makes for easy scanning. The Home page is laid out a bit different, with a large photo dominating the top ¾ of the page, and the only navigation down at the bottom. It forces you to scroll down quite a ways to see everything offered on the Home page. Once you scroll down, the navigation becomes fixed at the top – much more conventional. Related items are clearly, visually grouped using a combination of subtle borders. Other than text links, simple buttons with text and a triangular arrow make it very clear that they are clickable items.
2. Omit needless words or anything that has no useful value: With so few words, it is quite easy to find what you are looking for using the remaining text, which is large and bold in many cases. This site left out all self-promotion, explanatory talk and wisely put it under an “About Us” link in the footer if you truly were interested in learning about the company.
3. Designing clear and simple navigation: Main navigation is quite clear with text that stands out with high contrast. Tabs are nicely designed with large clear sub categories. The look and feel of each page is very similar, including the navigation. However, some pages have a title, and some don’t which can make you wonder where you are at times. Additional, less important navigation is added in the footer. The site ID image takes you back to Home and is centered in the Header, but there are 7 main navigation links instead of the recommended 4-5. If it were to get up to 10 or more, it would probably bother me, but 7 doesn’t seem like too much.
4. Usability challenges for mobile devices: Tested on a smart phone, the website was virtually identical, save for the fact it didn’t quite fit on my iphone screen which forced me to scroll slightly left and right. Other than that, nothing was left out. Even though the site is image rich, the images loaded surprisingly fast, so my guess is they were custom optimized for the various mobile devices.
5. Establishing goodwill with visitors: This site doesn’t appear to hide a thing and seems to put “support” at the top of their priorities with a prominent link not only at the top, but also in the footer. The toll free number is clearly displayed at the top of the footer without the need to click on anything to find it. Prices are not listed because they do not sell directly, but instead have a “find a dealer” button on each product page. To try out filling out a form, I clicked on “create an account”, but the page would not load with the error message, “Page cannot be displayed”. I don’t know if the problem is on my end or theirs. The site is very clear and concise, but does have a few overly large images which distract a little from the content. I was especially impressed with their support page, that gave helpful advice on what to do for quite a few problems related to the guitar.
Overall, I had a good experience with the site, except for the frustrating part of not being able to create an account. I think it offers the visitor a great experience whether they are in the market for a new Taylor guitar or are already an owner of one. They really seem to anticipate what the visitor might be looking for.
PART I
1. Design pages for scanning, not reading
The reader is far more likely to be scanning a page looking for what they want versus reading every line you have carefully chosen to include. Use bullet points whenever possible instead of paragraphs along with visual hierarchies very much like an outline to support scanning. Use common conventions such as expected placement of navigation bars, headers, footers, etc., and universal signs and symbols that make it obvious to the reader what it is for. Also, put things that logically go together into clear visual groupings. You can use color, style, borders, line divisions, and/or columns along with nested components that belong to a larger group. Lastly, make it obvious what is clickable and keep distracting colors, text, animations, to a minimum.
2. Omit needless words or anything that has no useful value
Paring down the number of words on a page has several benefits. It reduces the noise level of the page, it makes the words that are left stand out more, and it helps with the ability to scan more of the page at once by eliminating the need to scroll down the page. The first step in making it shorter is to eliminate “happy talk” or introductions that self-congratulate, or promote oneself or the site, and really has no content value for the reader. Eliminating instructions on how to do things on the page is also wise. Instead, design the page so clear and obvious that the reader doesn’t need instructions.
3. Designing clear and simple navigation
Navigation is very important in that it reveals to the visitor what the site contains. When set up correctly, it should easily tell us where to begin, what your your options are, and how to use the site. It also can leave a lasting impression as to the quality of the site. Follow expected website navigation conventions, such as emphasized navigation text letting the visitor know what page they are on, and a larger heading title near the top of the page. Also, keep a consistent look and location of navigation on each page unless it’s a “form” page. This includes the site ID image/text/logo, or header, and a way to always get back to where they started. Four or five top-level primary navigation links is the most you want (including “HOME”) in order to prevent countless others from getting lost in the mix. Lastly, pay attention to page names; every page should have one, be in the right place (framing the content), prominent, and match what the visitor clicks.
4. Usability challenges for mobile devices
The basic principles when designing for usability on a mobile device are pretty much the same as a computer screen. However, there are some challenging new usability problems; one being the changes that are bound to take place with mobile devices and trying to keep up with them. There will likely be tradeoffs such as download time versus content. Screen sizes are smaller, especially on a smart phone, so real estate is at a premium – some things are going to have to be left out that you wouldn’t necessarily leave out for a computer experience. Once selected the remaining items need to have obvious paths to follow to get to the more detailed information.
5. Establishing goodwill with visitors
To help earn a customer’s trust, don’t hide information from them that they will likely want such as phone numbers and prices. Use auto fill-in forms and auto correct whenever possible so the visitor feels “successful”, and don’t forget about making the site accessible for those with disabilities. Don’t include faux sincerity or large numbers of marketing photos, etc. that irritate and discourage. Do make your site look professional: clean, clear, concise, with print-friendly pages where applicable. Be up front and let people know what they likely want to know and provide answers to questions they are likely to ask. Save the customer time and effort by automatizing features and actions they are likely to be looking for or acting on.
PART II
I chose the following website to compare against good web usability practices: www.taylorguitars.com/
1. Design pages for scanning, not reading: Hardly any text at all – even at the second level pages which makes for easy scanning. The Home page is laid out a bit different, with a large photo dominating the top ¾ of the page, and the only navigation down at the bottom. It forces you to scroll down quite a ways to see everything offered on the Home page. Once you scroll down, the navigation becomes fixed at the top – much more conventional. Related items are clearly, visually grouped using a combination of subtle borders. Other than text links, simple buttons with text and a triangular arrow make it very clear that they are clickable items.
2. Omit needless words or anything that has no useful value: With so few words, it is quite easy to find what you are looking for using the remaining text, which is large and bold in many cases. This site left out all self-promotion, explanatory talk and wisely put it under an “About Us” link in the footer if you truly were interested in learning about the company.
3. Designing clear and simple navigation: Main navigation is quite clear with text that stands out with high contrast. Tabs are nicely designed with large clear sub categories. The look and feel of each page is very similar, including the navigation. However, some pages have a title, and some don’t which can make you wonder where you are at times. Additional, less important navigation is added in the footer. The site ID image takes you back to Home and is centered in the Header, but there are 7 main navigation links instead of the recommended 4-5. If it were to get up to 10 or more, it would probably bother me, but 7 doesn’t seem like too much.
4. Usability challenges for mobile devices: Tested on a smart phone, the website was virtually identical, save for the fact it didn’t quite fit on my iphone screen which forced me to scroll slightly left and right. Other than that, nothing was left out. Even though the site is image rich, the images loaded surprisingly fast, so my guess is they were custom optimized for the various mobile devices.
5. Establishing goodwill with visitors: This site doesn’t appear to hide a thing and seems to put “support” at the top of their priorities with a prominent link not only at the top, but also in the footer. The toll free number is clearly displayed at the top of the footer without the need to click on anything to find it. Prices are not listed because they do not sell directly, but instead have a “find a dealer” button on each product page. To try out filling out a form, I clicked on “create an account”, but the page would not load with the error message, “Page cannot be displayed”. I don’t know if the problem is on my end or theirs. The site is very clear and concise, but does have a few overly large images which distract a little from the content. I was especially impressed with their support page, that gave helpful advice on what to do for quite a few problems related to the guitar.
Overall, I had a good experience with the site, except for the frustrating part of not being able to create an account. I think it offers the visitor a great experience whether they are in the market for a new Taylor guitar or are already an owner of one. They really seem to anticipate what the visitor might be looking for.
