Story-driven Design – making a UI for demonstrations

This article was originally published on the Nominet blog.

“Show, don’t tell” is Rule One of good storytelling. Never tell your audience “the hero is an emotionally-fragile badass” when you can show them your hero despatching evil henchmen during a breakdown over parental abandonment. If a picture is worth a thousand words, showing great software is worth a thousand Powerpoints telling your audience how great it is.

This is particularly relevant to R&D departments like us. Early-stage projects tend to be based in new markets, or on new technology, or on new ideas. Technical work often precedes a solid commercial case, and is used to build that commercial case. This, inevitably, involves convincing people of the viability of our ideas, both inside and outside our company. Showing these ideas with polished software is far more effective than telling people about them.

The User eXperience (UX) of the demo audience is different from the UX of an ordinary user, and so demonstration-ware UI’s requires a distinct mindset for the UX/UI designer; here’s a few things we’ve learnt about that mindset:

1. Be a storyteller

You have a story to tell an audience about your amazing initiative. Ideally you’ll write the story first, and then write software as the means to tell this story. More likely your software stack already exists, and now you need a UI tailored to tell a story about it. Either way, your story dictates how you design your demonstration-ware.

2. Be comforting

“Once upon a time” starts the most fanciful of stories with a note of reassurance – we know everything will turn out OK, because we’re starting in a familiar and safe place. So too with UIs. However fanciful your ideas, begin with an underlying concept which is familiar to every member of your audience, and they won’t be teleported into a dangerous and unfamiliar world. On this comforting hook you can then hang your ideas, and maybe your audience will live happily ever after.

3. Be impressive

Real things convince audiences better than mockups. Our work often involves data visualisation; showing hard-coded real data is OK, but live-demoing up-to-the-minute data from a working stack is best, gives you instant credibility, and proves you aren’t cheating. Attractive visual design is also a must. (A datavis built on fake data is doomed, don’t even go there.)

4. Be simple

The real world has annoying complications and edge-cases. If the solutions would get in the way of your story, ignore the problems instead. Rainbows-and-unicorns engineering is a terrible idea for production software, but if a feature won’t demonstrate your ideas, don’t include it; practicalities be damned.

5. Be credible

Some of your audience will be industry experts. They will spot subtle issues which a lay audience won’t. If your UI can show that you’ve thought about those issues, you look convincing; if not, they’ve just dismissed your naive project. It isn’t always obvious how to balance this against no. 4.

6. Be honest

Overcoming difficulty is the essence of a good story. It’s OK to show you haven’t solved all your problems. Nobody has – and nobody will believe you’re Practically Perfect In Every Way. A little honesty, paradoxically, makes your message more positive, because people don’t need to wonder what you’re hiding.

7. Be spacious

The script of Hamlet doesn’t prescribe every nuance in gesture or vocal delivery – it sets out the words, and leaves the cast and director space to interpret. Good demonstration-ware allows demonstrators that same space to tailor their message to a specific audience, and to freewheel in response to unanticipated questions.

8. Be iterative

Good stories aren’t written, they are re-written. Demos involve audience participation, and it won’t take many to know what conversation it stimulates from the audience, and what questions it doesn’t address. Prune away the plot-lines which aren’t flourishing, and add new ones to support your audiences’ contributions.

9. Be there

Novelists can’t see their readers being shocked by a plot twist – but playwrights can see their audience. As UI developers we are usually so isolated from our users that we need Usability Testing to share their user experiences. Demo-ware is different; we can see our users, we can sit with them, we can feel the story as they do, we can experience the story we are telling. This is enormously rewarding.

The End.

Epilogue: One practical tip – projectors in unfamiliar offices bring a host of unwelcome surprises. Responsive Web Design protects you against odd screen sizes. Bold colour schemes prevent your beautiful low-contrast design being washed out in a bright room. Ask me how I know…