“Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, “Make it look good!” That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works. “
When thinking about how we interact with our digital content, what we are really talking about are design languages. These design languages are the ways in which designers help the end user to understand the context and usage of their content. To talk about how design languages help us, let’s start at the beginning.
The Start of GUI Design
When computers made their first move to graphical user interfaces (GUI), there was the need for people who never handled computers before to understand the basic concepts of computing using familiar workplace terminology. This is the primary reason we have a “desktop” where we can place “folders” that contain “files” and we can delete said “files” by putting them in the “trash” or “recycle bin.” These terms were pulled directly from real world use and real world objects that the user can relate to, thus making the transition that much simpler.
Combining these terms with a GUI that matched is the start of skeuomorphic design. With skeuomorphic design, the visuals on screen match the real world counterparts to quickly give users visual clues as to what they are to be doing. One famous example of how far designers tried to push this type of design was the Microsoft Bob software, which placed the items directly into rooms for the average user who Microsoft thought just couldn’t grasp how Windows 95 operated.
Web and Mobile Design
The internet started in a different direction, with more focus on data rather than tying it back to real world items. Mainly because the bandwidth speed of early modems limited the internet to primarily text and links so it was difficult to apply graphical skeuomorphism to web pages. This was akin to the very beginning of computers using just a terminal prompt before the adoption of operating systems that had graphical interfaces and helped lead to the widespread adoption of computers in the home.
By the 90’s, with modem speeds getting faster, realism design starts to show up in web design.
Often confused with skeuomorphic design, realism design mimics physical items or textures purely for aesthetic whereas skeuomorphism is used to support a metaphor that helps a user understand what the function of the item is. Once users began to understand the concepts of computing and didn’t need the metaphors, the design look still stuck around but was no longer always used to indicate to the user what to do. While the web moved towards realism design, a new tech comes into focus with touch screen mobile devices.
Once again we move back towards skeuomorphic design with iOS and the icons on screen matching what the real world counterparts look like. This move back to skeuomorphic design shows how every new technology seems to use this initial design phase to help new users become acclimated to how the system works by relating it back to a real life object they already know.
Where are we going?
So once again we’re left with, what’s next? Once users understand how a system works, how can we then shift design to better achieve the task rather than to make new users understand through metaphor how it works? These new thoughts gave rise to flat design, which is a reactionary movement against 3d (drop shadows, elements that appear raised, sunken or hollow), skeuomorphic and realistic design styles.
The beginning of the flat design movement came with the launch of Windows 8 in 2011. Apple joined in with this shift around 2013 when they changed their website and iOS 7 to flat design. The shift did not come easy for either Microsoft or Apple as both the tiles in Windows 8 and Windows Phone as well as the icons in iOS 7 were harshly criticized upon first viewings.
The Verge reported on the changes to iOS 7 in an article entitled, The design of iOS 7: simply confusing. They said, “But with the icons, there's an enormous feeling that Apple's designers couldn't decide on a direction. And for all the jokes about skeuomorphism, I would have preferred something nearer to the company's previous efforts than the new set, which seems closer to bathroom signage than even the Windows Phone's plainness.”
Apple is now calling their approach iOS Human Interface Guidelines and have stuck firmly with the no drop shadow, minimally distracting approach to keep the focus on the main elements while keeping things full responsive.
With a more tech-savvy user base, designers can continue to innovate new ways to simplify design for our current devices without getting tangled up in heavy metaphors and distracting textures. However, whenever we see new technologies pop up, we’ll always see the initial push towards skeuomorphism. With VR becoming the newest system in need of design, we’ve seen a shift back with Oculus Home creating a near version 2.0 of Microsoft Bob.
The GUI takes the form of a room in your house which you can decorate and then uses icons to open up your games and programs once again showing that it’s easiest to make people comfortable with new technology by giving them something familiar.
While this shows a new tech in its infancy, for more developed tech such as the web, we’ll see the push further away from this type of design and experimentation into just how abstract we can go while still making the user feel comfortable with knowing just what they are expected to do when they go to their favorite websites.
For more information related to why design is important and what we can do to help your site’s UX, here are some other posts from our team.