Topic: Mockup of how to display Cover Art (Read 8421 times)

Phil LD · « **on:** April 06, 2012, 10:25:11 am »

JRiver is a fantastic piece of software. However the Cover Art View doesn't have the feel of Albums being on your bookshelf like Apple has in iTunes or iBooks for iOS.

So I created a mockup, of how to display Cover Art. For the sake of a clean look Thumbnails of Album Covers which differ less then 20% from being a squared cover should be cropped to being squared.

The mockup is based on the FusionX3 skin.

The link to the mockup: http://mockup.smartcoordination.com/grid2.png

edit: Here is another mockup using the Purity skin as base.

The link to the mockup: http://mockup.smartcoordination.com/grid3.png

edit2: Another mockup: Easy scanable, high contrast, compact, suggested by Frobozz:

The link to the mockup: http://mockup.smartcoordination.com/grid4.png

MrHaugen · « **Reply #1 on:** April 06, 2012, 05:49:15 pm »

I don't really understand what extra this gives you. It's the line with the album names that give a "shelf" feeling? I'm sorry, but I have a problem seeing the need for placing media in an environment it's not actually in.

CountryBumkin · « **Reply #2 on:** April 06, 2012, 06:54:26 pm »

I think the current "Theater View" is awesome - but if someone makes some skins with different views, I wouldn't object to having more choice.

Phil LD · « **Reply #3 on:** April 07, 2012, 02:15:49 am »

Small things make the difference. Small optical changes often change the whole experience. The optical bottom, the slight drop shadow with a distance of 0, and the white border make things much more pleasant to view. For example take iTunes. The white border, the more sophisticated shadow, make up for a much better cover view, because things are closer to reality. At least you could let users choose.

Phil LD · « **Reply #4 on:** April 07, 2012, 12:30:18 pm »

added another example with the dark Purity skin.

Maybe a first simple hack would be to enable the white borders you can get for images for album covers...
If I may recall: Many people buy a mac for the beauty it brings, for the ease of organization of iPhoto, for the many fancy and eye candy things most windows software can't deliver. A normal user, that may not love "JRiver" by knowing it delivers superb audio quality, the eye candy thing could be an argument to buy it.
My grandma got an iPhone last week, not for features, but for the looks of it.

MrHaugen · « **Reply #5 on:** April 07, 2012, 02:15:32 pm »

I agree that eye candy is very important. It's a lot more important than many windows developers think. Apple is a good proof of that. Personally I just don't see the big improvement in this changes. There are so much more that could have been done to get more functionality as well as eye candy. But standard view are hardly the place that needs the most improvements imo.

Phil LD · « **Reply #6 on:** April 07, 2012, 04:43:38 pm »

Let me put it this way: The "standard view" is most likely responsible for the first impression someone gets of JRiver. So the more eye candy, iTunes like experience he gets, the more likely he will stay around getting a hint of what JRiver is able to do.

sunfire7 · « **Reply #7 on:** April 07, 2012, 05:49:46 pm »

I agree in the eye candy need, but your mock-up is still not so impressive, if you want to convince JRiver to do it, you (or another) would need to post a better mock-up, unfortunately I'm not good at this things

Phil LD · « **Reply #8 on:** April 07, 2012, 06:10:51 pm »

At least clean, easy and squared. I've designed quite a few UI's mainly for web projects. Many things like mirror effect etc can cause quite the opposite from being good for eye candy. The most important thing for me is to have a pleasant way of seeing what you got. For example the 3D Media wall is more irritating than useful. Still as it is optional, nice to have.

JimH · « **Reply #9 on:** April 07, 2012, 06:16:59 pm »

From this thread, you can see it's not easy to get agreement on what looks good. But have you tried the Animated List views?

http://yabb.jriver.com/interact/index.php?topic=69716.0

Phil LD · « **Reply #10 on:** April 08, 2012, 12:14:20 pm »

Well these are more irritating than useful, like the 3D Media wall .T here is simply no really restful view for Albumcovers. As I said before, a first start would be to enable those white borders you have around images in the image section for albums as well...

