[sword-devel] User Interface design for Tyndale STEP

[Chris Burrell]

My comments below, prefixed with >>> (and in bold if that comes through)

On 26 April 2010 13:00, David Instone-Brewer <Technical at tyndale.cam.ac.uk>wrote:

>  Chris, these are great!
>
> (David, I've copied you in for your creative 'eye' - links to screenshots
> are here<http://3.bp.blogspot.com/_4q-hr4DqduU/S9SnQsGWsoI/AAAAAAAAADs/t2ijJOFqFPc/s1600/tyndale+step-750569.PNG>,
> here<http://4.bp.blogspot.com/_4q-hr4DqduU/S9SnQEI12uI/AAAAAAAAADk/Qxp-v2p_QEM/s1600/tyndale+step+with+popup-747928.PNG>,
> here<http://2.bp.blogspot.com/_4q-hr4DqduU/S9SnaPNzSBI/AAAAAAAAAD8/npX67PYsUqc/s1600/tyndale_step_description-788925.PNG>,
> here<http://3.bp.blogspot.com/_4q-hr4DqduU/S9SnaI4ERiI/AAAAAAAAAD0/XL_u75zTlkE/s1600/tyndale_step_with_popup_description-788049.PNG>,
> here<http://3.bp.blogspot.com/_4q-hr4DqduU/S9SpdQ5XfBI/AAAAAAAAAEM/3Rw7bs3AQ6k/s1600/tyndale+step+no+bookmarks-713151.PNG>,
> & here<http://3.bp.blogspot.com/_4q-hr4DqduU/S9Spc_NlF3I/AAAAAAAAAEE/EF3stgSdQ18/s1600/step1_green-711941.PNG>).
>
>
>
> * I love the tags along the top of the text panes, which don't take up much
> room and dropdown to list the versions
>
> * I love the footprint logo at the bottom middle.
>
> * The Tools menu at top right is a great idea.
>
> * The big friendly buttons down the left are nice. They look a bit
> mysterious to start with, but are quickly learned.
>

*>>> I think we can easily add some "alternative text" to let the user know
what the button is in a non obstructive way*



>
> * The popout of People etc,  overlaying most of the text panes works well.
>
> * The people list - starting with a list at Aaron, Abaddon etc, with "more"
> looks good as a quick way to pick the person you want
>
> * The idea of starting typing and filtering the results is very intuitive.
>
> * I like the idea of intelligence for searching, with the option of telling
> it what to search for. So if someone looks up Aaron, they can decide if they
> want the People database or a concordance search.
>
> * the Bookmarks in the middle look perfect - intuitive, and don't take up
> much room.
>
> * Using the space between the panes for "Timeline", "People" etc is a great
> idea. The "Bookmarks" could be simply one of them. - ie click on one, and it
> turns into a list of the People, Maps, Bookmarks etc which are available.
>
> * I like the idea of Green as a colour scheme - it fits nicely with the
> logo and looks friendly.
>
> * I agree we need a config page but it can be separate
>
> * I agree we can use Browser back buttons
>
> * I too have misgivings about menus at the top. Personally I like them, esp
> for providing keyboard shortcuts, but they make applications look dated. If
> we have it, perhaps it could be an option.
>
> *Some minor suggestions (most of them are further ideas which you may
> already have in mind)
>
> ** The bridge would look more intuitive if it touched both sides and
> looked like one of those bridges which lift up to let boats under (ie the
> connection between the two sides is broken)*
> *
>
 *>>> Yes, I couldn't find a proper bridge like that. I think that a chain
might be better (link / unlink). One of the problems is that the picture
needs to be so big since the two panes are relatively speaking quite far
from each other...*


> * We need some indication of what version we are looking at. - ie when you
> click on the dropdown for "English" versions and pick ESV, then pick KJV on
> the other pane, we need to see somewhere that that these are what we have
> selected.
>
*>>> Yep, so perhaps something like Matthew 8:2-13 [ESV] in the title?*

>
> * I'd prefer tabs on the bottom boxes instead of an options button. This
> would indicates that all those tabs remain 'live' and available, and
> unclicking the one which is clicked could minimise the box.
>
*>>> I'm not sure unclicking a tab is very intuitive? or are you thinking of
having a tab called "No info"*
*
*


> * perhaps we could indicate "manual"  or "personal" bookmarks (ie ones
> which the user especially wants to remember) by highlighting them or making
> them a different colour. Or perhaps "personal bookmarks" could be a separate
> list.
>
*>>> Yes, agreed. So part of the idea on one of the buttons (in a later
screenshot) was to have a bookmarks option so that people could get to them
very quickly when they come back.*
**

>
> * It would be nice to have to option of opening a box at the bottom of both
> text panes, even if they are linked, so someone could see (say) both
> crossRefs and personal notes at the same time.
>
*>>> Yup. Good idea.*

>
> * I think we could reduce the size of the search options by simply having a
> dropdown from the binoculars. Most of the time, there won't be any need to
> specify the kind of search, because a Reference, or Strongs# is unambiguous,
> and we can set the default to a concordance search for most other things. If
> they have the sidebar open at People or Places we can change the default to
> that. So most of the time people won't have to choose the search database.
> *>>> Yes, although I don't understand the comment about when the side bar
> is open. The idea is to make the side bar a temporary helper to the
> application, which "disables" most of the application behind while open.*
>


> * Do we need a search box inside the side popouts? The main searchbox could
> be used. Perhaps the sidebar and popout could start higher up, so that the
> main searchbox could be incorporated into the popout.
>
*>>> I think we do. I think it would confuse people if we only have 1: one
of the search boxes is to carry out a one-off search, the other one in the
popout is to filter search results according to what module is selected on
the toolbar. *


>
> * Could we use the bookmark space for our hover-over information? I'd
> really like to avoid the usual problem of overlaying the very text you are
> trying to read.
>
*>>> Good idea (although it's kind of narrow...). I was going to suggest
using the notes field at the bottom, but that wouldn't work because of my
comments down below. Another option is to use a overlay on the top header
part (covering the search boxes)*



> * One of the trickiest things is typing a reference. Could we give the user
> some help? Perhaps, when they start typing in the search box, we could have
> an initial dropdown of Bible books (ie type "G" and get "Genesis 1... /
> Galatians 1..." at the top, then a horizontal line and other options such as
> "Gad  / Gadara  / Gideon... etc). This will esp help those who don't know
> the Bible books well, or who type "Jud" for Judges and end up in Jude.
>
*>>> All very feasible*


> * Could we add some kind of chapter selection? Perhaps, when "Genesis 1..."
> is selected the dropdown could change to "Genesis 1 / Genesis 2 / Genesis 3
> / Genesis 3 / ..."
>
*>>> I think you mean "Genesis "  would come up with Genesis 1, Genesis 2,
etc. Genesis 1 would come up with Genesis 11, Genesis 12, etc. I think also
the Bible function on the left (maybe we only need one) could server that
purpose, as a drill down. So your side popup would appear, you'd click
Genesis, then get a list of all the chapters, then click a chapter...*

>
> * AND / OR we could put a Bible icon by the side of the Search box with a
> drill-down Bible book & chapter selection.
>
> * When we implement Browser functions (like extending the page downward, or
> using child windows, we have to remember that not all Browsers are equal,
> esp on a phone or an iPad. We can't rely on extra space and extra windows
> being available.
>
*Agreed, a comment from my flat mate however was that if we're squeezing the
Bible into these two panes, and they are not linked (ie. different
versions/passage/content) we may need to expand them downwards like a proper
webpage for fear of not displaying enough of the passage. I'd rather avoid
inline scroll bars...*


>
> * I like the big popout area from side bar, but perhaps it should cover
> only the left-hand text pane (and it could cover more of it) - so that the
> user can arrange to have the passage they are looking up to still be visible
> on the right-hand pane. Eg someone may be looking up "Jehoshaphat" and
> they'd want to see the name while searching for it.
>  - this would also help with smaller devices, on which we can display
> either one text pane or the other, but not a wide area spanning both.
>
*>>> Good idea*


> * That makes me think it would be nice to be able to swap the right & left
> text panes. Can the "bridge" icon serve double purpose somehow?
>
*>>> Maybe dragging and dropping the pane onto the other side?*

>
> * What about putting the left-hand buttons on the right-hand side? I'm
> thinking about how this will be approached. Most users start at the left and
> the big buttons make them think that this is what they want to choose first,
> whereas we want the Bible text to be the center and the other things to be
> spokes or offshoots. So if the big buttons are on the right, their eyes will
> be drawn first to the main searchbox, which is where we want them to start.
> And if there is a Bible icon to the left of the search, this should lead
> them to drill down to a Bible chapter. Also, if the popout is on the right,
> it is less likely to cover the very text they have selected.
>
*>>> Possibly. I'll try that and post a screenshot.*

>
> * If the popout is covering the complete right-hand text pane, we should
> make sure that IF the two panes are linked, we temporarily unlink them so
> that a user can scroll up and down through the complete text in just the
> left-hand pane which they can still see, while the popout obscures the
> right-hand side.
>
> * The Bible icon in the big buttons should perhaps lead to commentaries
> rather than Bible books - ie keep the theme that these buttons are all
> adjuncts to the text.
>
*>>> Yup, I was thinking that as well... Maybe a little Bible icon next to
the search, which would just populate the auto-suggest search box at the
top.*

>
>
>
> *This is really taking shape!
>
> *David IB
>
>
> At 21:57 25/04/2010, Chris Burrell wrote:
>
> 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.?)
>
>
> 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.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.PNGwhere 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
>
>
>
>
>
>  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
>
>
> _______________________________________________
> sword-devel mailing list: sword-devel at crosswire.org
>  http://www.crosswire.org/mailman/listinfo/sword-devel
> Instructions to unsubscribe/change your settings at above page
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.crosswire.org/pipermail/sword-devel/attachments/20100427/f399c1e8/attachment-0001.html>