Vertical Menu is not conveniently spotted

TheRedDawnAct commented 1 year ago

The vertical menu was not present. Now it is visible: https://github.com/coqui-ai/coqui-ai.github.io/issues/453#issue-1629164993

But as far as I remember, it was agreed that it will be placed on the left hand side. Or if this is a harder task can we at least keep it open by default? It is hard to recognize that it is there.

Then again the content of the placeholders do not have identical names with the sections. Can we match them?

nathanjassi commented 1 year ago

Hi Kiziltan,

In regards to the placeholder content can you specify the following: Screenshot 2023-03-24 at 17 46 07

In the screen shot should we use the following small green title for the content?

I would recommend this as for the bigger title headings they are too long for the sidebar:

Regarding the position I tried left aligned open:

and left aligned closed: (please ignore the orientation of the arrows as the screenshots are for demonstration purposes)

And we feel that it is not the correct position for the vertical menu. We would recommend keeping it in the same position as that is the natural position for a menu item to be.

I also tried persistent open on page load and you end up with the following result:

So every time the user lands on the website the menu is open and covering the video. Again we don't recommend this approach.

The position where the menu is now seems to be the best logical position.

I am happy to hear your thoughts and if you would still like us to move position or have persistent open then please let us know and we can make that change specifically including the content updates.

Thanks, Nathan

TheRedDawnAct commented 1 year ago

Side: I agree that left hand side disrupts the design. Right hand side it is.
State: I agree that persistent open setting on the hero section, covers the video, which is something we don't want.
Size: On the closed setting the size and/or color of the menu indicator (arrow) is not sufficient to catch the eye. We may explore expanding and/or recoloring it to make it more spotable. @samuelF18 ideas?
Option: The hero section has the header menu items that help navigation those are not usable when visitor scrolls down. So navigational guidance becomes weakened. Can we explore an approach to automatically switch the menu to open state after the hero section is off the span of the scroll? So we can provide menu instead of the top menu items when they are not visible and if the visitors do not wish to see the menu they can close it.

@samuelF18 would you share your views, too?

TheRedDawnAct commented 1 year ago

With regard to naming:

I am more worried about the How it works menu rather than the homepage. If you can share the two menu contents here I can revise their copy.

nathanjassi commented 1 year ago

Hi Kiziltan,

Thank you for the update.

In regards to the position, noted. We will keep as is.

In regards to the copy I changed the navigation for the "How It Works" Page like so:

How does this work?

Changes are on the "atomic-redesign" branch to view.

Thanks, Nathan

TheRedDawnAct commented 1 year ago

Hi @nathanjassi ,

The menu items and their destinations (I added (>...) where further reference may be helpful) could be as follows: Home Menu Features Why Coqui? AI Voices (>AI-Generated Voice) Pricing Samples (>Synthetic voices with human touch) About Us FAQ (>Ask us) Contact us (>Contact our team) Blog Try for free (>Sign in) Other links (>Footer) How It Works (>How it works)

How It Works Menu Video games (>Video game developers) Post-production Voice over Resources (>Ask us * I'd appreciate it if you could revise ASK US on the target section, to RESOURCES without repeating - it is a paste leftover from early FAQ content that was in this location earlier) Learn more (>the links section below Resources page) Pricing Contact us (>Contact our team) Blog Try for free (>Sign in) Other links (>Footer) Home (>Homepage hero section)

Could you also elaborate your thoughts on my suggested resizing, recoloring, show-after-scroll options?

Thanks

TheRedDawnAct commented 1 year ago

hi @nathanjassi any need for further clarification, here?

nathanjassi commented 1 year ago

Hi Kiziltan,

I just need clarification on the titles.

From your previous post I can see the updates but I just want to be clear what the part in brackets means?

So for example you have:

Home (>Homepage hero section)

Does the brackets mean the anchor point or is the copy in the vertical menu to be "Home (>Homepage Hero Section)"?

Once I am clear on this change I will update the copy accordingly to the above comment.

Regarding colours and show after scroll these are out of scope and we are only able to do one more copy change to the vertical menu.

Please if you can clarify that point and then I will update the vertical menu as per your list in the last comment.

Thanks, Nathan

TheRedDawnAct commented 1 year ago

In order for the menu to be less crowded and navigation-wise more guiding, I shortened or revised some of the titles. First column below is what it reads as menu items, second column where that menu item navigates.

TheRedDawnAct commented 1 year ago

@nathanjassi Are the above descriptives sufficient to complete your work? Are they already implemented?

nathanjassi commented 1 year ago

Hi Kiziltan,

I will update you shortly with the new headings. The above works great.

Thanks Nathan

nathanjassi commented 1 year ago

Hi Kiziltan,

Please see the two menus updated as per your request: Home:

How it works:

These changes are available inside the "atomic-redesign" branch for you to review.

Thanks. Nathan

TheRedDawnAct commented 1 year ago

Looks good. Thanks. We will review them on the implementation version.

TheRedDawnAct commented 1 year ago

Reviewed and it works. Thanks.

coqui-ai / coqui-ai.github.io

Vertical Menu is not conveniently spotted #496