Form Follows Function, But How Far Behind?


I go into this blog-post blind, but I am conscious of two things: firstly that I have a question, but no conclusion; secondly, I’m haunted by an image of neatly aligned post-it notes, stuck on a whiteboard.

The Question

Does the designer need to be involved in a development project from conception to sign off, or should they be roped in once all development work is done?

That Image

This picture is taken from the presentation How We Make Websites by Matthew Wood and Michael Smethurst of the BBC, given at the Institutional Web Management Workshop 2009. I remembered the image as a page layout, and I imagined the different coloured notes to be some kind of attention mapping.

OK, I got it wrong as it turns out, the image is from the “Design your URI schema” slide. In my head it is linked with Matthew saying, and this could possibly be a misquotation “We don’t do any mock-ups in Photoshop” which is more likely to have come during the “Apply decor CSS” section.

What am I on about?

The workflow outlined in the presentation is dealing with masses of data, so I can understand why the web designer is being brought in late in the process.

We do however seem to have two concepts of design, and two stages of design: firstly design as a process of organising and structuring information; secondly design as a process of decoration. In essence, one is functional, the other is frivolous.

I agree that form should follow function; the site needs to work, but I think some degree of designed visualisation throughout the process can improve the final outcome.

Grids, Wire-framing, and Attention Mapping

Loads has be written about these so I don’t think I should write an overview, but I think they really help set the agenda for what you want an application to do. I think they can help a designer communicate ideas with a developer, and the developer can feedback whether or not something is workable…

Some Examples

I designed a homepage for E42, Edge Hill’s magazine and mocked it up in HTML and CSS. I figured it was a simple job for the developer, so I gave to him and said “Make it work!”. Presenting the stories in two columns turned out to be a nightmare, something to do with odd and even numbers of stories, and closing div tags. Anyway a bit of communication and a simple wireframe mock-up could have saved an afternoons work.

Conversely our main events page was created by the development team: it functions perfectly, but has no visual punch. If a monotone wireframe had been used, the focus could have been drawn quicker to the latest event; and if some attention mapping was done, you wouldn’t have to scroll down to find the button to the Events Timeline!

One Thing about Wire-framing

Wire-framing is great in certain contexts, getting the balance and composition of a static page right, early in the workflow, increases consideration for the end user throughout the process.

With applications like GO, where the end user can add and remove their own content, they are also creating their own page composition: In this context it is worth concentrating on the individual components.

By using Photoshop layers you can compare how the components sit next to one another, and see if you are achieving harmony or just making noise.

The Accidental

Experience has taught me the importance of planning up front: however nothing is conceived and visible in an instant. Just about every project hits a lull, where things look OK, but there is a lack of balance, or something just isn’t standing out the way it should do.

This is where a happy accident often occurs, usually by hiding layers in Photoshop the right juxtaposition of text, imagery and colour can miraculously happen, and everything falls into place.

This can’t be built in as part of your core plan, but by involving a designer throughout, little twists to the plot can happen, and you could end up with a more effective website.

To Conclude

Well the answer to the original question is no: let’s face it if something works it works; but people are becoming more conscious of the visual appearance of applications and how the intuitiveness of a layout gives them confidence as a user; also there is a psychological element that if something looks good it probably works better too.

Obviously there are other aesthetic questions: why do so many interfaces resemble a Mac operating system, or the dashboard of an Audi; but this is beside the point.

Belated IWMW 2009 wrap up

Once again I’ve broken my golden rule of blogging – “never leave a post in draft for more than 48 hours” – and so I’ve had to prune a few bits that I’d intended to write about.  Some of these may – or more likely may not – be covered at a later date.

I’m writing this sat on a plane to Chicago at the start of my holiday – driving across America from San Francisco to New York.  But I’m not here to gloat this time!  For the last week I’ve been at the University of Essex in Colchester for the Institutional Web Management Workshop – an annual conference for people involved in the web in Higher Education.  This was my third IWMW, following on from great events in Aberdeen and York.

This year I’d been asked by the conference chairs – Marieke Guy and Brian Kelly – to be part of the “organising team”.  I’m still not entirely sure what this involved but I basically gave my opinions on various aspects of how the workshop runs.  I was also asked to chair the Thursday morning session which seemed easy enough!

