Archive for the ‘Good Design’ Category

h1

Wireframe or Interactive Prototype?

March 6, 2010

We often talk about wireframe prototyping and rich, interactive prototyping, which are both powerful techniques for getting conceptual designs into a form that can be explored and expanded.

Where to actually use either approach, though, is something that would benefit from covering off here; a recent email from a reader reminded me that I’d promised to give some tips a while back and so, without further ado, here we go…

Wireframes

Leaving sketches and paper-prototypes to one side, Wireframe prototypes are the quickest way to explore a visual concept.

Wireframe teddy bear

Wireframes are a little bit like the plans for a house; they represent the outlines without getting hung up on the actual implementation.  It’s about deciding on the layout of a floor, if you will, without getting concerned with the colour of the carpet.

By limiting ourselves to essentially static designs, we have to gloss over a lot of the implementation detail.  We won’t attempt to model how a dynamic panel works, or the validation on an order form.  We will, however, be able to quickly create visual representations of designs for forms and pages with a minimum of fuss.  We’ll be able to do it quickly, and because our tools don’t attempt to let us do anything particularly complicated (such as navigating between wireframe ‘pages’), we won’t get distracted as much and can focus on our designs.

Wireframes, then, are ideal for the earlier stages of requirements prototyping, when there are layouts and ‘broad-stroke’ design choices to be explored.

Wireframes are suitable for:

  1. Deciding on what things should be included in a page;
  2. Investigating where things should be placed on a page;
  3. Creating low-fidelity mock-ups to help build the ’skeleton’ of an application without investing too much time;
  4. Comparing and contrasting different layouts;

…and so forth.

What Wireframing doesn’t do so well is allow modelling of paths through a system, or interaction, or the finer detail of design.

Interactive (Rich) Prototyping

Rich prototypes are more commonly used once the basic decisions about a design have been made.  In other words, by the time we switch to rich prototyping, we generally know how many pages, and roughly what will be on each page.  We may not know how the various parts of a page will work, nor how individual pages will inter-relate with other pages, but the basic shape of a design is there.

Prototype car of the future

The move to rich prototyping is borne of a need to explore the specific implementation of designs.  In other words, modelling how functionality works, rather than simply glossing over such detail.  A good example for a rich prototype would be building a tabbed dialog so that clicks on tabs change the content, showing the tab state change and effectively simulating a real tabbed dialog.

Rich prototyping takes a proportionately longer time to do than Wireframe prototype development, due to the need to provide additional detail, interaction with forms, navigation and even simulated data.  Rich prototyping also varies in its complexity – it’s possible to create incredibly rich and accurate simulations of key pages, whilst building lower-fidelity versions of less important pages.  This allows the designer to prioritise her efforts to ensure that maximum value is extracted from the creation of prototypes with regard to ironing out any design gremlins.

Rich prototypes are suitable for:

1) Exploring the finer design details once the basic shape is in place;
2) Providing a realistic ‘finished system’ experience to allow users to get a chance to try out the complexities of a design ahead of the development phase;
3) Really ‘getting inside’ a design of key pages to ensure that a design really does work.

The drawback of rich prototyping is generally in the time it takes to do, and the need to use (often expensive) software.

A combined approach

The purpose of this article was to give a few reasons why a designer might choose a wireframe or a rich prototype approach.  However, the best approach is generally to mix and match as suits the needs of the project.

Crazy prototype gadget

For instance, work with the business to mould the basic shape of a system using wireframing techniques, comparing alternative layouts or page compositions, without worrying too much about how it looks and the finer detail of how each page will work.  Once the major layout and composition detail is stable, select parts of the design which might be either fundamentally important to the success of a design (e.g. a registration process) or involve a slightly unusual layout or functionality.  These are the things that can then be modelled in a rich prototype, and examined in more detail – perhaps by using them as the basis for user feedback sessions.

Whichever method you use, be assured that just by adopting requirements prototyping techniques into your project, you are dramatically increasing your project’s chances of success!

h1

Guided demos…

February 27, 2010

Effective software design isn’t just about designing a thing and then turning that design loose unto the world; it’s also about communicating that design to the people that matter and ensuring that they understand what your design is about, why it is the right approach and what problems it avoids or solves.

When we create a software prototype, we have to make many design decisions of varying importance.  The prototype itself might be demonstrated to various audiences and so a little guidance is worthwhile.

Holding the prototype cardOne tactic which is worth covering is to understand your audience and how they will perceive your prototype.  A technical audience will doubtless look at your prototype in an entirely different way to a business audience, which in turn will probably look for different things than would an audience of end-users.  The key is to tailor your approach to demonstrating your prototype so that:

1) It uses language and terminology that the audience understands;
2) It respects the motivation of that audience – in other words, what they want to get out of the demonstration, and
3) It prompts for any specific feedback that you, as the prototype designer, wish to solicit from that audience so as to feed back into the design.

The very best approach is a personal demonstration, particularly a one-to-one hands-on tour.  Letting a user have a play with a rich prototype is an incredibly engaging and fruitful technique, which also gives you the opportunity to watch how that user explores the design.  You might be very surprised by the varying way that different users interact with your design.  If you spot any confusion or hesitation in their use of your design, it could be a strong indicator of a problem which you can then fix.

Keeping the audience awake

However, it’s not always possible or even desirable to do a personal demonstration.  Sometimes it’s not even feasible to let users actually use your prototype at all – either for technical or business sensitivity reasons.

In these cases, one powerful method that has emerged in recent years is the use of screen-casting technology, so that a prototype can be demonstrated and a recording of the screen made (along with an audio voice track).  These can then be replayed by any interested party.

The most important thing after all this is said and done is to ensure that you are in regular contact with your end users, stakeholders and anyone who needs to be involved.  Prototyping is all about getting feedback and refining designs based on that feedback, so however you want to do it, getting your audience looking at your designs is one of the cornerstones of effective requirements prototyping.

(I’d like to recommend a very useful tool called iShowU HD Pro, which is a very low cost solution for screen-casting.  I’ll review this at the end of March, but would strongly recommend anyone who would like to try screen-casting to give it a try.)

h1

The iPad As Quorn

January 28, 2010

Yesterday, Apple announced their long-rumoured and much speculated-upon iPad.  The world, it would seem, waited with bated breath for confirmation of the “Jesus Tablet“.

What we got was a competent looking, stylish device that many have already deemed a disappointment and doomed to failure.  I wanted to try to down-play the physical iPad somewhat and think about its place in the society of the (very) near future.

The key to the iPad is to think of it as one would Quorn.

The iPad as Quorn

If you don’t know Quorn, let me elaborate: Quorn is a mycoprotein-based food-stuff made from eligible fungus and high in protein.  Doesn’t sound too tasty, no?  But wait, there’s more.  It is healthy and forms the basis for an entire industry of vegan-compatible meals.  Everything from sausages to meatballs to scotch eggs, minced beef and chicken fillets.  Except they’re not.  Quorn is most commonly regarded as a substitute for these non-vegan/vegetarian foods, and favoured, shaped and marketed as such.

However, as someone familiar with Quorn, I’ve personally found that when you treat it as a meat substitute, it is often found wanting.  I’m not vegetarian – I do enjoy the occasional piece of chicken or beef, and I know what they taste like.  I know the texture, I know the mouth-feel, I know the taste.  When I eat a Quorn ’substitute’ for any of these, I am only too aware of the differences.

My success with Quorn has been to treat it as its own category of food.  Work with its characteristic flavours and texture – don’t fight against them to make them into what they’re not.  If you do this, you end up appreciating Quorn for being its own thing; a versatile and healthy alternative, not a substitute.

So, thanks for bearing with me whilst I’ve seemingly lost the plot.  There is a point to this, and I’m getting there.  We were talking about the iPad and I was trying to give it a fair hearing.

I think the iPad should be treated in the same way – not as a substitute for anything, but more as a new device – and it should be thought of simply as a piece of a larger system, rather than as a device unto itself.  This is where it’s connectedness is key.  The iPad v1.0, then, is simply the first generation conduit into a wider ecosystem of premium content.  iTunes for the publishing industry, if you will.

Something which finally facilitates a workable model for book and magazine publishers to really exploit the possibility of paid content.  Sure, Amazon has its Kindle and a pedigree in online publishing retail (not to mention the beginnings of an e-book empire) but this is limited by the Kindle reader itself.  A fine device, it sadly falls short of providing an interactive, ‘added value’ reading experience – a void which Apple is keen to fill.

How Apple will achieve this will be down to its clout, established and new business agreements and the fact that it has made a (huge) success of doing the same within the music industry, perhaps even saving said industry along the way.  The traditional publishing ecosystem will be looking to Apple as some sort of savior, a means to finally offsetting the decline of conventional publishing with a new emergent marketplace.

Perhaps nobody else can do this – who knows?

So, whilst the masses may quibble about little things such as the size of the device, or the lack of this or that, the key here is how this ‘first attempt’ device will place the final link in the chain of a truly viable premium content publishing model.  I believe the initial iPads are largely irrelevant in the grand scheme, much as were the original iPods.

The next few months will be interesting times!

h1

