solved UX observation - keep tag cloud context

Clay Gordon
Clay Gordon
@claygordon
10 years ago
744 posts
When I click on the Tag Cloud tab, the tabs disappear. This means I have to go back one page in the browser history - an extra and unnecessary step.

I would think that it would be nicer to keep the tabs when displaying the tag cloud, that way I can switch tabs in a single click.

This is not hugely important, obviously, but one of those projects that shouldn't take tooooo long and can fit in between the cracks of larger ones.
updated by @claygordon: 03/09/15 12:50:48PM
brian
@brian
10 years ago
10,148 posts
That's a bug - we'll fix it.

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Clay Gordon
Clay Gordon
@claygordon
10 years ago
744 posts
Bug Hunt!

Give the man a 1729 button!

(For all us Futurama or Numberphile fans out there.)
michael
@michael
10 years ago
7,778 posts
Its not a bug. The tabs are representative of the items that are tagged with that tag.

Cant have an "all" tab if there is not a tab selected.

How it works:
* click on a tag from the tag cloud
* chose "da faqs"
* tabs appear and show "all" and "forum"

Because only "forum" has a tag 'da faqs'.

If there was an audio file also tagged 'da faqs' then the tabs would be
ALL | FORUM | AUDIO

Where "all" would show BOTH forum and audio.

--edit--
The only way to "Fix" it would be to add the tabs there with just the "Tag Cloud" tag. Why put a tab there if its the only option. Guess you could, but why.
updated by @michael: 01/20/15 12:33:31AM
Clay Gordon
Clay Gordon
@claygordon
10 years ago
744 posts
@Michael -

I don't understand why you can't keep the other tabs visible and available when you click on the Tag Cloud tab - "just" put it in a panel inside the tab rather than having the URL point to some new page.

"All" is shorthand (in this case) for "All Da Faqs." The Forums tab shows all the Forum posts where there is an entry tagged with that tag. If there were a Blog tagged I would expect to see a Blogs tab, and so on.

-- edit --

Which is what you say will happen. That's the expected behavior. What I am saying is that I don't want those other tabs to disappear when I click on the tag cloud tab, making it easier to select one of the other tabs should I click on the tag cloud tab.

Currently, clicking on the tag cloud tag takes you to another page, which is what tabs are supposed to keep the user from having to do. I expect (and most users would expect) that clicking on a tab does not remove all of the other tabs.
updated by @claygordon: 01/20/15 07:39:42AM
brian
@brian
10 years ago
10,148 posts
In my opinion the tabs at the top should be 100% consistent - i.e. the "Tag Cloud", "All" and "Forums" should still be visible when viewing the tag cloud.

I will check it out, as right now even though it may be working as it is supposed to, I think it needs to change.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Clay Gordon
Clay Gordon
@claygordon
10 years ago
744 posts
BTW -

There is no hurry on this as far as I am concerned. Today is Tuesday? Does Friday work? Monday? I do not need it today. :-)

-- edited to add :-) --
updated by @claygordon: 01/20/15 09:15:34AM
brian
@brian
10 years ago
10,148 posts
I've pushed some tag updates here to Jamroom.net:

https://www.jamroom.net/tags

Let me know if you see any issues - I'll get things cleaned up and released tomorrow.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Clay Gordon
Clay Gordon
@claygordon
10 years ago
744 posts
Brian -

This works if I was looking at the tag cloud in the first place. I see all the tags, then I see the different object types that are tagged and the tags associated with that object type. The display is correct in that I am switching between tabs.

I don't have a link to view all tags from the tag cloud on the home page. I would need to add an "All" which would get me to the the page you're linking to.

So, what I do now is click on a tag and I go to a page with "Tag Cloud" tab, an "All" tab, and one or more tabs that are filtered by object type. I can click back and forth between the All tab and the Object Type tab (e.g., Forums) and I switch between tabs on this page. When I click on Tag Cloud I am taken to a Tag Cloud page.

This difference in behavior is what I am reacting to. When I click on Tag Cloud I don't want the other two tabs to disappear and be replaced by all of the tags organized by object type.
brian
@brian
10 years ago
10,148 posts
Just to be clear - when viewing the "Tag Cloud" I removed the "All" tab since it is the same thing. "Tag Cloud" = "All". I added "by module" tag clouds as tabs.

If you click on a WORD in a tag cloud then you see ALL items tagged by that tag, and then can even narrow down by module.

I think this makes a lot of sense.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
michael
@michael
10 years ago
7,778 posts
Yeah, that's better.

--edit--
Only thing that's still a little out is the tabs from the top level's destination.

