1

I'm creating a website for a bike-group that exists for 41 years.

I want to create a page with the members of the bike-group. I can list them all, or I can let them choose which year they want the members from.

What is a good UI solution to picking between 40 relevant years?

Listing them all as links? A 'select' input type?

Has someone example websites or mockups?

Anything is welcome, mind 'senior' users, if possible.

Improve this question
3
  • 1
    How will you be showing the members? – Mervin Feb 12 '14 at 18:50
  • Members could be show over all years and by year. – Tixiv Feb 12 '14 at 19:55
  • You could use any number of UI elements. It all depends on the bigger picture. – DA01 Feb 12 '14 at 19:59
1

To me, this sounds like a filtering mechanism on whatever method you use to display the list of members, rather than a way of searching, assuming of course that membership is reasonably stable across years*. That could be done with something like a Range Slider ala jquery or a normal dropdown.

*: If that's not the case, and depending on the format of your application, I'd personally tree the years by Decade just to narrow the list down to a manageable number. I wouldn't want the user to go looking for someone, but not remember the exact year and give up on their search.

Improve this answer
1

By default, you could display the current group members and current year by default unless some research showing that another default sorting criteria is more important.

What about grouping the 40 years by decade. Then clicking on a decade would reveal 10 links, one per year.

A nice to have would be a search field or mega menu to quickly jump to a specific year.

Improve this answer
1

I typically choose a UI framework specific to the language I'm going to develop in. Let's assume you were going to use something like jQuery for your client side needs.

You could then use their sister UI framework, jQuery UI, which has many different widgets to pick from. You can also configure your own UI Theme to match your color scheme or you could pick one of their many premade themes like, Smoothness.

As far as settling on a particular UI widget that will suit your needs, you just need to try them all and see what you like best. I would probably settle on one of the following two widgets.

You could use their Spinner Widget and do something like this:

jQuery UI Spinner Example

You could use their Slider Widget and do something like this:

jQuery UI Slider Example

I created a working jsFiddle demo that has both widgets on the page for you to play around with.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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