Proposal: align sliders to bottom of viewport for mobile devices and tablet

[didimitrie]

From @philipbelesky on February 10, 2016 4:43

Hi, I was interested in helping out with the project at some and the first thing that came to mind was improving the UI experience on mobile devices. Since thats a design change, and I'm unsure how you want to structure contributions I thought I'd open an issue rather than jump to a pull request.

Rough Proposal

• For standard mobile horizontal width break points, add media queries that switch the sliders to be fixed bottom rather than fixed side. Model scrolling/panning takes precedence over viewport panning, so one would want to ensure that the slider section portion is always visible and handles its own vertical scrolling well.
• The same layout switch is probably desirable for tablet devices.
• Personally given the vertical orientation of sliders and most monitors I think its desirable on desktops also, but thats a bit subjective and I don't think its a usability problem as it is on mobile.
• Not sure how your sliders are implemented; but glancing quick they aren't native. It may be of benefit to add media queries to those also to increase their touch targets

  Implementation

• Do you want pull contributions directly to master? Or should there be a develop or feature/mobile-menu branch?
• I'm relatively comfortable with node, so I assume a local install is possible atm (the auth service integration doesn't block it in any way?)
• If accepted I wouldn't start on this immediately; maybe sometime in the next fortnight

Let me know if this would be of interest!

Copied from original issue: didimitrie/viewer.speckle#5

[didimitrie]

Hey Philip,

Short answer: yes. Mobile UI is quite high on the priority list. I'm super happy you want to get on board with this!

One thing that properly needs thinking out before is the architecture of the whole UI-Viewer-API communication.

Ideally there would be a flexible system of pluggable UI widgets that can live their independent lives BUT be nice and coherent overall, and be configurable in several predefined templates (don't know if you noticed SPKDouble.jade + .js - it's not usable anymore - hacked over it on the SPKSingle, but it shows 2 instances of the same model simultaneously). An impossible task that is.

I'll try and figure out a possible architecture these days, before you start cracking on it. All suggestions are welcome.

There are some virtual sketches at the back of my head, I'll textually dump them below:

• Tablets horizontal: should expose most of the functionality of the @media screen - so similar to lg screens, i would keep fixed side. This point can be skipped and just force device orientation - but it would be a pity for tablets
• Tablets vertical & phones vertical - tabbed nav fixed bottom, yes please!

It is worth looking into implementing some nicer interaction patterns on mobile. Instagram (& Snapspeed) are handling "parameters" and sliders quite well - instead of a picture there's a 3d model :) I would defs go this way - it's a familiar ui and quite intuitive, and I have no qualms about blatantly copying their layout. This would mean having a list of possible parameters, and exposing only one slider at a time.

Yes please big and nice touch targets, etc. I agree with all your suggestions, and, anyway, the freedom to experiment is there, so feel free to disregard what I've just been blabbering.

I hope all is clear

[didimitrie]

From @philipbelesky on February 11, 2016 3:9

That all sounds great, let me know when you think the architecture's good to go.

One thing that might help before then would be to have a very brief set of contributing guidelines in the README or as a separate file. At the moment I assume any changes would be pull requests against master but you may want to a develop stage or a gitflow style branching system or something.