Frobozz · « **Reply #11 on:** April 08, 2012, 02:00:05 pm »

Good looks and eye candy is good. The challenge is in keeping the eye candy from compromising the actual use. Putting the shelf and extra spacing looks great but means you can display fewer covers per screen. I like to try to maximize the number of covers on the screen because that means I can see more at a time and visually scan through my library faster. And with wide screen displays becoming the norm, especially on laptops, where there is limited vertical space I would prefer a view that fits more in that vertical space. If I can get one extra row of covers displayed on a laptop screen I'd rather have that than pretty shelves and drop shadows. Designing a view that fits more on the screen while not looking too busy and cluttered is a big challenge for a designer.

Phil LD · « **Reply #12 on:** April 08, 2012, 02:51:33 pm »

That's true, but even something like this, would be much more easy to view, simply because there is more contrast, than there is now.

The link to the mockup: http://mockup.smartcoordination.com/grid4.png

Frobozz · « **Reply #13 on:** April 08, 2012, 04:22:36 pm »

Quote from: php on April 08, 2012, 02:51:33 pm

That's true, but even something like this, would be much more easy to view, simply because there is more contrast, than there is now.

Yes. That would be easier to view. Compact enough without being too cluttered. A view that should make it easy and quick to visually scan through a lot of albums.

Scolex · « **Reply #14 on:** April 08, 2012, 08:24:59 pm »

Quote from: php on April 08, 2012, 12:14:20 pm

As I said before, a first start would be to enable those white borders you have around images in the image section for albums as well...

If you add the borders make the color configurable so a person can make it the same as the background if they don't want them.
I will be at the front of the line, as I think borderless looks better.

rick.ca · « **Reply #15 on:** April 08, 2012, 08:29:42 pm »

I don't care if there's an option to draw a border on thumbnails, but I won't use it. If the quality of covers is sufficient, a border doesn't improve viewing in any way. On the contrary, if the contrast is too great (as will be the case with a dark skin), it will only be distracting and cause unnecessary eye strain.

Phil LD · « **Reply #16 on:** April 09, 2012, 02:12:18 pm »

;-) I'll get an grid view mockup site online where you can change between different grid views and backgrounds seperately using Ajax, and see why more contrast is better. I think I have time for this someday next week.

rick.ca · « **Reply #17 on:** April 09, 2012, 06:17:30 pm »

Quote

...see why more contrast is better.

I trust my own judgment and preference on this. We might also wonder why the vast majority of professional photography, art and image websites use borderless thumbnails in image arrays. But, as I indicated, I'm not opposed to an option to use borders.

Phil LD · « **Reply #18 on:** April 10, 2012, 11:46:12 am »

Quote from: rick.ca on April 09, 2012, 06:17:30 pm

I trust my own judgment and preference on this. We might also wonder why the vast majority of professional photography, art and image websites use borderless thumbnails in image arrays. But, as I indicated, I'm not opposed to an option to use borders.

I concede this point to you. Yes, I think an option to have the same borders you get for images for covers would be the best choice for all.

Frobozz · « **Reply #19 on:** April 11, 2012, 07:08:18 pm »

Quote from: rick.ca on April 09, 2012, 06:17:30 pm

I trust my own judgment and preference on this. We might also wonder why the vast majority of professional photography, art and image websites use borderless thumbnails in image arrays. But, as I indicated, I'm not opposed to an option to use borders.

Image display for photography has different needs and requirements than cover art display in a media player. The photography applications are concerned that borders around the images may alter the perceived color or brightness of the image. I'm not concerned much about proper color perception when viewing the cover art. My concern is more about how the display helps me visually scan and look through lists of albums. From the mockup here with borders around the images it looks to me that I'm able to visually scan the covers faster. My eyes are drawn to the bordered images and it's quick to scan each row like I'm speed reading. My initial impression is that the borders help, and they look good as well.

rick.ca · « **Reply #20 on:** April 11, 2012, 08:01:06 pm »

Quote

Image display for photography has different needs and requirements than cover art display in a media player.

