Add Cell Bar and Menu Enhancements Feedback

[MattSkewbie]

Add Cell Bar

We've launched a brand new UI affordance in the notebook: the Add Cell Bar. The Add Cell Bar allows you to quickly find and insert basic cell types with a single click. Choose JavaScript for code, Text for markdown, Data for a Data Table cell, and Chart for a Chart cell.

Add Cell Menu

We've also made some improvements to the Add Cell Menu:

• Search: Visible by default, we've added the ability to quickly find the components you need to build your data visualization
• Sample Data: Quickly get started with sample data from our standard library
• Connect to Data: Pro users can connect to a remote database without leaving the notebook to configure the connection
• Visual Design: The visual design of the menu has been updated to make it easier to scan the available options.

Cell Suggestions

Cell suggestions now appear in the same row as the new Add Cell Bar, underneath the currently active cell. This makes it easier to see what logical next steps you could take while working in a cell. For example, you can create a chart from a Data Table cell with just one click.

Quick Actions

Next to the cell suggestions, we've included the duplicate and delete buttons for quick access to common actions.

Leave Feedback

If you have any feedback to share on this new feature, please leave them in the thread below. We're listening, and we're happy to answer any questions you may have.

[asg017]

When you create a new blank notebook, you're instantly met with the "Add cell" bar automatically focused:

Maybe it's just muscle memory for me, but I preferred the old behavior, where you'd be auto-focused on the "# Untitled" block, so you could easily give the notebook a name.

I also find it out that the "Add cell" bar takes up so much screen space, covering both the title and most of the vertical screen. I see how this is useful for a new-user-experience, but I would much prefer a slimmed-down version of the "add cell" bar.

[MattSkewbie]

Hi @asg017, thank you for the feedback! Regarding to the default state of the notebook, our primary goal for the design is to help users see the available building blocks in Observable, making it easier to get started. Of course, the tradeoff there is that it deprioritizes the editing of the title.

Yesterday we released a fast-follow that makes it faster to jump back into the title cell. By pressing Esc from the default state, you will simultaneously close the Add Cell Menu, focus the first cell, and select Untitled.

That being said, there may be room for improvement. We may be able to augment the default state of the notebook once a user has created X notebooks in the platform, or have been a user for Y days. I'll take this feedback back to the team to discuss. Thank you!

[CobusT]

Just adding to what @MattSkewbie said... there is also the Editor setting in your user settings where you can opt to have new cells default to JavaScript cells (without the Add cell popup) when you hit Cmd-Enter in an existing cell (on Mac).

[MattSkewbie]

Good news! We've just released a new setting (on the General tab) that allows you to control the behavior of the Add Cell Menu in a new notebook. It defaults to on, but you can disable it if you prefer.

[galopin]

IMHO, the new Add Cell Bar (ACB) affordance can be more a usability hindrance than an improvement when trying to interact with a series of toggle or range inputs on a mobile device. More often than not, I activate the ACB widget rather than the intended input… It's a bit annoying in the long run.

To Reproduce

1. Grab your mobile device
2. Open this notebook (or this one)
3. Unpin the cell contents
4. Try hitting the toggles (or sliders)

With hindsight, targeting the label rather than the checkbox proves to be much easier.

Suggested fix

The any-pointer media feature can test whether the user has any pointing device (such as a mouse), and if so, how accurate it is. It is well supported and could help enable (or disable) the ACB affordance.

[galopin]

The more I use it the more I find that the Add Cell Menu (ACM) is way too cluttered: visual hierarchy is far from being ideal.

I wonder if a Tabs component wouldn't be more suited to convey the wide array of available options:

1. BASIC CELLS
   • JavaScript …
   • Text …
   • HTML …
   • SQL …
   • Data …
   • Chart …
2. DATA† …
3. CHARTS (PLOT + D3) …
4. TEXT …
5. GRAPHICS …
6. INPUTS …
7. IMPORTS …

This way, it would make it really easier to quickly scan all the options. You wouldn't have to scroll vertically to explore everything.

Currently, it is especially awkward to use the ACM "as is" on a mobile device.

† You could even merge CONNECT TO DATA & SAMPLE DATA panes into a single pane.

[galopin]

Also would it be possible to add another setting (on the General tab) that would allow to mute the ACB underneath the currently active cell?

[galopin]

Also I'm thinking of a twofold ACM:

1. clicking or tapping the + widget would reveal first the ACB
2. then clicking or tapping a disclosure widget within the ACB would display the actual (or improved) ACM ⁉️

[pettiross]

@galopin said:

Currently, it is especially awkward to use the ACM "as is" on a mobile device.

Hi Michael... I'm one of the UX designers here at Observable, and I would love to hear more about what kind of work you do on a mobile device. Are you working on a phone or a tablet? Is there a kind of work that you do on your mobile device that's different from how you might work with a mouse and keyboard, especially around adding cells?

I appreciate the thoughtful feedback you've already given, and thank you in advance for anything more you can take the time to share!

[galopin]

@pettiross wrote:

Are you working on a phone or a tablet?

Yes. Android & iOS smartphones. It depends. Those mobile devices are capable of running up-to-date versions of Google Chrome and Safari, contrary to my laptop. I tweak and test other people's notebooks or forks of my own notebooks.

At the time of writing, the ACM which required a mobile device user to pan the available options both horizontally as well as vertically seems to have been neutered. The ACB affordance is far less annoying now† but an HTML cell <> shortcut would be welcome.

Finally, when editing a JavaScript/HTML/Text cell, I first thought that Quick Actions buttons were redundant but it's actually quite the opposite: The duplicate and delete buttons within the active cell are no longer needed.

Kudos!

† The requested setting for muting the ACB underneath the active cell is no longer needed 😉

[galopin]

I got confused the other day: The ACM is neutered when your device is in portrait mode but still pops in when you turn your device sideways. Therefore the situation has not improved at all 😕

[tophtucker]

On Thursday we reverted to old add cell menu (and removed the add cell bar), while keeping a few features of the new one: the search bar is still always visible; there’s still sample data in there; you can still connect to a new database without leaving the notebook (though only from the Databases sidebar pane for now).

The changes originally described in this issue aimed to make more functionality more apparent, especially to users who are less familiar with Observable or with programming. All noble goals! But we’ve reverted it to keep these things more out of your way while coding.

The docs now have some out-of-date screenshots and such, which I’m updating now. I’m going to close this issue and recommend making a new issue if you have further requests, issues, or questions. Always happy to chat! And thanks for all your feedback here.