How to create an effective editor experience

Throughout this series on content modeling, we’ve learned the whats and whys, talked about mental models, and how to arrive at structures that will stand the test of time.

But what’s the use of a great content structure if it isn’t easy to work with?

A content model can’t be effective if the job of getting things into it is too complex or confusing. Badly designed interfaces can actually block your editors from doing their best work, and the saying “garbage in, garbage out” holds true here.

Writers cannot expect to simply install the flavor-of-the-month CMS or structured writing system and get a good outcome. The system you use must at least be compatible with, if not actively supportive of, the rhetoric you need to create.

Mark Baker - Structured Writing

We recently set up all our essential content types. Now is a good time to evaluate what we have and take advantage of opportunities to make life easier for editors.

1. Interfaces that make it easy to perform daily editing tasks, and
2. Workflows that let people collaborate around content in effective ways.

We achieve this through a combination of the following:

• Field titles and descriptions that are easy to understand.
• Useful defaults and field validation.
• Content previews that let your editors tune in to their audience’s experience.
• Grouping strategies to partition complexity and improve flow. Implemented at the field, document, and admin UI levels.

Let’s explore how to support these needs in Sanity Studio.

Sanity supports title and description values for all field types. If you can’t convey enough information in the title alone, add a description to share more about what’s required.

// schemas/documents/article.js

export default {
  title: 'Article',
  name: 'article',
  type: 'document',
  fields: [
    {
      title: 'Title',
      name: 'title',
      type: 'string',
      description: 'Short & keyword friendly. What’s the big idea you’re sharing with this piece? Aim for 7-14 words.',
    },
    {
      title: 'Summary',
      name: 'summary',
      type: 'string',
      description: 'Unpacks the Title field in some places. Tell your reader about the main pain points and solutions related to your big idea. 10–25 words.',
    },
    {
      title: 'Hide this article?',
      name: 'hidden',
      type: 'boolean',
      description: 'Turn this on to hide it from the public and bots.',
    }
    // etc…
  ]
}

Validation lets you specify rules for fields in order to generate consistent and predictable values. Here are some common uses:

• Guarantee a field isn’t left empty when publishing.
• Set minimum and maximum thresholds for more predictable content.

// schemas/documents/article.js

export default {
  title: 'Article',
  name: 'article',
  type: 'document',
  fields: [
    {
      title: 'Title',
      name: 'title',
      type: 'string',
      description: 'Short & keyword friendly. What’s the big idea you’re sharing with this piece? Aim for 7-14 words.',
      validation: Rule => [
        Rule.required().error('We need a title before publishing'),
        Rule.max(100).warning('Shorter titles are usually better')
      ]
    },
    // etc…
  ]
}

You can create new documents with preset values using Initial Value Templates. They reduce repetitive work for your editors such as:

• Configuring a boolean field to its most commonly used state.
• Populating the value of a date field to today’s date.
• Inserting the current user in the author's array

// schemas/documents/article.js

export default {
  title: 'Article',
  name: 'article',
  type: 'document',
  initialValue: {
    hidden: false
  },
  fields: [
    {
      title: 'Hide this article?',
      name: 'hidden',
      type: 'boolean',
      description: 'Turn this on to hide it from the public and bots.',
    },
    // etc…
  ]
}

Sanity lets you apply initial values within schema documents, or from a separate file for application on different types. You can create different initial value templates for the same document type. Initial values can also be set from external APIs and other integrations. Read the docs to learn more.

You can customize which fields are presented in the studio with List Previews. This makes it easier for editors to scan a list of documents or object entries within an array field:

// schemas/documents/article.js

export default {
  title: 'Article',
  name: 'article',
  type: 'document',
  preview: {
    select: {
      title: 'title',
      subtitle: 'summary'
    }
  },
  fields: [
    { title: 'Title', name: 'title', type: 'string', },
    { title: 'Summary', name: 'summary', type: 'string' },
    // etc...
  ]
}

Content previews give important feedback to editors so they can explore the different ways their content might be perceived.

Until recently, previews came with the thinking that content was always tethered to a single presentation channel. A common example of this is blog posts being used only for a website. Sanity lets you manage content in a “headless” fashion so it can be reused across multiple channels. This opens up a world of preview potential for editors. One document can include previews for web, print, digital signage, and more. It’s a different way of thinking about previews that have plenty of upsides.

Grouping information is a great way to reduce complexity and improve the editing experience. With Sanity Studio, you can group in the following ways:

Where possible, place related fields adjacent to one another to improve flow. It’s common to place first name and last name fields next to each other because users often hold both sets of information in their heads at the same time. Separating them forces the editor to recall name-related information twice.

Objects let you bundle several fields together. It’s possible to make standalone objects to reuse groups of fields across multiple document types. Fieldsets let you collate any number of fields or objects together into a custom group. You can make them collapsible to reduce clutter.

Structure Builder lets you configure how documents are grouped and listed. It offers a lot of functionality and comes with its own API. Here are some of the things you can do with it:

• Restrict a type to a single document (handy for global configuration).
• Place an important document at the root of your studio.
• Orient your navigation structure towards workflow states.
• Display a certain document type in a custom way.

The following example shows how the default document listing (left) can be manually curated (right) to group documents by common usage.

Great content often travels through the minds of many before reaching its audience. Collaboration improves content by exposing it to different points of view and quality assurance. It works best when people can:

1. Iterate freely.
2. Work together in real-time.
3. Flow through publishing states that suit their unique needs.
4. View every change to a document, and know who did what.
5. Write knowing they can revert to an earlier version at any time.

Sanity supports these in a few unique ways which can help transform your content culture:

Sanity studio is real-time, so you can watch your teammates apply content changes live and work together like in Google Docs. Its built-in Presence feature shows you who’s online and lets you find teammates with a single click.

Document actions let you define custom workflow actions in Sanity Studio. Use them to do things like:

• Build custom approval processes
• Trigger integrations
• Add additional publishing steps
• Define your own action badges

Learn more in the docs.

The review changes feature gives your editors a full document revision history inside Sanity Studio. Down to click and keystroke, you can see who did what to any version of a document and roll back a single field. It’s like Git version control, but for content.

Today’s content needs to travel to more places and do more things than it ever has. In the early 1980s Larry Tesler came up with a law for thinking about complexity in systems that states:

• Software and systems have a certain amount of complexity that can’t be removed or hidden.
• The complexity has to be assumed by either the system or the user.

He argued that a team of engineers should spend an extra week reducing the complexity of their software, instead of forcing a greater number of users to waste one minute on the program due to the added complexity.

This series has shown that modeling content for a multichannel world involves a fair bit of complex and nuanced thinking. But when it comes to managing that complexity – at the surfaces where the humans meet the machines – simplicity and usability are what we need most.

Sanity takes on a lot of complexity at the platform level to support better content at every stage of the journey so that:

• Developers can build fast and flexibly without having to worry about ops.
• Editors can make better content, faster, in an environment that actually relates to what they do.
• End users learn better and fulfill their needs sooner.

We learned about the importance of having an intuitive editing environment to make great content, what an effective editing experience should be, and how Sanity Studio supports these needs at every step of the content creation journey.

Sanity Composable Content Cloud is the headless CMS that gives you (and your team) a content backend to drive websites and applications with modern tooling. It offers a real-time editing environment for content creators that’s easy to configure but designed to be customized with JavaScript and React when needed. With the hosted document store, you query content freely and easily integrate with any framework or data source to distribute and enrich content.

Sanity scales from weekend projects to enterprise needs and is used by companies like Puma, AT&T, Burger King, Tata, and Figma.