Skip to content
loading...

Help designing web application UI

twitter logo github logo ・1 min read  

We're a small team of backend developers building our first web application (a really small one) and we don't really have a dedicated UI person to help us out.

We're using Angular together with Angular Material and try to strictly follow it. Would there be someone who'd be able to chat and give some basic guidance?

twitter logo DISCUSS (8)
markdown guide
 

Hey i can try to help you, already done a web app with angular + angular material, you can check it in my github :D
How can i help you?

 

We're building an application to simplify one of the business ETL processes where lots of human efforts before actually triggering the process.

So basically it has a flow of:

  1. Requesting certain data to be ETL'd
  2. Authorized users approve it
  3. Authorized users Signing off that data is correct on source
  4. Authorized users Kicking off the process
  5. It runs in the background
  6. Completes / Fails
  7. Report

So request form is a modal where user enters picks data that needs to be refreshed and then it goes into that queue.

And then we basically display everything in a table:

  1. Data that has been requested
  2. Current state/status
  3. Edit button that opens a new page where you can change status to the next one (we use a material stepper here)
  4. History button that opens a new page where you can see log of who and when has moved from one state to another (this is yet again a table)

We always worked with backend systems and especially a lot with SQL, so tabular structure is very clear to us but it looks disgusting. So it would be cool to know what could be a better approach to visualize these linear state transitions and as well as showing logs.

 

You are right. The wish to put everything in data tables, or "grids" as desktop developers call them, is a tell tale sign that you lack UX experts.

The Material Design language prefers lists for overview pages.

material.io/design/components/list...

Combine it with a detail view in a side sheet for a nice desktop UX.

material.io/design/components/shee...

You can use the side sheet for the history as well if it is simple enough to display in a small area of the viewport.

Put a relevant heading or a content filter in the start of the app bar. Use the end of the app bar for primary actions, i.e. icon buttons. Use Angular Material's toolbar component for the app bar - and the side sheet top bar as well.

material.angular.io/components/too...

Creating the overall layout and app shell can take a good portion of the initial development.

Use the Angular Material navigation schematic to get a decent starting point.

material.angular.io/guide/schemati...

This is really useful! We already got a top bar with sidenav that's kind of a YouTube layout clone. It's just the content that we struggle with.

Really appreciate your help! Thank you!

 

Well, so what component you use to show all the information?

Material Angular has a CDK-DataTable component that is fully personalizable and i think it perfect fits in what i think you want to do.
I use it in my project and i have all in it, data and icon buttons without problem.

With logs i think you can simply display the data in real time with html and a function that refresh the component when you fetch the data.

Get luck with the project! :D

 

I would suggest one important thing here, and that is "ask your users".

You can make it look great with cards and animations - but how do the users actually want to use it? What data to they need to see (e.g. see at all times) vs what they want to see (e.g. additional info they might want to see on a pop up, or tooltip etc.)

In many cases a simple list is the easiest way to look at a queue or at history - people to that every day in their email client, for example - as long as the amount of information they need to look at (i.e. the number of fields per item) isn't too large. Once it gets over a certain number of fields, table displays can be easier to manage.

We have managed large volumes of data queues in one case by moving queued/in process/errored/complete into tabs, with a counter on the tab itself so the users can see if there are any new items in any of the tabs.

Each item in each tab is shown as a card, in a list, with a pane to the right of the list that shows (and allows changes to) the currently selected item in the queue. (obviously this functionality differs on each tab - e.g. on the error tab the only option is to re-submit.)

I'd second that. "Ask you users" and "KISS" are really important principles and could help a great way, especially with the first and small application. Even more: instead of "asking users" what to do, it would be better to deploy really simple first version and ask for what's missing. :)

Probably it's easier to build and deploy. Our users are internal so it's not too difficult to catch any of them and get the feedback. ☺️

Classic DEV Post from Jun 27 '19

Jack Of All Trades or Master of One?

That age old question: how many pies should one have a thumb in?

Evaldas profile image

Signed up yet?

DEV is where software developers make connections.

Get Started