jungle-gif

BlogBlog JungleworksJungleWorks

Attention! Design Principles Ahead for the UI Craftsman

By jwork 7th November 2016

You are propelled into outer space. As you float into the great nothingness, the Earth comes into glorious view, a blue so deep that you have to take a moment to admire it.

Admit it, the earth might as we be one of the most eye-catching things in the heavens. What if there’s a huge explosion thrown in? A meteor shower? A comet?

Careful now. If meteor showers become the stuff of everyday, there’s nothing that will excite you about them again. The same goes for the Earth – if every planet were blue, what’s so special about it?

Humans have a fine line when it comes to paying attention. The internet exemplifies the EXCESS of everything, information included – much like outer space, with an infinite amount of things that you’ve never seen.

So where do you look? Rather, this post is focused on how do you command attention – so where do you MAKE them look?

Every month an omniscient foreteller predicts apocalyptic horrors. I’d like to believe that it doesn’t interest a whole lot of people, that it is too absurd, too unimportant. But a 56 second video of a 53 year old Japanese comedian dancing in a yellow outfit with snake and leopard patterns makes a killing?

My post focuses on something that leads to 65 million YouTube views for PPAP. It’s also grabbed more than 1 billion active users on Facebook and 300 million users on a photo uploading app.

5pm8wzf

The keyword is ATTENTION.

A bookish definition will say that Attention is focused mental engagement on a particular item of information, yadda yadda. Our friends in the advertising realm will not care what it means but know that where the attention goes, money inevitably follows.

It makes a lot of sense why software companies design the user interface to grab user attention. Attention is a resource, and the contemporary human only has so much of it – or so little.

Thus, the UI/UX designer has to be very prudent when it comes to site design and eyeball grabbing, especially when the lifeblood of the company may be dictated by people who visit the site and want to solicit for services.

You may easily be passed over simply because you couldn’t keep them engaged – the world is at their fingertips, so give them a reason to stay on your page for more than the cursory glance.

Thou Shalt not pollute

138-1024x584

This is extremely important. Often, the creative side and the technical side can get carried away, especially if the designer can execute every whim and fantasy.

Do not fall into this trap. Visual Pollution is exactly like excessive bling. It’ll get you noticed for a split second, only for the user to wince and move on.

If your app or website are full of potential things that grab their attention, you risk dividing it.

The Economy of Vision

Everyday consumer decisions require viewing displays with several alternatives and then rapidly choosing one. An example would be choosing a snack from a vending machine, when on your work break or in transit.

When you think about the kind of process that goes into choosing the right snack, your brain can be capable of quite a convoluted mechanism. Here, we use psychology and aesthetics to simplify those processes for you.

The Importance of Research

looking-through-binoculars-future-predictions

The first step is understanding the repeated and rehashed mantra: The User comes first. Empathy, and the ability to gaze through your target audience’s eyes is crucial. This is not simply some beautiful idea that you throw out the window – this means that you need to thoroughly research your target audience in order to understand them.

Personalization, comfort, ease and ingenuity – all of these are generally appreciated by the human brain, especially when it has to make split second decisions and the design lays its out for them.

Speculating about the user’s wants and needs in this case can be harmful without said research. Personalization CANNOT occur without you knowing the person.

The de-cluttering principle comes in handy here, as the amount of information people can process becomes limited. Which means, you need to do work in order to ease it out for them, as much as possible.

If it’s an app or a website, the landing page needs to be your guiding principle. It needs to introduce your idea as concisely as possible, and make people want to explore more – don’t throw everything on the first page, or the opening screen. A trailer is never the movie, or ideally, it shouldn’t be.

Elegantly well-crafted definitions about your services are all well and good, but examples of how they work are even better. The user does not have to crunch concepts and apply them to situations if you’ve taken care of that for them!

 

Predictable? Why not?

Fortune teller predicting future from crystal ball

 

We may love riddles and games, but spare time is needed for those – remember, people on the go and on the fly are going through your stuff. It’s not a leisure coffee table book, or the weekly crossword.

