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?
Top comments (9)
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:
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:
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.
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. ☺️
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
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!
I have a lot of articles on Angular that could help you.
Your biggest challenge will be CSS. To avoid the pain, start using the grid immediately, spend a good week or two digging into all it can do. Believe me, over time you'll be glad you know it.
If you already know back-end binding concepts you'll pick up on Angular binding easy. Angular is just a client side MVC - like pattern without the controller, instead it uses Routes to open the component based on the url. Yes the client routes url requests to the proper component.
From there learn how to bind content to the data, as well as issue HTTP requests (all async) to the back-end to "expand the template with the data".