ABOUT UI. DESIGN
From the golden days to now-a-days
At the end of the golden age of web design, around the end of the time when there was still a lot of money to be made on the internet (about 2007) we decided to become self-employed (PRORENS). It was that time when websites were made no wider than 780 pixels, everything was still composed of tables, CMS only just existed, Flash websites were still what you aspired and 'SEO'wasn’t even a term.
In the last ten years, a lot has changed. Ever since Web 2.0 we’ve started thinking differently about the best way to navigate within a website.
There are a lot of opinions about this subject… A LOT. But, the growth of new industry-based terminologies is even more overwhelming. Terms like 'User Interface Designer', 'User Experience Designer' and 'Human Centered Designer' are being used daily. Really, it’s too much to keep up with.
Communicating is getting your message across. On- and offline!
DESIGN IS COMMUNICATING VISUALLY
According to our humble opinion, in the end, it’s all about visual communication. To convey a goal, a feeling or a message by means of images, lay-out and way of looking. It’s something we don’t just do during interface designing, but during the complete process of every product we deliver.
We are the designers, after all. We design solutions.
That’s why we’ve shoved all those new terms aside. Just say what you wanna say!
Why don’t we go oldschool and just set the 5 W’s loose on Interface design?
In doing so, we will share with you our vision about this.
We’ve come up with three archetypes to define all kinds of users. Now we’re not talking about designing anymore, but about how a user experiences the software and/or website and about what it takes to get them were you want them to be.
Fast Frank is the dream of every webshop owner, software developers and /or designers. He doesn’t like any frilly frollies. He knows what he wants and he wants it now. He’s pretty tech savvy. Clear navigations is what he wants.
Doubtful Debby is a comparing person. She has already compared your service, software and/or product to many other providers and it’s up to you to convince her that you’re the best choice. The opinions of others play an important role in her decision making.
Smart As(s) Sam
Smart as Sam is a researcher at heart. He isn’t going to be manipulated in the choices he makes. He has become such a know-it-all because of his autodidactic attitude towards everything. Knowledge, extensive explanations and solid arguments will make him think he is making the right decisions.
WTF! THEY ARE SO DIFFERENT
But how do you create your product in a way that all three types will feel at home on your website, using your software, product and/or service?
SIMPLIFY YOUR NAVIGATION MINIMIZE THE AMOUNT OF CLICKS
Interface design is often applied the wrong way. As it’s designed and built mainly by programmers and people from the industry, you end up with some pretty difficult choices. For these designers it’s all very logical, but for the average Joe Schmo it can be super complicated.
It’s actually pretty simple. If you click on a link, it should give the response or do the action you would expect it to. Right?
Built an intricute structure, making that impossible? Just make sure the follow-up choices are presented in a clear way.
But it gets more complicated as not everybody looks at things the same way or navigating in the same way.
Always ask yourself: Is something very important? Place these on different locations within your navigation. That way, each person is able to ‘find their own way’ within your product, software and/or web application.
The ‘All roads lead to Rome’ principle.
Fast Freddy likes it when you click on something, you immediately go right where you want to be. Action and reaction.
Doubtful Debby is the happiest when she gets an immediate response to her doubts and questions. She will feel extra smart because she will quickly pic up on how your software, product or webshop functions.
Smart As(s) Sam appreciates a clear and to-the-point navigation. He wouldn’t have done it any other way himself. Logic excites him.
A functional design doesn’t need to be boring. Everybody will appreciate the fact that you put in an extra bit of effort in designing. Motivating someone to use your product, software or site optionally, however, can be a challenge.
We at Twisted use a lot of color in our navigations and for a good reason. By using differentiating colors and clear icons, we make the users know that they have switched from one part of the interface to another.
On a subconscious level they will, eventually, make a connection between color and action.
A LITTLE COPYCATTING IS OKAY
Do not deviate to much from what is already out there. For instance, the color red is often used in combination with a wrong action. The color green is often used when an action is done right. An envelope-icon is used as a contact icon and an arrow is used to indicate going to the next part of something. If you still want to introduce different icons or your personal color scheme to the game, try to be consisted and repeat yourself. Do this so your users will learn to work with the choices in icons and/or color schemes you have made.
Fast Freddy doesn’t like being distracted by frilly frollies. The consequential use of colors and clear icons show him exactly where he needs to be.
Doubtful Debby will feel safe and understood. The design will feel friendly and familiar and she will recognize a lot of the elements. This makes all her doubts vanish like snow in the sun.
Smart As(s) Sam understands why the choices have been made to use certain icons and/or colors. Being self-educated and everything, he’s seen a lot of things used the same way. The efficiency will speak to him.
BUT BE AWARE OF THE PROFESSOR SYNDROME!
At Twisted, we sometimes use the term ‘The Professor syndrome’. The moment you start offering a product or service, you are the expert on it. You will have knowledge you wish to share with your target audience, but herein lies the trap. By over-explaining things it’s possible to make your product or service seem unnecessary complicated. Always ask yourself: “Do people really need to know certain stuff?”
Don’t label your users as being stupid. When your navigation is clear, one click should be enough to see the desired result. Your navigation shouldn’t even need an explanation.
Fast Freddy will leave as soon as he sees a lot of explanations or texts. Too much to read and too little time.
Doubtful Debby will become super insecure: “Do I need to know all this before I can use this product or service?”
Smart As(s) Sam will feel patronized: “Do you really think I’m that stupid? Who are you to think I’m interested in all of this?”
YOU WANNA TALK, WE GET IT
Still have to get things off of your mind? That’s okay, but do it by opening a Youtube channel with some quality explanimations or start a blog/vlog. Make info pages on your website which can be accessed via a ‘read more’ or a button. On these you can spill out all the crap you have on your mind. The moment people use them it’s because they are looking for extra info, and that will by their own choice. As long as you don’t fuck up your navigation and make it look more like a reader than an actual product or software application.
Everybody seems to be online these days. Bumping into smartphone zombies reaching for a milk carton on the shelves, getting hit by unattending cyclists who simply must share their status updates at that particular moment: “I’m riding my bike right now…” Really gurl?!
Damn near every site or software implementation that we design is responsive, meaning it can be used via multiple mediums. Still, we think you should always pick a favorite.
Ask yourself: On what medium (desktop, tablet, mobile or even paper) will your software, product and/or service be used the most?
Your interface should work best on that medium of choice. A tablet or pc always need a landscape navigation and lay-out, whereas mobile or paper needs a portrait navigation and lay-out. Your navigation should be short and work on a visual level. By scrolling and visual linking the user will get were he/she needs to be.
Do you have a webshop? Then the end goal is making people buy a product from you. The road to this point should be made as obvious and clear as possible. Put your shopping cart in clear view and make sure the links to the shop are always up-to-date and easily accessible.
Are you offering e-learning? Make sure the steps people take to learn something are as understandable as possible. Also show the user how many steps need to be taken to reach the end goal.
The final place, the place you want the user to end up, must always be in clear sight. There must be as little clicking links as possible to that location. Do not burry it within functionality, but put it in front of everything. Be clear and transparent.
Today’s software dictates you to be online almost all the time. After all, that’s where we can see how many active users your product has. A treat for the owner, but not always for the user.
When your software or product results in high internet-usage, our more stingy users will be less inclined to use it optimally. So when, for instance, you want to sell or teach to students who are on a tight budget, make sure your product or service doesn’t wholly rely on being online.
A workaround? Only let certain parts work online (like registrations or online play) to ensure users don't need a fast and expensive 4G connection to get to the end goal of your product, service or software. If your product or service relies solely on a solid internet connection, chose a desktop solution. Don’t make your interface too heavy (with MB’s) to load and work, either.
When users are using something with your interface behind it they must never end up having to ask the question: “Why did I click on this, why did I do what I just did?” The action, the click on the link, must always be rewarded. Either by servicing the right information or rewarding the action (See Digital Game Based Learning). Leave no room for Why’s. Everything must have a clear purpose.
WOW, NOW THOSE 5 W’S ARE ANSWERED, INTERFACE DESIGNING SURE DOES LOOK LIKE THE TRADITIONAL WAY OF COMMUNICATING, DOESN’T IT?