There’s been an interesting shift over the last few years, I think it started back in 2013 when Apple redesigned iOS and did away with skeuomorphism which Steve Jobs was a huge fan of. For those who don’t know, Skeuomorphic design (in terms of digital interfaces) are user interfaces made to look like real-life objects. The notes app in iOS used to look like an old legal pad, the reminders app looked a paper checklist on a fake leather pad.
Though we have moved away from skeuomorphism these days, you still see traces of it, save icons are often a depiction of a floppy disk, we still use pictures of envelopes for emails and paper clips for attachments.
Skeuomorphism was important, it trained us, humans, to use this new digital world we live in but we have moved on now. We now have interfaces pretty much invented for the digital world we live in and are second nature for us to use, even though 20 or 30 years ago they didn’t exist.
Here are some of the most important user interfaces of all time that were invented for this digital world and helped us move away from skeuomorphism
The Blinking Cursor
Every time you use a computer or your phone, I almost guarantee you see this. It is probably the earliest example and a digital interface. Before we had GUI’s (Graphical User Interfaces) we had CLI‘s (Command Line Interfaces), basically the only way to interact with the computer was by typing commands into it. This meant that you needed to know where the letter you were going to type was going to go and long story short the blinking cursor was born.
To this day we still use it every time we type on a keyboard and is probably the earliest example we have of a user interface and I think it is safe to say it stood the test of time.
The Hamburger Menu
So-called the Hamburger Menu because of its three lines that supposedly look like a bun with a patty in the middle, the invention is credited to Norm Cox who designed the interface for use in the Xerox Star back in the 1980s. The design came to be in order to work around the limitations of a black and white (2 colour) 72 dpi (dots per inch) screen. Just to put that into context – the newest MacBooks support millions of colours and 220 dpi.
In years since it seemed to get used less, supposedly screens got better and bigger so there was less need for them, but then since the rise of smartphones and smaller screen sizes its made a big comeback, so much now to the point where it has also made it back onto desktop because of ‘mobile-first’ design where for simplicity sake the design is effectively ported over from mobile.
There are arguments that hamburger menus aren’t all that good though now, and are often used out of laziness. Placement of the menu often clashes with back button navigation and it’s often out of the ‘thumb stretch’ zone meaning you have to overreach your thumb in order to tap it. You also don’t always know what you are going to get when you click the button, yes a menu but there is often no way of knowing if it is the menu that you want. There are valid pros and cons from each side on whether hamburger menus are good, they are found in nearly every Google app now but nowhere to be found in an Apple app.
This might seem like a slightly mundane, boring and maybe even obvious thing to add to the list, but CTAs (Call To Actions) are so important that I couldn’t leave it off the list. CTAs tell the user what that main task is they should be trying to accomplish on a website.
There are so many different designs for CTAs. It’s fascinating how they can be designed and the psychology behind them. They make us want to interact with a website and well designed CTAs can be the difference between an intuitive website and a very frustrating experience.
For something so simple and obvious, they should never be underestimated.
Pull To Refresh
Remember the first iPhone? Having to tap to refresh a page. Now I bet you know without even thinking about it to “over scroll” and “pull to refresh”. We all do it like it’s second nature
The credit for this interface goes to Loren Brichter while developing a Twitter client called Tweetie (which has since been bought by Twitter and become the official twitter app). He came up with the interface after getting annoyed with other apps at the time using valuable screen real estate for a refresh button.
Pull to refresh has attracted some criticism though, more in the realm of social apps where, when paired with ‘infinite scroll’ means that users are mindlessly spending an unhealthy amount of time attached to their phones looking at social feeds. But when it comes to other applications like e-commerce they can provide a much slicker experience for the user.
The interface is so good for apps like email that Apple has since developed it to be part of iOS and pretty much every Google mobile app utilises it, despite Twitter reportedly owning the patent for it that they don’t enforce.
So thats just some one the the most important user interfaces. They are all pretty much invented for today digital world and all of them helped us break away from skeuomorphism