Adobe Creative Cloud

June 14, 2016 /UX/UI Design /

Two Key UX Prototyping Challenges and How to Overcome Them

What is a prototype? My favorite definition comes from service designer Adam St. John Lawrence:

“A prototype is an early version of a thing. If it describes a thing, you may have a presentation on your hands, not a prototype.”

Prototyping is a key part of the UX design process. How can we try out ideas for an interface in a fast, low risk way? A UX designer will explore ideas by creating early versions of them, testing and iterating to improve. A prototype is a way of learning, testing hypothesis and potential solutions. It can have several purposes:

  • Getting the team on the same page by clearly showing the design
  • Giving stakeholders an artifact to try out and provide feedback on
  • Being used for testing, for example running usability tests on a prototype

prototypechallenge3

Prototypes are extremely valuable, and there is no definitive approach to them. For UX designers, there are myriad tools, methods and beliefs out there. Across all of these, there are a few common pitfalls to try to avoid.

Choosing the Wrong Fidelity

The fidelity of a prototype refers to how refined it is, how polished and ‘finished’ does it seem? Prototypes range from a sketch on the back of a napkin all the way up to fully functional and developed solutions. Making the right decision about whether a prototype will be low fidelity (like a series of sketches for a paper prototype) or high fidelity (such as a fully visually designed and interactive digital prototype) is crucial.

prototypechallenge4

Low fidelity paper prototypes can be great for rapid testing and iterating, but can sometimes not seem “real” enough to stakeholders.

 

The risk with low fidelity prototypes are that your client or team may not be able to take it seriously or understand it, depending on their levels of experience and familiarity with prototypes. I have seen testers happily use their imagination to fill in the blanks and do walkthroughs with paper prototypes, and I have also seen clients dismiss paper prototype because they do not seem “real enough”.

Increasing the fidelity and making very polished prototypes is not always the solution, as high fidelity prototypes come with other risks. Something that looks finished can discourage people from giving feedback as it feels “too complete” and set in stone. People may worry that their feedback will be too much effort to implement, as a high fidelity prototype can seem finished. I have also had experiences where clients fixate on details such as visual design and typography, even if these are intended to be placeholder or temporary. A prototype looking too designed can be distracting, as people begin to focus on details of color, placement and typography.

There are two key ways to pre-empt this challenge:

  • Think carefully about the level of fidelity that is appropriate for the prototype given what you are trying to achieve with it. As a rule of thumb, the fidelity should increase as the timeline of the project progresses. In conjunction with this, the most important factor is considering what purpose the prototype is supposed to serve. For example, will a paper prototype to rough out the user flows suffice? Or do you need something with a bit more polish to start to explore the look and feel?
  • Set expectations with your team members. Be very explicit about the purpose of the prototype and the type of feedback you would like to get. Support people in understanding where this prototype fits into the overall project process. For example, when testing with users, it is crucial to set expectations: “Today we will be working with a prototype, which is almost ready for release. However, we may run into some things that don’t work and that’s ok,” or “The version we are looking at today may look unfinished as it is missing some content and images, as it’s a very early version.”

Getting Confused about Content

I am a big advocate of designing content first where possible. The realities of distributed responsibilities (i.e. the UX designer or team may not be in charge of the content), and project timelines (the content is not ready yet) mean that this is not always possible. At a prototyping stage, where ideas are being brought to life, the question becomes what content to use. Should it be left as boxes and lines like a wireframe? Should placeholder or filler content like lorem ipsum be used?

At very early stages, using wireframe style boxes to represent images and lines to represent text in a prototype can seem tempting. One of the downsides to this is that it may seem too sketchy or unreal for people to evaluate it. In one project I worked on, the client kept referring to pieces being missing from the paper prototype layouts, as they could not get their head around the boxes and lines representing chunks of images and text.

A popular solution is to use lorem ipsum, or one of the myriad more fun varieties (cupcake ipsum anyone?) This can be very distracting in a prototype – I’ve had stakeholders ask “Wait, is that English?” The placeholder text also has a habit of neatly filling the exact space we need it to.

Trying to come up with sample or proto-content can be one option. Even using more real seeming content has  downsides too.  I’ve seen clients get very hung up on the sample content in a prototype, asking why the same photo and name are repeated several times in a directory page. This approach can also be very time consuming, as the UX designer tries to generate lists of names or other fake content.

Finally, using content in your prototypes that is close to the real thing can lead to an embarrassing situation where the content ends up going live or being used in development! This can be due to misunderstanding that the prototype content is representative, or the lack of a proper content governance approach.

What’s a UX designer to do when choosing content for a prototype?

prototypechallenge2

Elaine Chao Finnell’s prototype takes a blended approach to content at the wireframe level, using actual headers and some placeholder hipster ipsum text.

 

  • For low or medium fidelity prototypes, take a blended approach to the content, for example by using existing or competitor content for key pieces like headlines, and filler text or lorem ipsum for larger chunks.
Designwithdata - GIF 2

Adding names to a prototype using the Adobe XD repeat grid function and the built in sample data.

  • Adobe XD (currently in Preview) has a repeat grid functionality which allows you to quickly and easily add data to your prototypes, either from sample data within the program or from text or CSV files. This means you can flow a set of names into a repeat grid, getting rid of the distraction of the same name showing up repeatedly in a prototype screen. This also works for images. It allows you to get realistic, relevant content into you prototypes from the get go!
  • Match the fidelity of the content to the fidelity of the prototype. A highly polished interactive prototype used for final stage usability testing should probably not contain lorem ipsum, as this will be jarring to a tester. Content is not an afterthought!

Go Forth and Prototype!

Prototyping is a really fun and important part of the UX design process. Before diving in, it is worthwhile to pick a strategy regarding prototype fidelity and content, as this can save you some headaches later on. Being clear on the purpose the prototype is going to serve, as well as who will be reviewing/interacting with it will go a long way to making it as useful as possible.

For more inspiration on the prototyping process in XD, you could check out this tutorial on going from wireframe to high fidelity prototype.  

UX/UI Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe Experience Design (Preview) CC, the first all-in-one tool for creating and sharing website and mobile app designs. Test drive the XD preview and tell us what you think.

DOWNLOAD