eg:
start here: "Documentation"
https://www.jamroom.net/tags/documentation

Click 'modules' and arrive here:
https://www.jamroom.net/tags/modules

Its the same destination as if you had started at: "Marketplace".
https://www.jamroom.net/tags/networkmarket

and clicked 'modules'. The destination from "Documentation" as the initial start point should be:
https://www.jamroom.net/tags/documentation/modules

Start on the documentation tab, you want documentation.


updated by @michael: 01/20/15 04:02:34PM
Clay Gordon
Clay Gordon
@claygordon
10 years ago
744 posts
Brian -

I got to the tag cloud by clicking on a tag on the home page "Da FAQs".

That takes me to a Tag Cloud page where the "All" tab is selected and the contents are displayed. At the moment, there is just one entry.

I click on the Forum tab (there is one forum post where Da Faqs is a tag) and I see the one entry. If Da Faqs were added to other entries of other object types (e.g., Blog) then there would be a Blog tab.

When I click on the "Tag Cloud" tab, the "All" and any other tabs disappear. WHY? There's no need to remove context here. In order to get back to the previous page I either need to go back one page in the browser or re-select the tag.

What I would expect when I click on the "Tag Cloud" tab is that I would see the entire tag cloud ... with the original All and any other category tabs still there.

Then, if I clicked on any tag in the tag cloud then I would see all of the items tagged with that tag organized by type. Or I could simply click on the All tab again to go back to the original view.

This would make a LOT more sense if there were an "All" in the header above the tag cloud. At first blush it might seem redundant but once someone figured it out it would be a powerful shortcut.
michael
@michael
10 years ago
7,778 posts
thechocolatelife:...This difference in behavior is what I am reacting to. When I click on Tag Cloud I don't want the other two tabs to disappear and be replaced by all of the tags organized by object type....

See what your saying, just not how to implement it other than taking the "Tag Cloud" tab out of there. The tabs are the secondary level to whats been selected in the tag cloud. Removing "Tag Cloud" takes away the ability to go back to the top.
brian
@brian
10 years ago
10,148 posts
thechocolatelife:
This would make a LOT more sense if there were an "All" in the header above the tag cloud. At first blush it might seem redundant but once someone figured it out it would be a powerful shortcut.

If I am understanding you what you're saying is that you believe there needs to be an "All" tab when viewing the tag cloud, even though it is a duplication of the "Tag Cloud" tab.

It's not clear to me how it would be a shortcut though?

Also - I need to check on any existing URLs here on Jamroom.net pointing IN to the tag module, as I've changed the URL structure a bit and they may not be working correctly.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
michael
@michael
10 years ago
7,778 posts
Perhaps from this level:
https://www.jamroom.net/tags/documentation/modules

Move the "tag cloud" from the tabs to be a floating button on the right? That would visually move it out of the tabs and leave the ones that are connected to this level there.
Clay Gordon
Clay Gordon
@claygordon
10 years ago
744 posts
Going back to my original image upload, I would be happier if "Tag Cloud" were added all the way to the right rather than anchoring it as the primary position ... adding to the Tag Cloud tab page the sub-tabs that show all the tags organized by type.
michael
@michael
10 years ago
7,778 posts
Like this?
updated by @michael: 01/20/15 04:56:13PM
Clay Gordon
Clay Gordon
@claygordon
10 years ago
744 posts
That works.
brian
@brian
10 years ago
10,148 posts
There are no tabs anywhere in Jamroom that are right aligned, so this definitely breaks the UX convention, and is something Michael can maybe post the template update for - it's not something we would want to add to the module.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Clay Gordon
Clay Gordon
@claygordon
10 years ago
744 posts
okay then, how about this:

Make the Tag Cloud tab the right-most tab, always.

When you click on that, you get the tab panel with all the sub-tabs.
brian
@brian
10 years ago
10,148 posts
thechocolatelife:
okay then, how about this:

Make the Tag Cloud tab the right-most tab, always.

When you click on that, you get the tab panel with all the sub-tabs.

Is there a specific reason why you feel it has to be on the right?


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
brian
@brian
10 years ago
10,148 posts
I think what might be easier here is just to maybe update some of the text on the tabs - do you not like that it calls the "all" tag cloud tab "Tag Cloud" but doesn't have "Tag Cloud" in the other tab names?


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

updated by @brian: 01/20/15 05:22:17PM
Clay Gordon
Clay Gordon
@claygordon
10 years ago
744 posts
Brian -

I thought about the names. It's the behavior: when you click on a tab in a tab panel, the idea is to switch between the tab panels.

When you click on tag cloud now, you break the UI/UX expectation by loading another page - all the tabs disappear.

