I'd argue that people generally have an underlying expectation that they'll be able to do far more on the internet with web apps than with physical mediums. If that is true, then having elements from the real world into web apps does promote a sense of familiarity and an intuitive understanding of, at the very least, how to get started.
The designer / minimalist half of me eschews ornamentation – I'm a big fan of the "swiss style". But, for all the recent ragging on skeuomorphism, there are times when it is appropriate. When we released polychord 2 with its dark leather and chrome look, it was in response to feedback from lots of our users who wanted something that fit in with their studio gear. We resisted the urge to use 'knobs' and other physical gadgets that would mess up the UX. It's just a skin, but it made a lot of our users happy. I also observed that the new physical hints made the app less threatening for new users to jump in and start playing around.
It seems like the lesson here is that Skeuomorphism is OK if you're modeling it after something that is gorgeous and tactile to begin with. Not all real-world objects are things that I even care to interact with in the real-world.
Contacts is an absolutely awful app on the iPad, truly disgusting (and not just because it looks like a book).
But iMovie? The movie browser looks whimsical, sure, but it’s at least very well executed and looks great. Also, the actual interface is very matter of fact, no skeuomorphism at all there.
So a very, very small part of the app is a bit whimsical, nothing more.
Its an extremely powerful and complex piece of software that mimics the pieces of gear in a sound recording studio. This includes the ability to turn the gear around and patch it via cables etc.
I've never sat down at a piece of recording software (this complex) and "just got it" off the bat as well as I did with this. A lot of it was understanding how everything worked in a regular studio translated right into the software, seriously amazing. It actually made me more comfortable in a real live studio as well since it allowed me to play with tools and effects "Virtually" that I'd never have at home.
Anyway YMMV but anytime someone tells me that skeumorphism is the easy way out and useless I look at Reason and shake my head.
Conversely, I find audio editing software is usually an example of skeuomorphism gone nuts. I don't mind a bit of it to guide me using concepts I already understand, but what is the purpose of imitating all of the bad parts of real life?
* Dangly cables that get in the way of stuff and are hard to follow, and you can't even tilt your head to see around them (and "Each cable plugs into exactly two holes"?)
* Physical-styled knobs. Often harder to control and more ambiguous than sliders or other circular controls that don't try to imitate a physical knob.
* Lack of selective disclosure and dimming leads to very overloaded UIs
* Mode switch/up/down buttons rather than directly selectable options
* Pointless ornamentation like screws, fans, handles
* Constraints in the physical model will often translate to constraints in the software
* Often only intuitive to people who are familiar with the thing it's based on
There's no reason you can't take the good parts of a physical interface and use those elements in a virtual interface, but there's no need to try and make it exactly the same. All UI is vaguely based on something that came before it, often something physical ("desktop", "window", "folder"..)
That's not to say Reason isn't great software, but honestly, music software does tend to be somewhat confusing anyway, and also tends to be very skeuomorphic.
I think he misses the point here that 'people like to have fun'. We know that skeumorphic designs aren't the most efficient and in some cases may confuse the user. But these apps aren't being used to control a spaceship. They are often used in the 5 min gap between meetings or on the train where a tiny sliver of fun is perfect.
Whereas when I look at something like Kicksend it's just another boring, stale and uninspired photo site. And yes, it may 'get the job done' better but if I am not enjoying using it then why not use something that does.
And that really is the crux of the argument here. You have a tiny window of opportunity to convince a person to keep an app before they will simply delete it and find something else.
You can maybe lure people in with nice marketing, packaging or a fun interface, but in the end you want users who stick around.
If you think about apps the most every day, they're quite plain or unfun. They're maybe pleasant, probably effective, and you use them to get things done.
Using a computer to do the things we normally do, e.g., sending bits to each other, requires that we adopt metaphors.
Even something as basic as a "email" is a metaphor.
How long does it take to learn a new metaphor? How difficult is it?
It's far easier to just stick with the metaphors you already know. And that is, I think, what "most" people do.
This applies to more than just computers.
"Some" people might like to keep trying new metaphors every week. Who knows?
One thing is for sure. Everyone learns the "email" metaphor.
Not just some people. Everyone. Food for thought.
I think the author is spot on when he says that in this context (computers) metaphors create limitations rather than educating people about what computers can really do. I even see this among developers who, one would think, are the people resposnible for enabling users to unlock the full potential of their computers. They are stuck on certain metaphors which limit what they can imagine and therefore implement. Independent thinking and striving for originality are in short supply among developers. The attack of the clones never ceases, in case, clones of whatever developers see other developers have done.
However, as insightful as the reference to "skeudomorphism" may be, it's clear the author's goal with this post is trying to downplay Kicksend competitors. Maybe ones that are styled like Instagram? (Polaroid metaphor?)
How many hoops does someone have to jump through to use Kicksend versus using something like Instagram/Facebook (for lack of better examples)? And do they have to pay for the "service"? Maybe that could be a factor?
I don't think everyone learns email as a metaphor though.
While I'm old enough to have sent and received paper mail as a means of communication, it's highly likely that my toddler will have sent email (and internalized the concept) before having interacted with physical mail systems. It's a metaphor for us to call it email but it's a vestigial name to the younger generations.
Think of the floppy disk being a metaphor for saving a file. Few people younger than 15 have used a floppy drive but manage to save files regardless. I also understood radio buttons on web forms as exclusive selections as a young person even though I didn't know it was a metaphor for real buttons on old car radios until a couple of years ago.
But a floppy disk is not a metaphor. The metaphor is a "file" as a description for a series of electromagetic charges on a floppy disk.
It is indeed interesting that children may likely interact with email before postal mail. But postal mail shows no signs of disappearing anytime soon. Probably not during your lifetime and the lifetime of your startup while you're acquiring a critical mass of users.
Do you think it will be possible to conduct 100% of your affairs in life without ever sending or receiving postal mail? That postal mail will never be used by anyone you transact with?
No doubt we may someday reach a "paperless" world where all your affairs can be handled without every using postal mail. And where people never ever use postal mail and have no reason to even know of its existence. Maybe your children may see this come to pass.
But for the purposes of your startup, is that day something you should be concerned about? Is your target market toddlers? Or people old enough to have credit cards, today? People who know how to use email.
I also started using radio buttons long before I learned that they were based on car radios, and once I did so I didn't suddenly start thinking of the buttons as metaphorical; it's just an interesting fact to me. And though I did use floppy disks when I was younger, the idea of a floppy disk no longer even enters my mind when I look for the floppy disk icon; it's just an arbitrary recognizable shape. (The metaphor is "save to floppy disk" as "save to any drive".)
This matters mainly because I won't be bothered if either control starts acting in a way that breaks the metaphor, like a save icon that saves to the cloud (no need to carry a disk around) or a radio button with a design that looks nothing like a car radio (like the current design, as best as I can tell). And it's not black and white: though I've always known a folder is based on a filing cabinet, I've never been bothered that they can be infinitely nested. The more people are familiar with the "metaphor", the less it's necessary to stick to purely metaphorical elements.
I think icons can be arbitrary. That's because I've seen some that are so obviously idiosyncratic to the developer; they bear no relation to the function that I can decipher. Some of them I can't even tell what the heck they are. "WTF is that supposed to be?" It's like your example of the floppy. It's a rectangle. It means save. Does it matter if no one even knows what the heck the icon is supposed to represent? If it's not intuitive? For the first few minutes perhaps until I figure out what the program it represents actually does it matters. Maybe it gives me a clue maybe not. From then on, once I figure it out, it's irrelevant.
This is one of the 1001 reasons I think GUI's are a waste of time. I can just as easily tell a user to hit a particular key (i.e. a tactile button) or type "save". Goodbye ambiguity.
Are icons metaphors? Or are they just symbols?
I am not a linguist but I think that you may be stretching the definition of metapahor if you are thinking of icons as themselves being metaphors.
What is an icon? A button with a superimposed symbol?
Now, if you are saying buttons on a computer screen (which do not necessarily need any symbol superimposed on them to work) are metaphors for physical buttons, e.g. like your example of radio buttons, then that seems a little more reasonable.
I've seen early TV remote controls, 8-tracks and various other old things having push-in buttons just like car radios. I'm not sure car radios were the first to have these. Maybe early radios, before TV, were the first to have push-in buttons (or whatever the proper name for them is)?
Typing "save" is very far from being unambiguous though. Should it be "save", "store", "write down", "file away", "preserve" or another one of a few dozen ways an unsuspecting person could come up with? Should you type "please" too? At least with GUI there is a button that semi-obviously can be clicked, even if it is unclear what it does. Discoverability is way better with GUI.
What you find ambiguous may not align with what others find ambiguous. You, as a nerd, know there are many options that "save" could entail. Does everyone else know that?
What if a user has no idea about "save options". To them "save" might just mean "save". That is, they want to be able to retrieve it later.
If I say to you "Jump!", you might ask "How high?" Others might just jump. Should we enlist some participants in a study and see what most people do? Let's ask people what "save" means. Then let's show them a button and ask them what it means.
Why does some software have an option to "show button text"?
Why would anyone want to see text on a button? Why would anyone want that?
I wish there was a way I could post to HN in a series of buttons, like hieroglyphics. It would be "way better" than using words. You could click on them and they would bounce up and down. Way better than reading.
Non physical affordances don't come easy, and like it or not our brains are trained in a world of 3 dimensions made of matter. Dieter Rams built things around their functional components, the materials available and the other constraints given to him by a physical world.
Edward Tufte preaches that content rules and all else is extra. We can certainly minimize everything that isn't the focus, we should, after all. But abandoning the lessons from skueomorphism really means you are throwing out every hint of natural world affordances in your interfaces. The first 3 dimensional shading or shadow and you have veered into the land of skeuomorphism - and that's ok, because a world of flat squares with Helvetica labels takes a whole lot more mental cycles to process than that beveled 3d button, and it always will.
I look forward to seeing what you are doing with kicksend- with or without hints of the physical world.
"...a world of flat squares with Helvetica labels takes a whole lot more mental cycles to process than that beveled 3d button, and it always will."
Do you have a citation for that? I'm genuinely interested in reading more about it, because it seems somewhat counter-intuitive. The idea that simpler shapes would be harder to process visually is very fascinating to me.
Its not that a simpler shape isn't easier to process, its that its harder to infer purpose when there is so little information (like in the case of Metro). A button is something that needs to be 'pressed' so it should look like it can be- and by doing so you understand that it is a button much faster.
Interesting, though I have to wonder if that's necessarily true; it seems that you could designate a button using only rectangles and solid colors in a way that would be clear and unambiguous (e.g. Google+'s buttons). Either way, interesting application of Norman's ideas of 'affordances.' DoET is a perennial favorite of mine.
They actually have slightly rounded corners, an outline and subtle gradient going from top to bottom that hint at three dimensionality and offers affordance. There's also a slight darkening on mouse-over which suggests they're interactive and can be pressed in.
Ah, the old HN switch-a-roo! Everybody loves skeuomorphism right now.
Skeuomorphic designs certainly have their place and help affordance and recognition, and the author seems to acknowledge that. The point he is trying to make is that skeuomorphism is an easy way to make a UI look good, and toss more functional concerns aside; I agree completely.
Skeumorphism is no more an "easy way out" than black Helvetica on a white background is an "easy way out". They can both be used appropriately, or used badly and in excess.
The address book in OSX is an example of bad skeumorphism -- it's a fake book with pages that don't actually turn, trying to shoehorn "advanced" computer technology into a visual representation that doesn't work. It's a bad metaphor, a bad analogy. It confuses more than it helps.
The "Notes" application on OSX is a fantastic use of skeumorphism. The legal-pad look shows us at a glance that it's for taking notes, which a plain white background wouldn't do. The analogy between individual note documents and pages is perfect. Anyone can use it instantly, without worrying where documents are saved or anything like that.
The fundamental question is, are design choices helping or hindering understandability and usability? Apps and the web have evolved conventions like share icons and tabs and underlined/colored links, etc. which people understand. Skeumorphism just adds vocabulary from the physical world to the toolbox.
And in the opposite direction of skeumorphism, I think the SVBTLE blog platform itself goes too far to the minimalist. I can't tell people's blogs apart, because they all look virtually identical -- that's bad design. And what the heck is the "kudos nipple"? Why do you hover instead of clicking? A simple thumbs-up icon would be understandable by everyone, which is almost skeumorphic in its own way, since it refers to a physical thumbs-up... Reference to the physical world can be a very useful thing.
And what the heck is the "kudos nipple"? Why do you hover instead of clicking?
...I never even knew that was interactive. I guess I might have tried to click it if I wanted to give a kudo, but not before looking at the bottom of the page or something. Too far indeed.
I'd agree that the address book skeumorphism is a pretty terrible option - seems to be more about design bling than addressing usabiblity.
OTOH the "head-shaking" of the OSX login window when you enter a bad password is some of the best skeumorphism I've seen, and yet there are no visual design elements (like putting ears on the window or something.)
The first few times it happened to me, I felt that I had been manipulated into "approving" of the article, when I felt no such approval. It was abusive.
Now, whenever I visit a new Svbtle blog, I block that whole element so I never accidentally vote again.
A simple thumbs-up icon would be understandable by everyone, which is almost skeumorphic in its own way, since it refers to a physical thumbs-up... Reference to the physical world can be a very useful thing.
"OK" is one of the worlds best understood words, in any language. Simple, elegant, and a powerful. This is an important point. Very information efficient. All of this is synoymous with good design. Skeumorphic, or not.
Idiotic design decisions like this are why computers have long been the province of mathematicians, scientists, programmers, and other eggheads.
Sheuomorphism is the RIGHT way out -- if you are designing for the general mass of human beings. I happen to know personally the designer of one of the first pieces of personal finance software -- "Electric Checkbook" for Macintosh. (There's a site going by that name that appears to have been started by his son.) It was the template from which Quicken was largely derived, but that's a long, sad, and dirty story.
The advantage of Electric Checkbook over any of the competition, its creator told me, was implicit in the name: it literally worked just like a checkbook with on-screen checks you fill out and an option to print your electronic checks as real checks. It was far easier and more comfortable to use than any of the professional accounting systems out there because it offered the average user the comfort of the familiar.
That Apple successfully deploys skeuomorphism in order to make its average user base feel at ease is a big part of why they're so much better than any other tech company out there. So what if iBooks looks just like a bookshelf, to no functional use whatever. It helps avid readers get into the reading zone, giving them a bit of the joy of perusing their favorite real bookshelves. And that's an edge over the competition.
And no, Microsoft Bob didn't lose because of skeuomorphism. Microsoft Bob lost because it was tacky.
Skeuomorphism unnecessarily constrains software design to the realm of real-world analogue. It completely breaks down when applied to concepts which do not fit. How do you create a skeuomorphic interface for something like Git? The answer is: you don't.
I think there's a difference between making software that looks pseudo-physical like Aqua, skeuomorphic like iCal, and mimicry like all those digital representations of a business "desktop", complete with 3d in and out box and useless paperclip holder...and I think that these things lie on a continuum.
For example, an audio recording app might start with a simple default OS "record" and "playback" buttons. Add shadows on the buttons and brushed aluminum for the window dressing and just look pseudo-physical, start adding 70s era cheap plastic looking knobs and you rapidly slide into skeuomorphic, keep going and next thing you know you hit Apple's podcast app, a little more and you go full Microsoft Bob and make you drag a virtual tape from one reel to another, through all of the various other windy rotating bits that are present in an actual reel-to-reel tape machine.
Skeuomorphism works when it dresses up a boring interface that's more or less feature complete. It might even go so far as to evoke the feeling of a familiar real-life object...paying it homage rather than mimicking it.
What doesn't work is when you rely on mimicry in an application to guide the user into the digital world from the physical one by employing a similar looking usage pattern. It sounds counter-intuitive, but it's true...why? One person's familiar metaphor may be completely outside of another person's experience. Take your example, Electric Checkbook, many people under 30 have probably never even written a check, or balanced a checkbook! I'm over 30, and I don't think I've ever even finished off an entire book of checks in my entire life! It's just a metaphor that no longer has relevance. I do lots of banking, pay bills, mortgage, car payments, school loans, utilities, etc. But I simply have never needed to use physical checks in anything but the rarest circumstances. For people in their 20s, they may have never actually even seen a physical check! The app may as well be designed around sectioning 8ths of Gold Doubloons and measuring out gold on a balance scale for all the relevance it has to new users!
Similarly, iCal looks like no timekeeping/scheduling object I've seen outside of professional offices of very senior executives and lawyers. Most people just don't use leatherbound desk calendars anymore. It doesn't evoke familiarity or nostalgia because it's simply entirely outside of most people's personal experience. Where iCal gets away with it is that it's fortunate that other calendar apps that computer users have become conditioned to over the decades are skeuomorphic in the sense that their design and layout are very much in-line with the layout of physical calendars anyways. But there is no reason a calendar can't be laid out in a wheel, or a list, or some other interface paradigm, and made to look like it was scratched into copper or some such and just been pseudo-physical.
The reel-to-reel "Podcasts" similarly tries to evoke some kind of nostalgia factor, listening to authoritative news reports on a vintage tape machine, without stopping to figure that most users have probably never even seen a "real" reel-to-reel. It's not skeuomorphic, it's Bob. It's so bad that the builders of the app didn't even bother building in the necessary functionality into the software before blasting faux-nostalgia vomit all over the design. At least I don't have to run the tape to setup the playback.
More importantly, design that's on the Bob side of skeuomorphic design almost always fails to scale. A bookshelf metaphor is fine because it's close enough to a basic grid of book covers, with a little wood veneer on it when a library has a few dozen titles in it. It blows up when you start having thousands and spend minutes scrolling through shelves trying to find your title, when a simple alphabetized list would have performed the function better. (The Bob way to solve the problem would be to organize your titles by the Dewey Decimal System, then give you a virtual card catalog, complete with little drawers full of little ...
Have you ever watched a show like Kitchen Nightmares (or the many other variants now)? It's a show where a famous chef (Gordon Ramsay) comes into a restaurant in trouble and rescues it. Easily 90% of the stuff he does is just the basics. Clean things up, keep the decor up to date (and also clean), keep the menu small and packed with high quality items, etc. None of it is rocket surgery, but so many restaurants fail at such things.
And the same is true everywhere. Whether it's in online businesses, the UX for applications, or software architecture.
I highly recommend to everyone to take the easy way out first. Keep things simple, keep things clean, do the obvious thing at every step. Chances are this will lead to success and it will give you the ability to maybe try some less obvious things in the future.
Skeuomorphism is important, necessary even. The issue is that people are conflating it with nostalgia.
An interface can be considered skeuomorphic if it provides affordances that are useful in the physical world - shadows, shapes and animations based on the laws of physics. Such an interface provides the necessary clues to tell a user how to interact with its elements.
Nostalgia serves another purpose. It creates an association between a common old interface, and the new one. It provides the clues as to why the user should interact with its elements.
I would argue that skeuomorphism is not the easy way out, its the right way. Nostalgia is a much more likely candidate for being the path of least resistance. Because the alternative is education.
"Skeuomorphism helps people misunderstand the capabilities and limitations of digital products based on their understanding of a physical analog."
Right. Nothing sets hard limits in a user's mind then guiding them to use a piece of software through a terribly flawed metaphor. My father learned to use computers in the mid-90s when he was in his 60s and his chosen tool was MS-Excel as it most closely represented the ledger system he used to keep his books with (which is of course what spreadsheets were intended for in the first place).
His world turned upside-down when I showed him that he could also do his production planning (he ran a small manufacturer) with it. Instead of painstakingly drawing the production schedule grid for the next day by hand, moving jobs from one day to the next, assigning employees to tasks and machines, etc. Spending 6 out of his 12 hour work day on it. He could do the entire job in an hour in Excel, and it was more flexible and he could make mid-day changes and print the schedules out with just a few minutes of moving cells around.
It blew his mind. He had been thinking of Excel only as a digital ledge, but now he thought of it as a giant grid. Soon he was mocking up purchase orders sheets, tracking suppliers, handling expense reports, doing inventory management, past-job database (with prices and pointers to physical samples in an organized warehouse) and other sorts of probably inappropriate tasks that simply required a grid layout and some basic content to frame the use-case.
What was important was breaking him out of the metaphor and suddenly he found a kind of self-actualization that freed him of hours and hours of hand written paperwork. It transformed his business and allowed him to handle quite a bit more business than he could before. His digital records were so good that when he sold his company he figures that it added 20-30% to the asking price for the company. If Excel has been even more skeuomorphic of a book keeping ledger, with stitched binding and a traditional two or three column ledger, he may never have been able to break free of that metaphor and realize his other efficiencies.
Did he use grid paper to do the schedule? Excel is really not very skeuomorphic. One variation on being more skeuomorphic would be that it came with various templates one of which looked like a typical work schedule sheet, but leveraged excel's strengths of automatic calculation. That skeuomorphic move would have helped him realize the possibilities and he could have achieved self actualization and gotten that extra 20-30% without your help.
Originally he did. It was a large format, expensive custom grid paper designed for the kind of old fashioned production scheduling he used to do.
In general it was a grid, but the cells weren't square, they were wider so that there was more room to write, and along the top and left side were various specialty cells for tracking schedule numbers, days of production, reference numbers, various call-outs and along the left side room for specific machines and machine operators to be inserted. He used a fairly sophisticated color coding sytem to show linked jobs as they moved through the queue and hopped machines, so a red diagonally striped cell on one machine represented the same job later in the day on another machine also using a red diagonally striped cell. It basically allowed him to plan execution of production pipelines similar to thread execution on a modern day processor.
He had to hand draw the legend on every sheet and all of the setup. And since it was all pens and markers and such, a small mistake meant redrawing the entire schedule. I remember growing up watching him sit in front of the TV working on his production schedules late into the night.
I agree that Excel in general is not terribly skeuomorphic, but like I said elsewhere in this comment, skeuomorphism is a gradient and Excel was just similar enough to a paper book-keeping ledger of old that he thought that it would only be useful to him in that sense never realizing it could replace the custom production schedule grid he managed until quite a bit later.
only quite a bit more complex and larger format, and in the end looked almost calico colored there were so many production pipelines at once on it (vs. this example with only one real pipeline)
At this point, I get the feeling that "skeuomorphism" is a broad sweeping category label created without enough cohesiveness within the category. Doing so urges discussions to assign properties to "skeuomorphism" (is bad, is good, is the way, etc.) without mention of the context in which a designer chose the approach in a particular case.
Such a category label not only results in quick evaluations of the kind "x is skeuomorphic and skeuomorphic is bad design, therefore x is bad design", it also urges analytical errors of the kind "design x isn't working, x is skeuomorphic, x is probably not working because it is skeuomorphic". Enthusiasts may also tend to use "no true Scotsman" kind of arguments to evaluate whether a design is really skeuomorphic.
What would serve us better is to catalog designs that are considered skeuomorphic, evaluate each based on whether it works for the user, and then evaluate whether the category label is worth the number of letters in the word or whether its definition needs to be narrowed in order to make it useful in design discussions.
There's bad skeuomorphism, and there's good skeuomorphism. In the end of the day, it's a personal option, and it really depends on the type of product/site/interface you're designing.
I've designed a mobile application that is skeuomorphic, with the intent to resemble the original one, being this one of the goals of my client, and I justify it well enough to make sense. Even though it's a skeumorph looking app, not really a skeuomorph interface.
But you must admit, skeuomorph isn't that bad when used properly and with caution. There are some good uses to it. And I don't like extremes, I'm not with the "Skeuomorph all the things" team, and neither with the "Skeuomorph is evil", because I believe there's a time and place to everything, but it must be used with obvious moderation.
There are many forms of skeuomorphism, and it's important to distinguish them from each other. Visual kitsch is cheap in a different way to outdated metaphors that hold back the possibilities of digital product design; a well-used affordance should not be dismissed because of its visual design and neither should a beautiful piece of 'Photoshop art' be allowed to get away with broken & confusing metaphors.
- Visual kitsch
the crap on Dribbble that throws in random textures for the hell of it, no match-up to a real-life object. No particularly jarring interactions, just looks tacky. I guess Find My Friends goes here?
- Visual kitsch, broken interaction
iCal, iBooks, Address Book etc - visual kitsch and an interaction skeuomorph. Pages not swiping properly in Contacts/Address Book (and having scrollable UITableViews on a piece of 'paper'), full stack of pages left at the end of an iBook, iCal 'tearing pages off' but then they're still there when you swipe back etc.
- No visual skeuomorph, just interaction skeuomorph (not so bad)
Google Calendar - one month per page rather than an infinite scroll (ala Calvetica). An easy 'affordance', but holding interaction design back nonetheless.
- Visual kitsch, non-broken interaction skeuomorph
Remember that hyper-realistic eBook reader a couple of months ago? Relative to iBooks the interactions actually matched up - the stack of pages on the right hand side of the page decreased the further you went into the book. It afford familiarity without being damaging and confusing like iBooks and Contacts, but it was still a weak grasp at the past.
- Outdated metaphors
Newsstand on iPad upsets me. We have a fantastic platform capable of totally redefining how we consume content and we present magazines & newspapers as 1:1 icons of their printed counterparts on shelves? I wrote more about this here: http://designedbygold.com/2011/10/the-metaphors-breaking-the...
This isn't to say die-hard modernism is the way forward - I have my doubts about Metro too. It's just posturing; even Jan Tschichold said that typography should bear the hallmark of it's age (and strict Swiss design definitely isn't a product of 2012).
This does mean that skeuomorphism and as-it-was-in-print modernism are both wrong, but I think we knew that anyway. What we need is an appropriate visual- and interaction-design language for the times. One rooted in tactility; one that learns from the past but doesn't replicate it.
46 comments
[ 3.0 ms ] story [ 101 ms ] threadGood work.
But iMovie? The movie browser looks whimsical, sure, but it’s at least very well executed and looks great. Also, the actual interface is very matter of fact, no skeuomorphism at all there.
So a very, very small part of the app is a bit whimsical, nothing more.
(take a look)
http://www.propellerheads.se/products/reason/
Its an extremely powerful and complex piece of software that mimics the pieces of gear in a sound recording studio. This includes the ability to turn the gear around and patch it via cables etc.
I've never sat down at a piece of recording software (this complex) and "just got it" off the bat as well as I did with this. A lot of it was understanding how everything worked in a regular studio translated right into the software, seriously amazing. It actually made me more comfortable in a real live studio as well since it allowed me to play with tools and effects "Virtually" that I'd never have at home.
Anyway YMMV but anytime someone tells me that skeumorphism is the easy way out and useless I look at Reason and shake my head.
* Dangly cables that get in the way of stuff and are hard to follow, and you can't even tilt your head to see around them (and "Each cable plugs into exactly two holes"?)
* Physical-styled knobs. Often harder to control and more ambiguous than sliders or other circular controls that don't try to imitate a physical knob.
* Lack of selective disclosure and dimming leads to very overloaded UIs
* Mode switch/up/down buttons rather than directly selectable options
* Pointless ornamentation like screws, fans, handles
* Constraints in the physical model will often translate to constraints in the software
* Often only intuitive to people who are familiar with the thing it's based on
There's no reason you can't take the good parts of a physical interface and use those elements in a virtual interface, but there's no need to try and make it exactly the same. All UI is vaguely based on something that came before it, often something physical ("desktop", "window", "folder"..)
That's not to say Reason isn't great software, but honestly, music software does tend to be somewhat confusing anyway, and also tends to be very skeuomorphic.
Whereas when I look at something like Kicksend it's just another boring, stale and uninspired photo site. And yes, it may 'get the job done' better but if I am not enjoying using it then why not use something that does.
And that really is the crux of the argument here. You have a tiny window of opportunity to convince a person to keep an app before they will simply delete it and find something else.
If you think about apps the most every day, they're quite plain or unfun. They're maybe pleasant, probably effective, and you use them to get things done.
How long does it take to learn a new metaphor? How difficult is it?
It's far easier to just stick with the metaphors you already know. And that is, I think, what "most" people do.
This applies to more than just computers.
"Some" people might like to keep trying new metaphors every week. Who knows?
One thing is for sure. Everyone learns the "email" metaphor.
Not just some people. Everyone. Food for thought.
I think the author is spot on when he says that in this context (computers) metaphors create limitations rather than educating people about what computers can really do. I even see this among developers who, one would think, are the people resposnible for enabling users to unlock the full potential of their computers. They are stuck on certain metaphors which limit what they can imagine and therefore implement. Independent thinking and striving for originality are in short supply among developers. The attack of the clones never ceases, in case, clones of whatever developers see other developers have done.
However, as insightful as the reference to "skeudomorphism" may be, it's clear the author's goal with this post is trying to downplay Kicksend competitors. Maybe ones that are styled like Instagram? (Polaroid metaphor?)
How many hoops does someone have to jump through to use Kicksend versus using something like Instagram/Facebook (for lack of better examples)? And do they have to pay for the "service"? Maybe that could be a factor?
While I'm old enough to have sent and received paper mail as a means of communication, it's highly likely that my toddler will have sent email (and internalized the concept) before having interacted with physical mail systems. It's a metaphor for us to call it email but it's a vestigial name to the younger generations.
Think of the floppy disk being a metaphor for saving a file. Few people younger than 15 have used a floppy drive but manage to save files regardless. I also understood radio buttons on web forms as exclusive selections as a young person even though I didn't know it was a metaphor for real buttons on old car radios until a couple of years ago.
It is indeed interesting that children may likely interact with email before postal mail. But postal mail shows no signs of disappearing anytime soon. Probably not during your lifetime and the lifetime of your startup while you're acquiring a critical mass of users.
Do you think it will be possible to conduct 100% of your affairs in life without ever sending or receiving postal mail? That postal mail will never be used by anyone you transact with?
No doubt we may someday reach a "paperless" world where all your affairs can be handled without every using postal mail. And where people never ever use postal mail and have no reason to even know of its existence. Maybe your children may see this come to pass.
But for the purposes of your startup, is that day something you should be concerned about? Is your target market toddlers? Or people old enough to have credit cards, today? People who know how to use email.
This matters mainly because I won't be bothered if either control starts acting in a way that breaks the metaphor, like a save icon that saves to the cloud (no need to carry a disk around) or a radio button with a design that looks nothing like a car radio (like the current design, as best as I can tell). And it's not black and white: though I've always known a folder is based on a filing cabinet, I've never been bothered that they can be infinitely nested. The more people are familiar with the "metaphor", the less it's necessary to stick to purely metaphorical elements.
This is one of the 1001 reasons I think GUI's are a waste of time. I can just as easily tell a user to hit a particular key (i.e. a tactile button) or type "save". Goodbye ambiguity.
Are icons metaphors? Or are they just symbols?
I am not a linguist but I think that you may be stretching the definition of metapahor if you are thinking of icons as themselves being metaphors.
What is an icon? A button with a superimposed symbol?
Now, if you are saying buttons on a computer screen (which do not necessarily need any symbol superimposed on them to work) are metaphors for physical buttons, e.g. like your example of radio buttons, then that seems a little more reasonable.
I've seen early TV remote controls, 8-tracks and various other old things having push-in buttons just like car radios. I'm not sure car radios were the first to have these. Maybe early radios, before TV, were the first to have push-in buttons (or whatever the proper name for them is)?
What if a user has no idea about "save options". To them "save" might just mean "save". That is, they want to be able to retrieve it later.
If I say to you "Jump!", you might ask "How high?" Others might just jump. Should we enlist some participants in a study and see what most people do? Let's ask people what "save" means. Then let's show them a button and ask them what it means.
Why does some software have an option to "show button text"? Why would anyone want to see text on a button? Why would anyone want that?
I wish there was a way I could post to HN in a series of buttons, like hieroglyphics. It would be "way better" than using words. You could click on them and they would bounce up and down. Way better than reading.
Non physical affordances don't come easy, and like it or not our brains are trained in a world of 3 dimensions made of matter. Dieter Rams built things around their functional components, the materials available and the other constraints given to him by a physical world.
Edward Tufte preaches that content rules and all else is extra. We can certainly minimize everything that isn't the focus, we should, after all. But abandoning the lessons from skueomorphism really means you are throwing out every hint of natural world affordances in your interfaces. The first 3 dimensional shading or shadow and you have veered into the land of skeuomorphism - and that's ok, because a world of flat squares with Helvetica labels takes a whole lot more mental cycles to process than that beveled 3d button, and it always will.
I look forward to seeing what you are doing with kicksend- with or without hints of the physical world.
Do you have a citation for that? I'm genuinely interested in reading more about it, because it seems somewhat counter-intuitive. The idea that simpler shapes would be harder to process visually is very fascinating to me.
Donald Norman and Jakob Neilsen have long preached this and they have a bunch of info on affordances and why they work: http://www.jnd.org/dn.mss/affordances_and.html
More recently see Steve Krug's "Don't Make Me Think"
They actually have slightly rounded corners, an outline and subtle gradient going from top to bottom that hint at three dimensionality and offers affordance. There's also a slight darkening on mouse-over which suggests they're interactive and can be pressed in.
Skeuomorphic designs certainly have their place and help affordance and recognition, and the author seems to acknowledge that. The point he is trying to make is that skeuomorphism is an easy way to make a UI look good, and toss more functional concerns aside; I agree completely.
The address book in OSX is an example of bad skeumorphism -- it's a fake book with pages that don't actually turn, trying to shoehorn "advanced" computer technology into a visual representation that doesn't work. It's a bad metaphor, a bad analogy. It confuses more than it helps.
The "Notes" application on OSX is a fantastic use of skeumorphism. The legal-pad look shows us at a glance that it's for taking notes, which a plain white background wouldn't do. The analogy between individual note documents and pages is perfect. Anyone can use it instantly, without worrying where documents are saved or anything like that.
The fundamental question is, are design choices helping or hindering understandability and usability? Apps and the web have evolved conventions like share icons and tabs and underlined/colored links, etc. which people understand. Skeumorphism just adds vocabulary from the physical world to the toolbox.
And in the opposite direction of skeumorphism, I think the SVBTLE blog platform itself goes too far to the minimalist. I can't tell people's blogs apart, because they all look virtually identical -- that's bad design. And what the heck is the "kudos nipple"? Why do you hover instead of clicking? A simple thumbs-up icon would be understandable by everyone, which is almost skeumorphic in its own way, since it refers to a physical thumbs-up... Reference to the physical world can be a very useful thing.
...I never even knew that was interactive. I guess I might have tried to click it if I wanted to give a kudo, but not before looking at the bottom of the page or something. Too far indeed.
Now, whenever I visit a new Svbtle blog, I block that whole element so I never accidentally vote again.
"OK" is one of the worlds best understood words, in any language. Simple, elegant, and a powerful. This is an important point. Very information efficient. All of this is synoymous with good design. Skeumorphic, or not.
I think good skeumorphics are called "affordances", while skeumorphism is being used as a prerogative term ("indiscriminate affordances").
There's no reason for a new word. Affordances are ancient. Bad affordances (especially crappy media players) are ancient.
"Apple" and "media needs a new trend to carp on about" are the only reason to start using a new term for them.
People just like "new" things ... one season its faux leather, another season its gray Helvetica on stark white.
No, no, no, no, no.
Idiotic design decisions like this are why computers have long been the province of mathematicians, scientists, programmers, and other eggheads.
Sheuomorphism is the RIGHT way out -- if you are designing for the general mass of human beings. I happen to know personally the designer of one of the first pieces of personal finance software -- "Electric Checkbook" for Macintosh. (There's a site going by that name that appears to have been started by his son.) It was the template from which Quicken was largely derived, but that's a long, sad, and dirty story.
The advantage of Electric Checkbook over any of the competition, its creator told me, was implicit in the name: it literally worked just like a checkbook with on-screen checks you fill out and an option to print your electronic checks as real checks. It was far easier and more comfortable to use than any of the professional accounting systems out there because it offered the average user the comfort of the familiar.
That Apple successfully deploys skeuomorphism in order to make its average user base feel at ease is a big part of why they're so much better than any other tech company out there. So what if iBooks looks just like a bookshelf, to no functional use whatever. It helps avid readers get into the reading zone, giving them a bit of the joy of perusing their favorite real bookshelves. And that's an edge over the competition.
And no, Microsoft Bob didn't lose because of skeuomorphism. Microsoft Bob lost because it was tacky.
For example, an audio recording app might start with a simple default OS "record" and "playback" buttons. Add shadows on the buttons and brushed aluminum for the window dressing and just look pseudo-physical, start adding 70s era cheap plastic looking knobs and you rapidly slide into skeuomorphic, keep going and next thing you know you hit Apple's podcast app, a little more and you go full Microsoft Bob and make you drag a virtual tape from one reel to another, through all of the various other windy rotating bits that are present in an actual reel-to-reel tape machine.
Skeuomorphism works when it dresses up a boring interface that's more or less feature complete. It might even go so far as to evoke the feeling of a familiar real-life object...paying it homage rather than mimicking it.
What doesn't work is when you rely on mimicry in an application to guide the user into the digital world from the physical one by employing a similar looking usage pattern. It sounds counter-intuitive, but it's true...why? One person's familiar metaphor may be completely outside of another person's experience. Take your example, Electric Checkbook, many people under 30 have probably never even written a check, or balanced a checkbook! I'm over 30, and I don't think I've ever even finished off an entire book of checks in my entire life! It's just a metaphor that no longer has relevance. I do lots of banking, pay bills, mortgage, car payments, school loans, utilities, etc. But I simply have never needed to use physical checks in anything but the rarest circumstances. For people in their 20s, they may have never actually even seen a physical check! The app may as well be designed around sectioning 8ths of Gold Doubloons and measuring out gold on a balance scale for all the relevance it has to new users!
Similarly, iCal looks like no timekeeping/scheduling object I've seen outside of professional offices of very senior executives and lawyers. Most people just don't use leatherbound desk calendars anymore. It doesn't evoke familiarity or nostalgia because it's simply entirely outside of most people's personal experience. Where iCal gets away with it is that it's fortunate that other calendar apps that computer users have become conditioned to over the decades are skeuomorphic in the sense that their design and layout are very much in-line with the layout of physical calendars anyways. But there is no reason a calendar can't be laid out in a wheel, or a list, or some other interface paradigm, and made to look like it was scratched into copper or some such and just been pseudo-physical.
The reel-to-reel "Podcasts" similarly tries to evoke some kind of nostalgia factor, listening to authoritative news reports on a vintage tape machine, without stopping to figure that most users have probably never even seen a "real" reel-to-reel. It's not skeuomorphic, it's Bob. It's so bad that the builders of the app didn't even bother building in the necessary functionality into the software before blasting faux-nostalgia vomit all over the design. At least I don't have to run the tape to setup the playback.
More importantly, design that's on the Bob side of skeuomorphic design almost always fails to scale. A bookshelf metaphor is fine because it's close enough to a basic grid of book covers, with a little wood veneer on it when a library has a few dozen titles in it. It blows up when you start having thousands and spend minutes scrolling through shelves trying to find your title, when a simple alphabetized list would have performed the function better. (The Bob way to solve the problem would be to organize your titles by the Dewey Decimal System, then give you a virtual card catalog, complete with little drawers full of little ...
Have you ever watched a show like Kitchen Nightmares (or the many other variants now)? It's a show where a famous chef (Gordon Ramsay) comes into a restaurant in trouble and rescues it. Easily 90% of the stuff he does is just the basics. Clean things up, keep the decor up to date (and also clean), keep the menu small and packed with high quality items, etc. None of it is rocket surgery, but so many restaurants fail at such things.
And the same is true everywhere. Whether it's in online businesses, the UX for applications, or software architecture.
I highly recommend to everyone to take the easy way out first. Keep things simple, keep things clean, do the obvious thing at every step. Chances are this will lead to success and it will give you the ability to maybe try some less obvious things in the future.
An interface can be considered skeuomorphic if it provides affordances that are useful in the physical world - shadows, shapes and animations based on the laws of physics. Such an interface provides the necessary clues to tell a user how to interact with its elements.
Nostalgia serves another purpose. It creates an association between a common old interface, and the new one. It provides the clues as to why the user should interact with its elements.
I would argue that skeuomorphism is not the easy way out, its the right way. Nostalgia is a much more likely candidate for being the path of least resistance. Because the alternative is education.
Right. Nothing sets hard limits in a user's mind then guiding them to use a piece of software through a terribly flawed metaphor. My father learned to use computers in the mid-90s when he was in his 60s and his chosen tool was MS-Excel as it most closely represented the ledger system he used to keep his books with (which is of course what spreadsheets were intended for in the first place).
His world turned upside-down when I showed him that he could also do his production planning (he ran a small manufacturer) with it. Instead of painstakingly drawing the production schedule grid for the next day by hand, moving jobs from one day to the next, assigning employees to tasks and machines, etc. Spending 6 out of his 12 hour work day on it. He could do the entire job in an hour in Excel, and it was more flexible and he could make mid-day changes and print the schedules out with just a few minutes of moving cells around.
It blew his mind. He had been thinking of Excel only as a digital ledge, but now he thought of it as a giant grid. Soon he was mocking up purchase orders sheets, tracking suppliers, handling expense reports, doing inventory management, past-job database (with prices and pointers to physical samples in an organized warehouse) and other sorts of probably inappropriate tasks that simply required a grid layout and some basic content to frame the use-case.
What was important was breaking him out of the metaphor and suddenly he found a kind of self-actualization that freed him of hours and hours of hand written paperwork. It transformed his business and allowed him to handle quite a bit more business than he could before. His digital records were so good that when he sold his company he figures that it added 20-30% to the asking price for the company. If Excel has been even more skeuomorphic of a book keeping ledger, with stitched binding and a traditional two or three column ledger, he may never have been able to break free of that metaphor and realize his other efficiencies.
http://chestofbooks.com/finance/banking/Money-And-Banking-Ho...
In general it was a grid, but the cells weren't square, they were wider so that there was more room to write, and along the top and left side were various specialty cells for tracking schedule numbers, days of production, reference numbers, various call-outs and along the left side room for specific machines and machine operators to be inserted. He used a fairly sophisticated color coding sytem to show linked jobs as they moved through the queue and hopped machines, so a red diagonally striped cell on one machine represented the same job later in the day on another machine also using a red diagonally striped cell. It basically allowed him to plan execution of production pipelines similar to thread execution on a modern day processor.
He had to hand draw the legend on every sheet and all of the setup. And since it was all pens and markers and such, a small mistake meant redrawing the entire schedule. I remember growing up watching him sit in front of the TV working on his production schedules late into the night.
I agree that Excel in general is not terribly skeuomorphic, but like I said elsewhere in this comment, skeuomorphism is a gradient and Excel was just similar enough to a paper book-keeping ledger of old that he thought that it would only be useful to him in that sense never realizing it could replace the custom production schedule grid he managed until quite a bit later.
edit it was not too entirely different from this
http://preoccupiedbymoonlight.blogspot.com/2010/06/productio...
only quite a bit more complex and larger format, and in the end looked almost calico colored there were so many production pipelines at once on it (vs. this example with only one real pipeline)
Such a category label not only results in quick evaluations of the kind "x is skeuomorphic and skeuomorphic is bad design, therefore x is bad design", it also urges analytical errors of the kind "design x isn't working, x is skeuomorphic, x is probably not working because it is skeuomorphic". Enthusiasts may also tend to use "no true Scotsman" kind of arguments to evaluate whether a design is really skeuomorphic.
What would serve us better is to catalog designs that are considered skeuomorphic, evaluate each based on whether it works for the user, and then evaluate whether the category label is worth the number of letters in the word or whether its definition needs to be narrowed in order to make it useful in design discussions.
I've designed a mobile application that is skeuomorphic, with the intent to resemble the original one, being this one of the goals of my client, and I justify it well enough to make sense. Even though it's a skeumorph looking app, not really a skeuomorph interface.
But you must admit, skeuomorph isn't that bad when used properly and with caution. There are some good uses to it. And I don't like extremes, I'm not with the "Skeuomorph all the things" team, and neither with the "Skeuomorph is evil", because I believe there's a time and place to everything, but it must be used with obvious moderation.
There are many forms of skeuomorphism, and it's important to distinguish them from each other. Visual kitsch is cheap in a different way to outdated metaphors that hold back the possibilities of digital product design; a well-used affordance should not be dismissed because of its visual design and neither should a beautiful piece of 'Photoshop art' be allowed to get away with broken & confusing metaphors.
- Visual kitsch the crap on Dribbble that throws in random textures for the hell of it, no match-up to a real-life object. No particularly jarring interactions, just looks tacky. I guess Find My Friends goes here?
- Visual kitsch, broken interaction iCal, iBooks, Address Book etc - visual kitsch and an interaction skeuomorph. Pages not swiping properly in Contacts/Address Book (and having scrollable UITableViews on a piece of 'paper'), full stack of pages left at the end of an iBook, iCal 'tearing pages off' but then they're still there when you swipe back etc.
- No visual skeuomorph, just interaction skeuomorph (not so bad) Google Calendar - one month per page rather than an infinite scroll (ala Calvetica). An easy 'affordance', but holding interaction design back nonetheless.
- Visual kitsch, non-broken interaction skeuomorph Remember that hyper-realistic eBook reader a couple of months ago? Relative to iBooks the interactions actually matched up - the stack of pages on the right hand side of the page decreased the further you went into the book. It afford familiarity without being damaging and confusing like iBooks and Contacts, but it was still a weak grasp at the past.
- Outdated metaphors Newsstand on iPad upsets me. We have a fantastic platform capable of totally redefining how we consume content and we present magazines & newspapers as 1:1 icons of their printed counterparts on shelves? I wrote more about this here: http://designedbygold.com/2011/10/the-metaphors-breaking-the...
This isn't to say die-hard modernism is the way forward - I have my doubts about Metro too. It's just posturing; even Jan Tschichold said that typography should bear the hallmark of it's age (and strict Swiss design definitely isn't a product of 2012).
This does mean that skeuomorphism and as-it-was-in-print modernism are both wrong, but I think we knew that anyway. What we need is an appropriate visual- and interaction-design language for the times. One rooted in tactility; one that learns from the past but doesn't replicate it.