3 User Engagement Tips
Let’s face it; the web is evolving unbelievably fast — and as developers, designers, interaction designers etc. one of our dearest virtues is being userfriendly. The past few years the internet has evolved from being more or less a mess to agreeing on a lot of things. These agreements (or trends) helps the users engaging with the websites.
If they know how to find the menu, the register/sign-in-button or the search-field without scrolling the whole site or Googling it, we, as developers, has succeeded.
“Meeting expectations are really important” — Aral Balkan
As Aral Balkan states meeting the users expectations are really important. Even though every user is an individual and have their own habbits, we do our best to analyze them in order to generate “the average user”. From our analysis we can find patterns in the user behavior, and hereby we are able to make important design decisions.
Each click counts as a point in engagement — and we must keep that in mind while designing and slicing up websites. For this there are lots of methods, but since I’m not planning on writing a novel, I’ll stick to XXXX.
Padded block links
Anchor-tags are by default inline-tags. This is perfect for creating links within a text, but when discussing userfriendly clickable elements we meet a challenge. Inline-tags are by definition only as high and wide as the contained text.
On Danish Security and Intelligence Service’s (hereby DSIS) official website we see a section on the right sight with the headline “Sidste nyt” (“Latest news”). If DSIS wanted to increase their engagement rate, this section would be a good first-touch. The anchor-tag is used as an inline element, which narrows our clickable area to be the text only. An easy and, in spite of all, common solution would be defining the anchor-element as inline-block or block and add padding.
That’ll do the fix. Nothing more, nothing less. Whether you want to use block or inline-block doesn’t matter, but if you choose inline-block; remember the width.
Checkbox & label
Checkboxes is a classic. We all like them, but we all hate the fact, that they’re empty declared. We can change their look, appearance and make them round — but we cannot mess with :before and :after.
One way to do this though is placing the checkbox before your label in your markup. This gives us the posibility of using :checked as a dependency to the labels pseudo-elements
This method gives us not only the ability to style and animate the checkbox, it gives us the ability of making the checkbox’s clickable area a lot bigger and therefore easier to use.
The Navigation Humble
We all know what this icon means. We all know it’s placed in the top of every modern website, and we all know what it reveals. I love the simplicity and userfriendlinesss that lies in this icon. But are we getting too comfortable with standards and trends? Does the fact that everyone knows the header is the place for the navigation mean, that it’s the best or most userfriendly solution?
The rule of thumbs
To align desktop designs with mobile designs it’s comfortable solution to keep the navigation in top. But many mobile users are accessing your website with one hand. Without any numbers or statistics I dare say, that much mobile users touch the lower part of the phone more than the upper part of the phone. This tells us that many users most likely is accessing your website with their thumbs.
By using the thumbs to navigate a website, you narrow your comfortable reach-area. If you want to increase the user engagement rate, and there’s actually more people having a smartphone than a computer, you should definitely reevaluate your digital strategy.
Designing for thumbs is not a new thing. It’s not new and shiny, neither is it new and scary. Facebook, Twitter, Instagram, Google+ does it. They all, in their own way, have the key engagement-points in the bottom of the screen.
Choosing the navigation is and should be easy. But do we miss out on something? The hamburger-icon (as shown above) is widely understood the navigation-icon. Widely understood meaning, that it’s a common agreement and statisticly supported. Your target audience can in many ways affect the design. If you’re dealing with old people a low contrast might not be your choice of favour. Same goes for the navigation-icon. I cannot provide answers to all my questioning, my main focus is to increase the focus on the area and make people think.
In almost all the projects I’ve been part of, we’ve chosen the hamburger icon. It’s easy to deal with and people get it. Even though we have to embrace usability and userfriendliness, we may not forget the power of design. Several reports conclude, that a bordered hamburger-icon is the most engaging version. If you really want to engage your users, use it. But if you think it’ll break your design; reconsider it!
Fake speed the best you can
Users love speed — though few really measures the speed when deciding if the process was fast or slow. There’s many performance best-practices. Load asynchronously, split JS files, use CDN etc. etc. But when we’re talking speed, it’s not only about actual speed that has a saying. Perceived speed is a key factor. One way would make the user feel like waiting for a smaller amount of time, than he or she actually is.
Say we have a sign-up form hooked up with a really slow service. The user clicks “Signup” and now, even though it’s asynchronous, waits for about 6 seconds. All that’s shown is the classic ajax loader.
If we in this case choose to run an animation while we process the AJAX call, the user might feel the service is a lot faster. We’ll “entertain” the user for about 4 seconds and the user will have a faster and more enrichened experience.
The guidelines for usabilty/userfriendliness changes all the time. And so they should. But we have to keep up with the users if not push them and their behaviour.