Skip to content

UI Design

Romke van Dijk edited this page Oct 4, 2023 · 1 revision

This is a very early page, but when ever there have been some discussion about the design of the UI. It can be written here for future reference.

Data loading and informing the user

When data is being loaded, the loader should be close to the location of the data. In case of a full table, add a spinner to the table. For specific fields, add a spinner to the field (only show the spinner if the user clicks on it and the data is not loaded yet). Was there an error? Inform the user about this. There is no need to implement some kind of delay on the spinner, as the spinner should not 'bother' the user in anyway.

Button style

Buttons should just be the simple style, we currently use the awesomefont bolt for all buttons.

Not having permissions for something

(This is not implemented at all) If a user does not have the permission for something. The button should be there, but the buttons should be grayed out. This can be done with AuthGuard.

Redirecting after creating something

After creating something, it should redirect you to the overview of the stuff you created. Example: created a Hashlist? Redirect to the table of Hashlists.

Action buttons in a table

To prevent the action buttons from overflowing the task, we added the 3 dot menu. No action icons should be in the table directly. Description of what a button do can be placed in the drop down menu in the 3 dot menu.

Yes, this means that for some actions you will have another click. But with this there will be no discussion on what should be in the table and what should be in an overflow menu. Also icons can have a description next to them and they do not need to be unique anymore.