JupyterLab UI/UX

[cameronoelsen]

Hey everyone!

Starting today, I am going to be shifting most of my focus to researching and designing the Jupyter Workbench's (name to be decided on) 1.0 initial release interface. @ellisonbg and I have started a Hackpad that outlines some common functionalities that we have seen users are accustomed to. Please feel free to add anything you might see to be a helpful feature/functionality to the end user for the initial release at https://jupyter.hackpad.com/Jupyter-Workbench-UIUX-m8yrTt4p5ZA. As I design the interface, it will be posted here for further discussion!

[ellisonbg]

I think this works really well.

On Mon, Dec 7, 2015 at 2:40 PM, Cameron Oelsen notifications@github.com wrote:

After talking with you @sccolbert https://github.com/sccolbert about the shadows being overwhelming, I toned it down and it looks a heck of a lot better with the shadowing only on the content area windows.

New shadowing: [image: main_window] https://cloud.githubusercontent.com/assets/6437976/11642026/7fcd76d6-9cf0-11e5-8908-24483a86d84c.png

— Reply to this email directly or view it on GitHub https://github.com/jupyter/design/issues/20#issuecomment-162691882.

Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub bgranger@calpoly.edu and ellisonbg@gmail.com

[cameronoelsen]

Played around with some elements to try to incorporate the usual elements that come with a standard text editor (Line/Column, Tab Size, What Language). Thoughts? I am going to start a first run on the terminal, I don't think it will take too long.

[cameronoelsen]

Here is my first pass at the terminal, there wasn't much to design seeing that terminals are pretty straight forward. Any suggestions on features for either the text editor or terminal @sccolbert that we want to have mocked up?

[ellisonbg]

Looking good!

On Wed, Dec 9, 2015 at 1:13 PM, Cameron Oelsen notifications@github.com wrote:

Here is my first pass at the terminal, there wasn't much to design seeing that terminals are pretty straight forward. Any suggestions on features for either the text editor or terminal @sccolbert https://github.com/sccolbert that we want to have mocked up?

[image: terminal] https://cloud.githubusercontent.com/assets/6437976/11698990/a5568aa0-9e76-11e5-934b-ce4c7735cb7d.png

— Reply to this email directly or view it on GitHub https://github.com/jupyter/design/issues/20#issuecomment-163393438.

Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub bgranger@calpoly.edu and ellisonbg@gmail.com

[cameronoelsen]

And here is the first run on the notebook content area

[ellisonbg]

Nice!

On Wed, Dec 9, 2015 at 4:22 PM, Cameron Oelsen notifications@github.com wrote:

And here is the first run on the notebook content area [image: notebook] https://cloud.githubusercontent.com/assets/6437976/11703087/075d6588-9e91-11e5-987b-1f80a7724641.png

— Reply to this email directly or view it on GitHub https://github.com/jupyter/design/issues/20#issuecomment-163445543.

Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub bgranger@calpoly.edu and ellisonbg@gmail.com

[sccolbert]

Nice!

The tab bar for the notebook panel has a different (missing) bottom border (footer) than the rest. That will be hard to do. The TabBar is a separate widget with no knowledge of what content is rendered below it. It will be much easier if the tab bar for all panels is identical.

[cameronoelsen]

@sccolbert Here is the revision from before break with all three content areas (Text Editor, Terminal, & Notebook Area).

I will have the popup menus done next! Did we want to have Icons on the lefthand side of the menus similar to how Google docs does it?

I will have the mockups for the menus by tomorrow, January 5th. For the mockups, I'm just going to use the content structure that we are using in the current Jupyter Notebook.

[blink1073]

@cameronoelsen, yes, phosphor-menus puts the icon to the left. Also, we decided not to have the (new, upload, refresh) buttons go all the way to the edges, since it starts to look strange as you stretch it out.

[cameronoelsen]

@blink1073 @sccolbert Here is a mockup of the menus utilizing the material design shadows along with a border radius of 2px on the bottom corners. For material design shadows, the css corresponding to the depths I used in the mockups are posted below. I only showed in the mockups the menus opening at 1dp and 2dp, but if we have other menus that go even farther I posted dp 3+ as well.

Material Design Shadow Specs:

Level 1 Shadow (1dp) box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

Level 2 Shadow (2dp) box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

Level 3 Shadow (3dp) box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

Level 4 Shadow (4dp) box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

Level 5 Shadow (5dp) box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

Also, when @ellisonbg and I were talking, we wanted to see how the Workbench would look with a dark theme to it. Here is a first pass at that design. All the colors in the notebook area window are off (in the process of finding a nice markup theme), but the rest I thought looks pretty good.

Jupyter Workbench (Dark Theme : First Pass)

[sccolbert]

Varying the shadow by menu depth adds lots of complications. I suggest we not worry about that for now.

[cameronoelsen]

@sccolbert Alright! Then we can just use the 1dp spec, that should work for the initial release

[ellisonbg]

The 1dp shadow might be slightly thin for the menus - if so, maybe 2dp?

On Wed, Jan 6, 2016 at 3:07 PM, Cameron Oelsen notifications@github.com wrote:

@sccolbert https://github.com/sccolbert Alright! Then we can just use the 1dp spec, that should work for the initial release

— Reply to this email directly or view it on GitHub https://github.com/jupyter/design/issues/20#issuecomment-169490847.

Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub bgranger@calpoly.edu and ellisonbg@gmail.com

[cameronoelsen]

Over the week have been compiling all of my designs from my Sketch file and have made an InVision document to allow for easy reference to the menu items, hover states and popups. Will continue to add to this as well as post individual mockups on this GitHub Issue.

https://invis.io/5Z5ME4XN7

[ellisonbg]

Thanks! Very nice work!

On Fri, Jan 15, 2016 at 1:50 PM, Cameron Oelsen notifications@github.com wrote:

Over the week have been compiling all of my designs from my Sketch file and have made an InVision document to allow for easy reference to the menu items, hover states and popups. Will continue to add to this as well as post individual mockups on this GitHub Issue.

https://invis.io/5Z5ME4XN7

— Reply to this email directly or view it on GitHub https://github.com/jupyter/design/issues/20#issuecomment-172104244.

Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub bgranger@calpoly.edu and ellisonbg@gmail.com

[blink1073]

@cameronoelsen, that is really slick, and will help a lot, thanks!

[blink1073]

Hi @cameronoelsen, here's the file browser status. Notice Name and Last Modified are now sortable, so I made them look more like table headers. Also, I used Name, since there are not just files there, and it is the title used in Microsoft Explorer.

[cameronoelsen]

@blink1073 Looking awesome. I revised the file browser after seeing this. One thing I am wondering is whether we want to have a line that cuts the content area and tab apart.

The only reason I added this line was because it looked kind of funky and make the table header look like it was randomly floating within the content area.

Thoughts?

[cameronoelsen]

Here is the file browser without being full width and using the same padding of the other elements

[cameronoelsen]

So here is my first pass at the submenu, thoughts? @sccolbert I thought that the search bar isn't necessarily on every submenu but only the ones that are deemed necessary by the developers who are making their menus.

[sccolbert]

Looks good. Selectively showing the search box sounds like a reasonable idea.

[sccolbert]

@cameronoelsen Can you add shortcuts to that dropdown menu? I'd like to see how that affects the width of the overall menu.

[cameronoelsen]

Here is my first pass at that @sccolbert!

[sccolbert]

The way I'm planning on implementing things, shortcuts (which reference a command) would be exclusive of a flyout menu. That is, a shortcut will not appear in the same menu item as the flyout triangle (just fyi). This is useful though. Thanks!

What do you think about the horizontal space taken by the shortcuts? Should we show them as tooltips instead?

Ping @ellisonbg

[jasongrout]

Re: horizontal space - we can make the shortcuts "Ctrl" and "Cmd" - that may help. I find it a bit too wide so that it's hard for my eye to traverse from "Download As" to the flyout. I think maybe -1 on tooltips, though I would be interested in trying it.

[jasongrout]

Do you think that flyout items could/should show a shortcut?

[blink1073]

If it is just a palette, the palette shows shortcuts.

[jasongrout]

Maybe it would be useful for parent menu items to also have shortcuts - the command would be 'open this menu flyout'. That could be a useful thing. For example, control-shift-v, type 'py', hit enter, type a name, hit enter, and that is saving as a python file. Essentially, the shortcut means "pull up this restricted command palette"

