UI Design sync between Kompakkt and Semantic Kompakkt

[lozanaross]

@Grizzly127 to coordinate work with @vmalieske and @NadNo12 that ensures Kompakkt and Semantic Kompakkt use nearly same UI design apart from Wikibase-specific components.

Use existing Google doc and Figma files to track the pages that need UI updates.

[Grizzly127]

Updates for the Explore page:

this is the Explore page for kompakkt:

this for semantic-kompakkt right now:

• the "sort by" is missing for semantic kompakkt
• remove the history button from the filter options in kompakkt and add it to the navigation bar like in semantic kompakkt
• add the New Object and for now for kompakkt also the New Collections button to the navigation bar
• the New object button for semantic kompakkt should be blue as well
• change the fontsize from the button to 14
• if possible change also the search options to font size 14
• in semantic kompakkt it also says "Search for objects and compilations", but we don't have the "compilations" here, only in kompakkt, so better write here "Search in objects" and in kompakkt better "Search in objects and collections" (or depending from the toggle function of the Objects and Collections)
• align the search options with the logo at the navigation bar
• gap between buttons, history button and "Profile"/"Logout": 8px
• (Sorry, my Figma file doesn't show the filter arrow correctly right now, but it stays the same)

@vmalieske @NadNo12

[lozanaross]

Hi Senya, I think this is a good start, but I think we should have the bullet list split in two groups - what needs changing in Kompakkt and what needs changing in Semantic Kompakkt. Maybe the SK bullets are only recorded in Gitlab, and here we only record what needs to change in Kompakkt.

I also found this doc: https://docs.google.com/document/d/1LpYLtyvN7L9SqWqyrBQ2BbvKze5U57b1iUtAPg3_0ZM/edit should we start there and go page by page? I think it's good idea to start with Explore, but then maybe check the google doc and assign pages from that to individual colleagues to tackle, so we don't need to recreate evertything in comments here, or is the google doc already a bit outdated?

[vmalieske]

• add the New Object and for now for kompakkt also the New Collections button to the navigation bar

When the user is not logged in, there are buttons for Login and Registration. Should these also be removed (since Login and Registration are already in the Navbar)?

[vmalieske]

This points are done:

• remove the history button from the filter options in kompakkt and add it to the navigation bar like in semantic kompakkt --> VE: Removed login and registration button from actionbar, removed actionbar from home-page
• add the New Object and for now for kompakkt also the New Collections button to the navigation bar
• change the fontsize from the button to 14
• if possible change also the search options to font size 14
• in semantic kompakkt it also says "Search for objects and compilations", but we don't have the "compilations" here, only in kompakkt, so better write here "Search in objects" and in kompakkt better "Search in objects and collections" (or depending from the toggle function of the Objects and Collections)
• align the search options with the logo at the navigation bar
• gap between buttons, history button and "Profile"/"Logout": 8px

Changes are within the pull request with the angular-material-upgrade.

[Grizzly127]

Hi Senya, I think this is a good start, but I think we should have the bullet list split in two groups - what needs changing in Kompakkt and what needs changing in Semantic Kompakkt. Maybe the SK bullets are only recorded in Gitlab, and here we only record what needs to change in Kompakkt.

okay, yes I can do that. For me it's easier to have both next to each other to synchronize it best, but I can split it afterwards, so it's easier for @vmalieske to work on it.

I also found this doc: https://docs.google.com/document/d/1LpYLtyvN7L9SqWqyrBQ2BbvKze5U57b1iUtAPg3_0ZM/edit should we start there and go page by page? I think it's good idea to start with Explore, but then maybe check the google doc and assign pages from that to individual colleagues to tackle, so we don't need to recreate everything in comments here, or is the google doc already a bit outdated?

Yes, unfortunately it is outdated now. I can still use it as an orientation and to know which pages to look at, but most of it is outdated and was already somehow updated. At least for the Repo, I didn't look into the viewer yet. But that also means, that there is a lot of work done already.

[Grizzly127]

• add the New Object and for now for kompakkt also the New Collections button to the navigation bar

When the user is not logged in, there are buttons for Login and Registration. Should these also be removed (since Login and Registration are already in the Navbar)?

Yes, @vmalieske I would remove them, you're right we already have it in the Navbar.

[Grizzly127]

object options kompakkt

current options:

• change the trash bin color to E91E63
• make sure the other parameter are correct; font: Open Sans, size: 14px
• object title same font and same size. (In kompakkt it was smaller than in semantic kompakkt.) both should also be 14px

@lozanaross @vmalieske

[Grizzly127]

Login and Register at the start page of kompakkt With the new Navigationbar the Login and Register options and the history button here on the start page of kompakkt should also be removed

@vmalieske

[Grizzly127]

Login and Register

Register

• The font for the "Cancel" and "Create new account" is wrong, change it to Open Sans
• The "Cancel" button is orange, it should be pink: E91E63.
• Same with the accent color of the input fields

Login

Login is mostly synchronized, but the "Cancel" button here is black. I think we should use the same on like in the Registration. Also use pink as the accent color: E91E63.

@lozanaross Question: I'm not sure with the colors anymore. Did we say we are using pink here and orange for semantic kompakkt or did we say we are using the same color for both?

@vmalieske

[lozanaross]

Hi Senya, I think this is a good start, but I think we should have the bullet list split in two groups - what needs changing in Kompakkt and what needs changing in Semantic Kompakkt. Maybe the SK bullets are only recorded in Gitlab, and here we only record what needs to change in Kompakkt.

okay, yes I can do that. For me it's easier to have both next to each other to synchronize it best, but I can split it afterwards, so it's easier for @vmalieske to work on it.

This will work - thanks!

I also found this doc: https://docs.google.com/document/d/1LpYLtyvN7L9SqWqyrBQ2BbvKze5U57b1iUtAPg3_0ZM/edit should we start there and go page by page? I think it's good idea to start with Explore, but then maybe check the google doc and assign pages from that to individual colleagues to tackle, so we don't need to recreate everything in comments here, or is the google doc already a bit outdated?

Yes, unfortunately it is outdated now. I can still use it as an orientation and to know which pages to look at, but most of it is outdated and was already somehow updated. At least for the Repo, I didn't look into the viewer yet. But that also means, that there is a lot of work done already.

OK, that's good news then.

[lozanaross]

@lozanaross Question: I'm not sure with the colors anymore. Did we say we are using pink here and orange for semantic kompakkt or did we say we are using the same color for both?

I think we agreed that we'll use same color for both (so pink) when it comes to functional elements. Maybe we can discuss further how to use orange in SK in a way that only concerns the Wikibase metadata that doesn't exist in Kompakkt anyway. But that's a separate task.

@HeyItsBATMAN can you assign this whole issue to @vmalieske so she gets notifications without need to be tagged in every comment.

[Grizzly127]

object view option bar

• Since we changed the navigation bar, the "History", "New Object" and "New Collection" button can be removed here.

• Move everything to the right to make it the same like in semantic kompakkt.

• We are using an "Annotate" button in semantic kompakkt, so replace the Annotate icon with the button.

• change the color to blue for the "Annotate" and the "Publish" button. Colorcode: 00AFE7

• make sure the font of the buttons is Open Sans and size 14px.

• I'm not sure about this icon: , it says "Use this object in a collection", I think it means to use it in an already existing collection. Is that option also possible in the "New Collection" button or can we integrate that there or should we keep the icon here? @lozanaross

• The three icons under the picture description also are integrated in the option bar now to make it similar to semantic kompakkt.

• Align the navigation bar and the option bar (both with 24px gap from the right)

• gap between the icons: 16px, the rest stays 8px.

new:

[vmalieske]

To point 3 (Annotate-Button): How should the disabled button look like? At the moment, it is just grey:

And should there be a tooltip for that button? At the moment, there is a tooltip when disabled (You are not allowed to annotate right now) and no tooltip when enabled.

[Grizzly127]

Upload process

Change the color of the "Reset" button here in kompakkt to the pink color And in previous versions sometimes there was a wrong font used (Helvetica Neue I think), I am not sure about the current font, it is not clear to me right now. But make sure for the buttons and for the text that Open Sans is used.

in kompakkt you can also see the annotation icon here, since you can't annotate here, we should remove it

The matadata formula looks very different, but I think this also belongs to the discussion of #42 first.

something is wrong here at kompakkt at the Finlize site for the settings:

[lozanaross]

Thanks for summarising the next set of issues here @Grizzly127

Regarding your question:

I'm not sure about this icon: image , it says "Use this object in a collection", I think it means to use it in an already existing collection. Is that option also possible in the "New Collection" button or can we integrate that there or should we keep the icon here? @lozanaross

We had a solution with a single icon that could solve both adding to an existing and to a new collection when we designed the new Explore / institutional page. Perhaps you can find that in the Figma file and paste here (I think the solution was in the pop up that opens when clicking the "[+]" icon). I think we should use that same icon here and position the collection-related icons as per your mockups:

Also I just noticed I don't think we have an issue dedicated to the institutional page, only to its mobile version, maybe worth making.

[lozanaross]

To point 3 (Annotate-Button): How should the disabled button look like? At the moment, it is just grey:

And should there be a tooltip for that button? At the moment, there is a tooltip when disabled (You are not allowed to annotate right now) and no tooltip when enabled.

Thanks for the question @vmalieske - I think we don't need a tooltip when the button is active, it's self-explanatory. But I wonder why would we show it disabled. I think if the user doesn't have privileges to edit an object, the button should simply not be there? And it could appear when the user does have the rights.

Or what do you think @HeyItsBATMAN @ZetOE @Grizzly127

Alternatively, if the annotate button is showed grey, we should align the tooltip across both versions - currently in SK, it says: "Only the object owner is allowed to annotate this object." I don't think this is great, but neither is the Kompakkt version, we need some text to indicate that you can't annotate right now, but maybe you could if you add to collection. So perhaps we change the text in both versions to: "Add object to collection to be able to annotate"

[HeyItsBATMAN]

I don't have a strong opinion on this. I guess it can be removed if the user is not able to annotate it, but theoretically, a user can always annotate an object that is part of a collection, and any public object can be added to a collection, and then be annotated.

So I think the "Annotate"-button could be removed going forward, in favor of guiding the user to creating annotations inside of collections?

The only case where it's useful is if the uploader of an object needs to modify the default annotations, right?

[Grizzly127]

We had a solution with a single icon that could solve both adding to an existing and to a new collection when we designed the new Explore / institutional page. Perhaps you can find that in the Figma file and paste here (I think the solution was in the pop up that opens when clicking the "[+]" icon). I think we should use that same icon here and position the collection-related icons as per your mockups:

Good idea, then we add this icon here and the user gets two options on adding an object to a collection in kompakkt:

[vmalieske]

@HeyItsBATMAN Could you have a look at the last commit? Just the code of actionbar. I had to rewrite the metadata-functionality (switch the icons from detail-page to actionbar) and want to be sure that it's okay.

[vmalieske]

We had a solution with a single icon that could solve both adding to an existing and to a new collection when we designed the new Explore / institutional page. Perhaps you can find that in the Figma file and paste here (I think the solution was in the pop up that opens when clicking the "[+]" icon). I think we should use that same icon here and position the collection-related icons as per your mockups:

Good idea, then we add this icon here and the user gets two options on adding an object to a collection in kompakkt:

And then another small option-window for the existing collections?

[lozanaross]

Good idea, then we add this icon here and the user gets two options on adding an object to a collection in kompakkt:

@Grizzly127 do you think we should move some buttons to the left? now all buttons are bundled on the right and maybe it's becoming a bit heavy (visually) how about if we move Publish & Annotate to the left (and then these buttons are not visible anyway when another user (not the object owner) opens an object.

And maybe the [+] button is after the edit button, because then Add, Embed, etc, are always visible, whereas Edit disappears when you're not logged in, or when you're not the owner.

[lozanaross]

I don't have a strong opinion on this. I guess it can be removed if the user is not able to annotate it, but theoretically, a user can always annotate an object that is part of a collection, and any public object can be added to a collection, and then be annotated.

So I think the "Annotate"-button could be removed going forward, in favor of guiding the user to creating annotations inside of collections?

Maybe we can keep the Annotate button when an object is already inside a collection - @Grizzly127 do you want to work on a mockup of how this would look? it could just be the same button, but maybe there's also a special prompt once a user adds something in a collection in order to highlight the possibility for annotation a bit more.

The only case where it's useful is if the uploader of an object needs to modify the default annotations, right?

Yes, I think the owner / uploader of an object should always see the Annotate button.

[vmalieske]

We had a solution with a single icon that could solve both adding to an existing and to a new collection when we designed the new Explore / institutional page. Perhaps you can find that in the Figma file and paste here (I think the solution was in the pop up that opens when clicking the "[+]" icon). I think we should use that same icon here and position the collection-related icons as per your mockups:

Good idea, then we add this icon here and the user gets two options on adding an object to a collection in kompakkt:

That could be looked like this:

[vmalieske]

All design changes up to this point are in the pull request (forgot to mention the issue here). Except the Annotate-issue, there I will wait for the mockup, right?

[Grizzly127]

@Grizzly127 do you think we should move some buttons to the left? now all buttons are bundled on the right and maybe it's becoming a bit heavy (visually) how about if we move Publish & Annotate to the left (and then these buttons are not visible anyway when another user (not the object owner) opens an object.

And maybe the [+] button is after the edit button, because then Add, Embed, etc, are always visible, whereas Edit disappears when you're not logged in, or when you're not the owner.

Yes, we can change the edit and the [+] button, that makes sense. This is how it would look like to have the Publish and annotate on the left , but I think for me it was also okay to have all the functions in one place on the right.

@lozanaross

[Grizzly127]

That could be looked like this:

For me this would be good for now to see the names of the collection where you can add it too, yes!:) I would just say the option is called: "add to existing collection"

