Icon madness, usability

[Stomme poes]

Hallo all,

I'm slowly being forced to turn almost anything clickable into an icon! (on a particular page). Remembering my mother always forgetting what "the little flag in the water" meant in the car (and ignoring when it glowed because she didn't know what it meant), I'm a little terrified of confuzled visitors!

I've been asked to add an icon for "log out" which frankly I've never even seen; I either don't visit login sites, visit them with images off so I can understand everything, or visit ones that just don't icon everything. Nothing I can think of would be very intuitive.

Can I do anything more than what I've got to make them as usable and understandable as possible? What I have (yesh it's tabular data):

            <td>
              <ul class="mijnhuizenicons">
	        <li><a href="main.pl" title="Change info"><img class="gegevens" src="../images/transicon.gif" alt="[Change info]" /></a></li>
	        <li><a href="main.pl" title="Upload photos"><img class="fotos" src="../images/transicon.gif" alt="[Upload photos]" /></a></li>
	        <li><a href="main.pl" title="Change map"><img class="kaart" src="../images/transicon.gif" alt="[change map]" /></a></li>
	        <li><a href="?main.pl" title="remove house"><img class="ver" src="../images/transicon.gif" alt="[remove house]" /></a></li>
              </ul>
            </td>
          </tr>

(edited to Engrish... not the actual text)
A list of options (for each table entry), a link that does stuff with title, an image element holding a transparent gif, a background image behind that showing the icon, and alt text.

It was a much simpler setup until I realised that IE6 was now giving everyone black backgrounds instead of the grey it used to for png's, and the jaggies were not acceptable enough to give everyone gif's. Thus, the transparent image.

While I like the square brackets around my alt text personally (I don't get image borders in my browser) they were essential in an otherwise unstyled list of alt texts, otherwise they all ran together in FF and Konq.

How can I improve this (removing the icons, lawlz yesh I know)? I have titles text for the mousers and alt text for those with images off, but these pox... I mean, icons, are spreading.

Thnx

[Mittineague]

If you want it to be accessible, the best suggestion I can give probably won't fly.

Put readable text next to the icon. eg. instead of only

o
o

do

o (beer)
o (coffee)

Otherwise not doing so will mean it isn't accessible, simple as that.

[Stomme poes]

Hmmm, I like it it, but I have a spacing problem (the text is pretty long). In fact, I even like your idea (have the text have a little icon next to it for clarity) than just text alone. I likely can't get it to fly past the designer, but I can give it a shot. Thanks.

With icons, mouse on the little person

Without, mouse over the lighter blue link on the right

[Mittineague]

In some cases an icon is a "de facto" standard, house = home, X = delete, pencil = edit, etc. But even then can you be certain all users will know what they mean?
For usability, simply having a key explaining what each icon represents would eliminate the need for explanatory text next to each icon when they're used multiple times.
But AFAIK, for accessability, having alt and titles should be enough in most cases, but it won't be 100% accessible without the adjoining text.
I guess it depends on what's more important. 100% accessibilty with a somewhat cluttered design, or a compromise where the design is cleaner looking but a bit less than 100% accessible.

[vanishdesign]

If you won't put the text next to it, be sure to add it to the title tag for the link. (edit: sorry mittineague: didnt realize you'd mentioned already)

Logout I've usually seen as shutting a door.
http://www.777icons.com/libs/basic-vista/logout.jpg

[Stomme poes]

Yeah, vanish, that was the only thing I could think of; there are little doors in my Pigeon program that means someone is logged on or logged off. However it's the same door facing two directions-- without looking at the actual status, I can't tell from looking whether they've come online or just went offline.

I think that's what my designer wanted, but I asked him, how many sites do you know with login/pw that have an icon for log out? He couldn't think of one, and I think right there that's reason enough to not use one at all.

And thanks mitt, it has occurred to me a few times that there may be a problem with the house and the plus sign. It means, add a house (the page is a list of houses that have been uploaded by you) but it might just look like Home Page to someone.
I rarely use the options at the top of this posting box, but when I want to do something I don't normally do, I turn images off to read what the buttons do. I just have no idea what a paperclip in front of a world/Earth means. : )

[gary.turner]

Why explicitly log off? To kill the session. My bank, for instance, offers a log-off button. The purpose is to prevent someone else from accessing your account on an existing session while your back is turned. In a competitive office environment, I'd worry about another agent sabotaging my listings.

