[jsword-devel] Fwd: User Interface design for Tyndale STEP

[Chris Burrell]

Let me introduce David IB to the list. David is the "sponsor" from Tyndale
House. He's leading the data side of things and has a good idea of where
Tyndale STEP will be heading.

Further to his email, if someone wants to make a mock-up that would be
brilliant! Probably from the mock up we can easily divide into discrete
features which I'll enter into JIRA and then we can assign them to people.
It should be fairly easy to develop some of those in parallel and have the
different parts of the application communicate via the Event Bus.

I'll try and knock something up myself, but I'm not very good at the whole
visual side of things, so it would be good to see other impressions too!

Chris

---------- Forwarded message ----------
From: David Instone-Brewer <Technical at tyndale.cam.ac.uk>
Date: 23 April 2010 17:35
Subject: Re: User Interface design for Tyndale STEP
To: chris at burrell.me.uk


 Chris, this was bounced by the JSword and Sword mailing lists while my
membership awaits approval.
Do you think you could forward it?
Thanks

David IB


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
2- http://code.google.com/p/xulsword/
3- 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/jsword-devel/attachments/20100423/8d32246d/attachment.html>