[sword-devel] User Interface design for Tyndale STEP
David Instone-Brewer
Technical at Tyndale.cam.ac.uk
Mon Apr 26 05:00:11 MST 2010
Chris, these are great!
(David, I've copied you in for your creative 'eye' - links to
screenshots are
<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>here).
* 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.
* 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)
* 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.
* 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.
* 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.
* 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.
* 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.
* 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.
* 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.
* 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.
* 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 / ..."
* 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.
* 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.
* 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?
* 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.
* 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.
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/search?updated-min=2010-01-01T00:00:00-08:00&updated-max=2011-01-01T00:00:00-08:00&max-results=50>http://tyndalestep-prog.blogspot.com/
>
>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://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://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.PNG>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>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>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
>
>
>_______________________________________________
>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/20100426/47cd1dfc/attachment-0001.html>
More information about the sword-devel
mailing list