In re the interface: Why have the identical choices on each record? Put a check box or radio button on each record, then put the choices in a single place below the table. The action/choice button's user configuration could allow the user to select showing 1) an icon, 2) text, or 3) icon+text.

The action would apply to all selected records.

This thread points to the reason graphics people, even the soi-disant designers, should not be allowed to set the site's vocabulary. The project manager, or whoever is acting as the site's information architect, should have already blocked the idea of using bare nekkid icons (even with alt and title texts).

cheers,

gary

[Mittineague]

phpMyAdmin uses a bunch of "action" icons

This substitutes a mess of icons for what would be a cluttered mess of text.


The difference being that phpMyAdmin is an application and a user will hopefully get accustomed to the icons as they get more familliar with using it. And since they presumably have some knowledge of databases actions, the icons might make some intuitive sense.

But for a webpage, can you trust that the users will persist in getting over the learning curve? And will their motivation outweigh their frustration?

[Stomme poes]

That same PHP actions icons is where this whole idea came from : (

This thread points to the reason graphics people, even the soi-disant designers, should not be allowed to set the site's vocabulary. The project manager, or whoever is acting as the site's information architect, should have already blocked the idea of using bare nekkid icons (even with alt and title texts).

You made me laugh a good 5 minutes. Lawlz.

This company does not know what its doing, and I must do the bidding of the guy who "runs" this site. "Information architects" don't exist in this small company (ICT here is me, a PHP/database guy, a PHP/Perl/Scripter guy, and a (Linux) server guy, plus the "designer").

I've been saying "the designer" but while he does have a good eye for "design" (colours and stuff) he's not a designer. He's a manager with a real estate agent license. He runs these house sites we have (renting and selling/buying, and another one coming along now) but doesn't do anything nerdy. He just manages and says he wants this image here and that box over there. Often it's at the request of the customers (the icons were actually requested by the real estate agents who are the ones who deal with the page above, for managing the houses they have listed on our site). Problem is, currently these are mostly Dutch people, but the site is international, which is yet another reason I don't like the icon idea (do they mean the same thing in all cultures? For many, I doubt it).

I've already run into this: In the Dutch version (where I write code), in many forms I've needed to use the title attribute so a screen reader reads out the "label" which is really am h3 or h4, not a proper label (the real labels are the text next to checkboxes and radio buttons). I'm 100% certain that they will not bother getting translations for that text. It's frustrating. At least Dutch speakers with screen readers will get an ok experience.

Why explicitly log off? To kill the session. My bank, for instance, offers a log-off button. The purpose is to prevent someone else from accessing your account on an existing session while your back is turned. In a competitive office environment, I'd worry about another agent sabotaging my listings.

Was someone asking why there was a logoff? Yeah people can log in and see their houses and then log off-- the only question is, the "designer/manager" guy wanted an icon for logging out. And I really disagree with the idea of a log out icon. Right now there's just a regular submit button.

But for a webpage, can you trust that the users will persist in getting over the learning curve? And will their motivation outweigh their frustration?

This is what I fear, but indeed this is also a sort of admin page. For the businesses who log in and manage houses online. Although the guy running the site has hinted that regular people (non-business can also load a house or two on the site) will have a similar page (fairly similar icons plus one for payment). I cooked up a goofy-looking euro sign with up and down arrows for the home rental page (where people can change the costs of renting the house out per season).
Each icon takes the person back to that particular page of that particular house (these are pages they have already filled in at least once, while they were uploading the house). So they click on the stupid Earth/globe to get back to the page where they placed the house on Google Maps, or they click on the little dude crossing the street to change their business address or contact info, etc. Possibly adding these icons to those pages may help people associate what they mean (on top of the title/alt text I already have).

Still looks like I'm stuck with them. : ( But thanks for the hints.

[gary.turner]

I misunderstood the meaning of this question. :shrug:

I think that's what my designer wanted, but I asked him, how many sites do you know with login/pw that have an icon for log out? He couldn't think of one, and I think right there that's reason enough to not use one at all.

If text can be taken so ambiguously, what chance an icon?

cheers,

gary

[Mittineague]

If the designer is the one using myPhpAdmin, maybe you could temporarily rename the icons so they won't show in the GUI. Or better yet replace them with some different icons. That should make an impression. Just make sure you can get it back to normal after he gets the message.