Future major features

New default icon set for Moodle 2.4 roadmap

 
Picture of Gilles-Philippe Leblanc
New default icon set for Moodle 2.4 roadmap
 

Hi,

I read that in the developper roadmap, its planned to update the default icon:
http://docs.moodle.org/dev/Developer_meeting_May_2012#Moodle_2.4_roadmap

I wonder the actual state of this task because we recently modify many icons for our custom theme and we could share the icons with the community.

Thanks.

 
Average of ratings: -
Picture of Rex Lorenzo
Re: New default icon set for Moodle 2.4 roadmap
Core developersParticularly helpful MoodlersPlugin developersPlugins guardiansTesters

At the meeting the icon set that they were leaning towards using was Tango: http://tracker.moodle.org/browse/MDL-14361

Can we see what icon set you are using? 

 
Average of ratings: -
Dan at desk in Moodle HQ, Perth
Re: New default icon set for Moodle 2.4 roadmap
Core developersMoodle Course Creator Certificate holdersMoodle HQPlugin developersTesters
Hi Rex,

Actually I don't think that is accurate. My understanding is that Martin looked at Tango, but it wasn't a good fit for our purposes. Its likely that our designer, Barbara Ramiro will create a custom set of icons for 2.4 (perhaps starting from a base set of icons), much like some of the great work shes done for 2.3.

Dan
 
Average of ratings: -
Picture of Gilles-Philippe Leblanc
Re: New default icon set for Moodle 2.4 roadmap
 

We first started with the icons set used in the after burner theme but we added some of the icons based on silk and fugue icon set. We also have to modifiy some icons who arent not included in afterburner. We finally transform some icons from gif to png 24 to avoid the problem of white bordured icons. Thats these modifications that I would like to share. its simple but if it could help..

But now, after reading this page:
http://moodle.org/mod/forum/discuss.php?d=126543

The work that could be done could be far more complex that only replace the actual core icon.

I think if there is a willingness to review the entire system icons, the use of vector icons would be much better. In this case, the icons I wanted to share with you are useless. Otherwise, Let me know.

 
Average of ratings: -
Picture of Darcy Christ
Re: New default icon set for Moodle 2.4 roadmap
 

It sure would be nice if more icons in Moodle were sprites loaded via CSS. This would make it easier for theme designers to change the icons.

Also, when you say vector icons, do you mean font icons?. I highly recommend Font Awesome.

 
Average of ratings: -
Picture of Mark Johnson
Re: New default icon set for Moodle 2.4 roadmap
Core developersParticularly helpful MoodlersPlugin developers

I'd certainly add my vote for either font- or SVG-based icons.  If we're going to be seeing more devices with high DPI displays in the coming years, 16x16 bitmaps aren't going to cut it much longer!

 
Average of ratings: Useful (1)
Picture of Danny Wahl
Re: New default icon set for Moodle 2.4 roadmap
Core developersPlugin developers

I disagree.  Dropping in a single image is a lot easier than rebuilding a whole sprite sheet.

It would lower http requests and decrease loading time- but I don't think it's easier.  Also, how would you handle a new icon being added to the set, like a new mod or core feature?

 
Average of ratings: -
Picture of Barbara Ramiro
Re: New default icon set for Moodle 2.4 roadmap
 

Right, so the plan is to have individual svg file for each icon (neither sprite nor font). Here is the draft guidelines and open for feedback. Cheers!

 
Average of ratings: Useful (1)
Picture of Ralf Hilgenstock
Re: New default icon set for Moodle 2.4 roadmap
Core developersParticularly helpful MoodlersTranslators

Hello Barbara,

your work on new consistent icons is great and we really need this.  The choosen basic colors are very strong like candys. I know, this looks modern and stylish, but I think we need in the next step a more decent set of icons.

You've presented the icon for the feedback module. Its a megaphone. From the character of the module it should be more like an ear. If we get a new forum module we can use the megaphone icon for a news and announcment forum.

ralf

 
Average of ratings: -
Picture of Stuart Lamour
Re: New default icon set for Moodle 2.4 roadmap
Plugin developers

+1 with mark for font or svg based.

