Viewer Annotation cards

[Grizzly127]

Viewer Design

Here are suggestions for the viewer side bar and the viewer cards:

Here you can see the sidebar where the annotations are listed. On top there is an infobox about the default annotations, then you can see the preview for the first annotation, the title and the annotation itself (here only a description for the first annotation). The annotations are separated with a grey line.

The card for the annotations could look like this:
Either only text or text and media.

You have icons to make the annotation bigger. That could look like here for example. The background could become more transparent or darker then.

And you have an icon to edit or delete an annotation.

Delete:

Edit:
Here we should discuss how exactly media is embedded. With a link? How to add several media types?

@HeyItsBATMAN @ZetOE @lozanaross

[lozanaross]

Thanks @Grizzly127 - this looks good in general. Two questions:

• if we look at the comparison file that we had (between Kompakkt and Semantic Kompakkt) I think we already identified some icons that need alignment (for example I think the icon to make annotation bigger at the moment is wrong, i changed it on purpose in SK because the icon used here is typically used for external links not to make components bigger).
• i think the icons in SK are distributed in the bottom and only the X is at the top - maybe better to keep that way because I have a feeling we have more icons in SK and won't be able to fit them all in the top? what do you think?

[Grizzly127]

Thank you for the feedback @lozanaross
Yes, you're right, we should use another icon to extend the window. I don't think the old one was descriptive enough either, but I used the icon to extend a window now. Do you think that's better?
In SK we don't really have more icons. This was the window in sk:

The "delete" button appears as an option to edit the annotation.

Questions:

• Do we need the "Copy to collection" button? I don't understand when the user uses it.
• The "save" button means "Export to JSON" here. Do we need that here?

The new window:
I put the icons on the bottom now. Yes, maybe that's better so we can still add icons in case we want to add more functions.
I added a toggle to show and hide an annotation.

I also added the icons to the annotation list on the left

• Do you think we need them here again or is it too much to have it twice and it makes sense to have the edit options only at the cards?

I changed the Infobox to @HeyItsBATMAN suggestion. Like that we can use the box more universal, maybe also as a "Warning" or "Important" box if we need that somewhere.

[lozanaross]

Thanks @Grizzly127.

I have a few further comments:

The "delete" button appears as an option to edit the annotation.

This I don't fully understand what you mean here. Delete button in SK means deleting annotation also in WB. Not sure what it does in Kompakkt, but it should be a real delete button maybe, so users can permanently delete the annotation?

Questions:

Do we need the "Copy to collection" button? I don't understand when the user uses it.
Zoe can explain this more, but yes, it's needed for managing collections, so we should keep it. Annotations don't automatically travel with objects when they are added to collections, so that users can choose if they want to copy them over or make new ones.
The "save" button means "Export to JSON" here. Do we need that here?

Hm, ok, that's a useful function, but maybe should not be save icon, but rather the download icon? And don't we still need a save icon to 'save' after a user edits something? I gather maybe we're autosaving anyway, but sometimes users need a the visual security of a save button purely for cosmetic reasons, so they feel 'safe' even if the tool doesn't need them to click anything technically. This is also a Q for @HeyItsBATMAN

Regarding the expanding icon - I think I prefer the one we use in SK - it's a bit obscure but it functions both ways - making window smaller or bigger. The expanding icon you selected would need flipping once the window is bigger, to indicate possibility to make it smaller again.

I also agree there is an issue with having too many icons duplicated in both main annotation window and in sidebar.

In sidebar we should maybe have the full range of options:

• toggle visibility (do we want also a little eye icon next to the toggle, to indicate more easily what it does?)
• copy to collection
• export to JSON
• edit
• delete
  (am I missing something?)

In annotation window we could then have only (mode 1):

• edit
• expand (or collapse) window
• close

Once users click the edit button, we need to provide I think a slightly different set (mode 2):

• expand (or collapse) window
• save
• delete
• close

If they click save, then we revert back to the mode 1 above.

I wonder if visibility toggle is needed in the annotation windows? I feel like maybe it's enough if it's only in the sidebar.

