In the December of 2015, Facebook’s product design director Julie Zhuo was putting up the final touches on the new like button. Facebook was going to introduce its new “like” button.
She couldn’t help but recall the conversation with Mark when he gathered a bunch of people in a room and was like, “hey we’ve been hearing this feedback from people for a really, really long time. Not everything on Facebook is likeable. People needed a more nuanced way to interact with posts.”
It was not an easy journey to replace the popular “like” button and insert human emotions in a row, specially when you don’t exactly know the “ right reactions” of 1.44 billion people who accessed Facebook on their mobiles.
“Will the users digest this new change? What if it gets annoying?” Julie kept asking herself. “But, commenting takes too much time and people need a way to leave feedback that was quick, easy and gesture-based.” Emoji seemed the best option.
Displaying 6 emojis in a single row is no simple design problem. Julie and her design team connected with Dacher Keltner, a professor of social psychology at UC Berkeley and the science consultant for Pixar’s Inside Out. They together decided to focus upon the sentiments users expressed the most.
The team toyed with various layouts, trying to fit the best in place. Finally, they agreed on these 6 emojis. The team heightened the color saturation to make them look more alive. But, something was missing until they animated them like tiny gifs.
When you long-press (on phones) or hover (on computers) the like button, you find this row of icons, that display these important emotions.
When it comes to design, the simpler you make it for your users the more they feel connected to your brand. When we say design, there are a number of things we’ll have to cover. It includes User Interface, colors and web usability.
“You should never be afraid of altering your design. Even if the changes are not well received, never stop experimenting!”
Airbnb could not be so huge if they stopped experimenting with their designs according to User Experience research they do.
Delivering amazing design and web usability is not easy. But what is the base concept that’ll help you in creating something different?
- Nothing important should ever be more than 2 clicks away.
When designers have this rule in mind they build great user experiences.
When we learn about the Facebook case study in detail, we can’t help but notice how much they care about their users. They always work on the best ways to increase the web usability. On another thought if they didn’t, they wouldn’t have reached so far.
Similarly, if it is obvious that your user will visit a particular page make sure you add a shortcut for them.
The biggest example of this is the Shopping cart icon.
If you run an ecommerce website, a shopping cart icon is necessary on every web page. This majorly helps the shoppers as they can checkout whenever they are done buying from your website.
It makes the experience pleasant.
It’s more like helping your users with your website.
What are the users looking for?
When we discuss a scenario from the user point of view, here’s what happens when someone visits your website:
- Web users spend about 2 seconds on your website before they start focusing on a particular section. Out of which your headline gets 1 second to grab their attention.
If you have the perfect colors and the right headline, you will definitely get all the attention by the user. 60% of the people cannot find the information in the content they are looking for.
A regular user of the web has created certain immunity to the web that makes them realize the importance of the content in about 7 seconds.
Reading newspapers has helped people to learn that various conventions of page layout and formatting. It made easier to scan through the data.
What can you do?
- Remove the extra chatter :
Cutting down the amount of irrelevant information on your homepage increases the web usability. For instance, Simple neatly displays information on their home-page, which helps in a trusted banking experience.
Refine your homepage by providing only necessary information.
- Put Info where most of the eyes are
All the conventions start with somebody’s bright idea. If this idea works well for some websites, eventually other businesses also start adopting it. Over the Internet, a great idea does not take time to be popular.
“Putting your content where the eyes will be” was a great idea that set certain guidelines for every website.
Let us explain this in details:
The top center and the bottom left of your website is where most of the eyes will be. 69% of the web users view the left side of the page. This is why the homepage of the popular sports brand, Nike displays text on the left and products in the center.
- The F pattern :
The 2 horizontal and 1 vertical strike is how we read information on any page.
Headlines can be placed in the horizontal stripes (depending which one is more important), while the lists should be on the left vertical.
The Quick Load time:
Quick load time is very important to sales. The websites that take more than 4 seconds are abandoned by 4 out of 5 users. No matter how beautiful your website is and how many high resolution pictures you have added, your conversation rate can go down by 7% for every extra second it takes to load.
What we suggest :
It’s not that we don’t support aesthetics of your website. But compromising with sales is not a smart business approach.
Simple and Clean design can do wonders.
Make your page design simple. 1 or 2 images and precise text to explain your vision is enough.
Take all the scripts and combine them into 1 script and, similarly, combining all CSS into a single stylesheet.
Typography is the art to type. It includes the size of the text, length of the lines and highlights of the content. It makes scanning and understanding effortless.
Words are like objects, when you write a bunch of them in a paragraph, they will all look the same but monotonous. But, when you highlight the important lines or words, the reader focuses on the content.
Typography basics you must know -
Choosing the right font :
Great power comes with great responsibility. There are tons of fonts available free of cost online and this brings a responsibility on you to choose the right one. Just because you have so many of them don’t fall in the trap and overdeliver.
Fonts add poise to your design. Carefully analyze your design and match it with a suitable font.
Serif fonts are typefaces with lines embellished with small marks and strokes at the end. They are very easy to read and are mostly used in newspapers and public magazines. The most common example of Serif are Times Roman, New Century Gothic and Palatino.
If you want elegance oozing out of your writing, say it with a Script font. The fluidic strokes of this font has made it perfect for formal invitations. Also, if you enjoy literature, Script is what you’ll see in most of the house plays.
The Open Sans are a category of Sans Serifs fonts. They do not have any embellishments at the end and are composed of simple lines. They have the perfect spacing and are best to write blog posts and on websites. Some other sans serif fonts are Helvetica, Avant Garde and Geneva.
The Display Font is best when you want to grab your reader’s attention. You’ll often see this font on Advertisements on the Billboards.
Popularly used in fun and comic writing, this font is widely popular in children’s books. Being a light- hearted font style, they are easy on the eyes and brains and are low key. The letters in this font seem highly communicating.
Expert Tip : Don’t overdo it!
Color – To enhance your design
Color because people get influenced when they visually encounter something attractive. After all, the visual sense is the strongest sense in human beings.
According to The New Yorker, Facebook CEO, Mark Zuckerberg is red-green color -blind and Blue is the color he sees the best. This is why Facebook is Blue.
The theory of choosing the best color isn’t scientific at all. A little logic and psychology behind the actions of the web users is enough.
A design without colors is merely a geometrical sketch with lines and shapes. Color have a psychology and are not very different for every individual. Though there can be exceptions based on gender.
Girls just love Purple, Pink and Orange and this is the reason you see the sales boards in orange.
And how can we miss the attention grabbing red?
Color and design have a deep connection. By sending the right message, they speak the brand language.
To make something visually appealing, you need to choose colors are supports your motive. And understanding color is no rocket science. It is more like human psychology and the way we all perceive things.
Have you ever felt connected with the brand just by its logo? If your answer is yes, recall the brand logo now and compare it with this color scheme.
These color signals can be used to send stronger messages online.
You know you belong to the design community when you are pulled in a dozen of different directions. Every project brings in challenges. They demand new skillsets and you constantly find yourself rearranging your thoughts and ideas.
If you are just starting out in the design, you will have a successful career if you learn the proper skills, UX and color being the most important ones. Design has changed the world to a better place and it has changed lives too!
Share your views