8 ms·

Hmmm... design fashions change over time and are also affected by technological limitations. I’m the beginning we had text only terminals. Font designs were ab

Hmmm... design fashions change over time and are also affected by technological limitations. I’m the beginning we had text only terminals. Font designs were about it. Business machines stayed that way for quite a while. 8 bit machines came along and allowed a rudimentary windowing environment. The “desktop” metaphor with its “files” was extremely popular and arguably very successful. Roll on 16 and 32 bit machines and the windows and Mac “desktop” windowing systems added some colour but no whimsy. Macs got some smiles. Good god - it’s the end of grown ups. iPhones (not iPads as the article asserts) introduced a heavily skeumorphic interface for two reasons: it was technologically possible on that platform and it was a design that someone with enough influence had chosen. No surprises there: a wildly successful product that introduced a new design idea sparked a new fashion in UI design. But skeumorphism in web design turned out to be less than great for reasons presented in the article. So we retreat from skeumorphism and end up with: flat and colourful. UX (not just UI) experts discover that fast-loading and simple to comprehend websites convert to more sales and more profit. Simple and easy is king on the web for obvious reasons. If simple and easy looks like infantile there’s an excellent reason: it’s because they share many things. But not all. Online gambling and share trading platforms my look infantile because they want to be appealing but they are fundamentally not infantile. It’s easy enough to make a point if one only presents facts that support it. So much is skipped in this article that I feel like it might well be possible to cherry-pick enough opposing examples to argue exactly the opposite.

CaptArmchair 7y ago
I don't think skeuomorphic is what you think it is. From wikipedia: (1) > A skeuomorph (/ˈskjuːəˌmɔːrf, ˈskjuːoʊ-/) is a derivative object that retains nonfunctional ornamental design cues (attributes) from structures that were inherent to the original. Examples include pottery embellished with imitation rivets reminiscent of similar pots made of metal and a software calendar that imitates the appearance of binding on a paper desk calendar. A digital skeuomorph GUI emulates real-world objects and attributes to provide a recognizable and sensible frame of reference to an end-user. For instance, a digital calculator app visually resembles a real-life calculator, the use of the "play" and "rewind" buttons in a media player, the "folder" or "document" icons in a file manager, the use of an envelope to represent an e-mail,... Now, literally none of that has to do with the style used to represent those symbols. You could draw a "flat" envelope icon using only black and white colors in the famous Ligne Clair style and it would still be skeuomorphic design. (2) Apple didn't invent skeuomorphic design when it developed and released the iPhone. That's a misconception. Skeuomorphic design dates back to the 60's and 70's when companies such as Xerox built the first GUI's. Douglas Engelbart's "Mother of All Demos" given in 1968 arguably laid the foundations which would be incorporated by Apple and Microsoft in their products (3) ... and then there's the Web. Which is literally a connected mesh of distinct pages implementing the ideas of hypertext. At one point, people started to treat static Web pages as indepedent functional user interfaces. Because there are particular business benefits to doing that over building native applications (i.e. the whole SaaS thing, cutting out distribution of code, etc.). And so, here we are in this hot mess where you have people re-inventing the wheel building web applications, SPA's, using all kinds of nuts 'n bolts frontend frameworks while browser vendors and organizations like the W3 are trying to catch up with API's. Meanwhile, static websites are still very much a thing and designers and (frontend) developers are doing that too. There are as many visual languages as there are people building things to put on the Web. And so, everything ends up bleeding into one another, influencing one another,... Some things coalesce and you see visual elements being picked up and repeated all over the place. Like, that time when Bootstrap was all the rage and it was like half the Web consisted of hero images and jumbotrons. Or that regrettable, yet luckily short-lived trend of using a background video in your header image. At this point, it seems like bright colors and "flat-drawn" "Kurzgesagt" style are in vogue. To be sure, this will pass too in due time. To me, it seems strange to lament that the colors or the loss of skeuomorphs are turning an interface "infantile". It's not. That's just barking up the wrong tree. What makes an interface infantile is designing and implementing a language without considering the end user. It's one thing to consider the individual affordances of an interface - colors, fonts, skeuomorph elements - it's another thing to consider the interface as a whole and concluding that it's just badly implemented. Much like a joke you have to explain before your audience gets it. Many designers lose themselves in the former, arguing the merits and downsides of "flat design" without giving the latter enough thought. (1) https://en.wikipedia.org/wiki/Skeuomorph https://en.wikipedia.org/wiki/Skeuomorph (2) https://en.wikipedia.org/wiki/Ligne_claire https://en.wikipedia.org/wiki/Ligne_claire (3) https://en.wikipedia.org/wiki/The_Mother_of_All_Demos https://en.wikipedia.org/wiki/The_Mother_of_All_Demos
henry_flower 7y ago
here's an example: https://developer.twitter.com/en/docs/tweets/curate-a-collection/api-reference/get-collections-entries scroll to the very end of the page, where twitter cheerfully asks "Was this document helpful?" why did they choose a happy/sad face, instead of, I don't know, regular buttons? who's the indented audience of that page? kids? I think not. It's probably a 30-something year old grumpy, bearded guy, yet...
- pbhjpbhj 7y ago
  Same reason that people don't put in a new traffic light and decide to replace the lights with a door that opens to show a reddish apple, a peach, a bonsai tree.
