[sword-devel] User Interface design for Tyndale STEP

[Chris Burrell]

Some mock ups from me are now on the Tyndale Programming blogs:
http://tyndalestep-prog.blogspot.com/<http://tyndalestep-prog.blogspot.com/search?updated-min=2010-01-01T00:00:00-08:00&updated-max=2011-01-01T00:00:00-08:00&max-results=50>

Comments are welcome, whether good or bad!!! I think whatever happens, the
icons would need to be harmonized (colour an style) and thought through a
bit. And obviously the colour scheme would need to be chosen carefully  (do
we also want to make colour blind people have easy access, etc.?)

<http://tyndalestep-prog.blogspot.com/search?updated-min=2010-01-01T00:00:00-08:00&updated-max=2011-01-01T00:00:00-08:00&max-results=50>
The first two screenshots go together:
http://3.bp.blogspot.com/_4q-hr4DqduU/S9SnQsGWsoI/AAAAAAAAADs/t2ijJOFqFPc/s1600/tyndale+step-750569.PNG
http://4.bp.blogspot.com/_4q-hr4DqduU/S9SnQEI12uI/AAAAAAAAADk/Qxp-v2p_QEM/s1600/tyndale+step+with+popup-747928.PNG

where the second one is when the user has clicked a button on the left hand
side.

And then there's the explanations of some of the layouts if need be:
http://2.bp.blogspot.com/_4q-hr4DqduU/S9SnaPNzSBI/AAAAAAAAAD8/npX67PYsUqc/s1600/tyndale_step_description-788925.PNG
http://3.bp.blogspot.com/_4q-hr4DqduU/S9SnaI4ERiI/AAAAAAAAAD0/XL_u75zTlkE/s1600/tyndale_step_with_popup_description-788049<http://3.bp.blogspot.com/_4q-hr4DqduU/S9SnaI4ERiI/AAAAAAAAAD0/XL_u75zTlkE/s1600/tyndale_step_with_popup_description-788049.PNG>
.PNG<http://3.bp.blogspot.com/_4q-hr4DqduU/S9SnaI4ERiI/AAAAAAAAAD0/XL_u75zTlkE/s1600/tyndale_step_with_popup_description-788049.PNG>

Finally, there's a couple of extra screenshots:

The first showing an alternative of the bit in the middle of the book:
http://3.bp.blogspot.com/_4q-hr4DqduU/S9SpdQ5XfBI/AAAAAAAAAEM/3Rw7bs3AQ6k/s1600/tyndale+step+no+bookmarks-713151.PNG
where
it would list the content we have about a particular passage

and then one that looks particularly green (the green from one of the logos
that was on the blogs a few weeks ago:
http://3.bp.blogspot.com/_4q-hr4DqduU/S9Spc_NlF3I/AAAAAAAAAEE/EF3stgSdQ18/s1600/step1_green-711941.PNG
)

A few other remarks:
1st: we're going to run this thing in a browser (whether online or offline),
so we can make use of the browser buttons (back and forth), most naturally
to capture content change, similar to the bookmarks, going back and forth
through the passages we've visited. (that is stateless, i.e. if we came back
tomorrow that history would be forgotten about).

2ndly, it's a browser, so we can expand the page downwards (by inserting
content at the top), or at the bottom. We can also use internal links to go
between one screen and another.

3rdly: we could include some sort of menus at the top to make it feel more
desktop-like. Not sure what I think about that.

4th: we do need a place of general configuration and user preferences
(things like proxy settings, installing more sword modules/bibles, etc.).
Generally most of that can be done on a separate page, but we need a way of
accessing it, even if it's just one button at the top right, or something
like that.

I think that's it from me for now...

Please do let me know what you all think!?
Chris






On 23 April 2010 19:12, Chris Burrell <chris at burrell.me.uk> wrote:

> 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/sword-devel/attachments/20100425/6f5c3de4/attachment.html>