Is it time to ban lorem ipsum?

I'm sure, like me, you've had to decide many times what sample content to use in wireframes. Do you use lorem ipusm? Or should you use field names (like [FIRSTNAME-12]) to represent content? Or do you use a bunch of XXXXXXs or #######s?

Those numbers don't add up!

Representing content in wireframes always causes some sort of issue: clients get distracted because the content doesn't make sense to them ("those numbers don't add up!"), developers aren't sure if your content is alphanumberic, numeric or both, or worse still, people can't understand the wireframes (I'm looking at you, lorem ipsum).

5 types of wireframe content

Dan Brown has put together two excellent resources about representing content in wireframes.
Dan has evaluated the five types of sample content: actual (like Marilyn Walters), dummy (like Jane Doe), labeled (like [FIRSTNAME-12]), symbolic (like XXXXXX) and lorem ipsum (you know what he means). His work is really interesting and I've compiled the two together into one summary:

Actual content

Example - Suite 42, 215 Waverly Road, Frankston, Victoria 3293






















Advantages

  • Stakeholders understand it.

  • Accurate indication of what users might see.

Disadvantages
  • Difficult to get enough actual data for all wireframes.

  • May not address all possible variations.
What stakeholders say

  • "Does the same data appear every time?"

  • "That kind of information wouldn’t appear like that."

  • "Do all the possible values look like this?"

  • "You spelled "Waverley" wrong."

Hints and tips

  • Avoid using actual data for numbers or dates because scenarios often change and evolve. Keeping track of dates during the iterations is difficult.
  • Actual data is good for product information (just make sure stakeholders won’t get distracted by details or inaccuracies).

  • Use caution with actual prose, or you might be making editorial changes in the wireframes.




Dummy content

Example - 123 Smith Street, Smithville SM 2222





















Advantages
  • Resembles what users might see
Disadvantages
  • Stakeholders may confuse dummy content with actual content.
  • May not address all possible variations.
What stakeholders say

  • Is this real data?

  • Would the interface look the same if the data were longer?

  • How long are each of these fields?


Hints and tips
  • Dummy data works best with addresses or other variables that are predictable or follow a specific format.
  • If you need to demonstrate a process involving dates, use dummy data. To maintain chronological order, be sure to identify key scenarios and milestones and stick to the story through out the wireframes.



Labeled content


Example - [FIRSTNAME-12] [LASTNAME-12]





















Advantages
  • Describes the content
Disadvantages
  • Some stakeholders don't "get it".
  • Different content may be represented by the same labels.
  • Wireframe doesn't look realistic.
What stakeholders say

  • I have no idea whatI’m looking at here.

  • What are the business rules?

  • What are all the possible formats for the data?


Hints and tips
  • Labeled data is the best all-round technique for representing information. It can indicate both the type of data and the length of the field to expect.
  • When using labeled data, be sure to include notes on the business rules and provide examples.
  • Labeled data is also great for navigation. If the wireframes are meant to show the generic structure of the site, show the page level in the label.


Symbolic content


Example - $X,XXX.XX or XXXXX or ######





















Advantages
  • Shows "shape" of the content.
  • Quick to add to the wireframe.
Disadvantages
  • Difficult to distinguish between types of content (alphanumeric or numeric?).
What stakeholders say

  • This interface looks terrible!

  • What would it look like if the data isn’t as long?

  • What kind of data goes here?


Hints and tips
  • Symbolic data is best for numbers, currency and dates since it can represent the format.
  • Include examples of each, and if the numbers are subject to calculation, supply the business rules.
  • If the sequence of dates is crucial (like in an event scheduling application) consider using dummy data.

Lorem ipsum content


Example - Lorem ipsum dolor sit amet, consectetuer adipiscing elit.





















Advantages
  • Quick to add to the wireframe.
  • Good to represent sentences and paragraphs of text.
Disadvantages
  • Some stakeholders don't "get it".
  • Represents prose well, but not other types of content.
What stakeholders say
  • Is that Greek?
  • Is that Latin?
  • How do I know I like the design if I can’t read it?
  • What kinds of things would appear here?
Hints and tips
  • Use lorem ipsum as a placeholder for prose.
  • Lorem ipsum is not appropriate for navigation because wireframes showing multiple levels of a website need to be very clear about the structure.
  • Consider rendering the lorem ipsum in gray and superimposing a description of the content.

So which to use?


It depends. You need to consider your stakeholders and who needs to use your wireframes. I've worked on projects where the main purpose of the wireframes was for senior stakeholders to "road show" them around an organisation to get support for their vision. On other projects, my wireframes go straight to a devloper.


Should lorem ipsum be banned?


No, unfortunately not. Lorem ipsum is great for representing prose in a wireframe. Try not to use lorem ipsum for other types of content because it really doesn't do the job well.





Dan's original poster and his Boxes and Arrows article is well worth the look.


Want more?






3 comments:

ascian said...

It's an interesting chart... personally I tend to use example data for everything except text where I use lorem ipsum.

Often, particularly working with numerical or date data, the important part is the relationship between the numbers and how they work together, and without having numbers with real relationships in there the client can't understand the wireframe. Not to mention that if the person creating the wireframe doesn't understand the relationship between the numbers, that's a problem. Not knowing the likely variations on your data can likewise be a huge issue for your wireframes.

Small things like making sure that your numbers make sense and add up on a wireframe are what helps clients (and us!) to actually understand the wireframe and how it works - and a few mins adding up figures in calc.exe isn't exactly that painful is it?

rayray said...

"Lorum ipsum" only throws stakeholders the first time they encounter it, unless they are total morons without any pattern recognition or long-term memory. It shouldn't be used to represent anything more than body-copy sorts of content, or captions: used in that way, it is entirely appropriate. Its good to identify anyone "new to the concept" anyway ... they should quickly realize they are along for the ride in part, and are in a learning experience.

I did once make the mistake of getting 'creative' with my placeholder text, and used the English translation of the usual "Lorum ipsum" ... it totally confused my client, a 15-year veteran art director. I won't do that again.

Mike said...

I've slowly begun to move away from Lorem Ipsum, preferring to use 80's song lyrics instead. Tiffany, Rick Astley, ABC or Morissey, whatever's there at the time. It's actually more problematic than Lipsum but way more fun. This industry is slowly sending me crazy! Great post by the way.