Over the last couple of days I’ve been busy making some substantial improvements to Timeline’s UI, and laying the groundwork for some more.
The first and most noticeable concerns the sidebar which allows the logged-in user to switch between Timeline’s functions. What I want to achieve with this is twofold:
- provide the means for the user to carry out more than one Timeline task at once, and to switch easily between them. When the user changes between functions, Timeline tries to remember the state of all the functions they’re using, giving the impression of (somewhat rudimentary) multitasking.
- to get out of the way when the user is involved with a task – i.e. not to waste screen space or to provide a distraction.
The previous sidebar was quite good at the first task (considering its stage of development), but not very good at the second. It remained on the screen all of the time, using up quite a lot of horizontal space and drawing attention away from Timeline’s content, especially when user was scrolling through a timeline.
I consider the solution I’ve implemented to be fairly elegant, although there may well still be some bugs (especially, as ever, in Internet Explorer, which required some browser-specific code for this even to work at all.) The sidebar displays as normal whilst the mouse is over it. When the mouse is removed, the sidebar slides outwards until it simply displays the Timeline emblem:
(Don’t take my word for it – have a go. I’m quite proud of the animation.)
The second major change is the start of a push to make Timeline a little more interactive. Previously, removing an image required the loading of a separate page, navigating the user away from his or her timeline and breaking the work flow. Now, images are deleted ‘in-place’ and without navigating away from the current page.
I intend to revise all of the editing functions to work like this, which is a rather more interesting technical challenge than it seems. Essentially the difficulty lies in contacting the server without opening a new page, and in modifying the current page dynamically with the results of the request. This is resolved with some clever JavaScript and results in a much more seamless experience for the user.
On top of this, there are some more minor changes. The timeline in ‘view’ mode now scrolls in response to the mouse wheel; translating a vertical scroll to a horizontal movement is annoyingly awkward to implement. And images in ‘create’ mode are now smaller by default, being enlarged when the user mouses over them.