@vmalieske @lozanaross

[Grizzly127]

I don't have a strong opinion on this. I guess it can be removed if the user is not able to annotate it, but theoretically, a user can always annotate an object that is part of a collection, and any public object can be added to a collection, and then be annotated. So I think the "Annotate"-button could be removed going forward, in favor of guiding the user to creating annotations inside of collections?

Maybe we can keep the Annotate button when an object is already inside a collection - @Grizzly127 do you want to work on a mockup of how this would look? it could just be the same button, but maybe there's also a special prompt once a user adds something in a collection in order to highlight the possibility for annotation a bit more.

The only case where it's useful is if the uploader of an object needs to modify the default annotations, right?

Yes, I think the owner / uploader of an object should always see the Annotate button.

I don't know exactly what you mean here. Should I do a mock-up without the Annotate-button or a different kind of Annotate-button? Can you explain this issue again, please?

@HeyItsBATMAN @lozanaross

[lozanaross]

Yes, we can change the edit and the [+] button, that makes sense. This is how it would look like to have the Publish and annotate on the left , but I think for me it was also okay to have all the functions in one place on the right.

Thanks @Grizzly127 - agreed - Publish + Annotate buttons look not too bad on the left, but they can also stay in one place on the right. Please proceed with whichever version you prefer.