alxlaz 7y ago
I don't want to argue about the general idea but a lot of the things in your timeline don't really match with history: * The desktop metaphor with its files was not popular, and not successful on 8-bit machines. It was technically possible to get something with a desktop metaphor running on these machines, with enough clever trickery -- e.g. GEOS ran on the C64 and the Apple II. But it wasn't very useful, because they also lacked the storage to make it useful. Things like GEOS or GS/OS had their users but these things weren't too successful in the realm of 8-bit machines. In fact, many of them didn't even show up on 8-bit machines until way into the "16-bit era", when 8-bit computer users began to covet windows, buttons and icons. * By the time the iPhone showed up, in 2007, skeumomorphism had been the way to design interfaces for at least 8-10 years. See e.g. Kai's Power Tools, which in the mid-90s looked like this: https://alchetron.com/cdn/kais-power-tools-5461d370-1529-47a9-9efc-4d9799c0eed-resize-750.jpg https://alchetron.com/cdn/kais-power-tools-5461d370-1529-47a... . KPT was, admittedly, an outlier, in that it was more whimsical than average -- but Aqua/OS X interfaces and, later, the iPhone's interface was not fundamentally different from the status quo, they just looked better. In fact, the iPhone came up late enough that, when it did, its interface was seen as a "final word" on the matter because the field was already extremely mature -- the time for experiments was long gone. The iPhone didn't spark a new fashion in UI design, it adopted what was already the fashion in UI design, everywhere. * Fast-loading and flat are completely orthogonal. Today's websites load way slower than the websites of the Geocities age. * Early Windows version were very much colourful and whimsical because of the VGA palette. By the time Microsoft could bet on enough users having 256-color screens (in the 3.1 age), two major Windows version had passed. The default background in Windows 2.0 was a retina-piercing cyan. * Early Macs models were certainly not whimsical in terms of colours, but that had nothing to do with fashion -- it was because they were monochrome. * Most 8-bit machines certainly used very vivid colours. Most of them could (and most users did) use a TV for a monitor, and the palette choice was deliberately picked with this in mind. The first Amiga Workbench version had an eye-stabbing palette, chosen so that things could be read even on poor quality, black-and-white TVs.
- giantrobot 7y ago
  I'm sorry but Kai's Power Tools was not some sort of UI design trendsetter. Outside of very niche programs you didn't see skeuomorphic UIs much at all in the 90s or 00s. MacOS X's Aqua UI was very different from Windows and older MacOS versions. The textures aping iMac design elements are superficial differences, the real distinction was the state changes and representations. In the early Aqua UI things like buttons and selected menu elements were colored and composited on top of their backgrounds. It was obvious that "Save" was the default action because the button was colored blue in the dialog. Document modal dialogs were attached to and animated out of the document's own window and composited over the contents. Icons bounced in the dock to get attention for dialogs. The dock itself animated to make icons under the cursor larger (Fitt's law improvement) and minimized windows got sucked into the Dock with the genie animation. While Aqua still used the WIMP paradigm it had a lot of UX differences from older UIs. It used a lot more animation to convey information to the user. Animations told the user their action was registered and was caused something to happen. This was in contrast to Windows where sometimes you might see a hourglass cursor if you clicked something but you usually had to look at your drive activity light to be confident Windows registered you clicking an icon. With the iPhone, it was up against a bunch of phones whose UIs were designed to be use with a stylus and were doing their damnest to look like a desktop's UI. The iPhone's design language was all about making elements large enough to be used with a fingertip and convey the idea that you were even supposed to touch the screen. When the iPhone was released most people had never owned or used a smartphone or PDA. The most popular phones were non-touch feature phones. After the iPhone skeuomorphic design was everywhere. Android aped a lot of iPhone UX elements as did webOS, they wanted to convey that elements should be touched and interacted with directly. Android's pre-iPhone UI looked a lot more like Windows Mobile and Blackberry. Apple certainly didn't invent skeuomorphic UIs but the iPhone was the first smartphone to make such it the default design language.

