MIT-LCP / physionet-build

The new PhysioNet platform.
https://physionet.org/
BSD 3-Clause "New" or "Revised" License
56 stars 20 forks source link

Switching to a dynamic, information-rich homepage #2061

Open tompollard opened 1 year ago

tompollard commented 1 year ago

We should consider switching to a dynamic, information-rich homepage to replace the big grey image.

The goal would be to actively present useful/interesting information to our users, rather than making them dig around.

We could highlight:

mscanlan-git commented 1 year ago

Definitely an interesting project that I've been looking into. I'm not sure what layout we're looking for, but the image should be shrunk as it takes up a lot more screen real estate. Shrinking the image by 50% makes everything look a lot better:

Screenshot 2023-09-21 at 3 19 34 PM

(I also removed the down arrow we had, no need for it if things are going to be visible on the same page)

Not sure what we want to do with the columns. If we want to leave them as-is (maybe set a height cap so they're equal size then add things below them), change them to rows, etc. Lots of potential options that can be done.

briangow commented 1 year ago

Thanks @mscanlan-git ! Just a couple random thoughts. I don't like the break between the part with the dark image as a background and the columns below. This isn't as much of a problem on the live site because the dark image takes up the entire screen. I think everything should have the dark image as a background or we should remove the dark image entirely. The latter is probably a better choice. In this case, to keep in theme with the content below, perhaps you could use the same light grey outline for the top section.

tompollard commented 1 year ago

Yep, thanks for thinking about this Michael! My preference would also be to remove the image altogether. A good starting point might be to look around at other websites for inspiration. A few starters:

It's interesting that the landing pages for these sites split broadly into two different approaches:

  1. GitHub, Reddit, HuggingFace: fairly busy, high-information, customised to the user.
  2. FigShare and Dryad: simple, large image, no customisation to the user (similar to PhysioNet).

As a user, I prefer type 1.

mscanlan-git commented 1 year ago

Thanks for your feedback @briangow and @tompollard ! I think if we were to use inspiration from those websites, going with type 1 would be best considering the type of content PhysioNet publishes and the audience interested in said content. I will mess around with some potential layouts and see what makes the most sense and update when I can.