4

I am currently working on a design (for a school/teacher app) that displays information about students. Two different views are offered to the user: tile and table view.

The argument among people on the design review team (management people mostly) is that both these views should fundamentally provide the user with the same exact information.

My understanding in providing different views to a user is not only to just have a different view of them but to also make best use of each view. As such, I am inclined to not necessarily show exactly the same info in both views.

The tile view would show more descriptive info about the student while the table view would be displaying mainly the high level info given that you are able to view more students at a time on the screen. So, the table view would be mostly used as a high level comparison of all the students, where the tile view would enable to teacher to focus on one student at a time.

What are your views on this? Are there any reference for these kind of situations? Any opinions?

Added a screenshot as an example. (Don't mind the visual, that's in progress). So the table presents a more summarized information for the alert column while the tile view gives some more description. Both the tile and table row are clickable to drill into more details about the student.

enter image description here

Improve this question
4
  • Is this app to be used on a desktop or mobile device (e.g. iPad)? I think when there are touch interactions involved, it changes the design a bit. As a dashboard designer I would have thought it is easier to provide a high level view using a tile view and provide detailed information in a table view, but it depends on a lot of other design details/considerations.
    – Michael Lai ♦
    Sep 17, 2013 at 22:32
  • Thank you for your reply Michael. The app is to be used mostly on a desktop and iPad (much less on a mobile device; we are actually not really supporting mobile). I will try to upload a screenshot shortly.
    – AeroTin
    Sep 18, 2013 at 0:38
  • I have always found it interesting how management come up with the requirements. I think a quick chat to teachers who might be using this type of program will be the easiest way to dispel some misconceptions or assumptions about how people might use the system.
    – Michael Lai ♦
    Sep 18, 2013 at 22:26
  • Yes you're right and the initial phase of this project is working toward a prototype that can be tested but already we are having some specific requirements coming through...
    – AeroTin
    Sep 19, 2013 at 0:42

4 Answers 4

Reset to default
3

The design patterns for tiles and tables provide different ways to navigate the content. For comparisons that need to be made based on specific attributes of a student (e.g. you want to compare them by test score, attendance or where they live) it is probably more useful to create a table that allows you to sort and filter on different types of criteria.

However, if you want to make comparisons based on categorical or summarized information that can be arranged based on a non-sequential structure (e.g. based on their seating arrangement, cultural background, English proficiency, etc.), then tile view is a good way to allow people to drill into detailed information better.

You can see that it is easier to work out the relative amount and variety of file types from a tile view, whereas it is easier to compare file sizes of different files in the table view. But again there is no real hard and fast rule in design, because there are no rules which will suit every situation, so you just have to know when it makes sense to apply or break them.

Improve this answer
4
  • Thanks Michael. Yes, the tile is more inviting for a user to drill into content. And that was exactly my idea behind this design. I've attached the mockup (in progress) above. The difference between the table view is that the table will present information more concisely and allow to view and compare more students on the one page.
    – AeroTin
    Sep 18, 2013 at 16:55
  • Having looked at the mockup, the argument behind not presenting the same detail becomes more obvious to me. If the tile is designed to get users to drill into content but you have to scroll through pages to find what you want, then it defeats the purpose of the tile view (if you put too much content into each tile). As it stands, the table view will allow you to find the information you are looking for much faster. With too much information on the tile view, it is hard to see the general trend/pattern that it should be able to show.
    – Michael Lai ♦
    Sep 18, 2013 at 22:24
  • Now that you've mentioned about having to go through pages to find a student (in fact I was going to load more content as the user scrolls and not page), I am inclined to even have less information in the tile and really just push forward the alert description and progress bar.
    – AeroTin
    Sep 19, 2013 at 0:39
  • I noticed that in the screenshots you provided the same number of students are shown in about the same screen space, but I assume that the actual design will allow more students to be displayed in the table view. If you reduce the amount of information in the tile view, then it will be more similar to the table view in content density, which means that you need to find different ways to make the tile view more useful rather than just a different way to present the same information in table view.
    – Michael Lai ♦
    Sep 19, 2013 at 1:57
2

You are right in

not only to just have a different view of them but to also make best use of each view

Different views are great for viewing things differently.

  • Some views may take less space per item, thus providing a zoom out or overview view. If the views display exactly the same info, there would not be much zoom difference.
  • Some views may be sortable, and they would have to contain the content the user wants to sort on.

For reference, I suggest the views in Windows Explorer and OS X Finder.

enter image description here enter image description here

It would be hard to comment on exact content without context, screenshots/mockups, or more actual content given.

Improve this answer
2
  • Thank you JOG. I was thinking of providing the Windows Explorer example too. And contact lists in Outlook show different information depending on view options. I will try to upload a screenshot.
    – AeroTin
    Sep 18, 2013 at 0:43
  • Feel free to edit your question and add an image (or link to imgur, if your rep does not allow images yet) there.
    – JOG
    Sep 18, 2013 at 9:44
1

The use of two views implies there are cases where one is more advantageous than the other. This implies two different tasks.

So each view should be optimized for the task for which it is superior. The task will tell you what information is needed in each view. Maybe it is the same info with just different prioritization in the different views. Maybe it's different amounts of info. Maybe it's different info.

Improve this answer
0

I agree with you there's definitely a case for a more terse or summary view (in this case the table view), and as @JOG points out there are plenty of examples of alternate views of the same data that display differing amounts of information.

It does seem possible to have it both ways though, by having table rows expandable (in place) to show all the data that the card view does.

Improve this answer
1
  • That is actually a good suggestion to make the table rows expandable. although the idea was to take the user to a more detailed screen of the student once they click on a row. So, if I'm using the expandable feature, I'll have to put the functionality on the open/close icon only and not the whole row. I wonder whether that would be confusing to a user... I'll have to test that out. Thanks for the suggestion!
    – AeroTin
    Sep 22, 2013 at 23:50

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.