UBB.threads PHP Forum Software Community Forums General Suggestions and Feedback Explain the Icons!

I've been begging Our Man Screamer via email, but I'm hoping that if I post here there'll be such an outpouring of agreement that he'll have no choice but to implement! : )

Those icons are pretty darned unintuitive for newbie users. If it can be rigged so that passing the cursor over them gave a short explanation in the bottom of the browser window, it'd be AWESOME.

If that's not possible, how 'bout at least putting a prominent link reading "what's with these icons??" linking to a quick, handy key (I find it sorta "buried" in the FAQ as is).

Sure, 50% of users are slick enough to figure out that the explanation is in the FAQ, go to the FAQ, scroll through the FAQ and find the answer. But what about the other 50%?!?

Thanks for reading...and for begging along with me if you agree!

chowhound.com
For Those Who Live to Eat

I definitely agree. At the very least, simple onmouseover tags should be added to all the icons explaining what they do.

I believe ease of navigation is an essential feature for any webpage (and one that's lacking in a large majority of today's sites). As you've said, the icons aren't all that intuitive to new users. It's not just here, it's a common occurance all throughout the web.

Personally, I think graphical user interfaces are a pain for the most part. The trend has caught on because of OS's like Windows and browsers like IE and Netscape. It's supposedly more user-friendly, but I really don't see it that way.

As an example, when I go to adjust my monitor settings on my PC, instead of seeing a simple menu with choices like: "brightness", "height", "width", "adjust vertical display", "adjust horizontal display", "use default", "done", etc, I'm greeted with a menu filled with mysterious icons. A couple are fairly obvious- a lightbulb representing "brightness", horizontal and vertical arrows for "height" and "width". The rest are baffling for the most part: an anvil shaped icon, a square with 3 dots, a square with an X in it, an arrow inside a diamond, a triangle with a flat top, two square icons with rectangles overlayed them. Ummmm.... hello?? This is user-friendly? Is it any wonder why so many people today are still computer illiterate by choice, it can definitely be intimidating b/c of things like this?

Often times, if you give it a little thought, you're able to figure out what "mystery" icons mean... but why should we have to go through that extra step? It doesn't make much sense to me to have to "decode" the meaning of an icon, when it could just as easily be explained with a single word of text. Even with something simple, like the lightbulb example, instead of immediately seeing what we're looking for- "brightness", there's a quick mental process that goes something like: "What's that?" "Oh, it's a lightbulb", "That probably represents 'brightness'". What's the reasoning in adding that extra step? Cut out the middle-man, and get right to the point.

I'm no newbie, I've been around computers and the internet for quite a while, and I do my fair share of programming in my free time, but I still get baffled often times when trying to navigate a new program or site that relies almost entirely on graphics/icons. It's frustrating and eats up time.

Text based interfaces are much more efficient, and easier to understand for newbies and oldbies alike. Want proof? Go check out a WebTV display at a local Circuit City. WebTV is marketed for the most part to those who aren't computer literate, the technology fearing, older seniors, etc. What do they use for navgation? Text for the most part. Mail, Usenet, browsing, settings... all simple, text menu's. It's very easy to use, and extremely intuitive. WebTV is certainly not for advanced users, as it's lacking many standard PC features, but there's absolutely no reason why text based navigation like that can't be incorporated into "advanced" systems as well.

Sorry to babble on like this... but it's an issue I've often talked with people about in the past, and one I feel strongly about.

I've altered my own copy of W3T to replace all the icons with text, and I'm sure anyone else could do the same, so it's not really an issue with the program. It's just something I think more people need to think about and consider when creating programs/websites. Just because you are able to understand what things do, you shouldn't expect that all your users will. And new users really shouldn't have to learn how things work, it's your job as programmer/designer to make it obvious. End-user ease of use should be top priority, even at the cost of making things more complicated for the author.

Note to Scream:

