Inspiration and words of wisdom from UX idols

New York’s School of Visual Arts recently asked a bunch of UX luminaries to pass on their advice to aspiring designers. The result is a bunch of 30 second videos each with a tiny, golden nugget of advice.

It’s a really inspirational collection, some of my favourites are:

“You have to be empathetic to your users, toward your clients, to the people you’re working with on your team” – Jennifer Bove from Kicker Studio.

“Fully understand the problem before you attempt to solve it” – Whitney Hess.

“Having a camera, taking it everywhere, and taking pictures” – Michael Mandiberg from Eyebeam.

“Seek and out embrace different perspectives from your own and to solve for those perspectives” – Steve Portigal from Portigal Consulting.

“Find the middle ground between clever and stupid” – Jared Spool from User Interface Engineering.
And more from the comments section of the blog post:

“Don’t forget a designer can do anything. Your skill is solving problems, and there are trillions of them in thousands of industries”– Jeff Ferzoco.

“Be weird and have a good sense of humor about it” – Kevin M. Scarbrough.

“Learn how to tell a great story” – Wade Burch.

“Don’t use the word user, or client. You are designing for people” – Michael

“Eat it, Do it, And Love It As Part Of Your Life!” – Edward.

Mine would be:

“Try to avoid thinking about the solution for as long as possible. Learn as much about the problem from as many different angles as you can”

What would you words of advice be?

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.