DEV Community

loading...

The Art of Minimalism with UX

oninross profile image Nino Ross Rodriguez Updated on ・7 min read

Minimalism is on the rise — but what is it? Is it the style of art that can be found in architecture, paintings, sculptures and design that eliminates all non-essential forms or features? Or is it a form of lifestyle where you declutter your life from all unnecessary things.

Regardless of what minimalism is, it shares one common denominator — “eliminating the not needed and removing all distractions.” I have found out how minimalism has helped improve user experience.

Journey to Minimalism

I was hooked with minimalism before I fully understood the core concepts of it. My online portfolio was due for a redesign and I wanted it to have a simple look and feel with a timeless design. I have tried to apply it and the result was being featured in Web Designer Depot as one of The Best New Portfolio Sites, January 2017. It received the following comment:

“Infinite imaginations combines a bit of a “techy” style with minimalism, understated animation, and the periodic table. I’m not even kidding about that. While the design does have its (miniscule) flaws, its reserved sense of style is both appealing and kind of relaxing.” - Ezequiel Bruni (Web Designer Depot)

I experimented with minimalism once more in one of my personal projects. The project was supposed to be for a beacons experiment that resulted into something different. It’s a progressive web app (PWA) that tells the users what time will the next bus will be arriving. I left the project running for some time and received the following as one of the comments:

“Great app. Really really like it, especially after going onto the nxtbus website every time I had to check if I hadn't missed my bus already and also as a regular bus user. Also very aesthetically pleasing. Good job guys 👍”

Finally, I watched a documentary in Netflix titled “Minimalism: A Documentary About the Important Things.” I didn’t read the entire title, all I read was Minimalism and I watched it with the premise that I will be learning minimalism in art and design. Five minutes through the video, I was in for a different ride. The documentary took their viewers by showing minimalists from different walks of life striving to live a meaningful life with less. I discovered that minimalism can be also applied in a person’s lifestyle.

It got me to think further. Maybe minimalism can be applied everywhere — in a person’s lifestyle, in design and in development. The basic principles share one common factor, simplicity helps people improve one’s well-being. If minimalism can help improve a person’s well-being, maybe it can also help improve user experience.

User Experience Today

People are already plagued with different distractions of different types everyday. Just think about our smart devices. We can receive hundreds of notifications from social media, media and apps telling us to greet our friend a happy birthday, this person you have been following has bought a new shirt or an app just telling you to get up off your seat and walk around. There is the internet with a high-speed connection where one can open up multiple tabs, scrolling endlessly through pages and pages of clickbaits. Whatever kind of distraction this is, it takes away the user’s focus the main task at hand.

Restaurant Kiosks

One of the worst user experiences I have had with interfaces is eating at restaurants with iPads as their ordering menu. Some restaurants think that by replacing a server with an iPad will be more efficient. In some cases, this might be true. But not always, such as the interface like the one below...

iPad Oredering Menu

This image is definitely being too kind to my experience. The image above is already decent (and I couldn’t find an image of an iPad with a cluttered interface). The one we saw had a lot of “ads” selling what the restaurant has and it was difficult to find the food that we wanted. Just because having an iPad in a restaurant doesn’t make it high-tech or in trend. Management needs to also consider how the users will be using it.

Apps and Websites

Countless times I have seen apps and websites that are just painful, to the point that I wish I could unsee all of them. Entire sites or apps that has too much clutter in the page, distracting the users from performing the main task.

There came a time when building apps was the solution to everything. Trying to fit every single functionality in a 4-inch display is a must, giving everything to the user. Like the example below. It has too many features bombarding the user overwhelming them on what or how to use the app.

Motion X iPhone App

Another example as one of the most infamous websites is every designers’ nightmare, Ling’s Cars. It just breaks almost every rule in design, specially with trying to give focus to the users’ needs. It is not the prettiest site (pun intended). It just confuses all the users of what this site is actually doing.

Ling's Cars

Laws of UX

There is a collection of principles that designers and developers can consider when designing and developing user interfaces called the Laws of UX. I have handed picked a few of them that correlates with minimalism.

Laws of UX

Fitts’s Law

“The time to acquire a target is a function of the distance to and size of the target.”

Fitts's Law

Call to actions are the elements we want our users to click on, usually buttons with a contrasting colour that has short clear text of what will happen if they click on it. We just have to help our users find and select these elements easily by designing an interface that has a clean and easy to understand as one of the characteristics of minimalism is clarity.

Hick’s Law

“The time it takes to make a decision increases with the number and complexity of choices.”

Hick's Law

