User Interface

[mforbes]

I don't see another discussion about user interface ideas/issues outside of explicit bugs that should be reported, so I have started this discussion.

Some recent interactions watching students new to CoCalc have raised some of the following insights/suggestions:

• Sometimes clicking buttons does nothing - especially the "Explorer" button/tab on the left. This confuses new users who expect this to take them home, or to maximize the explorer view. If nothing should change because the view is already correct, perhaps some section of the UI could flash or similarly to direct the users attention that everything is already displayed? (I need to think more, but I think that maybe clicking on the Explorer tab multiple times should take the user to the top level? The breadcrumbs would allow users to easily navigate back, if enabled.)

[williamstein]

especially the "Explorer" button/tab on the left.

This complaint doesn't make any sense to me, so I'm pretty sure I am misunderstanding it. Can you elaborate with screenshots or something? The reason it doesn't make sense to me is that clicking the explorer button displays the explorer tab, highlights the indicator that it is the current tab, and shows the file listing. Clicking it again shouldn't do anything, any more than clicking a file tab or tab in a browser twice doesn't do anything else.

[haraldschilly]

I fully understand what you mean. There is a mode, where only these thinner flyouts are toggled: you can switch to that behavior via the mode selector at the bottom of that left vertical bar. In that mode, a click always causes an action, because it is a toggle. This is certainly much more the expected behavior and maybe you can field test for us? In that mode, maximizing to the full view is either done by the "full screen" icon next to the close X, or by shift clicking on that vertical button. Overall this is right now a mix of old and new. We don't want to confuse existing users too much right now.

[mforbes]

Okay here are some more details about the actual use case.

I was trying to tell a student how to copy an assignment from a folder ~/Assignments/Assignment_05 to their workspace. I told them to use the explorer on the left to go to the home directory. They already had the explorer open, but were in the wrong directory, so nothing happened happened when they clicked the explorer icon ("I'm clicking it, but nothing is happening"). Then they tried clicking the Home icon right above the Explorer (which obviously does not work). They could not figure out how to get back home until I showed them the smaller, but identical home icon to the left the the breadcrumbs.

I think a few of issues are at play:

1. Non-locality. To navigate, one needs to focus on several portions of the screen and it is not at all obvious for new users where they need to direct their gaze (hence my suggestion that maybe something flash if the user repeatedly click a "tab". Another option might be to pop up a help message whenever a user is doing redundant things.)

2. General complexity of the interface. (I will discuss some ideas below.)

3. Duplicate visual elements like icons with different meanings (i.e. the three home icons below, two of which mean one thing, but act differently, and the other with a totally different meaning)
   

4. Unfamiliar UI behaviour. In this case, I think the user expected the explorer tab to pop open a dialog they could use to navigate with. For example, I find the behaviour of the little triangles very unintuitive, even thought I often like the results once I understand them.

5. Inconsistent visuals. A big one here I think is that there is no continuity between the tab buttons and the content they represent. For example, the project tabs at the top are "a part of" the project window - the content flows from the page up into the selected tab folder and the other tabs are visually "behind", hidden by the current tab (see below)

   

   In contrast, the tabs on the left have no visual continuity with the content they represent on the right. They look more too me like they will pop out pallets of tools (especially with the arrows) and users must learn that the blue text color and blue bar on the left mean that this is part of the whole page at the right.

   

   I think this is why the student thought that the Explorer icon was an action button.

I doubt the following was affecting the student, but as I explore I notice:

• Active: The Active tab is a button that pops out and then closes a drawer. Very easy to figure out by clicking it a few times what it does. The triangle seems to do exactly the same thing, so it is just indicating that the Active button indeed is a drawer. The active file does not change.
• Explorer: The Explorer tab is very different. It might totally change the main page, or it might do nothing. In the case of changing the main page, there is no obvious way to "undo" this action (perhaps Active should do this... see below). Now the triangle opens a drawer, but if the user thinks that they drawer was opened by the button because they clicked it by mistake, then the drawer might seem like it can't be closed.

I am not sure what to suggest, but I see two possible options:

1. Everything behaves like the Explorer tab. The tabs should be strongly visually connected to the content, and the Active tab should take you back to the file you were working on before you clicked Explorer for example. (Probably, when you start working on a file, the Active tab should become selected again.)

2. Everything behaves like the Active tab in the sense that these buttons are no longer "tabs" but are more like pallets/panels/drawers. In this case, clicking a button twice should take the user back to the state they were in prior to clicking the button. These "drawers' should somehow "slide out" and then "slide in" making it visually clear that they are "above" one's work. In this case, the Explorer tab would probably not change the main content, but would only open and close the drawer.

Are the persistent "triangle drawers" really needed? They act like pallets that can remain open while working on other documents, but, I don't see much use in keeping them open in most cases. If you want to monitor processes etc. while working, you can open a new window. (It might actually be nice to be able to rip off tabs into new windows... no idea how hard that would be.)

