1

IDS DesignWe're in the process of creating an International Directory System for our Employees (which would provide details of Employees - summary of their education, experience, contact, and social media information).

We've approximately 90 attributes, and not all of them are mandatory to be shown. We can do a progressive disclosure.

Issue we are facing is - there is a segment called Business Card - and this should host 18 attributes. Now for displaying this much of data what would be best approach?

  • We do it using Horizontal layout
  • or we use it as vertical layout

For an average user to consume the information 'F' shaped rendering is the best; however, in this scenario what should be the best way to render data for these 18 attributes?

For remaining attributes we will use tabs with specific categorization.

  • What do you want to achieve? Why 18 attributes (that sounds like a lot)? By 'F shaped rendering' do you mean left aligned? – Midas Dec 22 '15 at 14:27
  • As this is an enterprise user profile; we would want to lay down the information instead of the data. The 18 attributes include elements like Location, Workphone, Direct Dial, Mobile, Office Fax, Videophone number, Office Number, Link to send a post on Social, Link to chat with the person, Company, Department and likes... And by 'F' based I meant F based pattern - Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe. – Amit Shrivastav Dec 22 '15 at 18:10
  • 1
    Ok. What do you mean by horizontal versus vertical layout? Do you have any mockups you can share - and have these been tested with any users? – Midas Dec 23 '15 at 9:33
  • Yes I can share, but sorry how do I add an image here as an attachment? – Amit Shrivastav Dec 23 '15 at 17:47
  • click edit below your answer, and there is an image icon to add a picture inline – Midas Dec 23 '15 at 23:13
1

This much information cannot be all equally relevant for the users, especially in a glance.

I'd cut it to 4-5 most important items (e-mail, mobile, location, company, department — considering specifics of the company, maybe in some companies people prefer video conf calls instead of calling on mobile) and sort the rest in the single expandable accordion element.

Or, if all 18 items have to be present on the surface without additional clicks, I would display first 5 in bigger typography on top and separate the less relevant details with some white space below. All in F-pattern or in columns by type of information (phone numbers, geography, etc).

Upd: after OP adding the screenshot

To me, this structure works.

The only problem I see is that nothing is visually highlighted regarding the hierarchy of the information, so the eye is lost in the first glance.

I think leftmost column needs either a highlighted (light grey) background, or a colored element. The corporate hierarchy on the right seems a second important element to me (third for some people), but because of the photos, it will attract the eye right away, having the biggest contrast of all elements of the page.

  • Thanks Zoe. I tried to consolidate the data as shown in the image above. It seems it should work; your thoughts? – Amit Shrivastav Jan 4 '16 at 9:51
  • The screenshot definitely helps. Yeah, to me this structure works. The only problem I see is that nothing is visually highlighted regarding the hierarchy of the information, so the eye is lost in the first glance. I think leftmost column needs either a highlighted (light grey) background, or a colored element. The corporate hierarchy on the right seems a second important element to me (third for some people), but because of the photos, it will attract the eye right away, having the biggest contrast of all elements of the page. – Zoe K Jan 4 '16 at 14:56
  • Thanks. Sure, understood. Though there is little highlight on my name; as from my name above is the hierarchy > My Boss > His Boss and so on. But I see value in your suggestion; will implement the same. – Amit Shrivastav Jan 4 '16 at 18:23
0

Really good question. The project you are undertaking seems to be very trivial and could have an outcome that results in your users actually using the system or not, based on the experience they encounter. From what I have read in your post and the underlining comments, I believe you might have to dive a little bit further with what you are asking for. I also think you might have to conform and get rid of some or the majority of the 90 attributes or at least dwindle down to what's important and what is not. I'm no expert on your organization, but that number seems quite high for your typical end user. Especially for an internal system. Though (Which I might say a lot in here) take a look at your typical social networking experience. You might see the majority of data hidden among primary information (The data you classify "mandatory" of the 90 attributes). The primary data is displayed in a manner of highest, being the most visible.

  • Email
  • Phone number
  • Identifying attributes (Name, Sex, Photo Identification)
  • Department/Location

...and so on. This info is key, if your system is about employees. It's not everything you might include to begin with, but it's a start. Make sure to start small and lead up to the bigger portions of your system.

The other forms of data, for instance; the projects an employee have worked on or maybe a list of the higher-ups that they report to, can be nested. This is all a guess as I do not know what kind of data you will be representing.

As a layout, I would still stress, hiding what's not important. Hide that data within tabbed content (http://getbootstrap.com/javascript/#tabs). Make sure to split your system into a defined grid. Section off areas that make sense. For instance, the profile piece being a key attribute. Have it displayed predominantly at the top and in a column on the left-hand side of the page.

It's stuff like that you have to really dig deep into. Ask more questions and research systems that have done it successfully. From what I have outlined and have advised, might seem elementary. But, basics are what make or break good experiences. Trial and error has gotten user experience where it is today. Do what users or even yourself might want to see in the representation of data. Don't over think it.

  • Thanks for the answer, I tried to consolidate the data as shown in the image above. It seems it should work; and should be easier to read and comprehend. – Amit Shrivastav Jan 4 '16 at 9:50
0

Here's how we break down our attributes:

  1. Quick View - The most important/relevant data, highlighted/ in a predominant location.
  2. Grouped Details View - The profile details grouped into panels or tabs
  3. Replication - don't worry about replicating the data from the quick view in the grouped details view as well

We have the quick view at the top of the page, then we have a bunch of columns of panels which works for us. Instead of using columns we could have used tabs, but the main thing there is to control the WIDTH of the page in that case. See how facebook does their ABOUT page.

In terms of what you provided, you're on the right track, I'd just put the user's profile on top, play with reducing the width, and make the right column a darker color maybe

  • Thanks @Sabrina. We had a look at keeping the user details (Business Card in our case) at the top; but due to need of keeping few essential data visible at first glance, we had to forego that option. However, we will surely see the option of reducing width; and as Zoe mentioned and you also to enhance little more visibility of the right column. Thanks! – Amit Shrivastav Jan 4 '16 at 18:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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