Steve Jobs said, “It’s not just what it looks like and feels like. Design is how it works.” We couldn’t have put it better ourselves. Great user experience can positively impact a website by leaps and bounds. Here are a few smart transitions that improve user experience in websites.
1. Animated Scrolling
Hyperlinks are both blessings and curses. When a user clicks them, they could land just about anywhere, thereby leading to a loss of context. Linearity is one of the best things about the user experience of books. Each chapter of a book leads to the next. If you skip from 1 to 3 without reading 2, you’re definitely not going to understand what’s going on. Similarly on the web, this happens on a subconscious level, especially with long websites. Skipping content has become an informed decision not an unconscious action. Understand that abrupt and sudden changes in the interface of a website are hard for users to process. It is always important to show them what is happening and try not to leave them in the dark.
2. Stateful Toggle
Transitions not only helps improve user experience but also help them understand the flow and pace of an interface. Sudden changes are probably one of the worst things to experience on a website. Let’s take toggle menus as an example. Universally, the ‘+’ symbol is interpreted as the action of expanding an element or adding content. But when that symbol is transitions to rotate 45°, it becomes an ‘x’, which universally is the symbol for ‘close’. The meaning of this icon has been changed by this simple transition. A small detail like this means the difference between knowing what the icon means and having to guess what will happen next. It is vital, therefore, to make the elements of your website understandable in each state.
3. Pull To Refresh
‘Release to Refresh’ or ‘Pull to Refresh’ was another nifty little interaction that became popular shortly after iPhone introduced their version. Scrollable reverse-chronological content can be updated the user. Twiiter’s app allows you to see this concept in all its glory. You can refresh the stream, once you have scrolled to the top of the stream of tweets. This works amazingly well because of several reasons. Before this transition existed, users had to hit F5 or click ‘refresh’ to load more content. With ‘pull to refresh’, the experience becomes way more seamless as it has successfully connected intent with action.
4. Sticky Labels
Sticky labels are another way to improve user experience in websites. These can be described as a subtle and unique combination of a meaningful transition and a user-interface component. They are a great way of providing context in long sections. This kind of transition offers smooth context-based descriptions as well as improved orientation. Be sure to use sticky labels for long sections in which valuable information to content is added by titles or descriptions that don’t fit in the viewport.
5. Comments & Collapsed Forms
One of the dreariest looking elements on news websites and blogs is the comments section. This is because instead of just being to-the-point and allowing users to type their comment in, it asks you all kinds of annoying questions. Collapsed forms are a great way to improve user experience here. Only relevant, crucial fields will be shown and when the user clicks on it, the form can expand accordingly. The comment form can even be pinned to the top, and expanded to display additional fields below it. This helps reduce clutter and encourages users to comment more.