Let me know what you think re. all the above suggestions.

[HeyItsBATMAN]

Hm, ok, that's a useful function, but maybe should not be save icon, but rather the download icon?

Agree, this icon should be swapped.

And don't we still need a save icon to 'save' after a user edits something? I gather maybe we're autosaving anyway, but sometimes users need a the visual security of a save button purely for cosmetic reasons, so they feel 'safe' even if the tool doesn't need them to click anything technically. This is also a Q for @HeyItsBATMAN

"Closing" the edit mode autosaves changes to annotations, as well as reordering them by dragging and dropping saves the changed order. However, there could probably be a global indicator, always visible when annotating or changing settings, to indicate saving progress.

There are some Cloud Icons in Material Icons, and Figma uses a cloud to indicate saving progress as well, but we can choose whatever we want as long as it's a better indicator to the users.

[Grizzly127]

I added the icons to the sidebar and put the icons on the window to the bottom. For the visibility I added an eye icon and the crossed out eye for hiding. I just have concerns because we used the eye icon for the preview at the explore/Institutional page.
There is another icon for preview:
Should we exchange it then?

This I don't fully understand what you mean here. Delete button in SK means deleting annotation also in WB. Not sure what it does in Kompakkt, but it should be a real delete button maybe, so users can permanently delete the annotation?

This is what I meant with the delete option:

but since we used a delete icon now we can also add it here as an option:

This is the edit mode window then:

Here are just some questions open: We should discuss how exactly media is embedded. With a link? How to add several media types?

@lozanaross @ZetOE

[lozanaross]

Dear @Grizzly127 & @HeyItsBATMAN - thanks for above comments.

Regarding autosaving @Grizzly127 can you mockup something that indicates (globally) to users when autosaving has completed... maybe a small popup banner in the top or bottom that pops up discretely and moves out of view when autosave is complete. It can be text with some kind of icon (cloud icon?) indeed.

Regarding the preview button - aha, yes better to use the eye here for visibility - what's the preview icon that we can use in explore page?

Regarding delete - I think for consistency, it's better not to have a dropdown menu under edit icon, but simple click that opens the edit view and then delete has it's own icon, as mocked up above.

I would also like to see how adding media works, so please post a mockup here when that's decided. Thanks!

[Grizzly127]

Sidebar design and edit annotation window:

Light and dark mode:

• we adjusted the design to the viewer settings sidebar, now we have this grey boxes around the annotations
• we included all icons
• we added a header

Edit annotation window
we created one big editor for the annotations:

light mode:

dark mode:

• including a preview
• including an option to embed media
• a delete option was added into the editor
• you have the embed media option here
• when you embed media and click "add", the media is added and the input fields are empty again to add more media
• we suggest to only use this editor and not a big and a small editor

@lozanaross @HeyItsBATMAN

[lozanaross]

Thanks @Grizzly127 - the sidebar design looks quite good, I just have a few questions:

1. What happends if users close the info box? Can they bring it back up again? Isn't it better if we make it collapsible (with up / down arrow) rather than closable.

2. I think we can improve the text inside the info box, it's a bit confusing when it's talking about 'foreign entities' and mixing 'entities' with 'objects'. How about:
   If you uploaded this object and would like to edit the default annotations make sure to load and view the object outside the context of a collection. If you didn't upload this object, you can't edit the default annotations. Add this object to a collection to be able to save your annotations and make them visible to others in the context of the collection.

3. What's the meaning of the extra download icon in the bottom of the sidebar?

[lozanaross]

@Grizzly127 I am not sure about the design of the Edit Annotation window. What is the need to see the preview next to the editing window? It takes up a lot of space without providing much new information. I think the way the preview was a switch (with the eye icon) was a bit better before. And the bigger the edit window in Kompakkt is, it means it will get even bigger in SK where we have more options. Adding grey boxes within a larger white box is also a bit of a strange design pattern that I don't think we've used elsewhere. I would suggest we use the SK window as a guide and just make a more minimal version for Kompakkt that doesn't have author, license, and related concepts.

