Create mock User Interface/wireframe

dbampalikis commented

2026-02-04 09:17:45 +00:00

(Migrated from github.com)

As a developer
I want to have a mock up User Interface that will show the different fields and functionalities
In order to plan the development of the next features.

Notes:

This is a sketch/proof of concept of how the website structure/layout will look.

AC:

A web UI similar to how we mocked previous projects in early phases.
This should showcase most of the workflow diagram.

As a developer I want to have a mock up User Interface that will show the different fields and functionalities In order to plan the development of the next features. Notes: - This is a sketch/proof of concept of how the website structure/layout will look. AC: - A web UI similar to how we mocked previous projects in early phases. - This should showcase most of the workflow diagram.

pdmnyberg commented

2026-04-14 11:20:26 +00:00

(Migrated from github.com)

A mock UI can be found here: https://pdmnyberg.github.io/ui-examples/sdad/ it tries to mock most of the systems functionality but ignores the login flow since that is expected to be a fairly known experience already.

aaperis commented

2026-04-15 12:01:38 +00:00

(Migrated from github.com)

Looks awsome 👍

Looks awsome :+1:

HenrikeW commented

2026-04-15 14:31:16 +00:00

(Migrated from github.com)

I think this covers most system functionality in a nice way. One thought: When I looked at the dataset list view and clicked on one dataset ID, I thought that the information about the dataset had appeared above the table listing all datasets. It was only after some minute or so that I realized that the table I saw was a different table, now listing the files of the dataset I clicked on. To sum it up, the UI for the dataset list and the UI for the dataset view become very similar, especially considering the rather abstract information in the tables.

In some issue I remember that at some point a card layout was mentioned for the list of datasets. Could that be a better option here, only for the dataset list view? It could still have pagination, search and filter functionality but might be a bit more user friendly.

I think this covers most system functionality in a nice way. One thought: When I looked at the dataset list view and clicked on one dataset ID, I thought that the information about the dataset had appeared above the table listing all datasets. It was only after some minute or so that I realized that the table I saw was a _different_ table, now listing the files of the dataset I clicked on. To sum it up, the UI for the dataset list and the UI for the dataset view become very similar, especially considering the rather abstract information in the tables. In some issue I remember that at some point a card layout was mentioned for the list of datasets. Could that be a better option here, only for the dataset list view? It could still have pagination, search and filter functionality but might be a bit more user friendly.

pdmnyberg commented

2026-04-16 07:00:24 +00:00

(Migrated from github.com)

I think this covers most system functionality in a nice way. One thought: When I looked at the dataset list view and clicked on one dataset ID, I thought that the information about the dataset had appeared above the table listing all datasets. It was only after some minute or so that I realized that the table I saw was a different table, now listing the files of the dataset I clicked on. To sum it up, the UI for the dataset list and the UI for the dataset view become very similar, especially considering the rather abstract information in the tables.

In some issue I remember that at some point a card layout was mentioned for the list of datasets. Could that be a better option here, only for the dataset list view? It could still have pagination, search and filter functionality but might be a bit more user friendly.

I think you make a good point here. It should be pretty quick to try it out in this example so I can try to do that just to give us a quick test of it. Otherwise we could also leave it as an idea for the actual implementation later.

> I think this covers most system functionality in a nice way. One thought: When I looked at the dataset list view and clicked on one dataset ID, I thought that the information about the dataset had appeared above the table listing all datasets. It was only after some minute or so that I realized that the table I saw was a _different_ table, now listing the files of the dataset I clicked on. To sum it up, the UI for the dataset list and the UI for the dataset view become very similar, especially considering the rather abstract information in the tables. > > In some issue I remember that at some point a card layout was mentioned for the list of datasets. Could that be a better option here, only for the dataset list view? It could still have pagination, search and filter functionality but might be a bit more user friendly. I think you make a good point here. It should be pretty quick to try it out in this example so I can try to do that just to give us a quick test of it. Otherwise we could also leave it as an idea for the actual implementation later.

👍 1

aaperis commented

2026-04-17 07:09:26 +00:00

(Migrated from github.com)

The card layout looks neat!

pdmnyberg commented

2026-04-17 07:51:49 +00:00

(Migrated from github.com)

Another way to improve clarity about where and what you are working with could be to add bread crumbs since the depth should be an additional indicator https://getbootstrap.com/docs/5.3/components/breadcrumb/

pdmnyberg commented

2026-04-20 07:08:58 +00:00

(Migrated from github.com)

This can be considered done for now.

Rows
Columns

Create mock User Interface/wireframe #2