Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Apple's Designers Clashing Over 'Tacky' Software Skeuomorphisms
- Thread starter MacRumors
- Start date
- Sort by reaction score
+1 on the lack of color. iTunes, Mail and Finder are now a big gray wasteland.
Can someone give me good design reasons for making every toolbar button gray?
The skeuomorphic principle has really gone into overdrive at Apple. Whereas I would have hoped they were past it without (the apparently unquestionable?) Steve Jobs around towing that line, you see their latest new iOS app *Podcasts taking it to truly awful new extremes. The usefulness of the app is completely sidelined by the desire to make it look like a reel-to-reel (really??). Has anyone who speaks up for these principles really tried to use that thing?
In general the issues seem to be when the skeumorphism takes things to the point where the function becomes obscured, and you're wasting cycles and time rendering things that do not benefit from it. Page turning / sheet tearing / etc. Now, I stand properly in awe at the rendering abilities of these devices, and the skill of the designers in making them work, but there's a limit.
In addition to all of this, look at how limiting these principles are. How do you make something as useful as a menu bar icon fit into your concept of making an address book look like a telephone directory from 1930? Oh yeah, you don't, and so, very useful features are never introduced. Look at Cobook as an example of a Mac contacts program that executes well on some of this.
The most successful recent Apple software designs (notably Mail.app, in my opinion) have realized they could totally throw out a great deal of legacy and treat mail in a way it hadn't really been considered before as a collection of conversations. I think they could even take that further.
I saw in this thread the volume knob mentioned. Polish is one thing. I was also impressed by that knob. But I'll also point out it's nicely seated in the generally gorgeous, completely non-skeuomorphic audio player in iOS 6. What if Apple had decided they needed to throw a jukebox metaphor in there, and you suddenly could only select songs after watching an animation of the album selected from a stack and placed on a platter. It would be such a waste, and yet, isn't so far from what they've done with Podcasts, iCal, Game Center, etc...
In general the issues seem to be when the skeumorphism takes things to the point where the function becomes obscured, and you're wasting cycles and time rendering things that do not benefit from it. Page turning / sheet tearing / etc. Now, I stand properly in awe at the rendering abilities of these devices, and the skill of the designers in making them work, but there's a limit.
In addition to all of this, look at how limiting these principles are. How do you make something as useful as a menu bar icon fit into your concept of making an address book look like a telephone directory from 1930? Oh yeah, you don't, and so, very useful features are never introduced. Look at Cobook as an example of a Mac contacts program that executes well on some of this.
The most successful recent Apple software designs (notably Mail.app, in my opinion) have realized they could totally throw out a great deal of legacy and treat mail in a way it hadn't really been considered before as a collection of conversations. I think they could even take that further.
I saw in this thread the volume knob mentioned. Polish is one thing. I was also impressed by that knob. But I'll also point out it's nicely seated in the generally gorgeous, completely non-skeuomorphic audio player in iOS 6. What if Apple had decided they needed to throw a jukebox metaphor in there, and you suddenly could only select songs after watching an animation of the album selected from a stack and placed on a platter. It would be such a waste, and yet, isn't so far from what they've done with Podcasts, iCal, Game Center, etc...
I beg to differ. If you want to use a digital calendar, Apple provides you with software that looks like a physical calendar. If you want to navigate Windows 8 based on pictures and text, Microsoft gives you a user interface based on the pictures and text you'd see on street signs.
I definitely agree that it can be good for iPad users, given that focus is on one application at a time. Personally, I don't mind or really care about the look of the applications on Mountain Lion (I don't use Game Center, but it would be an exception if I did), though I do realize how much they clash and differ from the other applications like Safari, Mail, iTunes, etc.
All I'm wondering is...why is Game Center's segmented toolbar not centered in relation to the window? I know it's centered in between the navigation buttons as well as the search bar, but come on! The rest of the application elements are centered in relation to the window.
All I'm wondering is...why is Game Center's segmented toolbar not centered in relation to the window? I know it's centered in between the navigation buttons as well as the search bar, but come on! The rest of the application elements are centered in relation to the window.
Let me pick apart a section of my own design and explain why each element was chosen to be the way it is to explain how skeumorphism can be done well without interfering with functionality, which is of coarse most important. (This isn't an advertisement, the app isn't released)
This section is a fairly basic programmable MIDI keypad. Users can assign whatever MIDI signals they want to each button, choose the colors of the buttons, and add a label.
The greenish section at the top is a scrollable live display of the MIDI commands sent from the app, this allows the user to see if everything is working correctly, It also displays important messages to the user, if the user taps and holds on the display it goes fullscreen for easier viewing. When a critical message is displayed it turns red. It's modeled after your typical cheap LCD display, although with a clean legible font. This was chosen because it offers a neutral color thats easy to read in all lighting conditions, a pure white would be too bright in low light conditions, and the app is meant to be used for live performances where lighting conditions can be poor, either dark, or overly bright. The screen was positioned in the top left corner because it has the least user interaction, and with the majority of people being right handed it is the least comfortable position to reach. You might notice that I have left the status bar displayed at the top. This is because displaying the current time, and battery life would be very important to someone on stage.
To the right is the program button and program mode indicator, which flashes. the user presses the Program button, then selects the UI element that they wish to change settings for, any of the other UI elements can be selected. The program button changes when pressed. It turns slightly darker and and reduces in size a small amount, this gives visual indication that the button is activated, and appears depressed. This is modeled after a toggle button from an electric organ (not a hammond). This is positioned in the top right corner because it's easy to reach held in one hand by swinging the thumb upwards, but it is also a much further reach than any of the other buttons because pressing it by accident could cause confusion. When it's activated the bottom section of the app slides down on sliders to reveal a menu of settings beneath. This gives the user a sense of place, the settings have a physical location within the app.
Below the display screen are the channel buttons, this allows the user to have four different pages within the app. The screenshot shows one mode, the MIDI keypad mode. The user can choose which mode each channel is assigned to, so they can have any combination of four different devices, one for each channel. They glow amber when selected. This gives good indication as to which channel the user is on. having a separate button for each channel gives much faster indication with a quick glance at the screen the user can tell by the position of the glow, which is aligned with the grid of buttons, without having to read anything.
The background is the dark textured plastic I mentioned earlier. dark materials were chosen because it makes the controls stick out more. For someone using this as an instrument it's important that it has a strong visual contrast because a touch screen device has no tactile feedback, and in many situations an audible feedback can't be used, it is however an option. The metal border sharply contrasts the dark background an isolates the channel and program controls from the buttons below, which the user is expected to be tapping away at possibly with vigor. This helps to reduce accidental presses. The border also serves as a dead zone between the buttons below and the channels buttons.
The drumpad like buttons are the user configurable controls, with many possible color combinations and editable labels. The user is able to configure them to do pretty much anything they want with the MIDI spec, so being able to identify what each button is assign to is very important. It's not implemented yet, but the user will be able to assign overlay images to each button as well as labels. This will help because the human brain is much faster at identifying shapes than it is reading words, this is why each group of buttons in the app have distinct shapes, square, rectangle, and circle. The buttons have a glow, the glow is modeled after rubber drumpad buttons which have an LED mounted below them in real life, besides the change in brightness the glow affect on the outside of the button gives the illusion of the button getting slightly larger and give a much better feedback when the user's finger is covering most of the button. There is a visual separation between the buttons to help with more accurate aiming of the user's finger, but the reality is that each button is edge to edge. There is no dead space between the buttons, so the user will be hitting one of them if they hit anywhere in the bottom 3/4 of the app. If the user were to press between the buttons, and have nothing happen it would cause confusion.
None of the skeumorphism is completely necessary, but non of it detracts from the app, and in many cases it adds to the ease of use. I hope that this has helped to explain how skeumorphism can be helpful, or at the least not harmful, and how much really needs to be considered in UI design.
This section is a fairly basic programmable MIDI keypad. Users can assign whatever MIDI signals they want to each button, choose the colors of the buttons, and add a label.
The greenish section at the top is a scrollable live display of the MIDI commands sent from the app, this allows the user to see if everything is working correctly, It also displays important messages to the user, if the user taps and holds on the display it goes fullscreen for easier viewing. When a critical message is displayed it turns red. It's modeled after your typical cheap LCD display, although with a clean legible font. This was chosen because it offers a neutral color thats easy to read in all lighting conditions, a pure white would be too bright in low light conditions, and the app is meant to be used for live performances where lighting conditions can be poor, either dark, or overly bright. The screen was positioned in the top left corner because it has the least user interaction, and with the majority of people being right handed it is the least comfortable position to reach. You might notice that I have left the status bar displayed at the top. This is because displaying the current time, and battery life would be very important to someone on stage.
To the right is the program button and program mode indicator, which flashes. the user presses the Program button, then selects the UI element that they wish to change settings for, any of the other UI elements can be selected. The program button changes when pressed. It turns slightly darker and and reduces in size a small amount, this gives visual indication that the button is activated, and appears depressed. This is modeled after a toggle button from an electric organ (not a hammond). This is positioned in the top right corner because it's easy to reach held in one hand by swinging the thumb upwards, but it is also a much further reach than any of the other buttons because pressing it by accident could cause confusion. When it's activated the bottom section of the app slides down on sliders to reveal a menu of settings beneath. This gives the user a sense of place, the settings have a physical location within the app.
Below the display screen are the channel buttons, this allows the user to have four different pages within the app. The screenshot shows one mode, the MIDI keypad mode. The user can choose which mode each channel is assigned to, so they can have any combination of four different devices, one for each channel. They glow amber when selected. This gives good indication as to which channel the user is on. having a separate button for each channel gives much faster indication with a quick glance at the screen the user can tell by the position of the glow, which is aligned with the grid of buttons, without having to read anything.
The background is the dark textured plastic I mentioned earlier. dark materials were chosen because it makes the controls stick out more. For someone using this as an instrument it's important that it has a strong visual contrast because a touch screen device has no tactile feedback, and in many situations an audible feedback can't be used, it is however an option. The metal border sharply contrasts the dark background an isolates the channel and program controls from the buttons below, which the user is expected to be tapping away at possibly with vigor. This helps to reduce accidental presses. The border also serves as a dead zone between the buttons below and the channels buttons.
The drumpad like buttons are the user configurable controls, with many possible color combinations and editable labels. The user is able to configure them to do pretty much anything they want with the MIDI spec, so being able to identify what each button is assign to is very important. It's not implemented yet, but the user will be able to assign overlay images to each button as well as labels. This will help because the human brain is much faster at identifying shapes than it is reading words, this is why each group of buttons in the app have distinct shapes, square, rectangle, and circle. The buttons have a glow, the glow is modeled after rubber drumpad buttons which have an LED mounted below them in real life, besides the change in brightness the glow affect on the outside of the button gives the illusion of the button getting slightly larger and give a much better feedback when the user's finger is covering most of the button. There is a visual separation between the buttons to help with more accurate aiming of the user's finger, but the reality is that each button is edge to edge. There is no dead space between the buttons, so the user will be hitting one of them if they hit anywhere in the bottom 3/4 of the app. If the user were to press between the buttons, and have nothing happen it would cause confusion.
None of the skeumorphism is completely necessary, but non of it detracts from the app, and in many cases it adds to the ease of use. I hope that this has helped to explain how skeumorphism can be helpful, or at the least not harmful, and how much really needs to be considered in UI design.
I know Apple prefers to decide as many things for its users as possible, but this is one part of the UI I wish we were presented with a choice.
A choice of a cutesy theme with all these skeumorphic graphics, for people who want their computer to look like cloth and antique devices and all that, or the sleek, minimalist, iOS gloss black look for those of us who just want to see our data without all that clutter & distraction, and get on with our usage.
...not to mention, they need to spend some time actually using some of these iPad apps they've made. There are a ton of unnecessary extra finger taps to do things that could easily and cleanly be done in one or two. It's annoying.
I'm with Ive.
A choice of a cutesy theme with all these skeumorphic graphics, for people who want their computer to look like cloth and antique devices and all that, or the sleek, minimalist, iOS gloss black look for those of us who just want to see our data without all that clutter & distraction, and get on with our usage.
...not to mention, they need to spend some time actually using some of these iPad apps they've made. There are a ton of unnecessary extra finger taps to do things that could easily and cleanly be done in one or two. It's annoying.
I'm with Ive.
The "whimsy" is a bit grating. This isn't the 90s. The yellow notepad, the calendar, the address book... they all feel like they're part of an old suite of AOL apps trying to be cute and catchy, from a time when people were transitioning from paper media to electronic.
A good example of subtle UI polish is the lighting effect they've placed on some of the sliders -- where you tilt the phone, it affects how the slider knob reflects light. The rest of this skeuomorphism is really dorky compared to the slick presentation of Apple's devices, otherwise.
A good example of subtle UI polish is the lighting effect they've placed on some of the sliders -- where you tilt the phone, it affects how the slider knob reflects light. The rest of this skeuomorphism is really dorky compared to the slick presentation of Apple's devices, otherwise.
I don't really understand all the hate for the skeumorphisms. Are they tacky in some places? Sure, but it's really not that big a deal. You can't please everybody and for every person that hates them, there's probably another person that is totally delighted by them.
I'll admit, the reel to reel deck for Podcasts is kind of dumb...unless the eventual purpose of the app is to not only listen to Podcasts, but to have simple software built in to produce your own and upload them to iTunes for distribution. That would put the reel to reel in a whole new light. People have recorded on tape for decades, and some still do, but reel to reel was never a popular format for consuming audio.
I'll admit, the reel to reel deck for Podcasts is kind of dumb...unless the eventual purpose of the app is to not only listen to Podcasts, but to have simple software built in to produce your own and upload them to iTunes for distribution. That would put the reel to reel in a whole new light. People have recorded on tape for decades, and some still do, but reel to reel was never a popular format for consuming audio.
I never thought I'd see the day some Microsoft designers bettered their Apple counterparts.
I really hope something awesome happens today, otherwise I'll be using two ecosystems in my house rather than sticking entirely with Apple.
Windows 8 is extremely visually boring. Its not the most exciting thing to look at. If Apple go to that approach OMG.
Maybe Ive should stick to doing amazing hardware design and leave software design to others. Its the attention to detail, visually what has always drawn me into Apple products. I love the little touches of Skeuomorphisms. I bet the textures of the calendars app looks pretty epic on the rMBP, possibly one of the reasons why they've incorporated little additions like that as when the whole product like does go retina in the near future, it'll look freakin epic.
Its defo not tacky and if they got rid of the little additions, I'd think iOS/OSX was becoming extremely dull and visually unappealing like Android or Windows 8
----------
Can you explain to me how a load of blue and boxes is better than iOS and OS X? Its disgusting to look at, it might have looked cool on a portable device in about 2003, but it just looks so out of date to me. iOS and OS X are the most visually appealing interfaces at the moment with all the recreated textures etc. I'm not a fan of dull simplicity, I like attention to detail more than anything to show what can be achieved.
Maybe Ive should stick to doing amazing hardware design and leave software design to others. Its the attention to detail, visually what has always drawn me into Apple products. I love the little touches of Skeuomorphisms. I bet the textures of the calendars app looks pretty epic on the rMBP, possibly one of the reasons why they've incorporated little additions like that as when the whole product like does go retina in the near future, it'll look freakin epic.
Its defo not tacky and if they got rid of the little additions, I'd think iOS/OSX was becoming extremely dull and visually unappealing like Android or Windows 8
----------
Can you explain to me how a load of blue and boxes is better than iOS and OS X? Its disgusting to look at, it might have looked cool on a portable device in about 2003, but it just looks so out of date to me. iOS and OS X are the most visually appealing interfaces at the moment with all the recreated textures etc. I'm not a fan of dull simplicity, I like attention to detail more than anything to show what can be achieved.
The virtual irony
Yeah, as many have said, the new podcast app went that direction and...
A) it hurts functionality. Why do I have to pull up the "album cover" of the podcast just to access half of the controls that are placed onto a virtual reel-to- reel nagra tape recorder? These controls are not finger friendly -- plus they are slow and unreliable.
B) It doesn't make sense! Am I forgetting a time when podcasts were played on reel-to-reel tape recorders? How is that even a relevant skeuomorphism?
The problem with skeuomorphisms is that they are getting in the way of designs that could help users work more efficiently by imposing virtual approximations of the limitations of antiquated tools.
P.S. Isn't it ironic that they did away with the linear timeline in Final Cut Pro -- the one place where people didn't want to move away from a virtual approximation of the old style of work flow? Yes, it is
Yeah, as many have said, the new podcast app went that direction and...
A) it hurts functionality. Why do I have to pull up the "album cover" of the podcast just to access half of the controls that are placed onto a virtual reel-to- reel nagra tape recorder? These controls are not finger friendly -- plus they are slow and unreliable.
B) It doesn't make sense! Am I forgetting a time when podcasts were played on reel-to-reel tape recorders? How is that even a relevant skeuomorphism?
The problem with skeuomorphisms is that they are getting in the way of designs that could help users work more efficiently by imposing virtual approximations of the limitations of antiquated tools.
P.S. Isn't it ironic that they did away with the linear timeline in Final Cut Pro -- the one place where people didn't want to move away from a virtual approximation of the old style of work flow? Yes, it is
http://en.wikipedia.org/wiki/Metro_(design_language)
http://en.wikipedia.org/wiki/International_Typographic_Style
http://en.wikipedia.org/wiki/Adrian_Frutiger
http://zunited.net/2012/08/microsofts-metro-is-no-more/
Do you really consider that original? Do you think a bunch of blue/white tiles to be usable?
The design is very bold but also minimal. I've used Windows 8 for a couple months now and, while Microsoft's implementation of the "Metro" UI in the start screen leaves much to be desired, I will say that it is definitely visually attractive. The style seems more suited to Windows Phone where it works incredibly well, but I applaud Microsoft for innovating rather than just sticking with what's tried and true.
And what's the issue with drawing inspiration from something that's proven to be clean and readable?
Everyone's talking about Calendar (I personally think it's ugly, even the mtn lion version), but I think one case where this design paradigm works really well is the Contacts application:
Image
Simple, stays out of the way, no stupid transitions, but looks great and makes the application stand out a bit. Tone down Calendar, remove the transitions, and you have a potential winner. They should keep the torn paper bits though, I think that was a nice touch.
The Contacts app was serviceable in Snow Leopard but, in Lion/ML, it's been hobbled by this awful attempt to imitate a paper book. It's not a paper book and any attempt to make it so is a deliberate move to cripple the app. Frankly, I believe that Apple is crippling its Mac apps to make them perform more like their iOS counterparts. In this manner, Windows users who find iOS devices easy to use will be perfectly happy buying and using Macs that are, likewise, crippled.
Or perhaps Apple is doing this to foster opportunity for the 3rd party developers to provide apps that actually work properly.
As much as I love Apple's products, it maddens me to launch apps and see a UI that looks like the inside of the A-Team's van. All that crushed red velvet and imitation leather makes me want to puke.
Hmm well thats simply not true I'm 19 and have many old electronics from a Flip clock, to a 1978 Toshiba Record Player, to an 8-track player, to a 1960's Bush solid State radio. Not forgetting all my 50's 60's and 70's cameras and my sound amps.
I also serviced a 1950's reel-to-reel tape recorder which used vacuums tubes, and was fascinating to work with. Also pretty epic to see work. I really like the nostalgic approach Apple is going with, but thats most likely because I love vintage tech and collect it to me it just goes back to a time which seems far better than current. I like attention to detail and stuff over engineered just to get perfection, but thats just me some people like dull boring things, you cant please all I guess.
Some people are too ignorant of my generation, I actually had some friends who came to my house, asking what an 8-track player was. Still, at least vinyl is making a comeback. The best music format the world has ever seen!!!
Last edited:
I'll take that - there's some good work there. I'll be reading it at work later!
Thanks
----------
'Nobody cares' is a bit strong. I think you should have said 'I don't care'. More accurate, IMHO.
I'm in the "it's tacky" camp. Calendar, Podcast app, reminders faux leather. It is all naff and inelegant. I would have rather they concentrate on making the podcast app functional rather than pretty.
I hate to say this, but Apple is slipping and that started even when SJ was alive. If the truth be told it is clear that Tim has been at the helm for some years now and that we are heading in a bad direction.
How do you decide between Forstall and Ive? Simple, if it has anything to do with a user's interaction with the device, then Ive wins. His track record is almost faultless, whereas there are too many bumps in Forstall's road.
In 5 years Apple's stock price will be back with Google, MSFT and they will no longer be the innovators. In that time Ive will have left and even the fan base will wonder where the magic will come from after that. Apple's brilliance is 2 men and the people they led. It is not just their personal innovations that count, but the way the drive others to innovate.
I hate to say this, but Apple is slipping and that started even when SJ was alive. If the truth be told it is clear that Tim has been at the helm for some years now and that we are heading in a bad direction.
How do you decide between Forstall and Ive? Simple, if it has anything to do with a user's interaction with the device, then Ive wins. His track record is almost faultless, whereas there are too many bumps in Forstall's road.
In 5 years Apple's stock price will be back with Google, MSFT and they will no longer be the innovators. In that time Ive will have left and even the fan base will wonder where the magic will come from after that. Apple's brilliance is 2 men and the people they led. It is not just their personal innovations that count, but the way the drive others to innovate.
I'm entirely with Ive on this.
I refuse to even launch Game Center because it's so goddamn ugly. The iPhone 4S is a beautiful device, and Game Center looks like a MySpace page.
Even further, iOS UI elements just look sort of bad. Chrome for iOS and the new YouTube app look so much better than Safari and the Apple-made YouTube app. The UI is minimalist, functional, and stays out of my way.
----------
It's also a buggy piece of crap with no way to discern between downloaded episodes and 3G streaming, no way to set automatic downloads to 3G only at the app level, and horrible performance.
After using it for a few weeks, I just shelled out a few bucks for Downcast, which is far superior in every way (and includes no skeuomorphism).
I refuse to even launch Game Center because it's so goddamn ugly. The iPhone 4S is a beautiful device, and Game Center looks like a MySpace page.
Even further, iOS UI elements just look sort of bad. Chrome for iOS and the new YouTube app look so much better than Safari and the Apple-made YouTube app. The UI is minimalist, functional, and stays out of my way.
----------
It's also a buggy piece of crap with no way to discern between downloaded episodes and 3G streaming, no way to set automatic downloads to 3G only at the app level, and horrible performance.
After using it for a few weeks, I just shelled out a few bucks for Downcast, which is far superior in every way (and includes no skeuomorphism).
Thinking about it. I'm wondering if most people are "saying they hate the little touches" Simply because Ive doesn't like them. I wonder if everyone would instantly change their tune if Ive had said he really liked it.