19

Can someone guide me what is the design pattern used in the below image?

iTunes: list of cover images

What is it called?

  • 38
    While first name may be "carousel" or "cover flow" as was mentioned, but it's last name is "think twice before using me". Distorted images add no benefit to user experience. – Runnick May 4 '17 at 15:08
  • 6
    @Runnick I'm not claiming it is a good thing to do, but a potential benefit of that transformation is you can see more of the images (as opposed to unaltered rectangles) while using less screen space. Almost like you are flipping through a stack of albums. – Austin Henley May 4 '17 at 16:49
  • 2
    @AustinHenley I'd argue you can really see only three images; other are actually hidden (you see like 10% of the image). With regular thumbnails you'd see more. As for albums stack I don't want to flip it, I want the ones I need to jump right in my hand :) – Runnick May 4 '17 at 17:13
  • 2
    The motto of Norstrilia: "Don't be too clever" – user67695 May 4 '17 at 17:57
  • 1
    @Runnick I use Spotify which only shows maybe 5% of the album cover (less than in this screenshot), and I can always recognize what it is. I wish Spotify would stack more of these 5% previews! – Austin Henley May 4 '17 at 18:39
49

It's called Cover Flow.

It's used by Apple in OS X (among others).

Cover Flow is an animated, three-dimensional graphical user interface element that is integrated within the Macintosh Finder and other Apple Inc. products for visually flipping through snapshots of documents, website bookmarks, album artwork, or photographs.

See: Cover Flow

Edit

As made clear by comments, Cover Flow is based on the Carousel pattern.

Carousels allow multiple pieces of content to occupy a single, coveted space. This may placate corporate infighting, but on large or small viewports, people often scroll past carousels. A static hero or integrating content in the UI may be better solutions. But if a carousel is your hero, good navigation and content can help make it effective.

More on carousels here.

Another interesting link provided via the comments about the origins of the Cover Flow here.

  • 1
    It's not limited to Apple products (although I have no idea if that's where it originated or not). It's a quite common theme on many media server applications, for example (Emby, Kodi, that sort of thing) or anywhere that a pretty visual representation of content is required. Here you can see it in Windows Media Center, for example: cdn.redmondpie.com/wp-content/uploads/2009/08/… – flith May 4 '17 at 12:32
  • 10
    @flith That's exactly why I think those "Apple" (or actually any company based) answers are not really constructive. In this case Cover Flow seems to refer to an Apple product which is not really a design pattern on its own. – Rolf ツ May 4 '17 at 12:41
  • 2
    By the way, latest OS X uses usability friendlier design: core0.staticworld.net/images/article/2016/03/… – Runnick May 4 '17 at 15:11
  • 2
    Here is a forum thread where the (late) developer called it Cover Flow before he sold the idea to Apple: arstechnica.com/civis/viewtopic.php?f=19&t=313706 – jejorda2 May 5 '17 at 13:55
  • 1
    @Runnick The latest "OS X" is named "macOS". Not to be confused with "Mac OS", of course. – Andrew Morton May 7 '17 at 12:16
47

It's an ordinary Carousel with a fancy 3D touch to it.

Carousel according to the Yahoo design pattern library

Image source: Yahoo design pattern library

Carousels are often used on webpages, in this context a carousel often shows a single item at any given time and offers some sort of auto rotation function. Many think that using carousels on webpages (as header) is considered bad practice, for various reasons I will not cover in this answer.

Carousels come in may different variations and can be used in many different ways. An often seen usage is that of browsing a set of images (or albums) some offer a 3D like experience like in your example.

Navigation is often a combination of: scrolling, touch (mobile) or navigational buttons. When a carousel contains a limited amount of items a progress style navigation element can be used to show the currently selected/focused item (page-indicator).

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.