Website usability, step by step

[itpetex]

Hello,

maybe anybody could make a some type of list for website usablity? Main things for first?

[htmlbasictutor]

You could start by investing in the book "Don't Make Me Think!" by Steve Krug. It's a short book, not too technical and not too expensive. Author's site: http://www.sensible.com/

[Costin Trifan]

It's funny to see that for a usability consultant his navigation consists of pure images, don't you think?

[htmlbasictutor]

Originally Posted by Costin Trifan

It's funny to see that for a usability consultant his navigation consists of pure images, don't you think?

Ahhh, but look at the bottom of the page, text links for search engines and accessibility.

[itpetex]

Thank You

[Costin Trifan]

Originally Posted by htmlbasictutor

Ahhh, but look at the bottom of the page, text links for search engines and accessibility.

yeah, but those are at the bottom of the page, which forces a user to scroll down to find them

PS. and the title text for those links is missing too...

[jlbraaten]

Hey gang, I just posted a new blog entry on usability. I reference such experts as Steve Krug, Jakob Nielsen, and UserEffect. Be sure to check it out when
choosing content for your website.

Cheers!

@jlbraaten

[kieransimkin]

Originally Posted by Costin Trifan

It's funny to see that for a usability consultant his navigation consists of pure images, don't you think?

Something wrong with that? Surely as long as images have alt tags that doesn't hinder usability too much - he does have text links at the bottom of the page.

Disclaimer; I run a site on which all the content is in images. Have a look and see if you think that makes it less usable.

[htmlbasictutor]

Originally Posted by kieransimkin

Something wrong with that? Surely as long as images have alt tags that doesn't hinder usability too much - he does have text links at the bottom of the page. ...

"It’s alt attribute, not alt tag
Ok people, time to get some basic terminology right. I’ve posted about this before, but here goes again: There is no such thing as an alt tag in HTML! It is an attribute which is required for images, and is specified in the img tag that defines an img element."

Reference: It’s alt attribute, not alt tag at 456 Berea Street

Usability, accessibility and SEO are all related and all work together.

Having an image based site may appear usable to the naked eye, but it creates accessibility and SEO isssues.

Relying on images using the alt attribute isn't going to add to the usability, accessibility nor the SEO of the site. There are many other factors that go into making a web page user friendly, accessible and search engine friendly.

If you study of each of these issues, you will find one thing for usability will also help accessibility and search engine optimization. And likewise if you start with one of the other areas, you will find the techniques learned also help the other 2 areas.

[kieransimkin]

Originally Posted by htmlbasictutor

Reference: It’s alt attribute, not alt tag at 456 Berea Street

Relying on images using the alt attribute isn't going to add to the usability, accessibility nor the SEO of the site.

My question is why - under what circumstances is the alt attribute on an image less accessible than a piece of plain text?

You make a good point about the misuse of the term "alt tag" - of course you are correct and if I'd thought about it for a minute I'd have known that myself. The tag is an IMG tag, the alt text is an attribute of that tag. I hadn't even noticed that the incorrect terminology had crept into common usage - normally that's exactly the kind of thing that annoys me, so I can see where you're coming from!

[htmlbasictutor]

Originally Posted by kieransimkin

My question is why - under what circumstances is the alt attribute on an image less accessible than a piece of plain text?

When it is full of keywords (a.ka. keyword stuffing).

The alt attribute is there to add a description of the image for:
-those who use assistive technology to read web pages
-those who choose to have images turned off to save bandwidth and/or ignore ads.

[htmlbasictutor]

To get back to the original question,

"Testing the usability of your site is one of the smartest things you can do. Usability involves making a website’s interface easier to use and simpler to understand, so that the user’s experience is as enjoyable as possible.

The more usable a site is, the more satisfying it will be to interact with it — and happy visitors translate into happy customers.

Ideas about what makes for the best website design don’t always translate perfectly when put into practice. Elements that one person might consider easy to use may actually turn out to be confusing for someone else...testing for usability is the only reliable way to find out how well a website works...."

Reference: 10 Tools to Improve Your Site’s Usability on a Low Budget

This article goes on to cover how often should you test your website for usability and 10 tools you can use (free and low cost).

[fredrob77]

I suggest you read hxxp://www.usability.gov/ its a very informative site, and I agree with the Don't make me think book, a very great book for web designers.

[myndconsulting]

Yes, navigation that consists purely of images has usability and SEO issues. There should be text links immediately below each image.

Embedding your images thru the CSS background-image property is also a no-no for SEO work.

[htmlbasictutor]

Originally Posted by myndconsulting

...Embedding your images thru the CSS background-image property is also a no-no for SEO work.

Why would you say that? I dont' believe that to be true.

[htmlbasictutor]

New article by usability expert Jakob Nielsen:

Summary:
Enemies of usability claim that because "the experts disagree," they can safely ignore user advocates’ expertise and run with whatever design they personally prefer.

Building Respect for Usability Expertise

[myndconsulting]

Originally Posted by htmlbasictutor

Why would you say that? I dont' believe that to be true.

do you have a suggestion on how i can add the "alt" attribute details to a CSS background-image property?

[htmlbasictutor]

Originally Posted by myndconsulting

do you have a suggestion on how i can add the "alt" attribute details to a CSS background-image property?

Why would you want to add an alt attribute to a background image?

I was referring to your statement that a CSS background image is bad for SEO.

[myndconsulting]

Originally Posted by htmlbasictutor

Why would you want to add an alt attribute to a background image?

I was referring to your statement that a CSS background image is bad for SEO.

It's because you can't add the "alt" attribute to the CSS background-image property.

The solution is to use the HTML <img> tag instead of CSS.

[htmlbasictutor]

Originally Posted by myndconsulting

It's because you can't add the "alt" attribute to the CSS background-image property.

The solution is to use the HTML <img> tag instead of CSS.

1. Agree, if the image is an important part of the page content, using the img set of tags c/w alt attribute is the way to go:

• those using some assistive technology cannot see/read background images done via CSS
• you can incorporate keywords into the alt attribute description but it's not for keyword stuffing. It's a description of the picture.

2. Disagree,

• if you are doing this to keyword stuff via the alt attribute of decorative elements of the page.
• if for decorative elements, adds additional coding to the page (i.e. adds to the file size) which would be better used for content

Using ALT attributes smartly - Official Google Webmaster Central Blog