Bring Mockups to Life with Real Content!

How do you create the perfect pitch for your new product or service? With a bunch of screens filled with Lorem ipsum? We don’t think so! Here we share our experiences creating mockups for some tough presentations.

Lately here at UX Passion, we have been working on our new product, SidekickrTV, among other things. Part of our team is focused on getting the best possible Sidekickr solution to your TVs.

Those people who are following us on social media probably already noticed that during the last few weeks we’ve been to the WebFest conference in Montenegro and Geeks on a Plane’s event in Zagreb, Croatia. There we pitched our SidekickrTV idea and received some great feedback from potential customers, partners and investors. I will not speak about SidekickrTV any more in this post, so if you are interested to find more about it, follow us on Twitter and Facebook to stay updated.

Bring Mockups to Life with Real Content!

Bring Mockups to Life with Real Content!

I will speak here a bit more about our experience putting *real* content inside sketches and mockups as early as possible in the development process. A lot of UX experts have already spoken about this topic, but in the world of user interface design I’m not sure that all people who are working on delivering initial design concepts and mockups are really aware of it.

Lorem ipsum looks pretty ugly, and it’s certainly not realistic. But the biggest reason why you really should stop using Lorem ipsum in your UI mockups is this: it will most probably confuse people. It is very likely that the client will ask you “Why the f*** is my website written in some sort of Latin language?

If you are really out of luck, you may end up releasing your application or website into the public domain with some UI elements (or even whole pages) still written in Lorem ipsum. That’s a User eXperience you don’t want. (At least, you shouldn’t!)

Copywriting is interface design. Great interfaces are written. If you think every pixel, every icon, every typeface matters, then you also need to believe every letter matters.
from the book “Getting Real”

People interact primarily with the content on your website or in your application. Nobody will press that red button in your app if there is no description of what that button does.

Can you imagine Lorem Ipsum conversation in real life?

Lorem Ipsum Conversation by elegantmisreader

I’m working in a very agile company with extremely agile processes for designing great User eXperiences for various platforms. I’m pretty much aware that the UX design process is (almost) never perfect, and that in each process of your company there is probably room for improvement.

Having that in mind, maybe you will not have real content when you start sketching wireframes or creating visual mockups and prototypes. If that’s the case, it’s still better to use “Delete” on that red button instead of “Pellentesque” – which doesn’t mean anything. The same goes for all other UI elements, as well as real content such as headings, hyperlinks, social media accounts, forms, navigation and so on. I’m just saying this, because you wouldn’t believe what these eyes saw in my design management experience.

If you don’t have real and finalized content from your client or copywriter, think of something on your own. It will definitely communicate your ideas and designs much more clearly than some lookalike Latin text. As the guys (and girls) from 37signals said: “The goal here is to get as close to the real customer experience as possible.” Lorem Ipsum is far away from that.

Putting that in our scenario from two weeks ago – Vibor Cipan (our CEO) held two presentations about our SidekickrTV. Darko Čengija, our Chief Information Architect and I worked together on sketches and mockups for the product. Although some Lorem ipsum was initially spotted in the wireframes (for some of the user tweets in the Twitter feed, we still working on that too), I would say that 98% of the IA *had* real content.

Sidekickr.TV - Social Feed

Sidekickr.TV – Social Feed (click for bigger image)

Also, we collaborated remotely on this project and I’m imaging that it would never have been finished if we’d used Lorem ipsum for our sketches. I mean, we are building a real product – therefore, we need real content. It’s as simple as that.

In these mockups, I even went one step further and made up a little “real time” conversation of 7 people in the Twitter feed in a social scenario of SidekickrTV. Vibor used this as an opportunity to ask the audience “Who is a fan of Breaking Bad here?“. That was greeted with great enthusiasm by the crowd, as well as the potential investors and partners gathered. Why? Because as well as connecting with fans of the show, it clearly communicates the idea of the social feed in our TV solution – to engage people in conversation while their favourite shows are on TV.

This is not the only scenario with real content we had in our SidekickrTV presentations. We had a music scenario using Queen’s album “News Of The World”; a page showing Financial TV tags featuring Facebook shares and Mark Zuckerberg, and a football match showing live betting during a match between Real Madrid vs. Barcelona (guess who’s winning).

Sidekickr.TV - Live betting scenario

Sidekickr.TV – Live betting scenario (click for bigger image)

Sidekickr.TV - Music scenario

Sidekickr.TV – Music scenario (click for bigger image)

I feel this made our mockups come alive and I can’t help thinking this is one of the reasons why we’ve received a lot of positive feedback about the concept. To bring the point home, I’m imaging what Vibor’s presentation would have looked like if instead of “Breaking Bad” our mockups had featured “Lorem ipsum…”.

I guess I’ve made my point here. Use real content. As early as you can in your design and development process. It will make your process so much healthier and more fun, as well as generating some valuable ideas which can be used in the end product.

So, if like the idea and want to play around with it, head for this Web Resources Depot article – but keep it to yourselves! And of course, be sure not to put it in real user interface environments :).

Lorem ipsum has been in use in the print industry since the 1500s. It’s now 2012. And mostly, as user interface designers, we’re not really in the print industry. The rules of the game, the conditions and requirements are different.

I will finish this blogpost with something I read on SmashingMag: “Kill Lorem Ipsum before it kills your design” – and I will add just one more thing. Do it now!

Want to read more? Head to:

Share your experience with us...

Trackbacks

  1. Pingback: O fim do "Lorem Ipsum"? – inter.ativida.de | inter.ativida.de