Navigating the Suttas: heading, subheading, description

Have you ever noticed how much of the information we see is summed up in this threefold way? Search results, blog posts, newspaper articles, academic articles, and much more use some variation on this idea. A main heading to define the topic; a subheading or set of ancillary information or metadata to give details and context; and a description or blurb to flesh it out.

Somehow this is a basic pattern that turns out to be really useful for summarizing complex information. It lets you see enough at a glance to have a good idea if you want more.

Our new SuttaCentral navigation builds on this concept. We want to create a navigation where each step doesn’t just get you where you’re going, but helps you understand how the journey proceeds.

When I designed the navigation for the current SuttaCentral, I made what I now believe to be a fundamental mistake. Drawing upon Marcus Bingenheimer’s idea that we should think in terms of sutta “clusters” rather than individual texts, I conceived the idea of a “suttaplex”, i.e. a set of information that fully represented that text on SuttaCentral. The basic insight is that a “sutta” is an inherently complex entity that includes:

  • original text
  • maybe more than one edition of original text
  • translations. Lots of translations!
  • references
  • parallels
  • essays
  • and so on.

Since we can’t reduce the idea of a Sutta to something simple, let us accept that what we are dealing with is “suttaplexes”. And a convenient way of presenting that is via the metaphor of a “card”. So that is what you see on the current site.

So far so good.

What, though, of the entities that organize the suttas? The nikāya, the vagga, the piᚭaka, and all the rest?

Clearly these are different kinds of things, and often lack much of the richness of the suttaplex. There’s no underlying text, for example, just a name.

So I decided that these “nodes” (as I called them) were simple. Thus they should be represented using a paradigm appropriate for simple information, for which the obvious example is the sidebar navigation.

We put a lot of effort into that, and it works pretty well. But over time, what was simple became more complex.

  • We need to show to difference between something clickable and unclickable: ok, use color for that.
  • then distinguish between different levels of hierarchy. okay, use a combination of typography and position for that.
  • We need to indicate where to go, use arrows for that.
  • Indicate where there are translations, use green dots for that.
  • indicate root language, use icons for that.
  • provide user shortcuts (just hope they find them)

That’s … not all that simple.

And it still doesn’t solve some fundamental problems:

  • how can we show the translated titles? There’s no room in a sidebar.
  • Is there a way of describing what these things are, especially for new users?
  • How can we co-ordinate different resources for the same thing, for example, an essay about the Digha Nikaya?

Eventually I realized the obvious: none of these things are simple. A sidebar is great if you want top show a few basic items that everyone knows: “pictures”, “documents”, “music”, “downloads”. But for us, it’s just the wrong paradigm.

Luckily, the “card” element is very flexible, and can easily accommodate all these kinds of information and more. By making our navigation 100% card-based, we can gather and co-ordinate information for each item, and present it much more clearly.

Are there downsides? Of course! With the new paradigm, we can no longer have the whole navigation system available in a sidebar on every page. And sometimes it may be an extra click to get where you’re going. And before someone asks, no, we’re not going to include both systems: it’s too complicated.

You can preview the new system on Staging. It’s not perfect yet, but getting pretty good.

Okay, so you can see our pretty new Home page. Nice, right?

At the top we have cards for the three Pitakas. So we’re putting the main content much more front and center.

On these cards you can see:

  • main title in user’s language
  • subtitle in root language
  • a short description
  • a link for an essay on the topic
  • a badge indicating how many translations are present in the user’s language.

Click on the “Discourses” and you’ll see a list of cards, representing the main discourse collections. Again we have the same basic set of information. there’s not too much detail needed at this level.

Let’s go to the “long” Discourses. Here we have three cards. In addition to the information we had earlier, we see the ID for the collection (eg. “DN”). And optionally we have a “shortcut” that lets you skip over the stepwise navigation to the full list of suttas. This is provided where it seems useful.

I provide translations for all the levels, even where it is only a nominal difference, eg. I use “collection” for nikāya and “complication compilation” for āgama.

Note that some descriptions are a bit long, so we show a snippet and you can click to expand.

Now let’s try the Dighanikaya. now we see a set of three “chapters” i.e. vaggas. The IDs show the range of texts included in each chapter.

Anyway, I have to go now so I’ll leave it at that. But I hope you enjoy the new system when it goes live.

8 Likes

:joy:
I wish this wasn’t just a typo. It’s a very appropriate choice…

Compilation

1 Like

Forgive me if this isn’t the place to ask this, but was there ever a consideration to let the user choose a site wide preference of root language as they can choose a translation language? I am making an assumption (that I guess could be supported by stats) that most people using the site will just be looking for Pali suttas, and that the number of people keen on all root languages is small. Feels like it would cut out a level of complexity for most users.

1 Like

Literally the whole point of the site is to show people how the Pali texts are only one part of the spectrum of EBTs, so no. Every other sutta site is Pali-only, and yes, it’s a lot simpler. But it’s not who we are.

5 Likes