Build mobile prototype of page map nav

[xmatthewx]

Luke's prototype gives users an intuitive sense of the tiles paradigm, making it easier for them to navigate and build tiles with relationships. Time to mobilify it.

A mobile prototype (or two) will help us test:

• Touch
  • quality of gestures
  • quality of zoom transitions
  • quality of tile nav transitions
• UX
  • user understanding of and comfort with tile paradigm and navigation on small screens

cc @flukeout @k88hudson @secretrobotron

[k88hudson]

@xmatthewx can you link design files here?

[xmatthewx]

@k88hudson - we don't have build-ready artwork.

• fairly recent UX in invision
• latest UI in notebook

We need to put a clean set of annotated UX in bit.ly/webmaker-build. cc: @flukeout

[thisandagain]

Depends on #1447

[gvn]

I'm hosting a prototype here: http://gvn.github.io/protozoom/

[xmatthewx]

Prototypes are collected and linked in http://bit.ly/webmaker-build on slides starting here.

[xmatthewx]

Here's a proposal on how to handle zoom levels and states based on conversations over the past few days. As @thisandagain suggested, let's aim to close the debate on Tuesday. We can revisit details if tests hit a snag.

Zoom/state

1. Map view (show 9 pages by default)
2. Page view (show hints of neighboring pages)
3. Page Element added/selected (hide neighbor hints)

(1) and (2) are available in both Play and Edit mode. (3) only in Edit.

• Depending on performance in large projects, we could add an additional zoom out.
• We will try generating a thumbnail of page content for the map view.

Pan & center

• Map view should freely pan
• Zoom-in should snap to selected page (or page nearest the center)
• Double tap on page should zoom-in
• Page view nav to neighbor should snap to page
• Page view zoom-out should center page on map
• Delete page should zoom-out first, delete page, show add-a-page icon, select a neighbor

Adding & moving pages

• Add-a-page icons should surround existing pages on map
• Users can tap-hold a page to lock panning and move the page on the map
  • Add-a-page icons should disappear
  • Users cannot drop a page on an existing page (no bumping aside)
  • Map view should slowly pan when a page reaches the perimeter so that users can create an island of pages

Limits

• We should limit page number based on performance
• The map should grow with the project to accommodate:
  • making "page islands"
  • making projects oriented horizontally or vertically

Selected Elements & Pages

• Selecting an element on a page changes the toolbar and hides the hints of page neighbors
• Selecting a page on the map sets this page as target of zoom-in

Questions

1. Is the stuff above good?
2. Is anything missing?
3. Should selecting a page on the map auto pan the map to center on that page?
4. Should one page always be selected on the map to avoid zoom-in confusion? My gut says no, but my mind says yes. I'm not sure what the user gains from a map with nothing selected.

cc @flukeout @vazquez @Pomax @gvn @k88hudson @thisandagain

[thisandagain]

Excellent. Thanks for documenting all of this.

1. Agreed. 👍
2. Not missing (included in "Zoom / State") but I'd like to underline the importance of prototyping and devising a technical solution to generating the thumbnails. Without a good technical solution this approach is going to need to be revised.
3. My instinct is "no" as my guess is that the user will often want to see a specific "grouping" of tiles and then select within them while editing. Having the center of the map move could make this a bit jarring.
4. Yes. 😉

[flukeout]

1. Yes - when an element is selected, will the tile become fully zoomed, or will the neighbor hints just vanish? I think zooming in might be cool, but also annoying if it happens too often. Worth checking out.
2. Seems comprehensive.
3. No, I don't think so.
4. Yes. The only problem I can forsee is to make the 'next selected tile' seem like a natural choice. In a list it's easy, but in a random it won't be as reliable. So the advantage of not selecting something would be that an unnatural selection would never be made. But yes to the question.

[flukeout]

@gvn Some feedback for the protozoomer!

• Is there a way to run it fullscreen by saving it to home screen on android? I'm able to do that to the invision prototype. That would help a lot!
• Zooming is super smooth, but panning is a little jerky. Do we know why? Is there lag between the gesture and when the app receives the gesture data? The zoom scale runs great so I imagine a translate would as well.
• Can we try just two zoom levels like in the UX prototype? The 'zoomed out' view would have 3 tiles across max, and zooming in would center on zoomed tile.
• The prototype doesn't fill up the full width of my Nexus 4 (our target device). It's 768 * 1280px.
• As you mentioned, adding a tile doesn't work.
• After zooming in, tapping on white tile spots (no tile or +) sometimes moves the board in unexpected ways.
• Not sure how to reproduce exactly, but after tapping somewhere and panning the board often disappears altogether. Happens very often.

Let me know if feedback in this format / about these types of things is useful! Thanks!

[xmatthewx]

@flukeout shared a concern:

if a user selects a tile, pans away, and then taps zoom ... we zoom into a tile outside their current view

Rather than rethinking selections and centering, we can orient and teach the user...

On zoom: pan to center first, then zoom. This will orient and teach the user.