Skip to content

Add some unified micro-interactions #8029

Closed

Description

This is one thing that has been mentioned in a few issues and I thought it was worth creating one issue we can all think and get some actions from. Right now there are some interactions that have feedback, but it's a little sparse. Whilst we have to balance both accessibility, performance and usability, there is some room to add delight and interactions.

The types of interactions we should consider I think are:

  • Feedback and status: when you click something you should get feedback.
  • User education: guiding someone to the next step and educating with suggestions through animation (this is different from Tips).

It is important in suggesting to note that we want to focus on micro-interactions, here is a good guideline here:

“Microinteractions are contained product moments that revolve around a single use case — they have one main task.”
Dan Saffer: http://microinteractions.com/what-is-a-microinteraction/

They should enhance, not distract and not prevent usability. Any interaction like this should be consistent, this is why I've added the word 'unified' to this title. The idea is we think around and then come up with a united plan for this. Interactions like this add up to tell the story, they need to be planned and have a holistic approach in designing.

We should consider the personality of Gutenberg in this. My own personal feelings are that these are a few words we should focus on in whatever animation we go with:

  • Assuring: Gutenberg has your back and is going to help.
  • Friendly (but not overly cute and unserious).
  • Awake and ready: Gutenberg wants to create your content! It is also awake, alive and ready to create!
  • Informative: nobody should ever get lost.
  • Culturally aware: WordPress is global and our interactions should reflect this.

What else would you add?

Where could we add this?

Some aspects of the interface I think could get micro-interactions/unified (some have but we can iterate):

  • Toolbar
  • Click states
  • Next steps like with shared blocks on creating or first time using things
  • Placeholders (could some of these be animated without performance loss on first load?)
  • Ellipsis menus
  • Drop downs and anything that 'slides out': block library included here.
  • Errors and warnings

A good article I'd like to link as a consideration and that has some great examples in: https://material.io/design/motion/understanding-motion.html

One issue I am closing to bring in is this for consideration:
#2939.

This is a lot but I am really interested in what people think on a few things:

  • Any examples you think should be considered?
  • What elements do you think should have interactions?

Along with this if you want to dive in and do some designs please do.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions