A Cheatsheet of the Most Common Interaction Patterns — CREATE

Building on my post about Conversational Design for Digital interfaces, I tried to standardize the most common interaction (and conversation) patterns prevalent in apps today. This series will explore the most common interaction patterns we see in most apps today. However, this is not meant to be a comprehensive list. There may be many more patterns not captured here, but most follow a slight variation of the ones listed in the series.

You can read the rest of the articles:

1. CREATE Interaction Patterns (this one)
2. READ Interaction Patterns
3. UPDATE Interaction Patterns
4. DELETE Interaction Patterns

CRUD Operations

“In computer programming, create, read, update, and delete (CRUD) are the four basic operations of persistent storage. CRUD is also sometimes used to describe user interface conventions that facilitate viewing, searching, and changing information using computer-based forms.” — Wikipedia

If you are old enough to remember, Web1.0 was pretty limited. The average user could only read data and move around the internet via hyperlinks. That was it. It sucked by today’s standards.

With Web2.0 (where we are today), we could not only read data but also create it, update it and delete it. Everything you do on the internet is one of those four actions.

All interactions, no matter how simple or complex, have the same three parts; a trigger, an object, and a response.

Therefore, interaction is very similar to the way you speak:

“If you tap (Trigger) on this button (Object), then the form will be submitted (Response).”

As you go through all these patterns, remember that there should always be a Trigger, an Object, and a Response. Furthermore, the Response should always be accompanied by a Feedback message (visually or non-visually) or animation that clarifies what happened.

Let’s begin this series with common interaction patterns for the first operation; Create.

CREATE — Interaction Pattern

Creating data can be as simple as posting a picture on Instagram to something more complex, like filing your taxes.

Let’s go over each pattern.

Creating an Object in a separate context

Upon entering the task, the user is navigated to a different Interface. Moving the user to a Modal environment limits distractions, letting them focus on completing the task — creating an Object. I call this Leveling (I also wrote about it). Notice that when the user completes the task, we keep their original scroll location in Level 1. Because of this, the newly created Object may not be in view. In these cases, it is crucial to use a Feedback (a Toast) to notify the user whether the task has been executed or not with an option to see their newly created Object if they want to.

Note: It is also important to keep the Toast in view and not automatically dismiss it until the user performs an unrelated action relative to what is in it, such as scrolling or navigating somewhere else. Especially if the Toast contains interactive elements like a link. We do this so that people with mobility issues have enough time to interact with the Toast’s content. For Screen Reader users, it is imperative to relate the feedback as well. Silence after an action is taken is generally bad.

Creating an Object in-context

The user creates an Object in the same Level/Context/UI. This is particularly helpful when the user can make additions or edits quickly and see them happening in the context of other related content. Notice that there is no feedback message because the user can see the Object being created. In these cases, using Motion to communicate feedback should be encouraged, although you should not rely solely on Motion to communicate changes in the Interface. Personally, I would still use a Toast in this situation as a fail-safe.

Because these interactions mainly benefit sighted users, providing feedback messages to Screen Reader users is crucial even if the feedback message is not shown on the screen.

You can read the rest of the articles:

1. CREATE Interaction Patterns (this one)
2. READ Interaction Patterns
3. UPDATE Interaction Patterns
4. DELETE Interaction Patterns

PS. If you have any feedback or I forgot to include a common CREATE pattern, let me know so we can add it.

Let’s help each other build better experiences. For everyone.

Stay safe,

Oscar.