Issue Details (XML | Word | Printable)

Key: MDL-20011
Type: Bug Bug
Status: Open Open
Priority: Major Major
Assignee: moodle.com
Reporter: Olli Savolainen
Votes: 0
Watchers: 0
Operations

Add/Edit UI Mockup to this issue
If you were logged in you would be able to see more operations.
Moodle

Change the advanced item sign to a gear icon in forms and anywhere Progressive disclosure is used.

Created: 06/Aug/09 02:00 AM   Updated: 04/Sep/09 10:49 PM
Return to search
Component/s: Accessibility, Forms Library, Unicode, Usability
Affects Version/s: 2.0
Fix Version/s: None

File Attachments: 1. Text File 2009-09-04_patch.txt (1 kB)

Image Attachments:

1. 2009-09-04_adv.gif
(0.2 kB)

2. 2009-09-04_screenshot-flag.png
(74 kB)

3. adv.gif
(0.9 kB)

4. advballs.gif
(0.8 kB)

5. balls.gif
(44 kB)

6. Example of Gear.jpg
(86 kB)

7. example.gif
(11 kB)

8. gear-small.png
(0.5 kB)

9. gear-small2.png
(0.5 kB)

10. gear.gif
(0.9 kB)

11. gear2transparency.png
(1.0 kB)

12. gear2transparency1bit_final.gif
(0.3 kB)

13. gear2transparency1bit_final.png
(0.4 kB)

14. gear2transparency_final.png
(0.4 kB)

URL: http://moodle.org/mod/forum/discuss.php?d=129719
Participants: Mauno Korpelainen, moodle.com and Olli Savolainen
Security Level: None
Difficulty: Easy
Affected Branches: MOODLE_20_STABLE


 Description  « Hide
Discussion: http://moodle.org/mod/forum/discuss.php?d=129719