[lozanaross]

@Grizzly127 I see here you also have the boxes within boxes in the annotation sidebar, but those are also unnecessary, the way you had the design earlier looked fine, with thin dividing lines. The only thing you can do to make the lines look more elegant is to run them edge to edge, so don't give them padding, just run them straight through the entire sidebar, this will be more in line with how lines are used in other parts of the UI - think about navigation and action bars, metadata on the side of the viewer window, etc.

[Grizzly127]

Edit annotation window

Here is one version with tabs to see the preview, this is an example for kompakkt, where you can embed media.

dark:

light:

Here is one version with icons to see the preview or continue editing, this is an example for semantic kompakkt with more options.

dark:

light:

@lozanaross

[Grizzly127]

Thanks @Grizzly127 - the sidebar design looks quite good, I just have a few questions:

1. What happends if users close the info box? Can they bring it back up again? Isn't it better if we make it collapsible (with up / down arrow) rather than closable.

The idea was that it appears always when you open the annotations as a note, but to have more space, the user can close it.
Since it is just a hint, I thought it is not necessary to reopen it.

2. I think we can improve the text inside the info box, it's a bit confusing when it's talking about 'foreign entities' and mixing 'entities' with 'objects'. How about:
   If you uploaded this object and would like to edit the default annotations make sure to load and view the object outside the context of a collection. If you didn't upload this object, you can't edit the default annotations. Add this object to a collection to be able to save your annotations and make them visible to others in the context of the collection.

Yes, I can change the text.

3. What's the meaning of the extra download icon in the bottom of the sidebar?

It is for downloading all annotation at once.

@lozanaross

[lozanaross]

Edit annotation window

Here is one version with tabs to see the preview, this is an example for kompakkt, where you can embed media.

@Grizzly127 Great - love the tabs, let's go with that. Just not sure about the delete icon - what is it supposed to delete? For me it would make sense to be able to delete the embedded media after it's been added, but that can work similar to how the metadata wizard has a red x mark to delete something added. If it's an icon to delete the whole annotation, it probably makes more sense to either live only in the sidebar as an icon, or to be a button next to cancel / save: e.g. cancel / delete / save, and delete is outlined like cancel.

For the embedded media - we should bring this back in SK, too actually, but I would suggest not having two styles of text there, but rather only "Embed media URL" and then "Fallback description" next to it.

And I now think maybe we don't need so many add buttons - perhaps it's just one in the end - if you look at the metadata wizard, the creation data can be added all in one go.

The Wikibase fields in SK should all be not text entry fields, though, but rather the search fields with magnifier icon, like in the metadata wizard. Description author and license should be directly underneath the description I think, it doesn't make sense to separate them, then we can have a separator line, and then "Embed media", "Add related media", "Add related concepts" below. So maybe we have Add button only in 2 places below license and below related concepts, and the whole dialog window has two main sections - top one around the description, and bottom one focused on the related bits.

[lozanaross]

The idea was that it appears always when you open the annotations as a note, but to have more space, the user can close it. Since it is just a hint, I thought it is not necessary to reopen it.

@Grizzly127 OK

It is for downloading all annotation at once.

Hm, I wonder if maybe we should make this more clear, like "Download all annotations [icon]" - spell it out, otherwise it's possibly confusing.

[Grizzly127]

Hm, I wonder if maybe we should make this more clear, like "Download all annotations [icon]" - spell it out, otherwise it's possibly confusing.

We could spell it out:

We could add a tooltip:

We could make a button:

I think there is also some information, that it is downloaded in json-format. Do we need to add this information?

@lozanaross

[Grizzly127]

@lozanaross
You are right, we don't need the delete button here, I just misunderstood something from a previous comment.

Here I implemented the comments for the semantic kompakkt annotation editor:

[lozanaross]

@Grizzly127

We could make a button