nice article here from chris - http://css-tricks.com/html-for-icon-font-usage/

 

 
Average of ratings: -
Picture of Stuart Lamour
Re: New default icon set for Moodle 2.4 roadmap
 
Average of ratings: -
Picture of Thomas Hanley
Re: New default icon set for Moodle 2.4 roadmap
 

I agree also with Stuart and Darcy that an svg/font icon solution would be best. Font-Awesome looks good.

 
Average of ratings: -
ME
Re: New default icon set for Moodle 2.4 roadmap
Core developers

Some other SVG icon packs that are open source:

http://keyamoon.com/icomoon/

http://somerandomdude.com/work/iconic/

 
Average of ratings: -
Picture of Cathal O'Riordan
Re: New default icon set for Moodle 2.4 roadmap
Core developers

I came across this font set the other day:

http://symbolset.com/

Given the specific nature of Moodle, it may be diffcult to map an existing set of icons to existing Moodle actions. A bespoke set of icons as suggested by Barbara Ramiro above is the correct way to proceed.

If you are interested in exploring icon development further, I would suggest reading 'The Icon Handbook' by Jon Hicks - http://www.fivesimplesteps.com/products/the-icon-handbook

He rendered the well known Firefox browser icon smile

regards,
Cathal.

Waterford Institute of Technology,
Waterford
Ireland.

 
Average of ratings: -
Picture of Stuart Lamour
Re: New default icon set for Moodle 2.4 roadmap
Plugin developers

Lots of talk on this spread across forums and tracker, but since this discussion is in the Future major features forum i figure this must be the most appropriate place to post a quick quiz!

Quick quiz/poll :

1. Do you consider icons to be :

a) content

b) accessibility aids

c) styling / usability aids

 

2. Lets forget moodle exists. If you were making a website or cms how would you add icons?

a) <a href=foo><img src=foo>foo</a>

b) <a href=foo class=foo>foo</a>

.foo { background:transparent url=foo ect...}

c) <a href=foo class=foo>foo</a>

.foo:before { font-family:foo; content=foo }

 

Cheers

stuart

 

 

 

 

 

 

 

 

 

 
Average of ratings: -
Julian Ridden
Re: New default icon set for Moodle 2.4 roadmap
Core developersMoodle Course Creator Certificate holdersPlugin developersTranslators

Morning Stuart,

My thoughts on this are equal parts B and C.

It is because of B for instance that I am always concerned that the icon has a logical connection to it's purpose. The Pencil icon for settings has always annoyed me a little. An internationaly recognised symbol for settings is a gear, or gears. Would be nice to standardise this to make it more recognisable. Likewise, I see a megafone as the proposed icon for feedback. How are these two things combined?

Julian

 
Average of ratings: -
Picture of Danny Wahl
Re: New default icon set for Moodle 2.4 roadmap
Core developersPlugin developers
1) C. 2) is a big fat "depends". I would normally use B and or C IF the amount of icons I have to output is low OR I have a way to easily manipulate them (not a sprite sheet) With Moodle currently I would pick "A" because it's much easier to dynamically influence code output (via renderers) than it is CSS (via postprocessors)
 
Average of ratings: -
Picture of Alex Walker
Re: New default icon set for Moodle 2.4 roadmap
 

This is how I add icons to links. There's probably a slightly better way to do this, and I'm going through my CSS practices just now to see what I can improve.

At the HTML level:

<a class="featureLink add" href="...">Add</a>
<a class="featureLink edit" href="...">Edit</a>
<a class="featureLink delete" href="...">Delete</a>

At the CSS level:

.featureLink {
background-repeat: no-repeat;
background-position: 0 50%;
padding-left: 20px;
}

.featureLink.add {
background-image: url([[pix:theme|icon-add]]);
}

.featureLink.edit {
background-image: url([[pix:theme|icon-edit]]);
}

.featureLink.delete {
background-image: url([[pix:theme|icon-delete]]);
}
 
Average of ratings: -
Martin Dougiamas
Re: New default icon set for Moodle 2.4 roadmap
Core developersDocumentation writersMoodle HQPlugin developersTesters

I think accessibility has got to be included in thinking about icons.  And I think accessibility is probably reduced when adding icons as backgrounds via CSS ...

