[2.0/serendipity_event_freetag] use like categories

Discussion corner for Developers of Serendipity.
User avatar
yellowled
Regular
Posts: 7005
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: [2.0/serendipity_event_freetag] use like categories

Post by yellowled » Wed Jul 16, 2014 7:15 pm

garvinhicking wrote:Maybe placing this list/button inside that section would be better for users to find those tags again.
Placing buttons in a potentially collapsed section …? I don't follow.
garvinhicking wrote:However, maybe it's better to have the list of available tags below the input area instead of above it, so that you can always type the new tags without needing to scroll to the bottom?
I've had that in mind since Bernd mentioned it some time ago. Haven't gotten around to implementing it yet, and as far as I remember, there was something complicated about it. But yes, this is a good idea.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
yellowled
Regular
Posts: 7005
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: [2.0/serendipity_event_freetag] use like categories

Post by yellowled » Wed Jul 16, 2014 7:42 pm

Lux wrote:About 40 categories and 230 tags. (Yes, the blog is nine years old).
As for categories, the only issue that I really see is that the “Done” button is on the bottom. That would be an easy fix, especially since it's originally placed in the top right by the overlay plugin anyway.

As for tags, I have increased the number of tags in my dev blog greatly. I'm still not sure what exactly to do there. I like the idea of moving the tag list below the input field (and yes, the input field will be larger in the final release). Same as above for the “Done” button.

Other than that, I agree that the tag list is not very nice. It's hard to find specific tags in the list, and that's not related to the size of the overlay window. The tag list itself gets too cluttered if there is a large number of tags (I haven't gotten to 230 quite yet, but I think my current number is close enough). But all that is related to the large number of tags …

An idea that I like is to hide all tags initially, but to display an A-Z index. Tags are group by their first character anyway. So that way, if you had tags starting with A, B and C, you would only see buttons labelled A, B and C. If you would click on A, it would list all tags starting with the latter A etc.

However, I'm not sure that's more usable than the current solution, either.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Lux
Regular
Posts: 761
Joined: Fri Aug 12, 2005 4:36 pm
Location: Grüt, Zürich, Switzerland
Contact:

Re: [2.0/serendipity_event_freetag] use like categories

Post by Lux » Thu Jul 17, 2014 8:45 am

yellowled wrote:Yes, it is highly unlike that anyone will ever write a longer blog post on a smartphone. Then again, we don't have the data to validate the assumption that most users write long text-based posts at a desktop computer with a minimum resolution of AxB anyway.
We have no reason not to ask our userbase for that ...
yellowled wrote:
Lux wrote:The tag list beforehand had a better usability - at least for me - than the recent one.
The only differences between the tags lists in 1.x and 2.x are that it is always visible in 1.x and has a smaller font-size. The latter is definitely not better for usability, ...
Don't agree, I was able to see the complete list in one window, every tag was reachable without necessity to scroll.

Needing to scroll is evil ... :-)
yellowled wrote:An idea that I like is to hide all tags initially, but to display an A-Z index. Tags are group by their first character anyway. So that way, if you had tags starting with A, B and C, you would only see buttons labelled A, B and C. If you would click on A, it would list all tags starting with the latter A etc.

However, I'm not sure that's more usable than the current solution, either.
I think it is not. From two clicks "fundstuecke" and "osbn" and saving the article for example, I have to click and scroll many more times. Click "f", scroll to "fundstuecke", click again, click "o", click "osbn", click "ok", (click save article).

Cheers

Dirk

User avatar
yellowled
Regular
Posts: 7005
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: [2.0/serendipity_event_freetag] use like categories

Post by yellowled » Thu Jul 17, 2014 11:44 am

Lux wrote:We have no reason not to ask our userbase for that ...
Yes, of course we could do a survey of the current userbase. By that, we would delay the 2.x release even further, and we would still not get valid data because we would only survey current users. Most of them have been using the 1.x backend for years – of course they're going to prefer things that they're used to. Being used to something does not necessarily mean it's “better”, though.
Lux wrote:Needing to scroll is evil ... :-)
So needing to scroll is evil, needing to click is evil … would you maybe prefer a shell script to administrate your blog and post your entries? :wink:

To sum this up: I will definitely revise the tags overlay window and take your (much appreciated) feedback into consideration. The current solution is not perfect, but neither was the previous solution. I'm technically still on vacation for another 10 days, so please don't expect a revised solution in the next couple of days.

If anyone still has constructive suggestions as to how to improve this, please let me know.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Lux
Regular
Posts: 761
Joined: Fri Aug 12, 2005 4:36 pm
Location: Grüt, Zürich, Switzerland
Contact:

Re: [2.0/serendipity_event_freetag] use like categories

Post by Lux » Thu Jul 17, 2014 12:11 pm

yellowled wrote:
Lux wrote:We have no reason not to ask our userbase for that ...
Yes, of course we could do a survey of the current userbase. By that, we would delay the 2.x release even further, and we would still not get valid data because we would only survey current users. Most of them have been using the 1.x backend for years – of course they're going to prefer things that they're used to. Being used to something does not necessarily mean it's “better”, though.
Agreed.
yellowled wrote:
Lux wrote:Needing to scroll is evil ... :-)
So needing to scroll is evil, needing to click is evil … would you maybe prefer a shell script to administrate your blog and post your entries? :wink:
Yes, please, good idea, but due to work restrictions, it has to be web browser based ... :-)

No, honestly, we should keep an eye on the amount of actions that need to be taken for common tasks. Having said that we should keep the balance between efficiency and eye candy.

Cheers

Dirk

User avatar
onli
Regular
Posts: 2217
Joined: Tue Sep 09, 2008 10:04 pm
Contact:

Re: [2.0/serendipity_event_freetag] use like categories

Post by onli » Thu Jul 17, 2014 4:56 pm

No, honestly, we should keep an eye on the amount of actions that need to be taken for common tasks. Having said that we should keep the balance between efficiency and eye candy.
+1

We tried that and still try that :) I'm fully confident that YL will find a good solution to improve the tab-popup (input on top already sounds quite helpful, and a filtering-menu by alphabet could help as well - trading scrolling for clicks though). I have no further idea right now how this can be done better.

Btw, we already had help from an usability-expert (to some degree), though at an earlier stage of the development (before this tag/category widget was designed). He found some area of improvements, and I think we acted on almost all of it already.

User avatar
yellowled
Regular
Posts: 7005
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: [2.0/serendipity_event_freetag] use like categories

Post by yellowled » Fri Nov 14, 2014 2:23 pm

Let's see if I can wrap this up a little. I have done some work on the entry editor/categories/tags over the past couple of days, but not all of them are committed/published via Spartacus (yet).

