Are Designers Crazy?
By @edent
· design graphics mobile usability · 81 comments · 1,050 words · read ~50,646 times.
...or do I just need new glasses?
I'm not a graphic designer. I find it hard to get into the mindset of excellence through beauty.
I understand user flow, interactions, happy paths, delighting the user, humane design, and so on - but when it comes to the art of making something look nice I'm all at sea. I understand that, as Aral Balkan so perfectly puts it, design is not veneer - but that doesn't stop my confusion.
This is a failing of mine - one which I'm trying to rectify - but recently I've had the sneaking suspicion that some designers may have a touch of "Emperor's New Clothes" about them.
I'm going to pick on two examples. I don't think the people behind them are bad or wrong - I just don't understand how their eyes and brains work :-)
A Question of Scale
Jack Groetzinger writes about the challenges faced when trying to scale down images for different iPhone models.
My first attempt at turning one of my 2x comps into a 1x version was to just decrease the image size in Photoshop. That was naive. Some elements don’t scale well when simply downsized; they require special attention.
Here is the image in question (used with kind permission):
(Click for full sized)
I know I'm not a designer - but I simply can't see any difference here. Ok, one button is orange - but that's it. There's nothing here which screams "terrible design!" at me. I'm looking and don't understand what "special attention" either would need. Were that to be presented to me as a user, I'd know where to click and not be distracted by inappropriate design. As a product manager, I'd ship either.
I've deliberately removed the naming on the screenshots - can you tell which contains the elements which "don't scale well"?
To better understand this, I've created an animation to show the difference between the two screenshots. This simply flips between the two images, there are no fades or anything else.
Ok... Now I see some differences. On one, the buttons are slightly larger, the colours slightly more nuanced, the shading is subtly different. If I zoom to an extreme level, the font on "ebay" in slightly smoother.
I get that there is a strong need for design. I understand the need for a clear and unambiguous environment. The desire for beauty is strong with some people - and I appreciate that.
But here's the thing. That design is going to be held around 50cm from the user's eyes, drawn on a screen which is caked in sweat and grime, which is reflecting the ambient light in the room, and is - in all likelihood - cracked.
Worrying about the exact scaling of a button, and the nuances of shadowing is what we in computer science would call "premature optimisation".
How Soon Is Now?
If a developer comes to you and says she can shave 5ms of every transaction, you have to decide whether this is a suitable use of her time, and whether it will cause problems later on.
For example, if this transaction is 5ms per user - it's unlikely to be noticed. If it's a back end process used millions of times, that optimisation may be worth it.
If rewriting that code to make it more efficient comes at the expense of readability and reliability, a call has to be made on where you want to make sacrifices.
Finally, if it will take her 3 weeks to make the optimisation - how long will it take to recoup that investment?
With design, it's no different. Will users notice that images aren't a bespoke designed for their platform? Will they care? Will you have to create an entirely new workflow to generate images specific to one platform? How will you manage image assets - especially when they need to be updated?
In fairness, Jack realises that this is a step too far and says:
Perhaps it isn't worth optimizing for 1x. [...] you're spending a lot of time catering to small group of users. The crudely downsized version isn’t pixel-perfect, but it’s still usable.
Again, I'm not trying to mock Jack or any other designers. I'm just trying to understand what drives the innate desire to be "pixel-perfect".
Ultimately, the question I'm asking is - does this even matter?
For You Blue
There is a (possibly apocryphal) story about Google engineers trying to think like designers.
Google is stuffed full of people who just love to experiment on its users. For instance, Google Mail uses a very slightly different blue for links than the main search page. Its engineers wondered: would that change the ratio of clickthroughs? Is there an "ideal" blue that encourages clicks? To find out, incoming users were randomly assigned between 40 different shades of links – from blue-with-green-ish to blue-with-blue-ish. The Guardian, Wednesday 8 July 2009 18.00 BST
Here we have - supposedly - a quantifiable metric for how design impacts performance. If you have billions of interactions, and you can see a statistically significant uptake between designs, then maybe it is worth worrying about every last pixel.
In today's "ship it and see" environment, we may not have the luxury of thorough testing before launch. Even after launch, there are hundreds of large changes and features which could improve usability before we start to worry about whether #2A5DB0 beats #2A5DB1
Crazy or Misunderstood
Musically, I'm tone deaf. I just can't tell one note from another. That sucks. Graphic design wise, it appears that I'm equally out of luck.
I know that most developers are not like their users. I am deeply aware that while I'll happily use a website in Lynx, many users need and appreciate beautiful design.
I'm I the crazy one? Is there such an apparent difference between the above screenshots that I should go out and buy a guide dog now?
Does determining the exact shading on a hyperlink sound like a good use of resources when compared to all of Google's other problems?
My brain doesn't work like that of a designer - I know that. But should I even try to think like them?
UI For Drunks
Inconsistency is a feature, not a bug
Both left and right look blurry on this website as they're scaled down to fit into your blog width... if you view the originals the difference is more pronounced - and yes, the improved version does look much better. When assets are scaled they have blurry edges and it makes an app feel cheap. The difference between top tier and crap is this attention to detail. Designers put the same effort into presentation that we put into ensuring bug-free code.
That's a good point. I've now linked the image so you can see it at full resolution.
But, I have to say, even when displayed full screen, I can barely make out a difference. Where I can see a slight change, I'd be hard pressed to say which is better - the cog design for instance. Why is one better than the other?
I appreciate attention to detail, both in code and design. But this isn't the case of a jerky animation, or hideously missized buttons (i.e. a bug) this is literally a couple of pixels that I don't think most people will notice.
Or do I need to get my eyes tested?
There's a fantastic blog somewhere out there (I failed to find it, Google skills clearly lacking) that illustrates why we don't just resize our assets, but have each icon set redrawn by a designer, if big images looked good when scaled down we just automate the scaling process or use SVG - but they don't! Icons need intelligent redesign at lower-res, the designer adapts a layout when using less pixels, eg. a keyboard might be redrawn to have less keys, a bigger asset might display full qwertyuiop, a lo-res version just qwerty. The qwertyuiop asset scaled down would be a blurry fuzzy mess.
Yes, I've seen that. It's especially clear when there are multiple elements in an icon (I think the one I saw had an envelope and an unread count, or something).
But, in this specific case - what's better about one cog icon versus the other? I can see a minor difference, but even at gunpoint I couldn't tell you which was superior!
What most designers don't do is use basic math on their designs, you can't scale down a 51px retina icon or button without it getting blurry.... but if you create a 50px button it should work just fine, same thing for borders and all effects. So always use numbers pairs.
Don't try to create a retina image with an 1px border,obviously it will not work when you try to scale down 50%.
I don't believe you should always work with number pairs. If the design works in Retina with a 1px border, but a 2px border is too heavy, use a 1px border. When you scale it down it will stay as 1px - if applied as a style - which will be fine.
As Jonathan says, it all comes down to how an app feels overall. Scaled down, blurry images do create the feeling that you're in a cheap, rushed app - whether you actually consciously notice that or not.
Sometimes designers DO go too far with these myopic analyses of pixels, but then I've seen a fair number of coders spend hours refining a piece of code for no real reason other than exactness. Exactly the same.
The difference in clarity of the stadium/seating plan is quite marked - much much clearer on the left one.
Meanwhile the buttons are much better on the right one.
Rather contradictory?
Admittedly the cog in this example is only subtly different — it's a graphical element that hasn't been affected too badly by the rescale.
But look at the edges of all those price buttons for example. On the scaled down version, they look really blurry because the edges are now no longer on whole pixel values, but fractions of pixels.
One might not perceive this to be important, but in using apps where the details like this haven't been sweated, things just don't feel right — as Jonathan points out, apps feel cheap and rushed. Even non designers will notice this, though they might not be able to specifically point out what's not right.
Design is about empathy.
When I design, I am placing myself in the viewer/users shoes and thinking about what it is they are trying to do/understand. The subtile differences may not be critical when viewed at first glance but the designer thought it affected the experience enough that he/she thought it needed to be slightly different.
Sometimes this is just insanity. Yes, I admit it is a bit crazy to spend 30 minutes on something that no one will really look at twice and I'm completely guilty of it. And as a designer, sometimes we can't help ourselves... because "it just doesn't look right." I can't explain what "right" is but I'll know it when I see it... so I'll experiment with a numer of different approaches.
Sometimes however, it's a genuine care for the experience and the cumulative effect of sweating the small things showcase a level of polish and care that Apple is/was famous for. You just have to decide whether it matters to you (as a company) or not.
Some of the design choices made for the two versions seem like just an evolution in the style for the app that weren't back-ported to the older version. For example, the different colors of orange for the button, gradient shading, etc. Other changes are adjustments that, from his eyes, seemed necessary to make the experience better/acceptable on the 2x version, such as the sizing of the Search button, border bevel, etc.
First off, I your subheadings directly reference the Beatles and the Smiths and contain an obscure reference to Better than Ezra. I can't tell you how happy this makes me!! (though if this inspires me to spend the day listening to the Smiths, I suspect some of my friends will worry that I'm depressed)
One of my closest friends says that 'talented' is just a nicer way to say 'obsessive compulsive'. In her view, talented designers simply notice things that normal people simply can't. Talented musicians hear things others can't. She believes that people develop these hyper senses because of a compulsion towards the subject.
I don't completely agree with her (though developing expertise sounds an awful lot like something the DSM-IV should cover). However, I think she is on the right path - talent in a field has a whole lot to do with learned processes and practice.
For example, here's an interesting article on how trained artists look at an image (compared to people who are not trained):
http://scienceblogs.com/cognitivedaily/2007/03/15/artists-look-different/
In case you don't want to read that article, here is a relevant quote:
"Vogt and Magnussen argue that it comes down to training: artists have learned to identify the real details of a picture, not just the ones that are immediately most salient to the perceptual system, which is naturally disposed to focusing on objects and faces."
I think that I'll let Better than Ezra conclude this for me. "She's not crazy...just a little misunderstood."
Thanks for writing this article!!
5 points to Ravenclaw for your excellent musical taste 🙂
That paper is great - very interesting to see what a deeper understanding does to a person's brain. A bit like taxi-drivers I suppose.
I don't know what machine you're looking at this on, but someone looking at the images is on a retina machine (iPhone, iPad, new Macbooks) the difference will be much more pronounced.
That's a good point. I don't think my MacBook Air has a retina screen. Although, remember, those designs are specifically ment to be displayed on non-retina technology.
Guess I need a new laptop 🙂
What are some details in work that you do (such as software development, running a company, blogging/writing, customer service) that a designer might not understand?
This entire post can be boiled down to this: pragmatism vs idealism. The author rightly points out that those running a business must make pragmatic decisions about on what employees spend their time. However, most of the time those same employees have never run their own business; they are not aware of the cost of their own employment. Those employees happily optimize single pixels in a massive image because it makes them feel good. They're not thinking about ROI, the likelihood that users will notice, etc.; they're thinking about targeting an ideal and feeling satisfied when they hit it. It's easy to justify that behavior by claiming that users notice, but at the author points out, sometimes they notice and don't care.
I'm also not a graphic designer but I think can know where a lot of designers stand.
A design is not the result of some logical process. Design (as is the whole UX) is a way for an application to talk to humans: designing interfaces. Therefor I think this human touch (for example measured in how laggish/responsive an app feels vs the response time in ms) is key in creating applications for humans.
Good stuff. The point of your article is well taken, Terence, and so are your concerns and frustrations.
You mention a couple of interesting things such as, why would you spend 30 minutes on a design decision that, from your point of view, no one will notice. Well, in my experience, fine-tuning the design might not be noticeable at first, but it all adds up in the end.
So if all the buttons look properly sized and aligned – with regards to each other and the other design elements – nobody will take offense. I have no special insights into the mind of the designer of the screenshots you've chosen as test subjects, but most likely there's more to it than meets the eye.
Who knows, perhaps the designer chose sizes and aligned elements with the intention of achieving consistency, not only on this particular screen, but on other screens of the app as well. Sometimes, I come up with comps that look good to everyone else who is not a designer. Then I'm sweating bullets, because five minutes before the meeting to show my stuff, I realize that all the right-aligned buttons don't quite match up with other elements above or below. Perhaps just by one pixel. Nobody else notices, most of the time, but as soon as that meeting is over, I'll hurry and fix any discrepancies I've detected "after the fact."
Sounds crazy right? Especially when you operate on the premise that most end-users look at your design on somewhat impaired screens (sweaty, cracked, etc.). Still, I would worry about trying to get it right for the best-case scenario (clean & clear screen), because, as a designer especially, you don't ever want to get a call from your CEO, telling you that one of his best buddies noticed that the button size in your design is not consistent with the buttons in that buddy's favorite thing-a-ma-jig app.
It has happened.
In the end, I think that there's a balance designers and developers should accomplish. "Perfect" is a nice goal for a designer and a developer, but "80% good" is more realistic in terms of getting a product shipped out the door on time and within budget.
Just saying.
PS: If it is necessary to shave 5ms of load time (or display rendering time), I would pursue that after v 1.0 has been shipped. It's one of those balancing acts when you know that shaving off 5ms here, 2ms there will ultimately result in a faster responding app, but you already need to get the next version out the door, and can't afford the time it takes to optimize your app.
Details makes us humans
(-makes +make) =)
mikecane says:
I think you should leave design to the designers and code to the coders. And I'm not being snarky. I'm remembering the incident from the Steve Jobs bio where Jobs' father told him to make even the bits people couldn't see beautiful because you, as the creator, would see it.
I'm a designer and don't disagree with this. I also don't think coders should still to code; everyone should design and spending extra effort should be justified.
There is an interesting conversation on Twitter about this: https://twitter.com/jonikorpi/status/286852375816314882
That is an interesting conversation. I'd just be worried about getting into a "Google Blue" situation where you expend a lot of effort trying to measure something which may not be quantifiable.
Thanks for the comment.
Interesting article.
Maybe I can give some perspective as I am both a "classically trained graphic designer" (who happens to work on iOS App interfaces on a daily basis) and a UX designer. I often found myself filling both roles in projects.
First of all, aesthetics, as a designer, matter to me. Not in the sense of veneer or clutter – but scaling down Retina-optimized graphics to older displays can often lead to blurring problems, as Guy mentioned. It can look shoddy. Since it is my responsibility to deliver in an adequate quality it just irks me to go the easy way because it reflects badly on the quality of my work - even if the "average" users will never notice it because they either have a device with a Retina display or they don't.
I still feel that it is important to treat users with older devices with the same amount of respect as users with newer devices. If I see a gap in quality and I am able to fix it, I will do it. Within reason. There is a saying here: "It's possible to die in beauty" – you don't want to do that. But if you can identify a problem and are able to improve on the work you do, why not. I get the economic argument, but I don't think it really applies here. Designers are cheap compared to developers and the developers I worked with didn't care if they have to swap one asset for another – actually they insisted that we aim for the highest possible quality for the product we wanted to deliver. Development timelines are not affected by these small design tweaks.
Another thing that is very important to keep in mind: there is a big difference in how graphics are displayed on a computer screen and an iPhone display. It's hard to judge how big the difference in Jack's example is without looking at it on the devices it is intended for.
That said, I understand your argument. I wouldn't consider the scaling problem a showstopper, but since it's easily fixable with a few tweaks... why not just do it.
"I'm I the crazy one?" = apparently you are 🙂
Heh! It's beginning to feel that way 🙂
Is there a big difference if an automaker doesn't tighten every bolt in the motor, if they don't use quality stitches for their seats, if they don't polish every panel on the automobile?
Is there a big difference if a chef adds a little too much salt, or too little spice to their dish?
Does it matter if the phone is going to be held 50cm away? What if it's not?
As a designer, your goal is make something feel and look absolutely perfect in every imaginable environment. These little details are what separate a good design from a breathtaking experience. These little details are what separate a car like a Honda from a Ferrari. These little details are what separate Dell from Apple. My point is, designers sweat the little details because in the end, those little details can and will build up to make a huge difference in your end product.
It's not necessarily that you don't see the differences, it's that your brain doesn't consciously process those differences and take note of them -- but it may well do so subconsciously. Designers look for these things automatically, so in their case those things will be processed consciously (and they won't be able to improve on them before they've consciously processed the differences anyway, so this is important to them).
But does registering the details unconsciously matter? Possibly. Not quite about blurrier buttons but I've read a study recently on the effects of good typography vs bad. In the study, participants couldn't tell apart good typography from bad, but experiments showed that better typography positively affected their mood and even productivity (I wrote about it here: http://www.usabilitypost.com/2012/11/23/effects-of-typography-on-reader-mood-and-productivity/). You don't necessarily need to have the differences pointed out to you in order to feel them and be affected by them. The Google experiment demonstrates this as well.
It's up to you whether you have the resources to optimize every detail. Unpolished designs have never stopped good products from succeeding, but it doesn't mean that good products should remain unpolished, or that there is nothing to gain by doing it. We should strive to do the best work we can, within the limits of opportunities we are given, which means that if you don't have the resources then it probably isn't wise to spend all the time polishing an early product, but if you have higher ambitions and want to build something to last, then the details will matter as they will be noticed over continued use.
That is exactly what I'm looking for! Thank you. What seem like insignificant details can sometimes have a real-world impact - it's not just designers being pernickity.
Douglas says:
Here's a quick article about pixel alignment: http://likethought.com/lockfocus/2009/10/pixel-aligning/
It seems like you're talking about different things, he's pointing out a technical problem (do my elements which should line up with pixel boundaries line up with the pixels?) while you're asking a higher level question (would someone be able to use the software looking like this?) It's easy to see how there could be a miss-match when comparing the answers to those two questions.
Well said. Designers are geared to see and deconstruct things, from typographic subtleties to gestalt in design. While non designers may not be able identify what's different and why, they are still subject to varying degrees of positive or negative aesthetic experiences.
Both designers and developers (and content strategists / IA's and UX Designers) all practice a craft in which the goal is to deliver the best to the user, be that sustainable content structures, beautiful design, or optimized performance. The overlap between them is where a lot of the push and pull happens (i.e. Do we forgo small design details in favor of overall performance, do we show all of the ideal content if it results in a slightly clunkier design, etc. ). There's no straight answer, decisions are made within the context of the project. If there was a straight answer, we wouldn't be designers.
With the two images, I think you're just looking at the wrong thing - I believe the designer is talking about the actual anti-aliasing that's going on with the bitmap scaling - How four pixels are represented as one in the smaller size, not any real changes in the size of the elements. The blurriness that comes from using the wrong scaling algorithm can be extremely annoying on smaller screens, and is what most designers are referring to when they talk about 'pixel-perfect' in regards to scaling..
At the end of the day, it's not about being able to understand/do someone else's job, it's about having clear enough communication that you don't have to..
Benjamin Rush says:
Without waxing philosophical on the subject, I believe it comes down to the integrity of the product. You want something that holds up to the highest standards from top to bottom.
If you're not going to tidy up with whole pixel values, then why even name the layers/groups in your source file? Why name the file anything other than Untitled1.psd?
It's about holding the quality of your work higher than the ultimate value the consumer will see it.
I completely agree. We should keep to high standards. My original question was about whether the difference in quality was quantifiable. I can see that there's a difference between naming a variable $thing and calling it $current_tax_rate. But is there a difference between that at $CurrentTaxRate?
With the graphic design, I can see a small difference. I want to know if it has any kind of meaningful impact on the user. From the discussion here, on Twitter, and HackerNews, it looks like it does.
Parag says:
Completely agree. However, "designers" and "stylists" are different profiles. They merge, and people who are "designers" after a point of time, do become cranky to be absolutely pixel-perfect with their visual elements (apart from the design) as well.
To explain it in a programer terms, it's like refactoring a code that works. Even if it's written in a decent style, event if it's bug free and fully maintainable, many developers (and I'd say any good developer) will still feel the strong urge to re-style the code, to optimize the logic to use a more elegant loop, better testing or something. People just enjoy building beautiful things they are proud of and IMHO willingness to take that extra care of details is certainly not a bad thing for any creative professional... the company might loose a few man/hours here and there because of it, but in a bigger picture it will certainly benefit from the overal quality of work done in such a manner...
"I can see that there's a difference between naming a variable $thing and calling it $current_tax_rate. But is there a difference between that at $CurrentTaxRate?"
Oh, you want to talk crazy. Get a bunch of developers talking about underscores vs. camel case.
Bilbo says:
You don't need to see it, but your brain can notice it. It adds to your impressions about the app, it won't look right. Just like a slightly detuned string in a guitar can make a chord feel wrong. If you play that to people, they won't be able to tell you it's a detuned string, but they perceive "something" different.
Now, the Google example is totally exaggerated. They did it because it's pretty easy to setup an automated A/B test and collect results in a couple hours/minutes. It didn't require weeks of effort, probably a couple hours at most, and it doesn't represent the usual design process at all.
Mike Bartlett says:
What I think is an interesting question is where do you draw the line with regards to what is worth it and what isn't. For example, say you let the stadium screen slide and go with the slightly blurry assets. No, the world didn't end. And so the next time you take another little shortcut until your design deteriorates from highly considered with great attention to detail to just good enough.
As soon as you stop respecting a designers attention to detail, you no longer respect design. Those bugs they file when they want something moved 1 pixel, important. Especially when they all start adding up.
ralph says:
I think designers should implement their designs. If they did, these discussions would go away.
This is more like a discussion about business strategy and efficiency.
It would be a disaster if business people don't try to understand designers, especially if they decide to not let them use their full potential to reflect and have their say in every decision making regarding deliverables. Professional designers are aware of that everything they produce will not be used or taking into business. It might be frustrating sometimes but its something we deal with everyday just like business people, directors etc. have to take decisions they are not always comfortable with. Most times there is no budget for perfect designs.
However, I can tell you that this discussion is about delight. Remember this word, "delight", its one of the ingredients in success for many game changing companies. As been mentioned here by others, but in other words from me; pixel perfection means quality and . This is what makes people feel a WOW-factor around your products and brand.
Delight is more or less needed to be successful in IT-business today. Paying attention to this makes you standout better. Even the smallest of details can make you grow in right direction. Most of times startups are better of understanding this because they need really much "delight" to get into running their own business. Startups greatest weapon is delight.
Its not always efficient to pay attention to every detail but if everything in your product have this proof of delight in itself.. Then I'm very sure you will be payed right or even more than you expected for your product. Delight makes a lot of difference in how much costumers are willing to pay for your product just to feel and enjoy it all. That's the underlying answer to why delight pays off. It makes you sell more in the end.
Delight is most of times needed when there is an emerging market, new market or when a company need to showoff their product to steal market from other businesses. But if you are alone, or have few competitors, and have great business idea that solve a need in a good way for its users.. you might not need to pay as much attention to delight. You will probably not struggle with the competition.
Delight can also be awesome animations and good workflow. So don't stare blind at "design" as eye candy only. Design is also the feeling while using the product. This is what professional designers are great at achieving. Now we reached what UX turns out to be today and by here I stop writing. I just wanted to fill in what I think is the connection between design & business.
Further to people talking about subconscious influences - I've just seen this paper which says that hot chocolate tastes better from an orange coloured cup!
http://onlinelibrary.wiley.com/doi/10.1111/j.1745-459X.2012.00397.x/abstract
Becky says:
Yes, you are crazy! (but not for this reason) 😉 kidding... anyway, yes, in my opinion, well I have to say my experience of design and sometimes from an inside view is that you do get a lot of emperor's new clothes (I will probably be struck down for admitting that) and the challenge is to balance the developers wanting to get stuff done and out the door with the designers need to dust and look it over again and again and again until they are thinking on a different level (not always useful)... The thing is though you've got to understand where we are coming from... graphics is a branch off of fine art and as we know fine artist can create anything and give it a deep and meaningful meaning. This has been ridiculed but also praised, quite rightly. All designers are perfectionists; try and let a serif out the door or a logo in slightly the wrong place before it's ready and we will literally start a typeface-off! Now I don't work in design anymore I tend to find it works quite well, not being given ownership for any design (it's not my job) but thinking through the development of a project from a more developer side and using design-perfectionism to make things the best they can be within limitations 9stopping things before they go out too quicikly), it is good to see things from a developer/non-designer side and I do think that this is important for any designer and developer. Perhaps they should try this at google? As David Gentleman once said at a lecture I went to, 'the kite needs the string'... but before we bash designers too much, the string also needs the kite (string-flying is not aethestically pleasing or indeed even a little thrilling) 🙂
x says:
The images above were not the most cases in real world. Most times when you scale down the tiny vector icons they might look really blurry so under some circumstances it's necessary to make pixel-perfect for low-res screens.
We all know UI designer is different from UX designer, UI designer do have priority to decide which tasks to do first, so readability is important but depends on the priority.
And when you are designing UI or other graphic works, so you think it's a good thing to say, "please don't make a professional job because this okay job doesn't bother me" Try talk to the HR when your UI friend is looking for another job:)
I had to laugh at myself when I was looking at the differences between the two examples and I didn't even notice the obvious colour difference in the orange buttons!
You have to be careful using words like 'better' and 'worse' when it comes to design since a lot of things are judged by the current cultural aesthetic (unless you believe in some platonic absolute).
So one of the designs when scaled down has edges that snap to pixels to create a sharp border. Some designers will find it very satisfying to create a design that defined down to the smallest possible unit (in this case the pixel) I think this satisfaction increases with higher resolution displays like the retina. Others may find joy in a generative design where they set loose parameters and see what occurs. Others again may embrace chaos and like to randomly apply a texture for instance.
And of course designers influence and are influenced by each other so we see periods of style where something is first fashionable, and later will fall out of fashion when it becomes too common. Often this is driven by technology because designers love experimenting and like to push boundaries of what's possible.
In terms of the two designs shown, I do have a preference for the optimized version with sharp pixel-snapped objects and appreciate the skill that went into that, but then again from a pragmatic point of view think that the difference is so minimal that for the number of people now and in the future that are on a non-retina screen it's probably not worth the effort (or the extra ~25% asset file weight) unless you have the available time.
I'm inclined to side with your takeaway from this specific example. I don't see an appreciable difference, even on a MBPr.
I'd ship either, and if a designer told me he needed a extra time(and money) to ship the "better" product, and delivered me that -- I'd be extremely disappointed.
No doubt, designers pick at these things in their own circles, but outside of that clique, the business won't loose anything by shipping the "lower quality" product, sans the cost of design.
Indeed, there are parallels of this behavior in development -- people who are anal about cross-browser degradation or tedious about coupling/concern in code design. The process of graphic development for electronic displays should be one of building and agile response -- perfectionists exit stage left.
Individuals who think they are doing products a service with this level of detail are simply practitioners of academic pedantry, looking to stick feathers into their cap by reducing the amount of time it takes to edit everything into their respective resolutions; or simply bragging that they even managed to do it. A UX lab wouldn't even bother testing the difference.
Anytime an industry does a hand-wavy "It's just magic" or "indescribable feeling" bullshit, it's just marketing. I would be shocked if there was a statistically mesurable difference in the two designs. Personally, I haven't met any really amazing designers who focus on these kinds of detail. I meet plenty who puff up about these things by try and deflect attention from their mediocre illustration talent or inability to work in traditional media.
Don't worry, you're not crazy, just outspoken by a social clique of professionals with inflated ego.
Designers are taught that details such as these are important because users subconsciously notice them - you may not see them but you will notice them. If designers don't put that kind of quality control into their work it becomes that "good enough" mentality where designs degrade over time because we put less and less care into them.
Your ideas compelled me to write a blog post of my own (http://blog.mattpoland.net/post/39592270358) -- I'm with you on feeling somewhat intimidated by graphic design, but as a UXer I focus on feel being as important as looks. I'm also glad to find another web nerd who's into Shakespeare. Cheers!
The differences are clear if you train your eye. I'm a developer, not a designer, but the kind of flaws in the image add up on a website if the same "ship it" attitude persists to long. Sneaking in not so good design everywhere will cheapen the look of your site, and much like technical debt, become a huge burden later on.
I used to work for Bing and one of the big issues during my time there was the fact that dozens and dozens of answers (not regular search results, the instant answers on top) had different visual aesthetics and were not consistent. Enough visual artifact had accrued as well, that they just didn't look good at all and made for an uncomfortable user experience.
OK, points in the article about overdoing stuff are well made.
But, arg. Obviously the right is the original and the left is the resized one. Don't look at the arena which is scaled down in both, look at the buttons, icons and text. Button edge is 1 pixel gray line with 1 pixel white inner edge and a 1 pixel drop on the bottom. It is crisp and has the clean iconic look. On left, this has been blurred, the right edge of the button is especially abysmal. Likewise the gear, it's pixel art, on the left it's blurred. Text is already antialiased so resampling it doesn't damage it too much. The stadium oddly pickly up a white halo on the left, probably after resampling they applied a sharpening filter that caused that.
Should you redesign icon and other art that uses 1 pixel lines and shading? Yes. Does it make it seem higher quality? Yes. Should you fiddle endlessly with everything? No.
One of the images is blurry, the other one is sharp. I fail to see how the difference is not obvious. The one that is sharper also has more aliasing. It is a trade off which way to go on that. Obviously a higher DPI screen could give both sharpness and smoothed lines, and as you said above in this thread, this was a non-retina app.
But the difference is quite obvious. Look at the numbers on the seats, the blurry image is quote obviously blurry and gives the impression of a scaled down image, the sharper one says "oh hey there are numbers here." They are not readable in either image, but the sharper numbers look a lot better than blurry scaled down crud. (IMHO)
There are a couple of issues here and philosophies about which solution (do something vs. do nothing) and when it's appropriate (no money, no time, etc.). I can't speak to those nebulous scenarios, but if you're designing fullscreen comps, leave the dogma behind and simply design at 1×, then scale up with "Image size" to 200% in Photoshop. No, 320×480 won't look sexy to your co-workers, but assuming you're using vectors and layer styles, it'll save you from a ton of work and it will be pixel perfect.
Here's an example of scaling up I did. 1×: http://media.richardcornish.com/portfolio/creatives/the_princeton_review-sprites2x.png 2×: http://media.richardcornish.com/portfolio/creatives/the_princeton_review-sprites.png
You can probably snap to even pixels in Photoshop to avoid blur going down to 1×, but then you have to worry about layer styles scaling, but even then rounding layer styles to integers isn't as bad as blurry vectors. If you want to finesse the scaled 2× version, you can, but even I have a hard time justifying subtle drop shadows at odd integers over simple even integer shadows. I feel that diminishing returns starts to set in, but Apple has started finessing some of their apps (Contacts in particular) in 2×.
Louie Mantia had a Dribbble shot about the pros and cons. I can understand the fight against blur, but to say that it's "clumsy" is overblown. http://dribbble.com/shots/641997--2x
General icons are different. It may make sense to go big, then scale down. It may make sense to go the other way. It depends on the icon's lines and the detail you want to achieve. (Think Mac OS X icons and not swiss minimalism.) Fragmentation on Android, however, has guaranteed that pixel perfection is an illusion. I would design for a popular device and serve blur to the rest.
Among the more popular posts written over the years on sub pixelation:
"About those vector icons" by Kirill Grouchnikov http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html
"Designing for Retina" by Marc Edwards http://bjango.com/articles/designingforretina/
"We're in an icon-sharpness limbo" by Simon Samurai http://simurai.com/post/19895985870/icon-sharpness-limbo
"Pixel-fitting" by Dustin Curtis http://dcurt.is/pixel-fitting
"Your design is wrong (and here's why)" by Mike Rundle http://flyosity.com/application-design/your-design-is-wrong-and-heres-why.php
in this case it was about having the background pixels black versus white since the foreground text is white. the black contrast on white is easier on the eyes than white on white and that is where the graphic design optimization lies. we programmers face the same dilemma when a page gets rendered optimally by the back end code or when the code is cleaner and more readable by another programmer, except we look at it from a different perspective and when both the graphic and code design get looked at from the 30,000ft bird's-eye view (the biz) there is no difference: the same output. there is a difference in the graphic design, but not quantified in bits or time, yet still appreciated, and this difference in graphic design, IMHO and probably backed up by hard stats, would lead to more attention span to the detail when put in front of thousands to millions of users.
Lel says:
Design is not about delivering perfection, design is the process of making conscious decisions to deliver the best compromised solution in a constrained environment. Time is always a constraint we have to deal with, just as "doing nothing" is always an available option. A great designer in any discipline should know what to do, and also what not to do.
I think we're all a little crazy. 😉 As designers, it's in our nature to obsess over the details. This article DOES do a great job of showing a manger's perspective. A perspective that is hard to argue with logically. It does cost money to slave over the details that people might not notice when they're fully engaged in a product's experience.
I agree that you have to draw the line somewhere, but don't forget to stick up for designers when we passionately argue for perfection. It's the little things that define our craftsmanship, make us become better designers, create innovative products and ultimately start new trends. We do it because we care.
Kyreena Hay says:
A cog has a very specific definition of shape. The one shown there very clearly looks like a bad rendering of a cog, while the other clearly represents a cog. I would not be happy with the "thinner" cog either. Puke.
Details like that are what differentiates artists from those who lament "I wish I could draw/ paint". We see the details, and obsess over them, and they are oh so important. A face is made up not of the whole, but all the little details; down to the cracks on your skin, and the tiny hairs you never notice. If even one were missing, you would not be replicating the object correctly, and it would be "off".
A bunch of you really can't see every border turns blurry when it's scaled down? Look at the full res animation and not the two scaled versions, they destroy the differences between them because all the borders turn blurry.
I can see that they look slightly different - I wouldn't say blurry at this distance. What I don't understand is why some people think that "blur" looks bad.
Every designer should be a perfectionist. If I'm scaling images I just couldn't leave half pixels everywhere. Yes the average Joe might not notice half pixels here and there but if you can't do your job properly then whats the point in doing it at all?
As a developer are you happy when an error log grows bigger and bigger by the day even though most of the time the users experience isn't affected?
Just an on-topic aside, I do find the contrast between your text - especially your quote text - colours and your background colour to be sub-optimal, making the article slightly harder to read than it need be, especially on a screen which could do with a bit of a clean. That's the importance of spending that little bit of extra time trying to get a design perfect vs stopping at the point the designer's account manager thinks it's 'good enough'.
That's a very good point. As per my last two posts, I'm in the middle of changing theme. Obviously I have some work to do!
And, yes, I do see what you mean with the quote text.
In my opinion, the clarity of the cog icon in the right hand image is much better. If I was paying premium prices for apps, then this sort of thing would matter to me. Interesting article though, I think sometimes designers are just overly pedantic (and crazy)
As a designer, I have come to learn that the details are what makes or breaks a design. I have also learned that most people (viewers/users) don't notice the details that we spend hours on. The flip side to that is that they ALWAYS notice the details we don't spend time on. Are we a little crazy? I'd put money on yes.
Another point is this. The questions you raise are battles we constantly fight. Design is often times undervalued or an after thought. Maybe not at a large client level, but when you get down to the smaller jobs; people expect a lot for a little. Customers want a Nike level design for a Shady Bob's used car price. These details you are pointing out are the difference between the quality of a design. It is difficult for me to NOT pay attention to these details, but for Shady Bob... they're probably not going to get as much time.
When you start skimping on the little things here and there, it adds up and people will start to notice. It's better for my sanity to just do it right the first time.
bbarclay says:
I'm sure someone has mentioned this here, but I haven't taken the time to read all the comments so I apologize if I'm repeating. The difference you're not noticing happens when a pixel "alias" and looks blurry - which you can see on the buttons of the 1x version you created. Since the 2x is twice the screen size of the 1x, you must always design in numbers divisible by 2, ie; your button stroke should be 3px because when you convert to 1x it becomes 1.5px and you can't have .5 pixel... it's blurry and for all intensive purposes, wrong or bad design. You don't particularly notice it the way you notice the color being different, however there is always a feeling that something about the design isn't right. Once you snap those vectors of, say the buttons to the pixel grid and it looks sharp and crisp, it's the ah-ha moment. Most people won't notice it outright, however, they do notice the difference between a good design and a bad, and most of the good designs adhere to the pixel-snapping principal. Imagine an architect not taking the time to line up and exact his blueprints, the building might stand up but it won't be perfect or safe - and who wants that.
bbarclay says:
*"Shouldn't be 3px" - not the best proof reader...
Juergen says:
I'm more of a pragmatic person myself when it comes to setting out a web page. I don't always apply all minute fixes (and most likely very time-consuming patches, which inflate the code) so that a page is completely backwards compatible to a browser released sometime 10 years ago. I make sure that the page displays all important elements and that the formatting isn't playing up or breaking, but I don't go down to pixel perfection. If a gradient or shadow isn't displaying in IE8 then I make sure the page looks clean without it.
My thought on this: it's importent that the information is getting across, and the person using this old browser has probably never ever seen the latest whiz-bang effects one can create for a modern browser (or if it would be of any importance to these people they would have upgraded). So this small group of site visitors aren't even aware of what they are missing = neglectable.
Example: on my own page I'm right now installing a slide show for the page background image; this is not working in IE (not even in 9, only in 10, which hasn't been released for WIN7 yet), so I make sure that the nicest of all slides is the fixed background image for IE.
I've worked on both sides of the aisle, heavy on design and heavy on coding. If you notice in the after picture, all the icons and numbers are bigger or easier to read, and that's really the crux of design. Content is king, if you're not presenting the content in an easy to understand way you're hurting yourself, and if it's not easy to see you're killing yourself.
I bet the before photo's web 2.0 glow on the buttons is making the white numbers difficult to read, especially with glare. In the after there's more contrast and it's easier to see. Also, as others mentioned, it looks like he snapped to the pixel grid on one and not the other. With the snap none of the pixels take up an unrenderable half-pixel on the screen, so everything is displayed the way it was intended instead of on the whim of the graphics processor.
This is a good article to explain for example why a line or a border is not just that, I recommend all to read it http://www.andyrutledge.com/the-design-lesson.php
I think of design as more than just the elements on one screen. How does the app flow (workflow) is far more important for me. I am also a developer.
But, I have made the transition to designing and building(including graphics) apps for kids. The nuanced coloring can often confuse kids. We have to deliberately make images simpler. Screen designs have to simplified to the extreme to focus on just the one thing at a time.
As a self-funded very small company, we also have to keep ROI in mind. I have found that tinkering beyond a certain point is just as likely to make the app worse as it is to make it better.
Should you try to think like a designer? Having to do my own graphics has certainly taught me to appreciate graphic artists. Because I design and code, I can take a fuzzy concept and play with the graphics or the code to find the optimal solution.
I know this article is way old, but I had to say that this is simply why designers are designers and those who are not are not: perfectionism.
A good designer has a desire for complete perfection--regardless of whether anyone will actively notice it. I like to think that people do, but more subconsciously.
You just tweeted this, so I read it for the first time, and I'd like to call you out on the "5ms" statement.
Human reaction to delay is not linear; the difference between 98ms and 103ms (close to the fusion threshold) is far more likely to be seen than the difference between 25ms and 30ms. This leads to a situation where, depending on the rest of the processing in a request, it can be worthwhile optimising out 5ms in the place where it can be optimised, so as to bring the total request down from 102 ms to 97 ms (pushing it over a perceptual boundary for most viewers).
Further, if you have anything quantising time for you, the effect of that 5ms optimisation can be magnified by going over a quantisation boundary - the difference between 32ms and 37ms is small, but on a 60 Hz display refresh rate, that's also the difference between a consistent 33ms per frame, and variation between 50ms and 33ms per frame depending on exactly when in the external 60 Hz clock you hit your 37ms target.
I suspect that "pixel-perfect" design is similar; it's not that any one bit of pixel-perfection makes a particular difference, it's that the combined effect of many small improvements is non-linear, such that a lot of small improvements adds up to a much bigger improvement in feel than you would expect.
@edent says:
An interesting point. I think what I was saying was that there is no quantifiable way to measure the "improvements" of pixel perfect design.
If there's an A/B test showing that all those small improvements add up to a tangible improvement in engagement/satisfaction/retention/whatever then, sure, go obsess over them. But if not, designers shouldn't pretend it's anything other than personal preference.
The trouble is that, if my theory is right that it's the same as a 5ms processing delay, the problem you will face when A/B testing is that (for example) getting the right shade of blue on a link is basically useless, but the difference between (say) this site with all the custom CSS and with minimal CSS (just enough to get the layout right) at all is significant - it's just that no one change tips it over the edge, it's the combination of a very large number of small things (distinguishing user name from comment, for example).
This brings back a lot of memories of working at digital agencies.
Some designers really failed to grasp the concept that 10% of the work can take 90% of the time. Frustratingly it created a narrative that, instead of saving the company time, I was being lazy.