2

I'm looking for examples of existing solutions of the following interface problem. The interface must have a table, list, thumbnail view or such of items, which depending on the example could be files, images, audio, tweets, calendar appointments, todos... any kind of data really.

The user can then "open" any number of items for viewing the details, comparing and/or editing the data. The detailed view must not cover or overlap the rest of the data, since the user will want to open multiple detailed views at the same time.

This could of course be implemented as a standard windowing system, with a new window for each opened item, but I'm looking for something that provides a more elegant layout for this particular problem. Ideas for ways to navigate such an interface, ideas for layouts, how to show the connection between the items in the table and the "opened" items.

Improve this question

4 Answers 4

Reset to default
2

No existing apps come to mind at the moment, but I'd explore this kind of layout.

enter image description here

You have a master pane and a details pane. The master pane has a list of items, thumbnails etc. Selected items all appear on the details pane. They can be rearranged (drag & drop, arrows on hover etc.) to assist comparison between relevant pairs of items. The panes can be resized, affecting the size of the thumbnails and of the detailed view. Naturally, this way you won't be able to compare very large items side-by-side, but nor will you be able to do it any other way on a single monitor. You can have toolbars to edit items in focus etc.

Improve this answer
3
  • That is surprisingly close to what I was already exploring. One question that has come to mind though is whether they should be a single "page" or view that scrolls together, if they should scroll completely independently, or if maybe the view you're not scrolling manually should scroll to try to correspond to the view you are scrolling. I suppose user testing would be required.
    – last-child
    Feb 18, 2012 at 12:43
  • They need to scroll independently, otherwise you'll easily reach situations where it's extremely difficult to work with the app. Say you're looking at the bottom of the details list and you wish to drag there an item from the top of the master list - you scroll to the top of the master list, but now the bottom of the details list has disappeared because they scroll together. You can define all kinds of assymetric relationships to aid navigation - e.g. a click on the master scrolls to the appropriate item on the details, but not the other way around, etc.
    – Vitaly Mijiritsky
    Feb 18, 2012 at 12:51
  • In my opinion, the horizontal layout makes comparing harder, especially with text, where the master flow is top to bottom. Existing comparison apps seem to confirm my opinion.
    – Danny Varod
    Feb 21, 2012 at 11:39
1

You could consider using a grid layout where boxes can slide to expand and can also be dragged around so that the user can organise the layout so interesting items can be positioned side by side.

For an example of this type of layout follow this link and check out "Grid 16" under "Layout" in the nav: http://themeforest.net/item/adminica-the-professional-admin-template/full_screen_preview/160638

Improve this answer
0

This is similar to what existing diff/merge tools do.

Most of these tools arrange different documents horizontally to make comparison of multi-page/screen documents easier (they scroll together) and most of these tools limit comparison to 2-3 documents at a time for two reasons:

  1. Desktop real estate.

  2. Cognitive perception - if the documents are long or complicated to compare,
    showing more than 2-3 makes it hard for the user to recall which is which while comparing.

Common exceptions to the 2-3 documents rule are comparison of shallow (narrow) lists e.g. specifications of products in manufacturer or review websites (e.g. digital camera, screens).

If you do show more than 2 documents, you should consider freezing the names/thumbnails above the scroll area, so when you scroll down you call easily identify which column refers to which document. If the documents have similar names, then emphasize the difference between the names (e.g. different path, different extension, different date, modified by a different user).

Examples:

  • Documents
  • Specificiations

    • Items for comparison can be selected prior to comparison or from the title bar by clicking on an add/remove/change icon on the title of one of the columns.

    Improve this answer
    0

    The first that occurs is to try to refuse the table, in a kind of that types of the data very different. It's easy for me to find an EP by a cover picture in my record bag, than by a artist/title sticker or thru the catalog with the mp3 file names.

    Accordingly it is necessary to search for the interface decision in interaction with objects, instead of with records. About viewing of several objects simultaneously - except comparison of the same objects hardly it is applicable, as the attention locus all the same remains on any concrete object.

    At comparison between groups of types, for example simultaneous listening of a song (audio) and viewing of the song lyrics (txt) your attention locus remains on the text document. In this case you don't have necessity to see an additional marker for currently playing audio.

    Here a good example of objective interaction Raskin. Beyond desktop

    Improve this answer

    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.