Dirks initial concerns:
Lux wrote:1. set as draft (oh, in 2.0 I have to scroll and click metadata to set it to draft mode)
2. set category (new overlay appears, I have to scroll to see all categories)
3. set tags (same as category)
4. set publishing date in the future (same as draft), no calendar overlay ...
1. The entry editor now has an additional button in the entry editor toolbar for that
2. With a lot of categories, you'll have to scroll either way. I guess you would have to scroll (in the expanded select box) in a 1.x backend as well.
3. Since you're opposed to clicking and scrolling, I don't see why you would even use the clickable tag list and not the autocompletion in the input field. (You can disable the tag list in the Freetag plugin options.) That being said, I still don't have a good solution for that. Not sure there is one.
4. As stated before, the missing calendar overlay is because your browser (I'm guessing Firefox) doesn't support the new datetime-local input field yet. We opted to not polyfill that because of the overhead.

As of now, the best solution for you I can think of would be to disable overlays in the backend (which currently is only possible as a global option, see below). I guess that kind of depends on what you're most opposed to – clicking or scrolling. :? (Dirk, if you would like access to a dev blog where you can test this, ping me via email or something.)

Please note that this is by no means my “final take” on the entry editor. Still working on it. It's hard.
Lux wrote:for every action I have to switch between keyboard and mouse and I have to use both input methods to do it somewhat efficient
I guess that just comes with the territory in a web interface. I realize this is not neceessarily a great interface for keyboard-only use due to its complexity, but I'm not sure what we could do to improve that. Yes, we could add keyboard shortcuts – still an option, but a pain in the butt to implement. Which shortcuts do we use that are not used by the various browsers, how do we communicate that keyboard shortcuts even exists and what they are?
garvinhicking wrote:maybe it's better to have the list of available tags below the input area instead of above it
Implemented (that's one of the things not committed yet), including moving the “Done” button to the top right corner of the overlay. Might look a litte funny if you use a recent git checkout of the 2.0 core with a non-update freetags plugin.
garvinhicking wrote:On the other hand, we'd always have the option to create a new config option in the plugin to indicate [x] use inline display for freetags?
See above: I think we might need that, even for more things. I don't think the global “Use modal overlay or popups” option is granular enough at this point.

I also still think that both categories and tags could benefit from at least an option to display only the most used items, but I don't think that's going to make it into the RC, maybe not even the stable 2.0. It's just too much to think about and evaluate, and we want to get 2.0 released as soon as possible.

Also, the clickable tag list still needs a little more styling. As of now, it is very cluttered and hard to scan, making the whole overlay hard to scan. Haven't gotten around to that yet since I still need to understand how to emit version-specific CSS for plugins.

TL;DR: still working on it, still welcoming any input.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Lux
Regular
Posts: 761
Joined: Fri Aug 12, 2005 4:36 pm
Location: Grüt, Zürich, Switzerland
Contact:

Re: [2.0/serendipity_event_freetag] use like categories

Post by Lux » Fri Nov 14, 2014 2:44 pm

yellowled wrote:TL;DR: still working on it, still welcoming any input.
I will install the new version and give some feedback later on.

To be clear on some assumptions you made.

Coming from 1.7.8 you just have to click more and to scroll more in 2.0.0, even though the new one looks much better.

Category (if you only use one): Klick to open drop down, scroll the list, klick to select and close drop down (all without scrolling the whole window full of information).

New: Click, scroll the whole screen, klick, scroll again, klick to confirm (2 actions more than before).

Tags: See the list at the end of the article, klick the tags you want to have (all tags fit in one window).

New: Scroll to the top of the article, klick to open the tag window, scroll, klick to choose tag, (scroll), klick to choose another, confirm to end selection (several actions more than before).

Cheers

Dirk

User avatar
yellowled
Regular
Posts: 7005
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: [2.0/serendipity_event_freetag] use like categories

Post by yellowled » Fri Nov 14, 2014 4:30 pm

Lux wrote:I will install the new version and give some feedback later on.
You'll also need the latest version of the freetags plugin since I had to make some layout changes there. If you want to update that via GitHub (because Spartacus will take a while), you only need the new serendipity_event_freetag.php.
Lux wrote:New: Click, scroll the whole screen, klick, scroll again, klick to confirm (2 actions more than before).
Yes, that is a trade-off of multiple categories becoming much easier to handle.
Lux wrote:Tags: See the list at the end of the article, klick the tags you want to have (all tags fit in one window).
The fact that all tags fit in one window is arbitrary, even in the 1.x backend. Depends on the browser window size.
Lux wrote:New: Scroll to the top of the article, klick to open the tag window, scroll, klick to choose tag, (scroll), klick to choose another, confirm to end selection (several actions more than before).
There is a a way to replicate that behaviour in the 2.x backend:

* disable overlays (we need to make that option more granular so you can disable overlays in the entry editor but not in the media db)
* open Entry Metadata/Advanced Options (you only have to do that once, it will save the state in a cookie)

I realize that it still involves more scrolling than before.

On the other hand, the amount of scrolling that is necessary if using the overlays is directly related to the vast number of categories/tags, so we would ne a way to display those in a more compact interface. Currently, I just don't see how to do that (yet).

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
yellowled
Regular
Posts: 7005
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: [2.0/serendipity_event_freetag] use like categories

Post by yellowled » Fri Nov 14, 2014 9:34 pm

Just played with the category overlay a little. Here's what I came up with:

https://www.dropbox.com/s/dv17pm0wbo0ir ... 7.png?dl=0

That's about 40 categories in an overlay on a 1280x800 display. The categories are technically still checkboxes, all this is done in CSS only (you can activate a checkbox by clicking its label, so it works). Also, the overlay is much wider (on larger screens), so it offers more space. That should get rid of the need to scroll almost everywhere.

Basically the only downside would be that we would loose the ability to display nested categories properly (because they are no longer displayed below their parent category).

Thoughts?

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Lux
Regular
Posts: 761
Joined: Fri Aug 12, 2005 4:36 pm
Location: Grüt, Zürich, Switzerland
Contact:

Re: [2.0/serendipity_event_freetag] use like categories

Post by Lux » Fri Nov 14, 2014 10:19 pm

yellowled wrote:Just played with the category overlay a little. Here's what I came up with:
https://www.dropbox.com/s/dv17pm0wbo0ir ... 7.png?dl=0
This looks really great and solves the majority of problems I have.

Great work, Matthias!

Cheers

Dirk

User avatar
yellowled
Regular
Posts: 7005
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: [2.0/serendipity_event_freetag] use like categories

Post by yellowled » Fri Nov 14, 2014 10:53 pm

Lux wrote:This looks really great and solves the majority of problems I have.
Oh, okay. :D

Hold your horses, though – this is not implemented yet, and it will require quite some testing (so far, I have only seen this in Chrome using the Chrome devtools for CSS manipulations). I especially need to check if/how clicking the category labels works across different browsers. And of course it needs more styling, this was just a quick draft. (Would still like other people's feedback on this as well.)

About the tags … man, that's really hard. I even went as far as to check out how Wordpress and Ghost handle that. Turns out, both don't have a clickable list of tags, and probably for good reason. :wink:

I'll see what I can come up with for that.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Lux
Regular
Posts: 761
Joined: Fri Aug 12, 2005 4:36 pm
Location: Grüt, Zürich, Switzerland
Contact:

Re: [2.0/serendipity_event_freetag] use like categories

Post by Lux » Sat Nov 15, 2014 10:38 am

yellowled wrote:About the tags … man, that's really hard. I even went as far as to check out how Wordpress and Ghost handle that. Turns out, both don't have a clickable list of tags, and probably for good reason. :wink:
But maybe doing the same for tags would not be a big thing, wouldn't it?

Solving the "subcategory problem", eventually it would be enough to show the parent categories in a mouseover event?

Cheers

Dirk

User avatar
yellowled
Regular
Posts: 7005
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: [2.0/serendipity_event_freetag] use like categories

Post by yellowled » Sat Nov 15, 2014 11:15 am

Lux wrote:But maybe doing the same for tags would not be a big thing, wouldn't it?
It's an option, I'm just not sure it does the trick for tags.
Lux wrote:Solving the "subcategory problem", eventually it would be enough to show the parent categories in a mouseover event?
Maybe. I'm not really sure what's necessary here and what works well because I never use child categories.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
yellowled
Regular
Posts: 7005
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: [2.0/serendipity_event_freetag] use like categories

Post by yellowled » Sat Nov 15, 2014 1:43 pm

yellowled wrote:Hold your horses, though – this is not implemented yet, and it will require quite some testing (so far, I have only seen this in Chrome using the Chrome devtools for CSS manipulations).
Okay, so that's in the core now. That also makes the freetags overlay wider on larger screens, but I'm not sure that does the trick just yet.

As of now, one of my ideas would be to split the freetags overlay in tabs – one with just the (autocomplete) input field, one with the clickable tags list. That would make the overlay way easier to scan. Of course, the tabs would have to remember the last selected tab in a cookie. Still mulling over this, though.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Post Reply