[sccolbert]

I dont see how a shortcut on a flyout item would be a useful thing. If the menu is already open, just click on it at that point.

It would also require some rearchitecting to associate a command with a particular palette.

:-1: on having shortcuts on menu items which represent flyouts.

[jasongrout]

The point behind shortcuts is that you don't have to use your mouse to click. If the menu fly out exposes and focuses a palette, that's great for keeping your hands on the keyboard and continuing typing. If you can expose that fly out with a keyboard, it means you can do the entire multi step action entirely from the keyboard.

On Fri, Jan 29, 2016, 18:24 S. Chris Colbert notifications@github.com wrote:

I dont see how a shortcut on a flyout item would be a useful thing. If the menu is already open, just click on it at that point.

It would also require some rearchitecting to associate a command with a particular palette.

[image: :-1:] on having shortcuts on menu items which represent flyouts.

— Reply to this email directly or view it on GitHub https://github.com/jupyter/design/issues/20#issuecomment-177015081.

[sccolbert]

You'll still be able to use arrow keys and enter to navigate a menu, open a flyout, and trigger a command. But binding a flyout to Ctrl+<char> seems weird to me, since you would never want to open a flyout unless the menu was open (unlike other application commands).

[cameronoelsen]

@sccolbert Talked to @ellisonbg and heard we are changing the architecture of the popup menu? Do you by chance have a screenshot or gif that shows the action that we are going to be recreating (Brian said it is similar to how an open menu reacts in the windows 10 start menu or something?)

[sccolbert]

@cameronoelsen yep, let me know when you can do a hangout

[fperez]

Just a thought, instead of keyboard combos (C-<char>) for the flyouts, I wonder if it's possible to expose single-letter navigation to an underlined letter for each menu entry? I think Windows works that way, and Qt on Linux certainly does, and I always found it a very efficient way to access menus: Alt-<char> to open menu, then <char> to jump to any option. You are limited to offering this only for entries that can be made non-conflicting in letters, but for those where it's possible, it works quite well, and doesn't require making those global shortcuts with modifier.

I don't know if this is viable in JS, so it's just a thought.

[sccolbert]

@fperez those are called mnemonics (just fyi).

[fperez]

Cool, good to know, thanks @sccolbert! Would that be viable?

[sccolbert]

It's viable. But we've got some other thoughts in general for handling menus. Let's have a hangout tomorrow if you're available, and I can catch you up on all the gritty details.

[Carreau]

Let's have a hangout tomorrow if you're available,

I'm going to say that no, adding a meeting to Fernando's agenda tomorrow is not reasonable, if I infer from the other meetings he already have. I can though try to attend the meeting and recap the thoughts for him.

[fperez]

Yes, unfortunately my agenda this week is horrid. In fact, if the Friday app state meeting happens, I'll have to miss it, as something has come up for my heretofore open Friday morning.

But carry on without me, and perhaps we can catch up next week, which is looking significantly better. No worries. Thanks!!

[blink1073]

Hi @cameronoelsen, am I right that you were working on a design for a link on the main page to point users toward "JupyterLab"?

[blink1073]

@cameronoelsen, an ETA on the link design would help us with our planning.

[cameronoelsen]

@blink1073 Sorry about the delay in response, haven't been in the office (midterms week) :( I haven't been told about the link for the main page but I can definitely get something mocked up and made within a week or two!

[blink1073]

No worries, good luck!

[sccolbert]

@cameronoelsen @ellisonbg fyi: the inviso links are down due to exceeding quota

[cameronoelsen]

@sccolbert Try again now :+1: Hopefully that should work

[sccolbert]

@cameronoelsen yep, thanks!

[cameronoelsen]

@sccolbert @blink1073 How's this look for the JupyterLab button?

[sccolbert]

@cameronoelsen nice! Can you squeeze in an "alpha" somewhere to indicate that this is completely bleeding edge?

[cameronoelsen]

@sccolbert I only added the word release after "alpha" so the containing button didn't have a large gap under the wordmark of JupyterLab. How's this look?

[sccolbert]

that looks great!