Toolbar UX design

[Ocramius]

Need some UX design for the toolbar and various web components. This issue is specific to the toolbar only.

collected tips so far:

• reduce information being displayed, show icons-only where possible
• expose minimal information by altering icon styling
• inline-svg icons to be used

[bakura10]

I think an idea that we could have a look is having only icons in the toolbar. The issue with having too much information is that it can quickly reaches the screen limit, especially on small screen. If we can have only small, implicit icons, we could implement a system where hovering on the icon "slide" the name. For instance, a clock icon will reveal "Timing". This will allow us to have plenty of space, at least horizontally.

Regarding the information, we do not have a lot of choice.

[manuakasam]

Icons only 👍

Sliding in the name to the right 👎

Hovering an Icon should simply pop up the information on top just like it's happening now. If you have good icons you won't need an explanation.

[Ocramius]

@bakura10 could you flesh out if there's information that should always be hidden? And information that should always be shown? I'm thinking about changing icon colors via classes, thoughts?

[bakura10]

Well, we should use font icons for that, so that changing color of icons is really really easy.

[Ocramius]

Any icon pack that we could use and that is MIT compatible?

• http://ionicons.com/
• http://fortawesome.github.io/Font-Awesome/license/
• http://raphaeljs.com/icons/

[bakura10]

Mmhh let me think. Actually it may be a bit harder to user. I think we should go with inline SVG icon.

[bakura10]

font icon is actually inconvenient, because you need to create a font. For third-party modules that integrate with ZDT, that's inconvenient.

[Ocramius]

@bakura10 we can always assume decent browsers (firefox/chrome). ZDT is a tool for developers, not for suicides.

But yes, inline-SVG is also ok.

[manuakasam]

http://ionicons.com/ are licensed under MIT and font based

[bakura10]

Inline SVG is supported in those browsers, anyway.

[Ocramius]

@bakura10 then any pack of SVG icons that we can use? :)

[manuakasam]

google says: http://raphaeljs.com/icons/

[Ocramius]

@manuakasam seems like those are all JS-rendered though...

[bakura10]

See an example: http://tympanus.net/codrops/2013/11/27/svg-icons-ftw/ ;)

[bakura10]

The challenge is more about finding the icon you want. This may be of interest: http://www.flaticon.com/packs/

You need to check the licence for each pack.

[Ocramius]

Yeah, those are all CC 3.x - not sure if we can use them, so I'd stick with MIT/BSD...

[archseer]

http://fontello.com/ for building a custom icon set composited from other sets.