I’d not been happy with the previous Timeline homepage for a while. It was an early effort, put together when my conception of where this project was going was rather more vague. Consequently, although it served its purpose, I knew it would have to be redesigned at some point before the project went live. The homepage forms the new visitor’s first impression of the site, and what they see there dictates to a large extent how strong their inclination to sign up will be.
Today, I stopped putting it off; I sat down, looked at the Timeline homepage and made a mental note of everything that was wrong with it:
- The page is too long. The average user with a fairly small monitor has to scroll a lot to gain an impression of what the site’s about, and that’s not good for maintaining interest. It was developed on my 22-inch desktop monitor, and it looks a lot worse on my 13-inch laptop.
- There’s too much white (or grey) space. Whilst some empty space helps the page to breathe, overusing it dilutes the site’s visual impact and actually makes it less usable.
- The page isn’t intelligently arranged. The most important elements of the page – the login boxes and the links to sign up – are at the bottom. This makes the homepage frustrating – perhaps even confusing – to view, particularly for the regular user who wants to access his or her account quickly.
- The slanted ‘timeline’ graphic doesn’t add anything to the page. Not only is it not an accurate visual representation of the site, but it doesn’t really help the user figure out what the site’s for.
- The ‘featured’ images are poor quality. This is a result of upscaling 320×240 thumbnails to 400×300 for use on the homepage.
- The column spacing looks really awkward, as if there’s an invisible man pushing the columns apart
After that, I went through something of an iterative process, gradually refining the homepage with the above points in mind. After hours fiddling around in Photoshop, dozens of CSS tweaks to get the alignment and spacing just right and dozens more to get it looking passable in Internet Explorer, I arrived at something I’m pretty happy with:
The new design addresses the flaws of the previous one:
- It’s wider than it is tall. So’s your monitor, so this makes for a more natural viewing experience. I can now see the entire page without scrolling on my 1280×800 laptop screen.
- It uses the space more intelligently. The header has a darker background color to achieve some separation from the rest of the page, despite there being more content crammed into a smaller space. The featured timeline and site description use the full width of the page, whilst the three-column layout stops them from looking lost.
- The most important stuff – the login and signup options – is right at the top of the page.
- The amateurish timeline graphic is gone, and the featured images are displayed at the correct size rather than being upscaled.
- The spacing is much more consistent.
- It links to this blog
I like it, and I hope you do as well. Next: more viewer improvements. Starting to get pretty enthusiastic about this project again.