I don't see a path clear enough to push changes into 2.4 ... It would be great to have all this decided for 2.5 though. 

 
Average of ratings: -
Picture of Stuart Lamour
Re: New default icon set for Moodle 2.4 roadmap
Plugin developers

Hi Martin,

the answer to quiz question 1. (Do you consider icons to be) is c :

c) styling / usability aids

Icons cannot benefit accessibility, but when used correctly can benefit usability and make things look pretty.

I know from previous posts there is a great deal of confusion about the terms accessibility and usability with the two being used together and interchangeably on the forums by many people, so i'll set out the difference between accessibility and usability.

Web accessibility

designing for accessibility on the web means enabling users with :

  • Visual impairment ( poor eyesight, color blindness, blindness)
  • Motor/Mobility difficulties
  • Hearing problems
  • Other difficulties

If are using a screen reader you should not have to be read out anything (alt, title or src) about a decorative image - the link text itself is all you want to know about. An inline icon is just another dom element you have to navigate past to get where you want.

It your turning off css, there is probably a good reason - decorative inline icons will be an impairment rather than useful to you. 

Decorative icons do not need the accessibility standards you would apply to images which provide content. Trying to make any decorative icon accessible (e.g. title, alt etc) is just adding noise.

You would as likely put a title and alt tag on a rounded corner as you would a decorative icon.

 

Web usability

designing for usability of the web means enabling all users.

  • Presenting information to the user in a clear and concise way
  • Give the correct choices to the users in an obvious way
  • Remove ambiguity regarding the consequences of an action
  • Place important items in an appropriate area on a web page or a web application

(yeh, that list is from wikipedia smile

Icons exist on the web to make things look nice and aid usability.

Hope this helps 

Stuart

 

 
Average of ratings: -
Picture of Stuart Lamour
Re: New default icon set for Moodle 2.4 roadmap
Plugin developers

p.s. if you really need to check these things out http://webstandardssherpa.com/ is your friend and i found Greg https://moodle.org/user/profile.php?id=305966 to be a great source of advice too.

 
Average of ratings: -
Picture of Cathal O'Riordan
Re: New default icon set for Moodle 2.4 roadmap
Core developers

Hi Stuart,

I'm not very experienced with screenreader software but from the examples above, wouldn't a screenreader look at both the outer <a> and inner <img> tags and announce both to the user? If this is the case, the background image approach for presenting icon representations of "things" would be a better end user experience. The visually impaired user isn't recieving announcements about the "thing" on the page twice.

The <a> link is the important thing — the fact that it can be represented textually, pictorially or audibly is appealing to certain categories of users.

regards,
Cathal.
Waterford Institute of Technology

 
Average of ratings: Useful (2)
Picture of Cathal O'Riordan
Re: New default icon set for Moodle 2.4 roadmap
Core developers

I should say, the other method of using a symbol font would work equally well. It doesn't affect the rendered markup, which is what screenreaders primarliy focus on.

regards,
Cathal.
Waterford Institute of Technology.

 
Average of ratings: Useful (1)
Martin Dougiamas
Re: New default icon set for Moodle 2.4 roadmap
Core developersDocumentation writersMoodle HQPlugin developersTesters

It appears there is no link here to the actual issue in the tracker.   MDL-34080

 
Average of ratings: -
peter svec
Re: New default icon set for Moodle 2.4 roadmap
Particularly helpful Moodlers

Why are blocks and actions icon just gray?  There are many themes with dark header blocks, so the "minus icon" and "move to dock" icon in a block doesn't look very well. Adding light background and border (MDL-36442) is just workaround.

Is is possible to have separate icon for blocks, e.g. white icons instead of grey?

 
Average of ratings: -
Dan at desk in Moodle HQ, Perth
Re: New default icon set for Moodle 2.4 roadmap
Core developersMoodle Course Creator Certificate holdersMoodle HQPlugin developersTesters

As the icons are SVG's you can edit the colours them and add them to your theme. Ankit did a quick proof of concept to try and see if we could change the colours programatically within the Moodle interface. See Ankit's github.

 
Average of ratings: Useful (4)