User interface tweaks on mybinder.org

We have been making some small tweaks to the UI of mybinder.org. This is based on feedback from people who were new to the service. The aim being to make it easier to “get it” when using the service for the first time.

If you notice something and think it is good (or made things worse) please let us know! If you have other feedback regarding the UI for new users please also post here or tell your friends to post here.

One of the new things is that we have small help informational messages scroll rotate through as you are waiting for your binder to launch. This is the brainchild of @choldgraf :tada::mortar_board:. We also open the log window by default if your binder is building.

The goal of both was to make it more obvious that something is happening and help pass the time. The feedback we got was that several people thought the launch had failed/mybinder.org was down with the old setup. Let’s see how this goes.

6 Likes

Do the build logs only open automatically if there’s no nbviewer image? They’re not opening for me and I’m wondering if that’s the reason

1 Like

They should open automatically if a build is running, but stay shut if we are just launching. Sounds like you found a bug.

Just tested it and for me it takes a while to open. That delay wasn’t there when deploying locally, presumably because everything was much faster. So if you start building a repo where you are confident it needs a build I’d wait 5s or so and see if it pops open then.

Maybe we should just always open it?

1 Like

Yes, I think so. The “Found built image… Launching” is nice to see.

Maybe also make it look a little less scary-looking, but this is another and less important topic.

Otherwise I like the changes very much! A couple of the explanations I wrote here for our users are now taken over by this new UI :slight_smile:

2 Likes

What makes it less scary? Not black on white? Different font? Less text? If we can generate some ideas we can try them out (or know we need to get some professionals in :wink: ).

I was afraid you will ask this ;-). I don’t really know, tbh!

The text output is too important for repository maintainers - I really need to see what’s going on after an update, so this cannot change (or we need to find a way to get access to the logs)

Yes, I was thinking along these lines. Terminals are scary for some, and currently it looks like very special and does not fit into the page. If it is open per default (which it should be), the log could be more “integrated” in the page, and show that something is working in the background but that the user can’t really do anything about it. If an error occurs, a message could show up and say: “contact the maintainers of the repository” or something similar.

1 Like

I was launching a built repo, no bug :blush:

Using a different colour than red for messages that are not an actual error. A lot of new users get nervous when they see a load of red and it’s most likely just pip installing stuff.

2 Likes

Thanks for the suggestions and ideas. Sorry for always asking the follow up of “do you have a suggestion” :slight_smile:

What do you mean with “better integrated”? Same background colour so it looks more like the rest of the page instead of a separate UI element?

I’m wondering if we could print the logs directly onto the white background of the page. Or somehow find a UI idea that conveys “this is stuff that is in the background, look at it if you want but it is on a lower layer if the page so you can’t interact with it”

Based on the suggestions I thought: what if we put a link like “file an issue with the repo owner with the full log in it” on the page when the repo fails to build? Not sure we can pre-fill GitHub/Gitlab.com issues via a link but we can find out.

Trying to change the colour from red to something less alarming is a good point. I’m not even sure why it is red, on my local terminal repo2docker doesn’t print in colour at all :-/

I wonder if it’s a CSS/HTML rendering thing then? :thinking:

In the UI department, it is not obvious that if users want to start JupyterLab, they should select URL and enter “lab” in the text box next to it.

Also not obvious with URL selected:
“lab/tree/notebook_name.ipynb”
will launch the selected notebook in JupyterLab

How did I guess at that? I didn’t, but a peer deduced it from right-click on the notebook and selecting “copy shareable link”! :grin:

We just happened to be playing around with generating the binder badges in our internal version trying to get both the classic notebook and the JupyterLab version of the badges. We were wondering how to start a notebook in JupyterLab, and not just get the empty pane.

In UX land, it would be nice to drop the requirement that requirements.txt be present. We did that. We felt that for some really entry-level or first-timer with a really simple notebook, it is awkward to force the existence of an empty file to make binder launch.

I like what you did though! Kudos.

We also need to make the docs better or link more prominently to them as the method is described there Configure the user interface — Binder 0.1b documentation :-/

Can you explain a bit more what you mean? An empty (as in no config files) repository is a “valid” repo that you can launch and it’ll give you the notebook interface.

Ha. OK. I guess the docs are good enough. (If I had found them.)
All my answers were there, including nteract. I will have to try that out.

Aha. The link to the docs is at the bottom of the page. Maybe you have too much empty space before the form. When I first see the form, I have to scroll to even get to the bottom of it, which is pretty much where I stop scrolling.

OK. Sorry. Was that always the case? I was certain that the file had to be there even if there was nothing in it.

Thank you @betatim

I think that is pretty good user feedback to motivate making them easier to find :slight_smile: (Also I tend to get lost in our documentation when searching for stuff so I don’t imagine others have an easy time finding things … so much to do, so little time)

I saw this update in action when I was making a new binder today and I really like it! :sparkling_heart:

1 Like