CaptArmchair 7y ago

I don't think skeuomorphic is what you think it is. From wikipedia: (1) > A skeuomorph (/ˈskjuːəˌmɔːrf, ˈskjuːoʊ-/) is a derivative object that retains nonfunctional ornamental design cues (attributes) from structures that were inherent to the original. Examples include pottery embellished with imitation rivets reminiscent of similar pots made of metal and a software calendar that imitates the appearance of binding on a paper desk calendar. A digital skeuomorph GUI emulates real-world objects and attributes to provide a recognizable and sensible frame of reference to an end-user. For instance, a digital calculator app visually resembles a real-life calculator, the use of the "play" and "rewind" buttons in a media player, the "folder" or "document" icons in a file manager, the use of an envelope to represent an e-mail,... Now, literally none of that has to do with the style used to represent those symbols. You could draw a "flat" envelope icon using only black and white colors in the famous Ligne Clair style and it would still be skeuomorphic design. (2) Apple didn't invent skeuomorphic design when it developed and released the iPhone. That's a misconception. Skeuomorphic design dates back to the 60's and 70's when companies such as Xerox built the first GUI's. Douglas Engelbart's "Mother of All Demos" given in 1968 arguably laid the foundations which would be incorporated by Apple and Microsoft in their products (3) ... and then there's the Web. Which is literally a connected mesh of distinct pages implementing the ideas of hypertext. At one point, people started to treat static Web pages as indepedent functional user interfaces. Because there are particular business benefits to doing that over building native applications (i.e. the whole SaaS thing, cutting out distribution of code, etc.). And so, here we are in this hot mess where you have people re-inventing the wheel building web applications, SPA's, using all kinds of nuts 'n bolts frontend frameworks while browser vendors and organizations like the W3 are trying to catch up with API's. Meanwhile, static websites are still very much a thing and designers and (frontend) developers are doing that too. There are as many visual languages as there are people building things to put on the Web. And so, everything ends up bleeding into one another, influencing one another,... Some things coalesce and you see visual elements being picked up and repeated all over the place. Like, that time when Bootstrap was all the rage and it was like half the Web consisted of hero images and jumbotrons. Or that regrettable, yet luckily short-lived trend of using a background video in your header image. At this point, it seems like bright colors and "flat-drawn" "Kurzgesagt" style are in vogue. To be sure, this will pass too in due time. To me, it seems strange to lament that the colors or the loss of skeuomorphs are turning an interface "infantile". It's not. That's just barking up the wrong tree. What makes an interface infantile is designing and implementing a language without considering the end user. It's one thing to consider the individual affordances of an interface - colors, fonts, skeuomorph elements - it's another thing to consider the interface as a whole and concluding that it's just badly implemented. Much like a joke you have to explain before your audience gets it. Many designers lose themselves in the former, arguing the merits and downsides of "flat design" without giving the latter enough thought. (1) https://en.wikipedia.org/wiki/Skeuomorph https://en.wikipedia.org/wiki/Skeuomorph (2) https://en.wikipedia.org/wiki/Ligne_claire https://en.wikipedia.org/wiki/Ligne_claire (3) https://en.wikipedia.org/wiki/The_Mother_of_All_Demos https://en.wikipedia.org/wiki/The_Mother_of_All_Demos

henry_flower 7y ago

here's an example: https://developer.twitter.com/en/docs/tweets/curate-a-collection/api-reference/get-collections-entries scroll to the very end of the page, where twitter cheerfully asks "Was this document helpful?" why did they choose a happy/sad face, instead of, I don't know, regular buttons? who's the indented audience of that page? kids? I think not. It's probably a 30-something year old grumpy, bearded guy, yet...

