[sword-devel] User Interface design for Tyndale STEP
Chris Burrell
chris at burrell.me.uk
Tue Apr 27 05:13:49 MST 2010
And few extra comments
+ To increase space allocated to seeing the passage, it would be good to be
able to expand downwards
+ Mobile devices would probably default to one pane with a smaller set of
icons on the side
+ A pin on the sidebar would allow you to collapse the sidebar further
(using smaller icons as David Haslam was mentioning)
+ Someone mentioned workspaces/virtual desktops. My flatmate mentioned it as
well. It would be good to find an intuitive way of saving the view, or
creating a new view. So that users who want to see more than two panes can
start flicking between their views... Maybe tabs on the top of each pane? or
at the very top, a banner with a tab ( a bit like Google Chrome has)
Chris
On 27 April 2010 13:06, Chris Burrell <chris at burrell.me.uk> wrote:
> 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/5da79f1d/attachment-0001.html>
More information about the sword-devel
mailing list