4

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?

8
  • 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. Jul 13, 2013 at 3:42
  • 1
    Thanks a lot! Sorry about that, first post...I'm excited to learn from everyone. Jul 13, 2013 at 6:22
  • +1 for great idea, I think I will find myself using this site more than normal :D
    – Nash Vail
    Jul 13, 2013 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. Jul 13, 2013 at 6:46
  • Is there a way to view lyrics ? I think it would be a nice addition
    – Nash Vail
    Jul 13, 2013 at 6:48

5 Answers 5

5

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.

4
  • Dude, this is amazing. You brought a smile to my face, big time.... I love it. Jul 13, 2013 at 22:24
  • @JeffCallahan If you like the answer, you should also upvote it ;)
    – rk.
    Jul 13, 2013 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. Jul 13, 2013 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? Jul 13, 2013 at 22:41
2

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)

7
  • I really like the way that looks, can you find any working examples online? Jul 13, 2013 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.
    – Nash Vail
    Jul 13, 2013 at 7:20
  • Mentioned some examples in the answer.
    – Nash Vail
    Jul 13, 2013 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? Jul 13, 2013 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.
    – Nash Vail
    Jul 13, 2013 at 7:40
1

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.

2
  • 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. Jul 13, 2013 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. Jul 15, 2013 at 4:56
0

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.

5
  • 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? Jul 13, 2013 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, 2013 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. Jul 13, 2013 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, 2013 at 17:21
  • That is better, can't believe I didn't think of it. I like that a lot. Jul 13, 2013 at 17:30
0

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

1
  • 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). Jul 15, 2013 at 6:13

Your Answer

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

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