UX tweaks

[benscott]

Suggestions for UX tweaks arising from chat with Vince:

On the landing page:

• can you make it clearer users should scroll down - perhaps a chevron at the bottom?
• Can a search bar be included on the top banner e.g data.nhm.ac.uk?

At smaller screen sizes, can a text break be added between UK Natural Science
Collections Portal.

So it doesn't do this:

On the dataset table:

The apply filter looks like a sort icon:

(although we noticed afterwards Outlook uses the same, so if that's now becomes standard icon for filtering ignore us)

On the dissco site:

Have a big button at the top signposting the data portal site.

[MortenHofft]

Scrolling You can adjust the height of the hero image. That might be the simplest way to indicate that users can scroll? That said I believe most users these days are familiar with scrolling and assume it is possible per default. I too like to indicate it with a not full height image though.

Add e.g. height: 70vh # set image height to 70 of viewport height to the front matter on the home page documentation of option on that layout: https://hp-theme.gbif-staging.org/layout/hero

[MortenHofft]

Title styling https://github.com/gbif/hp-uk-collections/blob/master/_sass/_main.scss#L10 It is possible to control margins, font size etc using media queries (screen sizes). It already does so a bit.

[MortenHofft]

Filter icon It isn't something you can change. It would have to be done in the data widgets and apply to everyone. I do not have a strong preference for that icon. Funnel is also used at times. The sorting icon typically have the bars left or right aligned i believe.

[MortenHofft]

Search bar It is possible to add a search bar to the header. But it isn't part of the theme. But you can do so by inserting html (and possible some javascript) I believe you could just change the description to include HTML here https://github.com/gbif/hp-uk-collections/blob/master/home.md?plain=1#L6

Just a rough example to show the idea

description: |
  <div>
    <p>Discover digitised specimens from UK natural sciences collections</p>
    <form action="/specimen/search" method="GET">
      <input name="q" type="text" placeholder="Search" class="input">
      <input type="submit" class="button">
    </form>
  </div>

That said, free text queries aren't the best way to start specimen search I find. Users would probably expect a search by scientific (or vernacular) name