This is off topic, but my message above was cut off about half-way through when going through the preview screen. It happened 4 times, so it wasn't a temporary glitch. After the original post, I noticed the error and tried correcting it 3 times by editing my message. I finally got it to go through by shutting off the preview option in my profile.

These icons are nice but confusing. I suggest using (optional) text icons. This will be a problem for foreign languages, though.

So the best would be a (user selectable) option: either icons or text in the right language.

By the way, when you pass the cursor over it you see what the icon means, maybe your java script is turned off

Personally, I like the icons, and since they have their alt tags set to the particular language of the user, like mario2 said, it says what it means when you point the mouse to the icon - I think that is sufficient in my opinion.

>So the best would be a (user selectable) option: either icons or text in the right language.

Agreed. All the optional text messages could easily be added to the language files.


>By the way, when you pass the cursor over it you see what the icon means, maybe your javascript is turned off

That's not javascript, it's ALT text. Not all browsers will display ALT text when you move the mouse over it like that. There's a javascript command called "onmouseover", which you can set to display a message in the status bar of the browser. Of course, not all browsers support Javascript either. That's why your suggestion would be the best way to go.

>Personally, I like the icons

I think the keyword there is "personally". What if some of your users don't agree?

There are many user-selectable options right now, and that makes this an extremely customizable board by the end-user. Why not give them yet another choice? It certainly wouldn't hurt, the admin should have the option to make either text/icons the default, and then allow the user to over-ride the selection if they choose.

Yeah, I guess you're right, the option as such sounds good.

I'm using the latest netscape navigator for Mac, with all java stuff definitely ON. Can't find a preference for "enable mouseover" or "alt" tags.

Hmmm...so while I'm glad Screamer's already implementing my suggested feature, maybe that's not enough. At LEAST there should be a prominent link to a key explaining the icons.

Of course, text descriptions rather than graphic icons would work, too...but it should default to text, since it's as unlikely that newbies would figure out how to reconfigure on their end for text tags as it would be for them to figure out what the icons are in the first place!

(hope that was clear!)

chowhound.com
For Those Who Live to Eat

>I'm using the latest netscape navigator for Mac,
>with all java stuff definitely ON. Can't find a
>preference for "enable mouseover" or "alt" tags.

Sorry if I was unclear about the "onmouseover". It's not a preference that you can select in your browser settings. It's a Javascript attribute that a webmaster can add to their coding to, among other things, display text when a user's mouse passes over certain text, images, or other objects.


As for "ALT" tags, those are traditionally used for text-only browsers like Lynx, or for users who turn images off in browsers like IE/Netscape. In place of the images, the ALT text will be displayed for them.

A lot of browsers now (ie. the more recent IE's and Netscape's), will also display ALT text for a user in a little box near the image when they hold their mouse over the image for a second or so. This is what you've been seeing. As far as I know, there's not a browser option to turn this on or off.

I guess that "onmouseover" JavaScript bit would be an alternative for those browsers that don't display the alt tag messages when moving the mouse over the icon. However, I wonder how many browsers there are that don't display the alt tag message, but handle JavaScript... I just don't know... but it should be not so hard to add that in. One thing I hacked into my version is, that in the FAQ, it shows the actual buttons, not just says "right arrow" etc. - after all, which new user knows what the "New Post" button is? - displaying the keys there has been much help, but a link to that section (via the anchor) would help a lot - but that could be easily hacked by adding that link in header.include, that way it would be on every page. Of course, if Scream would find a good place on the main page, boards and threads, that would be great - I would like to see a message on the threads display saying something like "to reply to this message, please click <img src="http://www.wwwthreads.com/w3timages/reply.gif" alt=" - " /> " because I keep having people start a new thread to reply - which is why I've been asking for an Admin tool to move messages!

Good ideas. Are you going to post your hacked code so we can all use it?

Sure, no problem <img border="0" title="" alt="[Smile]" src="images/icons/smile.gif" />
in englishfaq.pl (w3t version 4.4.1), replace the section with the button explanations <blockquote><font size=1>In reply to:</font><hr>