Predictability is good here, and is not an insult to anybody’s intelligence. If your site cues people in, using guiding language and illustrative visuals, it’s doing a good job.

If the app can be operated almost intuitively, you’re on the right track. Things that need to be clicked on, should look like they can be. Information needs to be read-worthy, and text arrayed in obvious, bold tones. Focus can be easily acquired by experimenting with different typefaces – but stick to a few, and remember moderation.

Information needs to flow from one point to another – arrangement here is key.

One needs to make websites more intuitive for users, easier to understand and navigate, and ultimately better places to spend our time as we increasingly move into an online world.

Bolded text, clusters of graphics, and faces will always attract attention.

Making it relatable is great for intuition. Your product operates in real life. Presuming that’s the scene, give visuals where it integrates into their daily environment with seamless ease. Things that move on the screen, can mirror objects that move similarly in real-life. If something looks heavy, that’s because it is – and should not show otherwise.

Make it easy for the user as you journey them through your product or service, is the bottom line. Use design that enables this.

Fitt’s Law is an interesting concept to consider at this juncture. While you can read in great technical detail, the simple explanation is this: The the closer the target is, or the bigger the target is, the quicker a consumer may make their move. This is especially relevant in online interactions, where pointing and clicking are navigational tools.

Stop Button Circle Red Text Black Background Big Bright Round

Now, this does not mean that you should have one BIG button begging to be touched on your landing page or something. There’s actually an optimal size for it which has a LOT to do with reliability again! This is 48px, as has been determined by MIT’s Touch Lab, which also happens to be the normal width of an adult, human finger pad.

Scaling your ‘clickables’ according to different screen sizes thus becomes immensely important here.

Manipulating Color and Emotion in Design

617a6aac5c65dd75c275f5f70ed316ff

Colors have known to elicit strong emotions for a long time now. Many colors, many emotions can be the equation when design is concerned. However, do not confuse your consumers. Don’t throw them off the edge by splattering colors on your page, or app interface.

Instead, focus on creating an overall emotional mood the people can relate to when they think of your product. It can be warm-hearted, powerful and professional, whimsical, peppy, mysterious and elusive – or anything – but they shouldn’t feel ambivalence, or unsure.

A basic knowledge of the color wheel and dedicated emotions can help you decide what you want to use – make them green with envy, or flushed red with excitement, your call.

Other great ways of using color are contrasting, complementing the right colors and making certain shades vibrant to draw someone’s eye.

Gestalt Psychology And Closing Remarks

Gestalt psychologists, without sounding too reductive, believe in the tenet: The summation of the parts is greater than the whole.

gestalt-principles

This merely refers to design elements in our case, and human tendencies to create a complete picture based on certain micro-cues. We believe an understanding of these will definitely help you make design that is organic, intuitive and powerful for grabbing attention. A few elements are these:

  • Similarity: Humans associate by comparison. People’s idea of a bomb is often to do with how a bomb looks on TV rather than what it MAY look like. Use this to your advantage, creating mini-environments on your screen.
  • Grouping: Even if you group two objects that aren’t similar – with something as arbitrary as a boundary around them – they appear to be. Cluster things appropriately with this knowledge, and show users what you want them to see.
  • Closure: When you provide a nearly complete image, people will fill in the parts themselves, automatically. Let your customers make the right inferences by using this to your advantage.
  • Continuation: Even if two objects are different and aligned in an ingenious manner, the eye simply overlooks differences and continues Guide people through your app or webpage that facilitates this principle.

There’re a great many principles of aesthetics and design that can be discussed within the ambit of this subject – but a blog post is hardly ever enough. I encourage you to study these and some other concepts in detail to get an eye for revolutionary design – UI/UX is not merely a mechanical task, but a very creative and strategic one.

Hopefully, this gave you the impetus to truly open up the designer in you!

Subscribe to stay ahead with the latest updates and entrepreneurial insights!

  • Share this article:

  • Blog Jungleworks Blog Jungleworks Blog Jungleworks