The Tragedy of Software Development

December 18, 2009

Did you know that less than a third of all software projects are delivered successfully?  By that, I mean on time, within budget and meeting the requirements of the users?  It’s not a great statistic at all.  As an industry we ought to be somewhat ashamed by this. 

The really sad thing about it, however, is the extent to which the remaining two thirds – those projects which fail - might have been avoided.  It’s pretty clear to see that a significant proportion of these failing projects fail for the same reasons, time after time:

  • Inadequate Requirements;
  • Poor Estimation;
  • Low Stakeholder Engagement.

Of course, within each category the usual suspects crop up: lack of understanding of the context of a system, poor communication, scope creep, lack of organisation, corporate bureaucracy, and so on and so forth.  All of these things are common to almost any software project, so an outsider would be forgiven for wondering just why we don’t learn from our mistakes and do something smart to help reduce their impact.

That smart thing, of course, is the process of Requirements Prototyping.  Which is, as you will probably know by now if you follow this blog, the process of creating interactive models of designs and using them to solicit constructive feedback from business stakeholders, users and basically anyone who needs to have a say in the outcome of a project.  Sure, there’s more to it than that, but in essence it is not overly complicated and the benefits in operating this way outweigh the additional costs – significantly, in the case of larger projects.

So, it’s a real tragedy that doing this smart thing is still so rare in modern software developments.  Many companies might toy with the idea of building a prototyping in a half-hearted way, getting too bogged down in the stylistics without really using it as a powerful medium for evaluating designs, facilitating change and clarifying requirements.  Like driving a sports car in a traffic jam, it’s a waste of the potential and a real shame.  To get the real benefit – to get out of first gear, if you will – is to use a software prototype as a living, breathing specification and actively evaluate and refine it, involving all stakeholders.

If you do this, you will certainly increase your chances of finding yourself in that 1/3 of projects which are delivered successfully. 

To pass up the opportunity would be a real tragedy indeed.

h1

Design Feedback (part 1)

December 4, 2009

In Requirements Prototyping, when a designer creates an initial prototype design for a customer, it becomes the starting point for a cycle of evaluations and feedback sessions.  These sessions can (and should) involve both the users who will work with the final system, and project stakeholders.  Though not necessarily at the same time.

What I’d like to touch on is this little dance of ‘build a design:evaluate’ – in many ways it’s one of the most fundamental cogs in the wholeprocess of requirements prototyping-led software projects.  We need to get it right and understand it so that it delivers real value.

In an ideal world of infinite resources and time, we would repeat this little dance as often as it takes until we had the perfect design.

Picture of mad dancing

However, this utopian world just doesn’t exist so we need to consider how to organise our evaluations so that we can get as much out of them as possible.  We need to think about the actual organisatinal cost of getting people together for feedback sessions, and make sure that we don’t just include everyone for the sake of it.

Jakob Nielsen has suggested that five is an optimal number for testing a design.  His arguments are that the majority of usability concerns are identified by the first few participants, and thereafter most new participants tend to repeat observations with the odd exception.  His suggestion is that, rather than blow the entire budget in getting everybody to test a design in one phase, it is better to have a number of smaller test phases and an iterative refinement of that design between them.  This is precisely what we should be doing when running feedback sessions with users.

Image of feedback survey and pencil

What’s different about feedback sessions as opposed to Nielsen’s usability testing is the fact that feedback sessions are generally:

  • Collaborative: we’re not looking for individual isolated reports, but engaging discussion about the general design;
  • Objective-led: we’re not specifically testing the usability of a design, rather its suitability to meet the objectives set out at the outset;
  • Cross-disciplinary: not restricted of any one type of person, feedback sessions are most usually composed of a cross-section of interested parties, including users and business stakeholders.

The objective is different as well – usability being, well, about how usable a design is, as compared to general feedback which aims to help steer and shape the direction of an ongoing design effort.  Different beasts.

That said, restricting any feedback group to a smaller number of participants helps with focus and coordination, and it’s also much easier to find a time to get everyone together and a place to meet when the group is a fraction of the size.

So, a recommendation here is to keep the numbers low – perhaps with a representative from each section of the project: sponsor, business domain expert, designer, manager, user.  Ensure that everyone actually understands what it’s all about and is willing to make an effort to be there; there’s absolutely no point in forcing someone to get involved in this process against their wishes.

Each feedback session should set out with the stated objectives and try to assess the latest design proposal or prototype against those objectives.

Previous efforts should be used as yardsticks to gauge progress and to ensure that things don’t end up moving away from what’s required.  Nominate a chair for these sessions, someone who will be responsible for maintaining control and ensuring that the session is focused and organised.

