mozillascience
Designing Badges
We currently have some assets from @akenall help wanted: Designer, Input
Summary from @vazquez
Background
- A scholar can earn a badge by writing a paper where they contribute a specific element portrayed in Badges. So, for example, if a scholar contributes data visualization work to a paper, they will earn the prestigious Data Visualization Badge.
Probem
- Right now, the badges are far too big to accommodate to the layout of the article. A more simplified badge aesthetic is needed (similar to what @akenall showed).
Requirements
- When visiting a paper such as this one, the Abstract needs to show the badge.
- When visiting the author's ORCID page, the Badges need to show next to the papers published.
But we need to design badges that:
- can be displayed scaled down
- can be seen in different 'views'
- all authors and their corresponding badges for a paper
- all papers and corresponding badges for an author
Discussion / inspiration:
@akenall has started some discussion on updating the design to be simpler like the stack overflow badges
Add any comments here! Looking for a contributor who wants to own this design (you don't need to be an actual designer!) -- we're looking to implement these visualizations by the August project call.
Hi @acabunoc I am a little confused by your requirements here, are you trying to view the badges by badge earner as well as by badge evidence?
Also, can you give an example of the context for these badges?
Hey @iamjessklein, yes!
Context:
- On a paper (evidence) page: Example paper- http://www.genomebiology.com/2015/16/1/139
- On the ORCID (author / earner) page: Example ORCID: http://orcid.org/0000-0002-1825-0097
@iamjessklein -
I just spoke to @acabunoc IRL to get a better sense of what is needed. Here's the 411:
Background
- A scholar can earn a badge by writing a paper that contains a specific element portrayed in Badges. So, for example, a paper containing or discussing data visualization will earn the prestigious Data Visualization Badge.
Probem
- Right now, the badges are far too big to accommodate to the layout of the article. A more simplified badge aesthetic is needed (similar to what @akenall showed).
Requirements
- When visiting a paper such as this one, the Abstract needs to show the badge.
- When visiting the author's ORCID page, the Badges need to show next to the papers published.
Amazing @vazquez, thank you! Slight clarification: the badges are awarded to scholars for their work on a paper. If a scholar contributes data visualization work to a paper, they will earn the prestigious Data Visualization Badge.
I like the coloured dots solutions you've put up! We need something that would integrate well with any publisher platform. I think that does the job much better than the more traditional badge.
Hi -- ORCID has been thinking a little about the concept of Person Citations. I've independently (not officially!!!) been playing around a bit with how this might look:
I think in extending this concept of a person citation, it would be interesting to have the role names themselves link to/display the badge somehow. (Maybe a popup, tooltip-style?)
Related to displaying the badges in ORCID, I think this one is a little trickier. ORCID takes a "multi-source" approach to displaying publications on an ORCID Record. For example, a reference to one DOI may appear multiple times, and then are visually grouped in the interface, with the one from a preferred source displaying by default. Right now ORCID doesn't have any concept of something that displays on, say, a DOI for an ORCID record, but isn't tied to a set of publication metadata provided by an ORCID member. In some ways it would be easier for the badges to display in ORCID if the works were pushed into the ORCID record from paper badger. Could use a tech design session to figure this one out. I'll set up a time for us to discuss.
Alternatively you could use a tag cloud approach, where each badge is weighted by the count of badges of each type.
Also it's possible to have an author affiliated to multiple institutions, in some papers we can have up to 30 authors cited. How would you associate the orcid id in each case?
have you folks considered using / extending an existing svg font for these badges? The work of optimizing for small display sizes would already be done for you, and you could enhance visual discriminability with fixed colors for each badge. Some possibilities:
- conceptualization
- funding acquisition
- writing
- data visualization
Wasn’t aware of this. Thanks! Will look into it.
Amye Kenall Associate Publisher Health Sciences and Open Data Biomed Central Part of SPRINGER NATURE Floor 6, 236 Gray's Inn Road London, WC1X 8HB Tel: +44 20 3192 2768 Mobile: +44 07 7652 22039 @AmyeKenallhttps://twitter.com/AmyeKEnall
From: Daniel McCloy [mailto:[email protected]] Sent: 17 May 2016 17:25 To: mozillascience/PaperBadger Cc: Amye Kenall; Mention Subject: Re: [mozillascience/PaperBadger] Designing Badges (#71)
have you folks considered using / extending an existing svg font for these badges? The work of optimizing for small display sizes would already be done for you, and you could enhance visual discriminability with fixed colors for each badge. Some possibilities:
- [conceptualization] https://raw.githubusercontent.com/encharm/Font-Awesome-SVG-PNG/master/black/png/24/lightbulb-o.png
- [funding acquisition] https://raw.githubusercontent.com/encharm/Font-Awesome-SVG-PNG/master/black/png/24/money.png
- [writing] https://raw.githubusercontent.com/encharm/Font-Awesome-SVG-PNG/master/black/png/24/pencil-square-o.png
- [data visualization] https://raw.githubusercontent.com/encharm/Font-Awesome-SVG-PNG/master/black/png/24/bar-chart.png
— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHubhttps://github.com/mozillascience/PaperBadger/issues/71#issuecomment-219773203
Thanks!
Amye Kenall Associate Publisher Health Sciences and Open Data Biomed Central Part of SPRINGER NATURE Floor 6, 236 Gray's Inn Road London, WC1X 8HB Tel: +44 20 3192 2768 Mobile: +44 07 7652 22039 @AmyeKenallhttps://twitter.com/AmyeKEnall
From: Daniel McCloy [mailto:[email protected]] Sent: 17 May 2016 19:15 To: mozillascience/PaperBadger Cc: Amye Kenall; Mention Subject: Re: [mozillascience/PaperBadger] Designing Badges (#71)
@akenallhttps://github.com/akenall here are two good starting places:
- academiconshttps://jpswalsh.github.io/academicons/
- font awesomehttp://fontawesome.io/
— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHubhttps://github.com/mozillascience/PaperBadger/issues/71#issuecomment-219806170
SVG would be more preferable as it scales better on devices and browsers supporting it.
Also can lead to smaller downloads, but not in all cases. And may be faster to render.
Most latest crop of browsers now support SVG; although this wasn't the case in the past.
Would be good to use standard icons if they are well supported and understood by the target audience.
Well worth considering -- are there any other well accepted icons that can support the other badge types, not listed above?
@Alicole I stuck in PNGs here just so everyone can see them at roughly the target size; all the icons are available as SVGs too. Here are some additional ideas:
- conceptualization
- data curation
or 
- formal analysis
(this might be better with some greek letters?) - funding acquisition
- investigation (no existing icon for microscope; could create one)
- methodology
(not wild about this one, maybe box-arrow-box to symbolize a flowchart?) - project administration
(could add a crossed screwdriver) or 
- resources
- software
or 
or 
- supervision
- validation
- data visualization
- writing: initial draft
- writing: review/editing
(could add a comment ballon to the document make it more clearly represent "review") or maybe 
or 
@drammock -- thanks all seems fairly comprehensive; interesting to see that there are PNG equivalents, which is good as this means we can have a fallback for those browsers still not 100% compliant with SVG.
Just a case of deciding on the merit of introducing them now or later. Also how we go about marketing them, after the others have been available for a while. I suppose this is something for a wider discussion with various partners of badge scheme.
Here are drafts of a few of the missing or sub-optimal icons in a gist. They are created to be compatible with FontAwesome insofar as they are created with the same height/width/viewbox and are fairly visually consistent.
This sounds great in principle. However I'm always wary of all-inclusive solutions, especially as it's important to be mindful that in the process we don't trip up over intellectual property issues.
As I've noticed one of the fonts have glyphs for Mendeley and Google Scholar, as well as doi and others.
Sometimes a more measured minimalist approach is better -- following less is more.
So that we only include what is needed here for the issue in question, ensuring all glyphs comply with distributed licensing models that are intellectual property free. Creative Commons come to mind.
@Alicole I'm not sure I understand the objections. Sure, FontAwesome and Academicons contain some official logos, but we don't have to use them for the badges (why would we?). Regarding the license issues, did you look at the license?
Font Awesome is fully open source and is GPL friendly. You can use it for commercial projects, open source projects, or really just about whatever you want.
If your mention of "minimalist approach" refers to file size, there are tools for subsetting Font Awesome (and adding in your own custom glyphs) so that load time would be very minimal.
@drammock -- that's fine in principle, but with compliance laws abound, it's important to be careful when approaching anything purporting to be open source.
Moreover why do we always approach everything through dev eyes? -- minimalist in this context, simply means to keep the contents to the bare minimum; just concentrating on what matters to the project or issue in question, without broadening the scope beyond of what is required.
While I do add font awesome to most of my projects (really liking this work, @drammock!), since this is a widget we load onto external sites, we should probably be more minimal than usual. Thanks for the reminder @Alicole!
I would actually prefer svg for our badges (for some of the excellent points you make @drammock), but I don't think that the whole font-awesome library is necessary. On some other mozilla projects we make a custom lightweight font for specialized icons -- Can we strip down font-awesome for just the badges?
@acabunoc absolutely. Two tools I've used for subsetting Font Awesome down to just the glyphs I want are fontello and icomoon. Both allow adding your own custom icons into the mix.
@acabunoc I've finally gotten around to a complete draft of my proposed icon set (a subset of 9 fontawesome icons plus 5 custom ones). Here is a demo page and here are the fontello-generated fonts.
This is amazing @drammock! thank you! @josmas any thoughts on migration to these new icons?
Very nice @drammock !
Is the idea to export them as PNG and use them instead of the current images?
@jos the long-term idea is to have this as a webfont, that publisher websites can add to the pageload, and the icons would go in similar to what @acabunoc drew in the lovely colored dots mockup. Specifying colors in the CSS (so that, e.g., the funding icon was always green) could also aid visual differentiation.
@drammock -- nice set -- pretty succinct too -- good work.
Should be a massive improvement to existing images -- just need to ensure glyph is self-explanatory.
Have these been approved by other project partners?
@Alicole this is the only place I've posted it, so other project partners will only have seen it if they saw it here.
@Alicole regarding self-explanatory, I'm happy to hear opinions about which ones need improvement.
@drammock -- have looked at latest version of font awesome and cannot see any other glyphs that might be more appropriate.
So unless any other person objects, it should be OK to go with your selections.
Just a thought: as some publishers might not want to go with these yet, is there any way to provide an option to select the images (possibly as default) or new glyphs instead.
Might also enable some kind of fallback if the font fails to load.