We’ve talked about UX and its differences within UI in our What is UX and should my company care? blog post, so now I want to share with you some examples of UI standards that you should take into consideration when you start designing your next user interface.
There are a couple of things that users already understand in a cognitive way and as a UI designer you should take full advantage of that. There’s no need to create new inventive icons for actions that are commonplace within multiple websites or applications, here are some of the ones that you should always think about when designing UI, and the reasons behind it.
Let’s start with the hamburger icon, when users see three horizontal lines aligned one on top of the other they understand it’s a prompt to expand or open a menu. Would you believe this icon was first used in the very first graphical user interface? The icon was designed by Norm Cox for the Xerox Star back in 1981.
Then the icon took a break from public and went missing until 2009, when the iphone 3G hit the stores, apple’s voice memos app used it to open the menu and then shortly after facebook followed by doing the same on their app, I guess we can say the rest is history, today we see the icon in multiple websites and applications, from McDonalds to Microsoft’s Xbox to IKEA, the hamburger icon made a return and came to stay, the icon is very well understood for the general public and using it on your design will clearly tell the user there’s a menu there.
Another common example is the “cog” icon that you can see in multiple applications, the moment you see that icon you know that when you click on it you’ll get configuration options for the current app you are using. This is very important because it's a huge tool that almost every app needs, so being able to simplify it with an icon is a great practice for UI.
We’ve seen that icon used since Windows 95 for the general settings, the creative origin of it comes from the idea that the position, size and movement of a single cog can manipulate the whole mechanism of any mechanical device, the idea comes originally from watches but can be applied to any device. Thus modifying the “cog” on your computer or app allows you to change the functions that it's meant for.
One of the oldest ones that have been with us almost since GUI’s took over the personal computer is the menu bar, you know that text on the upper part of your screen that includes File, Edit, see, tools, help, etc. When people use an app and see that text on the top they understand beforehand that the menu will include multiple expandable options. Text editors, picture editors and even graphic and video editors include these menus almost as a standard.
It doesn’t matter if you use Windows, MacOS, Linux, etc. You’ll see menu bars all over the place because it’s something that users always expect when working with any complex program that lets you open, save and modify files. We can go back to 1985 when the amiga personal computer hit the market and we’ll see menu bars on their different programs. The menu bar is so user friendly that MacOS chooses to anchor it at the top of your screen and basically requires every program made for it to have its own set of options inside of it. It’s always used on computers but not very user-friendly for mobile phones, so most of the time you can see the menu bar replaced on a phone with… yes, a hamburger menu.
These are some of the most popular GUI standards that you should never change, I’m not against creating new ways of interacting with your apps or devices but when things like this are standardized it’s for agood reason. The main goal for you while designing a UI is for the user to feel like they understand what they’re doing, the more familiar things you place in your work the more “at home” the user will feel and the less scared people will be from using your interface.
When something has been used since 1985 it’s really because it works and because it has been aligned to our brains, as a graphic designer I just can’t imagine working with a GUI that doesn’t include a classic menu bar, so just remember these things are here to help to make your UI a more welcoming place to new users, thus staying for a longer time and sharing your “easy to use” product.
Click here to learn more about UI/UX and its appliances in software development.