The buttons are used for navigation and displaying posts. Depending on the screen you are on they may serve different purposes.


When displaying a list of all threads:
< br >- The left and right arrows will take you to the previous or next page of posts.
< br >- The up arrow will take you to the index of all available forums.
< br >- The "New Post" button will let you make a new post on that board.
< br >- The and - buttons will allow you to toggle between expanded and
collapsed threads. Expanded threads will show the subject of all posts and replies in a threaded format. Collapsed threads will show the subject of the main post along with the number of replies to that post.


When viewing individual threads:
< br >- The left and right arrows will take you to the previous or next thread.
< br >- The up arrow will take you back to the listing of all posts on that page.
< br >- The "Flat Mode" button allows you to view the entire thread on one page if there are any replies to the original message.
< br >- The "Threaded Mode" button allows you to view the current posts will all other posts on that thread displayed below in a threaded format.


[/quote]

with this:
<blockquote><font size=1>In reply to:</font><hr>


The buttons are used for navigation and displaying posts. Depending on the screen you are on they may serve different purposes.


When displaying a list of all threads:
< br >- The [img] $config{'images'}/previous.gif [/img] and [img] $config{'images'}/next.gif [/img] buttons will take you to the previous or next page of posts.
< br >- The [img] $config{'images'}/all.gif [/img] button will take you to the index of all available forums.
< br >- The [img] $config{'images'}/newpost.gif [/img] button will let you make a new post on that board.
< br >- The [img] $config{'images'}/expand.gif [/img] and [img] $config{'images'}/collapse.gif [/img] buttons will allow you to toggle between expanded and
collapsed threads. Expanded threads will show the subject of all posts and replies in a threaded format. Collapsed threads will show the subject of the main post along with the number of replies to that post.


When viewing individual threads:
< br >- The [img] $config{'images'}/previous.gif [/img] and [img] $config{'images'}/next.gif [/img] buttons will take you to the previous or next thread.
< br >- The [img] $config{'images'}/all.gif [/img] button will take you back to the listing of all posts on that page.
< br >- The [img] $config{'images'}/flat.gif [/img] button allows you to view the entire thread on one page if there are any replies to the original message.
< br >- The [img] $config{'images'}/threaded.gif [/img] button allows you to view the current post with all other posts on that thread displayed below in a threaded format.
< br >- The [img] $config{'images'}/reply.gif [/img] button allows you to reply to a post.
< br >- The [img] $config{'images'}/edit.gif [/img] button allows you to edit a post.


When viewing the "Welcome" after logging in, viewing "Check Private":
< br >- The [img] $config{'images'}/editprofile.gif [/img] button allows you to edit your profile.
< br >- The [img] $config{'images'}/sendprivate.gif [/img] button allows you to send a private message.
< br >- The [img] $config{'images'}/logout.gif [/img] button allows you to log out.


[/quote]

Of course, if you have any users using other languages, this would have to be done similarily for the other languages ~faq.pl files. I added a few for a more complete explanation <img border="0" title="" alt="[Smile]" src="images/icons/smile.gif" /> . <font color=red>Please note that I had to add extra spaces in the "< br >" because it wouldn't have shown up here but be interpreted as a carrier return. You need to replace them with "< br >" without any spaces - can't show it here though. Should be a simple matter of search and replace after changing the code.</font color=red>

Beautiful! It works in 5.0b1 too. Thanks for that.

You're welcome! <img border="0" title="" alt="[Smile]" src="images/icons/smile.gif" /> Glad I could help....

I like the looks of this, Gerrit. Would you mind if I rolled this into the main distribution?

---
Scream
<A HREF="http://www.wcsoft.net" target="_new">http://www.wcsoft.net</A>

Sure, no problem <img border="0" title="" alt="[Smile]" src="images/icons/smile.gif" /> - one minor change I made on my version after posting it here is that I made the sub-headers bold, i.e. the
When displaying a list of all threads:
etc. lines. Makes it look more structured and easier to find the right section.