pbhjpbhj 7y ago
Same reason that people don't put in a new traffic light and decide to replace the lights with a door that opens to show a reddish apple, a peach, a bonsai tree.

alxlaz 7y ago

I don't want to argue about the general idea but a lot of the things in your timeline don't really match with history: * The desktop metaphor with its files was not popular, and not successful on 8-bit machines. It was technically possible to get something with a desktop metaphor running on these machines, with enough clever trickery -- e.g. GEOS ran on the C64 and the Apple II. But it wasn't very useful, because they also lacked the storage to make it useful. Things like GEOS or GS/OS had their users but these things weren't too successful in the realm of 8-bit machines. In fact, many of them didn't even show up on 8-bit machines until way into the "16-bit era", when 8-bit computer users began to covet windows, buttons and icons. * By the time the iPhone showed up, in 2007, skeumomorphism had been the way to design interfaces for at least 8-10 years. See e.g. Kai's Power Tools, which in the mid-90s looked like this: https://alchetron.com/cdn/kais-power-tools-5461d370-1529-47a9-9efc-4d9799c0eed-resize-750.jpg https://alchetron.com/cdn/kais-power-tools-5461d370-1529-47a... . KPT was, admittedly, an outlier, in that it was more whimsical than average -- but Aqua/OS X interfaces and, later, the iPhone's interface was not fundamentally different from the status quo, they just looked better. In fact, the iPhone came up late enough that, when it did, its interface was seen as a "final word" on the matter because the field was already extremely mature -- the time for experiments was long gone. The iPhone didn't spark a new fashion in UI design, it adopted what was already the fashion in UI design, everywhere. * Fast-loading and flat are completely orthogonal. Today's websites load way slower than the websites of the Geocities age. * Early Windows version were very much colourful and whimsical because of the VGA palette. By the time Microsoft could bet on enough users having 256-color screens (in the 3.1 age), two major Windows version had passed. The default background in Windows 2.0 was a retina-piercing cyan. * Early Macs models were certainly not whimsical in terms of colours, but that had nothing to do with fashion -- it was because they were monochrome. * Most 8-bit machines certainly used very vivid colours. Most of them could (and most users did) use a TV for a monitor, and the palette choice was deliberately picked with this in mind. The first Amiga Workbench version had an eye-stabbing palette, chosen so that things could be read even on poor quality, black-and-white TVs.

giantrobot 7y ago
I'm sorry but Kai's Power Tools was not some sort of UI design trendsetter. Outside of very niche programs you didn't see skeuomorphic UIs much at all in the 90s or 00s. MacOS X's Aqua UI was very different from Windows and older MacOS versions. The textures aping iMac design elements are superficial differences, the real distinction was the state changes and representations. In the early Aqua UI things like buttons and selected menu elements were colored and composited on top of their backgrounds. It was obvious that "Save" was the default action because the button was colored blue in the dialog. Document modal dialogs were attached to and animated out of the document's own window and composited over the contents. Icons bounced in the dock to get attention for dialogs. The dock itself animated to make icons under the cursor larger (Fitt's law improvement) and minimized windows got sucked into the Dock with the genie animation. While Aqua still used the WIMP paradigm it had a lot of UX differences from older UIs. It used a lot more animation to convey information to the user. Animations told the user their action was registered and was caused something to happen. This was in contrast to Windows where sometimes you might see a hourglass cursor if you clicked something but you usually had to look at your drive activity light to be confident Windows registered you clicking an icon. With the iPhone, it was up against a bunch of phones whose UIs were designed to be use with a stylus and were doing their damnest to look like a desktop's UI. The iPhone's design language was all about making elements large enough to be used with a fingertip and convey the idea that you were even supposed to touch the screen. When the iPhone was released most people had never owned or used a smartphone or PDA. The most popular phones were non-touch feature phones. After the iPhone skeuomorphic design was everywhere. Android aped a lot of iPhone UX elements as did webOS, they wanted to convey that elements should be touched and interacted with directly. Android's pre-iPhone UI looked a lot more like Windows Mobile and Blackberry. Apple certainly didn't invent skeuomorphic UIs but the iPhone was the first smartphone to make such it the default design language.