Another thing that is confusing now is that it is not clear what "tabs" are any more. I thought that "Explorer", "Settings" or "Processes" etc. would also appear up top as open tabs, but they behave as drawers even though the look like tabs.

[williamstein]

Are the persistent "triangle drawers" really needed? They act like pallets that can remain open while working on other documents, but, I don't see much use in keeping them open in most cases. If you want to monitor processes etc. while working, you can open a new window.

You an easily turn them off. Maybe they should be off for new uses by default?

(It might actually be nice to be able to rip off tabs into new windows... no idea how hard that would be.)

Shift+click on file tabs kind of does that, and so something similar could work for those.

[williamstein]

You are right in that it would be very nice if clicking on these left tabs (especially when there is no flyout panel), did something visual to act like the top tabs:

e.g., in the above, why "Find" should have the border removed to the right of it, like any other tab, and the background color should change.

[mforbes]

Ah. I did not realize the power behind the "Vertical bar layout" button! I am not sure which should be the default, but th.e mixed "Full pages and flyout panels" should definitely not be the default as it conflates the two behaviours.

So everything exists almost exactly as I described... So I guess what is really needed is a better way for users like me to figure out what is available. Maybe a little video tour with each UI feature release (and collect these in a help page for new users).

[williamstein]

My plan has always been to make the Explorer an application like any other (just like Jupyter), just as is done an literally all operating systems. There's many things not implemented (e.g., directory tree browsing). Sadly, we don't have the time or resources to actually implement anything like this unless cocalc is a lot more successful. That said, I appreciate the design discussion, which takes a lot less time.

Regarding "In contrast, the tabs on the left have no visual continuity with the content they represent on the right.", you might remember that until pretty recently that's exactly how things were. Instead of tabs on the left (the action bar), there were five tabs across the top for Explorer, New, Log, Processes, and Settings. The visually flowed in the same way as other tabs. This summer we changed all this to make things better (and consistent with how VS Code and JupyterLab work), but it's not all clear that it didn't make things much more complicated, confusing and worse for a lot of users. E.g., VS Code also lacks that visual flow for side tabs:

[mforbes]

Hmmm. My inability to direct students might reflect the fact that I don't use JupyterLab or VS Code:-)

P.S. I added a bit more to the previous discussion. I was indeed recalling the previous layout subconsciously.

[williamstein]

JupyterLab has this same UI problem. JupyterClassic (and to some extent Colab) have a much more obvious UI because they don't try to be IDE's, whereas VS Code and JupyterLab are both trying to be full fledge IDE's. There's some users that don't appreciate JupyterLab so much compared to Jupyter Classic / Colab. For better or worse, CoCalc has ended up going somewhat in the "full IDE" UI direction recently... It's more powerful, but definitely significantly more complicated.

[mforbes]

I see. So the items on the left are replacing the application menu items that usually appear along the top of the application, but which is not available in a browser. I will think a little more in this direction.

[mforbes]

UI Complexity

Here are some random thoughts about the UI complexity. (Will update as I notice more.)

• Tabs within tabs (within tabs). Not sure what to suggest, but a serious complication is the number of levels of tabs. For most people, this is probably at least 3 - browser tabs, project tabs, file tabs, with or without bookmarks inserted in between.
• What does this "plus" do? I can't figure out it. I thought it would create a new tab of my choosing.
  

Explorer

• Some features seem uneccessary.
  • Upload: Can drag and drop just work? This would make the button redundant.
  • ** Home**: Is the upper left home button used much? I don't see much point in that page, and think that it might make more sense for this to actually take the user to the top level of their directory. I suppose it could become much more useful in the future.
  • Hidden files: these buttons are unfamiliar and usually in a "view" menu. They are probably only going to be clicked once if users want to see their hidden files, then left on. They are important though. Maybe they could be put at the bottom of the file listing so someone scrolling to find their hidden files will see "Show hidden files".
    

[williamstein]

Not sure what to suggest, but a serious complication is the number of levels of tabs.

We may replace the projects with a single dropdown menu, where you can select exactly one project to show. You can't see state info about the project tab anymore, and switching between projects is twice as many clicks, but it removes a row of tabs.

Can drag and drop just work? This would make the button redundant.

It has already worked for like 8 years, with both individual files and folders. That absolutely does NOT make the button redundant because there are devices like phones and ipads...

What does this "plus" do?

It shows the file explorer, which is the way to select or create a new tab (by clicking on a file).

Home

I don't like the home thing at all either. Maybe it'll get replaced by the "Active" panel.

"in a "view" menu."

The file explorer is not a normal application and it basically doesn't have any menus. If it were a normal application it would automatically have menus. I wish it were. It makes no sense to prioritize rewriting the explorer at this point. It's fun to talk about though.

[mforbes]

All makes sense. I have never used CoCalc on a phone... need to try that! I will keep adding to the discussion if I have ideas, help or issues if there are any major stumbling blocks. Thanks as always for providing CoCalc - I just want everyone to be able to and want to use it!

[williamstein]

I have never used CoCalc on a phone... need to try that!

