I have a web application with a page that contains a person and several services that are provided to that person. The services can be hardware and IT/Networking. e.g. Desk, PC, domain account etc... The whole point of that page is to manage these services. So, the user can perform CRUD operations on any of them.

The person and his/her details are represented via an employee badge. Which fits well and is fairly intuitive.

However, I've been searching for days for a graphical/UI analogy for the design of the services that are provided to the user.

All of these services have icons and names. I can always just populate a table with them. But is there a more intuitive way to represent such services? I've tried card-like boxes with shadows and sticky notes, for example. But it doesn't seem to fit.

For reference, the UI is flat. I've tried playing around with cards and shadows. But it just doesn't fit.

I'll be grateful for any ideas...

  • I think the card idea (or, as a degenerate case, a table with one wide card per item, sometimes called row repeater) is very good. That's because for different services different data applies (i.e., the domain account will have a password expiry date, but the PC doesn't). This cannot be well represented in a column-based table. Are you worried about the visuals, or about the interaction? Commented Oct 13, 2015 at 12:54
  • Kinda in between. I'm looking for an intuitive way to present the data, that will fit with the overall paradigm of the page. Once I have a suitable Idea, the interaction and the visuals are straight forward. Commented Oct 14, 2015 at 8:39
  • It always depends up on the amount of data and the fields it has. share some screen without actual data for suggestions.
    – uttham
    Commented Mar 9, 2017 at 6:15

2 Answers 2


Here's what comes to mind.

Your icon/label method makes sense as long as the icons are appropriate enough not to cause confusion.

This is just adding services from a carousel below the main identity and access area, though this could also be a "tray", or any separate and distinct area.

Drag and drop works for adding and removing, but it increases the complexity, and you're going to need a click at some point. So I've included some click interactions which, like everything else in this answer, are just suggestions to stimulate your thinking process.


download bmml source – Wireframes created with Balsamiq Mockups

  • Thanks for the detailed reply. This is basically what I already have. The question applies to the "2,3,7" under the "access" part. Because, they show a couple lines of information each. For example, office will have building, office number and desk, plus an Icon. This is the part that I'm trying to make usable. How can I design it? And especially what analogy is suitable there? Sorry for the unclear question. I don't know how to formulate it better. Commented Oct 15, 2015 at 16:09
  • Can you show, in a basic mockup, a representative example of the type and amount of information that would be associated with each item (e.g. the '2', '3', '7', in the example.
    – dennislees
    Commented Oct 15, 2015 at 19:35

Have you tried a drag and drop interface? You would have the services as draggable icons that you'd drop onto the avatar of the person. To make the usage more obvious, you can have this avatar holding a box, would would be the container.

It's intuitive and usable, provided you don't have a large number of items. From how you described your problem, you're not looking for batch displays of large numbers of users, so this seems to fit the bill.

  • That is besides the point. I have no issue with the "how" to perform the CRUD operations. But rather how to represent the services themselves. Just like the badge represents a person. It could have been done in a table. But the badge interaction makes it more personal. More like a real person rather then just another name in a table. Commented Oct 14, 2015 at 8:41
  • Drag and Drop requires mouse (or touch) interaction. Depending on the user and use case (i.e., how many items per minute), you might want to allow keyboard-only interaction. Commented Oct 15, 2015 at 5:30
  • @Boranas could you be more detailed on how it's beside the point? You asked for a graphical/UI analogy and I gave you one in the form of the services being icons that you drag into an avatar of the person. That last bit on connecting to CRUD was unnecessary (and I'll pull that), but the rest of the post did give a response to your question. Perhaps not the one you wanted, but if it's beside the point, then perhaps you should clarify your original question, because the way I read it, this is exactly the type of answer you asked for.
    – R. Barzell
    Commented Oct 15, 2015 at 12:53
  • @R. Barzell Sorry for the confusing question. dennislees demonstrated it perfectly in his answer. Please look at his answer and my comment. Basically, the question is less on the interaction and more on how to display the data. Commented Oct 15, 2015 at 16:14

Your Answer

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

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