Photo Corners headlinesarchivemikepasini.com
A S C R A P B O O K O F S O L U T I O N S F O R T H E P H O T O G R A P H E R
Enhancing the enjoyment of taking pictures with news that matters, features that entertain and images that delight. Published frequently.
Designing A Site Navigation Solution
25 November 2014
Today we're introducing a bit of a twist on our site navigation options which, we think, need no explanation. We've hidden the fixed menu we introduced a while ago and recently expanded, adding a button to slide it out and another button to display an expanded Search form.
We've put this new aid on all the non-news pages. Headlines, Archive, Bests, Classics Bookshelf, Reviews, Features, Slide Shows, Book Bag, Matinees and Obits.
THE SEARCH FORM
At the same time, we removed the tiny little Search box in the left-hand column. The expanded Search form gives you all the functionality of the Archive page's form on all the other pages.
Sometimes you just have to listen to the creaks and groans to know where to put the oil and grease.
We thought the little Search form was a good idea but we never liked how small it had to be to fit in that narrow column nor how far out of sight it was. We'd thought of moving it to the top but that would have only pushed everything else down.
Sometimes you just have to listen to the creaks and groans to know where to put the oil and grease.
The solution was to overlay the search form on the page so it could be as big as necessary and appear whenever needed in exactly the same spot. A little JavaScript and CSS made that happen.
We first just added a Search link to the fixed menu (at the bottom) with a little magnifying glass icon. But we thought that obscured the function and we didn't like the small icon either.
We needed a persistent button.
HAMBURGER, ANYONE?
We'd become enamored of the hamburger (or list) icon that is often paired with that magnifier icon (and usually some text like ""SECTIONS" or "MENU" and "SEARCH"). They're simple but they give you access to the whole site.
We like them on Adobe's site. And we like them on the N.Y. Times site, too. They work nicely.
We have to admite, we were a bit confused with our top of the page navigation of major pages, our little line of business links under the header of subpages and the fixed menu of sections and, for longer pages, different parts of the pages.
With the hamburger, we could hide the fixed menu (which is nice in that it stays right there on the side as you scroll down) so it wouldn't detract from the hierarchy of pages we'd originally established. And we could remove the duplicate links in the fixed menu.
But we really didn't like any of our implementations of the two icons, with or without text.
THE TEXT
In fact, the text itself was an issue. What were trying to show in the fixed menu? A menu? Not exactly. Sections? Well, not always.
The links in the fixed menu began as a convenient way to access older headline pages. The current headline page covers this and the last month. Then there's a headline page for the previous months in the year and a headline page for each year. They had been at the bottom of the current headline page so they were never visited until we put them on a fixed menu on the side.
Sometimes the linear nature of time isn't the most appropriate format for finding things.
That's why we started our thumbnail parade at the top of the current headline page. And it's a good argument for added a similar parade to the top of the other headline pages.
Hmmmm. (Well, that was quickly implemented.) But back to the text.
You can see we eventually decided "JUMP" was a better clue than "MENU" or "SECTIONS" because it really does present a list of links (sometimes pages, sometimes parts of the current page) to jump to. And we like the positive connotation of "FIND" better than the desperation inherent in "SEARCH."
Spoken, you might say, like a true editor.
ICONS
The only problem was that the pinstripe background isn't friendly to text.
We solved that in the fixed menu with a transparent background that minimized the contrast enough that the shadowed text links are easy enough to read on every device we've displayed them on.
You can see our solution but it may not be evident where it came from. It came from the close icon in the new Search box.
We had, at first, displayed the Search box with a menu item that actually toggled the display. Click to display, click to dismiss. But that was far from obvious. We actually imagined you were, in desperation, just reloading the whole page. So we also imagined ourselves sitting behind you to explain you just click it again to get rid of it.
We needed a close icon. Like every popup ad has. Easy to find, easy to implement in JavaScript and CSS.
So we borrowed the CSS to style the target and just added shadowed text. We like the offset and we like the subdued nature of the two buttons. They're there if you need them but not obtrusive.
The colored border of the fixed menu reminds you it's there, too. And as you scroll the page, these two aids stay right there at your side. Like any faithful companion.
AND SO
So we've retained our main menu items at the top, which really are the places you should visit regularly. And we've retained our business links in the header. And you still have the short list of headlines on the left side of the page.
But now you have full search on the major pages and a list of other places on the site (or the page) to visit in a slide-out menu that's always at your side.
As always, let us know if you see something we didn't so we can fix it.