0

I currently have got the following panel in my admin dashboard: The panel

This is a panel where the admin can edit the users of the website. It's currently made so that someone can click on it, and the link to the edit page will be shown:

Animation

But if there's a large amount of users, how can I make a good UI out of this? I don't want to have hundreds of blue panels...

I already thought about a "Search user" bar, which will only show up users that match with the search, but I don't know if that's a good way to do things either.

What are your suggestions?

2
  • What information on each user you want to edit? I mean name, birthday, email, etc? Why not do it in place? And do you need to edit bulk information (e.g. phone number of 50 users at once)?
    – Mike
    Mar 31, 2017 at 20:11
  • @Mike No, you'll always have to only edit one user (and not a few of them simultaneously). If I click "edit", I get redirected to another page with A LOT of information I can see and edit, so I think it's better to have that on another page than to do it inline.
    – dv02
    Mar 31, 2017 at 20:15

1 Answer 1

0

I'd avoid creating the blue balloons in the first place.

You may use the initial message already - what if Edit in "Edit User Vincent" was already a link to editing facility? Or simply list all users (by name) and place the pencil icon (or Edit link) next to it. You are already in Edit page (header indicates it), no need to repeat information.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

And instead redirecting to a separate web page open it in a modal window. You'll have the feeling of staying on the user list page.

mockup

download bmml source

4
  • And can you give me a short graphical example on how you would design this list? I mean, there can be like 200 users, and I don't my page to consist of 90% "Edit users" panel :)
    – dv02
    Mar 31, 2017 at 20:24
  • I've added two mockups. I hope that gives you the idea.
    – Mike
    Mar 31, 2017 at 20:42
  • Especially the second mockup is really interesting, thank you!
    – dv02
    Mar 31, 2017 at 21:29
  • Just a small addition to the first mockup. I used DRY rule there - don't repeat yourself. You are edition users - there's no need to place a link saying "edit" next to each user, just make a respective header. Also, no need to write "user" in front of each entry. There are only users in the list.
    – Mike
    Apr 1, 2017 at 20:58

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.