{"id":25,"date":"2007-08-23T10:49:55","date_gmt":"2007-08-23T14:49:55","guid":{"rendered":"http:\/\/www.openbible.info\/blog\/2007\/08\/experimental-interface-for-browsing-chapters-in-the-bible\/"},"modified":"2016-02-06T11:18:12","modified_gmt":"2016-02-06T15:18:12","slug":"experimental-interface-for-browsing-chapters-in-the-bible","status":"publish","type":"post","link":"https:\/\/www.openbible.info\/blog\/2007\/08\/experimental-interface-for-browsing-chapters-in-the-bible\/","title":{"rendered":"Experimental Interface for Browsing Chapters in the Bible"},"content":{"rendered":"

Try it out<\/a>. (It works best in Firefox with at least a 1000-pixel-wide screen.)<\/p>\n

Screenshots<\/h3>\n

\"A
\nA half-size (non-interactive) image of the interface.<\/p>\n

\"A
\nHovering toward the left side of the Psalms shows you the title of Psalm 23.<\/p>\n

\"A
\nHovering toward the right of the Psalms shows you the title of Psalm 121.<\/p>\n

Background<\/h3>\n

One challenge of developing a hierarchical Bible interface (going from books to chapters to verses) is the sheer number of options: 66 books = 1189 chapters = over 30,000 verses. Obviously you\u2019re not going to show someone 30,000 (or even 1189) choices all at once; you need to prune the display somehow.<\/p>\n

Often the approach taken by Bible interface designers is to divide the Bible into testaments (Old and New), then books, and finally chapters. This screenshot of the NET Bible iPhone application is typical of this approach:<\/p>\n

\"The
\nTapping either the \u201cOld Testament\u201d or \u201cNew Testament\u201d option leads to a list of books in that Testament, which leads to a list of chapters in each book, which leads to the text of the chapter. (This image comes from the blog This Lamp, where Rick Mansfield has the enviable job of reviewing Bible iPhone applications<\/a>.)<\/p>\n

One limitation with this approach is that the design has to accommodate the wide range of chapter counts in the Bible\u2014from single-chapter books to the 150 Psalms. This variety makes certain kinds of interfaces hard to use. The NET approach above scales pretty well, though I wouldn\u2019t look forward to all the scrolling needed to reach Psalm 150<\/a>.<\/p>\n

There\u2019s nothing inherently wrong with this approach, however, especially if you think hierarchically. But I\u2019m always eager to explore alternative interfaces that simplify things for at least some people.<\/p>\n

Before I get into the specifics, I want to acknowledge an Ajaxian article on the .Mac Web Gallery<\/a> as the inspiration for this interface.<\/p>\n

How It Works<\/h3>\n

My goals with this project were:<\/p>\n

    \n
  1. Expose the book\/chapter hierarchy in the Bible without creating a deep hierarchical interface.<\/li>\n
  2. Provide more information than simply the chapter numbers for each book.<\/li>\n<\/ol>\n

    The result is a 1000×479-pixel grid. Books appear in color-coded columns based roughly on genre. Similar books (e.g., 1 and 2 Samuel) appear next to each other to minimize the vertical space required for the display.<\/p>\n

    The size of each book\u2019s rectangle generally corresponds to the book\u2019s length. The New Testament takes up about three times as much space as it should when compared with the Old Testament. A New Testament at the same scale as the Old would be too small to be workable. People tend to read the New Testament more than the Old, anyway, so it probably makes sense to enlarge it, though perhaps not as much as I\u2019ve done here.<\/p>\n

    Behind the scenes, a script vertically divides each box into the number of chapters in the book. Genesis, for example, has fifty vertical slices, one for each of its fifty chapters. Hovering over one of these slices shows all the headings contained in that chapter. Moving to the left shows you the headings for the previous chapter, while moving to the right shows the headings for the next one. Clicking a slice takes you to that chapter in the ESV Bible.<\/p>\n

    This interface lets you discover a lot of information with minimal effort:<\/p>\n