2

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.

enter image description here

  • While I'm all for delightful non-functional components on a website (also a pokemon fan) I find that Omanyte wildly out of place and I'd find it confusing. If you we're in a module for say "copying/pasting" and there we're a Ditto next to the copy instructions then it would clearly be a joke and I'd find it amusing. – DasBeasto Oct 20 '16 at 18:04
  • @DasBeasto I might have to 'steal' that Ditto idea! I was going to say that the presence of these elements feels a bit like an 'Easter Egg', except that they are rather obvious and designed to draw the user's attention. It wouldn't make much sense if not for the Pokemon Go craze, but I still think it is a breath of fresh air, especially for a large corporation like a bank. – Michael Lai Oct 20 '16 at 22:44
  • Playful Design. It's why Macs used to show a smiling face on normal start up - and a sad face when things went wrong. – PhillipW Oct 20 '16 at 22:53
  • @PhillipW In your example the design element actually has a functional feature in that it reflect the status of the system in a more user-friendly and engaging way, but it is functional nonetheless. – Michael Lai Oct 20 '16 at 23:08
2

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.

  • +1 for the reference and providing the term of the category of element that it falls into. I wonder if there is a more specific term for this type of UI design element though? – Michael Lai Oct 20 '16 at 8:21
  • I don't think so. Not for an element at least. Actually your element example has an instrumental quality when user experience is considered. – locationunknown Oct 20 '16 at 9:10
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.

  • An interesting point that you have raised about the science/art of UX/UI design. I agree that as UX designers we shouldn't be constrained by terminology and processes, but part of trying to understand and improve our skills is to reflect and consolidate our knowledge. Hence we ask questions and try to share our experience on this forum to try and push the boundaries of UX design. Don't you agree? – Michael Lai Oct 20 '16 at 21:51
  • I'd like to agree with you. But most people coming at UX design from a programmer centric viewpoint aren't seeking to consolidate knowledge. I'd argue the commercial history of programming demonstrates a complete inability to collate, consolidate and consider the knowledge of the paste 5 years, let alone the last 50 years of programming. Case in point: Sketch users, marketers and the company itself recently celebrating constraints based design as if it's new. The very first digital drawing program (SketchPad) was based on them, better and more ably, with animations... in the 1960's! – Confused Oct 20 '16 at 22:32
  • @MichaelLai the deeper irony - Xcode has the best constraints based design environment outside of CAD software. Nothing from the creative field of interface design software comes anywhere near close to the facilitation of adaptive, responsive design and layout consideration available in Xcode. Granted: its power is hidden behind one of the worst UI/UX designs in history (Storyboards), ugly APIs, the documentation is woeful and Apple's desriptive abilities are appalling. But Sketch is made in Xcode! Yet there's no semblance of Xcode's design layout abilities in Sketch. – Confused Oct 20 '16 at 22:38
  • 1
    Point taken. I think for some reason managers or designers are still expecting tools to solve the problems for them. Technology facilitates rather than comes up with the solution to problems (at least until we have better AI than what we see in chatbots at the moment). Adobe XD seems to have a Xcode like feel to interface and interaction design, perhaps it is a step in the right direction? – Michael Lai Oct 20 '16 at 22:42
  • XD is from Adobe. That's about all you need to know. Illustrator should have had constraints based facilities from the outset. Adobe are the EA of design software. – Confused Oct 20 '16 at 22:47
2

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.

  • 2
    Chrome coming from the excessive use of chromium plating in automotive design in the 1950s. – PhillipW Oct 20 '16 at 22:55
  • @PhillipW thank you for the explanation, I always wondered about that. I just thought of it as the necessary framing stuff on a device, like old radios with ornate cases. Your note reminds me of how the word "spam" came to be used in computing - another term without obvious relevance (unless you know Python. Monty Python, 007). – user67695 Oct 21 '16 at 14:19
2

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.

1

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

  • I was of the opinion that micro-interactions don't necessarily need to be a 'delighter'. That is, they serve to make a particular interaction with the interface more fluid or meaningful, and of course they can be designed to be a more prominent rather than hidden interaction. – Michael Lai Nov 18 '16 at 2:23
  • Depends on the meaning we give to 'delight'. I agree that micro-interactions main purpose is being meaningful and useful. Some of them can go too far and try to be more "delighter" without being more useful, for example some of the GIF in this article: medium.com/swlh/… – Alvaro Nov 18 '16 at 9:52

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.