Our meager goal with phones/tablets is mainly: "don't make things completely impossible to do". An upload button is a perfect example of this; drag and drop between apps is not very easy on phones (they show exactly one app at a time), but the upload button works very well. So just getting rid of it would make doing certain things on cocalc on a phone go from "it sucks" to "it is impossible".

[williamstein]

In contrast, the tabs on the left have no visual continuity with the content they represent on the right.

I was just using gmail, and noticed that they also have the same design as cocalc, with these icons vertically on the left, and also on the right. In all cases there is also a similar lack of visual continuity. Maybe there is a good explanation for this design choice?

Similarly antd "Ant Design" has a design like this where there's a bunch of items on the left you can select, and that changes what is displayed to the right, but there is no "visual continuity" like for tabs: https://ant.design/components/icon

@haraldschilly do you have any thoughts on this?

[mforbes]

It seems that the "Button" rather than "Tab" design is getting more popular. I just noticed that even my browser (Brave) now no-longer has continuity. That being said, Gmail and Ant Design do a couple things that make this work:

1. There is a clear visual marking indicating which button is selected. Both the button is highlighted and the icon changes from light to dark (depending on mode). CoCalc's underline is much less clear in this regard.
2. The name of the button is clearly listed as a large header in the main page. (Notice that Meet is repeated twice in the Gmail interface as is Icon in the Ant Design case.) *(Gmail is not very consistent with this though).
3. The "page" is a distinct element, not bleeding in with anything else. That might help (not sure).

I think 1. and 2. are important.

[mforbes]

Some additional notes from class today:

• Students are still trying to use the upper left Home button to get home in the explorer.
• I can't seem to find a way to remove the output for cells. I thought there used to be a way to do this. (It is under the keyboard shortcuts.)
• Today I tried to have students run an interactive explorer in their projects using HoloViews, which required them to launch either Jupyter Lab and/or the Classic Jupyter Notebook interface. It was very hard to describe to them how to do this.
  • The easiest I found was to have them open the folder in Jupyter Lab. But if they click through to the notebook first, it becomes very challenging. There used to be a way to view an open notebook in Classic Notebook. Does that exist somewhere?
  • Alternatively, is there a way I can embed a button/link in a notebook that will open that notebook in Classic/Jupyter Lab, that also works when they copy the file to their project? (I.e. I need relative links). I though I found a way in the past, but can't find this discussion.
  • By the way - working with a file in Jupyter Lab is quite challenging if you accidentally have it open in a browser tab somewhere else since saving changes in each one overwrites the other. Not sure if it is feasible, but it would be nice if there was some way to have opening a file in Classic or Jupyter Lab somehow invalid or close other tabs etc. (Probably very hard.)

[williamstein]

Students are still trying to use the upper left Home button to get home in the explorer.

Maybe I should just change it to be a shortcut to show the Home directory via the Explorer by default (with the idea of making it eventually configurable?).

I can't seem to find a way to remove the output for cells. I thought there used to be a way to do this. (It is under the keyboard shortcuts.)

Search for "Clear" in the Help search box:

The easiest I found was to have them open the folder in Jupyter Lab. But if they click through to the notebook first, it becomes very challenging. There used to be a way to view an open notebook in Classic Notebook. Does that exist somewhere?

Yes, search for "classic" in the Help search:

Also via the command palette.

It changes this setting in account preferences then opens the notebook again:

Alternatively, is there a way I can embed a button/link in a notebook that will open that notebook in Classic/Jupyter Lab, that also works when they copy the file to their project? (I.e. I need relative links). I though I found a way in the past, but can't find this discussion.

I don't think that is possible to do as a relative link. There is an absolute link in terms of the project id for both. See #7306

[mforbes]

Thanks: I somehow did not realize I could search all menu options in Help.

Thinking a bit further, it would be nice to be able to somehow mark these notebooks (that use HoloViews or other technologies not yet supported by CoCalc) to open in one of the Jupyter's by default (with a nice warning about collaborating issues). Or possibly, even a link when something interactive fails:

The output of this cell cannot be properly displayed in CoCalc's collaborative notebook yet.
Perhaps you might like to try opening it in Jupyter Lab or a Classic Jupyter Notebook?
Warning: This will allow you to use all interactive features of Jupyter, but will break collaboration... etc.

[williamstein]

@mforbes I just made it so the Home Icon in the upper left just shows the home folder and closes any flyout panels:

d786b66

That's what your students expected. It was just a quick change, but I think it's less confusing then showing some random ui components, which is what now happens.

[mforbes]

Thanks. I don't see this live yet, but that sounds like a good intermediate step.

One other thing I noticed: if you have an empty search, the Explorer changes its look in an extreme way. I was confused by this for a bit. It might be nice if clicking on the Home or Explorer icons cleared the search form. Not sure though: escape does work, and if you actually read the screen it is explained. Maybe just have the "Home" button restore everything.

[williamstein]

It might be nice if clicking on the Home or Explorer icons cleared the search form.

That's a great idea!