Design the perfect sutta website User Interface (UI) ... for children?

No, I hadn’t thought about that! Not sure how I would work with that on the site, but I agree it’s is an important consideration. With so many suttas to present, it would be great if they could be presented based on the reader’s age.

2 Likes

Hi again @Snowbird,

The link I sent you previously is to a website designed to be used offline and created in plain HTML. It runs on Windows, Android and Mac devices, takes up less than 100 Mb and includes all of the requirements you’ve listed and more.

  • Simple, drop down menu navigation
  • One translation per sutta
  • Static translations with the ability to edit pages if you want
  • All the KN included (See screenshot)
  • All the Nikayas included

It includes the ability to show the Pali alongside the English and that can be toggled off or removed completely by removing a few lines of code.

If you’d like to remove menu items or to hide the Pali toggling button I’m happy to help.

I hope you find it as useful as I do …

All the best

tOM

3 Likes

Sorry I didn’t reply. I got lost trying to see if I already had a copy downloaded on my computer :slight_smile:

Thanks for pointing out this site.

Couple of things that looking at this made me think of. One is that the site I’m creating must be 100% mobile first. The site you shared only works on desktop or large screen.
The other thing it lacks is a link at the bottom of the sutta to let you move to the next sutta.

As an aside, the site you shared includes wrong copyright information. The Wisdom Publications are not released under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported licence. The selection they previously had on their website are, but not the complete books. I believe this site used to be live on-line but Wisdom asked them to remove it because of copyright violation.

2 Likes

Hi @Snowbird.

It works fine (for me) on a mobile phone. It is true that to display Pali and English alongside each other gets squishy when accessed via a phone and is best done on a 10 inch tablet or larger. However, as I understand it, for your proposed web site you don’t need Pali at all.

Navigation from the current page to the next is accomplished by clicking on the arrowheads either side of the Pali button on the floating widget. The arrowheads above and below the Pali button take you to the top and bottom of the current page respectively.

With a basic knowledge of HTML, Bhante Sujato’s translations can replace the ones that are on that site.

Feel free to throw at me all your complaints about how other sutta websites are organized so I can avoid those problems.

For navigation, my thought was to have a side bar similar to SC (although much, much simpler). What I’m not sure about is if the side bar should go down to the sutta level or not. Could get ugly.

Personally, I don’t think a sidebar is the best way to navigate a web site, especially if it is going to be accessed predominantly via mobile devices which have limited screen space. Because of the complexity and all the information that SC wants/needs to make available, they need a sidebar. For a simple site that is easy to navigate for the non computer literate, drop down menus work great.

I hope to save you some work by pointing you to a web site that already has the navigation and lots of content already in place. Creating a web site from scratch is a BIG job.

I wish you well with it,

tOM

5 Likes

Ah, I missed that. Thanks.

Right. I’m also moving away from a sidebar navigation.

So, I kind of blew apart my thinking about this and am now working from the perspective of “what would a sutta website look like that didn’t have a hierarchical menu system for getting to the suttas.” Of course something like that will be needed in the long run. But as a thought experiment, I’m throwing it out. Basically I’m setting aside for now the user who comes to the site knowing the citation of the sutta and how to find it as if they were using a table of contents in a book. Of course those users are important. But I will come back to them later since they don’t really need anything innovative.

Instead I’m trying to get into the mind of someone who sits down thinking, “I’d like to read some suttas.”

For them, I have this image of them, a sincere upasaka (SU) walking into a sutta learning centre being greeted by a wise upasaka (WU) who makes them feel welcome. The WU asks them, "Friend, what would you like to learn about today? (1) Maybe the SU knows the topic and the WU is able to point them in the right direction. (2) Maybe the SU doesn’t know a topic but knows what kinds of problems they are having. The WU will then be able to direct them to read suttas that address that problem. (3) Maybe the SU just wants to read something new. The WU (who has psychic powers backed up by a mySQL database) is able to direct the SU to something they haven’t read before. (4) Maybe its the opposite—the SU wants to read their favorite suttas that have inspired them in the past. Again, the WU comes to the rescue.

So, how to achieve this? For (1) The obvious way, to me, is a tag based system. The problem comes when there are 20 or 30 hits on that tag. Then there is the issue of what order do you present them in to get people to the most valuable content first.

