On the seek.com job website there is an interesting little character on the top of the navigation:

enter image description here

When you hover over this character, there is a small interaction/animation

enter image description here

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.

  • What's wrong with the "HTML <Blink> Tag" ?? ;-P Commented May 7, 2020 at 7:33
  • @JørnE.Angeltveit nothing wrong, except that it sounds a bit too 'techy' for designers :)
    – Michael Lai
    Commented May 7, 2020 at 23:00
  • Yeah. In general, blinking stuff should be avoided... Commented May 8, 2020 at 9:03

5 Answers 5


UI Mascot

...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:

  • Motivate
  • Persuade
  • Stimulate


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 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.


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 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:

enter image description here

Putting all these concepts together, could we be talking about UI Mascots?

  • 1
    +1 I think this is not too far off the mark, except that UI Mascots might still be ambiguous because it is not specifically associated with a particular UI element but I like the idea/concept!
    – Michael Lai
    Commented May 7, 2020 at 22:56

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: Youtube Screenshot with eye-catcher visible over video

  • +1 I like the term, although I think in this particular case it has a defined purpose that is more about drawing the user's attention to something that they want you to try, even though it is not exactly the call-to-action. It is almost like a call-to-action for a call-to-action :D
    – Michael Lai
    Commented May 7, 2020 at 22:58

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.

enter image description here

A non-skeuomorphic example with the new tag

enter image description here


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.

enter image description here

Link: https://dribbble.com/shots/11298443-Finezjo-Dashboard


This is a great question! I looked for these kind of interactions as well, and some search queries that correspond with good results include:

  1. onHover Animated Illustrations
  2. mouseOver Animated Illustrations
  3. CSS Hover Effect Illustrations

Found a tutorial and examples of the same here: https://www.mockplus.com/blog/post/best-animated-websites

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.