Vote for it, you know you want to!
It must be the best solution, mustn’t it, if all these sites use similar techniques?
If we step back for a moment, to examine the user’s needs, we can see two objectives for the average searcher: find something and  make it of this type.
The ‘something’ for which the user is searching is, in their mind, the foremost concern. Everything else is secondary. When searching, a user’s first instinct will almost always be to enter their search terms (and why should it be otherwise?). Everything about a search interface is geared toward this: the keyword input has the most visual weight on the screen — on a typical search index page — and the most prominent position — either near dead-centre or in the head of the page, depending on the type of page.
The accepted solution, happily, cedes to this under all circumstances.
The second objective, then, is the type of results that will satisfy the search. The introduction of this second objective is where user behaviour will begin to deviate: depending on their priorities and personal inclinations, users’ execution of this may take place before, after, or even during the steps to meet the primary objective. Unlike the emphasis placed on the keyword input, the type of results to return should be — and, typically, are — de-emphasised where possible, but be present — and have their presence known — should the user require them (either to confirm their beliefs or to make a change).
The humble radio-button.
So I did.
As noted above, the main components of the form are a list of radio-buttons, a textbox, and a submit button. Of particular note is the way the radio-buttons are scripted and styled, and the structure of the radio-button labels relative to the form’s
<legend>. Further, implementing the search this way requires that the server-side script be able to handle the new field being passed its way appropriately.
<span> to allow styling of the labels in accordance with the design. When the radio-buttons receive focus the ‘selected’ class is moved to the new selection. This activity takes place on focus, mark you, and not click: click events fire on the originating control which, when navigating with the keyboard, will mean the previously selected radio-button.
<legend>in its own life-time
It was brought to my attention that a form’s
<legend> will, by default, be announced before each and every form field by screen readers. To make this as unobtrusive as possible, each radio-button’s
<label> is worded such that it makes the most possible sense when preceded by the legend text. In English, for example, the radio-buttons will be announced as ‘Search… the web’, ‘Search… for images’, and so forth (where ‘Search’ is the form’s
The radio-buttons’ full text, though, would not make sense in a visual context: they should be presented as tabs titled ‘Web’, ‘Images’, and so on. To achieve this, the visually inappropriate portions of the
<label> are wrapped in
<span>s and positioned outside the browser’s viewport — along with the form’s legend and the radio-buttons themselves — such that they may still be accessed by screen readers and the like.
Furthermore, because the radio-buttons are still present in the content of the page, keyboard users may navigate the form fully through the keyboard (using arrow keys to move between items radio-buttons in a collection).
I can by no means take full responsibility for the successful implementation of this concept, though: I’d particularly like to thank Norm!, Mike Davies, Alex Lee (our designer), Tim Huegdon, and Ann McMeekin (of the RNIB) for all their help, advice, and patience (particularly when I got things working and made lots of excited noises at them), and this wouldn’t have ever been a reality on Yahoo! TV for Europe if it hadn’t been for the receptive, responsive attitude of the engineers working on Yahoo! Search for Europe.
Where did the last six months go?
Since then, I’ve managed to get a job at Yahoo! Europe as a web developer, become a regular at Pub Standards, launch a new design for this site (and let it languish, despite my best intentions), and attend a second BarCamp, as well as going to various gigs (to name but a small fraction).
I had thought that I’d experience a quick flurry of activity before things returned to normal. How wrong I was: my definition of normal has been altered to include working with some of the best, brightest, and most influential people I could ever care to work with, having an influence on potentially thousands of people’s browsing experiences, almost 4 hours of commuting every day (most of which is spent on public transport), and a general feeling of awe at everything my life has become in this short period of time.
Everything seems to be happening at an unrelenting pace now: SxSW07 is just around the corner, @media won’t be far behind that, with d.Construct ’07 sure to follow. BarCamps will probably be plentiful this year, too, and I’m going to try to go to Reading again, as well as (hopefully) taking an Outward Bound ‘adventure’. Because of this I’m making loads of new friends and seeing old ones more often, too.
I’m busy as hell, but I couldn’t be happier.
How, exactly, does one write a post that purports to list ‘five things you don’t know about me’?
No matter how it’s written, someone out there will probably already know most–if not all–of the items (hi, Mum!). Should it be written for the person asking the question, in which case it might be a different list to that offered to new friends which, in turn, might be different to that offered to fresh visitors from search engines. Maybe I’m just over-thinking the whole thing.
To make this a little more interesting (for me, at least) I’m going to change the game a little and write in detail about one thing (and one that I often have to explain, at that), along with a shorter list of a further four things.
For seven years or so, I’ve abstained from drinking alcohol.
Yes, you read that correctly: a 24 year-old guy that doesn’t drink. No need to alert the media.
On a friend’s birthday (I believe it was his 18th), all those years ago, I got heinously drunk. A bottle of Bacardi, bottle of Jack Daniels, multiple lagers, and an amount of vodka by 10 o’clock and being unable to recall the rest of the drinks consumed until midnight kind of drunk.
Needless to say, I stumbled back home (which, thankfully, was just around the corner) by about midnight and after attempting to sleep and—being troubled by the fact that my room had, apparently, been relocated to a turntable—decided that being violently sick with my head down the toilet for the next six hours was a smart course of action.
Over the next two days, I came to the conclusion that taking a break from alcohol was a good idea. I never intended this break to last very long–much like anyone with an awful hangover–but I held out for a week or two. The next thing I knew, it was a year later and I was telling this story to new friends at university. 7 years on, and I still don’t drink.
I’m often asked if I miss it, or if I’d consider drinking again. I’ve certainly thought about drinking again, but every time I find myself wondering exactly what I’d gain from it. Who knows: maybe one day I’ll give drinking another try.
I wasn’t always a rabid Apple fan: there was a time that I ridiculed a clamshell-iBook-toting friend for his ‘toy’ computer, with its one-button mouse. It took membership—and ultimately becoming an Admin—at Aqua-Soft to turn me into the Apple-lover I am today.
During this time, I made an iTunes skin for Windows Media Player 9. And then Apple released iTunes for Windows about 2 months later. And then I finally got a Mac of my own. And another. And another (although, technically, that’s a machine owned by Yahoo!).
Rather than passing this on to the usual suspects (who are, incidentally, very suspect—and welcome to take this as passing to them, if they like), I thought I’d try to pass this on to a different bunch:
Since the day it was launched, nascentguruism was forsaken. When I started designing it, I had a limited understanding of design and so faced a massive learning curve. Because of this, most of my efforts went into working out how to translate the concepts and feelings I wanted to convey into a working site, along with understanding how to achieve what I wanted in the tools I was using (Photoshop).
In hindsight, it’s entirely logical that the first version of nascentguruism’s design would turn out to be everything I made it and nothing I wanted it to be: I was learning about design by observing and experimenting, and so would quickly lose focus on the overall design, becoming preoccupied with whatever details I wanted to introduce at that moment in time.
After ten months’ toil, the site launched with a whimper and, because of the shoehorning that had taken place to include all the extra details, I quickly became jaded: the format of the site didn’t appeal to me, and so I was unwilling to write. As time passed, my interest waned.
Shortly after SxSW in March–around June, if memory serves–I was inspired to play with some ideas for a redesign of nascentguruism.
Rather than pressuring myself to continue working solidly until it was ready to launch–as I had with the initial ten-month design–I decided simply to get all my ideas down
on paper before taking time to mull over what I’d come up with. After a while, I’d start anew, creating a design from scratch, building upon–or, in some cases, replacing–what I’d done in the last iteration.
This process continued until mid-October, when I finally felt that the design could go no further without transitioning to markup. Throughout, I refused to do any work–design or markup– unless I was compelled to do so.
I think this relaxed approach to the design and implementation has served me twofold: the design and implementation was less forced, and so the final site has a more relaxed, open feel to it, and this design is something I positively want to work with, to the point that I’m practically itching to post new content to it (and have been for the last month). Further, the iterative, throwaway-prototype approach to designing allowed me to incorporate new ideas effectively, without compromising the design as much as I might before.
One of my primary focuses in this new design was to experiment with typography, using some of the ideas gleaned from reading Robert Bringhurst’s ‘The Elements of Typographic Style’ and working with Rich on Web Typography. I’ve tried to blend more widely used ideas (like working with vertical rhythm using baselines) and more playful ones (like ornamented indentation), and will continue to experiment and integrate ideas put forth in Web Typography.
Some of these experiments are very reliant on using modern CSS techniques, such as generated content and pseudo-elements and, as such, may not display as expected on all browsers (Internet Explorer, I’m looking at you). Further, most of the font-size-related typography has been optimised for WebKit-based browsers on Mac OS X and, as such, there may be sizing issues with other platforms or browsers. Or maybe not. Everything should be usable, at the very least.
I couldn’t have achieved everything I have in this redesign if it weren’t for the help of a two notable individuals:
These two deserve more gratitude than I can express here–or in beer form–thank-you both.
There are, however, others that have supported me throughout the process, who also deserve thanks:
nascentguruism is far from complete–during this redesign, I’ve come up with many, many ideas for future work on the design and implementation. Most importantly, however, I have a renewed excitement for blogging and a few ideas for future posts in mind.
Only time will tell if it lasts, I suppose.