Image portraying clarity and tranquility

What we need to get out of each session is a clear picture of how well the latest design meets the objectives, and whether further refinement is required.  It’s about proving the suitability of a design from different perspectives.  It’s also a good progress indicator, something which can be fed back into the project plan.

The next thing is to try to ensure that these feedback sessions are reasonably regular – say, once every other day or once a week – whatever works for the project.  Of course, how often depends on how much design change is going on, and it’s reasonable to expect the amount of that change to decrease as the design firms up.

In the next instalment we’ll look at what constitutes a good feedback session, how best to organise it, what outputs to expect from it and how to feed those into the next iteration and into a project plan.

h1

Individual versus Conforming design

November 27, 2009

Have you ever seen a website whose interface is ‘way out there’?  Of course you have – there are many.  Sites where, for better or worse, the designer has chosen to make her own path rather than follow a tried and tested design.

Picture of rather individually styled Smart Car

Individual design is a highly creative discipline; it forces the designer to think about every little detail, how those details fit together and how they combine as a whole.  It allows the designer to express personality, demonstrate their technical and aesthetic capability, and challenge accepted norms.  To be brief, it’s something of a clean sheet with all the possibilities that this brings.

Conformity is the contrasting approach; it’s more constrained, conforming to established rules, guidelines, accepted practice, you name it.  It prescribes ways of doing things and in practice frees the designer from the tyranny of that ‘clean sheet’ which can be daunting.

Neither approach is ‘all-or-nothing’; the designer will find a balance that suits their own preference, experience and abilities, tempered by the requirements of the customer.  We’d like to consider some benefits and drawbacks of either approach.

Image of rather ordinary grey blocks

First of all, let’s consider conformity.  The driving force behind conformity (in a software design context) is to take advantage of the hard-won experience of those who have gone before.  Over time, a solid body of accepted practice has built up, shaped by the lessons learnt about what works and what doesn’t.  There’s a good reason that things are the way they are.

In conventional software development, for example for Windows forms-based applications, a great deal of the hard-work is already done.  There are standard form styles, controls, menu conventions, buttons and so on.  A user, having never seen SomeCompany’s new ThingyApp tool, will at least be presented with something which has a basic familiarity.  A conforming design will behave in much the same way as other applications.  The minimise button will be where it always is; there will be a File menu, perhaps a tool-bar, et cetera.

What we as designers gain from this is a greater consistency with the ecosystem of other applications.  We also benefit from the re-use of common components and frameworks, which are probably more stable and better tested than anything we could come up with ourselves, if truth be told.  A common UI is, then, a starter-for-ten which enables us to concentrate on the functionality without getting bogged down too much in how we’re going to let you control that functionality.

The drawback to conformity is of course that everything tends towards… well, bleh.  ‘Bleh?’ I hear you say?  Unashamedly non-technical, it’s our instinctive reaction to the ordinary, the familiar, the taken-for-granted – dare I say it, the dull.

If you want to make a big impression with your software, it has to stand-out in a good way.  Maybe this can be achieved by solving some hitherto difficult task, or by improving radically on something that already exists, or perhaps by doing things in a novel way.

Picture of crazy headphone design

Individual design tends towards this ‘doing things in a novel way’ approach.  Rather than be constrained with the common UI, the designer can really go to town on a design.  No longer bound by convention, then, the outcome is completely at the hands of the designer.

And this is where it typically falls down.

You see, many designers want to express their individuality into their designs.  Especially in web development (whose actual content doesn’t have a common UI as such, beyond standard html controls and the typical page lifecycle).  Flash has a lot to answer for here.  Many potentially great website ideas have been compromised by the use of bad Flash design.  Slow, confusing, overly graphical and exclusive (in the sense that they exclude people who might have no choice but to surf using assistive technology, for example the Jaws screen-reader).

The difficulty is that deviating from well-worn path of convention is a real risk to the usability and accessibility of a design.  Whilst it’s possible that a designer might come up with something which improves upon convention, it’s far more likely that what is designed will fail.  A radical design may well please a small proportion of its user-base, but by messing with the accepted norms, it will doubtless alienate or at best confuse a significant number of its users also.

So, where does this leave us?  Well, the point of this article was to weigh up ‘individual’ versus ‘conforming’ designs, and the short answer is that we can’t really rule on either.  After all, designs exist for a reason, and that reason is to facilitate the use of the thing for which the design was created.  An individual design may well achieve this goal better than a conforming design – we can’t really judge this on a hypothetical basis.  What we can do, however, is look at human nature and suggest that anything which challenges our understanding of how to interact with a system, or forces us to leave our ‘comfort zone’, is likely to require greater effort than a design which plays to our existing understanding and experience in interacting with a system.  Where greater effort is required, we are more likely to make mistakes.  With mistakes come frustration, and frustration quickly turns into dislike and abandonment.

