New "add annotation" icon

Hello everyone! :hugs: :hugs:
Dropped by to discuss the way users add annotations in XWiki.


Current situation: User selects some text and uses Ctrl+ M to add annotation.

Issue #1: Other than simply exploring and trying stuff, there is no way for a new user to know how to annotate text in XWiki as the current process does not follow obvious/familiar UX patterns.

Issue #2: An annotation can be made only through keyboard: Ctrl + M. There is no button for doing this action.

Proposal: When selecting a piece of text in view mode, the user can see an icon in the upper corner of his selected text. See details below.


Improvement details

As said before, when selecting a piece of text in view mode, the user should see an icon in the upper corner of his selected text.

  • When clicking that specific icon, the user can add an annotation.

  • The icon should have some invisible padding around it so it’s slightly easier to click the actual icon.

  • The CTRL + M keyboard shortcut is kept as a functionality.

The icon should showcase the idea of adding a mention/note/comment very clearly. The “note” icon in FA is not as clear in that sense, so I would incline to using a comment-like icon:

1733315582943-597.png

This icon is not in our current Icon theme.

If we are moving forward with this proposal, I will add a Silk mapping too.

What do you think?

Do you think it is difficult to implement this in XS?

Generally speaking, while I have a technical background, I think keyboard shortcuts are awkward as a first / unique way to issue a command, moreover if the tool isn’t used with high frequency - memorizing the shortcut is hard - w.r.t. copy-pasting, which is probably done daily and Ctrl+C / Ctrl+V are easy to remember, also because they’re shared by many applications.

So, welcome an icon that helps with this interaction :slight_smile:

1 Like

It’s not exactly true since we mention the keyboard shortcut at:

But if annotations are enabled by default then it’s true.

Sounds good to me.

Sounds good too.

Thx!

1 Like

To be more precise, comment or comments would work for me: https://design.xwiki.org/xwiki/bin/view/Proposal/XWiki%20Icon%20Set

1 Like

+1, for accessibility we want a clickable area of at least 24*24px

As far as I remember, annotations are pretty much just comments with extra data (we can see them in the comment Tab) so I think it’d be okay to use the comment icon for annotations.

We can propose adding an icon to the icon theme for this. If we’re sure to not duplicate anything already in it’s okay to do :+1:

Personally I think it could become distracting when trying to read some text. As a technical user that’s used to using the shortcut, I think I’d want a toggle to disable it. During most of the time I spend on XWiki, I’m not really using the annotation feature. I think having so much focus on the feature is not something we want.

We already have a similar style/positioning for the annotation already created icon, so it should be straightforward to implement this style. I’m pretty sure this is possible to do with javascript without a workaround.

1 Like

Yes, we could definitely go with what we already have so we don’t add a single icon for a very specifc use case.

Just to clarify if it wasn’t clear from my proposal:

The icon would appear only when selecting the text with the mouse. When just reading text and hovering on it there wouldn’t be in any icon.

Selecting text usecases

As I explained in the design page:

When selecting a text in view mode in XWiki you either want to:

  • copy it,
  • annotate it
  • or, you’re presenting and trying to highlight the text to someone while talking.

My bad, my mind was too closed to this change the other day and the point I made did not sense.
This very forum has a huge popup when a user highlights text and it’s not distracting me. I expect it and don’t even look at it when I’m not using it (eg when I copy some text or a link). Note that the fade-in animation helps in making it a bit less aggressive, it’d be nice to have in our implementation too.

Thank you for taking the time to explain things again!

Lucas C.