[sword-devel] User Interface design for Tyndale STEP

[David Instone-Brewer]

At 22:38 22/04/2010, Chris Burrell wrote:
>Just thought I'd share a few sites that have cropped up recently 
>from various people in the listings and outside. If we could pull 
>ideas off those interfaces, I think we could end up with something really good.
>
>1- <http://my.offlinebible.com/index.php>http://my.offlinebible.com/index.php
>2- http://code.google.com/p/xulsword/
>3- <http://www.bibleglo.com/>http://www.bibleglo.com/
>
>Chris

I like lots of things in XulSword.
What I liked about OffLineBible:
* Bookmarks - click on it, and it displays the ref it is marking.
* different formats (no Strongs; inline Strongs, interlinear Strongs, columns
* the line along the top where you can pick a chapter (a bit fiddly 
to use, but an interesting idea)
BibleGlo
* all the bling. OK, it isn't necessary, but it looks cool - well, impressive.
* the add campaign (now that advertising can be free, who says it doesn't pay?)

OK, Here are some positive ideas:

I like the idea of two panes of text, as in the prototype, and in XulSword,
with a wide tab area for navigation on the left as in XulSword,
* the XulSword tabs are in two columns with a narrow left-hand column 
of OT/NT,
    and a wider right-hand column which lists of books for OT or  NT
    but I think we can develop that further:
     Instead of having just OT and NT in the narrow left-most tab, we 
can have other things,
     which bring up more things in the wider right-hand tab:
   - OldT - listing OT books
   - NewT - listing NT books
   - Geog - listing placenames
   - Hist - listing periods
   - Lit - listing significant extra-biblical books
   - Lang - listing languages
   - Who - listing people
   - Find - a search box listing results

With some of these, we will have to display a cut-down list, perhaps with
[+] at the side to open up the item into more detail, eg for people:
[+] Aaron
[+] Baalam
[+] Caanan
- giving just 26 entries displayed.
For Languages I'd suggest an interface like 2LetterLookup.com

The equal sized panes of text could be like in XulSword, ie:

* each pane can show a different chapter of the Bible
   or the same chap in a different version, or they can be
   linked to show more of the chapter, flowing from one to the other.
* a raisable bridge icon  (like London Tower Bridge?) can join or 
separate them

* both panes have an identical set of tabs across the top
* these tabs need to be in two layers, classifying them into
   - English (ie PD versions)
   - European, (ie other language groups)
   - African
   - Eastern  (etc  as needed)
   - Online  (ie IFrames to NIV and other commercial version websites)
   - Ancient (ie Greek, Hebrew, ancient versions)
* at the bottom of each pane, there's a box which minimises when not in use
* below this box is another set of tabs determining what these boxes show
    (and when the box is minimised, they remain as a set of buttons)
* These tabs include:
    - footnotes (ie all the footnotes of verses in that chapter)
    - cross-refs (ie all the crossrefs of verses in that chapter)
    - personal notes (for that chap)
    - names  (ie all the people and places named, with links to dictionaries)
    - timeline (ie a minimised view of the time represented by that chapter)
    - vocab (ie all Greek, Hebrew and English words which occur in the chapter)

* between the two text panes put a column of bookmarks,
   with an arrow in both directions, so you can open in either pane
* at the top are "manual" bookmarks and at the bottom are "automatic" bookmarks
  - add a manual bookmark by clicking on an arrow at the top middle 
of each text
  - an automatic bookmark is added everyone a pane moves away from a chapter
    by any means other than scrolling
* the two sets of bookmarks accumulate vertically in order of setting them
   and when they run out of room, there is a scroll function to see older ones
* a "back" button at the top of each text pane keeps a history of 
what was displayed on that pane

* when you hover over a tagged word, definitions etc appear as a hover
* this hover does NOT appear next to the cursor, but always in the 
Tab area on the left,
    because this area is not being used once a person has gone where 
they want to go,
    whereas an overlay by the cursor obscures the exact text being studied
*  hover works within the text panes, and also in the boxes
    - hovering over a cross-ref shows the verse,
    - hovering over a Greek word in the text pane or a box shows a 
lexicon entry
    - hovering over a place name in text or pane or a box shows 
dictionary entry
    etc
* when you click on a ref (rather than hovering over it), the 
left-hand text pane
   goes to that chapter and highlights the verse clicked on
* when you click on a word or place or date (rather than hovering over it),
   the right-hand text pane shows a full lexicon or map or timeline.

* A Search box is permanently visible at top left, above the Tabs
   and results appear in the wider right-hand Tabs area
   - this searches for English, Greek, Hebrew, numbers (for Strongs) and Refs
     working out for itself what it is searching for.


We have LOTS of data to display, but we want to try and accommodate 
small screens - big problem!
Let's assume that phone screens will get bigger.
My Toshiba G910 has 800x600 pixels in eye-watering 2.5"x1.7" size, 
which is great for those under 40,
but as soon as your lenses harden, you need +3 glasses to see the details.
I think phones will go in the way of high-density screens, though 
laptops may not follow.
But I don't think we should assume that we will have this much space.
Although  we can display a lot, people can't see so much detail.

On small screens, we can treat the three areas (tabs on the left, and 
two text panes)
as separate screens which you drag into view as on an iPhone.
With small screens, the hover area will have to be near the cursor, 
as in most systems.

Can someone with artistic skills make a visual of all this?

David IB 
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.crosswire.org/pipermail/sword-devel/attachments/20100423/b1d46db2/attachment-0001.html>