Tuesday, 17 September 2019

Master minimalist Website design

First, let's take a look at minimalism. Is minimalism flat or flat-ish? It can be. Is minimalism white? It can be. Does minimalism mean less clutter? It can do. Minimalism can look like a lot of things but we often forget about what it aims to achieve – why do we actually need it?

Fundamentally, minimalist design advocates clarity mixed with intention; in other words 'no more than what's needed' to shift user focus to the most valuable aspects of the experience, while removing focus on the aspects that may distract users. By that logic, all design should be minimal but only if we're using minimalism correctly. Let's walk through how you can achieve minimalism, step-by-step.


1. Limit choices

Limiting choice is one way to reduce cognitive overload, in turn helping the user make decisions more efficiently. However, for usability's sake, we'll need to include a couple of things:
  • Relevant choices
  • Alternative choices
  • Relevant choices

Deciding what's relevant to users depends on the context. For example, if we were showing a list of new blog articles, deciding on a few to showcase might depend on whether or not the user is logged in. With the former, we could use artificial intelligence to decipher the user's reading tastes. With the latter, we wouldn't be able to tailor content to a specific user but that doesn't mean that we don't have data at our disposal. We can still list results based on traffic data.

However, that's content. When it comes to UI, tracking tools such as Google Analytics help us learn more about our user's behavior speaking of clutter, visual clutter refers to cosmetic styles that only add emotional value – i.e. they look cool but they don't offer much else.

It's so easy to run with the wind when it comes to the surface layer – some call it over-designing. If something just doesn't feel right to you, Coco Chanel once said: “When accessorizing, always take off the last thing you put on”.

But if you really want to take a more sensible data-driven approach, there's a really neat trick I like to use that involves screen sharing. While sharing your screen, acquire a few users and have them decide which styles to toggle on and off. Carry on until the user is satisfied with both the visual appeal and usability.

2. Strip visual clutter

Speaking of clutter, visual clutter refers to cosmetic styles that only add emotional value – i.e. they look cool but they don't offer much else. Now I do love things that look nice (don't all designers?) and emotional design is extremely important, especially in consumer-based industries, but there's a reason why it's called the surface layer – it's applied last.

It's so easy to run with the wind when it comes to the surface layer – some call it over-designing. If something just doesn't feel right to you, Coco Chanel once said: “When accessorizing, always take off the last thing you put on”.

But if you really want to take a more sensible data-driven approach, there's a really neat trick I like to use that involves screen sharing. While sharing your screen, acquire a few users and have them decide which styles to toggle on and off. Carry on until the user is satisfied with both the visual appeal and usability.

3. Optimize visual hierarchy

So we've minimized our upfront offering and optimized it visually in order to reduce cognitive overload but could we take this a step further? Absolutely but we also need to remember that users are lazy – before users read, they scan.

This means where users are briefly scanning our UI and content holistically, even the tiniest visual distraction can draw users away from what's really important, making minimization ever more important when it comes to scannability. But that aside, the elements that are left after minimization should complement each other well. Less is only more if we make it speak volumes.

Content and headings

Since users precap content by scanning its headings, these headings should be extremely informative, not only hinting at what its accompanying paragraphs will elaborate on but be good enough that if users only read the headings, they would still walk away satisfied – this is still true even if it costs us in terms of SEO value. After all, what use is acquisition if we can't offer a decent reading experience once the user has arrived?

Headings should also benefit from a clear typographical hierarchy, aiding users in their effort to understand how individual snippets of content form a body of information.

UI and color

A similar concept applies to UI and color. Colour can not only help with contrasting but also help to infer meaning, so when users come across these tap targets, they automatically understand what it is they do or where it is they will lead to.

Getting the headings and colors right might not have anything to do with minimalism directly but it ensures that the elements we aren't willing to minimize are as effective as they can possibly be. Otherwise, we run the risk of over-designing in order to compensate.

4. Make more mean less

'Put everything on one screen. It's simpler, right?' In theory, this sounds like a top-notch idea but it's not a solution that works in every case. Some designs are more complex than others and, besides, simple for who? You need to be mindful of confusing simpler implementation (making things easier for developers) and simpler UX (making things easier for the users).

Consider breaking down UI-heavy components into smaller user flows. While technically this does result in more, it creates the illusion of less. Typically this means breaking up long forms into logical steps but it could also mean breaking up lengthy articles with images.

Overall, minimalism is a tricky subject. Sometimes we mean it as a visual aesthetic (flat UIs, white backgrounds, etc.), other times we consider it merely a concept or even a lifestyle. In terms of user interface design, the best way to think of it is to consider the impact on the cognitive load that each element has.

When designing to reduce cognitive load, ask yourself these questions for every style, user flow, interaction, and feature:
  • Is it needed?
  • Is it over-shadowing elements that are more important?
  • Is it being overshadowed by elements that are not more important?

It comes down to visual hierarchy – eliminating clutter and using design to indicate importance. Sometimes that means moving things out of sight if it helps the user focus on what's really important.

SHARE THIS

Author:

Designveloper is the leading software development company in Ho Chi Minh City, Vietnam, founded in early 2013 with a team of professional and enthusiastic Web developers, Mobile developers, UI/UX designers and VOIP experts.

0 comments: