search

FlowFuse / website

The FlowFuse Website
https://flowfuse.com
MIT License
22 stars 12 forks source link

Top Level Navigation Options #319

Closed joepavitt closed 1 year ago

joepavitt commented 1 year ago

Epic

No response

Description

With @iskerrett coming onboard, I wanted to do a review of our top-level navigation options. We have a lot of content that is only accessible via Footer links, and whilst some of this may not be too valuable, it does add flavour and personality to our site, e.g. handbook/about us/team.

Current Options:

Header

Screenshot 2023-01-10 at 14 02 55

Footer

Screenshot 2023-01-10 at 14 03 07

Acceptance Criteria

joepavitt commented 1 year ago

Advantage of what we have now is that they're all single-click links, no dropdowns. Traffic shows heavy flow towards pricing/features/docs:

Screenshot 2023-01-10 at 14 05 47

If we introduce more links (i.e. company links) - they would overpopulate that space, and require dropdowns. Perfectly common to see, but for the purpose of introducing less important links, do we want to make the existing links two-clicks?

joepavitt commented 1 year ago

As a quick thought, something like this could work:

Screenshot 2023-01-10 at 14 31 05 Screenshot 2023-01-10 at 14 31 13
joepavitt commented 1 year ago

could even add CTAs in for hte "Product" dropdown - although it then starts getting a little busier, so may want to re-think the above design

iskerrett commented 1 year ago

I agree we need to look at this but I would like to wait a couple of weeks. I want to get a better handle on how we will ramp up marketing. I hope this is okay.

joepavitt commented 1 year ago

I agree we need to look at this but I would like to wait a couple of weeks

Absolutely, just putting this on the radar and with some initial thinking to make sure it gets addressed.

iskerrett commented 1 year ago

I spent some time thinking about this and looking at other websites. Here is the hierarchy I think would work well for us. Home

joepavitt commented 1 year ago

I prefer "Features" over "Platform", as we only have the one platform at the moment, and "features" is a more inviting/informative label to click.

Little hesitant at the overload of Resources, although I think that's also because it's such a big difference from where we are, and we don't necessarily have enough "webinar" content to fill a whole page right now, nor will we for a little while.

Love the idea of having a Node-RED dedicated section, and us producing more dedicated Node-RED resources like "Getting Started Guides" and "Tutorials".

As a starting point, I'd like to extend our blog to be category/filtering based, so we populate all of our content in one place, but make it possible to have the same screen sharable with filters applied (that can also be controlled on-screen). I was hoping to get to making some designs for this yesterday, so that I can articulate my thinking better, but got bogged down with PostHog replication failures and the Team Library UI dev work.

RE: Free Trial as top level action, happy for us to have this, if our new primary CTA is getting members onto FF Cloud, and not GitHub installs. I'm fine either way, just want to make sure the latter is not overlooked.

iskerrett commented 1 year ago

I prefer "Features" over "Platform", as we only have the one platform at the moment, and "features" is a more inviting/informative label to click.

Features is fine for me too.

Little hesitant at the overload of Resources, although I think that's also because it's such a big difference from where we are, and we don't necessarily have enough "webinar" content to fill a whole page right now, nor will we for a little while.

The main CTA on the webinar page is actually promoting registration for the upcoming webinar. Below will be space for the past webinars.

Love the idea of having a Node-RED dedicated section, and us producing more dedicated Node-RED resources like "Getting Started Guides" and "Tutorials".

As a starting point, I'd like to extend our blog to be category/filtering based, so we populate all of our content in one place, but make it possible to have the same screen sharable with filters applied (that can also be controlled on-screen). I was hoping to get to making some designs for this yesterday, so that I can articulate my thinking better, but got bogged down with PostHog replication failures and the Team Library UI dev work.

OK

RE: Free Trial as top level action, happy for us to have this, if our new primary CTA is getting members onto FF Cloud, and not GitHub installs. I'm fine either way, just want to make sure the latter is not overlooked.

I believe our KPI is number of managed instances. FF Cloud is going to be the easiest way to get people to use FF. We should only have one CTA at the top, hence my desire to have the Free Trial.

joepavitt commented 1 year ago

With the request in #326 we would be updating the existing "Blog" navigation option to be "Resources", then expand that (currently) to "Blog" and "Webinars"

joepavitt commented 1 year ago

Just to record interaction with top-level navigation as things stand (this is the data for nav from the home page):

Screenshot 2023-03-01 at 16 46 33
joepavitt commented 1 year ago

