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.

I might already know the answer to this but would like some feedback / opinions on this. I am currently putting together a responsive design that will use a linear horizontal timeline. This works fine on Desktop to Tablet but on Mobile it will shrink to a very small scale.

Desktop:

Here is a similar timeline using a responsive design:

As you can see its a little unusable because it is so small.

On two mobile Apps I found they introduce a larger timeline that a user needs to scroll to see the rest of the timeline:

I think once you get to the mobile size, the scrolling to the right is the better option, is there an valid argument for the very small one that fits on the mobile but is so small you can barely understand what is going on?

Thanks

share|improve this question

3 Answers 3

There are two options you can look at:

  • convert the horizontal timeline into a vertical timeline so that users can scan it by scrolling down. While horizontal scrolling will work but its not exactly super intuitive (it would work if you had separate sections with clearly delineated titles but a continuous image might not work too well) in mobile devices and hence a vertical scrolling timeline might help.

  • You should show a condensed version of the timeline where you might not want to show the details every 5 minutes but more like 10 minutes or 15 minutes so that you have a summarized version.

share|improve this answer
1  
The vertical timeline will take up a very large amount of space on a mobile device. I am not sure if that makes sense for what I am doing. It also will have a large amount of negative space on either side, which might make it look insignificant. –  Xtian May 15 '13 at 15:03

Big is good. Big is readable.

If you give the user a sign of what they need to do it will be user friendly. Please use gestures, people like using gestures.

Just make sure you add some sort of indication that will tell the user what to do and they should be able to use the feature.

responsive

share|improve this answer

You can do a contextual display of the timeline, let the user select a portion of the time line they want to focus on and show that in a detailed manner.

Something along the lines of what SE does with the reputation graph: enter image description here

You can show the entire timeline in a horizontal manner to the user and let him select a section by clicking and dragging, or providing input boxes since it's difficult to get precision on mobile.

share|improve this answer

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.