Saturday, April 1, 2017

Improve Design for Master/Detail View


Draft


I'm trying to put together a design draft for a UI in a business application that will allow a user to view a list of documents that will be published to recipients in one or more departments in a company.


The list on of documents is on the left. I'm trying to include some relevant metadata in the document row, such as the name of the document, the company that the document will be published to, the number of departments in that company that the document will be published to, and the date that the document was created.


When a user selects a document, the selected row is highlighted and I display the details of that document on the right. So basically this is a master/detail view.


On the right, I display metadata specific to the document in the top section, and in the middle section I display a list of the departments that the document will be published to. If a user selects a department in the list, then the two buttons below the list labelled "x Recipients" and "x Views" will change based on the number of recipients in the selected department and the number of times individuals have viewed the document from within the application.


If the user clicks on the "X Recipients" button, then a list of recipients are displayed below. When a recipient is selected, then inline actions appear. If the user clicks on the "X Views" button, then a list of users and the dates/times they viewed the document will appear.



I've spent quite a bit of time researching UX guidelines for master detail lists, but I feel like I've hit a brick wall, as, this view has to display quite a bit of metadata, but I still feel like the layout and appearance isn't good enough such that it stands out in a clear and concise way to the user.


Any input/feedback/suggestions on potential improvements would be greatly appreciated.



Answer



You're trying to create a nested master-detail-detail relationship, which is often difficult to accomplish in general. But your main problem here is visual, the relationships aren't visualized well because all three levels share the same BG color, which makes it seem like they're all "top-level". If you give the "details" panes the same BG color as the selection indication, it will immediately become clearer. Also, the recipients/views area is basically a tabbed control, so it would be good to make it look like one.


enter image description here


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...