Discussion: Current plan for navigation in the Build section

This is taking one of the main elements out of this thread to discuss the plan before implementing it.

It would work by having the most commonly used tags in each category and tag page, at the top of the page in a banner. we can exclude tags to design a path we can guide users through. the tags should be larger, or in a button so it’s clear they are the main navigation method.

and above, or below the tags would be a search bar so users can quickly navigate if they know what they are looking for

So we’re proposing merging and improving the three plugins to create this structure at the top of each page:

  1. navigation buttons using tags
  2. search bar
  3. a text intro where we can add featured links and ‘join the team’ - which we are currently lacking as i can tag the @UXers team, but most of you haven’t joined it as it’s not presented to platform users.

Having Discussion and Tasks threads all lumped in together is confusing to users. We can solve that by extending the tag options above

So we have two tiers of tags. One in the header which we use to define the paths we want users to take

then replacing ‘latest, top, tasks’

would be the following tags: ‘Discuss’ ‘Tasks’ and ‘Calendar’ created as tabs to give a tabbed browsing effect. these might work well in a footer for ease of browsing on a mobile device. We should move these into a footer to replicate many of the top tech companies today.

The text in the title will normally have text with these links:
‘Tools:’ ‘Getting Started Guide’ ‘Pinned’ (as pinning isn’t supported in tag-pages) ‘Documentation’

@ArtyS I’ve created a wireframe for navigating the Build section, which makes running the Summit possible, its pulled together from the discussions going on in the UX team.

https://wireframepro.mockflow.com/view/M69ee63d30839ade6a9efb3f38c3455a91568989603176

unfortunately i was limited to 3 pages in the wireframe creator. Vote should be the default

Page 4 will be the exactly the same as page 3, it just guides users to the next level. Technically this is achieved by adding another tag.

page 3 would have this tag: ‘web dev’
page 4 would be: ‘web dev’ ‘react js’
the team may decide to add a tag to create a page 5.
page 5 would then be ‘web dev’ ‘react js’ ‘artys hack team’
page 6 is ‘web dev’ ‘react js’ ‘artys hack team’ ‘secret kitten project’
and on till infinity. the system is so simple users can go as deep as they find use for

Here’s the UX changes for creating the cards: https://meta.discourse.org/t/sharing-our-experience-changing-the-discourse-ui/50236

the system they have where the cards are at the top open into full pages with discussion below, is perfect for our use case. it means we can describe each team and project in detail to users.

Ah, nice!

I found another complete example doing something very similar which we can copy a lot of the CSS mods from: https://thepavilion.io/

@ArtyS when you’re back in, does this make the task easier?

Updated vision:

Description

Our plan is to create/modify the Tag banner plugin with a path of tags (3-5) based on the page url (or tag page shown) so we can guide new users through a pre-set path, and combine it with the search bar header plugin so returning users can instantly get to where they want to get to.

Probably this will work by showing the 5 most common tags linked with the tag-page banner of the tag-page a user is on to create an evolving system - with the ability to define and exclude tags so it can be customised.

You can see that with the Kanban plugin that one of our volunteer Public Happiness Movement devs succeeded in adapting it for tag pages: https://github.com/artysidorenko/discourse-kanban-theme

(included in case the code or method is useful)

Our platform covers a wide area and we’ve had constant reports of confusion with users being unable to navigate it, and being overwhelmed where to start, reaching the point where it barely functions, and everyone complains they can’t use Slack or whatsapp (which can’t scale to deliver our vision),
Enabling this would give Discourse users of your calendar plugin a working calendar on all tag-pages.

Use Case

Being able to codify a defined path to lead new users on a path through where we want them to go would solve our usability issues.

This also gives our users the ability to spin off their own groups and projects easily, and for fluid cross team collaboration simply by adding a tag i.e. webdev reactjs ux, so now three teams can see the discussion and related tasks/calendar, and then maybe someone wants to add a #bobsfridayhackteam

Our complete plan

To give a more complete overview of our intended navigation system, we also intend to modify the tag-banners plugin which currently doesn’t allow text below - now we can put key links there to replace and improve the lost function ‘pinning’ of important posts in a category, and include the search bar in the banner so returning users can skip directly to where they want to be rather than navigate using the tags navigation plugin.

We’ve also planned a similar style to your homepage, where the key tags are shown in boxes to provide users more information on key tags. I suspect yours is using categories, which is an option if it can be tied into our plan

It’ll look like this:

Banner


Tag Banner Title
Tag Banners - theme-component - Discourse Meta

[most common tag 1] [tag 2] [tag 3] [tag 4] [tag 5]

Search bar
Search Banner - theme-component - Discourse Meta

Tag description (if provided) which allows a one sentence description for users of where they are, and offers a space for key links (replacing pinning)
This functionality is in the category banner, but not the tag banner
Category Banners - theme-component - Discourse Meta

Main Page


Discourse posts. Some with voting, some without.

Floating Footer


5 theme component pages which link to the tag pages so users can switch between actions on the visible page

[Discuss] [Tasks] [Calendar] [Vote]

  • Discuss: Standard Discourse threads
  • Tasks: Discourse Kanban for this tag page
  • Calendar: Events Calendar for this tag page
  • Vote: Discussion threads where voting is enabled. We’d use this for suggesting new projects

The homepage will need a few differences so it’s sensible to build a static page and style it similar to the other pages. Here’s an example where a home page has been styled similar ordinary discourse