Improved UI

[superdweebie]

The current demo has an ok ui. It's a decent start, but could be streamlined more. Following things should be done:

• Move the top nav to the bottom between the forward and back buttons. This uses less screen space.
• Make the slides look ok on large screens. Text, buttons, etc, should resize proportionally to screen size. Not sure if this is best done with js based font-size hack, or with media queries. Will experiment.

[superdweebie]

ping @90084 I've been mocking up an improved UI. Would very much like your comments.

[90084]

Hi Tim, these are looking polished! Some thoughts: Love the status/navigation device at the bottom. Love the larger target areas in general, including the arrows. Episode menu: I expect we'll typically have the future episodes unavailable until the previous ones are 'complete' (i.e. questions completed correctly). OK to show a summary of the episode, and to play completed ones, but we need to keep the ability of that 'flow control'. Feedback: it'd be great to show the options (even if much smaller), so you can see the context of the feedback. I get we've got little room, though.

Thanks, Marty

On 14/06/2015, at 10:07 PM, Tim Roediger notifications@github.com wrote:

ping @90084 I've been mocking up an improved UI. Would very much like your comments.

— Reply to this email directly or view it on GitHub.

[superdweebie]

A few more comments and questions ...

Episode menu: I've kept this very plain at the moment. I think there is lots of room for different colour shades and icons to indicate episode status - complete/incomplete/locked/etc - for managing flow control in the future. I image we will may also have a Series Menu in the future. Ie, multiplie series that each contain multiple episodes.

Feedback: I agree with wanting to put more context on the feedback screen, but I just can't find a way to make it fit. For the pick slide, I do have the edge of the buttons visible and the bubble arrow pointing to the button that the user selected. I'd love any suggestion that is an improvement.

Text: As before I've tried to use no text in the navigation and menus so i8n is straight forward in the future.

Colour: I've based it all around a single colour (Amber from google Materiel UI spec). That colour could easily be changed if you want to try something different.

Navigation consistency: I've tried to follow these two rules to give the user a space that can be conceptualised easily:

• App navigation (welcome screen/episode menu/episode summary) have a dark background and scroll vertically
• Episode slides have a light background and scroll horizontally

[90084]

Episode menu: I've kept this very plain at the moment. I think there is lots of room for different colour shades and icons to indicate episode status - complete/incomplete/locked/etc - for managing flow control in the future. I image we will may also have a Series Menu in the future. Ie, multiplie series that each contain multiple episodes.

Great. Feedback: I agree with wanting to put more context on the feedback screen, but I just can't find a way to make it fit. For the pick slide, I do have the edge of the buttons visible and the bubble arrow pointing to the button that the user selected. I'd love any suggestion that is an improvement.

Might we have the feedback appearing just below the selected option, and taking up the whole screen, but still within the overall page which might allow for scrolling up or down to see the other options if required? At the end of the day, At theend of the day, I do think it's better to have the room for the feedback - ie I don't want to truncate the feedback for the sake of showing the options, if it comes to that. Text: As before I've tried to use no text in the navigation and menus so i8n is straight forward in the future.

Beautiful, this is really important. Colour: I've based it all around a single colour (Amber from google Materiel UI spec). That colour could easily be changed if you want to try something different.

Great, I trust your judgement on this. Navigation consistency: I've tried to follow these two rules to give the user a space that can be conceptualised easily:

App navigation (welcome screen/episode menu/episode summary) have a dark background and scroll vertically Episode slides have a light background and scroll horizontally Love it.

Thanks Tim, Marty

[superdweebie]

Hmm, with the feedback, it could expand vertically to reveal feedback just below the option selected, and then allow scrolling up and down to view the whole slide. I was uncertain about this option because of trying to split the meaning of horizonal/vertical scrolling, but it is probably worth trying. I'll prototype it with animations and see how it feels.

[superdweebie]

Alternate feedback design:

[90084]

love it.

On 15/06/2015, at 5:58 PM, Tim Roediger notifications@github.com wrote:

Alternate feedback design:

— Reply to this email directly or view it on GitHub.

[superdweebie]

