UX floorplan idea -- put thing icons on bottom of page

[kgiori]

I have seen new users try to drag thing icons onto an uploaded floorplan after the upload was complete (since they clicked the check mark icon which exited edit mode). The attempt to drag is instead interpreted as a long press and opens the detailed view of the thing. Since the pencil icon is in the lower right corner, not near the icons on top, a new user struggles to figure out how to cause the drag-n-drop action that they see described in the user manual. They might better intuit that they need to be in edit mode in order to drag icons around if those icons are centered on the bottom of the page in line with the pencil icon.

[flatsiedatsie]

Ah. I had the same problem. I thought the pencil was for uploading an image (which does not seem to support jpeg or png yet).

[benfrancis]

@kgiori wrote:

The attempt to drag is instead interpreted as a long press and opens the detailed view of the thing.

I was concerned this might happen, because on smartphones to re-arrange icons you generally long press the icon to move it. I would like to support that more intuitive interaction, but then we have the problem of how to navigate to the detail view. Previously this was a tap/click on the icon, but that interaction is now used to toggle devices on and off. There isn't really room for a second touch target like we use in the things screen. We could add a context menu which offers both move and detail, but that would add an extra click.

They might better intuit that they need to be in edit mode in order to drag icons around if those icons are centered on the bottom of the page in line with the pencil icon.

We could test this, but I suspect the position of the icons will make much difference. I think the issue is that not everyone immediately realises that there are two modes to the floorplan UI, edit mode and view mode.

See also: https://github.com/mozilla-iot/gateway/issues/912

@flatsiedatsie wrote:

I thought the pencil was for uploading an image (which does not seem to support jpeg or png yet).

The pencil is for editing the floorplan view, including both the floorplan image and icon positions. JPEG and PNG should be supported. What browser and OS are you using? If it's a large image, it can sometimes take some time to appear after uploading.

[flatsiedatsie]

@benfrancis Couldn't you have this:

• Center of thing is on-off toggle
• A little sub-icon on the rop right (as things already have in the thing overview page) opens the details view. Kind of like the three dot menu here.
• long-press is drag. (although that would mean the things representation has to be big enough for two clickable surfaces. Perhaps that duality only appears when you click the edit button? That would solve the problem of it not being clear when you can drag it.)

Alternatively, make the icons 'wiggle around' a bit, like on the iPhone, when the user enters edit mode.

[benfrancis]

@flatsiedatsie wrote:

A little sub-icon on the rop right (as things already have in the thing overview page) opens the details view.

Thanks for the suggestion but as I mentioned above, the problem with that design is that there isn't space for more than one touch target. The icons scale with the size of the browser window. On a mobile device this can be extremely small and it's already hard enough to tap the icon, let alone two separate touch targets within that same confined space. This is why the UI had to be modal.

[flatsiedatsie]

Understandable. The wiggle alternative might solve that problem?

• normal click: toggle.
• press edit button -> icons start wiggling and become draggable.
• long press: detail view.