Building my rebooted:bbc.co.uk homepage - #6: Technical, Interaction and Visual design
When people talk about 'design' on the web they very often fall into the trap of only thinking about the visual design of a service or web site. In fact, you can see some of that in some of the entries to the reboot:bbc.co.uk competition, where people have re-coloured and moved around the existing blocks of content on the BBC homepage, without necessarily looking further at the functionality or the type of information on offer.
Absolutely key in this kind of re-design project is the technical design and the interaction design. In fact, in some ways they are more important to the success of a project than the pure visual design. If you've got a nicely funky valid and semantic XHTML/CSS driven site you can experiment with different visual approaches until you strike gold. If you've fundamentally got the design of your technical architecture or your interaction patterns wrong, then no amount of window dressing will make a system perform better.
Technical Design
Here you would investigate the kind of things like how much bandwidth will the new page take to serve? How quickly will the page load and render on different connection speeds? What are the maximum sizes you can allow for the images? Which bits of the page should you allow browsers to cache (like the 'Audio' and 'Video' icons) and which not (like the main promo area)?
For more complicated bits of the page, like how to get the news headlines displayed as quickly as possible, you'd probably want to draw up some workflows and technical architecture diagrams.
Often on projects within the BBC I would put together a "Technical Working Group" to iron out these issues. It would generally include all the technical staff working on the project itself, the BBC's overall technical architects, and key technical representatives from departments all around the BBC. In the case of the homepage it would be important to be talking to technical staff from places like news, sport, weather and travel, whose content is being integrated into the page. It might also include representatives from the companies who do the BBC's hosting and serving (mostly Red Bee Media and Siemens Business Services, formerly BBC Broadcast and BBC Technology respectively). With a geographical spread like that, often the meetings would be done by conference call, and tools like wikis would be used to foster collaboration on the finer details. On a big project like redesigning the BBC's homepage, you would probably need to get a technical sign-off from the head of the BBC's Technical Infrastructure group.
Interaction Design
Interaction design basically covers the areas of the page where the user is expected to "do" something. So, how does the user add bookmarks to 'My Bookmarks'? What happens when they try to change their weather location and the system doesn't recognise their postcode or town name? An interaction designer will often work alongside an information architect to define what kinds of feedback is given to the user when the system goes wrong, and how much information the users need to make the correct choices. As part of their work they would generally look at how other sites achieve these objectives, and try and incorporate the best of those practices into their own solution. With a lot of personalisation on my page design, the ease with which users can add their own details, register, logon, set their location and so forth will be critical to the page being successful and used how I have intended it.
Visual Design
I was being rather unfair earlier when I described visual design as the least important of the three design spheres - in fact for the end user it can be the most important - they want a service that looks nice and welcoming, and the fact that it is easy-to-use and will actually work is kind of taken for granted by them.
If you've ever visited any of my own sites you'll see that that visual design isn't exactly my strong suite - so I'm not really best placed to comment on it. One area though that I think will cause particular problems is that the level of personalisation on my page involves a requirement for a large number of controls - and therefore clutter: "edit this", "add that", "where do you live?", "sign in", "logout" etc. I'd be wanting to see several different sets of ways of sign-posting these visually in a way that freed up space on the page.
I'm not actually going to attempt a final visual design myself - instead I'm going to produce a wireframe that has been a bit "coloured in", which given my level of design talent seems safer :-)
- 09 May 2006 15:28
gallery