remote: rework UX and design of the remote controller

peterpeterparker commented 5 years ago

Description

Features were added to the remote control ("notes", "counter", "youtube play/pause") which ultimately makes its design a bit crowded.

Furthermore, the current buttons are too small I think. Using the deck as a slider to swipe slide is really useful but sometimes I would rather like to use the buttons to swipe next and previous, specially as "reveal" action could only be triggered using the buttons.

Purpose of this feature is to rework the remote control UX and design to make it more user friendly

New UX and design

My first idea would be the following:

Replace the "Tabs" with a good old "left menu" (maybe with "split-pane")
Display the "Notes" in a modal (not in the deck anymore)
Use big custom button for "previous" and "next" actions
Reformat the size of the deck to be closer to the size of a projected presentation (projector is 16/9 or 1610?)

Removing/replacing swipe?

Maybe we should even remove the "swipe" event on the deck in order to replace it with a new feature, the Spotlight one, see https://github.com/deckgo/deckdeckgo/issues/229 ?

Feedback and ideas

I'll be interested to hear your feedback and ideas about this subject! Please comment the issue with improvements and ping me, David (@peterpeterparker or twitter.com/daviddalbusco) 😃

Current screenshots

Mockup

Sans titre3

natemoo-re commented 5 years ago

I like the mock-up! What about using a bottom sheet for the notes on mobile? I feel like that would be a better UX since you wouldn't lose the context of the main screen.

peterpeterparker commented 5 years ago

@natemoo-re thx for the feedback 👍

not sure I understand what you mean with "bottom sheet", like a popover? sound like definitely a good idea to not loose the context, makes sense

natemoo-re commented 5 years ago

https://material.io/design/components/sheets-bottom.html#standard-bottom-sheet

I'm thinking of Material Design's "Bottom Sheet," specifically the pattern used for Google Maps.

It's been a long time, but I started on a Stencil component for one. https://github.com/natemoo-re/bottom-sheet

peterpeterparker commented 5 years ago

@natemoo-re thx for the detail, cool idea. agree a "bottom sheet" would be better than a modal, I'm just asking myself if it would not be better to have a "top sheet" instead of bottom? with the new UX I'm guessing that the buttons previous/next are the most important, therefore maybe better to not cover them?

I saw that you also thought about that use case in your component. are you planing to go forward with your component or it was "just" an exploration?

it's tricky to have everything on a mobile device. make me think that I should also think about how it could looks like on an iPad (do people use iPad next to their computer to remote control their presentation actually?)

natemoo-re commented 5 years ago

I've never seen a "top sheet" in use, so that might be a bit confusing? I will think over some patterns and share if I come up with anything that would work here. There has to be a good way to persist the controls while displaying the notes.

Also had another idea—there should be a way to expand the deck into a view where you can see thumbnails of all the slides, so you can easily jump to a particular slide.

While <bottom-sheet> was just an exploration, after updating it to the latest Stencil I'm considering releasing a stable version. Seems like a generally useful component for my own projects as well as others.

peterpeterparker commented 5 years ago

You are right it might be a bit "confusing". Ping me if you've got more ideas about it. Like you said there is a way to mix everything together. Also I guess that the speaker won't read his/her notes while switching to previous or next slide, so that would be ok with a "bottom sheet"

I didn't find right now the feature request I opened a long time ago but that's the vision I had for a long time now, to be able to replicate the content of the presentation in the remote. Display a thumbnail of the slides would go in that direction.

Cool, then if this is implemented with a "bottom sheet" your component could be its "engine" 😉

P.S.: In any case, currently I'm focused in our editor, so I don't have to work on this task soonish, we still have time to find the coolest UX

nweldev commented 5 years ago

Looks great :+1:

Just one feedback: IMO, a remote controller should minimize the need to look at the screen of the smartphone during a talk. "Swiping" is a big :heavy_plus_sign: for that.

peterpeterparker commented 4 years ago

The rework #429 has been merged.

still open: @natemoo-re will consider a PR I provided for his bottom-sheet and try to solve another improvements

but it's almost there ;)

peterpeterparker commented 4 years ago

I wasn't able to improve to component from Nate fully as there are some specificity in our remote, notably overflow content. As I feel the need to push the release out (there are a tons of changes), I've developed temporary a dummy bottom sheet (#459) to present the notes but ultimately would be cool to use the component of Nate which is more smooth.

In short, a first rework of the UX is ready and therefore I close this issue.

peterpeterparker commented 4 years ago

If you have time to have a try and send me some feedbacks I would love to hear them!

git clone deckdeckgo

cd remote
npm install
npm start -> port 3334

cd studio
npm install
npm start -> port 3333

deckgo / deckdeckgo