search

jupyterhub / binderhub

Run your code in the cloud, with technology so advanced, it feels like magic!
https://binderhub.readthedocs.io
BSD 3-Clause "New" or "Revised" License
2.56k stars 390 forks source link

Notes on updating the user interface #880

Open betatim opened 5 years ago

betatim commented 5 years ago

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:

Screenshot_2019-06-17 My page(1)

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.

arnim commented 5 years ago

Thanks for sharing this. Next month (15 Jul onwards) we will have a meeting with our UI team and discuss how we can improve the look & feel of our deployment. I take from your post that "bootstrap v3" is not set in stone.

betatim commented 5 years ago

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.

betatim commented 5 years ago

related to #844

betatim commented 5 years ago

https://gist.github.com/betatim/abf4d05820a5abb5fe6ea17d1747e02f is the "all in one" HTML page I made to create the screenshot shown above.

nuest commented 5 years ago

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