rdmkit icon indicating copy to clipboard operation
rdmkit copied to clipboard

Start of a better landing page

Open bedroesb opened this issue 3 years ago • 16 comments

I would like to use this PR to try out some stuff

:star2: Live preview here :star2:

--- Update ---

Screenshot from 2022-07-22 16-11-07

The new landing page is starting to get its final form:

  • Shorter intro blurb text
  • Prominent search bar in the middle of the page
  • Tiles with icons for each section that link towards the section landingpages
  • No side navigation and screen wide graphics, give a more professional feeling
  • Section landingpages with tiles for each subpage (like on the tools assembly)

There is still some stuff to be done:

  • [x] Better and fresh looking icons
  • [x] Reuse of the icons in the section landingpages
  • [x] Description for every page so it can be displayed in the tiles on the section landingpages
  • [x] Better looking tiles on the section landing pages so they look less heavy
  • [x] Incorporate feedback on the titles of the landingpage

bedroesb avatar Mar 02 '22 17:03 bedroesb

Thanks for that @bedroesb! Here's my say FWIW:

  1. I've already noted my opinion of the text at the top. For me, it's a bit too long.
  2. I don't think we need the button beneath it ("Site overview"). There are two reasons:
    1. I think you'd use a button like that if there was a danger of the "illusion of completeness" i.e. when it's not clear from the design that you can scroll down the page. This is most common on designs with huge hero images at the top that take over the entire screen. People don't realise there is more beneath. In this case, I think that for most screens it's pretty clear there is more beneath. It would be clearer if the text was shorter, of course ;o)
    2. Where does "Site overview" go? What is the "Site overview"? I'm guessing it starts with the data life cycle, which would be easier to see if the button wasn't there.

Hope that doesn't sound too negative! The menu system is looking a lot clearer now.

martin-nc avatar Mar 03 '22 11:03 martin-nc

@floradanna do you feel like making the sentences a bit shorter?

bedroesb avatar Mar 10 '22 10:03 bedroesb

Thanks Bert for this :) I like the idea!! Changing the big text to bullet points I think it makes it easier for users to understand what is the RDMkit for. Also, I think it is nice to have a arrow or something to show that we have more content underneath. Maybe 'site overview' is a bit confusing because it seems that it will take to another page but an arrow would be good.

Also I think it would be great to have mor visuals in the landing page (and maybe in the future landing pages that we will have in the different sections)

lauportell avatar Apr 11 '22 15:04 lauportell

@elixir-europe/rdmkit-editors

Hello editors! I described a bit the current stage of the development at the top of this pull request. Feel free to write feedback here, and if you want to contribute to the descriptions of the pages please add them to this spreadsheet

I also created a google doc to discuss the icons, feel free to add others + their source

bedroesb avatar Jul 22 '22 14:07 bedroesb

Feedback landing pages:

  • I don't think we need to add the name of the page so many times. We have the title, then What is in X and in the description again mentioned 'In the X section'. I think the title is enough and then we can have a title saying 'What's in this page?' or something similar and then 'In this section,...'.
  • Harmonize the intro of each section. Choose between 'Here, you will find:' and 'You will find:'
  • Since we mention the related pages and the training, should we mention the links to the DSW and FAIRcookbook links as things that you will find in the pages?
  • I have added feedback for the text in each section here: https://docs.google.com/document/d/1yMd7kD2lOnM3cQVUh1IF5g9GQ6E_aRFuaVS3_tto9nE/edit?usp=sharing

lauportell avatar Jul 25 '22 15:07 lauportell

Screenshot from 2022-07-26 17-00-02 This could also be an option, with gray tiles

bedroesb avatar Jul 26 '22 15:07 bedroesb

As discussed in the past, it would be nice to let the icons appear on the corresponding landing pages of each secion: Screenshot from 2022-08-03 13-56-54 This is the easiest and best solution I could come up with for now :)

I also tried to look into better icons, but I am a bit disappointed in The noun project. Querying is a pain, and finding icons that fit together is even worse. The website is really not made to look into big collections either. @martin-nc would the hub want to pay for a font awesome pro account? This is still the most convenient way to have icons that fit together in all thicknesses + is the biggest collection I could find on the internet too:

Screenshot from 2022-08-03 13-57-13

(this is with some screens-shotted icons from font-awesome and a home made one for the wheel)

All the discussed changes can be seen here: https://bedroesb.github.io/rdmkit/

bedroesb avatar Aug 03 '22 12:08 bedroesb

As discussed in the past, it would be nice to let the icons appear on the corresponding landing pages of each secion: Screenshot from 2022-08-03 13-56-54 This is the easiest and best solution I could come up with for now :)

I also tried to look into better icons, but I am a bit disappointed in The noun project. Querying is a pain, and finding icons that fit together is even worse. The website is really not made to look into big collections either. @martin-nc would the hub want to pay for a font awesome pro account? This is still the most convenient way to have icons that fit together in all thicknesses + is the biggest collection I could find on the internet too:

Screenshot from 2022-08-03 13-57-13

(this is with some screens-shotted icons from font-awesome and a home made one for the wheel)

All the discussed changes can be seen here: https://bedroesb.github.io/rdmkit/

I like the new style of the icons and having the icon in each page!

lauportell avatar Aug 03 '22 13:08 lauportell

I updated all the pages with the feedback/descriptions that were proposed in the documents:

You can still preview it here

bedroesb avatar Aug 08 '22 08:08 bedroesb

@bedroesb

would the hub want to pay for a font awesome pro account?

Possibly, but I'll have to wait for the right people to be back from holiday. it could be that we can get an account for the main ELIXIR site and use that.

martin-nc avatar Aug 09 '22 13:08 martin-nc

@lauportell out of intrest I tried to come up with a way to display the DSW and FAIR Cookbook links on the tiles: https://bedroesb.github.io/rdmkit/your_tasks. I don't know if it is any useful to the users though :)

bedroesb avatar Aug 10 '22 08:08 bedroesb

Thanks for the amazing work @bedroesb. Noticed a minor point:

  1. The side menu in the "Your domain" section is not alphabetically ordered but the tiles are. This needs to be corrected.

smza avatar Aug 23 '22 12:08 smza

Good catch! I'm on it :)

bedroesb avatar Aug 23 '22 12:08 bedroesb

Thanks for that @bedroesb! Here's my say FWIW:

  1. I've already noted my opinion of the text at the top. For me, it's a bit too long.

Picking up on Martins point, I think "Best practices and guidelines you can use to manage your research data." is enough. The rest is just a round about way of saying the same thing. Or we can rewrite is as : "Best practices and guidelines you can use for FAIR management of your research data.", in case the use of FAIR is necessary.

smza avatar Aug 23 '22 12:08 smza

I have switched to the official icons with the correct license.

bedroesb avatar Sep 02 '22 07:09 bedroesb

I might be splitting hairs here, but can you use "FAIR" to describe data management or the just data itself? I'm thinking of the first sentence, where it says "...FAIR management of your research data". Also, will all the users know what "FAIR" means? Maybe: "Best practices and guidelines to help you make your data FAIR (Findable, Accessible, Interoperable and Reusable)"?

martin-nc avatar Sep 02 '22 09:09 martin-nc

@martin-nc I liked the word data management in the subtitle ... :)

bedroesb avatar Sep 03 '22 19:09 bedroesb

I think we are ready!

bedroesb avatar Sep 16 '22 08:09 bedroesb