nteract / design

:pencil2: Mocking up nteract UI and UX
BSD 3-Clause "New" or "Revised" License
3 stars 5 forks source link

Touch-interface friendly #15

Open Carreau opened 7 years ago

Carreau commented 7 years ago

Prompted by @rgbkrk question and the fact that the celltoolbar are hiding some text.

More and more user have touch capable screens, or even purely touch interfaces.

I'd like to propose an (alternative) toolbar location:

screen shot 2017-04-05 at 21 29 52

May also or as an option on the left.

That's easy reach from thumb on tablets, and easy reach as well with index on laptop+touch screen.

That's almost doable with pure css (with an tiny modif to the dom structure):

.notebook {
    padding-right: 110px;

}
.cell-toolbar {
    position: fixed;
    bottom: 40px;
    right: 20px;
    width: 80px;
    opacity: 1;
    background: none;
}

.cell-toolbar > div {
    background: white;
    width: 82px;
    border: solid grey thin;
    margin-top: 10px;
    border-radius: 10px;
}

.cell-toolbar button {
    display: inline-block;
    width: 82px;
    height: 80px;
    padding: 0px 4px;
}

.cell-toolbar button span{
    font-size: 20pt;
}
rgbkrk commented 7 years ago

What contextual clue is there for which cell is active for the play button? I guess our shadow handles that now.

Carreau commented 7 years ago

What contextual clue is there for which cell is active for the play button? I guess our shadow handles that now.

Yes, and there are other visual clue that show which cell is focused. I don't think this is such a good interface for kbd/mouse, but I believe it's much better for touch interface. You might also want to provide extra controls (like execute select next, and thumb-scrolling or other actions for tablet-like. But I think the main goal is to have relatively large target, and use hand-reachable buttons. Delete could even be swipe right or left. Pin could also be a drag target at the top of the screen that is displayed only on drag. Just thoughts.