Well, as so often, once I start looking I can see so many things that need fixing!
In the early days, we used ugly pngs as icons, and I got rid of these when we updated the site. But not knowing much about it, and cos it was early days in terms of resolution-independent options, I thought we could just use the triangle and see how it went. For now, I think we can improve things significantly by using a few arrows from Skolar, and a couple of other adjustments. In the future, if we’re using Polymer, we should probably use the material icons:
But for now, let’s see what we can do right away. Skolar has a bunch of arrows and related symbols, here they are:
← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙ ↞ ↟ ↠ ↡ ↰ ↱ ↲ ↳ ↴ ↼ ↽ ↾ ↿ ⇀ ⇁ ⇂ ⇃ ⇄ ⇅ ⇆ ⇇ ⇈ ⇉ ⇊ ⇋ ⇌ ⇍ ⇎ ⇏ ⇐ ⇑ ⇒ ⇓ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⇠ ⇡ ⇢ ⇣ ⇵ ⇽ ⇾ ⇿ ▲ △ ▶ ▷ ▼ ▽ ◀ ◁ ◆ ■ □ ▪ ▫ ▭ ▮ ▯ ▰ ▱ ◇ ◈ ◉ ◊ ○ ◌ ● ◖ ◗
There are a few more arrows in the private use area. Also, the different weights of Skolar have genuine weights for these signs. So if the regular versions are too thin, we can use the bold instead.
Here we use the triangle to indicate “go to details page” (
class="details"). In fact this is a subdirectory, so why not use a suitable arrow for that:
We also use the triangle to indicate “drop-down”. We also do this in the sidebar, and, charmingly, we use it in a different way in almost every place. Let’s follow the material guidelines:
So drop-downs should be indicated with a down-facing triangle, positioned after the text. So here it is correct already, yay!
A more substantial problem is that in each of the drop-down type contexts, we seem, so far as I can tell, to implement it in a different way. But we should probably wait before standardizing this. For the record, the one I like best visually is Lookup Language ▼ where the expanded material floats on top of what was there previously, rather than pushing it down.
Here we have two new uses of the triangle as .note and .bib. The former is for “notes” while the latter is for “bibligraphy”. Let’s use something that captures these more clearly.
I’d suggest using simply “note” for the notes. We can style it up. For the bibliography, how about using an elipsis … It conveys “expand for extra information”, and is low profile, befitting a feature used only occasionally.
One problem with both of these, though, is that for some reason the
is included inside the span, i.e
<div class="tri"> ▶</div> It should be before, so we can style it properly. Also, why is this a div? The simple way to make an inline span: mark it as div, then set it to display:inline.
##Text pages, including sidebar
Let’s go through the sidebar panel by panel.
Lookup Language ▼ is correct. Yay!
For the language change, we have rightwards arrow. How about we use instead a bidirectional arrow, to suggest that we are relating the language pairs:
One issue here, the arrow doesn’t have its own class. Can we make sure that all of these elements are wrapped in a span with an appropriate class, so we can style them?
For Textual Information, do we need anything? Maybe it’s okay as is.
Discuss & Discover should have the dropdown arrow.
Textual Details, or as it is now, Parallels & References should have something that indicates it’s going somewhere else. We used ↳ to indicate going down a level, how about we use the complementary arrow here to indicate “go up a level”:
Languages should use the standard dropdown.
Then we have the next/prev links. Let’s use regular arrows for these. Note that these express the same kind of thing as the “go up a level” and “go down a level” signs, except here it is “go sideways to the next file on the same level.”
← DN 6 DN 8 →
Finally, we can use the same thing for the nex/prev links at the bottom of the page.
For completeness, I should mention the search results page, where we have another dropdown to select the language. This uses the dropdown triangle correctly. However the selector seems to be implemented differently than elsewhere.
If we are going to standardize the dropdowns, why not take the chance to play with polymer?