Is "pixel perfect" normal in this field?


#1

Is “pixel perfect” normal in this field?

Sometimes mockups need to be high fidelity, such as showing it at a conference on a huge screen. Most of the time that is not my case. At work, I follow what they suggest: take a screenshot of an existing screen and use Illustrator to type or cover/build pieces on top of it, so it looks similar. (Easy to see before & after.) Typically, it will be something a tech person would look at to get the idea. I will have people nitpick on super tiny stuff (usually UX) when its an example. At my current place, there seems to be a focus on it to the point of time wasting. (My opinion, maybe not theirs.)

I co-owned a laptop repair/web design business for 3 years awhile back. So I naturally have an “entrepreneurial mindset.” I’d rather use this time more effectively. I wonder if I need to adjust my expectations. This is a new job for me, but wonder how other places address this.

Thoughts? Thanks for reading.


#2

Yeah, you’re totally not alone. =)

Just like most visual and graphic designers, many UXers have a good eye for detail—we’re working in a mostly visual medium, and it’s one way we can flex our muscles and prove our skillz, plus the emotional impact of a design can be pretty nuanced. But as you say, it can really get in the way sometimes, and waste precious time that is much better invested elsewhere.

I find it helpful to split my wireframes and mockups into three types, with different levels of fidelity to the final design:

  • For thinking - by hand, very sketchy and blocky, most of the time using shorthand placeholders for content. I’m usually the only one who usually sees and works with these as they’re completed in a flurry as I work towards getting my thoughts in order and articulating a possible solution to a problem, but this is also great for collaborative sessions or knocking through some ideas with others.
  • For communicating - Once I’ve settled on a proposed direction, I set up something with a slightly longer lifespan with the other designers around me. These are still very sketchy, but include real content and more attention to detail (including some annotation and references), and are still mostly done by hand unless it’s a larger project with a lot of iterations for which I’ll often invest in digitising them in Balsamiq or Axure. If it’s a small adjustment of an existing design I might jump into Photoshop or Illustrator or HTML and move things around a bit.
  • For testing - these screens need to work without explanation because they’re being tested in usability sessions, so will need real content and plenty of detail. I’ve tested with hand sketched designs on paper or clickable prototypes, all the way through to pretty much finished designs. Depends on where we’re up to in the process, and what we’re actually testing.

It’s amusing to compare it with the Uncanny Valley concept in robotics and 3D animation; if you’re working with something that looks relatively finished, people seeing it have a higher expectation of it being pixel perfect or else it just gets weird and distracting.

Balsamiq made such a breakthrough for digital mockups when they embraced the sketchy, imperfect style. =)

Sounds like you should stick to your guns and steer away from perfecting every pixel!


#3

thanks @Lukcha It’s the first time that I read about this hypothesis, very interesting!


#4

I do this all the time! Quick and dirty wireframes are awesome! I’ve even done them in powerpoint (working with gov powerpoint tends to be well received because it’s familiar).

I’ve found that if I put a note in the top corner of the page that says ‘draft’ or ‘colours and (whatever it is) for illustrative purposes only’ they tend to move on. For the proper ones, I’ve been doing them in Axure and then they form the bones for the working prototype.

I know what you mean about the comments - When I first started out about 5 years ago, I’d make a draft and I’d want feedback on the content and all I could get out of them would be things like oh it’s not aligned properly etc. I used to obsess over it because I really wanted to avoid those comments but I found all that did was waste a lot of time and hinder my creativity. So I reverted back to my happily messy process and started putting that note at the top and it worked! :slight_smile:


#5

Alright I’m going to say something a bit controversial compared to @Lukcha and @ShannonRae. It’s a thought I have been developing lately.

I don’t believe in pixel perfect for wires or protoypes, Luke made a good comment about this when he said:

if you’re working with something that looks relatively finished, people seeing it have a higher expectation of it being pixel perfect or else it just gets weird and distracting.

This still happens to me because I find it hard to divorce my designer brain.

However as an Interaction Designer I absolutely believe in pixel perfection when it comes to overseeing the interface till the very end. The truth is that the modern day user is very influenced by visuals and this greatly affects their likely hood of interacting with the product. I like to be involved with the design until the very end, making sure there are the correct states to infer feedback in the design. As well as a range of other important design choices that effect the user, ie: the length of the copy margins, how the screen responds on each device, how the colours effect legibility, and the list could go on forever.

I’m interested to know if anyone else agrees or if this is purely and interaction designer focus?


#6

Yep, good point to make.

Holding the vision through to the end, and ensuring it’s executed with as much precision as possible is important! I personally don’t get to own that unless I’m doing the design work too, but I’d always strongly support it. It’s a prerogative for people owning the interaction design!

How do you present your wires and prototypes, @leighrubin? What stuff specifically do you deliberately prioritise or compromise?