Terminology for interactions that are not functional but provide a 'delightful' user experience

Question

I am sure there are a few examples of these types of interactions floating around, but I noticed on a website the presence of interactive elements that serve as a 'delightful distraction' that doesn't improve the functionality of the website but contributes to a positive user experience (if you are a Pokemon fan anyway).

Is there a term to describe or refer to such design elements? Are these commonly used in different types of websites and do they actually help to improve the user experience in general?

P.S. For those interested, I noticed this in the Alerts section of the GEL website by the Westpac Banking Group.

Answer 1

In their paper Studying antecedents of emotional experiences in interactive contexts Thüring and Mahlke use the terms instrumental and non-instrumental qualities to describe the features that affect user experience.

Instrumental qualities concern the experienced amount of support the system provides and the ease of its use. Features, such as the controllability of the system behavior and the effectiveness of its functionality, fall into this category. Non-instrumental qualities, on the other hand, concern the look and feel of the system. Features, such as visual aesthetics or haptic quality, belong to this class. Hence, while instrumental qualities are closely related to the usability and usefulness of a system, non-instrumental qualities result from its appeal and attractiveness.

So the elements you were asking about are called non-instrumental qualities of the web page. There could be other elements that are non-instrumental. According to Thüring and Mahlke's model of components of user experience, both instrumental and non-instrumental qualities affect the emotional reactions caused by the interaction. All three then affect how the system is seen by the user.

Answer 2

"Bling" is the word you're looking for. It's aged out, though.

More seriously, Michael, I feel you're aiming to rationalise and justify a scientific approach to design of UI and UX rather than using your heart and... well, balls, for lack of a better term.

In your comment to locationunknown's answer you demonstrate how this approach is corrupting your thinking. You ask "I wonder if there is a more specific term for this type of UI design element though?"

It's not about UI, design or element. Or type, or name. What you're seeking is understanding of any given technology's ability to impart joy through interactive experience, enablement and empowerment within a rules based system of engagement.

That's as old as technology itself.

Imagine the first kid to learn to swim. The first to jump into water from a height. Imagine the first to play with vines and discover the ability to hang and swing. The first with a wheel and the first with fire... How much joy and fun did these children have creating experiences from their ability to interact with these new technologies within the rules of gravity, society and a world without medicine and surgery as we know it today?

And that's the rub. What you seek is insight into the mind's eye of an exuberant, explorative and experientially oriented, creative child. That's part one. But that's useless without insight into, on and about the capability of any given technological interface and its system's ability to provide experiences of engagement through interactivity.

And I think this is what your question is getting at.

You want to know what to create, what else has been created and what it's called? In the digital realm?

Computer games.

They offer partial control within contained, crafted and created experiences contrived and conceived by imaginative, instinctual and intuitive entertainers and enablers hoping to influence, instruct and isolate individuals for their gain.

Play all the video games you can, as they're based on these principles of doing things within rules based systems with new or improved interactions, consequences, challenges and concurrency.

Answer 3

Bells and Whistles

the things that something, especially a device or machine, has or does that are not necessary but that make it more exciting or interesting

http://idioms.thefreedictionary.com/bells+and+whistles

Please note, bells and whistles do not necessarily make noise. This term has been around since long before websites.

Chrome

In software design, folks used to talk about "Chrome" being the non-functional parts of the software that just looked nice. But "Chrome" pretty universally means the browser and its related technology now. Also the world Chrome was often used negatively, as something that designers tended to include too much of. (And there's something to be said for being careful about that.)

Nielsen Norman Group defines chrome as follows:

'Chrome' is the user interface overhead that surrounds user data and web page content. Although chrome obesity can eat half of the available pixels, a reasonable amount enhances usability.

An example of chrome would be the clock that appears on Mac and Windows GUI screens. It’s generally useful, but not strictly relevant to the task at hand.

Answer 4

What you show, that example, it isn't from the dashboard or from the application. That is just advertising, just a documentation that should convince the customer to use it.

If those alerts were part of the bank application's UI, that was a bad idea, in my opinion. Please see this question, "Using funny error messages in Finance" and the answer.

Answer 5

Interactions that are not functional but provide a 'delightful' user experience are called Microinteractions.

Microinteractions are a way to give the user feedback of an action.

As first described in Dan Saffer’s book Microinteractions, these tiny details typically serve these essential functions:

• Communicate feedback or the result of an action.

• Accomplish an individual task.

• Enhance the sense of direct manipulation.

• Help users visualize the results of their actions and prevent errors.

Google material design in its Creative customization section does not use this terminology, however encourages the use of such animations:

Animation may be used in a wide range of scales and contexts to unite beauty and function.

In the case of icons:

For example, a menu icon may smoothly transition to a playback control, and back again. This effect both informs the user of the button's function while adding an element of wonder to the interaction.

---

Some References:

Microinteractions: The Secret of Great App Design

5 Mistakes to Avoid When Designing Micro-interactions

Google Material design - Material motion

Google Material design - Creative customization