5

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)?

Improve this question
4
  • 1
    Ugh....! what this is is a splendid specimen of one who bit off more than one could chew...
    – AndroidHustle
    Apr 20, 2012 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, 2012 at 14:08
  • 8
    DEAR GOD. This is one of the worst UIs I've ever seen.
    – Adam Grant
    Apr 20, 2012 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, 2012 at 14:30

4 Answers 4

Reset to default
2

(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.

Improve this answer
8

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/

Improve this answer
2
  • I think a carousel is different. Carousels show more than 1 items at once.
    – Bart Gijssens
    Apr 20, 2012 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, 2012 at 14:18
2

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.

Improve this answer
2

(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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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