Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

The Facts About Coventry website has a flash plugin app for navigation of data (bottom half of the page). It's a big circle where you can hover over the icons to get a description of the category and click to access the category's page. The bit I'm most interested in is the cycling panel in the middle (highlighted in red)

enter image description here

I have two questions based on it:

  1. What's this sort of web-interface mechanism called (the bit highlighted in red)?

  2. From a purely UI perspective, how does the cycling-panel part of it fare (I'm not interested in the rest of the page)?

share|improve this question
1  
Ugh....! what this is is a splendid specimen of one who bit off more than one could chew... –  AndroidHustle Apr 20 '12 at 14:05
1  
Btw, in technical terminology this type of interactive element is called a "carousel, as Hagan mentioned. The "cover flow" would be a variant of the carousel. –  AndroidHustle Apr 20 '12 at 14:08
8  
DEAR GOD. This is one of the worst UIs I've ever seen. –  ajkochanowicz Apr 20 '12 at 14:15
1  
Ohhh...I didn't even realize there was a carousel in that thing. I thought you meant the weird orbital...thing –  Ben Brocka Apr 20 '12 at 14:30
add comment

4 Answers

up vote 2 down vote accepted

(a) I'd call the middle section a carousel, but some people call it a slider.

(b) While I'm not loving that page design, being in the centre, the carousel acts as a focus for the user's attention, and serves to showcase headline content — typically it might feature curated or editor's choice types of content, or "hero objects", things that the site owner/organisation wants to promote at the moment. For instance, if it was a museum website they might want to highlight their latest exhibition and invite people to click through and find out more, but then the carousel might rotate to show something else that's of potential interest too.

When using carousels on a site, it's also worth considering whether you might:

(i) allow users to override any existing transitions and click through the items at their own pace, in case they catch the end of an interesting-looking item and want to go back, or want to browse faster than the site's transitions are set up to do. News sites with tickers showing the latest headlines sometimes do this — The Guardian is one example, though the text is so tiny and the scroll arrows so far away that it's not brilliant from an accessibility point of view:

screenshot from Guardian.co.uk ticker, showing a single headline and arrows allowing forward and backwards scrolling to see next/previous

(ii) include some visual indication that you are currently viewing object X out of a total set of Y. Sites that do this include Epicurious.com - you can see from the little buttons underneath the carousel which object/image is currently 'selected':

screenshot from Epicurious.com showing visual navigation below the carousel so we can see that we are viewing the first of four items

Neither of these examples is perfect, or particularly aesthetically pleasing, but I hope they get the idea across.

share|improve this answer
add comment

It's called a Carousel. You can read more about it at

http://ui-patterns.com/patterns/Carousel

http://developer.yahoo.com/ypatterns/selection/carousel.html

http://www.androidpatterns.com/uap_pattern/carousel

See some examples here: http://www.uipattern.com/carousel-design-examples/

share|improve this answer
    
I think a carousel is different. Carousels show more than 1 items at once. –  Bart Gijssens Apr 20 '12 at 14:07
3  
@BartGijssens It's not necessary for a carousel to focus multiple items at once, especially not in a 3d-carousel that the this tries to mimic. In a 3d-carousel only one item can be in the foreground at one time. –  AndroidHustle Apr 20 '12 at 14:18
add comment

a) The thing you circled in red looks like some sort of cover flow to me.

b) I found it quite hard to navigate through it. It is also hard to get an overview of how deep things go and how broad the sub-subjects are. When selecting a "cover" that is half covered, the selected one should rotate to front.

share|improve this answer
add comment

(a) I don't think there is a specific name for this. It seems to be some kind of poorly implemented 2D Fliptych-like attempt.

(b) As I said, it is poorly implemented. There are a number of things wrong with it:

  • During the animation, where a picture is becoming visible, it suddenly flips above the picture that is disappearing. It's very un-smooth.
  • The animation just keeps on running, and the user is forced to press the "next" or "previous" button in order to stop the animation. When those buttons are pressed, the animation stops immediately, even when a grphic is only partially shown.
  • it just does not look nice.
  • It does not seem to bring any added value here. The opposite is true. A simple list (possibly including the graphics) would be a much better choice here because one would have a much better overview. A UI control like the FlipTych UI is only useful in very specific cases, like in iTunes, where the user browses through a set of albums possibly without a specific choice already in mind and makes a choice based on recognition of the graphic. The element of recognition is totally absent here.

I am not saying this kind of UI is bad by definition. Though it must be very well implemented (which is hard), and it should be used for the right purposes.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.