1

I am developing a web application for a soccer Association. One requirement is the possibility to enter and modify registration periods, that is the time ranges (2 per year) where the association can exchange players.

Typically there is a current registration period, one future one and some past periods. How can I better display 4 date pickers (two start and end date fields) for each category (future, current, past periods)?

At the moment inside the same form I have a list of those date pickers (4 on each row) with labels to group them according to their status (past, current, future), but in the complex the layout is pretty full and "heavy". Any hint on how I could improve it?

Below the current UI: enter image description here

Improve this question
3
  • 3
    Do you have a mockup of what you currently have that you could share?
    – BDD
    Commented Feb 4, 2015 at 16:00
  • @BDD PLease have a look at the image I uploaded. The fields are editable (datepicker fields) if the registration period is not open/passed yet.
    – Francesco
    Commented Feb 5, 2015 at 9:00
  • Do users have to fill in all of the sections (past, present, future) or are some of them optional? That is a lot of fields to fill out
    – tohster
    Commented Apr 7, 2015 at 14:04

3 Answers 3

Reset to default
4

You could use a date range picker in order to have a combined view of start and end date. Also by re arranging the fields you can make the layout more compact and easier to scan

enter image description here

Improve this answer
3
  • What library did you use for the datepicker? Looks very good.
    – user4035
    Commented Apr 7, 2015 at 11:11
  • It's the date range picker from Google Analytics, you can find various implementations with jQuery
    – Stevy
    Commented Apr 7, 2015 at 11:23
  • I like the data range picker, very nice! Thanks for the answer.
    – Francesco
    Commented Apr 15, 2015 at 8:50
1

Use a (ideally scalable) horizontal timeline with draggable start/end days. Differentiate past/current/future periods with colours, and make extra distinction for current period if it has more value than the other ones.

Improve this answer
1
  • @Janik thanks for the hint. Do you think draggable days are easier to pick than a usual datepicker calendar? I like the idea of allowing to show a calendar view for the available dates. Would you have a web link or a mockup to show your approach?Thanks
    – Francesco
    Commented Feb 5, 2015 at 9:03
0

There is no reason to display all past seasons. Will be better when the label on the button will contain "save" instead of "ok". Don't forget about feedback for the user.

soccer date table

Improve this answer
1
  • for business requirements all the past and next seasons must be displayed, I also personally do not like it very much.
    – Francesco
    Commented Apr 15, 2015 at 8:49

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.