UI design for an empty notebook

[hbcarlos]

Problem

As presented in #13141, adding a new cell every time we have an empty notebook conflict with RTC.

This issue is to discuss a UI design to improve the UX on empty notebooks.

Proposed Solution

Add a button to create a new cell when the notebook is empty.

Additional context

cc @GabrielaVives

[GabrielaVives]

I suggest that we create a standard design for empty notebooks. It is important for the user experience for the design to have to components:

• a clear UI informing the user that an empty notebook is being displayed - for example, a clear and short message.
• a CTA to give the user a way to easily move forward - for example, buttons near the message prompting the user to add a cell

Here is an example in the following prototype: https://www.figma.com/proto/tPuLOg7FLmvVVK4q7EWlNc/Empty-notebook-design?node-id=311%3A3320&scaling=scale-down&page-id=311%3A3319&starting-point-node-id=311%3A3320

and as a screenshot:

Neutral state

When navigating left and right on keyboard

When hovering over a button

[davidbrochart]

Note that in Observable notebooks, creating a new notebook starts with an empty cell, and deleting it just clears its content. This is the behavior @krassowski described in https://github.com/jupyterlab/jupyterlab/pull/13141#issuecomment-1260785653, and I also prefer that compared to introducing a new UI.

[firai]

I would also advocate against moving away from the current behavior to having to click a button in a fresh notebook to add a cell, as the current behavior allows the user to immediately start typing once a new document is started, which is similar to the experience in word processors and text/code editors. I personally start typing code before I start organizing it around headings and such, but this default shouldn't be too harsh on users who prefer the other way around since cells are easily convertible. Maybe the default cell type could be configurable?

VSCode, Google Colab and Deepnote all add an empty code cell to new notebooks and focus into the empty cell by default as well. Like Observable, deleting the last cell in Deepnote, which is another notebook platform that supports RTC, just clears the contents of the last cell (while keeping the cell type).

[SylvainCorlay]

I would also advocate against moving away from the current behavior to having to click a button in a fresh notebook to add a cell, as the current behavior allows the user to immediately start typing once a new document is started, which is similar to the experience in word processors and text/code editors. I personally start typing code before I start organizing it around headings and such, but this default shouldn't be too harsh on users who prefer the other way around since cells are easily convertible. Maybe the default cell type could be configurable?

New notebooks would still have one cell presumably. We merely want to allow for removing that cell.

[krassowski]

Note from frontends call: we could possibly reuse the existing add cell button which is at the bottom (thanks @bollwyvl) - but it only creates a cell of default type.