1

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.

Cards Example

Now, I need to add support to manage both lists. What I need is to allow the user to:

  1. Add new addresses/emails;
  2. View the currently registered addresses/emails;
  3. Edit the registered addresses/emails;
  4. 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?

Improve this question
2
  • 1
    It appears you're putting the cart (UI) before the horse (technology)...by trying to see how bootstrap cards can "pull" your user interface. Instead make a basic sketch of a presentation of your data and controls that makes sense to your users, then find the best technology to develop that. Take a wild guess, use the SO UI wireframe tool, and at it to your post.
    – bloodyKnuckles
    Jan 5, 2017 at 18:48
  • @bloodyKnuckles actually that's what am I looking for. I just told about what technology I'm using because I thought it would become easier to visualize what I'm trying to say. One can easily forget about bootstrap cards and imagine they are just rectangles. The point is exactly that I'm not finding this best way to fit that much functionality together, because we are managing lists of things, not one thing at a time.
    – user1620696
    Jan 5, 2017 at 19:08

1 Answer 1

Reset to default
2

Basically you need a design for CRUD operations for addresses and emails. actually you can accommodate both email and addresses in one screen.

For adding new items(email/address) you can follow google's material design style.

enter image description here

For listing, editing, deleting you can try below design.

enter image description here

This is the very simple design you can start with. then as your app grows in detail you can optimize this design. hope this helps :)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.