Details
-
Type:
Bug
-
Status:
Open
-
Priority:
Major
-
Resolution: Unresolved
-
Affects Version/s: 2.0
-
Fix Version/s: None
-
Component/s: Accessibility, Forms Library, Unicode, Usability
-
Labels:None
-
Difficulty:Easy
-
Affected Branches:MOODLE_20_STABLE
Description
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)
Attachments
Activity
- All
- Comments
- History
- Activity
- Source
- Test Sessions
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.
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.
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 
At least nobody can say that tiny moodle logo looks like an asterisk...
And it must be gif image if we still want to support IE6 users ...
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