@90084 the very first part of the new ui is built. You'll find the welcome screen here http://superdweebie.github.io/demo/. It isn't much, but it is responsive (the old ui wasn't responsive at all). I'd like you to try out the responsiveness (resize the browser window) and tell me if you are happy with it.

[90084]

Thanks. Down arrow link doesn't seem to do anything (tried FF on OS X and Safari on iOS) - is it meant to? It looks good otherwise, and the responsive element did work. On 28/06/2015, at 9:11 AM, Tim Roediger notifications@github.com wrote:

@90084 the very first part of the new ui is built. You'll find the welcome screen here http://superdweebie.github.io/demo/. It isn't much, but it is responsive (the old ui wasn't responsive at all). I'd like you to try out the responsiveness (resize the browser window) and tell me if you are happy with it.

— Reply to this email directly or view it on GitHub.

[superdweebie]

Great.

Sorry, I should have been clearer. It's the welcome screen only - the down arrow doesn't work yet, as you found out.

Under the hood is a fair bit of refactoring. A swap away from png to svg images. And, addition of responsive css. So, although there isn't a lot to see, it beds in the foundation for the rest of the improved ui.

[90084]

Of course - looks great. Hope you're recovering.

On 29/06/2015, at 9:29 AM, Tim Roediger notifications@github.com wrote:

Great.

Sorry, I should have been clearer. It's the welcome screen only - the down arrow doesn't work yet, as you found out.

Under the hood is a fair bit of refactoring. A swap away from png to svg images. And, addition of responsive css. So, although there isn't a lot to see, it beds in the foundation for the rest of the improved ui.

— Reply to this email directly or view it on GitHub.

[superdweebie]

I've pushed another update to the test site (http://superdweebie.github.io/demo). You'll find the following changes:

• Hash navigation is being implemented (browser forward and back buttons working inside the single page app)
• Better page responsiveness - no jumping, but smooth resizing instead.
• Episode menu is working (but clicking the down arrow inside an episode summary is broken)

[90084]

Had a look on OS X FF and iOS Safari, looking great.

On 02/07/2015, at 9:05 PM, Tim Roediger notifications@github.com wrote:

I've pushed another update to the test site (http://superdweebie.github.io/demo). You'll find the following changes:

Hash navigation is being implemented (browser forward and back buttons working inside the single page app) Better page responsiveness - no jumping, but smooth resizing instead. Episode menu is working (but clicking the down arrow inside an episode summary is broken) — Reply to this email directly or view it on GitHub.

[superdweebie]

I've just pushed the latest to http://superdweebie.github.io/demo. First three slides of the first episode are working.

[superdweebie]

@90084 please have a try of the feedback ui here http://superdweebie.github.io/demo/#episode/1/6

[90084]

Love it, the scrolling is great, keeping the options visible while showing feedback. Like the large target areas for options. Love the flow control, can't progress until you get it right. The 'next' button within the feedback might be redundant, but if we have it it'd be good to have it right next to the 'refresh' icon - at the moment it shows below it, stretching it vertically and requiring more scrolling.

I've added an idea for a 'high contrast' optional theme, for outdoor use in a small group - but we can wait for feedback.

Found a few layout bugs (ignore if you're still working on it): iOS browser adds top and bottom chrome, which blocks our own nav bar:

An 'up flick' removes it, but whenever I tap on 'next' it reappears, requiring an up flick each step. Not sure if there's anything we can do...

Options in 'slider' stack vertically:

Also, I noticed when sliding the circle it ends up sliding the whole page.

Notice the 'menu' arrow points right rather than up, and left arrow is all white:

[superdweebie]

@90084 thanks for your feedback. All the bugs you have mentioned (with the exception of sliding the circle) are to do with browser support for flex-box layout and css transforms. (see: http://caniuse.com/#feat=flexbox, http://caniuse.com/#feat=transforms2d). 'webkit' prefixes need to be added for them to work, which I haven't done yet.

For now I'd suggest you test the app in chrome.

Unfortunately safari has taken the place of IE. That is, the unloved browser that lags way behind the rest that has become a pain to develop for. As you can see, both flexbox and css transforms are supported without issue by all the other major browsers. At least the coming version 9 of safari will do away with prefixes for these features.

Looks like there might be a fix for the chrome bug here: http://stackoverflow.com/questions/18572128/ios-7-safari-prevent-ui-chrome-appearing-differently-on-scroll-up-and-scroll-do

[90084]

ok, roger that, iOS would be very rare anyway. Will stick to my Android tablet - looks great there. I can make sure I take my table and demo on that when I do pitches.

I'm still getting the whole page sliding when I try to drag the slider question type.

m

On 10/08/2015, at 7:37 PM, Tim Roediger notifications@github.com wrote:

@90084 thanks for your feedback. All the bugs you have mentioned (with the exception of sliding the circle) are to do with browser support for flex-box layout and css transforms. (see: http://caniuse.com/#feat=flexbox, http://caniuse.com/#feat=transforms2d). 'webkit' prefixes need to be added for them to work, which I haven't done yet.

For now I'd suggest you test the app in chrome.

Unfortunately safari has taken the place of IE. That is, the unloved browser that lags way behind the rest that has become a pain to develop for. As you can see, both flexbox and css transforms are supported without issue by all the other major browsers. At least the coming version 9 of safari will do away with prefixes for these features.

Looks like there might be a fix for the chrome bug here: http://stackoverflow.com/questions/18572128/ios-7-safari-prevent-ui-chrome-appearing-differently-on-scroll-up-and-scroll-do

— Reply to this email directly or view it on GitHub.

[superdweebie]

I image that iOS is a low priority target for our end users, but a high priority target for those who may be potential supporters here in the west. I may invest in an iPod touch some time in the future so I can do proper interactive iOS testing.

[superdweebie]

@90084 I've updated the staging site (http://superdweebie.github.io/demo). You can try out the following:

• Feedback working for slider questions
• Drag bug for slider fixed
• iOS chrome in the way of nav maybe fixed
• iOS layout maybe fixed (web-kit prefixed added in all places were needed, I think!)

There are definitely some bugs in FF I haven't fixed yet. Haven't tried MS Edge yet. Should all be working in Chrome.

:)

[superdweebie]

@90084 I think the new ui is ready. I've tested on desktop chrome, ff and edge. Also tested on chrome android. If you are happy (I've updated the staging site) then I will merge it into the master.

[90084]

Hey Tim. Looks and works great in Android. iOS is heaps better. The only little hassle is that the address bar at the top and the chrome at the bottom keep showing, obscuring some of the text. A small thing: the correct answer for the slider question 'Abraham learnt about resurrection...' (URL ending /1/15) is actually David, not Samson. Very happy for it to merge into master (although it'd be great if you can fix the answer point above, for the sake of when I trial it). Another minor thing: the second session of audio seems to start at a slightly (1-2s) different time between Android and iOS. I'm not bothered by it at this stage, letting you know in case it's a symptom of something bigger. Thank you!

[superdweebie]

Glad iOS is better. Issue #28 (Automated functional tests) will bring more solid cross browser testing and will help get iOS sorted out and stay sorted out after each code update.

I'll correct the answer to slide 15.

Regarding audio, I noticed the same thing with MS Edge. It might be something to do with seeking the start point inside a variable bit rate mp3. I've opened #48 so it will be looked at in the future.

[superdweebie]

Closed by #45

Only one issue remains open against milestone 0.1.0 Yay!