What I am proposing is to leave all the tabs in place and within the tab panel display the tag cloud in a row of tabs. Basically duplicate what you have at https://www.jamroom.net/tags/documentation/modules without the Tag Cloud tab because it is in the parent tab row.

Nested tabs in other words. This makes the whole approach orthogonal.

Another UI thought on this page

Why not use the sort order icon here rather than a pick list? There are only two option for sorting that I have seen. More consistent with the rest of the UI.
michael
@michael
10 years ago
7,778 posts
The right alignment was intended to differentiate the level.

Tag Cloud
⤷All
⤷Documentation
⤷Marketplace

but its displayed

Tag Cloud | All | Documentation | Marketplace

So its hard to understand that "Tag Cloud" is one level higher than the other 3.
brian
@brian
10 years ago
10,148 posts
Yeah I see that now. I would rather not create a different UI here though - let me check this out some more in the morning and see what I can do.

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
brian
@brian
10 years ago
10,148 posts
thechocolatelife:
When you click on tag cloud now, you break the UI/UX expectation by loading another page - all the tabs disappear.

I don't see the tabs disappearing here.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
michael
@michael
10 years ago
7,778 posts
From this page:
https://www.jamroom.net/tags/documentation/modules

Click "Tag Cloud".
Clay Gordon
Clay Gordon
@claygordon
10 years ago
744 posts
Michael -

More like the attached. It's not perfect and it raises other issues. SO - let me know if I am going to far with this.

And speaking of UI/UX, how come I can't add an image to a comment without posting and then editing the response?
ScreenShotTagCloud.jpg


updated by @claygordon: 01/20/15 06:33:06PM
brian
@brian
10 years ago
10,148 posts
thechocolatelife:
And speaking of UI/UX, how come I can't add an image to a comment without posting and then editing the response?

Right now our file upload handling only works when used in an actual "form" (i.e. what you see when you click modify). It's not setup at this time to work in a template (which is what you see here when entering a new response). There's also an issue in that every media item is attached to a profile and a specific item in the datastore - the problem is that the item is not actually created until you "save" your response here in the forum, so if you were to upload an image here on the forum thread, there's no "item" yet for it to belong to.

Those are the technical reasons why right now it works the way it does. It's something we've of course known about for some time and we'll end up getting it working in templates.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
brian
@brian
10 years ago
10,148 posts
michael:
From this page:
https://www.jamroom.net/tags/documentation/modules

Click "Tag Cloud".

OK just did and the tabs are not going away - see my screenshot.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

updated by @brian: 01/21/15 07:08:29AM
michael
@michael
10 years ago
7,778 posts
I see you've got it all sorted now here:
https://www.jamroom.net/tags/documentation/modules

Spot on I reckon. :)

(except its missing pagination so the list finishes at 10. eg: https://www.jamroom.net/tags/modules should have ALL but shows no 'documentation')
Clay Gordon
Clay Gordon
@claygordon
10 years ago
744 posts
Michael -

This does address the issue of making it very clear what a visitor is looking at:

1) items that are tagged with a particular tag
2) the entire tag cloud

Pagination is another issue outside the scope of my original request but it obviously needs to be taken care of.

When this is done, I would like to add the "All" to the tag cloud header on my home page so having that code fragment would be really helpful.
michael
@michael
10 years ago
7,778 posts
Adding the "all" is just a matter of putting a link there, thats simple enough.
{jrCore_module_url module="jrTags" assign="tmurl"}
<a href="{$jamroom_url}/{$tmurl}/">All Tags</a>

That will take you to:
your-site.com/tags

And if you decide to change the url to something else other than 'tags' the link wont break.
Clay Gordon
Clay Gordon
@claygordon
10 years ago
744 posts
I will add this right away, thanks!

--- edited to add ---

{* BEGIN Tag Cloud *}
                {jrTags_cloud height="350" assign="tag_cloud"}
                {if strlen($tag_cloud) > 0 && $_conf.nsTCLSkin1_tag_cloud == 'on'}
                    <div class="item blog-archive-header m10"><h2>Tag Cloud</h2>
                          {jrCore_module_url module="jrTags" assign="tmurl"} &nbsp; <a href="{$jamroom_url}/{$tmurl}/">All</a>                    
                    </div>
                    <div class="blog-index-text" style="margin: 10px 10px 0 10px;padding-bottom: 10px;">
                        {$tag_cloud}
                    </div>
                {/if}
            	{* END Tag Cloud *}

updated by @claygordon: 01/21/15 08:07:53PM
michael
@michael
10 years ago
7,778 posts
Yep, looks spot on.

Tags