Yes, button is nicest I think, just need to think is it a fully rounded button (like a pill as you've mocked it up), or a rectangular button with rounded edges, if you look at the settings sidebar, i think you use the rectangular buttons more... but what is the difference... do we have a logical division when we use which type of button?

I think there is also some information, that it is downloaded in json-format. Do we need to add this information?

This we can skip i think, because all download buttons deliver json, so they'll get it if they try it once.

[lozanaross]

@Grizzly127, regarding the designs of the expanded annotation dialog:

@lozanaross You are right, we don't need the delete button here, I just misunderstood something from a previous comment.

Here I implemented the comments for the semantic kompakkt annotation editor:

All looks great, just see my comment here: https://gitlab.com/nfdi4culture/ta1-data-enrichment/semantic-kompakkt/-/work_items/121#note_2032680383

We can apply these rules here, and you can in fact also see the expandable edge of the text field (marked by the two diagonal lines) here in Github comments, too.

[Grizzly127]

Yes, button is nicest I think, just need to think is it a fully rounded button (like a pill as you've mocked it up), or a rectangular button with rounded edges, if you look at the settings sidebar, i think you use the rectangular buttons more... but what is the difference... do we have a logical division when we use which type of button?

@lozanaross
The rule was if the button has an icon in it, then it is a pill. If it is only text, it is more rectangular.

[Grizzly127]

We can apply these rules here, and you can in fact also see the expandable edge of the text field (marked by the two diagonal lines) here in Github comments, too.

I added the designs for semantic-kompakkt in gitlab (https://gitlab.com/nfdi4culture/ta1-data-enrichment/semantic-kompakkt/-/work_items/121#note_2033132532)
maybe I will find out, how to make the two lines smaller in Figma.
here are the kompakkt designs:

dark mode:

light mode:

@lozanaross

[Grizzly127]

sidebar update

This is how the sidebar would look like with the button:
I think it is good and it can be a pill.

@lozanaross

[lozanaross]

@Grizzly127 Looks great, thanks, all makes sense. Regarding the small lines that act as toggle, don't worry, that's a standard element in the frontend framework, so can be used out of the box.

[Grizzly127]

Viewer annotation all

We changed "Content" to "Annotation body" in semantic kompakkt, therefore also here in kompakkt the changes:

and here is one mockup of everything together:

• the sidebar without the collection icon for kompakkt
• the small annotation window (I'm wondering what the "extend window" would do here? But we still need it for annotations with more text, right? @lozanaross )
• the edit annotation window for kompakkt
• should the edit window get an "X" to close it? or is "Cancel" enough?

[lozanaross]

@Grizzly127, comments below:

Viewer annotation all

We changed "Content" to "Annotation body" in semantic kompakkt, therefore also here in kompakkt the changes:

Great.

and here is one mockup of everything together:

• the sidebar without the collection icon for kompakkt
• the small annotation window (I'm wondering what the "extend window" would do here? But we still need it for annotations with more text, right? @lozanaross )

By 'extend window' do you mean the icon that opens 'preview'? I think it actually doesn't make much sense anymore due to various other redesigns of the main edit window. If you mean this icon:
I think we can perhaps get rid of it? Doesn't seem necessary anymore, since Preview is simply a tab within Edit.

• the edit annotation window for kompakkt

I noticed something else now, when I start making a new annotation, the first thing I get is this one:

But this is not very useful because I can't do anything there and should immediate press edit. Why don't we immediately open the Edit view when a user starts a new annotation? @HeyItsBATMAN @ZetOE

Also looks like the delete & edit button are reversed, i think edit should come first.

• should the edit window get an "X" to close it? or is "Cancel" enough?

Cancel is enough I think.

[Grizzly127]

If you mean this icon:
Screenshot 2024-09-03 at 16 38 01 I think we can perhaps get rid of it? Doesn't seem necessary anymore, since Preview is simply a tab within Edit.

Yes I mean this icon. It was not for preview, but for extending the window and having a bigger/smaller one if there is more text for example.

Why don't we immediately open the Edit view when a user starts a new annotation?

@lozanaross Good idea, I think this makes the most sense for the user.