Hints For Crafting Enjoyable Moments In Human Digital Lives.
The word Pleasantness covers a bunch of different aspects. here we gonna talk about the UI a little bit, Physiology, Psychology, Emotions, Culture, Human perceptions, Biology and many more.
When should I think about Pleasantness?
When you start working on the high-fidelity designs at least on the lo-fi.
I’m not telling you that you must ignore thinking about it till you reach this stage, but you should understand each stage has its own different ultimate goal. in each, you have to cover the basics before going beyond.
Sketching: The User interaction criteria such as (Ease of use, Accessibility, Human Characteristics and so on).
Lo-Fi: Validating The Conceptual level, Navigation level, and then you can think about the Possibilities and Pleasantness Opportunities.
Hi-Fi: Without affecting the quality of the experience, here we can think about the pleasantness.
User Interface and Experience Pleasantness
Targeting a higher Pleasantness could be achieved by designing the UI with user Characteristics & the Context of design in mind.
We have lots of opportunities to deliver an adorable, delightful experience, through relying on the look & feel elements such as Icons, Typography, Colors, White spaces, and Motion.
Here are some samples and ways:
a color without a meaning / strong meaning behind it is just mess.
Colors can be delivered to you as a (UXR) by the brand guidelines, but you should review it, since it will affect the entire experience at some-point.
- Color & Human Response by Faber Birren.
- Color Psychology: Does It Affect How You Feel?
- How Humans React To Different Colors.
- A guide to color accessibility in product design
Icons are digital reflections of real-life, used to communicate a certain idea visually in silence.
If you are able to link such a communication level with childhood, memories, real-life daily use, users will feel familiar in a delightful way very fast.
Think about the Send icon in Gmail for example, does it reminds you with something?
This kind of strokes and filled lines which represent a readable word is not just a font.
Text must be treated as shapes, the word shape should give & represent a critical feeling, which should be aligned with the meaning of the words, messages behind it, and the feelings supposed to be injected through it.
You should care about many aspects such as:
- Typefaces Directions & Types (Traditional, Geometric, etc).
- Different weights and Styles.
- Colors and Contrast.
The clarity of the visual hierarchy plays a key role on the way humans process visual Information.
The Principles of Perceptual Organization, Gestalt psychology tell us a lot about how human minds group and differentiate the different visual elements,
that’s why we should care about the whitespaces between elements within the same group, and the space between the different groups each other.
Further Readings: Gestalt principles in UI design. and Psychology + design: Gestalt principles you can use as design solutions and google for more.
I Expect at least you know a little bit about Modular Grid (the idea which came from typography design to the UI field) as well.
Based on the Gestalt laws, Modular Grid System.
Now we can build a whitespace strategy with stronger base and logic behind it.
Through unifying & categorizing the whitespace we use across all design different areas to build aesthetically pleasing designs,
and here are some hints for better results:
- Unify the spaces across the platform with Four Major levels:
A. XS whitespace: spaces between elements within the same component.
B. S Whitespace: spaces between components within the same row or group.
C. M Whitespace: spaces between different groups, but within the same section.
D. L Whitespace: spaces between different sections.
- Build the different whitespaces values by using your baseline within a specific calculation. For Example:
XS = Baseline
S = Baseline*2
M = S*2
L = M*2
That will keep the discoverability of the different elements on the viewport easier for your users and will let them expect where they can find a specific element over the time.
- White Spaces are blank spaces which used to keep your users focused on specific elements by reducing the cognitive load. don’t use lots of secondary visual elements to fill the white space, don’t break the idea!
- Whitespace in Design.
- 10 examples of white space design websites you’ll want to copy.
- How to wield the power of white space design.
- Horror Vacui, the fear of white space (UX Alphabet Series).
- Why is whitespace in web design so powerful?.
- Minimalist web design: Dreaming of a white (space) christmas.
Now, since we covered the most important elements of The Look, let’s move to another aspect, The Feel.
Less is more. you have to keep that in your mind while thinking about the transitions and animations in general.
Complex motions will not only affect your design performance only, but it also affects how your users perceive it.
UX Motions should:
A. Serve a Logical purpose.
B. Reflect the Brand.
C. Be Expectable.
D. Be Enjoyable.
The Technical aspects you can discover through these articles:
- How To Integrate Motion Design In The UX Workflow.
- Good to great UI animation tips.
- Creating Usability with Motion: The UX in Motion Manifesto
- 6 Animation Guidelines for UX Design
- Getting started with UI motion design
& There are some important points should be considered through crafting & ideating the UX Motions,
Even deciding the basic technical guidelines Most important points are:
1- The Voice and Tone (including the message and context).
2- The Human Perceptions Roles & Laws.
Let’s dig in deep,
The Brand voice and Tone, Fit to User Characteristics
We need to consider lots of aspects while deciding the Motion Technical Direction. Such as our product voice and tone, target audience characteristics.
Then for every single case, we need to consider more aspects such as the purpose, the message, the context and extra depends on the case itself.
Motion Technical Roles:
We need to unify the basic atoms of our animations and set it as Guidelines, to be reused across the platform especially (Easing, Offset & Delay, Speed).
I Expect you are not going to implement a junky animation anyway but it won’t stop here, representing the brand could be effected easily through the speed of your animation, such small aspect could affect the entire organization image!
What is acceptable for a teenager, might be not acceptable for older users. it’s so simple like that! you need to consider lots of points here such as (age, job, culture, gender, interests, users ultimate goal, the case of use, user story and other environmental aspects).
Context, Message & Case of use:
Depends on the message you are about to deliver, the context of this message and the current case of use, the story and if it’s a happy or sad scenario you need to shape the moment of delivering the feedback. that will help for shaping better impactful moments with your users.
The Human Perceptions Roles & Laws
Okay, There are many Laws beside Gestalt laws when it comes to motion and how the human brain tracks and analysis it. it is not a matter of speed and direction only, human brains predict the entire path of any motion during the few first milliseconds, your job here is to make the motion itself looks natural and self-explained. these few articles and researches could give you a much better idea about this point:
Motion is not any more extra mile, it is a fundamental atom of any UX Design, in many cases Motion help to shape & educate your users, for example, it will let them know how to navigate through gesturing.
When we target pleasantness through motion, we can shape more impactful & engaging moments, and we don’t want to miss that anymore.
Before we move, take a look at this article,Jedi Principles of UI Animation
By Kit Oliynykmedium.com
Content & Microcopy
Tell the user exactly what he expects & want to hear. but don’t tell lies.
a perfect example could be a wizard, where your users will go through multiple stages to finish a specific action, besides all important points such as progress indicators and extra, the navigation button microcopy is very important, instead of using Next and Previous or back, tell the user where he will land exactly. for example (Fill basic information) or (upload documents) etc.
You need to keep your users motivated to go through the main action, driving your user to specific actions sometimes is a must! and remember that such a small change in the microcopy could affect the entire business.When Content Builds The Experience — Thoughts On Design Content
- The magic of microcopy
- Microcopy: Tiny Words With A Huge UX Impact
- A 6-point microcopy checklist for product teams without UX writers
- 3 communication theories that will help you write better microcopy (and make better products)
- The microcopyist: cancellation, confirmation, conflagration
- Writing Microcopy
UX and Users Physiology
To deliver a better experience we need to consider all the different human factors & for sure users physiology and their abilities while using the product at a certain moment. When users should invest more efforts to do a specific action, especially when it’s a basic action such as back, time after time — they won’t be happy!
If we are talking about mobile apps, for example, It becomes more complex right now, since there are many devices does not fit to the user physiology hands and should be used in many cases with two hands! Even Apple devices by the way!
Beside implementing design principles that could help to reduce the efforts needed to complete a certain task, we can relay on natural interaction models & implementations such as gesturing and NLP.
a Good example could be the main navigation buttons, it remains on the top in most major OS till & in many devices users should use both hands to navigate easily (including the iPhone by the way)! Recently the start using gestures. it’s not very easy, but the learnability curve looks promising. let’s hope if there are any generalization plans.
Another aspect, which we talk about already through the previous points is the cognitive load. keeping your user’s minds clear gives your much better opportunities to deliver enjoyable UX for sure.
- The Glossary of Human-Computer Interaction, Human Factors
- Human factors and ergonomics, wiki
- Using Physiological Measures to Evaluate User Experience of Mobile Applications
- Visual complexity of websites: Effects on users’ experience, physiology, performance, and memory
- Designing for the mental model
- Designing for Hands in VR
It’s so hard to divide Physiology and Psychology, so let’s give a look at Psychology and its reflections on UX Design.
UX and User Psychology
Let’s start with this please,
I’m pretty sure now you get the full picture, What I like about Norman is that he believes in the depth of the relation between beauty, usability and Human Psychology.
Reading more and more about such facts, researches and experiments gives you a better abilities to manage those different aspects in delivering a much better UX design.
Again, we are shaping our users digital life moments, i know we care in many cases about the business, driving our users to a specific action, but we can do the same job in an enjoyable way! so why not?
You can google for more,
- UX Psychology Facts for Designers & Design Agencies
- With User Behavior Psychology to better UX Design
- Top 10 articles about UX & Psychology in 2018
- UX & Psychology go hand in hand — Introduction to human attention
- Affordance in user interface design
- UX Design Glossary: How to Use Affordances in User Interfaces
By culture, we don’t mean only the geographic cultures. different cultures could be noticed through users groups with different interests for example within the same area.
Great way to build a pleasing experience is to put yourself in your audience’s shoes. Human Culture plays the main role in defining what’s wrong and right, what is good and what is bad, extra and extra.
Designing with Culture in mind gives you a better Wow factors & design opportunities whenever you discover the community history, childhood memories, language, expressions, and many more.
Nowadays, you can get a bunch of insights about a specific user group culture through the different social media channels, don’t miss such a great opportunity.
UX & Biology
It’s just another interesting field to read about, do you know how our brains work while delivering a specific feeling? can we nudge our brains if we know more about its mechanism & structure?
Okay, There are four primary chemicals in the brain that affect happiness( Dopamine, Oxytocin, Serotonin, and Endorphins). If we know how & why & when our minds isolate Serotonin, for example, it would be a short way to achieve a much better experience in many cases.
UX Ease of use can’t stand alone to build influencing experiences. Human interactions can’t omit natural aspects and feelings. to build pioneer experiences you need to rise up the challenge of humanizing the digital experiences as much as possible by involving more human aspects into the game! it is not a design philosophy anymore, it is a must, it is a science.