A few changes were made this year to the structure of the sessions.  Following the introduction of “BarCamps” last year, these were expanded to three 30 minute sessions, replacing the discussion group (which never really worked for me).  The Wednesday afternoon was split into front- and back-end “tracks”.  While one track had a parallel workshop, the other was running a couple of plenary talks.  The idea of this structure was to broaden the event to provide more technical and marketing/governance content to those that are interested.  Additionally, there was an attempt to “amplify” the event through use of video streaming, a blog and live Twitter updates – I’ll discuss that some more later.

Parallel Session: Mashups Round the Edges – Tony Hirst and Mike Ellis

Mike Ellis from Eduserv and Tony Hirst from the Open University presented an introduction to mashups session.  Anyone who follows Tony’s blog, OUseful will know that his work on mashing up various data sources can only be described as prolific.  He’s been doing stuff in the HE sector for a while including a page showing how autodiscoverable RSS feeds on HEI websites.  Released at last year’s IWMW, the number of sites with at least one feed has now increased to an underwhelming 33%.

Mike’s also been spreading the word recently, promoting linked data.  Check out the slides from one of his recent talks to get an idea of some of the things he’s barking on about 😉

Mashups are one of those things that I always intend to do more with especially when Tony Hirst makes it look so easy!  I’m not going to write any more now but I’ll try to post some examples of what you can do with the data that we make available.

Making your killer applications… killer! – Paul Boag

Paul Boag - Making your killer applications... killerA few weeks ago, Paul Boag’s slides for this plenary came up in my Google Reader feed of contacts’ presentations.  I had a quick flick through, spotted a screenshot of one of Edge Hill’s course pages, and started to worry!  As is the fashion with presentations these days, Paul’s slides contain very little text leaving me to think about all the possible faults he could be picking in our site.  Fortunately he was quite positive.

I completely agree with him that the stuff we have in the online prospectus doesn’t go far enough in terms of engagement – there is much more we can do.  I hope some of this will happen through the new department and faculty websites.  These will provide pages where we can give a richer experience of what it’s like to study a particular subject, leaving course pages to describe the detail.

The main thrust of Paul’s presentation was that online systems – and course finders in particular – should become more like desktop applications.  Using techniques such as Hijax (a method where a JavaScript Ajax call intercepts a regular link to remove page refresh while maintaining accessibility), web applications can provide detail without complexity.

Parallel Session: Scrum – Andrew Male

Demonstrating Scrum techniques using LEGOAndy Male from University of Bath Web Services ran a workshop in the back-end track about using Scrum techniques in a development team.  I’ve spoken to several people from Bath about scrum before but haven’t had the time to invest in working through how it works.  Andy’s session  gave a very useful introduction to the terminology used and then went hands-on using an accelerated scrum cycle to build a LEGO house.  It took our team a couple of cycles to get good at estimating workloads but after that we were knocking out tractor sheds, flowerbeds and lakes left, right and centre!

Seeing scrum in action has motivated me to try the technique at Edge Hill.  With a smaller development team, it may not work for all our projects, but I can see it working really well for certain things.

How the BBC make websites – Michael Smethurst and Matthew Wood

Everybody knows the BBC makes good websites.  Some may point to the amount of money Auntie receives through the licence fee to explain this but just throwing money at a problem doesn’t make things perfect.  I’m sure that every web developer in the country has at some point cited the BBC as a reason for doing something.  The day they introduced their first pages designed for 1024 pixel screens I rejoiced as it meant we could finally start thinking about developing fixed with sites that looked good at higher resolutions.

There’s lots I’d like to know more about at the BBC – the development of iPlayer, how they do mobile websites, their decision to write their own JavaScript library – but one of the best new developments at the BBC for many years is /programmes and Michael and Matthew were at IWMW to talk about exactly that.  If you’ve not seen it before, go and have a look around.  At first glance it might not look like much – it’s just a schedules website similar to the ones that have been around for years – but closer inspection reveals something much bigger.

In /programmes, the BBC Audio and Music team have created something capable of scaling to record every TV and radio programme ever broadcast by the BBC.  The plenary talk was about “designing and building data driven dynamic web applications the one web, domain driven, RESTful, open, linked data way”.  Bit of a mouthful!  What I took this to mean was a real interest in the data that they wish to publish well before they look at designs.  I suspect a few people in the audience were shocked at their opposition to “PhotoShop mockups” but we’ve sometimes had problems with sites when we’ve designed first, coded second resulting in spaghetti PHP.