[lozanaross]

For me this would be good for now to see the names of the collection where you can add it too, yes!:) I would just say the option is called: "add to existing collection"

@Grizzly127 @vmalieske Yes, I also agree

[lozanaross]

I don't know exactly what you mean here. Should I do a mock-up without the Annotate-button or a different kind of Annotate-button? Can you explain this issue again, please?

@vmalieske @Grizzly127 @HeyItsBATMAN

As discussed today, let's keep Annotate button always visible for owners of objects and when the object is already inside a collection. When the object is not in a collection and the user is not the owner, they should see a grey button with a tooltip over the button that says: "To be able to annotate, add this object to one of your collections."

[Grizzly127]

Thanks @Grizzly127 - agreed - Publish + Annotate buttons look not too bad on the left, but they can also stay in one place on the right. Please proceed with whichever version you prefer.

Since the amount of buttons on the right, change sometimes when you are able to edit or not. Maybe it's better to put the Publish and Annotate button on the left

As discussed today, let's keep Annotate button always visible for owners of objects and when the object is already inside a collection. When the object is not in a collection and the user is not the owner, they should see a grey button with a tooltip over the button that says: "To be able to annotate, add this object to one of your collections."

I'm not sure about the size of the tooltip, what do you think?

@vmalieske @lozanaross

[Grizzly127]

Visibility Settings

These are the current settings for the visibility of an object in kompakkt

• [x] Change the order of "Submit" and "Cancel" button
• [x] Change the colors of the buttons
• [x] make the you in "Only you can see this object" bold.

In semantic kompakkt only the buttons need to be changed, then it is already the same. What do you think about making it look cleaner already? For example:

@vmalieske @lozanaross