For (2) there could be a curated set of problems with sutta suggestions. It’s quite common to have a section like this in the back of a bible.

For (3) a user account will be needed. And some kind of database.

For (4) again a database. I’m envisioning a digital version of thepersonal anthology.

Actually one of the most helpful comments was from @Khemarato.bhikkhu forcing me to justify why this project would not be better than a book. (For the record, I still feel it’s better to be reading the suttas in some book form, but that’s not what this project is. And books may be a loosing battle.)

Also Bhante @sujato 's comments about looking into LMS concepts was very helpful. But I appreciate everyone who took the time to comment. It’s a better project because of everyone’s help.

I’ve got a mockup done if anyone wants to take a look at it so far, just send me a pm.

3 Likes

Nice

Double nice!

Glad my poke was useful :blush:

2 Likes

I’ve always wanted to have a personal anthology for voice.suttacentral.net. In effect, my Dropbox collection of hour-long sutta playlists is exactly that anthology. It started with DN33 and is gradually branching out wherever I find “blind spots”. The “blind spot” (or perhaps “deaf spot?”) is an odd phenomenon where my awareness skips entire verses each time I listen to a particular sutta. And it’s not random. There are “Bermuda Triangles” of missing awareness, gaps in mindfulness.

To address these blind/deaf spots, I’ve resorted to finding suttas that illuminate the difficult passages with deeper and longer detail. Over time, the blind/deaf spots disappear and the gaps fill in.

Dropbox is a really hacky personal anthology. I look forward to your own experiments with this!

4 Likes

(1) If using a tag system, maybe have a whole page just with tags, big and bold.

(2) would be great!

One technique that might be fun is to “drill down”. Take the greater elephants footprint as example. You could set it up as a choose your adventure story. Start with a general choice, say theory or practice. Then practice of say ethics or meditation, and so on. The user chooses between a couple of options and keeps going until they find a suttas. It’s kind of gamified, you go on a journey to find the dhamma.

7 Likes

One feature I like very much in Voice is the Inspire Me! button. It’s definitely the button I am using most frequently. Pressing it gives you a random result from a list of examples search terms; some of the search terms will lead up to just one sutta that has the respective term, others to a list of results. Most of the time, in that list I find something I feel inclined listening to at that moment when I am searching. So in your case, the wise upasaka could just come up with “the surprise of the day” if the sincere upasaka doesn’t quite know what they would like to see (or hear) today.

Oh wow! Great idea! Maybe we should have some thoughts about this for the time after the scheduled pronunciation release… So good we won’t have to worry about how to fill our time for the foreseeable future! :wink:

Taking them on an adventure tour sounds simply GREAT to me for a kids’ website! And certainly for some adults too!! (However from the technical side of things I have no clue how difficult that would be to realize.)

4 Likes

Sounds fantastic! Is there going to be an age limit? :baby::older_woman:

4 Likes

:rofl: :joy: I hope not!!!!!! !!

3 Likes

So I’ll let you in on a secret… Adults like the same thing kids do. :shushing_face: Sometimes more.

But by couching the discussion as for kids, I think it forces people to think a little differently, possibly more creatively. I also don’t believe that kids need childish things. They just need to understand and get information that is useful to them. Just like adults.

Basically this is what chat bots are. At least not the AI ones. Just a series of questions and answers. I just tried some out. The technical side is not that complicated. But I need to build out more content on the site to have things to link to.

Indeed. The challenge comes when there are 20+ results for a tag. What does one put at the top. Should it be random? Should it be weighted? Should there be a secondary cloud of tags to narrow it down? Or should the tags be highly currated so that, say, only 5 or 6 suttas can have the tag desire—only the best.

It’s a similar issue with search. How to rank the search. And in either case, does the reader have to back arrow to get to the other results? Or should it just be a bottomless stream where they can expand to read or just keep scrolling down? I’m designing it (to the extent one can call it that) to be mobile first, so results are going to be stacked one after each other.

Any way, lots of great ideas. Thanks!!

5 Likes

