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 have this website called billboard.fm where people can listen to the top 100 songs from each year and recently launched a responsive design at http://beta.billboard.fm that uses YouTube instead.

I have gotten feedback that it is hard to know where you can select the year from the top navigation. On the original site it was very simple because it displayed decade. What is the best user experience to help guide users to pick a year?

share|improve this question
    
Hi @Jeff. Welcome to the UX Stack Exchange! I've edited the tangential question about modals out of your post because its best to ask one question per thread. Please feel welcome to repost a question about modals separately. –  3nafish Jul 13 '13 at 3:42
1  
Thanks a lot! Sorry about that, first post...I'm excited to learn from everyone. –  Jeff Callahan Jul 13 '13 at 6:22
    
+1 for great idea, I think I will find myself using this site more than normal :D –  nashmaniac Jul 13 '13 at 6:43
    
Thanks a lot! It doesn't get nearly as much traffic as the original site, but the videos really add a nostalgic value for me. –  Jeff Callahan Jul 13 '13 at 6:46
    
Is there a way to view lyrics ? I think it would be a nice addition –  nashmaniac Jul 13 '13 at 6:48

5 Answers 5

up vote 5 down vote accepted

It seems that decade/year selection is one of the most important elements of the website. It certainly seems to be the most important navigational element. I personally feel that your current navigation and the other suggestions here have failed to recognise the real issue: that you haven't afforded the navigation enough screen space.

I think it would be better if you were to utilise more screen space for decade/year selection because it seems to be such an integral part of the site. The current solutions are trying to squeeze the navigation into a tiny space, and I think that's the wrong approach.

Something along these lines are my thoughts:

Year Selection

It looks and behaviours like a traditional menu, and I think is farily simple to use for most users. There's no learning curve needed to use it.

share|improve this answer
    
Dude, this is amazing. You brought a smile to my face, big time.... I love it. –  Jeff Callahan Jul 13 '13 at 22:24
    
@JeffCallahan If you like the answer, you should also upvote it ;) –  rk. Jul 13 '13 at 22:33
1  
I know...I was going to comment about that...I don't have a high enough reputation to vote yet, but when I do, I will. –  Jeff Callahan Jul 13 '13 at 22:39
    
And there also might be some mobile implications with this, but I think I may have to do a separate mobile menu no matter the case...any ideas for that? –  Jeff Callahan Jul 13 '13 at 22:41

Something like this could be done.

enter image description here

If year is what you want to emphasize on you can add something(IDK what is its actual name) that scrolls automatically when mouse reaches towards the end. Considering the amount of motion there is on your site I believe this would be easy for you to implement.

Furthermore you can emphasize on the decade by like in this example boldening the text.Also you can make switching between decades easier by placing arrows which directly take you from one decade to another e.g 1980 to 1990. It would be really easy for the user to discover this. Feel free to comment if all this doesn't make sense. I'll be happy to help

Here are some javascript/jQuery examples

http://jsfiddle.net/gaby/72yhW/2/

http://portfolio.robincwillis.com/ (hover over the left most portion)

http://robincwillis.com/_test/autoSlide/

More on this

http://www.robincwillis.com/AutoScroll/

Alternate

Another simpler way to do it would be something like this

enter image description here

The dropdown allows selection of the decade and numbers from 0-9 allows selection of a particular year . On hover the box slides open to reveal the year completely, so for the user this would be easier to understand and use. (The white box denotes selected year)

share|improve this answer
    
I really like the way that looks, can you find any working examples online? –  Jeff Callahan Jul 13 '13 at 7:12
    
Here this is done in flash youtu.be/AK27oUrdHkg?t=8s . I think it'd be easy to translate into javascript. I'll find a javascript example too, I know I've seen it somewhere hang on. –  nashmaniac Jul 13 '13 at 7:20
    
Mentioned some examples in the answer. –  nashmaniac Jul 13 '13 at 7:35
    
Awesome, thanks so much...my only concern though, is the implication for mobile devices, would it be swipe action at that point? –  Jeff Callahan Jul 13 '13 at 7:35
    
It'd be great if you can implement swipe action for the mobile version . Faded edges generally convey scrolling/swiping. But the thing is you will have to develop a different version of the site for mobile use as the auto scroll can cause problems. It's a problem if you're pursuing responsiveness. Otherwise it's ok, and there are many different free libraries available that can help you with the swiping pane. –  nashmaniac Jul 13 '13 at 7:40

The year itself is not enough to make choice - use images, collages, photos for each year. Then place them into slider like this one - FlowSlider. So user can work only using his mouse for scrolling 'in time' :-)

I'm not affiliated with FlowSlider's authors - it was just the first in google's response to me finding illustration for general idea.

share|improve this answer
    
Thanks for the link, i do really like this idea conceptually, it just has some mobile implications which would be hard for me to manage. –  Jeff Callahan Jul 13 '13 at 17:32
    
+1, I thought of slide too. The decades showed as slides with artists photo mix and separate years are displayed as dropdown menu. –  Alexey Kolchenko Jul 15 '13 at 4:56

The easiest visual cue will be to make it a narrative sentence. The decade becomes a drop-down menu. It is quite clear in the indication and also removes the un-necessary modal.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You can use the drop down for showing 60-70 years that you have. Since it is not a regular interaction (not something you do every couple minutes) you can have a longer drop down.

Else, you break it down into two parts: first part selects decade and second part selects year.

share|improve this answer
    
I really like this idea...but after you choose the decade from the drop-down menu, how do you go about choosing the actual year? Nested menus? –  Jeff Callahan Jul 13 '13 at 6:23
    
@JeffCallahan Ah, I missed that part. I did not know there were 2 levels in the modal. Updating the answer. –  rk. Jul 13 '13 at 16:10
    
Thanks, I like that idea, as well, I am just pretty limited by the height of the nav bar...I initially had the drop down with nested menus, maybe it is worth another shot. The dial is also cool, but I'm afraid it will affect the height of the nav menu. Thanks for your help-these are really good ideas. –  Jeff Callahan Jul 13 '13 at 17:14
    
@JeffCallahan Just throwing out the last option ;) You do not really need to use the entire dial. Let the user click/type in the year. –  rk. Jul 13 '13 at 17:21
    
That is better, can't believe I didn't think of it. I like that a lot. –  Jeff Callahan Jul 13 '13 at 17:30

You could use calendar-like one-click year selector, which rolls out with mouse click (tap) on the current year control. On mobile just don't make transparent decade rows for high performance.
year selector

share|improve this answer
    
This is a really cool idea as well...this might be the best solution for mobile and solves the problem best with the current layout (with the year being displayed in the top navigation). –  Jeff Callahan Jul 15 '13 at 6:13

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.