Curious to understand what we need to focus on here, the top-level options we have now align with those requested in https://github.com/flowforge/website/issues/319#issuecomment-1382027701 hence the issue being closed.

The only differences exist within "Resources" where we could have a lot more content - is that where you want the focus @iskerrett?

iskerrett commented 1 year ago

We need to expand the resource menu to the following: Resources -- Node-RED --- Getting Started --- GitHub --- Docs --- Support Forums -- FlowForge --- Getting Started --- GitHub --- Docs --- Support Forums (where do FlowForge customers ask support questions?) -- Blog -- Webinars -- Newsletter

For the company page, the order of the menu items needs to be updated: Company -- About -- Blog -- Team -- Jobs -- Handbook -- Request Support -- Contact US -- Privacy

joepavitt commented 1 year ago

for each of the following, just want to be sure we're on same page on where we are sending the traffic:

iskerrett commented 1 year ago

for each of the following, just want to be sure we're on same page on where we are sending the traffic:

https://flowforge.com/blog/2023/01/getting-started-with-node-red/

it seems we need to create a Getting Started doc.

Let's delete this.

iskerrett commented 1 year ago

Thinking a bit more about the Company menu item. I would remove the Handbook and have it accessible from the footer.

joepavitt commented 1 year ago

Just to check @iskerrett - you want "blog" appearing under both "company" and "resources?" in the top-level nav?

joepavitt commented 1 year ago

Quick first draft for "Resources" (ignore placeholder icons)

Screenshot 2023-03-24 at 16 59 19
joepavitt commented 1 year ago

vs. just a long vertical list:

Screenshot 2023-03-24 at 17 00 12
joepavitt commented 1 year ago

@iskerrett just to chase on my above question - are we going for "blog" in both Company and Resources list?

Then to chase on the "Getting Started" for FlowForge, am I just leaving that out for now, and just having the "GitHub" and "Docs" links for now?

iskerrett commented 1 year ago

@iskerrett just to chase on my above question - are we going for "blog" in both Company and Resources list?

Yes please.

Then to chase on the "Getting Started" for FlowForge, am I just leaving that out for now, and just having the "GitHub" and "Docs" links for now?

Yes

joepavitt commented 1 year ago

FigJam Moodboard: https://www.figma.com/file/986QS4aIJfenDxQS629g1N/Navigation?node-id=0%3A1&t=EzDjouTcRt79r1Gb-1

Yndira-E commented 1 year ago

Hi, here's a prototype.

All of the menu items (that have a sub-menu) should expand when you hover, except for "resources", where you'll have to click to see it. I did it like this so you can also hover on the items of that sub-menu and see the color change, but on the website, it should behave like the rest of them.

If you scroll, you'll see the nav-bar is fixed at the top, as we discussed in our call.

Since the idea is to show the sub-menus on hover, I removed the arrow next to the item that suggested to click to reveal more options, I think those are expandable and this way we can save some space.

I added icons to make it easier to navigate and a bit friendlier.

I'll have to work on the mobile version, and maybe improve the transitions, but wanted some feedback on the layout first.

Let me know what you think :)

iskerrett commented 1 year ago

All of the menu items (that have a sub-menu) should expand when you hover, except for "resources", where you'll have to click to see it. I did it like this so you can also hover on the items of that sub-menu and see the color change, but on the website, it should behave like the rest of them.

I like it. Looks very clean. The Resource sub menu I have some feedback but I am assuming you just want feedback now on the main nav.

If you scroll, you'll see the nav-bar is fixed at the top, as we discussed in our call.

Great idea. Very nice

Since the idea is to show the sub-menus on hover, I removed the arrow next to the item that suggested to click to reveal more options, I think those are expandable and this way we can save some space.

Good idea.

I added icons to make it easier to navigate and a bit friendlier.

I really like these :-)

Yndira-E commented 1 year ago

Hi @iskerrett I'm glad you like it! Share your feedback on the resources sub-menu as well, please. @joepavitt what do you think?

joepavitt commented 1 year ago

If you scroll, you'll see the nav-bar is fixed at the top, as we discussed in our call.

I like the idea of sticky header, although we should make sure it's consistent padding above/below, looks odd with barely any padding below, but a lot above.

Could also get away with removing a bit of vertical padding on the "Node-RED/FlowForge" bar and the bottom bar of three options, should be a consistent row-height to the main contents here.

I removed the arrow next to the item that suggested to click to reveal more options