As a great part of human population has color blindness (and red-green is a common type of that color blindness, see, for example http://www.asktog.com/basics/firstPrinciples.html) the advanced items in a form should be differentiated from the required items by more than just being green instead of red.

http://docs.moodle.org/en/Development:Progressive_Disclosure

To provide further differentiation, change the advanced item sign to [gear] and also include it in the button. Is this utf8 character available in all fonts possibly used with Moodle?

In the wiki document I have listed some other possibilities, which I have thought less optimal than the gear icon, since the gear icon actually can be thought of as a metaphor of what it means and is thus potentially more easily learnable. It is also used in Mac OS so some users probably know it already.

http://docs.moodle.org/en/Development:Progressive_Disclosure#Related_issues_in_the_tracker

Also consider highlighting the advanced items as an usability (not accessibility) improvement in the default theme. This will help users spot the appeared items and is likely to make the UI feel more responsive. See: http://moodle.org/mod/forum/discuss.php?d=129719#p568302 (the highlight colour could be a bit stronger though)

 All   Comments   Change History   Version Control      Sort Order: Ascending order - Click to sort in descending order
Olli Savolainen added a comment - 06/Aug/09 02:02 AM
Well, at least we found out that the tracker does NOT support utf-8.

The gear icon is visible at: http://docs.moodle.org/en/Development:Progressive_Disclosure#Related_issues_in_the_tracker


Olli Savolainen added a comment - 06/Aug/09 05:26 PM - edited
In the discussion http://moodle.org/mod/forum/discuss.php?d=129719 it was confirmed that the support for the character is not sufficient in the fonts apparently widely in use in mostly windows.

Olli Savolainen added a comment - 20/Aug/09 02:21 AM
Based on the discussion in the forum thread, it was determined that the gear icon is our best shot at the moment, but implemented as an bitmap image (gif or png, just like the current asterisk) and with a textual ALT text. The pixel size that the gear icon should have has not been determined yet.

Mauno Korpelainen added a comment - 20/Aug/09 05:06 AM
Olli,

where do you find justifications for your decisions?

The whole idea of using Gear or other symbols (also green asterisk) seems to be against your main principle - Progressive disclosure. For example http://en.wikipedia.org/wiki/Progressive_disclosure explains that

Progressive disclosure is an interaction design technique often used in human computer interaction to help maintain the focus of a user's attention by reducing clutter, confusion, and cognitive workload. This improves usability by presenting only the minimum data required for the task at hand.

and some rows later

Definition and term use
Progressive disclosure is an interaction design technique that sequences information and actions across several screens in order to reduce feelings of overwhelm for the user. By disclosing information progressively, you reveal only the essentials and help the user manage the complexity of feature-rich sites or applications. Progressive disclosure follows the typical notion of moving from "abstract to specific"; only it may mean sequencing interactions and not necessarily level of detail (information). In other words, progressive disclosure is not just about displaying abstract then specific information, but rather about 'ramping up' the user from simple to more complex actions.


In its most formal definition, progressive disclosure means "to move complex and less frequently used options out of the main user interface and into secondary screens".

If you must implement Gear think carefully the size and color of that symbol. If it is the same size as asterisk some users won't see the difference between asterisk and Gear - they are too similar if adv.gif is 8x12 px - see the attachment. If Gear is bigger than red asterisk it gets more attention than red asterisk (required fields) which causes more clutter, confusion and cognitive workload. At least if you need to use any symbols like Gear please explain the meaning clearly somewhere near button "Show advanced settings" - some people may have seen Gear in advanced settings of browsers or some programs but it is not used in forms and most people won't probably know the symbol at all. See the previous attachment.


Mauno Korpelainen added a comment - 20/Aug/09 05:21 AM
In my opinion changing green asterisk to any Gear does not make moodle more usable - my interpretion of those discussions in http://moodle.org/mod/forum/discuss.php?d=129719 is that we should drop the whole "advanced symbol" as useless and meaningless symbol and use other methods to make forms of moodle more usable.

Mauno Korpelainen added a comment - 20/Aug/09 07:03 AM
Or if you choose to use some larger icons like the attached gear.gif ( icon of plugin of Xinha that uses Google Gears to enable local document storage - see the other discussions about keeping user data safe... ) it is of course possible to change also icon of red asterisk to some bigger icon that does not have to be asterisk if you want to use some other icon - for example

Olli Savolainen added a comment - 20/Aug/09 04:31 PM
Sorry, Mauno - it seems you are offended. I did not mean to bypass your argumentation in the original thread, but it does seem I have not replied to all you have said. I will look into it again.

The main point was to solve the accessibility issue: To make it possible to discern the two different symbols. I agree with you that the way progressive disclosure is used in Moodle can be an issue in itself. It has been discussed quite a bit: http://moodle.org/mod/forum/discuss.php?d=122545 http://moodle.org/mod/forum/discuss.php?d=120374

The problem to me is that this bigger issue is not trivial at all. There are lots of things to consider, and no real research seems to have been gathered anywhere of the pros and cons of different approaches. As my funding is over for this summer, I see it important to at least make the existing mechanism work so that users with deficiencies in telling colours apart can understand it.

The gear icon has its downsides. I welcome any suggestion for a better icon, but none has been found in the forum thread as I see it. It seems to me that by making the asterisk and the gear sufficiently different size and style. It does not work smaller than 14x15px though but as resolutions go up moodle icons are too small anyway.


Olli Savolainen added a comment - 20/Aug/09 04:38 PM
another option

Olli Savolainen added a comment - 20/Aug/09 05:49 PM
Oh, I forgot to add transparency. Here are the bigger original (modified from the unicode symbol in the font Sans in Ubuntu) and the version with alpha transparency and one with just 1-bit transparency (I am not sure if alpha transparency is considered ok yet since IE6 does not cope with it very well. I think the 1bit version should work but I have not tested it on IE. Uploading also a GIF version in case nothing else works.

Mauno Korpelainen added a comment - 20/Aug/09 07:13 PM
Well...if you are absolutely sure that we need an icon and it is a moodle specific advanced option why not use the tiniest possible moodle logo - see attached adv.gif and example.gif

(that image is transparent gif but tracker shows background as black...)


Mauno Korpelainen added a comment - 20/Aug/09 07:17 PM
At least nobody can say that tiny moodle logo looks like an asterisk...

Mauno Korpelainen added a comment - 20/Aug/09 07:19 PM
And it must be gif image if we still want to support IE6 users ...

Olli Savolainen added a comment - 20/Aug/09 08:40 PM
I do not insist it has to be the way we have it at the moment is the best way. But it is the convention Moodle has developed and we should not change that until we really know what is better. Making users learn a new convention at every version is certainly an issue.

IE6 supports png just fine, it just can't have alpha transparency, so the png with 1bit transparency should be ok.

I have to say I agree with what Mark said in the forum thread - associating the moodle logo with "advanced item" seems like a pretty bad semantic mess.


Mauno Korpelainen added a comment - 20/Aug/09 11:59 PM
Are orange balls better / more neutral ?

See the comments from forum posts why 1 pixel transparent icons are not good, Olli.

And once again forgive me if you feel that I have written too personal comments or somehow have hurt your feelings - I have nothing bad to say about your excellent work. It's called critique - hopefully in positive attitude to make things better. I have tried to explain my excuses in that same post so I won't repeate them here...


Olli Savolainen added a comment - 04/Sep/09 10:43 PM
The discussion to the above continued in the thread http://moodle.org/mod/forum/discuss.php?d=12971.

According what was agreed in the discussion, posting a patch that will accommodate for the new icon and also according to Mauno's suggestion, hilight the advanced rows when they appear. I did not think this needs to be two separate patches though strictly thinking the highlight solves a different issue than the icon and they could be two separate commits. (Note that the patch requires some CSS tweaks, namely addition of padding to the icon, also required by the icon).

Due to the fact that 1bit transparency is a requirement for Moodle icons, on very dark backgrounds the icon's edges look pretty ugly, but are still visible. The icon is the unicode character U+2691 and the font used was Sans 16pt on Ubuntu 9.04 with anti-aliasing.

The patch is not perfect and for example drop down menus (most of which are hopefully to be removed anyway) do not fit inside the highlit area, due to the rather novel ways form elements are padded vertically in the forms CSS. Someone who made that CSS for the standard theme could probably fix it. Still, it is better than nothing even now.

Unfortunately I can not be available to make any big changes to this anymore so should anyone require this to be further developed I hope they can make the changes required themselves.


Olli Savolainen added a comment - 04/Sep/09 10:49 PM
The actual patch did not upload, hmm. The files starting with 2009-09-04_ are the ones related to this at the moment.