Future Trends in User Experience & Design # 1 — Path to Storytelling

Trend is a magical word. In the digital world, perhaps more than anywhere else, we encounter new movements and tendencies that are short-lived and constantly fluctuating while others are simultaneously led by some logical development from the introduction of new technologies and innovations. It it those movements that create a trend or some long-lasting influence.

On average, it takes about three years before we can look back and distinguish what was indeed a trend and what is used in effect today. Occasionally it can take some a little longer. In itself UX is a self-developing concept and permanent movement, that reacts to changing behaviors and demands of current users. UX is simultaneously a number of trends together but is not a trend in itself. It has always been present, but unfortunately largely ignored.

Storytelling

The “next big thing” will link together many principles and ways of thinking together. We will describe each necessary component in separate sections. I have started to call this movement “storytelling.”

We have to approach most users today the same way we would approach children. If we just let them be free without any supervision, they might very well crawl too close to an electrical socket and we would experience quite an unpleasant bounce rate. But in a properly secured playpen, we can supervise and correct their direction. With a firm but gentle grasp, we are able to show them efficiently and clearly which way they should embark upon. Storytelling….

They might very well crawl too close to an electrical socket and we would experience quite an unpleasant bounce rate.

Static pages in this phase often die away, and so it is important to introduce new processes and technologies that are capable of attracting attention at that time in an unprecedented way.

a) Micro-interactions

It may be the first step, how to improve the user experience on a static webpage. Better to direct them where you want them to go, meanwhile giving the user additional options. Can this be contradictory? You will find out in the text below, that the user should only have one main option. This basic logic behind micro-interactions stays intact. We only let the user peek around the corner to see what lies ahead. Examples include Force Touch on iOS, or the different type of likes on Facebook. Micro-interactions are everywhere. Even e-shops should be in on the trend. Right next to the option “Add to Cart” a user will immediately have options to check out or even to keep shopping. Making these commands only in the shopping cart or on a separate page creates too many clicks and distracts the user from the main option — other products.

b) Site Direction

Recall the look of pages you visit throughout the day. The cover, how it works, benefits… sound familiar? The vast majority are subject to an evolving trend, only size-limited carousels are replaced by hero images. Their structure is still familiar, content is placed on strips of a onepager web. Concurrently, this is not functional in many instances as we don’t know what awaits us as we scroll further. This type of page then leads us to a detached state with zero interest as we are overloaded with information. How many pages do you usually scroll through without realizing what you have actually read? In that instance there are far too many options for the user to choose from, which is what we want to avoid.

Users might accept such a bad flow only with Google, but not on your site.

That type of site is a sort of a splash — try to google “Google Docs” — why does the first link not lead us to the application we want, but to a page with some meaningless image with a dull headline? It doesn’t get better further on — just static scrolling. How about taking a user after the first click directly to the desired template? Otherwise it takes up the entire screen and do nothing useful. Users might accept such a bad flow only with Google, but not on your site. Expect the “dumb user” with which you can open up far more possibilities and choose a completely different direction.

1) What does a user see first on a page?

A perfect wireframe doesn’t influence the fact, that a user first sees (or rather their brain) color and, as we prefer to subconsciously read, the placement of the text. If we consider UX and design together as a whole, we can focus the attention to where we want it to go.

2) Do hero images make sense?

Hero images have become a such a trendy thing lately. As billboards with flashy and cliche slogans have become obsolete, we have moved this perverse approach to the web. The entire screen is then taken up by some illustrious picture with a headline, from which we don’t usually get any information about the product we’re interested in. At the same time we’re talking about the most lucrative part of the entire web, the first thing a user sees. And it is filled with some stock photo with, even worse, a number of buttons to confuse us. We need to indicate to the user what awaits him further, whether it means cutting the options to a minimum or stripping the composition and attention-grabbing texts. It should be stated at the very onset what you can find on the webpage and where you actually got to.

The entire screen is then taken up by some illustrious picture with a headline, from which we don’t usually get any information about the product we’re interested in.

3) When possible, chose ONE option

What else would a user click on? On what you tell him to.

A simple example of a different direction of a page and three points above. From the left screen we get a strong impression of color and typography and we can deduce from only two words what the company does with only one button stating something like, “see how”, which we will uncover from additional scrolling. The screen on the right is a classic example of a hero image with some catchy slogan and background, which tells us absolutely nothing — do they make chairs, tables…? Add to this too many options and the user will behave as a wild dog let off its leash).

We have described a series of the basic elements of storytelling. Micro-interactions as the first sign of something bigger with an analysis on web structure, which can demolish a classic layout of common sites. In the next article we will discuss how to combine these elements, take them apart, add something on top and find out if we are quite possibly doing it all wrong.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.