User Interface, what is it ? It is not only where they can interact and write commands, like in terminal, in fact, bash and terminal applications are user interfaces. But not everyone is as tech savvy as others. So that’s why we must take the final user into account. Not only because it is he the one who pays, but also the one you must help. So, long story, short UIs are:
The means by which the user and a computer system interact, in particular the use of input devices and software.
This concept is something that changes across history, we didn’t have those cool transparency effects on the Mac Lisa. Developers have adapted to what the user needs and their experience. By the way, this experience is called User Experience (UX) and it has a strong link with UI Design. In fact, design provides the experience. These two concepts transcend much more than simple software. It applies for OS, software, websites and also hardware such as phones and home appliances. There are several tools to test the UX and all of them involves human interaction.
The Basics: Do’s and Dont’s
There are a few things you might want to take into consideration for your software projects. These are some guidelines (not rules).
- Remember that you are not the final user, so don’t assume anything. Do not assume the user knows how to even turn on the device. Yep, not even that.
- Keep it simple. Yes, that simple.
- Be consistent in all possible ways. Do not mix layouts, colors, styles. It is all part of a whole interface, so different styles or layouts might confuse the user if done.
- Let the user know what’s happening. I don’t mean to have a console log , but let the when something was done successfully, or if there is an error. Also, as a developer you will be amazed of how much time can be saved by letting the user know what happens.
Components 101
Everything we use has all of these in one or another way. Whether it is a website, or a software or an OS, all of them have components. The main components are divided into four categories:
- Input Controls: buttons, text fields, checkboxes, radio buttons, date field..etc
- Nav Controls: breadcrumb, history, search and pagination items.
- Output or Information Controls: alerts, notifications, tooltips, progress bars.
- Containers: accordion, dropdown elements…etc
So, I’m sure you’ve used some of these, so the next time you use something, think about how easy it is to navigate across. Remember that not everyone is as tech savvy as you do.
Thanks for reading.
Written by Miguel Cabral and Juan Pablo Ramírez.
