Website UI issues

[alanshaw]

Homepage/Docs

1. Direct links to the HTTP API docs and the JS client reference docs have been removed from the homepage.
2. No links to the HTTP API docs and the JS client reference docs from the left hand menu on the docs page
3. The quickstart sections (showing the simplest possible code to store data on NFT.Storage) have been removed from the homepage, there’s no longer a copy and paste snippet - there’s now a click barrier in the way.
4. The examples in the docs are too complicated. They ask you to install the “mime” module for example which is unnecessary noise.
5. The “Client” section of the docs page nav is useless, probably needs to be removed.
6. The double hamburger on mobile isn’t great UX…
7. The image on the getting started section on the homepage is not relevant to the content.
8. When first arriving on the Homepage a spinner is shown until the whole page is loaded, IMHO this is actually making it feel slower to load.

FAQ

1. Maybe we don’t need to write “Table of Contents” above the list of questions?
2. Can we fix the line height in the question list? - too small.
3. Code snippets in question titles are unusually large.

Login

1. The font size and spacing between controls for “Or with” has become broken.
2. We should rearrange to put GitHub first like in Web3.Storage.

Files

1. The “Tell us how were are doing” button takes up WAY too much vertical space - why does it appear here, on this page?
2. Casing “Copy cid to Clipboard” -> “Copy CID to clipboard”.

Upload page

1. Links in the text "You can also upload files using the JS Client Library or Raw HTTP Requests” do not work.
2. “NFT.Storage” is written multiple times as “Nft.Storage” on this page.
3. Typo “nft.storge”.
4. “cli” should be upper case.

API Keys

1. Please can we port the “Actions” menu button (from the files page) to this table 🙏

Blog

1. Entries are tagged but the tag filters list does not include those tags.
2. Tag casing issues: “Nft” -> “NFT” and “Ipfs” -> “IPFS”.

Blog Subscribe page

1. Needs a better title “Subscribe” -> “Subscribe to the Blog”.
2. Needs explanatory text: “Enter your email to receive a notification when new blog content is posted.”.

General

1. Logo in the header is scaled by 0.8 which brings it in from the left hand edge, this looks off when you look at the login button, which is fully right aligned.
2. The hover animation for buttons is weird - I don’t expect movement of the “shadow” in that direction. It should highlight in some way and perhaps onmousedown the top layer should depress towards the shadow (i.e. the opposite of what happens right now on hover).
3. On mobile, the NFT.Storage logo is not centred - it’s off to the right.
4. In the footer, the social icons are not centred - they’re off to the left.

[JeffLowe]

Processed first section of feedback here into separate responses and tickets where needed:

Homepage/Docs

1. Direct links to the HTTP API docs and the JS client reference docs have been removed from the homepage.

Correct. Now we have the singular "View Docs" CTA leading to the /docs pages.

2. No links to the HTTP API docs and the JS client reference docs from the left hand menu on the docs page
Although there are several in-page links, this PR #1450 updates side nav to clarify content. This ticket #1491 we'll be adding a dedicated link in side nav for the api docs.

3. The quickstart sections (showing the simplest possible code to store data on NFT.Storage) have been removed from the homepage, there’s no longer a copy and paste snippet - there’s now a click barrier in the way.
Homepage design was adjusted to target not only technical users but also non-technical users (getting started now aligns and applies to both). The former quickstart content (quick code copy) is in the /docs now.

4. The examples in the docs are too complicated. They ask you to install the “mime” module for example which is unnecessary noise.
Ticketed here ( #1504 ) for simplification / refinement, calling out this case specifically on https://nft.storage/docs/quickstart/

5. The “Client” section of the docs page nav is useless, probably needs to be removed.
Yeah, it's not super clear to user right now that those are non-selectable containers with subpages. Ticketed ( #1505 ) for refinement.

6. The double hamburger on mobile isn’t great UX…
Probably need a different menu indicator to differentiate it from main hamburger menu. Maybe Bento, kebab, or meatballs. Ticketed #1506 this refinement for Munns.

7. The image on the getting started section on the homepage is not relevant to the content.
We could ditch the image and just go with steps text centered. I believe the thought here was to put some relevant visual to break up the text. We used the current one as placeholder. Ticketed #1508 this refinement recommendation for Munns.

8. When first arriving on the Homepage a spinner is shown until the whole page is loaded, IMHO this is actually making it feel slower to load.
I haven't experienced this, even when throttling during load testing. We will look deeper at this during testing round.

[JeffLowe]

FAQ

FAQ page, I ticketed the cleanup here #1511

[JeffLowe]

Login

Login screen adjustments ticketed here #1512

[JeffLowe]

Files

Files page adjustments ticketed here #1513
Immediate adjustment for the page "feedback" button is to move to bottom of page. We'll have Munns determine better permanent home for the feedback button (ticketed elsewhere).

[JeffLowe]

Upload page

Links in the text "You can also upload files using the JS Client Library or Raw HTTP Requests” do not work. (ticketed in #1514 )
“NFT.Storage” is written multiple times as “Nft.Storage” on this page. ( #1515 )
Typo “nft.storge”. ( #1515 )
“cli” should be upper case. #1515

[JeffLowe]

API KEYS

Ticketed the enhancement request for API key page in #1516

[JeffLowe]

General

#1521 addresses the alignment observations on header, as well as related footer and page content alignment questions. Assigned to Munns to do design review and adjustment.

Also ticketed the global button hover animation suggestion #1518

[JeffLowe]

Blog related enhancements

All ticketed in #1522

[JeffLowe]

All feedback separated out into related concerns and ticketed for independent action.