The Timeline Development Blog

Earlier, I waxed lyrical about the wonderful sidebar implementation which I’d cobbled together to allow the logged-in user to navigate Timeline.

Predictably, last week, I wiped out all the code for it and started again.

As is often the case, continued use of the sidebar had drawn my attention to its shortcomings. The first was that the amount of information it could display was sorely limited. It was adequate for switching between functions – but I began to think about incorporating lists of recently-viewed pages as well as quick links to other useful Timeline pages, and it soon became clear that there was no way to fit all of this information into the vertical format without making for a horribly confusing user experience.

The second problem was the the sidebar provided no visual cues as to which page the user was on when in its contracted state. Nobody is going to know the structure of Timeline as intimately as I do, and I sensed that this absence of navigational aids had the potential to scare off new users.

The biggest problem, though, was that the vertical format just didn’t feel natural. Almost everybody is used to using a horizontal taskbar to switch between programs, whether they use Windows, Mac OS or Linux – where was the benefit in forcing people to adapt to a new navigation paradigm? Furthermore, the sidebar combined with the navigational bar which is fixed at the top of every logged-in Timeline page, and created an effect which looked unbalanced and just awkward. I grew to hate it.

The new taskbar is drastically different.

In its contracted state, the simple design wastes minimal screen space and allows the user to switch easily between Timeline’s basic functions whilst providing a clear indication of which function is active.

Mousing over the taskbar reveals the expanded form, after a short delay. The top part of the extension conveys further information on the user’s current actions; when it’s finished, the lower part will ‘intelligently’ suggest links to Timeline pages and functions based upon the user’s history. I see the new taskbar as a significant step in the development of Timeline from a purely personal project to something suitable for a wider audience.

After some time away from the computer enjoying the summer, I’ve been spending some more time in dark rooms (!) working on the Timeline project. There have been far more developments and changes in the last couple of months than could be discussed in a single post, and thus I’ll begin with the most visible: the latest changes to the homepage.

You may recall that this is where we left off:

This version of the homepage was a great improvement on the initial rendering, in terms of  appearance and usability. The chief remaining flaw was that it didn’t permit a simple method of navigation; the three links at the bottom of the page did their job satisfactorily but left no room for expansion. Knowing from experience that confusing and illogical navigation structures are one of the principal turn-offs when visiting a web page for the first time, I also knew that this alone necessitated a rethink of some elements of the homepage. I was looking for some kind of navigation bar – but how to insert one without crowding the page and compromising the simplicity that has always been a key goal of Timeline?

Here is the Timeline homepage, incarnation three.

The eagle-eyed amongst you will notice plenty of alterations alongside the bottom navigation bar which was the impetus for the changes:

• I’ve worked to make the divisions between the header, the footer and the page content much clearer. Since space is of the essence, the distinction between the black and the grey background serves as a visual trick, allowing me to cram more information onto one ’screenful’ than would otherwise be feasible.
• The canvas background has gone. I always considered it a bit tacky. It’s been replaced by a reasonably bland grey background image with faint swirls on it. Bland is good when you’re trying to draw attention to your content – nevertheless, I suspect that it may be replaced again one day.
• The featured images now have reflections! They’re created by a bit of (some would say unnecessary) JavaScript which I borrowed and adapted a little. Trying out lots of combinations of height and opacity for the reflections provided a perfect outlet for my perfectionist tendencies; I think the resulting effect adds a touch of Apple-like finesse, though there’s always time for me to get bored of it. For now, it’s only 5kb of code which doesn’t seem to cause a slowdown on any popular browsers (my major concern), so it’s staying.
• Finally, the elephant in the room – the appearance of the search function. But that’s for another post – scroll down to find it.

When the idea of Timeline came into my head, a comprehensive and intuitive search function was already central to it. I’d done no work on this aspect of the project before now, partly because there were certain aspects of the site and database structure which had to be set out first, and partly because it was the kind of thing which needed to evolve and be fully-formed in my mind before I started coding it.

Searching, to state the mildly obvious, is how the user of Timeline discovers new stuff. The search function needs to allow the user to discover if people whom he or she knows are on Timeline, which necessitates a sensible way to find members.  It also needs to work well when the user is searching for keywords and expecting to find relevant images and timelines. The search is the portal to all of Timeline’s content; the search is a big part of what keeps people engaged. So it has to be engaging.

The search can be accessed whether you’re logged in or not, both from the front page (what I call the ‘public search’) and from the ‘find timelines’ section once logged in. At the moment, these two methods present the same results; in the future, search results will probably be tailored to a user’s wishes when he or she is logged in. Image data and timeline data are searched, as well as members’ usernames and actual names.

Here is how image results are presented (the timeline and user searches aren’t finished yet):

(Two important things that we’re still missing are pagination and the ability to sort results by name and popularity.  Those are coming soon.)

Like many aspects of the site, developing the search was all about finding a way to present information in a clean and attractive manner. I spent a disproportionate amount of time figuring out how to give the preview images curved edges in a way that worked across all browsers. After that, I set about organising the information on display. The search results use a similar colour scheme to that employed on the home page; specifically, the eye-catching colour which I call ‘Timeline orange’ is used for titles (the most important information), with blue for user names and slightly less important information and grey for auxilary information. The fonts got a lot of attention too. Georgia, the serif font employed for titles, conveys a suitable sense of authority and grandeur; usernames are displayed in the softer and more personable Calibri (reverting to the similar Tahoma when that’s not available.) And all other information is in Tahoma, because it’s readable at small sizes.

We also have coloured highlights when an image is moused over, accomplished through the wonderful JQuery, and view counts, which called for a bit of background work so that Timeline would track this information. And don’t miss the list of popular searches, which is perpetually updated and displayed on the main search page and when a query returns no results. There’s more to come.

If your appetite for August Timeline updates is not yet sated, scroll down for more.