Whilst this does remove space (great) it does now offer an inconstancy in our header, some you click, some over hover, and no indication in advance of which are which. Having had a look around though, seems like this is fairly standard (see Stripe) - so I'll step back on my thoughts here and say - that's fine :)

I added icons to make it easier to navigate and a bit friendlier.

Looks better :+1: may want a different icon for "blog" though, as pencil generally means "edit".

Just also want to check as I know Ian wasn't a fan of the three items being at the bottom, seems like you've discussed this already, just want to be sure we're definitely. not going with a 3-column approach?

iskerrett commented 1 year ago

@Yndira-FlowForge the challenge I have with the current design of the resource menu is that it treats different items differently. Why are the three items at the bottom and not in a list? What happens when we need to add another menu item?

For how the columns are treated, I wonder if it would be better to have the dividing line go up between Node-RED and FlowForge? Right now I find the column headings and the lists don't really match up very well.

@joepavitt not sure why you object to a 3 column approach to the floating menu? Can you explain?

joepavitt commented 1 year ago

I didn't object, I was bringing it up for that reason, wanted to be sure your feedback was taken into account. I thought I remember you saying that you wanted that, but it wasn't reflected in the latest design which you seemed to be happy with.

Missed that you hadn't explicitly fedback on the floating menu.

joepavitt commented 1 year ago

My initial thinking behind the three items at the bottom was the additional column having a header of "Other" seemed a bit misplaced.

iskerrett commented 1 year ago

Ok, good. It actually might make more sense to have just two columns: Node-RED and FlowForge. Under FlowForge have the following: Getting Started github docs blog webinar newsletter

Otherwise, the three column would be: FlowForge

Other

Yndira-E commented 1 year ago

Hi, my thinking was the same as Joe's, I thought "others" wasn't meaningful enough to deserve a title at the same level as "FlowForge" and "Node-RED"

iskerrett commented 1 year ago

I am open to suggestion for something than Other?

joepavitt commented 1 year ago

I am open to suggestion for something than Other?

Yeah, I struggled with thinking around this. I went down the "Events"/"Content"/"Articles" type route, but none of them were a suitable catch-all.

Could try a two-column approach within the "FlowForge" section? So it's 3 columns, but designed such that the "other" bits fall within the FlowForge part?

iskerrett commented 1 year ago

Good idea. The 3 other items are really part of FlowForge so they fit there.

Yndira-E commented 1 year ago

I like the idea of sticky header, although we should make sure it's consistent padding above/below, looks odd with barely any padding below, but a lot above.

I centered the content of the header. I didn't do this initially because now the items are a bit closer to the top than in the original design and didn't want to change that. Also, the distance between the sub-menu and the menu item needs to be bigger and I wanted to keep them a bit closer. It's not as bad as I thought it would be, though.

Here it is with all the revisions (updated the prototype as well)

Screenshot 2023-04-18 at 16 04 10

And, here's one with only two columns, in case you think the one above is too wide

Screenshot 2023-04-18 at 16 03 02
joepavitt commented 1 year ago

I prefer the wide/3-column layout, but not a fan of the difference in grey across that split. Preferred it when the headers were differentiated to their respective lists.

Yndira-E commented 1 year ago

@joepavitt I tried it like that because of Ian's comment

For how the columns are treated, I wonder if it would be better to have the dividing line go up between Node-RED and FlowForge? Right now I find the column headings and the lists don't really match up very well.

I didn't want to make the line go all the way up, it doesn't look good...

This could be a workaround too Image

iskerrett commented 1 year ago

I agree the 3 column looks best.

fwiw, the support forums item should be under Node-RED.

Nice work Yrinda

Yndira-E commented 1 year ago

You're right @iskerrett Here it is

Screenshot 2023-04-18 at 18 06 16
Yndira-E commented 1 year ago

I've been working on the mobile version.

Currently it's like this:

Screenshot 2023-04-21 at 12 28 27

I noticed that the sign in / try for free options are not visible in the mobile version and it has a light background. In this proposal I've maintained the same dark background of the header and added a small animation to it, and included two buttons for the missing options. It would look like this:

Screenshot 2023-04-21 at 12 42 29

Here's a prototype, the only interactive options are the ones showed in the mockups (product, resources>FlowForge). I added a scrolling bar for the menu that overflows the screen as a reference, it doesn't have the animation.

joepavitt commented 1 year ago

Perfect - I'll get building - although will wait for https://github.com/flowforge/website/pull/673 first as that is going to overlap a little bit in code changes