Coincidental or otherwise, they match my preference. I don't care why. In addition to being tacky, borders make me nauseous and trigger migraines.

fitbrit · « **Reply #21 on:** April 11, 2012, 10:20:43 pm »

Quote from: rick.ca on April 11, 2012, 08:01:06 pm

In addition to being tacky, borders make me nauseous and trigger migraines.

They also usually photograph me and take my fingerprints.

Frobozz · « **Reply #22 on:** April 11, 2012, 10:40:09 pm »

Quote from: rick.ca on April 11, 2012, 08:01:06 pm

Coincidental or otherwise, they match my preference. I don't care why. In addition to being tacky, borders make me nauseous and trigger migraines.

It's safe to assume then that you are not the one who submits cover images to YADB that include an added 3D border effect.

I scan and edit cover art. The part of me that does the image editing doesn't like added borders either. Cover art should be displayed as it is. No added borders. The other part of me is wants a functional and quick to visually scan UI. And if borders help with that then I'll go along.

rick.ca · « **Reply #23 on:** April 12, 2012, 12:34:34 am »

Quote from: fitbrit on April 11, 2012, 10:20:43 pm

They also usually photograph me and take my fingerprints.

Once upon a time, I was driving along the Canada-US border. My passenger suggested we nip across the border for a bite to eat. I was more interested in getting to our destination, so I made excuses. Pointing to cameras on 50' poles, I said I wasn't interested in meeting those already watching us—and probably listening to every word we say. When she suggested I was being silly, I claimed I was really hopelessly paranoid about becoming another extraordinary rendition victim. I might have been on shaky ground if not within a minute of saying that, I was able to gesture through the open sunroof at the Blackhawk helicopter flying directly above us. Needless to say, we made it to our destination on time, and they still don't have my fingerprints.

Phil LD · « **Reply #24 on:** April 12, 2012, 04:25:58 pm »

The problem with Cover Art is, that no matter what backgroundcolor the grid has, there will be always Cover Art, that has the same color as the background, causing trouble to actually see the Cover Art. This is an effect which can be addressed with borders. Or by a drop shadow that is not only directed one way as it is the case in JRiver, causing the same effect on the left an top as described. Look at iTunes, they did it way better.

rick.ca · « **Reply #25 on:** April 12, 2012, 05:49:10 pm »

Quote

The problem with Cover Art is, that no matter what backgroundcolor the grid has, there will be always Cover Art, that has the same color as the background, causing trouble to actually see the Cover Art. This is an effect which can be addressed with borders.

Sigh. That's exactly what I do not want. Black backgrounds, for example, are normally used to make the foreground stand out. A border detracts from that effect. If the cover designer wanted a border, they would add one. Sometimes that's done, usually it's not. The same effect is sometimes achieved using a white background.

The attached screenshot shows a selection of covers with black backgrounds. I included all three I could find that had what might be called a border. Even without non-black covers to set them off, these stand out exactly as their designers intended. They also stand out very well in a mix of cover styles. The idea they can't be seen because they're on a black background is silly. The whole point of the black background of the cover itself is that you do not see the black—thereby emphasizing the foreground.

Scolex · « **Reply #26 on:** April 12, 2012, 06:50:28 pm »

Quote from: php on April 12, 2012, 04:25:58 pm

The problem with Cover Art is, that no matter what backgroundcolor the grid has, there will be always Cover Art, that has the same color as the background, causing trouble to actually see the Cover Art. This is an effect which can be addressed with borders. Or by a drop shadow that is not only directed one way as it is the case in JRiver, causing the same effect on the left an top as described. Look at iTunes, they did it way better.

And no matter what color the border is you will have cover art that matches it also which gives the impression that the image is larger. What is the difference?
You keep saying iTunes this and that, I don't think the powers that be care to look like iTunes and I certainly don't want an iTunes clone.
"Look at iTunes they, did it way better" statements like that are not going to get you very far. Would you like it if your significant other said their ex did this or that better than you? (same principle)

rick.ca · « **Reply #27 on:** April 12, 2012, 07:47:38 pm »

I might have saved myself some time by stating the obvious: iTunes sucks. In every way. iNot is always better.

Phil LD · « **Reply #28 on:** April 13, 2012, 08:41:56 am »

Yes, for the audiophiles, no, for the rest.

rick.ca · « **Reply #29 on:** April 13, 2012, 01:34:53 pm »

Quote

Yes, for the audiophiles, no, for the rest.

I'm not an audiophile, but I'm sure that has nothing to do with one's desire to have cover art displayed properly.

Frobozz · « **Reply #30 on:** April 13, 2012, 02:01:05 pm »

It would be interesting to have an experiment done with various skins, ways of displaying the thumbnails, ways to displaying the text, etc. Time how long it takes to find 10 random albums in the different mockups. Does a border help you find them faster?

I have over 2000 albums in Media Center. I mostly use a view with panes and album thumbnails. I tend to recognize albums and recall albums more by cover art than name or title or artist so I find the album thumbnail views very helpful. Any modifications to the thumbnail view that helps me visually scan through my albums to find what I'm looking for more quickly is a win for me. Even if it results in borders around the thumbnails.

Phil LD · « **Reply #31 on:** April 13, 2012, 02:18:50 pm »

i totally agree. I think the best option would be to have an option to enable those imageborders for Album Covers. I guess this would not take too much effort by the JRiver team.
It would be nice to hear what someone of the JRiver team says to this... Can we expect this simple feature sometime soon or is it actually harder than it seems from the users perspective?

Jaguu · « **Reply #32 on:** April 13, 2012, 02:56:46 pm »

Obviously we can set white borders around images (Options>Tree&View>Thumbnails), but not around coverart (just shadows here).

In my case I have large collections of artworks, and some of them just look better with borders (or frames). But I would like to have the freedom to configure various border shapes and colors similar to HTML. IrfanView is a good example on how you can define and set borders around images. I asked for this a few times in the past, but obviously it is a minor issue.

Ideally we would be able to define borders by view or even individually with a specific border tag including border-thickness, border-type, border-color, rounded corners yes/no etc.). And I would like to have the borders or frames also in image slideshows.

fitbrit · « **Reply #33 on:** April 14, 2012, 07:19:14 pm »

Quote from: rick.ca on April 12, 2012, 12:34:34 am

Once upon a time, I was driving along the Canada-US border. My passenger suggested we nip across the border for a bite to eat. I was more interested in getting to our destination, so I made excuses. Pointing to cameras on 50' poles, I said I wasn't interested in meeting those already watching us—and probably listening to every word we say. When she suggested I was being silly, I claimed I was really hopelessly paranoid about becoming another extraordinary rendition victim. I might have been on shaky ground if not within a minute of saying that, I was able to gesture through the open sunroof at the Blackhawk helicopter flying directly above us. Needless to say, we made it to our destination on time, and they still don't have my fingerprints.

(Sorry for the off-topic play-on-words!)
Wow, good timing on the Blackhawk. I always get the prints and photo crossing into the US from Canada, because I'm a British citizen; this doesn't happen to most Canadians as a matter of course.

rick.ca · « **Reply #34 on:** April 14, 2012, 09:19:50 pm »

Quote

Wow, good timing on the Blackhawk.

The fact it matched my speed for a short time suggested it was more than a coincidence. I might have waved, but I figured they had already read my lips and I didn't want to be vaporized.

Phil LD · « **Reply #35 on:** April 21, 2012, 09:22:38 am »

Any chance we see an option to enable imageborders for Album Covers anytime soon?

InflatableMouse · « **Reply #36 on:** April 22, 2012, 05:54:06 am »

Quote from: php on April 06, 2012, 10:25:11 am

JRiver is a fantastic piece of software. However the Cover Art View doesn't have the feel of Albums being on your bookshelf like Apple has in iTunes or iBooks for iOS.

I never met anyone who put his albums on a shelf like that, placing labels on the shelf below each album with its name? In fact, that would very silly and space consuming

.

That entire shelf view is just BS if you ask me. My albums were in crates and I flipped through them, recognizing the cover. Can I have a crate view please?

