Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UX] splash page "welcome" part uses too much space; it should get to the point #1423

Closed
trentmc opened this issue Mar 19, 2024 · 1 comment · Fixed by #1424
Closed

[UX] splash page "welcome" part uses too much space; it should get to the point #1423

trentmc opened this issue Mar 19, 2024 · 1 comment · Fixed by #1424
Assignees
Labels
Type: Bug Something isn't working

Comments

@trentmc
Copy link
Member

trentmc commented Mar 19, 2024

Summary of issues

This is a UX bug.

Docs should "get to the point" making it easy for anyone to quickly see the content.

The splash screen has a few issues that get in the way of this, that are easy to remedy.

  • banner image is too large -- takes up 50%+ of the real estate when you get to the page. Every square cm that it takes, is a square cm not for people to see the real content below
  • banner image says "Welcome to the Ocean docs"; and the H1 Header text right below also says "Welcome". This is redundant, and wastes space. Every square cm...
  • The H2 text "Help for wherever you are on your Ocean journey" doesn't say much. And it's redundant with the first box below "Discover Ocean" already signals "we're friendly to newcomers" and the other boxes which signal "beyond the newcomers"
  • banner image is weirdly whited-out. This makes it feel poorer-quality, and inconsistent with images below which aren't whited-out or muted in some other fashion. AFAIK this is recent; it wasn't like that a couple months ago. This isn't just for the splash page, it's for all the pages. More general github issue: #1425. However for this github, one option is to remove the banner image altogether.

Appendix: Screenshots

Here is the splash page with a typical, narrow, and wide browser accordingly. (From a macos running chrome).

Typical

Narrow

Wide

@trentmc
Copy link
Member Author

trentmc commented Mar 19, 2024

Candidate Designs

Cand 0: inline banner (Note: we can't remove "Ocean docs" text. If we remove it from markdown, it says "README")

Cand 1: no image, min text

Cand 2: no image, med text

Cand 3: no image, lotsa text

Analysis

Trent's thoughts

  • All candidates basically address this issue's concerns
  • Cand 0 is still a bit wasteful of real estate, and its ordering of image & title is slightly surprising to a viewer
  • Cand 1 has no banner (good) but it's slightly jarring because not quite enough context
  • Cand 2 adds a bit more context, without hurting real estate much, so better than 1
  • Cand 3 adds a bit more context yet, without hurting real estate much, so better than 2

Recommendation: Cand 3 (no banner image, lotsa text)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant