Designing and conceptualising a successful application is pure science – which is based on some basic facts.
I personally believe an innovative application or website is like a jazz song – simple yet hard to play.
He understood the simple fact that people love animations – hence the Flash success.
Why do we talk about behavioural design? Because architecture teaches us that concept designing is, in the end, a multitude of elements correlating with each other in order to create the ‘vibe’ which we the users appreciate in a Scandinavian house.
By defining a design mechanism, or a behavioural design, a series of question has to be asked:
- how a user performs actions or interacts with the website?
- How many steps the does user need to get to the main ‘core’ of the product?
- What kind of feedback is needed from the user?
- And what is the mission for the very particular user during his visit on a website?
1. First, let’s see what do I mean by ‘Interactive design’
The Interactive design seems a vast term used by none, but in reality, is a powerful term in UI/UX world. The same for Interaction Design. If you search for the definition of interactive you will find this:
[…] (two people or things) influencing each other.
A design has to interact with the user/admirer in order to have a relationship – which influences each other.
People ignore design that ignores people. — Frank Chimero
1.1. Interactivity in Interaction Design
Interactive vs. Interaction: People get confused by terms that are so similar. To define the concepts more clearly, consider whether a designer is affecting the system or influencing how a user clicks on a website.
Interactive designers tend to think of the web as a series of branded moments that occur through a series of frames that a user clicks through. Interaction designers are more concerned about the intent of the user and how they can help them accomplish a task.
Interaction designers are more concerned about the intent of the user and how they can help them accomplish a task
1.2 The relationships between Interaction and Interactivity
In the introduction to Designing Interactions, Gillian Crampton Smith suggests that there are four dimensions to an interaction design language. I have added a fifth. The five dimensions of the language of interaction design are:
- 1-D—words—which are interactions
- How words should be visually interactive with the user
- 2-D—visual representations—which include typography, diagrams, icons, and other graphics with which users interact
- How shapes/elements must be interactive with the user’s ‘walk’
- 3-D—physical objects or space—with which or within which users interact
- Space gives interactivity meaning and highlights the product / or the purpose of the website.
- 4-D—time—within which users interact—for example, content that changes over time such as sound, video, or animation
- According to our brain, we consciously assimilate fast movements.
Psychologists Georg Alpers and Paul Pauli recently tested whether some kinds of pictures are more likely to be seen than others. On some trials of their experiment, one eye saw a neutral picture like a lamp, and the other eye saw a bloody scene of violence. In other trials, one eye saw a neutral picture and the other saw an erotic nude picture.
- The subjects’ conscious experiences of the pictures flipped back and forth, but the scenes of sex and violence were more likely to be the first ones seen, and they occupied consciousness much longer than the boring neutral images.
- According to our brain, we consciously assimilate fast movements.
- 5-D—behavior—including action, or operation, and presentation, or reaction
- This one is actually the next main point we’re gonna approach.
2. What is Behaviorally Interactive design
When you design, you have to conceptualize not just the main focus or element but its surroundings – which are not that straight-forward and easy to notice details. Those ‘surroundings’ are a sum of graphics and strategic well-positioned space between the elements and typography.
On a larger scale, Behavioural Design is being applied to solve or to anticipate challenges and problems related to the user online behaviour or even public behaviour.
Probably, the behavioural design is the most underrated key to increasing marketing conversions yet maybe the most efficient as developing a well behavioural design can be a tool for manipulating the user and habit formation.
In place of thoughts it has impulses, habits, and emotions.
― Edward L. Bernays, Propaganda
Yes, I know, I just quoted Bernays – yet be glad I didn’t quote his double uncle, it would be intense.
2.1 Behavioural UI
As we know a UI/UX research involves some Interaction Theory which results from the wireframe and the user’s path ( from A to Z and back to G. ).
Behaviourally is not just the very present movement of the environment or how it reacts to a timelapse. Behavioural design is also the relationship of neighbourly positioned elements and the ‘focus’ path which the elements relationship suggests in a static frame.
The pioneer of this ‘behavioural design/art’ is Neoclassicism, by that I mean Jacques-Louis David and the magnum opus The Death of Socrates.
The canvas is striking just by looking at it and not knowing anything about it. So much jumps at you right away the clarity of the scene the interplay the angles of the light and the shadows intersecting and reflecting at least two stages of emotions the irrefutable depression of Platon from the left and the exaltation and exaggeration of Socrates followers from the right, and Socrates himself the main element of the paint and we can notice the slight brightness introduced by the artist. All those details, random maybe for the eye, are building a context which empowers the main character in this great piece of art. The space used is in strong relation to the busy areas and this relationship is directly manipulated by the corner shadows and vertical lights respecting a well-noticeable imaginary line.
The title correlates with the epicentre of the painting – Socrates. This is an extraordinary example of behavioural items being used to highlight the main element – as we can understand, behavioural design in its true essence has roots in static design.
The quality of how efficient is the product focus received by the user is proportionally highlighted by how well regulated is the behavioural design exercised.
Like these guys (gif ). Richard H. perceived his solution for the algorithm influenced by the absurdity and very indubitable humorous behaviour that the rest of the characters impersonate.
In order words – this is just a funny gif.
3. What is the mechanism of behaviorally interactive design?
When we think of movement in the context of a web page we mostly think of animations or motion ( motion design ). Ideally, the animations would interact with the user – or would guide the user.
One effective way for enhancing the visibility of a website/application are the animations. Usually, a designer would develop an animation which would interact with user’s choice of hovering the element or it could be an independent animation.
There are two cursors, the physical one provided by the operating system which we use to click or hover elements and the imaginary one, the mental one, which is a dot projected by our optical intersection.
It’s a common use to develop animations/movement which only reacts to a click or hover. We could call them cooperative animations. But we use our ‘brain cursor’ more often than the operating system or the mobile touch. Therefore, some brilliant designers understand this simple concept and they create great UI/UX which has not just cooperative animations but animations which triggers our brain. For example: when a page is first loaded, elements fades in, a great behaviorally interactive design would be to elegantly fade in all the elements of the website and drastically fade in the ‘call-to-action’, blog title or the section the user must notice. Consequently, your brain understands the priority and the order of the website from the very beginning.
When I am on Amazon I do not use my cursor only when I decided that I will specifically click that button or section. Meanwhile, I use my eyes. This is a powerful tool that designers can use! Let’s do a quick experiment: scroll down on your favourite website – be aware of what your eyes are focusing on and then what about your physical cursor – what happened to it?
Using this technique will help the design to be innovative, useful, understandable and powerful.
It’s a sin to underestimate the user – that’s why we designers have to understand that we must design in such an order that the user feels smart and challenged by our design. I think if you only remember this statement while designing my expectations and motivations for this article are fulfilled.
Now that we understand the power of movement the next logical step would be ‘reaction‘. As the chemical reaction, a website’s reaction represents the series of events and elements reacting in a static or continuous time-lapse.
What should happen when the user is accessing for the first time a website? First, what is the main purpose of the website and what are the potential user stories?
A designer should conceptualise the UX/UI after approaching the questions above.
A hover effect is a reaction, a module opening after a click is a reaction. Scrolling down and the main title is gradually scaling up – this is a reaction.
Understanding how a website should react to his user is not that hard as is quite related to daily human actions and reactions. Why do you think some people would buy a product from a better-looking, organized but more pricey than more cheaper, not impressive and unreliable supermarkets? It’s the same product, yet the user is a human being – which means impressionable.
A website should react and respond. Technically, a reaction is instant but a response, on the other hand, comes more slowly. It’s based on information from both the user and website architecture.
A reaction and a response may look exactly alike. But they feel different. Sometimes the user only needs an instant reaction but in some cases, the user needs a well-informed response.
For example, bbc.co.uk integrated the ‘customise your homepage’ option – which is a response! On a live BBC football game by scrolling down the left sidebar ‘ Summary ‘ would stick – that’s an instant reaction. The visual impact is suggesting the user that he can read the main events regarding the match.
A design which anticipates the user’s actions is a design full of life.
Anticipation, even though it sounds vague, is the most vital techniques in UX design. It takes intentionality and preparation for a designer to create a design which anticipates the user.
Probably the most efficient use of anticipation is the architecture of the content.
Robert Katai explained why vertical content is the king of ‘ Visual Marketing ‘. He explained that vertical content is a type of content that appears as a need of creating means of communication more suitable for mobile interactions. Briefly, it’s a shifting from traditional desktop screens to mobile screens. He lighted Pinterest, which approached a vertical content strategy before, in the desktop the only era, and yet content posted on Pinterest is static. He continued ‘[…] If you take some time to analyze your behaviour when spending time on your phone, you’ll see that most of your actions are represented by vertical actions.’
Mentioning Snapchat was important as the app is vertical content oriented the users can see images and previews of what’s inside every publisher’s story. I would mention the consistency of the app. The fact that I scroll down, not having to click that much even though in reality is the same effort, but being intentional requires effort, that’s why scrolling works. The impressive art of anticipation which Snapchat presents may be a result of linking the virtual-content orientation and the ‘preview’ feature. Giving the user an option of ‘previewing’ the item, element, product, content or article is a practical use of anticipation design.
This type of content appeared out of a need of creating means of communications more suitable for mobile interactions. So visual content is the result of shifting from traditional desktop screens to mobile screens.
A good example of anticipation is slaveryfootprint.org. On arrival they only provide two options – take the survey and for that user who has no idea the websites provides three question, notice the personal pronoun, ‘What? Slaves work for me?’ and the main heading ‘ How many slaves work for you? ‘. The design anticipates at least two kinds of users: the user who has no idea but he is intrigued by the questions, the user who may be informed regarding the subject whom will take the survey and the user who is triggered by the word find out and survey.
Anticipation is an abstract technique – which usually reflects a potential interaction, between the product and the user needs, in such a way that the user experience feelings of discovery, achievement, satisfaction and appreciation towards the product.
The mechanism of behaviorally interactive design is a simple equation between the amount of motion, reaction and anticipation used divided by the content of the website which results in an abstract value that defines the quality of the user experience.
Thank you for reading! I would love to know your opinion, arguments and if you would like to add something!
Share the word!