I'm writing one web app using Angular 2 and the Core UI theme, which I downloaded here.
Now, there's one situation which I'm not knowing exactly how to build a nice user experience.
The view is one editor of the informations of a user. In the editor some informations can be managed: the user personal information (like name), the user's list of addresses and the user's list of emails.
Currently I'm using Bootstrap 4 cards to display the informations of the view. So the view is as follows:
- On the left we have a traditional sidebar, which contains just links to several other views.
- On the right is where the cards are disposed. At first I added one bootstrap card to set the user personal information.
Just to illustrate what I mean with the cards, here's the demo screen of the cards presented by the CoreUI framework. I'm using at the moment just one card on the right, with header set to "User Information" and the form to edit the information.
Now, I need to add support to manage both lists. What I need is to allow the user to:
- Add new addresses/emails;
- View the currently registered addresses/emails;
- Edit the registered addresses/emails;
- Remove addresses/emails;
I think with the cards this is not going to provide a nice experience. At first I thought on having one card with header "Addresses" and another with a header "Emails". But then there's the problem on how to display all of that inside a single card.
The point is that each address and each email needs, themselves, to be somehow grouped together. This could suggested one card for each of them, but this seems too overwhelming. Also, a card inside a card doesn't seem great.
Another possibility I thought of was to create new views exclusively to manage the emails and addresses, but I'm unsure.
Furthermore, this situation of needing to provide editing feature for a list like this is quite common.
In that case, how can I do it in a way that provides a nice user experience? How can I display a list of addresses or emails and provide these capabilities for the process of editing one user?