A new edit button & better mobile UI

Hi there folks!

We just introduced a small but pretty significant change to part of Observable:

Instead of a › next to cells, there’s now a ⠇ with options for what to do: you can edit, close, and permalink named cells through this UI.

You can still click on the cell’s name to the left of the dots to immediately toggle the cell. There’s also one more perk: you can click at the bottom of a notebook to quickly add a cell there, without having to target the :heavy_plus_sign: button.

We’re making room for some upcoming features, as well as improving the mobile and narrow-screen experience. Where we previously had an awkward toggle to see cell names on mobile - and no way to permalink those cells - we now have an immediate place to click to trigger editing, permalink, or delete cells, on both mobile & narrow-screen devices like iPads.

9 Likes

Just tested it with mobile browser, I had really much better experience this time than before

1 Like

I’m a bit ambivalent regarding the ui change. I liked the triangle that simply opened a cell, ready to edit. Now I need two clicks to do that. I find that harder, more obtrusive. I found the old delete cell harder, requiring two clicks.

How about having a trash can next to the pushpin next to the triangle, with sufficient space between the to avoid clicking errors?

3 Likes

A single click still suffices if you click anywhere else (away from the new “⋮” menu) in the space to the left of a cell.

Hi there Tom & Team. Thanks for all your hard work to make Observable such a great site! I continue to learn a lot.

Regarding these more recent changes – is it just me, or did we lose the ‘move up / down’ feature for organizing notebooks?

I also found that the the triangle was a bit more intuitive for editing - and only a click away.

1 Like

The up & down buttons are gone, because we’ve got a better way to visually rearrange cells now: you can now drag cells.

1 Like

Fortunately, the keyboard shortcuts for moving cells up and down still work!

2 Likes

I think you’re approaching this from a Desktop UI mindset, right? Because “sufficient space” is a notoriously difficult problem on mobile :wink:

EDIT: Also, on Desktop just clicking left of three dots expands/collapses the cell as always

Thanks for all replies! I totally missed that you can simply click in the huge margin area to open en close a cell. Wonderful. I withdraw my remarks. Great improvement. Thanks Observable Team.

2 Likes

I like these changes, but a minor note: I no longer seem to be able reorder cells on mobile (iPad/Safari). Before I could click the arrow buttons, but the new drag mechanism does not appear to be activated on touch events. Unless I’m missing something?

Cool! (in response to cell dragging)

One problem with this design is the edit and delete button are so close to each other that it’s pretty easy to accidentally delete when I meant to edit. Maybe I missed it but there doesn’t seem to be an easy way to undo a cell deletion… Anybody know a good way to go back one version?

1 Like

I ended up retrieving the deleted cell contents from the previous version with the help of this notebook https://beta.observablehq.com/@mootari/notebook-data

Will have to be more careful in the future.

1 Like

Can confirm this on Android phone (both Firefox and Chrome) as well

Just shipped dragging with phones and tablets - we’ll work on scrolling-as-you-drag, and other assorted improvements, soon.

2 Likes

Thanks for the feedback. We’ve added an extra click to confirm that you want to delete the cell.

Also, here’s a new hidden feature that’s handy for viewing recent changes: for a notebook you own, you can show the ten (or however many) most-recent changes like so:

https://beta.observablehq.com/compare/0123456789abcdef~10

Similarly, to compare version 20 to the latest version, you can say:

https://beta.observablehq.com/compare/0123456789abcdef@20

If you then choose “Compare reverse” from the notebook menu, you can click Merge to undo the changes. We’ll add better history browsing in the near future to make this easier.

8 Likes

A post was merged into an existing topic: Fresh & clean new cell name display

I did not have much time recently and was really surprised about the changes. The UI feels really clean and well thought. Thanks for the amazing work :slight_smile:

1 Like

I really liked how an empty cell would automatically get deleted if it was empty. Seems like you could bring that feature back and it would still fit in with the new changes. The other changes are great!

4 Likes