No one I know had bookshelfs with albums and no one needed labels below or on the covers and I find them more disturbing than helpful. I know they are there now, but I don't use the album view in MC and on my HTPC I run XMBC which doesn't show labels thankfully

.

Quote from: php on April 07, 2012, 04:43:38 pm

Let me put it this way: The "standard view" is most likely responsible for the first impression someone gets of JRiver. So the more eye candy, iTunes like experience he gets, the more likely he will stay around getting a hint of what JRiver is able to do.

Not everyone agrees on what eye candy actually is. Some like it this way, some like it the other way. And time is a big factor in what we consider 'pretty'. Google images of OS's in the 70's, 80's, 90's etc and you'll see what I mean. Remember how website design has changed? Facebook and Google, Windows 8 and the WP7 Metro interface are going to change the way how we perceive 'pretty'. Things are going back to simple, minimalistic, square and flat. The time for 3d, glow, transparency are behind us and I for one, can't wait. I HATED those 3d, embossed, relief looks. Always have.

Quote from: php on April 08, 2012, 12:14:20 pm

As I said before, a first start would be to enable those white borders you have around images in the image section for albums as well...

Especially on a white background with a white album cover

Borders are unneccesary and distracting. Regardless of the background and whether or not an album blends in because it has the same color, the drop shadow actually gives you the idea there's a border around the entire image. Your brain does that, unless you focus directly on the area where the border isn't/would be. Example for this effect is big text of which only 2 sides are drawn (like top and left).

I remember I was looking for an album back in the days I still lived with my parents. I had this blue carpet and one of my albums was pretty much the same color blue, well mostly anyways. I was standing in my room looking around and I just didn't see it ... until I did

. It never occurred to me to put a frame around it so it would stand out

Now, here's what I would really like. A worn cover generator, to make album covers look 'worn', like those decades' old albums that have been slid in and out of the pile a 1000 times, with bent corners and all that. Now that woul be cool

.

Phil LD · « **Reply #37 on:** April 22, 2012, 11:20:49 am »

So why can I see that white border of the imagesection in JRiver on a white background: Because the whiteborder has a slight grey stroke, and grey --> white will produce contrast on any background, in case you thought the "white border" I spoke of, is invisible.

Why have I trouble seeing bright CoverArt without that "white border" on a white background: because that drop shadow, that is there, is only visible on the right and on the bottom of each Cover Art.

Thus having a white Cover with white a background will produce no contrast. I'll have a view more mockups online next week.

A view words about WP7: Those tiles they are using are monocoloured in most cases on a black background, and on top of that: squared (see my original post) --> So again we have high contrast here. I didn't hear anyone complaining about eye-strain so far. Correct me if I'm wrong.

Quote from: InflatableMouse on April 22, 2012, 05:54:06 am

Not everyone agrees on what eye candy actually is. Some like it this way, some like it the other way. And time is a big factor in what we consider 'pretty'. Google images of OS's in the 70's, 80's, 90's etc and you'll see what I mean. Remember how website design has changed? Facebook and Google, Windows 8 and the WP7 Metro interface are going to change the way how we perceive 'pretty'. Things are going back to simple, minimalistic, square and flat. The time for 3d, glow, transparency are behind us and I for one, can't wait. I HATED those 3d, embossed, relief looks.

The main Apple dock has 3D effects, the contact application couldn't be more embossed and the people love it.

But most important: There is no such thing as "no Contrast" in the real world, despite total darkness. Even your CD on the blue carpet had some contrast, depending on how the light was in that room.

rick.ca · « **Reply #38 on:** April 22, 2012, 03:53:00 pm »

Quote

But most important: There is no such thing as "no Contrast" in the real world, despite total darkness. Even your CD on the blue carpet had some contrast, depending on how the light was in that room.

Exactly. And this is why borders—the way you want to use them—are not necessary or desirable. Borders are typically used in cases where the viewer's mind would interpret some of the content continuing beyond the edge of the image. Things like album covers are usually composed so this is not the case. Where it is, the designer would include a border.

Phil LD · « **Reply #39 on:** April 23, 2012, 06:26:59 am »