I blogged about the BBC’s beautiful URLs last year and since then they’ve implemented the functionality promised and much more.  Hackable URLs mean websites work for their users, not forcing users to to work to the website.

Probably the thing that stuck out most for me was their approach isn’t to build content management systems, but to create systems to manage data.  You’ll hear me talking about this again.

The Mike and Mike Show – Mike Ellis and Mike Nolan

I mentioned earlier that I’d been asked by Brian and Marieke to chair the Thursday pre-coffee session.  I perhaps didn’t fully understand that this also involved co-presenting the 45 minute session following the chaps from the Beeb.  The schedule had “Developers Lounge Show and Tell” pencilled in for the slot but the outputs from the developers lounge were – how can I put it – limited!  A quick chat with Mike Ellis over a beer at the drinks reception led to a rough plan – we’d talk about some stuff and it’d all be fine.

Mike went for the Just In Time approach to preparing slides and delivered a great talk about becoming more than a day coder.  I wholeheartedly agree with this – in the IT industry, and for web professionals in particular, it’s vital to stay current and engaging with the geek community or attending BarCamps or hacking on your own projects in the evening is a great way to do that.  I approached my 10-ish minutes like a teacher at the end of term and played a couple of videos.  We finished up with debate answering important questions such as “are design agencies a waste of money?” (Paul Boag seemed to think so!) and “is Web 2.0 ‘where it’s at’?”

I’ll let others be the judge of how the session went, but I was glad when it was over!

Conclusions

During his wrap-up session, Brian Kelly mooted the idea of an Institutional Web Management Community – a way for Higher Education web people to continue the conversations that go on at IWMW.  Like the JISCmail lists, but better.

After last year’s IWMW I asked why so few web teams have a blog.  Twelve months on and what’s the situation now?  It appears a couple more have popped up; I’ve heard there are others but limited to internal viewers but should we do more?  Brian suggested an aggregator similar to the predominantly US-based BlogHighEd.org and while this may provide some focus it’s not the whole answer.  Clearly the US has many more colleges so we’ll never match them in number of active blogs but it could form part of the IWMC.  What needs to be done for this to happen?  Maybe in the spirit of mashups, all we need is a Google Spreadsheet and a bit of Yahoo! Pipes magic?

I saw one comment on the Twitter stream along the lines of “this year seemed very developer-focused – where was all the discussion about governance?”  I was following the backend track so it was likely to be more technical than previous years, but is this a bad thing?  If we get too bogged down in policies and strategies then we run the real risk of failing to innovate.

Crowdsourced holiday plans

I’m looking for help.  No, not that sort of help… or that sort… I’d like you, dear readers, to help plan my holiday.  While this might sound entirely selfish I will be using it as an experiment in crowdsourcing:

delegating a task to a large diffuse group, usually without monetary compensation

In this case definitely without monetary compensation!

Here’s the details.  My brother and I fly out to San Francisco at the end of July and have 18 days to travel across the country to New York via lots of hopefully interesting places.  There’s more details over on my personal blog [Edge Hill University is not responsible for the content of external websites!] but I’ll repeat the key bit here and explain how I’m hoping it will work.

Here’s the initial route we came up with:

San Francisco, CA to Laguardia Airport - Google Maps

So: San Francisco, CA; Los Angeles, CA; Las Vegas, NV; Grand Canyon, AZ; Denver, CO; Chicago, IL; Toronto, ON; Boston, MA; New York, NY.

If you’ve been to any of these places, or have heard of good things to see and do, let us know in one of the following ways:

How is this different to the usual way of planning holidays?  You’ll normally ask friends and family who’ve been before for suggestions and things to do and places to visit and my crowdsourcing plan is indeed very similar.  The difference is twofold.

Firstly the range of people I hope to reach out to for ideas is far greater.  Even before I made any real effort to spread the message I had people responding on Twitter with suggestions.  Some of them I’m never met in person but they’re part of my extended personal or professional “network”.

Secondly, by engaging people with the process of planning, I hope to get more people interested in what we’re doing and hence get more and better suggestions with different people’s ideas building on each other.

I’m not going to spam this blog with my holiday plans any more, but I might blog about some of my observations about the crowdsourcing process.  If it all goes well then I may even use the experience as the basis for a BarCamp session at the Institutional Web Management Workshop immediately before I fly out!

>