Notes on updating the user interface

This issue is a place I will keep notes about experimenting with new, different, other user interfaces for BinderHub. It was inspired by the fact that we use bootstrap v3 for the websites we serve and that updating to v4 didn’t “just work”. I was looking at upgrading bootstrap to see if we could get a small facelift without much effort.

Over time our UI has evolved step by step, now it has a lot of things that got “added on” and it looks like it is a few years old (which it is 😃 ) which means it looks “old fashioned” compared to modern websites.

I am experimenting with Material design (via Material UI). Mostly because it is a well documented, popular and powerful framework which has a lot of prebuilt items as well as strong opinions on what makes a “good UI”. Given I have no experience in making UIs following the advice of one of the biggest internet companies and their years of experience building UIs is a good place to start.

Words that are in my mind when thinking about binder: so advanced it might contain magic, clean, makes complex things easy, from the future.

Below a screenshot of an idea of a future index.html:

It is narrow with lots of space on either side, this works well on mobile and desktop. There is just one form filed where you place the link to “the thing” you want to run on binder. To power this we’d take code from the open-with-binder browser extension which figures out what mybinder.org link to construct if you are viewing a repo, a file in the repo (on github, bitbucket, etc). To get to the old form with all the options you’d click on “advanced”.

Below the form we have space for some text to explain what is happening or what Binder is. Though it is unclear to me how many people read the text/find it informative. Maybe we should instead have some clearly labelled links to help/documentation instead and use this prime real estate for a binder gallery or something else?

Next I will try and make a new version of the loading screen. Big constraint here is: we gotta keep the spinner.

[betatim]

I think we should move away from bootstrap v3 to at least v4 which is the current version.

From my experience building UIs and/or working with people who builds UIs: use a framework like Material or Bootstrap and its stock components. Then when you have a working UI start changing the theme. It means you solve almost all the accessibility, mobile vs native and browser compatibility problems. The alternative is to instead start from a pixel perfect design that was made in Sketch and then spend your life trying to make it actually work on all the browsers, platforms, mobile, etc

From a personal taste point I quite like Material design.

[nuest]

Notes from IRL discussion in Oslo: https://hackmd.io/teR1MefxSjW9mLJTLSSCjw