Learner Options/UI Options Mobile Designs

Tue Nov 1 19:32:34 UTC 2016

Hi All,

We are getting close to implementing our Learner Options/UI Options panel for mobile.  We have been focusing on unifying the desktop and mobile designs and at a recent design crit we settled on maintaining a horizontal layout for both. There have also been some changes to the individual adjuster designs based on usability testing feedback. There will likely be more design tweaks in future, but we are at a point where we’d like to get going on the first stages of implementation.

Links to the latest mockups are here:
Horizontal layout mockups - desktop and mobile: https://files.inclusivedesign.ca/s/e2t7ylFZhc6DXPQ

Note that we also decided to keep the “hide preferences” tab on top of the open panel (rather than having it slide down and stay below the panel as it does now) because it allows for a better keyboard/screenreader navigational flow. This led to a discussion about allowing for flexibility in the lateral position of the tab, resulting in the following mockups/exploration:
Exploration of flexible desktop layout: https://files.inclusivedesign.ca/s/jY3QDRhfL4maAOY

And you will find an email thread attached below with discussion around some of the more detailed features and functionality.

Your feedback is welcome.

Thanks,

Dana

Begin forwarded message:

From: Justin Obara <obara.justin at gmail.com<mailto:obara.justin at gmail.com>>
Subject: Re: UIO
Date: November 1, 2016 at 10:03:29 AM MDT
To: "Ayotte, Dana" <dayotte at ocadu.ca<mailto:dayotte at ocadu.ca>>
Cc: "Liskovoi, Lisa" <lliskovoi at ocadu.ca<mailto:lliskovoi at ocadu.ca>>, "Harnum, Alan" <aharnum at ocadu.ca<mailto:aharnum at ocadu.ca>>, "Hung, Jonathan" <jhung at ocadu.ca<mailto:jhung at ocadu.ca>>

Thanks Dana,

Some comments below. You might also want to send this to the list. Seems like it’s in pretty good shape.

Thanks
Justin

On November 1, 2016 at 11:26:01 AM, Ayotte, Dana (dayotte at ocadu.ca<mailto:dayotte at ocadu.ca>) wrote:

Hi Justin,

Please find my responses to your questions below, and updated mockups here https://files.inclusivedesign.ca/s/qfgvjQElPHuoxX5

On Oct 27, 2016, at 7:16 AM, Justin Obara <obara.justin at gmail.com<mailto:obara.justin at gmail.com><mailto:obara.justin at gmail.com<mailto:obara.justin at gmail.com>>> wrote:

Hi Dana,

Thanks for sharing the UIO designs. I think they’re looking good. Here are few questions/comments.

Mobile:

* can a user swipe between panels, or are they required to tap the left/right arrow?

I think this would be good but my concern is that it would be difficult to swipe in that small space without accidentally hitting an adjuster. Perhaps we should limit it to the arrows?

* the first panel shows both the left and right arrow, does it wrap around or should the left arrow be hidden?

I kind of like the idea of it wrapping around - seems like it would make it easier to find a specific adjuster - I suppose it could get a bit confusing in terms of navigation, but the bread crumbs should help

* while i kind of like the arrows in the centre in the alternate design, i feel like the primary layout is more aesthetically pleasing

I agree

* if you have the individual resets, i wonder if the “all” is necessary beside the global reset. not sure. However the reset logo followed by the word all seems strange, maybe a variant of the reset icon that indicated it resets everything would be better

I tried a rearrangement that brings the text more into the icon - please see the first few frames of the mobile design. I tried it with different languages as well, and it looks alright - not sure how this would work as an icon re: translation? can we keep the text separate somehow?

Yah the translations could be hard. We could keep them separate and just position things, but that is generally complicated with CSS and could be brittle.

* I wonder if it will be hard to hit the individual reset button. seems close to the increase button and could be hit by accident as well.

I tried moving it to the bottom right corner where there’s some space - I think this makes its function a bit less clear, but maybe better than having it too close to the adjusters

I’m not sure which is better actually. It took me a while to see the reset button in the wireframes, but it might be more obvious in practice.

Desktop:

* will there be some sort of animation to transition between open and closed states, and if so, what do you expect that to look like?

Perhaps just having the panel slide down/open

* no individual reset on desktop?

Yes, I added this as an example to the text size panel (I think this should only appear once an adjustment is made).

That makes sense, and seems like a reasonable position. Although we may want to consider how it will affect the tab order.

* I think there was a comment before about having to shift-tab all the way back to do the reset. I’m not sure the best solution for that though. keep it at the bottom? Keep the reset visible when the panel is closed? Something else?

I don’t like having it at the “bottom” because it could be easily missed. I think we discussed the benefit of having it at the top/front so the user knows it’s there right away, and can come back to it. Not ideal to have to shift-tab back, but better than not knowing it’s there at all. I don’t mind the idea of keeping the reset there when the panel is closed as well.

Probably best for us to meet and discuss when you’re close to beginning implementation.

Thanks

Thanks
Justin

On October 26, 2016 at 6:33:13 PM, Ayotte, Dana (dayotte at ocadu.ca<mailto:dayotte at ocadu.ca><mailto:dayotte at ocadu.ca<mailto:dayotte at ocadu.ca>>) wrote:

Hi Justin,

I was re-visiting the UIO designs for both desktop and mobile. I know that you’ll probably start working on them again soon. I’ve attached links to the latest. I remembered that you had concerns about how we could make the placement of the desktop tab flexible, with the new design that keeps the tab above the panel. I played around a bit with this and I wonder what you think. Also thought that if you have time to look through the mobile mockups, maybe you could let me know if you see anything missing or any obvious issues? I imagine I’ll need to flesh out the mockups to include more panels and more of the panel functionality.

Horizontal layout mockups - desktop and mobile: https://files.inclusivedesign.ca/s/e2t7ylFZhc6DXPQ

Exploration of flexible desktop layout: https://files.inclusivedesign.ca/s/jY3QDRhfL4maAOY

Thanks!

Dana

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20161101/474debfb/attachment.htm>