User experience architecture

August 26, 2009

Designing services

Designing services

Four customers in search of a service

Joan wants to contact her local government to report a dead deer on the main road. Paul needs to tell his bank about a stolen credit card. George needs to deal with workplace bullying by a co-worker. Rinka wants advice about the criteria for adopting a child.  In spite of their very individual situations, they each need to find and consume a service.

Services defined

Services cover a lot of ground:  paying bills; managing your money; finding a job; accessing government; bidding on a contract; finding real-estate; fixing technical problems … and so on. But not every transaction is a service. Here are some characteristic features.

  1. A service has a consumer and a supplier. Their collaboration creates mutual value.
  2. The consumer and supplier have different affiliations.  For example, the consumer might represent a household and the supplier might represent an electricity provider.
  3. The provider offers a  resource (or access to a resource)  of value to the consumer.   For example, resources might include problem resolution, work, permissions, statutory reporting, data, knowledge or infomation about finding and using some facility. Buying a book is not a service in this sense; getting a library ticket is.
  4. The consumer’s access to a service may be restricted by individual status and availability. For example, an applicant for a busker’s license must show musical ability. On the other hand, anyone can report a pot hole.
  5. A service may be free or charged.
  6. Services may be delivered over multiple channels. The online channel is typically the most cost effective.

The anatomy of a service

There’s a pattern to services.  They generally have several of the following  elements.

One group provides information to enable a consumer to find and assess the service.

  1. Applicability criteria: who can use this service?
  2. A process: who does what?; what happens next?
  3. A service level agreement; what does the supplier commit to; what must the consumer agree to?
  4. Key facts: when, where, how long, how much, how often?
  5. Authorities: references to regulation, legislation and policy.
  6. Contacts: who can provide further information?

The second group, carries the “payload” of the service.

  1. Knowledge.  Examples include the commercial interests of politicians, techniques for surving a hurricane and an index of dog-friendly beaches.
  2. Specific data. Examples include a personal bank balance, neighourhood refuse collection timetables and local weather forecasts.
  3. Transactions that initiate requests.  Examples include application  forms and e-mail links.

Designing services

From the perspective of Joan, Paul, George and Rinka, each of these services is a  task to satisfy a goal associated with a role. At a superficial level, the scenario is parallel to buying a product. For example, the task model involves finding, comparing, assessing, selecting and, in many cases, paying and arranging fulfilment.

As practitioners, we have powerful tools to tackle this class of design problem. For example, focus groups, task analysis, design patterns and user testing can all help to ensure that an efficient and intuitive interaction delivers appropriate outcomes. However, services offer some additional and distinctive usability challenges:

  1. Services are typically not “known item” searches. Joan probably does not know that the local Council labels this service a “highway wildlife casualty”.
  2. Services are often needed in stressful situations. Paul needs to get his card cancelled immediately – and he needs to be confident it’s been done.
  3. It’s not necessarily obvious who provides a service. Georgina may not be sure who can offer authoritative advice in this sensitive situation.
  4. Services can be intimidating and complex. Rinka may struggle to understand the densely worded prose of child welfare experts.

Let’s look at this from other side of the glass – from the point of view of the highways department, the bank, the HR team and the welfare workers.  Self-service is a potent business model. Increased adoption reduces contact-centre costs and, potentially, improves customer satisfaction through increased convenience and autonomy.

Self-service also looks easy to implement: delegate the work to the owning departments; have experts document their expertise as web content; translate the paper forms to HTML; generate e-mails; serve up the package through search; and reuse an existing taxonomy to define a navigation scheme.

Getting services right

Experienced designers will have already spotted the gotchas. Delegating design can create inconsistencies, encourage “territorial” design patterns and bypass the efforts of design professionals.