Complicated interfaces will just overwhelm the users, hindering or even make mistakes along the process. We just have to make it simple for our users. Determine what the end goal is and help the users attain that objective the easiest way possible. Another characteristic of minimalism is removing all the clutter or removing non-functional decorative elements. This way, the interface can immediately give focus to the users what is the next action. The rule of thumb here is “if it doesn’t serve a purpose for the user to reach their end goal, get rid of it.”

Jakob’s Law

“Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.”

Jakob's Law

Learning something new could be a fun or painful experience for any user. Minimalism focuses on the functionality of every element, ensuring that the element is understood effortlessly. By presenting the user with familiar elements or common design patterns that can be found in other websites or everyday interfaces, it simplifies the learning process for the users.

Miller’s Law

“The average person can only keep seven (plus or minus two) items in their working memory.”

Complexity can be an exhausting job for a person’s memory especially with today’s everyday distractions. Minimalism is often associated with simplicity. By simplifying the interface and or process, it helps the user have an easy and effective means of achieving their goals. Limit the actions or things the users have to commit to memory in order to finish a task.

KISS Principle

“Overload, clutter, and confusion are not attributes of information, they are failures of design.” - Edward Tufte

People will always be attracted by bright colours and flamboyant designs. “The bigger the better” they always say. They are already flooded enough with their own distractions so let’s make it easier for them to accomplish their main task. We may not know it but subconsciously, we tend to look for the simple solution. Minimalism is a philosophy, a movement, a lifestyle. No matter what you want to call it or how you want to use it, minimalism promotes the removal of unnecessary elements, keeping everything simple without losing meaning and clarity. Always take a step back and remember, "Keep It Simple, Stupid".

Interaction Design Foundation

IDF is an independent nonprofit initiative with an objective to “Raise global design education to an Ivy League standard, while at the same time reduce costs to as low as possible.”

IDF made me an Educational Partner. Sign up with my link to get 3 months of free membership and start learning great UX design.

Are you interested or new to UX design? Get The Interaction Design Foundation’s free ebook!

Visit The Interaction Design Foundation for more UX design articles.

Subscribe to The Interaction Design Foundation Newsletter to get weekly high quality educational materials.

Discussion (18)

pic
Editor guide
Collapse
ben profile image
Ben Halpern

Ling's Cars is amazing

Collapse
tvanantwerp profile image
Collapse
ben profile image
Ben Halpern

Game Recognize Game

Collapse
changemyname profile image
Evgeny

had to keep scrolling cuz of the song xd

Collapse
gmartigny profile image
Guillaume Martigny

As ugly as it is, Ling's Cars site is indeed amazing.
Of course, it stomp on every minimalist design principles. However, in my opinion, it's on purpose.
If you're selling stuff (car or whatever) and your site feels cheap, your product will look cheap too.

Collapse
mykezero profile image
Mykezero

I just can't stop laughing xD

Collapse
silverman42 profile image
Sylvester Nkeze

OMG, your portfolio website is awesome!! Wish i could create designs as satisfying as yours.

Collapse
oninross profile image
Nino Ross Rodriguez Author

Thank you for the kind words. I'm sure you will eventually get there :) Rome wasn't built overnight

Collapse
avasconcelos114 profile image
Andre Vasconcelos

Seriously, that was the best looking glitch effect I've seen on a website.

It looked so perfect and smooth I initially thought it was a gif, if you put up an article with a tutorial on how to do that alone, I'd read the hell out of it!

Thread Thread
oninross profile image
Nino Ross Rodriguez Author

I can't take credit for it. I just found it in the internet :)

css-tricks.com/glitch-effect-text-...

Thread Thread
avasconcelos114 profile image
Andre Vasconcelos

Ah I see, thanks for sharing!

Still very nicely used in your page, great match with all the other visual elements in the page :)

Thread Thread
oninross profile image
Collapse
albinotonnina profile image
Albino Tonnina

This is a great article.
Loved the animations you created as well.
Also, admittedly, I did not know about lawsofux.com, amazing resource.

I wonder what you would think of this: dev.to/albinotonnina/speaking-of-w...

:)

Collapse
oninross profile image
Nino Ross Rodriguez Author

Thank you :)

Loved your article! I'm still thinking of dipping my feet in react or vue. But your article has given me insight. Specially The UX in Motion Manifesto. I love animations :)

Collapse
math2001 profile image
Mathieu PATUREL

I just visited your portfolio. It's amazing. :hearts:

Collapse
oninross profile image
Collapse
papagoat profile image
Terence Lucas Yap

Ling’s Cars generated millions of dollars in revenue even though it defies all UX/UI principles. Conclusion: Laws of UX doesn't apply to everything.

Collapse
creativuxdesign profile image
Collapse
guergana profile image
Guergana Tzatchkova

Seems like we have been at the same conveyor sushi restaurants in Japan. I enjoyed using their iPads, though!