Get real with text when you wireframe

Yesterday I started creating mockups for a top secret project. I decided that I was not only going to mockup the UI, but that I was going to mock up real copy to go along with it and skip the fake text. Not content with simply banishing “lorem ipsum” I attempted to make the content as real as I could.

There are several advantages to this including:

 

  1. Now you can ask for feedback on marketing copy (I was working on the home page.) as well as UI.
  2. You’ll learn that the layout in your head doesn’t accommodate the text you really need.
  3. Text, text size, and placement is a critical component of UI design and real text will showcase how balanced your UX is.
  4. Text should be used to guide users through the intended flow of your UX and your application is not complete without it.
  5. You’ll start getting a feel for the type of content you want to see on your site and how it blends.
  6. You may not work in marketing… but this could make their messages more real.
  7. You’ll have to bug fix the real text later if you don’t when you realize your UI crushes your dreams.

So, when I say “real text” what do I mean?

  • If you have a blog or twitter feed show the headlines you’d expect the user to see.
  • If you expect user generated text then ask some of your customer advisers for examples of content they would be posting.
  • Any marketing copy or calls to action should be real.
  • Expand your menu with the real links.  You may realize you needed space for 6 items instead of 5… or you need to change your IA.

Ok, now go forth and change the world by bringing it a touch of reality.