Here’s a list of known risk factors:

  1. Services are hard to find. An “inside-out taxonomy” defines an enigmatic browse structure, intuitive to the service provider but opaque to consumers. Search is hindered by cryptic and inconsistent naming. Neither content or metadata have been been tuned for search engine optimisation.
  2. No support for near misses. There is no “related services” model or helpful grouping of results  to identify similar or alternative services. Services names and descriptions are not structured in a conistent format to facilitate comparison.
  3. Services are grouped by supplier organisation. Consumers expect services to be organised by user role and goal rather than by owner.
  4. Noisy information. Descriptions are long, wordy and padded with irrelevant content such as departmental history, mission and achivements. Customers prefer concise service descriptions focused on critical elements:  how much does it cost?; when is it open?; how long will it take?
  5. Challenging information. Descriptions use jargon, technobabble or overly formal language. Plain English not only ensures understanding but also builds confidence, trust and brand advocacy.
  6. Rambling information.  Effective content is consistently structured, using generous subheadings to signpost specific sections. Task-based writing, bullet-points and tables can all add structure.
  7. Obscure forms.  Ambiguous questions, jargon, poor field grouping, insufficient field completion support, bad layout and obscure error messages all make form-filling unnecessarily hard.
  8. Greedy forms.  Nosey and just-in-case questions add effort and discourage completion.
  9. Separation of elements. When information and forms are not integrated, two things can happen: either users make guesses about the applicability and process – or users take no action.

Getting it right for our fab four  is perfectly practical.  However, in addition to  effective UCD,  it also takes standards, processes, training and an architectural  focus on design in the large.

August 23, 2008

Designing screen layout for explanation, efficiency and trust

I’m not a graphic designer, but (with apologies to the excellent Joan Armatrading) I’m open to persuasion. Here are a few layout techniques I’ve absorbed by hanging out with these masters of pixel-shuffling.

Effective layout satisfies three distinct design goals:

  1. explanation;
  2. efficiency;
  3. trust.

Here’s a screen that doesn’t quite work. Could you use it? Sure. Would it offer a satisfying user experience? Probably not.

Untidy screen layout with inconsistent alignment, inappropriate field groupings and incorrect sequence of elements



New users need to “parse” an unfamiliar screen in order to identify the major elements and then construct a plan, a set of tasks and subtasks that satisfy their goals.

Bad layout presents an undifferentiated body of fields. It is perceived as a noisy tangle of detail. Good layout is a teacher. It uses grouping and separation to “chunk” content in a way that communicates the high level task-model.

Desktop applications typically use Group Boxes to outline related fields. Web style applications use a variety of graphic design techniques such as boxes, rules, tints and whitespace. Although the aesthetics vary, all these techniques draw on the same idea, Gestalt principles of form perception..

You can also visually sequence groups and controls to suggest the natural order in which they should be used. Here’s an example from a self-service form to apply for benefits. In this case, it makes sense to find out whether the specific benefit is useful to you before you take action. You might also want to check that you qualify before investing time in filling a complex form.

1. Assess relevance of benefit

2. Check entitlement to benefit

3. Apply for benefit

Conventional sequences can also be helpful. Although you might order your entire meal at once from the online deli, you probably still think about that meal as a sequence of courses.

1. Choose starter

Starter menu

2. Choose main course

Main dish menu
Vegetable menu
Side order menu

3. Choose dessert

Dessert menu
Cheese board menu


You can use “mappings” to explain the relationships between screen elements. For example, if you need to display four buttons to move up, down, left and right, consider placing them at four points of an imaginary compass. Although you do lose some real estate, you can simplify the experience by exploiting your users’ knowledge and motor skills.

Look for opportunities to exploit relationships to objects in the real world or to conventional representations of information. Up implies more; left implies previous, cause (of some effect to the right) and, umm, left. Table cells imply the interaction of the two concepts in the row and column headings. Watch out for tricky cultural differences! For a neat example of mappings, take a look at the navigation controls on Google maps.

For more on mappings, take a look at The design of everyday things by Don Norman

Purposeful typography

Typography can also exploit Gestalt principles. Items presented in the same colour or typeface are seen as related. For example, if you show an example of the required data format adjacent to each data entry field, use a consistent and distinctive typographical style to help the user pick out these helpful hints. Consider using the same typeface for inline instructions (“Select a set of features to customize your car”) to visually connect all the “help” resources and to differentiate them from other elements such as group and field labels.

Visual hierarchy

Good design draws the user’s attention to important elements on the screen. Just as a hierarchy of alerts in an industrial control room distinguishes safety-critical incidents from routine events, you can use colour, type size and symbols to design a visual hierarchy that draws the users attention to errors and exceptions and important instructions.


Less work for the hands

According to Fitts’s law, you can reduce the cost of “pointing” by tight placement of controls that are frequently used together. Making the controls larger also helps. Paradoxically, you can pin controls right at the edges and corners of the screen. This makes them an easy target with no risk of overshooting.

Less work for the eye

Scanning complex information is hard work. Effective use of headings, tables, columns and lists can guide the eye, making it easier to find what you need and to understand the relationships between different elements.


Scruffy layout suggests carelessness and poor craftsmanship. Here are a few basics that some developers overlook.

  1. Align fields neatly.Whether you align to the left or right, ensure that at least one margin is neatly lined up. If you have multiple columns, try to align both vertically and horizontally. Graphic designers often start by defining a grid and then positioning blocks and elements on the cells of that grid. Layout managers, visual screen designers, and PhotoShop guides and grids can all help here. Visual Studio Express has some nice tools to make this easy.
  2. Space fields evenly.Define rules and stick to them. Again, this applies both vertically and horizontally. You might, of course, want to make an exception if you’re using layout for mappings.
  3. Space headings asymmetrically.Typically, headings need more space above than below. This creates whitespace to help with visual chunking. Many programming languages such as CSS, Java and C# allow you to specify margins for GUI elements.
  4. Give it room to breathe.Don’t cram fields too closely together. Watch out for text-wrapping, overlapping or clipping of labels due to insufficient space.
  5. Less is more.Use colour, typefaces and graphics with consistency and restraint. As with spacing, define a typographic scheme and follow it consistently. Here’s a counter-intuitive guideline; if you use two different typefaces, use two different typefaces. For example, print designers often contrast a serifed font for text with a non-serifed font for headings. If you are working in HTML, consider creating named CSS classes to represent different styles of label. In object-oriented languages, it can be helpful to subclass standard GUI label classes to create standard reusable components for common elements such as field and group labels.For more on the charms of type, see Stop stealing sheep by Spiekermann and Ginger.

Here’s a rework of the monster above. It’s tidy and pleasant enough to look. Most importantly, you can clearly see the task model with subtasks sequenced in a conventional order

Tidy screen layout that addresses the issues in the previous image

So, to design a screen that delivers explanation, efficiency and trust, consider grouping, sequencing, mapping, positioning, and typographic hygeine.

Alternatively, just make friends with a graphic designer.

August 16, 2008

Designing screen layout with Visual Studio Express

It’s an old debate. what’s the best tool for prototyping screen designs?

For early abstract design, I like the minimalism of a spreadsheet set to a regular grid. For smoke-and-mirrors interaction, I’ve had good results with Axure. It also does a nice job on managing design process metadata: issues; alternatives; and open questions. For day-to-day sketches, PowerPoint is competent and is ideal for sharing ideas with colleagues in other disciplines.

For more precise screen layout, I’ve been impressed by the forms designer in Microsoft Visual Studio Express for C#. Here are some specific features I’ve found helpful:

  • Field alignment

    As you drag a field across the screen, the designer draws a blue line to visually indicate any field with which it is is aligned. “Aligned” means that an edge (top, bottom, left, right) in one field matches an edge in another. A magenta line also shows when the text baselines are lined up. This is handy for neatly laying out forms, nested containers and any complex design where you don’t have a regular grid to guide your eye.

    Aligning three buttons

  • Margin management

    You can set margins properties on a control such as a button or text field. As you drag this control, the forms designer draws a connecting line to nearby objects whenever the control is positioned at exactly the margin distance away. For example, you might set up section headings to have a larger margin above than below. Using this technique to drag a set of fields below each heading would ensures consistent grouping and separation in line with Gestalt principles.

    Using margins to position labels and buttons

  • Layout managers

    You can add flow layout panels and table layout panels and then drop controls onto those panels. For simple layouts, this saves a lot of time. The table layout is handy for simple forms in which each row contains a label, a field and some guidance. The flow layout is convenient for facet style menus or tag clouds.

    Using a flow layout panel to present a faceted menu

Together, these features take the tedium out of defining a neat and consistent layout. The experience is unobtrusive but quietly rewarding.

Create a free website or blog at