Some mock ups from me are now on the Tyndale Programming blogs: <a href="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/</a><div>
<br></div><div>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.?)<br>
</div><div><br></div><div><a href="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"></a><br><div>The first two screenshots go together:</div>
<div><a href="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</a></div>
<div><a href="http://4.bp.blogspot.com/_4q-hr4DqduU/S9SnQEI12uI/AAAAAAAAADk/Qxp-v2p_QEM/s1600/tyndale+step+with+popup-747928.PNG">http://4.bp.blogspot.com/_4q-hr4DqduU/S9SnQEI12uI/AAAAAAAAADk/Qxp-v2p_QEM/s1600/tyndale+step+with+popup-747928.PNG</a></div>
<div><br></div><div>where the second one is when the user has clicked a button on the left hand side.</div><div><br></div><div>And then there's the explanations of some of the layouts if need be:</div><div><a href="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</a></div>
<div><a href="http://3.bp.blogspot.com/_4q-hr4DqduU/S9SnaI4ERiI/AAAAAAAAAD0/XL_u75zTlkE/s1600/tyndale_step_with_popup_description-788049.PNG">http://3.bp.blogspot.com/_4q-hr4DqduU/S9SnaI4ERiI/AAAAAAAAAD0/XL_u75zTlkE/s1600/tyndale_step_with_popup_description-788049</a><a href="http://3.bp.blogspot.com/_4q-hr4DqduU/S9SnaI4ERiI/AAAAAAAAAD0/XL_u75zTlkE/s1600/tyndale_step_with_popup_description-788049.PNG">.PNG</a></div>
<div><br></div><div>Finally, there's a couple of extra screenshots:</div><div><br></div><div>The first showing an alternative of the bit in the middle of the book:</div><div><a href="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</a> where it would list the content we have about a particular passage</div>
<div><br></div><div>and then one that looks particularly green (the green from one of the logos that was on the blogs a few weeks ago: <a href="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>)</div>
<div><br></div><div>A few other remarks:</div><div>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).</div>
<div><br></div><div>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.</div><div><br></div>
<div>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. </div><div><br></div><div>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.</div>
<div><br></div><div>I think that's it from me for now...</div><div><br></div><div>Please do let me know what you all think!?</div><div>Chris</div><div><br></div><div><br></div><div><br></div><div><br></div><div><br><br>
<div class="gmail_quote">On 23 April 2010 19:12, Chris Burrell <span dir="ltr"><<a href="mailto:chris@burrell.me.uk">chris@burrell.me.uk</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;">
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.<div><br></div><div>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.</div>
<div><br></div><div>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!</div><div><br></div><div><font color="#888888">Chris</font><div>
<div></div><div class="h5"><br><br><div class="gmail_quote">
---------- Forwarded message ----------<br>From: <b class="gmail_sendername">David Instone-Brewer</b> <span dir="ltr"><<a href="mailto:Technical@tyndale.cam.ac.uk" target="_blank">Technical@tyndale.cam.ac.uk</a>></span><br>
Date: 23 April 2010 17:35<br>
Subject: Re: User Interface design for Tyndale STEP<br>To: <a href="mailto:chris@burrell.me.uk" target="_blank">chris@burrell.me.uk</a><br><br><br>
<div>
Chris, this was bounced by the JSword and Sword mailing lists while my
membership awaits approval. <br>
Do you think you could forward it? <br>
Thanks <br><br>
David IB<div><div></div><div><br><br>
At 22:38 22/04/2010, Chris Burrell wrote:<br>
<blockquote type="cite">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.<br><br>
1-
<a href="http://my.offlinebible.com/index.php" target="_blank">
http://my.offlinebible.com/index.php</a><br>
2-
<a href="http://code.google.com/p/xulsword/" target="_blank">
http://code.google.com/p/xulsword/</a><br>
3-
<a href="http://www.bibleglo.com/" target="_blank">http://www.bibleglo.com/</a><br><br>
Chris</blockquote><br>
I like lots of things in XulSword. <br>
What I liked about OffLineBible:<br>
* Bookmarks - click on it, and it displays the ref it is marking.<br>
* different formats (no Strongs; inline Strongs, interlinear Strongs,
columns <br>
* the line along the top where you can pick a chapter (a bit fiddly to
use, but an interesting idea)<br>
BibleGlo<br>
* all the bling. OK, it isn't necessary, but it looks cool - well,
impressive. <br>
* the add campaign (now that advertising can be free, who says it doesn't
pay?)<br><br>
OK, Here are some positive ideas: <br><br>
I like the idea of two panes of text, as in the prototype, and in
XulSword, <br>
with a wide tab area for navigation on the left as in XulSword, <br>
* the XulSword tabs are in two columns with a narrow left-hand column of
OT/NT, <br>
and a wider right-hand column which lists of books for OT
or NT<br>
but I think we can develop that further: <br>
Instead of having just OT and NT in the narrow
left-most tab, we can have other things, <br>
which bring up more things in the wider right-hand
tab:<br>
- OldT - listing OT books<br>
- NewT - listing NT books<br>
- Geog - listing placenames<br>
- Hist - listing periods<br>
- Lit - listing significant extra-biblical books<br>
- Lang - listing languages<br>
- Who - listing people<br>
- Find - a search box listing results <br><br>
With some of these, we will have to display a cut-down list, perhaps with
<br>
[+] at the side to open up the item into more detail, eg for people:
<br>
[+] Aaron <br>
[+] Baalam<br>
[+] Caanan<br>
- giving just 26 entries displayed. <br>
For Languages I'd suggest an interface like 2LetterLookup.com<br><br>
The equal sized panes of text could be like in XulSword, ie:<br><br>
* each pane can show a different chapter of the Bible <br>
or the same chap in a different version, or they can be <br>
linked to show more of the chapter, flowing from one to the other.
<br>
* a raisable bridge icon (like London Tower Bridge?) can join or
separate them <br><br>
* both panes have an identical set of tabs across the top<br>
* these tabs need to be in two layers, classifying them into <br>
- English (ie PD versions)<br>
- European, (ie other language groups)<br>
- African<br>
- Eastern (etc as needed)<br>
- Online (ie IFrames to NIV and other commercial version
websites)<br>
- Ancient (ie Greek, Hebrew, ancient versions)<br>
* at the bottom of each pane, there's a box which minimises when not in
use<br>
* below this box is another set of tabs determining what these boxes
show<br>
(and when the box is minimised, they remain as a set of
buttons)<br>
* These tabs include: <br>
- footnotes (ie all the footnotes of verses in that
chapter)<br>
- cross-refs (ie all the crossrefs of verses in that
chapter)<br>
- personal notes (for that chap)<br>
- names (ie all the people and places named, with
links to dictionaries)<br>
- timeline (ie a minimised view of the time represented by
that chapter) <br>
- vocab (ie all Greek, Hebrew and English words which occur
in the chapter)<br><br>
* between the two text panes put a column of bookmarks, <br>
with an arrow in both directions, so you can open in either
pane<br>
* at the top are "manual" bookmarks and at the bottom are
"automatic" bookmarks<br>
- add a manual bookmark by clicking on an arrow at the top middle
of each text <br>
- an automatic bookmark is added everyone a pane moves away from a
chapter <br>
by any means other than scrolling<br>
* the two sets of bookmarks accumulate vertically in order of setting
them<br>
and when they run out of room, there is a scroll function to see
older ones<br>
* a "back" button at the top of each text pane keeps a history
of what was displayed on that pane<br><br>
* when you hover over a tagged word, definitions etc appear as a
hover<br>
* this hover does NOT appear next to the cursor, but always in the Tab
area on the left, <br>
because this area is not being used once a person has gone
where they want to go, <br>
whereas an overlay by the cursor obscures the exact text
being studied<br>
* hover works within the text panes, and also in the boxes <br>
- hovering over a cross-ref shows the verse, <br>
- hovering over a Greek word in the text pane or a box shows
a lexicon entry<br>
- hovering over a place name in text or pane or a box shows
dictionary entry <br>
etc<br>
* when you click on a ref (rather than hovering over it), the left-hand
text pane <br>
goes to that chapter and highlights the verse clicked on<br>
* when you click on a word or place or date (rather than hovering over
it), <br>
the right-hand text pane shows a full lexicon or map or timeline.
<br><br>
* A Search box is permanently visible at top left, above the Tabs <br>
and results appear in the wider right-hand Tabs area <br>
- this searches for English, Greek, Hebrew, numbers (for Strongs)
and Refs <br>
working out for itself what it is searching for.
<br><br>
<br>
We have LOTS of data to display, but we want to try and accommodate small
screens - big problem!<br>
Let's assume that phone screens will get bigger. <br>
My Toshiba G910 has 800x600 pixels in eye-watering 2.5"x1.7"
size, which is great for those under 40, <br>
but as soon as your lenses harden, you need +3 glasses to see the
details. <br>
I think phones will go in the way of high-density screens, though laptops
may not follow. <br>
But I don't think we should assume that we will have this much space.
<br>
Although we can display a lot, people can't see so much detail.
<br><br>
On small screens, we can treat the three areas (tabs on the left, and two
text panes) <br>
as separate screens which you drag into view as on an iPhone. <br>
With small screens, the hover area will have to be near the cursor, as in
most systems. <br><br>
Can someone with artistic skills make a visual of all this? <br><br>
David IB </div></div></div>
</div><br></div></div></div>
</blockquote></div><br></div></div>