I’ve been asking myself this question for a while but I’ve never been able to come up with an answer. Why do people fall in love with products? What causes this most elusive and desirable level of customer loyalty? What is love?
Storytelling
Along with UX, storytelling definitely falls into line as one of those “we really need this, but we have no idea what the hell it is or how to implement it” things at startup companies. I’m pretty sure “storyteller” isn’t a job title yet but community managers and marketers definitely cover many of these bases.
Storytelling is the holistic process by which a company interacts with customers. It’s the voice and personality you use in branding, product strategy, and throughout your product. It’s in the copy, visual design, PR stunts, Twitter profile, etc. – literally everything a customer could ever possibly see in relation to your product. It’s a miraculous thing because it influences how people feel about your product and – if executed properly – how they feel about the people behind it.
Storytelling is a vast subject, and I’m constantly learning new things. Here’s what I’ve learned so far, just from observation and trial/error:
Be bold. Just as people don’t like formulaic and predictable movie plots, they don’t want “just another ___,” and they’ll never fall in love with that story. Do something special and stand firm. Did you see what Minbox did with their intro video? Totally unexpected – in a good way.
You will alienate some people (but not in a mean way). I don’t like gossip magazines or Rolex watches because they appeal specifically to people with particular interests. Find your niche and cater your storytelling to them. Not only will your story resonate with them, but they will tell everyone they know how much they love you. If you try to be everything to everyone, you’ll end up with a story no one can relate to.
Good storytelling is a full-time job. Every single string of copy, every brochure, every banner ad, every app update, and every Tweet can either reinforce or dilute your story. Never let your guard down, and don’t get sloppy. It only takes one person walking through a theater to break the illusion.
Every time I tweet at @Fab and @PhilzCoffee, I know I’m going to get a response. Do you have any idea how good that makes me feel? I’m getting personal attention from a company whose products I love. I fucking love them for that. And I know it’s not just me – seemingly everyone gets the same attention:
Alexis says you’re welcome @quan We’re here for you.
Personal attention – whether the customer is praising or complaining – is major. The fact that so many companies don’t even bother makes it even more meaningful and delightful. Companies like Zappos and MailChimp do this through their customer service channels as well. Showing that the company is made up of really nice and helpful humans goes a long way towards building trust and falling in love.
Delight
This is something many product designers hope to achieve – myself included. Delight happens when you surprise a customer in a good way. With heaps of horrible, horrible apps out there, many users expect the worst. When you surprise them with animations, coupons, fun copy, and beautiful design, you stand out as something special. A diamond in the rough. Something to get excited about.
Delight isn’t easy to measure, and I don’t think I’d even know where to start writing about it. It’s visceral and I can only describe it as one of those “you’ll know it when you see it” kind of things. The most delightful interactions are so simple it’ll blow your mind; but they’re deceptively difficult to achieve. It is hands down the most challenging part of my job.
There’s no secret formula for love. Just like our personal relationships, it’s a complex blend of communication, happiness, and trust. Companies have to work extra hard at this, but also have the most amazing opportunity to delight many millions of people. Tell a story that resonates with the people who matter most. Interact with these people in a personal, genuine, and meaningful way. Delight users by surprising them with unexpected good that only your special company can provide.
If you blend all of these things perfectly, customers will fall in love; not because you’ve tricked or deceived them, but because you’ve created a product that is genuinely worth loving.
Talk about “Flat Design” has exploded over the last two or three weeks. It’s almost become as much of a meme as Skeuomorphism became a few months ago. There’s a critical piece of this discussion missing – that’s got to stop.
“Flat” and “Skeuomorphic” aesthetic, not design.
Aesthetic (how something looks) properties do not wholly describe the overall design of a thing. “Design” as a descriptor represents the process, intentions, and execution of an idea, and aesthetics makes up a very small part of that. To distill our discourse on design down to the aesthetic choices is seriously disturbing – it discredits the most important considerations we as designers must make in order to create good design.
It’s not your fault
Aesthetic fads are easy to talk about, and fun to brag about. The entire function of sites like Dribbble are to ogle pretty things made by other designers. Writing inflammatory blog posts about Skeuomorphism generates lots of banter on Hacker News, and drives tons of traffic. Products redesign to fit in, also generating loads of designery buzz.
Talking about user stories, usability studies, or accessible UI elements isn’t sexy – those posts don’t generate much traffic outside of UX designer circles. It’s not easy to ogle a screenshot of a DOM network performance inspection.
Symptoms of a bigger problem
Why is there such an outcry against Skeuomorphism? The main argument is that it gets in the way of usability. Flat aesthetic is lauded for being more honest, simple, and easy to understand. It removes the extra ‘stuff.’ But Flat is just as guilty – just look at the comments about Dropbox’s new iOS app:
“unfathomable icons thrown all over the place.”
“It’s a bit weird. It doesn’t indicate "Edit” or Change or whatever to me visually. I’d no idea what it did until I tried it.“
"So I’m supposed to remember the positions now? What happened to designing intuitive icons? It took me a while to understand why the check mark meant Edit.”
These pain points go far beyond aesthetic – down to the levels of user experience and usability. Skeuomorphism and Flat are disparate visual solutions, yes, but neither is a solution to the massive usability problem. They don’t even scratch the surface.
Useful Design
I’ve got a new metric we should use to evaluate our work. It’s not a new idea, but it happens to be the most practical metric by which to evaluate any product you’ll ever make, and the only one that really matters to your customers:
“Is my design useful?”
Think first about the problem you’ve set out to solve. Think about implementation. Think about utility. “Easy to use” and “beautiful” are awesome goals, but ultimately mean nothing if a product isn’t useful to begin with.
As UX begins to mature from just being a vague buzzword, more visual designers need to consider usability and utility concerns in their work. Before you post that shot to Dribbble, think about who will appreciate your hard work more – a handful of anonymous designers, or the customers you’re creating the design for?
Don’t get me wrong – aesthetic choices are important. They set user expectations, elicit emotion, and reinforce a brand – our brains make these judgements in milliseconds. Great UI is a crucial building block of great design. Many UI elements play a huge role in affordances (the ability to intuit function from form) – working either for or against.
Unlabeled icons look great in a screenshot, but will a user understand what they do? WIll they make the product easier to use? WIll they help make the product useful? Think about whether or not your aesthetic decisions will hinder your solution to the customer’s problem.
So?
Flat aesthetic is great. Skeuomorphism is fine too. It’s even okay to gush over sexy UI on Dribbble and explore aesthetic fads in your own work. Just don’t forget the other 90% of what makes a design comprehensively great.
Design is a form of problem solving. Never forget that.
I believe the worlds of designers and developers are not as dissimilar as people think. Both cultures immerse themselves in technical professions, sometimes carrying a certain amount of elitism, but always with a passion for craft, self-betterment, and pushing the boundaries of what’s possible.
It’s unfortunate, dare I say disastrous, when that elitism hinders the interest within curious outsiders to learn. Coupled with unknown unknowns (ie: “I don’t know what I don’t know”) learning a new skill from scratch can be hard – especially when there’s no starting point. Humans are also inherently lazy; most New Years Resolutions never ever make it into February. Self-betterment is tough to stick with when life gets in the way. Sites like Code Year and Treehouse have made some progress in this area, but I’m certain there’s a way to hack the retention issue.
I’m co-founding a project called Hack Design which aims to solve this problem. Every week we send out 5 links relevant to a specific and actionable area of design. This leverages only the best design content around the Web, and allows us to partner with the world’s top designers to curate this content with us.
For our users, it’s just like a hyper-focused RSS feed; but it never gets out of control. There are no points, no leaderboards, no gamification. The onus is on the programmers to take the resources and learn at their own pace. Since we’re just linking to outside content, they’ll learn on their own who to follow, who the best design thinkers are, and what resources they feel are most helpful.
It’s not a new year’s resolution, and it’s not a full-fledged design course. The current iteration of Hack Design is easy enough to follow along each week, with minimal mental equity required to stay up-to-date. Many people will drop off, but even for just a handful who stick around long enough to learn what they need to learn to make their projects better, we’re still making a huge impact on those people. We’re not solving design education, but we are hacking the starting point. If you learn what you don’t know, you can do something about it.
Retina Photoshop is now rendering documents at a 1:1 pixel ratio, which makes sense. It doesn’t, however, work very well for “non-Retina” PSDs. They end up being scaled down to an impossible-to-edit size.
Fortunately, there’s an easy fix! Just scale to 200%:
Easy, right? Well, it could be a lot easier.
Adobe has pre-defined keyboard shortcuts for “Zoom to 100%”, “Zoom in”, and “Zoom out”, but not for “Zoom to 200%” – something you’ll likely use every day if you’re editing non-Retina documents. Fortunately, there’s a really easy fix.
1.
In Photoshop, go to Edit > Keyboard Shortcuts.
2.
You will be presented with all of the keyboard shortcuts available in Photoshop… did you know they’re fully customizable? You’re going to add one here. Find “View” in the list, then look for “200%”(near “Fit on Screen and 100%” zoom options).
3.
Put your mouse in the “Shortcut” field next to 200%, then type in a shortcut you’d like to use. I chose Opt+⌘+1 since ⌘+1 is the “100%” shortcut, so this new one will be easy for me to remember.
Press Add Shortcut and then press OK, and you’re done!
Now you can continue to edit 1x PSD files with ease, without interrupting your keyboard shortcut zen. Enjoy.
For the past two months, we’ve been reinventing Kicksend. What was once a humble filesharing platform is becoming an incredibly simple way to stay in touch with family and close friends through photos.
As a part of the redesign, I’ve scrapped the old aesthetic completely. Along with fast and easy-to-use flows, we’ve simplified the visual design. We even use it to guide users through common actions, and through (technologically) complex actions like professional photo printing. You’ll see the result of this work in a few months… we’re not done yet.
While working on Kicksend, I’ve been tempted many times by skeuomorphism, for several different reasons. We have galleries, albums, sending… all things you can touch or do in the physical world.
… an element of design or structure that serves little or no purpose in the artifact fashioned from the new material but was essential to the object made from the original material – Wikipedia
Our audience consists of nontechnical people and parents – people who would understand how a physical photo albums or snail-mailing photos work. They’ve seen and done those things before.
It’s logical, user-friendly, and trendy. Apple does it. That must make it okay, right?
Skeuomorphism is a bad habit that designers have picked up, and it needs to stop. It doesn’t make any sense.
It’s not just a photo album
On the surface, it might seem like an “album” in our iPhone app is no different than the one sitting on my mother’s bookshelf.
They’re both called Albums
They hold a curated group of photos
They’re created with the intent of sharing
They’re created with the intent of saving / storing
But that’s really where the similarities end. In reality, Kicksend has vastly more functionality, and the interactions are more complex.
Share with n people, all at once, anywhere in the world
Realtime group comments
[redacted secret feature]
Metadata-related features
Printing at full-resolution to any Walgreens
It’s portable and occupies negligible physical (and digital) space
Some argue that skeuomorphism helps novice users understand how something works, but it’s a flawed argument. Skeuomorphism helps people misunderstand the capabilities and limitations of digital products based on their understanding of a physical analog.
It’s not design
Copying design choices (use of materials, shapes, manufacturing limitations) purely as aesthetic is toxic, and it’s not design. It misunderstands the very nature of what product design is supposed to accomplish and ignores the true nature of what the product is and what it does.
At the risk of sounding trite, I’ll quote Dieter Rams again:
Good design is honest
It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.
It seems like trends in web / app design follow what is most technically challenging to do instead of what looks or works best. Unfortunately, this current trend is less about design and more about creating artistic representations of old products. It looks sexy on Dribbble or in App Store screenshots, but that’s about it. These creations are incredibly hard to iterate on, and the analogy breaks once new or innovative features are added.
It’s easy
Sorry, but anyone with Photoshop can learn how to make stitched leather, wooden shelves, or neon text. It’s just art… and easily replicable at that. Some sites will even give you a finished PSD with all of the layer styles and assets created for you.
It’s easy to look at a photo and copy what you see, bypassing any critical thinking about user experience. It’s easy to think that copying an iconic product or using stitched leather automatically solves those problems for you. It’s easy to do what’s popular.
What can we do?
Do what designers and engineers have been doing for a century. Stay true to the content, materials, medium, and constraints. Build something that solves a problem simply. Well-designed products don’t need to look like something else to be easy to use.
At Kicksend, our entire business is keeping people close through photos. Customers want to be able to share photos with people that matter to them, converse around those photos, and print them anytime. We’re not using leather-bound linen or wax stamps to help them do that, and we never will.
I talk about Dieter Rams a lot. Partly because his (at the time) humble and understated work now defines the visual language of Apple’s entire product line, and partly because products he designed 52 years ago are still being made today. I mean, what the actual fuck is up with that.
Vitsoe 606 Shelving system, designed in 1960 by Dieter Rams. They still make them today, and to the same spec.
In 1970, Rams decided that he needed a way to objectively assess whether his work was “good design.” No such metrics existed, so he created the now world-famous Ten Principles of Good Design:
Good design is innovative
Good design makes a product useful
Good design is aesthetic
Good design is understandable
Good design is unobtrusive
Good design is honest
Good design is long-lasting
Good design is thorough
Good design is environmentally friendly
Good design is as little design as possible
Though originally created to objectify industrial design and physical products, interaction designers have recently begun to apply the principles to their own work. It translates brilliantly, and I use them constantly while I’m designing for web, desktop, and mobile. It’s an inflexible and industry-proven benchmark and it feels awesome to have that in my toolkit.
There is, however, one flaw. These guidelines were created over forty years ago, in a world where interaction design, UI, and UX didn’t exist. They don’t take into account lean startups or software that is constantly changing. I mean, Facebook pushes new code to production at least twice a day..
Most print design projects have a defined completion point… it’s not like you can go back with a Sharpie and correct 20,000 posters. Even physical products rarely receive updates mid-cycle – if something could be better, it’ll be in “next year’s version.” This doesn’t work for software anymore, and we need to make sure we’re thinking about that when we design.
We need another Principle of Design. Something that takes into account interactive software, short product cycles, and effortless distribution.
Good Design is iterative
Software products grow with companies and users, and get better over time. Iterative design is flexible, agile, and reduces the friction associated with growth and change. The designer’s job is crucial from day one, and their work is never done.
I’ve been a part of several design projects that flopped because we weren’t thinking about this. The “agency mindset” is also to blame. Once the project is ‘done’ the designer delivers assets and get paid. From then on, the startup can put them on retainer or hand off the project to the in-house designer – or the… engineers.
Everything falls apart when the startup needs to A-B test, or add a new feature, or iterate on what they’ve got. The layout is fixed, complex illustrations or visual assets were made by someone they don’t have access to, and don’t even get me started on fonts. They’re going to end up using Arial… come on. You know it happens. Ugh.
For websites and huge companies, this is ok. They’ve got the money and manpower to work past these problems. They also don’t iterate too often. You’re not at a big company, and you’re likely the only designer on the team. You can’t afford to not iterate on design just as fast as the engineers are on code. It’s integral to the product, and it needs to happen from day one.
In most people’s vocabularies, design means veneer. It’s interior decorating. It’s the fabric of the curtains or the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service.
–**Steve Jobs**
So how can we do iterative design? Many people are doing it already.
1. Responsive web
Responsive HTML / CSS layouts make it easy to create mobile and desktop friendly web applications. Branch.com is doing an awesome job with this right now – every few days I notice a subtle change here and there. Those changes affect the entire product, not just the desktop or mobile version. It helps them work faster and create a great experience across platforms.
2. Less, but better
Less noise, fewer icons, fewer lines and shapes. One of my biggest challenges is removing complexity from products like Kicksend and keeping only the essentials. Products like Google search are great at this. For the entire lifetime of the Google.com page, it’s been minimal and focused. You know exactly what to expect when you go there, and what Google enables you to do. At the same time, it’s simple and flexible enough to allow Google to create amazing Doodles and advertise their new products.
3. Ship every day
This is a mantra that takes some practice and dedication to adopt. I was introduced to this way of thinking by Allison House, and it’s alive in many startup designers. A designer’s work should never go stagnant, and it should always be open to improvement. User experience research, customer feedback, and new learning should always be happening, and you should always be growing as a designer.
Make awesome stuff. Ship design every day. Remember Dieter Rams' Ten Principles of Good Design, and keep iterating.
I’ve heard this story many times from many people, myself included:
“No one subscribes to mailing lists”
“No one cares about your Twitter feed”
“No one wants to watch some stupid Epipheo video”
“Only your mother will ever love your product”
In the startup world, there’s this perception that engagement is impossible, and that potential customers are completely apathetic. Unless you’re TechCrunched or have a patronizingly simple signup flow, there’s no way to get users. Even once you do, they forget about you in an instant.
The 1% rule states that the number of people who create content on the Internet represents approximately 1% (or less) of the people actually viewing that content (for example, for every person who posts on a forum, generally about 99 other people are viewing that forum but not posting).
Why bother spending the time creating email campaigns and Tweeting (super tedious), creating product videos (super expensive), or hoping that 1% of your potential customers will magically evangelize your product? It seems like a lot of effort for such a small percentage, and it’s hard to see any benefit to all of that work.
Example – I received an email from Art.sy last week and unceremoniously deleted it. I didn’t open it, and I didn’t even read the subject line. I just wasn’t in the mood and didn’t give a shit about what they had to say. As a product designer, it’s my job to let myself do these kinds of things… It helps me experience things from a customer perspective, and remember that most people don’t give a damn about me. Heck, I almost deleted Kicksend from my iPhone when it crashed the other day before I remembered that I work there.
A few months ago, I took a class on “marketing” for early-stage companies. At the end, during Q&A, a participant mentioned how he thought product intro videos were useless. He said he’d never use them because they’re trite and “typical of an internet startup.” The presenter paused for a minute, but what he said surprised me. He said that it’s easy to get jaded when you work in the industry, but there are so manysuccessstories with product intros. 1 They give people something to share and discuss. It’s a tangible piece of a (sometimes) intangible product.
It’s a strange thing, then, that I’m going to tell you to do those things, and make sure they kick ass. Make your mailing list prominent, but make it easy for people to subscribe and unsubscribe with zero fuss (and no confirmation damnit). Maintain an active Twitter feed, even if you’re just Buffering things from HN and TechCrunch. Commission a product intro video, and don’t stop refining it until it’s stellar.
Why? Because some people do give a damn. And those people are the lifeblood of your business.
I’m very interested in Retina display technology, interaction design, and Apple – so last week I started a small project called Retina Mac Apps. Gizmodo calls it “the new App Store for Retina Mac owners.” As we were putting on the finishing touches, I asked myself if we should have a mailing list. Nah, who would use it? Who cares enough about Retina Mac apps to receive a weekly digest?
As it turns out, over 200 people do. And the list is growing.
Why did I choose to include a MailChimp signup? I figured that, since I’m really passionate about this, there must be other people who are too. I’m building this thing for them, and I want to give those like-minded people the best experience possible. Isn’t that the point?
It takes a certain amount of pride (or maybe arrogance, I’m not sure) to admit to yourself that your product is interesting enough for strangers to follow or evangelize. Don’t shrug them off as an unlikely minority – embrace them. Give them no choice but to gush about you on Twitter, share your video, or talk about why they love what you do. Help them tell the story, and keep them engaged. It won’t be viral growth, but it’ll definitely be the most powerful organic growth you could hope for. If you don’t make it easy, they’ll find something else to love.
It’s easy to ignore 1%, especially with naysayers spouting off about how stupid Twitter feeds and mailing lists are. Unfortunately for them, that 1% represents most of the organic conversation anyone will ever see surrounding a product. Create great content, amazing products, and make them easy to share with others. Most people will never tweet, like, or share, but sometimes people do. Optimize for it.
Take a look at some history first. This post was originally going to be a short jab at Apple for cloning the “Dude, you’re getting a Dell!” adverts, but it left a bad taste in my mouth. I knew Apple ran some pretty horrendous ads back in the 80’s and 90’s, so I decided to watch a few of them before I hit “Publish.” I stumbled onto something that completely nullified my point. I’ll get to that in a second.
What kind of ads do we think of when we think of Steve Job’s Apple? 1984? Here’s to the crazy ones? Mac vs. PC? The iPod dancer silhouettes? Fanboy or no, it’s clear that Steve (and Chiat\Day) created some amazing and influential marketing.
The TV spots for the iPad 2 were particularly amazing to me. Instead of touting features, they advertised experiences. With iPad, you can see your grandparents. Engage your toddler. Compose musical works of wonder. There’s no “call gran gran” app, but the FaceTime feature enables that experience. I sincerely believe there’s no better way to sell a product than to appeal to emotion, behavior, and the problem your product was created to solve. Features, specs, and apps are a means to that end – definitely not selling points.
This frustrates me to no end with the barrage of Samsung and Motorola ads for Android phones, which use CGI and scantily clad women in leather to sell “impossibly thin” and “purple” phones. When all the Apple Fanboy bashing, pyrotechnics, lasers, and fake apps are done, I still have no idea why I’d want to buy that phone.
So back to that video I found. It recalls many Apple ads from 1997-2001 – just after Steve Jobs returns to Apple and saves the company.
The goal of these ads are to highlight the following:
Think Different
Pentium II is a snail, G3 is “twice as fast”
Apple lit an Intel Bunnysuit man on fire. G3 is “twice as fast”
iMac – they’re different colors
PC laptops are steamrolled, G3 laptop is “twice as fast”
PowerMac G3 can split open
Macs now ship with a laser mouse
This iMac is blue
This iMac is red
This iMac is white
Macs won’t break during Y2K. PC’s will
The PowerMac can perform 1,000,000,000 calculations per second
The G4 Cube is a cube
(PowerBook spec list)
So Apple… no, I’ll even just say Steve Jobs, has a history of creating cheesy, empty, meaningless ads. The latest “Dude, I’m a genius!” ads don’t represent the End of Times for Apple, but it sucks that they don’t think they can maintain growth and product interest by appealing to why people buy these things in the first place. MacRumors said it yesterday:
…it appears that the company is looking to humanize itself and make it less about the products and more about the entire Apple ecosystem, including the personal services offered at the Apple Retail Stores including the Genius Bar and One-to-One training service.
All of Apple’s marketing has been different lately. They’re pushing hard on the Retina display on Mac and iPad, and they’re using celebrities to sell iPhones. I think we should get over it and move on… for now. We can always pick up our pitchforks again when the iPhone 5 comes out and something happens that actually matters.
As a designer and life hacker, I strive, sometimes subconsciously, to optimize my life by whatever means necessary. I keep my keys on a hook next to the door with my sunglasses and messenger bag, my wallet has cards arranged by use frequency, and my furniture at home is arranged in such a way that minimizes walking distance between bed, my closet, the living room… you get the picture.
I’d like to stress the last one, though. I’m super obsessive about that. When I take the Caltrain (or previously, the T in Boston) I stand on the platform at the exact spot I want to be when I get off the train at my destination. It’s down to a science – I can reliably stand in the exact spot the doors will open. From there, I measure triangles and tangents in my head to walk the shortest possible route… it’s actually really obsessive now that I’m writing this down. I am an efficiency machine – or, at least, I was.
Here’s a fun little wearable computer that tracks steps, calories, distance travelled, and some other activity metrics that Nike+ combines into a “Fuel point” system. The arbitrariness of the points and the sparse “friends” component make for a pretty simple but addictive competition. Aside from my veg-out day last Sunday, I’ve hit my goal of 2500 Fuel points every day since buying the device a week ago. It has forced me to be more active than usual – and that’s the point. For me, though, it promotes a different way of thinking. Instead of finding ways to optimize activity or do something more efficiently, the FuelBand forces me to do the exact opposite. The longer I’m moving around, the better I do.
It’s strange how simply measuring something like casual fitness makes you think so differently about it. In order to meet my fitness goals, I constantly find myself moving. I get up more at the office, and I pace down the train station and back. I don’t strive for efficiency anymore, because I instantly realized that exercise is all about being as inefficient as possible with physical activity. Realizing that blew my mind, and it made my goal of achieving a relatively high level of daily activity a much less daunting task. As long as I’m constantly moving throughout the day, I can easily blow past the 2500 point mark.
I know it’s tough to stay active when working long hours in a startup. Priorities quickly shift – often away from taking care of yourself. Personally, I can’t get to the gym 3-4 days a week. I could, but I know I just won’t. The FuelBand is working for me so far, and it’s helped me see when I’m most active and makes me accountable for staying active. See? That wasn’t so hard.
We’re on the verge of a technological revolution that might take 10+ years to become fully realized. The Retinafication of iOS was almost immediate, thanks to high saturation of designers backing the platform, and the App Store only having existed for two years prior. The Retina Macbook, however, is fundamentally changing a visual world that is almost 30 years old – where visual designers are not kings.
Many websites and desktop apps will make the leap to hybrid Retina + 1x sooner than later, but how long until designers abandon 1x forever? The tech world abandoned Internet Explorer before Firefox even had 30% marketshare. It was easy for us to get behind ‘the cause’ of killing IE, but that was an easily replaced software product. Today we’re on the verge of a hardware revolution, initiated by a premium brand, that may or may not trickle down to PC OEMs. How long before designers start imposing a “1x Tax” on consumers with non-Retina computers because it’s too expensive and laborious to maintain two separate asset libraries? The problem gets worse – I can’t design for 1x on my Retina Macbook Pro. It’s impossible.
Try as I might, I can’t ignore the ham-sized pixels. Photoshop could, in theory, update to support Retina graphics properly, but what does that mean for 1x? Whether Photoshop scales a 1x image or not, I’m still not getting a real-world representation of a pixel-perfect 1x image on a 2x screen. It just can’t happen. The screen is too good to be backwards-compatible.
The simple solution (which I’m using now) is an external display – but it won’t be long before Retina Cinema Displays replace their outdated siblings. Apple has made it clear that “Pro” users aren’t their bread and butter anymore so, as they push Retina technology forward, 1x will be forcibly left behind. Incompatible. Old. Even if designers don’t hold a personal vendetta against the “ancient 1x-ers,” Apple will be an unstoppable catalyst. Before long, designers will be in the same position as front-end engineers who ‘forget to test in IE’. 1x will become an annoyance – even with 60% of the market.
So, what’s the long term solution? Knowing that Retina will become the norm among designers and engineers within at most three years, and knowing that software and web creators need to follow the path of least resistance, how can we make everyone happy? In the true spirit of the hacker, there must be a software fix to make this easier and, therefore, feasible.
Dustin has talked in depth about pixel-fitting or ‘pixel hinting’ and it’s a practice I’ve followed religiously since. I firmly believe that, someday, software will be much better at doing this for us, and true resolution independence might finally be viable. The “nearest neighbor” method in Photoshop already detects the hard edges of a document and preserves them when scaling up or down. Bicubic Interpolation can scale pixels smoothly, and works great on photos and organic shapes. They’re only really effective with raster graphics, though. Vectors are, by design, much harder to snap intelligently to pixels automatically in a way the designer might intend. Icons and many other UI elements can also be nearly impossible to auto-scale. Photoshop CS6 is the only program that even offers easy pixel snapping, and Illustrator doesn’t even think in pixels except when explicitly chosen as a measurement tool. This isn’t the really important bit, though – vector scaling is an entirely different issue. Read Dustin’s post (above) if you’re interested – it’ll blow your mind.
With Retina, we have the benefit of a perfect 1:2 scale up. This makes bicubic or nearest-neighbor scaling down much more accurate and crisp – as long as the 2x image uses even numbers for the ‘pixel perfect’ and fixed size elements. A 2px border, for example, cleanly becomes 1px. A 3px border, however, scales to 1.5px… not good. This is where I think software can help. If designers can only design at 2x on Retina displays and respect even numbers for the inevitable 1x scale-down, some really intelligent compiler (server-side or within an SDK) can take care of 1x – in most cases. It wouldn’t be a ‘set it and forget it’ fix… you should test, always.
There’s no proven solution for this yet – the iPhone 3GS is still on sale, so 1x is not yet dead on iOS by any means. Designers are still creating screens for 1x and 2x (a process somewhat automated thanks to Bjango Photoshop Actions), and probably will for another few years. Ironically, 1x will probably die on iOS right around the same time most designers and developers will be completely rid of their last non-Retina Macbooks and Windows PCs.
We’re stepping into unknown territory. Historically, designers and engineers have driven the abandonment of old software, and Apple is the legacy hardware killer. The future is inevitable – designers will stop creating assets for 1x displays.
As a community, we need to create software that can automate the creation of high-fidelity 1x renderings based on 2x input. The sooner we simplify downscaling, the sooner designers and engineers alike can push the Retina Revolution forward.
By the way, I created a website called Retina Mac Apps that makes it really easy to find Retina-optimized software for your Mac. Check it out and let me know what you think.
Vitsoe 606 Shelving system, designed in 1960 by Dieter Rams. They still make them today, and to the same spec.
