User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
On the seek.com job website there is an interesting little character on the top of the navigation:
When you hover over this character, there is a small interaction/animation
Which basically extends the selection areas for the Career Advice navigation menu item.
I am wondering if there is a term for this design pattern, which is an auxiliary UI element to a primary UI element, but which is not explicitly labelled as such.
...repetitive tasks often struggle with retaining users: people abandon them because they feel bored, and boredom is simply lack of stimulation. By using positive stimuli like humor, movement, unique art, elements of game, and relatable characters we can make users feel a different way — more excited, less distracted, and ultimately happier.
From Design Emotional Interfaces
I don't think this type of element has a precise name, but perhaps analyzing all its components, a global idea may come up. There are some good articles about it in smashing magazine with some graphic and UI design concepts involved, but they all have the same goal:
Mascots
The use of "mascots" in graphic design is nothing new and its meaning is quite well known: to bring the user closer to the product in a friendly way. There are several examples Bibendum, Energizer Bunny, etc.
Humor
Humor could potentially lead to a deeper emotional experience for the user, a key component for an effective UX.
Source: Incorporating Humor In Web Design
In this article there's a section within the types of humor that talks about Personification. The example interface of the question is almost a personification of a button.
Animation
Nearly every interface uses a form of animation. It’s the natural way to transition from one state to another. But animations in UI can serve a lot more purposes than signifying a change of state — they can help you direct attention and communicate what’s going on better than static visuals or copy ever could. The movement stimulates both visual and kinesthetic learning, which means users are more likely to stay focused and figure out how to use the thing.
Source: Designing emotional interfaces
Gamification
Gamification is about using game-like setups to increase user motivation
Source: Relationship Between Gamification And Modern Persuasion
In particular I see gamification only in the animation since in this case there's no action after activating the button beyond interactivity: prompting to click on that button.
In summary, I think the animated mascot breaks the boredom of the interface with humor, stimulating the user to participate in the interactivity as a game.
Imagine the seek interface plain:
Putting all these concepts together, could we be talking about UI Mascots?
There is a word in german for it (for this very specific purpose in graphic design): "Störer". Which I have seen translated to eye-catcher.
The purpose is simply disruptive marketing, interrupting your natural scanning of the content.
Personal anecdote: Marketing managers absolutely love it, because it's hard to look away. But be aware, over-use deter users and breaks user-flow.
Here is an example from YouTube:
Not sure if there's a name for it, but there are 2 things being used here. 1 could be classified as skeuomorphism as it uses real world counterparts. The 2nd is adding emphasis to one of a group of similar objects by making it different.
Trello somewhat uses this method too, to let users know there are new features.
A non-skeuomorphic example with the new tag
I think a great attention grabber is the pattern where the illustration goes out of the frame. it is a harder to implement but it looks great and it should work wonderfully with major announcements.
This is a great question! I looked for these kind of interactions as well, and some search queries that correspond with good results include:
Found a tutorial and examples of the same here: https://www.mockplus.com/blog/post/best-animated-websites
