👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
Make everything as simple as possible, but not simpler.An aphorism attributed to Albert Einstein.
But how could you determine if the UI you designed could (and should) be made optimally simpler — meaning can still be made more simple than the current without losing anything of value to the users (and while adding more value as well)?
First, market data
Given that the product is in the market already, gather insights on the usage of the product and the UI’s role in it.
Are there complaints pertaining to a particular screen / page? Look deeper into those.
Do you consider a “cancel” button secondary or tertiary in UX? Can you think of reasons not to use it in a form? What are the best use cases for/against it?
One thing’s for sure about the Cancel action in a form: it is a negative within the context of Proceed as the positive.
Then again, in the context of what the user’s goal is, the positive and negative may be one or the other.
For example, in a 5-step interaction to fully complete the user’s profile, of course, as the designer, the positive action for you is the Proceed until the 5 steps are completed.
However, this depends on the user. Say user reached step 5 and a personal information is being asked and it’s not agreeable, then what could be a positive interaction for him/her?
A Cancel or a Skip & Save?
To keep it simple, design with the user’s best interest in mind.
Why do so many web pages require scrolling when the info could easily be displayed all at once? There are a number of pages I access daily that only need a click but I must scroll down to do it.
There are many different kinds of interaction in an information environment like web pages.
Clicking and scrolling are just two of them. And both have different mental models when accessing information.
One limitation of any information environment is that there’s only a limited number of information that can be displayed all at once, at the same time. Besides, a user could focus only on a limited number of information at once.
Clicking and scrolling could be combined, though, to optimize the interaction—meaning, the easier for the user to perceive and get to the information, the better.
What is the mental model of the user interface—or at least the UI buttons?
The Feedback Aspect
Just like with most physical buttons, if a user wants to press it, he or she touches it. The feedback comes from its look and feel (it looks like a button; it feels like it can be pressed by actually pressing it).
With UI buttons, a user could get feedback from the following:
- Visual Design
- It looks like a button
- It feels like it is clickable
- It says that it is a button
It Feels Like it Is Clickable
With some techniques in Visual Design, a designer could reinforce the feeling that the button functions as expected.
The Light Source
Does the button budge up when hovered? Or does it budge down?
If up, then the shade becomes lighter as it moves closer to the light source—which is naturally above us (in the real world). If down, then darker.
The LED Light
Does the button light up when hovered?
If yes, then the shade becomes lighter—whether the light comes from the body of the button or simply around the button.
You may combine those different techniques—but basically, those are the considerations why the shade of a button would be darker or lighter when hovered.
Please note that for devices with pointing device, the mouse changing to a pointer is enough feedback for the button to feel like it is clickable.
However, for touch devices, to feel like it is clickable, a user will actually press it.
The minimum size of an Active Area (AA)
Ideally, it is 48 x 48 pixels. However, there are elements that needs to be smaller in relation to other elements with it—with this consideration, we could go down until 32 x 32 pixels.
The cohesion between two UI elements
In order to show cohesion and relation between two UI elements, we could use proximity—place the element near each other. However, when there are more important considerations like if space won’t permit one element to be there, we could use motion to cue that those two elements belong together.
The elements in relation to the user’s “now”.
Elements that are there only when you need it and also there when you thought you didn’t need it.
Numbers 3 and 4 fall under Relevance.
Outcomes Over Features
The outcome most teams are aiming for is a change in behaviour. The outcome you want will depend on your business or organisation: it might be selling more dog food, getting people to sign up to a monthly donation to your charity, or opting for mediation over court in their separation. Source
Shareability of Content
When deciding the number of characters an item could have, consider thinking about it being in other platforms.
What kind of content are you presenting?
Take a look at Facebook feed and Pinterest feed.
Facebook feed presents a variety of content—text, images, videos whose purpose are to update the users of current events and happenings in their friends’ lives.
Pinterest feed, on the other hand, presents content heavy on images—eye candy if you may.
So for timely content like news, it’s best to present it linearly (single–column) beginning from the most relevant and recent.
For content meant to be browsed or scanned, it’s best to present it all at the same time (multi–column), of course also beginning from the most relevant to the user.
Relevance is key.