In this article, I’d like to describe the challenges of designing apps that manage user-generated content and how to create great app experience. Examples here are mostly for Apple platform but the same principles apply everywhere. Without a further do let’s talk about user content.
User data or user-generated content
User data or user-generated content is anything that the user creates in your app. The app purpose can be working with user content, like creating documents, writing notes, taking and editing photos, composing music, etc.. Or this can be a feature in a larger app: commenting on articles, creating wish-lists in a shopping app, saving a place you interested in on a map, etc.
What is CRUD
CRUD stands for Create, Read, Update, and Delete. You may know this acronym as functions of persistent storage. We can use CRUD as a framework to design user interactions.
Importance of user data
“I just pressed something and everything disappeared.”
— Frustrated user.
It is incredibly important to protect users from data loss or corruption. Because CRUD actions directly change user data, the UI must be predictable to minimize user error.
With this in mind let’s take a look at designing CRUD operations:
New entities, depending on the app, can be empty or must contain information.
Here is what to consider:
- What is the entry point? The “+” button in the calendar, inline input in reminders, or File/New in a desktop app.
- If a new entity can be empty create it and smoothly transition to editing.
- Ask only necessary information from users and allow them to edit it later on. A document can be created and name can be specified later on.
- Use modal dialogs when you need information in-prior. Let users see some context. When creating folders, Files app shows the full-screen dialog and blurs out the background, Notes app displays a text field inside an alert view.
- Be proactive by pre-filling information. You can often derive information like dates and location. When entering a new phone number, the Contacts app pre-fills the phone type by suggesting the next one: Home, Work, Mobile.
- Automate the creation of necessary entries. If your app requires entries to be grouped (files in folders, items in a wish-list) create a group automatically.
- Suggest names. For instance, when creating a wish-list the name can be derived from the item type.
- Use templates when creating documents.
- Allow users to copy/past and duplicate entries.
Entities can be a result of operation, like taking a picture, recording video or sound. Import is another potential source of new entities. Consider using system dialogs before designing custom one.
Sometimes users change their mind and decide not to create new data. Maybe they tap Create button accidentally. Consider these two cases:
- User-created empty entry or it was pre-filled automatically. You can safely remove it, there is no need to ask if they want to save empty data.
- If there is already some content, handle cancellation as a delete action. Imagine a voice recording app. After recording one-hour-long interview the last thing user expects is to lose it by accidentally tapping Cancel.
Another scenario to be aware of is interruptions. When something goes wrong and the app crashes. With user data, it is important to properly handle such cases. Keep a draft or use autosave feature and when something goes wrong to suggest to reopen unfinished entity. This is also important for the Update operation.
Read operation is displaying entities in the app and opening a particular one. We aim to design a convenient way to navigate through a set of similar entities.
Create previews for entities:
- Display one or two lines of textual information next to the entity name;
- Show date when the entry was added;
- Display thumbnails for media.
What UI elements are best to use for the case:
- Lists are good for showing mostly textural information with optional thumbnail;
- Grids are best for media and also work well with titles. For example in Books app or iTunes Store;
- Horizontal scroll works well for groups, when a number of entities is small, and when content preview must contain more information.
Help users to organize and search entities:
- Arrange entities by date or name. Allow users to sort or rearrange them as they like;
- Use groups and tags if necessary;
- Design a full text search;
- Consider additional features like search by date, smart folders, filters, etc.
Update operation is very similar to Create and the same points apply. Additional things to think about:
- When displaying entities choose between inline, always editable (Notes, Reminders) or edit as a separate action (Contacts);
- If entities can be edited inline make sure to include undo;
- When using edit action make the sure transition to edit mode is clear. Using a separate modal presentation allows focussing on the editing process. Include save (confirm) and cancel actions. Protect users from unintentional cancellation by following the same guides as for Create operation.
When designing delete operation it’s good to consider a type of content, how hard it’s to create. Depending on this you can design simple delete or hide it a bit to protect users from accidentally deleting important data. Can the user recreate the content? Setting a reminder is simple in comparison to writing a note. Writing a document, drawing an artwork, or composing music is much harder. Taking a photo is simple and yet the moment is impossible to recreate.
How to perform delete action:
- Lists can use swipe to delete gesture. This allows users to quickly delete entities. Swipe reveals delete action and requires users to tap it, or swipe through all the screen. This serves as protection from accidentally deleting content. You can always design additional dialog for data that is hard to recreate. It is always good to include swipe to delete in lists.
- Scroll to the bottom to delete. You can include Delete button at the bottom of the view that edits content. This will require the user to switch from viewing to editing and scroll all the content. Use this pattern when recreating data is hard, like in Contacts app.
- You can include Delete button when view allows inline editing, like in Notes app;
- When displaying all entities you can have select and then delete actions like in Photos or Files apps.
People who are new to the platform may not know about swipe to delete gesture. But this is not the reason to skip it. Compliment it with buttons.
To protect users from accidentally deleting important data you can design a way to revert action:
- Do not delete entities immediately but move them to the Recently deleted section in the app;
- Implement support of undoing;
- When a user deletes an entity and returns back to the list. Animate deletion from the list to keep the user in focus.
Also, consider what happens next after delete action. Photos app is a great example here. When deleting a photo the app shows next or previous photo depending on your scroll direction.
Undo allows users to revert change. This is important to support for Update and Delete operations. UI for Undo, especially on mobile, can be challenging because of limited space.
Consider those cases:
- Undo can replace confirmation dialogs.
- Make sure users know how to perform undo. When editing documents display undo as a button in a toolbar.
- Support system interactions for undo. They are not obvious, like shake to undo or new multitouch gestures on iPad OS, but necessary to support.
- Some apps tend to implement undo for every user interaction, even selecting entities. Do not overuse undo.
Hope you found this article interesting to read. Thanks for reading!
Clap 👏 if you enjoyed the article so others can find it.