Prototyping in shorthand

As mentioned in my last discovery notes I like to write up pages in a shorthand method.

This isn’t something that only I do.

When I was helping out in services week for “formapalooza” Ralph Hawkins spoke about the format he used in Google docs to write pages.

The format follows the shapes of interface elements using:

Radio buttons

(  )

Checkboxes

[  ]

Input fields

[                ]

Buttons

[ Continue ]

I do this too. But I like to add a few markdown elements as well, so #‘s for headings. So:

• # Heading one
• ## Heading two
• ### Heading three

This means I like to write pages like this:

# Make your choice

You need to choose what you're going to have for tea.

It's really important.

## What do you want for tea?

( ) Curry
( ) Chips and sausages
( ) Pizza

[ Continue ]

Write in this format or similar in a sharable doc and you’ve got a way for a whole team to work together.

You can even use document editor styles like links.

Using shorthand makes it easy for two designers to collaborate on screens. Or for other members of the team or other teams to get involved.

Use Google docs, word or a notes app. It’s a quick way of prototyping screens and flows. It’ll help you focus on the important bits:

• the words and questions
• the structure and flow
• and ultimately, if your service meets a need