10

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 – Jørn E. Angeltveit May 7 at 7:33
  • @JørnE.Angeltveit nothing wrong, except that it sounds a bit too 'techy' for designers :) – Michael Lai May 7 at 23:00
  • Yeah. In general, blinking stuff should be avoided... – Jørn E. Angeltveit May 8 at 9:03
4

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

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:

enter image description here

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

| improve this answer | |
  • 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 May 7 at 22:56
4
+50

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

| improve this answer | |
  • +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 May 7 at 22:58
1

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

| improve this answer | |
1

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

| improve this answer | |
0

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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