New website

[raimis]

New look and feel for openmm.org

[raimis]

Discussion: #44

[Yoshanuikabundi]

Hi @raimis! I have now officially started work, so I'll have plenty of time to finish up your great work and get it merged. Are you OK with me taking over? I might need write access to your fork...

Thanks!
Josh

[raimis]

Hi @Yoshanuikabundi

Response to yours and other comments:

Move the description at the top ("A high-performance toolkit for molecular simulation...") down to be part of the home page. This is telling the user what OpenMM is, which should be front and center on the main page. Currently that information is there, but in a much smaller font than lots of elements, so your eye skips over it.

The top description is more intended for the search engines than humans to read. I expect that the engines pick this text and use as a description. Thus, it is at the top and appears on each page.

Remove the carousel and display the four panels from it as four boxes, all visible at once.

The carousel should stay. The first page needs some eye catcher, otherwise it will looks boring. Ideal, we should use some aesthetically pleasing images, but for now it just the colors of logo. Also, we should add more cards with the advantages and features.

In the Quick Start section, remove the collapsing groups so all three sections are visible at once. Order them to give the most useful information as quickly as possible.

The video is pretty old by now, isn't it? What about adding more example scripts instead, or a carousel of example scripts?

I'm replacing all this with an embedded notebooks with a tutorial, which demonstrates how to install, run, analyze... The notebook can be opened in Google Colab. So, it is the quickest way to get a user trying OpenMM.

The CSS for the tutorials page could use some improvement. Line widths for prose are very long - line widths of <90 characters (70-80 preferred) are generally much more readable and less intimidating. This is admittedly a pet peeve of mine but I think it really does make a big difference. Code examples should probably be rendered in boxes or something that cleanly and clearly sets them apart from the prose, with flat background colouring.

These tutorials are a bit dated. I haven't even tested if all of them still work. In my opinion, the tutorials should go with the technical documentation. This website is for engaging and informing, rather than teaching.

Is there a way to provide links to particular tabs/sections and subsections? Taking a brief look at the rendered HTML it looks like there are no IDs or anything, but I've seen single page JS websites manage this before I think. Having to link to the whole website and give directions for navigation is a bit of an anti-pattern.

I tried to setup this with https://router.vuejs.org/, but it needs a bit work.

Can we use a transparent background for the favicon rather than a white one? This is an issue with the current site as well.

I'll leave this for you... :)

Are you OK with me taking over? I might need write access to your fork...

Sure! I think, the best way is to finish this PR with the least changes and deploy. The remaining imperfections and missing features can be fixed in separate PRs. In my opinion, the only remaining work is to finish the mini tutorial on the home page, which I can do in a few days.

[raimis]

