Connecting to a Website, Emotionally
By Harry Chappell
WordPress Developer
turning transactional visits into memorable experiences.
When someone is using a website it’s typically very transactional in that they just want to get to a particular piece of information or complete a certain task. Good User Interface (UI) design makes sure they can quickly and intuitively do those things. However, if you can develop UI that does what the user expects, and more, then you’re starting to turn what was purely a transactional visit into a memorable experience.
So how is this done?
Let’s start small – imagine a button on a website. What happens when you hover your mouse over the button? In a good UI, people expect it to make a minor change, such as getting slightly darker to indicate it’s an interactive element and that you can click this. If this happens you’ve made a good, solid useable user interface. However, in a more and more competitive and demanding world (I’m not just talking about competing brands and websites, but users’ attention spans), being just good isn’t enough. You need to think bigger and make them take notice. This will keep them more engaged in the website and task. We call these things micro-surprises’.
Sugar House Island
So in this example of exceeding a user’s UI expectations, it also helps them understand the information they’re being presented with. On sugarhouseisland.com, the user is looking at options for letting a floor of a building. They are presented with a graphic of the building, and a table of data for each floor. The two elements are positioned together but have no other connection. When the user taps (or hovers on desktop) either the building or the table, then the floor they’re hovering over, and the counterpart are both highlighted simultaneously.
Very simple and very helpful.
Elizabeth Hatton Photography
A slightly more complex, though more subtle, example demonstrates how to make scrolling, something that we all do, just that little bit more visually interesting. The scroll animation on elizabethhattonphotography.co.uk reacts to the user moving up and down the page. The images and titles subtly reposition themselves based on the user scrolling, as well as becoming more vibrant when highlighted, giving a real sense of depth, creativity and interactivity.
It’s another quite subtle piece of UI design that many users may not even take that much notice of. However, it’s often little things like this that cumulatively turn that website visit from a functional visit into an experience in its own right.
Stripe
Another great example of how you can increase the users’ attention is the Stripe website. It takes what could easily have been a wall of text on quite a dry topic, and adds engagement with imaginative animations for each section.
The animations are triggered by which section is in view so are, to an extent, controlled by the user (helping them build that deeper connection). The animations also serve a second purpose: not only do they break up a long body of text, but they also bring the features the text is talking about to life.
Avalanche
The last example is the Avalanche homepage which brings all the above together and demonstrates how to make a highly engaging experience that constantly keeps your attention. It starts off with an intro animation to the hero section that beckons you to scroll down. The animation builds to draw your attention to a large heading, and further keeps your attention with an alternative scrolling mechanism where cards of information are stacked on top of each other. Then there’s a scroll connected animation (items which move based on your scrolling back and forth) and some more build in animation. Then, (as you’re probably already thinking) just when it gets a bit much, it scales back and you’re presented with a different colour scheme and a mostly static section of the homepage.
It’s a stark contrast to the previous examples which have a certain subtlety to them. This is a much more in-your-face (maybe ‘macro surprises’?) style of interactivity, and one that is very much designed for its tech enthusiasts audience and users.
“Micro-surprises play their part in building that deeper, stronger connection.”
So, in summary, these examples of micro-surprises all demonstrate the value of that extra little something that builds what the user expects from a functional and presentation point of view. They never get in the way of the task or the user journey, but instead make it little bit more interactive, enjoyable and memorable and therefore these micro-surprises play their part in building that deeper, stronger connection.