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.

As a javascript developer, the simplest way to implement sliding is to just put all items in a row and animate by changing a css property.

Are there any reasons to do it this way besides the simplicity of implementation?

If this is considered the best approach, then what timing should we choose? We can switch between each item at a constant rate, no matter how far one is from another, or we can mimic "physical behavior" and use fast animation for the closest item and slow for the furthest.

Are there any alternatives to this approach that would work in HTML5?

For example, if you click the last item in the list, I could ignore any items between the first and last one and just slide immediately to the clicked item.

 while navigating towards this slide,  you'll be scrolled  through all that in between.

share|improve this question
1  
I don't understand the problem you're trying to solve. Nivo Slider, for example, allows non-linear browsing of objects. –  dnbrv Jan 12 '12 at 22:54
1  
@dnvrb - I'm trying to figure out what is considered best approach. off the top off my head I can think about 100 different transition effects, it doesn't means any of the is a good fit for production. UX is 90% about approaches proved to be best then other ones. –  shabunc Jan 12 '12 at 23:02
    
@dnbrv - and thanx for the link anyway! –  shabunc Jan 12 '12 at 23:03
1  
@dnrbv - with all due respect, my question is pretty clear. What kind of rephrase do you find appropriate? I have a carousel which exists exactly for the same purpose as one provided on the picture. Besides, risk to be down voted is the only way to learn to ask right questions, if you are annoyed by the fact you don't understand the purpose of this question, feel free to down vote. Personally me just ignore question I just don't know what to answer. But it is your right. –  shabunc Jan 13 '12 at 4:06
2  
"I've chosen a screenshot from some kind of fruit company's site" - had me laughing pretty hard. –  Matt Rockwell Jan 13 '12 at 15:58
show 8 more comments

2 Answers 2

This is what comes to my mind:

  • Choose the transition type that fits the overall mood and the purpose of the web site.

    • If you want to communicate a feeling of for example smoothness or luxury maybe a opacity or crossfade transition could enhance that mood.

    • If you want to communicate a cool or upbeat feeling maybe a 3D flip transition is the best way

    • or if a childish feeling is what you want to communicate a bouncy effect is the way to go.
    • If people is going to use the web site for solving tasks all day long maybe a discrete transition that people wouldn't get annoyed by looking at 50 times a day is the best way.
  • If the visitors wants to move between the slider items it gives people a sense of orientation if they have to go trough all the slides between the current slide and the target slide. Especially when the buttons don't have any labels.
  • I don't like those small buttons on the fruit company's web site. They are to hard to hit.
share|improve this answer
add comment

Assuming you're "scrolling" or sliding the slides around it makes most sense to display all slides between point A and B; that's just how real-world objects like film reels work.

This presents a problem however when you start scrolling between large amounts of slides. Try to keep a delay of under 500ms to avoid being too long and showy, and avoid too short of a delay as it can seem a bit too fast as sources indicate in this answer regarding response times. Note that an animation under 100ms is not going to be seen as instantaneous as we can see that something has occurred, but it's a bit of an unnaturally brief time for physical responses. Human reaction time is around ~200ms.

Consider the Motion Principles outlaid in Meaningful Transitions. Effects like Slow In Slow Out and Follow Through give the impression of inertia; if scrolling more than one item at a time automatically this should be used to indicate when the movement is starting and stopping.

Think of it like a real world slider accelerating as your hand moves the device, keeping it's speed after your hand leaves and then coming to a stop "k-thunk" as it snaps into the last position. This is a common effect on iOS and many touch screen controls where visual feedback shows you when you have reached the "end" of a page. In this case however the "end" is the new selected item.

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.