Best approach to design an UI for creating users and assigning them to a level

Ionic Framework ionic-v3
1

I am trying to come up with an UI design for creating a user in Account (Customer) and assigning them a to a one of the levels in hierarchy. And the hierarchy can change depending on the Account selected. I am developing this in an Ionic 2 app.

Would appreciate if you guys can suggest some best approaches in going about it. And, honestly, I am not able to come up with anything good.

Following is an example of various levels that can be setup up for different Accounts. There’s going to be 10 levels but not all Accounts will use all 10 levels.

Account is the top most level. All the levels under that will have multiple values. And selecting a value at a level should show only the relevant values in the remaining levels.

Account - Store1 [A Super User having access to all features (Stores)]
 |
Country - USA, Canada [User will have access to features of selected country]
 |
Region - Eastern, Northern [Features only for the selected region]
 |
States - CA, NY, etc.
 |
City - San Francisco, San Jose, NYC, etc.
 |
Store - Store1, Store2, etc.

Not all Accounts (Customers) will have all the levels. Some might have only 3 or some will have just 2 or others will have 5 and then some might have all 10 of them.

What’s the best way to design the User Interface for such data.

Any ideas, suggestions, pointers will be very helpful.
Thanks.

2

It really depends on how much information there is and how you want to break it up. You can wall off parts of pages or entire pages using *ngIf="level >= 2" and so on.

3

@rapropos - sorry for the delayed reply and thanks for giving your suggestions.

However, I am not sure what you mean by “wall off parts of pages”. Would appreciate if you could elaborate more.

The approach I went with is basically create as many ion-select as there are levels. Not a good one but couldn’t think of anything better and needed to move forward.

4

I think I didn’t quite understand what you were asking. I meant that you could do something like the design discussed in this thread, where the same page can be shown to users of different levels, yet via *ngIf have a feature that is only available to users of level 3+.

5

When designing a user interface (UI) for creating users and assigning them to a level, it’s important to prioritize ease of use and clarity. Here are some key steps and considerations to keep in mind:

  1. Identify user needs
  2. Create a clear hierarchy
  3. Use form fields

New to the design world? Our mobile app design company can help you turn your ideas into an engaging reality.