Table of Contents
UI design is one way, we designers, are in direct contact with their users. Thanks to this, we have a huge opportunity and responsibility to give them our best by creating great user interfaces. Various metrics can be used to measure the quality and clarity of user interface and some of them might contradict with each other. Fortunately, there are some areas we can focus on to get the best results no matter what can happen. I split these areas into ten segments and, in this and future posts, will share them with you.
Why to care about UI design
The main reason why you should care about the quality of your UI design is the satisfaction of your users. There is a simple equation to help you. The more satisfied and happy users are, the higher is the probably they will return on your website, use your app and other products. Even though there are some ways to use products that stick, UI of the product will always be the first thing the first the user will see. UI design will also contribute on final buying decision, so you had better be careful about it.
How to create great user interface design
In order to simplify the theory of UI design and make it easier to understand, you will learn about all the segments individually. All segments will include couple of main points that can be used as meta sub-topics for better organization. These sub-topics will be organized as individual paragraphs to keep them separate and clear. Let’s start with the first segment.
No.1: Create a story
The best and fastest way to immerse the user in anything is through captivating story. This applies to UI design as well. Great storytelling will help users move through the website, app, etc. Storytelling can also be used as a guide or subtle tutorial to help them understand how things work and what their options are. There are various ways to achieve this effect.
“Image speaks a thousand words.”
The first thing you can do is to use real images. Listen, you can use dozens of stock or other ready-to-use photos and illustrations, but real image featuring your product is priceless. What’s more, in case you have a camera or a phone with decent camera it will cost you nothing and the results can be astonishing. Even better, you can go for a short video demonstration. Remember, image speaks a thousand words.
Next option is to bring a mascot in the game. Great example can be mailing newsletter service Mailchimp. They used their mascot, Freddie, everywhere they can and it pays off. Users are loving him and likes to use their services. Some may visit Mailchimp’s website just to see who Freddie is (did you?). Mascot can enhance the UI design in a way other assets like images cannot. Mascot appeals to human psyche because it has its own personality. Thanks to this uniqueness it will be easier to engage users and create lasting relationship.
Third part of great storytelling and immersive UI design are custom messages. This means saying good-bye to universal popups and other stuff, no cheating. If you want to create remarkable and unique interface, you have to craft these elements on your own. Only then will the interface sustain the same impression. With custom messages and other elements you will be able to create whole new world(s) for your users to live in.
“Remember, trust is hard to build, but easy to destroy.”
Next on the list is the buzzword of this and previous year … Be authentic. Without authenticity, you can try to emulate whatever message or impression you want and the result will always be the same. It will be only emulation, nothing new nor unique. Decide on what message do you want to convey and then use it as a rudder. When you know this message, make sure to never deviate from it. Whole design must be clear about this message and communicate it clearly. Remember, trust is hard to build, but easy to destroy.
When designing user interface, you should remember to include social media in some form. We are social animals and the ability to share information with other people in our surroundings is often important decision factor. You don’t have to use default options provided by social networks like buttons. Link with an icon can do the job as well. Or, if you feel comfortable, you can create a custom solution on your own and use it instead. Just remember to always provide some option for social interaction for your users.
“When it comes to interactive content, keep it unobtrusive.”
The last advice for creating great UI design through story is to implement interactive content. The biggest player in this area is probably video. I already tackled this a bit in part about images. Video presentations, short video loops on the background or gifs can all be useful tools to carry a story, tutorial and other types of content. When it comes to interactive content, remember to keep it unobtrusive.
While silent video playing on the background can be acceptable for most people, something louder can be reason for visitor to leave the website or shut down the app immediately. The same applies to audio as well. Even though it can fulfill your brand’s message, you should always re-consider including any type of content with auto play set as default. At least you should mute it.
Audio and video are not the only types of interactive content moving around. Elements such as forms can be improved in such a way, users will even like to fill them, no joke. What’s more with more and more advanced web technologies including HTML and CSS the number of options is increasing. Today, if you are willing to ditch the IE8, IE9 and Opera mini 8 you can use the CSS animations to create stunning effects in your UI design.
Going a bit further, you can also mix CSS or JavaScript animations with content created with SVG technology (IE8 does not support it). These elements are not just for decoration. Using animations in your UI design can have a huge benefits and reduce the number of mistakes people may do. It is more in common now to use animations, whether through CSS or JavaScript, to provide users with feedback for their actions.
Simple example can be a little spinner or some effect on button like filling with different color when user submits a form on the website. Also, it is much clearer to show the user some mistakes he made by highlighting the input with movement (like shake) than just with color outline.
Final words
Let’s end it here for by highlighting the most important points of this first post of UI design series. Today, we explored various options to create story to improve the design of user interface. In short, these options are using real images instead of ready-to-use, using a mascot for creating deeper and stronger relationships with users, creating custom messages suiting the brand, focusing on authenticity in every moment, offering ways to share on social networks with friends, family, etc. and last using an interactive content to create more immersing and longer lasting impression.
I hope this information about UI design will be useful for you and I look forward to see you next time when we will discuss everything about navigation. Until then, what are your tips to create a story?
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
