Can someone guide me what is the design pattern used in the below image?
What is it called?
-
38While 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.– RunnickCommented May 4, 2017 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 HenleyCommented May 4, 2017 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 :)– RunnickCommented May 4, 2017 at 17:13
-
2The motto of Norstrilia: "Don't be too clever"– user67695Commented May 4, 2017 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 HenleyCommented May 4, 2017 at 18:39
|
Show 4 more comments
2 Answers
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.
answered May 4, 2017 at 7:09
-
1It'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/…– flithCommented May 4, 2017 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 ツCommented May 4, 2017 at 12:41
-
2By the way, latest OS X uses usability friendlier design: core0.staticworld.net/images/article/2016/03/…– RunnickCommented May 4, 2017 at 15:11
-
2Here 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– jejorda2Commented May 5, 2017 at 13:55
-
1@Runnick The latest "OS X" is named "macOS". Not to be confused with "Mac OS", of course. Commented May 7, 2017 at 12:16
It's an ordinary Carousel with a fancy 3D touch to it.
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).