Regarding the tutorial, it is hosted on my personal Gist (https://gist.github.com/raimis/1c83c413197410675e2c4271d9003f91) for embedding and Colab integration to work, though this is a bit inconvenient for development. After finishing, it will be transferred to OpenMM.

[peastman]

The top description is more intended for the search engines than humans to read.

Trust me, that isn't how search engines work! Putting the text on the home page is just as good as putting it in the header. Let's design the website for users, not for search engines.

The carousel should stay. The first page needs some eye catcher, otherwise it will looks boring.

There are much better ways of making the page look interesting. The animated carousel forces users to wait for text to appear rather than making everything visible at once and letting them read at their own pace. It also risks having text suddenly change while they're in the middle of reading it, which is very annoying. And for a significant fraction of the population (including me), any form of animation causes pain and significantly impacts the usability of the page.

I'm replacing all this with an embedded notebooks with a tutorial, which demonstrates how to install, run, analyze...

I think we're going in the wrong direction! The function of the home page is to tell users 1) what OpenMM is, 2) how to get started using it, and 3) where to find more detailed information as simply and directly as possible. Aside from the fact that an embedded notebook makes for a really ugly page, it also does a bad job of those goals. Someone wants to learn what OpenMM is, and they're immediately confronted with a wall of text describing how to install it in colab?

[peastman]

We also need to keep in mind how the site will appear to anyone who is visually impaired. For example, putting text in an animated carousel will break screen readers.

[Yoshanuikabundi]

I'm replacing all this with an embedded notebooks with a tutorial, which demonstrates how to install, run, analyze... The notebook can be opened in Google Colab. So, it is the quickest way to get a user trying OpenMM.

I think we're going in the wrong direction! The function of the home page is to tell users 1) what OpenMM is, 2) how to get started using it, and 3) where to find more detailed information as simply and directly as possible. Aside from the fact that an embedded notebook makes for a really ugly page, it also does a bad job of those goals. Someone wants to learn what OpenMM is, and they're immediately confronted with a wall of text describing how to install it in colab?

Using Binder rather than Colab might be a solution to this. We cache the environment so that it loads quickly (much, much faster than installing via Conda) and doesn't have to include installation instructions, and we could convert the notebook to static HTML and embed it directly in the home page (or wherever). That way we can use our own theming and CSS, it doesn't have to look like a notebook at all. When a user wants to run their own code, they click a button that loads up the Binder notebook and have a fully installed system ready to go.

I'm working on something similar for OpenFF. You can see here that static web pages made from notebooks can render interactive widgets if prepared properly. Having an interactive 3D model of a prepared system ready to simulate might be more exciting than installation instructions :)

The carousel should stay. The first page needs some eye catcher, otherwise it will looks boring.

There are much better ways of making the page look interesting. The animated carousel forces users to wait for text to appear rather than making everything visible at once and letting them read at their own pace. It also risks having text suddenly change while they're in the middle of reading it, which is very annoying. And for a significant fraction of the population (including me), any form of animation causes pain and significantly impacts the usability of the page.

For what its worth, I agree with both concerns here - can it just stay still until the user clicks on it? It's very pretty and modern and its a good way to display little blurbs about how great OpenMM is but that doesn't mean it needs to move on its own. I suspect, but don't know, that screen readers will be smart enough to see the text in the carousel, at least of the first blurb - it's all in the DOM, JS is just changing the display option.

Move the description at the top ("A high-performance toolkit for molecular simulation...") down to be part of the home page. This is telling the user what OpenMM is, which should be front and center on the main page. Currently that information is there, but in a much smaller font than lots of elements, so your eye skips over it.

I agree that the font could be a little bigger and maybe have some more contrast, but I don't see any need to move it to the main page - I think that would actually de-emphasise it.

Sure! I think, the best way is to finish this PR with the least changes and deploy. The remaining imperfections and missing features can be fixed in separate PRs. In my opinion, the only remaining work is to finish the mini tutorial on the home page, which I can do in a few days.

Sounds good to me! I think where it is now is already a big improvement over the current site and we can finalise the details after deployment.

[peastman]

Take a look at the modified version I created in raimis#1.

[raimis]

Using Binder rather than Colab might be a solution to this. We cache the environment so that it loads quickly (much, much faster than installing via Conda) and doesn't have to include installation instructions, and we could convert the notebook to static HTML and embed it directly in the home page (or wherever). That way we can use our own theming and CSS, it doesn't have to look like a notebook at all. When a user wants to run their own code, they click a button that loads up the Binder notebook and have a fully installed system ready to go.

I'm working on something similar for OpenFF. You can see here that static web pages made from notebooks can render interactive widgets if prepared properly. Having an interactive 3D model of a prepared system ready to simulate might be more exciting than installation instructions :)

I agree, this is a better technical solution. I made a note (#25 (comment)), so we won't forget.

Regarding the installation instruction, it should be part of the "experience" at least for the first tutorial. We want to people to install OpenMM on they machines. They cannot do much with Colab or Binder.

[raimis]

It is time to wrap up this PR:

• The website is in a working state and ready for deployment. All the reported major technical issues have been fixed.
• Further improvements and redesigns could be done after. No more major changes here.
• If no objections will be raised during the board meeting, the new site will be deployed after.

[jchodera]

@raimis : Can you remind us where the link to the preview is? We can quickly review this before our meeting tomorrow and make the final decision then.

Thanks so much for all the amazing hard work you've put into this!

[raimis]

@jchodera https://raimis.github.io/openmm-org/

[jchodera]

@raimis : Can we add links to the various labs on the "Development" page? e.g. have the text "Chodera lab" link to http://choderalab.org?

Also, is there some way to directly link the tabs with an anchor? If we wanted to point someone to, e.g., the benchmarks page, how would we do that?

[jchodera]

Let's also get rid of the text "Part of the Omnia suite of tools for predictive biomolecular simulation." at the top!

[peastman]

None of the issues I raised about the home page have been addressed. I don't think it's close to being ready to deploy yet.

Let me describe some important principles of web design that are relevant to this page. That will let us put the discussion on a more objective footing and clarify the problems I'm trying to point out.

1. When you first load the page, where do your eyes immediately go to? All else being equal, it tends to be the top left corner just below the navigation bar, but graphic design can be used to draw your attention somewhere else. Wherever your eyes first go, that point is the most important location on the page. The most important information on the page should be at that location. If your eyes immediately go to one place, but the most important information on the page is somewhere else, that's a problem.

2. Whatever information the user is looking for, they should find it within five seconds. Longer than that and they start to get impatient. Perhaps they came across a reference to OpenMM and want to learn what it is. Within five seconds, they should find a description of what OpenMM is. Maybe they already know what it is and want to get it. Within five seconds, they should find either the installation instructions or a link to the installation instructions. Perhaps they're looking for documentation. Within five seconds, they should find a link to the documentation.

3. All the most important information should be "above the fold", that is, immediately visible without scrolling.

4. Anything above the navigation bar is invisible. People think of the navigation bar as the top of the page and subconsciously assume anything above it is unimportant. If a page element is above the navigation bar, someone can diligently search the entire page and never find it.

5. Less is more. The way you create a clean, usable page is to remove everything that's extraneous. That's especially important for the home page. Other pages can have walls of text. The home page should have only the most essential information, along with easy to spot links to other pages where all the details can be found.

6. Form follows function, never the other way around. The goal of graphic design is always to improve usability. It should never impede it.

Consider the current design in light of those principles. When I first load the page, most of the content area of the page is taken up by a colored box talking about... custom forces? What does that have to do with the information most users are looking for? Below that is a button labeled, "Run In Colab". Huh? Any user coming to this page is going to be very confused. Is OpenMM an online program that you run in Colab?

Other than those two elements, all you see is the navigation bar, a bunch of space above the navigation bar that you ignore, and a huge amount of empty space surrounding the colored box.

So the user scrolls down looking for more information, and the next thing is some text labeled, "Your First OpenMM Tutorial". They weren't looking for a tutorial, but they start reading hoping for useful information. It immediately dives into talking about Colab again. And conda. And DHFR. They still aren't even sure what OpenMM is! They scroll some more, and are confronted with a huge block of conda output listing packages it's installing. They skim further, seeing lots of small blocks of code, program output, a graph of something, all mixed in with a lot of text. They aren't sure what to look at or where in all that text the information they want is likely to be found.

We really need to rethink the entire content of the page. That just isn't what a home page is for.

[raimis]

@jchodera

Can we add links to the various labs on the "Development" page? e.g. have the text "Chodera lab" link to http://choderalab.org?

The link already exists. If you click an entire tile "Chodera lab" of it will bring you to http://choderalab.org.

Let's also get rid of the text "Part of the Omnia suite of tools for predictive biomolecular simulation." at the top!

Done!

[raimis]

@jchodera

Also, is there some way to directly link the tabs with an anchor? If we wanted to point someone to, e.g., the benchmarks page, how would we do that?

Regarding the routing/anchors, @Yoshanuikabundi already pointed out this (#45 (comment)). The website is just one HTML page with Vue (https://vuejs.org/) doing all the interactive stuff. The routing/anchors could be emulated with Vue Router (https://router.vuejs.org/), but there is an incompatibility with the Vuetify (https://vuetifyjs.com/en/) navigation component. So, I cannot fix this issue quickly.

I think, we should leave this for a separate PR.

[raimis]

@peastman

I appreciate your effort (#45 (comment)) to make the website perfect. If OpenMM were a multi-billion dollar company creating a website for millions of users a day, it would make sense to do all the A/B testing and find out where people are looking and what they want to find. Otherwise, it is just speculation and matter of opinion.

I think, our effort could be spent more productively than arguing about the website design. Let's finish this PR and let @Yoshanuikabundi to work on further improvements.

[peastman]

If OpenMM were a multi-billion dollar company creating a website for millions of users a day, it would make sense to do all the A/B testing and find out where people are looking and what they want to find. Otherwise, it is just speculation and matter of opinion.

I'm finding this increasingly frustrating. I didn't suggest any kind of A/B testing, nor am I trying to make a perfect website. I'm trying to create a website that is not dramatically worse than our current website, which the current draft is. Nothing I said is speculation or opinion. It is well established, widely accepted principles for good web design. Do a search for "principles of web design" and you will find countless pages describing exactly these principles. Furthermore, I sent a PR weeks ago with a greatly improved, much cleaner home page. You neither merged it, offered comments on it, or even acknowledged the existence of it in any way. That is not acceptable.

We need to work by consensus and collaboration. Ignoring people's comments that you disagree with is not how we work. Dismissing thorough, highly detailed discussions with an off-hand, "I we were a multi-billion dollar company," is not how we work.

[peastman]

Based on the discussion at the meeting today, I created a new PR (#51). It starts from this PR and then changes the home page. You can try it out at http://peastman.github.io/openmm-org/.

[peastman]

This is superseded by #51.