The designer should bear all of this in mind before she departs from the ‘standard designs’, and have good reason for doing so.  If she does take this route, then it places a far greater responsibility on her to ensure that her design works, and justifies its ‘individual’ nature.  There are many techniques which might be used to do this – requirements prototyping being one of the best choices – but at the end of the day a radical design is a challenging proposition and carries increased risk.

We don’t like unnecessary risk.  We can either mitigate it, with careful feedback using prototypes, or avoid it, by sticking to tried-and-tested ‘conforming’ designs.  What we mustn’t do, however, is bury our heads in the sand and hope it all works out…

h1

Pushing the envelope

November 21, 2009

Sometimes a design will arrive for an everyday item that’s so blindingly obvious yet revolutionary you have to wonder why nobody did it before.

Such a design is the folding plug, designed by Min-kyu Choi.

Taking inspiration from the Apple Macbook Air, which is advertised as being the ‘world’s thinnest laptop’, Min-kyu found irony in the fact that this wonder of modern design was saddled with the rather archaic and clunky UK three-pin plug:

Picture of Macbook Air and folding plug in an envelope

In a breathtakingly simple but inspired design, Min-kyu has created a clever folding plug which occupies under 1/3 of the space of a conventional UK plug.  Thinner than your little finger when folded, this beautiful bit of design refactoring takes plug design forward in leaps and bounds:

Picture of folding plugs

As software designers, we should be actively seeking out the ‘chunky plugs’ in our world – awkward, unfriendly, approaches to interaction that have somehow become the ‘norm’.  These are the things that people put up with despite their shortcomings.  If we put the effort in, we shall and will find them.  We may even be able to come up with something significantly better.

Min-kyu deserves great credit and recognition for making such an improvement to an everyday object.  I hope that you can find your own ‘chunky plug’ and make your own mark.  After all, that’s the essence of good design – improving our everyday lives.

h1

Ergonomics…

November 18, 2009

Just wanted to put a link to a great article on the science of ergonomics.

It’s something which applies as much to effective software design as it does to milk cartons or portable music players. 

That page design that requires the user to constantly scroll within a tiny window to see their document?  Or the excessively large button strip that houses rarely used functionality but takes up precious screen real-estate, pushing the user’s content down below the fold?  These things aren’t just usability concerns, they’re ergonomic flaws. 

Software ergonomics: It’s the difference between creating a frustrating and a rewarding user experience.

It’s as simple as that.

h1

Adding magic

November 18, 2009

Picture of a magic wandDesigning interactive software systems is a fantastic opportunity not only meet the objectives of your customer, but improve the day-to-day experience of the end users.  This responsibility doesn’t come lightly; get it wrong and you run can just as easily frustrate and irritate those users, and even a mediocre system will become a hated system over time. 

What we need to do is to try to think as a user does, see a system as a user sees it and consider the bigger picture of that user’s working day.  How does this system fit in with the other things they do.  Do they want to be able to use this system concurrently with another system?  Will we need to work with a non-maximised screen layout in mind?  How much assistance in using a system is enough?  How much is too much? 

The list of considerations is seemingly endless, but by thinking about these things we achieve something very important indeed: we start seeing a system from a user’s perspective.  In other words, we start to really appreciate just how a system will fit in with the workflow of our users, in the context of their everyday tasks.  In essence, we start considering that system’s place in the ecosystem of a user’s day.

We have, then, our opportunity to add value beyond the delivery of ‘a system’.  We can deliver ‘a solution’ that integrates into workflow more effectively, and delivers real benefit through the combination of increased productivity, ease of use, interoperability with other systems and so on.

What we have is the opportunity to really improve, to ‘add magic’ to that user’s day.  Let’s not waste that opportunity by rushing our software out the door…

[why not subscribe to this blog via RSS? It’s a great way to ensure you don’t miss a single post]

h1

Involve important people (part 1)

November 14, 2009

It’s far too easy to forget to involve the most important people in your software design: the people who will use it.

Your important users
Your users are at the front-line; you should try to involve them in the design phase, so that their needs are acknowledged and their ideas considered and perhaps incorporated into your design.

Use software prototyping to give them interactive designs they can try out for themselves and see what works for them and what doesn’t. Listen to their suggestions and preferences. Value their opinions.

They will love to be involved, as they have a personal stake in the success of your design. Do it well, it will enrich their working lives; do it poorly and they may never forgive you.