I'm surprised I can't see any formal UX description or testing for these anywhere. I did see a couple of articles on creating them which referred to them as Update Notifications.
In a post on Designmodo, Marcin Treder writes:
“Confusing wireframes with prototypes is like assuming an
architectural blueprint and a display house, are the same thing.”
Wireframes, mockups and prototypes actually represent the different stages of design flow.
Wireframe, a low-fidelity way to present a product, can efficiently outline structures and ...
This article goes in-depth about the dimensions of fidelity of prototypes: The 5 Dimensions of Prototype Fidelity
Visual: How real does it look?
Interaction: How real does it feel?
Breadth: To what degree is this the whole or just a part?
Depth: At a given level of breadth, to what degree is the user constrained?
Content: How real is the stuff and is it ...
These types of notifications are usually called flashing notifications or in the cases of the favicon, Notification alert.
By extension, the case of tabs can be called Flashing Tabs
Image from Create a Flashing Notification Tab
Or Browser Tab Notifications
The particular one that you have mentioned in the question do not have a name by definition as of now it seems.
Anyways, from a technical side it is adding JS functions to document.title. Therefore maybe we can call it Dynamic Document Title. [from today haha]
Please post your answers if it actually has a defined name. Then I shall remove my answer :)
Add to a list
Remove from a list
Create a new entity
Non-permanently hide or archive an entity
Permanently delete an entity
Irreversibly shred or obliterate an entity
Update, modify, or edit an entity or value
Update, modify, edit, or change a value
Read or view an entity or value
These screens belong to a few different categories. Also they aren't necessarily pre home screen.
authentication and security
Login / Signup
Language Selection Screen
legal and fine print
Privacy and T&C
If you're talking about the very first screen the user sees while the app is loading, that screen is called:
Splash Screen, or also Launch Screen.
You can find more information and guidelines here:
These pages (often named utility pages) are referred to as utility navigation areas.
From Nielsen Norman Group:
Tools that websites provide vary with their size and mission, but many utility-navigation areas include:
Locale switcher / language tools
Log in / Sign up
Print Save Share Subscribe
Tools for changing font size
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 essentially an animated overlay that protects an interactive element from accidental use. While it is rare to see it on a button, it used to be fairly common on video player elements. Somewhat like the "play button" icon that lays on top of a video and only when a user clicks are they displayed with the actual video controls to interact with; like in ...
Short answer is that I don't think it exists because it is a redundant design pattern due to the history of skeuomorphism in interface deisgn.
I am curious as to whether this type of design pattern is still used these days, as it is probably a type of skeuomorphism that tries to mimic the behaviour of something like this in real life called a ...
This is a great question!
I looked for these kind of interactions as well, and some search queries that correspond with good results include:
onHover Animated Illustrations
mouseOver Animated Illustrations
CSS Hover Effect Illustrations
Found a tutorial and examples of the same here: https://www.mockplus.com/blog/post/best-animated-websites
...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.
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 ...
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 ...