Well, thats a point. True. But I think at least some of us want (even a slight simple 1px #CCC stroke on a white background would be sufficient) something around the images that differs from the backgroundcolor, so that we have clearly defined dimensions of a cover. Because even if Covers are "designed", the dimensions are part of the design and meant to be clearly seen in all situations.

Phil LD · « **Reply #40 on:** June 05, 2012, 05:24:34 pm »

Thanks for tuning the drop shadow, I now see posts in this forum are not just posts to be forgotten...

MrHaugen · « **Reply #41 on:** June 06, 2012, 02:01:16 am »

I don't like the borders that much. It's ok for many things, but I don't like how they mess up the dark covers on dark skins and light covers in white skins

It's also a color added on TOP of the covers, and not around it. So, it actually messes up a couple of pixels on the covers it seems. Hmmmm..
I hope we can have an option of turning it on/off, or do something about it with the skins perhaps?

Scolex · « **Reply #42 on:** June 06, 2012, 02:15:22 am »

Quote from: MrHaugen on June 06, 2012, 02:01:16 am

I don't like the borders that much. It's ok for many things, but I don't like how they mess up the dark covers on dark skins and light covers in white skins
It's also a color added on TOP of the covers, and not around it. So, it actually messes up a couple of pixels on the covers it seems. Hmmmm..
I hope we can have an option of turning it on/off, or do something about it with the skins perhaps?

+

marko · « **Reply #43 on:** June 06, 2012, 12:37:43 pm »

Quote from: MrHaugen on June 06, 2012, 02:01:16 am

I don't like the borders that much. It's ok for many things, but I don't like how they mess up the dark covers on dark skins and light covers in white skins
It's also a color added on TOP of the covers, and not around it. So, it actually messes up a couple of pixels on the covers it seems. Hmmmm..
I hope we can have an option of turning it on/off, or do something about it with the skins perhaps?

Indeed.
Look at this screen shot below...

Pay attention to the bottom border of the photograph, especially the bottom left corner...

This is not a part of the photo, this is MC modifying the photo by adding this bevel effect border. imvho, this is extremely bad and most definitely not wanted at this end.

-marko

JimH · « **Reply #44 on:** June 06, 2012, 12:55:43 pm »

I agree.

Phil LD · « **Reply #45 on:** June 06, 2012, 02:41:06 pm »

I also agree here. I was refering to the drop shadow, which is nice now. I didn't notice the the Bevel and Emboss around the covers until now. That is not exactly a border, but really oldstyle thing to make things look a little 3D, which is more distracting than good.

InflatableMouse · « **Reply #46 on:** June 07, 2012, 12:11:27 am »

I'm also seeing a drop shadow I didn't see on the example posted in the other thread.

MrHaugen · « **Reply #47 on:** June 07, 2012, 01:55:44 am »

Quote from: marko on June 06, 2012, 12:37:43 pm

Look at this screen shot below...

No. That don't look good at all. I think lots of photos will look bad with this.

Having some sort of frame is a thing that I guess many want. But there are also many who don't need it or don't want it. So, and option should be added imo.
In any case, it certainly ain't great to mess up the edges of the original images.

TMA-1 · « **Reply #48 on:** June 07, 2012, 12:31:44 pm »

Quote from: php on April 06, 2012, 10:25:11 am

JRiver is a fantastic piece of software. However the Cover Art View doesn't have the feel of Albums being on your bookshelf like Apple has in iTunes or iBooks...

Im all for customization options, but I especially like the way you put it as if it was the most obvious thing in the world that all album views should always have a bookshelf the way iTunes has

ksvane · « **Reply #49 on:** June 07, 2012, 05:37:10 pm »

While I personally think your suggestions are mighty fine, aesthetics is a matter of subjectivity. So, while iTunes has its own view on the matter, so do J River. iTunes is not doing it "the right way" just because it is the most popular music player available. In my opinion, they speak two different aesthetic languages that are neither comparable nor compatible.

Appropriate kisses all around.

INTERACT FORUM

Author Topic: Mockup of how to display Cover Art (Read 8421 times)