Pro tip: unless you’re building a social media or other “stream” type interface, infinite scrolling is almost always a mistake. Basically, it forces a way of doing things that goes against the fundamental nature of the web platform. Because of this it adds a lot of complexity and creates some currently unfixable problems, eg it breaks Ctrl + f for find-in-page.

It works here on discourse, as a conversation is by it’s nature open-ended. Notice how discourse hijacks Ctrl +f, using it’s own implementation. That’s a lot of complexity right there.

But when serving suttas, we have a finite and predictable body of material. Our aim should be to present the right info at the right time.

5 Likes

And there is the challenge! But a good one.

To clarify, I shouldn’t have said bottomless. “really long” is what I meant. Just because on a phone not much fits on a screen. It could still come to a point where the person had to click “show next ten results”. The alternative would be seeing a list of titles with summaries, I suppose. Then you would have to choose one to read. My issue is, do you expect the user to know to open in a new tab so they can continue with the results after reading that sutta? Do you force a new tab from search/tag results (probably not). Or do you let them expand it right there? I suppose a design principle would be that the users know what they are doing and don’t control behaviour they can themselves take care of. But do smartphone users know they can touch-hold to get the option to open a new tab? Or would they even know what happened if it forced opening in a new tab? On mobile the tabs are not as apparent as they are on desktop. I’m not really a smartphone user, so I don’t know.

2 Likes

Yes. Questions can determine blind spots and can then serve up answers. One could start with the Voice examples. They are already curated and their search results are already ranked. All they need is answers. One simply needs to add wrong answers and provide a multiple choice format (i.e., click all that apply). This makes it easy to display the search results.

As you can see, each example is essentially a tag phrase. All the software does is search for the search phrase. Here is one:

root of suffering

The Relevance score is the rank. Results are sorted as ranked.

…and that is how you find the right answers. For the wrong answers, just ask D&D for common misconceptions. :wink:

And with that, we would have the ability to determine a “personal sutta knowledge assessment” displaying some combination of:

  • percentage of possible questions answered correctly
  • percentage of viewed questions answered correctly (all-time vs. recent)
  • percentage correct by category (e.g., dependent origination)
  • etc.

And one last teaser…exactly how many times was the Buddha Sakka?

Have fun!
:pray:

Sorry, I can’t figure out what this list is. Is this search terms that people have used on Voice? That’s interesting. Make me wonder what the searches on the main site have been. And on Discuss for that matter. Does anyone know if they are available?

1 Like

The Voice examples are designed to elicit question/answer interactions. For example:

  • root of suffering → desire, relishing

Notice that there are multiple answers. This is even more apparent in the following question/answer interaction from another example:

Q: Who are the two fools?
A: One who doesn’t recognize when they’ve made a mistake. And one who doesn’t properly accept the confession of someone who’s made a mistake.

With the two fools question, the study list is merely S​N​11.24. With the first question, there are at least 5 suttas to read.

The Inspire Me button essentially works as a sutta quiz, but is not personalized. The questions could be easily formulated from each of the search phrases on the list.

@snowbird, we moved the Examples list for Voice to bilara-data and they are no longer available at the link posted earlier. Sorry for the inconvenience, this is required for the next release, which will permit real-time update of production examples.

2 Likes

It’s basically the list of terms related to what I tried to describe here:

I have to say that Karl uses Voice search in a much more systematic way than I do. I like playing around with “Inspire Me”, and he uses it more as a follow up search, for which he may use “Inspire Me” as a start, but then follows up with other search queries. But his way of going about initially gave rise to the idea of the “examples” list, just to help people who don’t know where to start.

Did I say this correctly, @karl_lew?

2 Likes

Anagarika, I am much less inspired than you. :wink:

I plod along each day listening to the “playlist of the week”. And each day I try to complete the sentences in my head as they are spoken. Mostly I fail. I suppose I fail methodically, however. You’re quite right. :heart:

Snowbird’s quest for the personal anthology articulated clearly what I’ve wanted for quite some time–that personal and interactive list of current study and exploration.

Someday, perhaps, one might be able to speak into a microphone, “Hey SuttaCentral, what should I listen to this week?” …and then one would hear a personalized inspiration.

2 Likes

That won’t perhaps happen with the random use that I am currently doing. :sweat_smile:

1 Like