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