0

I'm working on a UI which needs to include a series of video thumbnails and folders containing more video thumbnails.

At current, the videos are being layed out in a 'list view'. A video thumbnail appers on the left and metada fills up the real estate on the right. (see image below)

enter image description here

Soon we will need to include video folders as well as video thumbnails. I've been asked to place the video folders in a grid view above the video thumbnails (as seen below)

enter image description here

Although I don't like the idea of compbining a list view and a grid view. I've considered maintaining consistency of the interface by applying the list style layout to the interface (see below)

enter image description here

However by doing this less content will be seen above the fold. Unfortunately we cannot apply the grid view to the video thumbnails. Any suggestions on how to approach this?

  • How much content are we talking about? Will the Video thumbs act as "featured content" or is it just that they haven't found their way to a folder? Is this a web page or a native client? – Babossa Jul 29 '14 at 7:35
  • These video thumbnails have already been placed into a single category ie 'Languages' (so they could be videos about linguistics, phonetics, etc.) but there are also subcategories within the 'Languages' category, ie 'French', 'English', 'German'. We're talking about ALOT of content. It's a web page. – user47821 Jul 29 '14 at 7:40
  • 1
    Feels like you need to open the discussion again. I think YOU should be the one to decide the layouts of folders and videos, not some manager or PO. To me, it would make more sense to do the other way around (listing folders, maybe on the left, and then present videos as a grid in a main content area (in the center and right) How come you cannot apply the grid view to the video thumbs? – Babossa Jul 29 '14 at 8:13
  • Are there any device restrictions on splitting the interface? – DarrylGodden Jul 30 '14 at 9:17
1

Use 3 or 4 column grid for everything and separate Folders and Video with sub-headings Or without them and separate folders and videos with double amount of space. As listing everything in one line could cause a lot of scrolling.

Use proximity(Visually Group Related Elements) to differentiate between folders and videos

mockup

download bmml source – Wireframes created with Balsamiq Mockups

mockup

download bmml source

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.