1

I have a little web app that basically shows a roadmap of projects. Think your typical timeline view like this:

enter image description here

Each project has a date. Right now if you want to change the date of a project you double click and you get a detail popup and you can go change the date and then close the popup and the timeline refreshes.

I now have situations where new projects that are added that are top priority so i basically need to change the date of all items after that (which is quite painful doing one by one). Going in one by one for each project is quite painful and i wanted to see if anyone has seen any good examples of user experience around making bulk fields changes.

In some cases i would want to say "push back this set of 10 projects back a month" and in other cases i would think it would be more date specific where i would just want a more frictionless way up updating dates on multiple items. I am thinking some slider or drag and drop, etc but can't find anything very good after googling for a while so wanted to reach out to this community to see if there were any suggestions or example that people that were very good.

2 Answers 2

2

I would do two things.

  1. I assume that adding a new project requires some sort of form. Add to that form a section that lets the user push back later projects. Probably it should also let the user decide whether all later projects should be pushed back or just some of them - and then it's just a list with checkboxes and one field for specifying the offset. Alternatively it can be a dialog that comes up after they're done with adding the new project.

  2. When you need to change the dates but it's not due to adding a new project. When you edit the date for an existing project you could also provide an entry point into the workflow I've described above, like a checkbox that says "update dates for consequent projects" and opens up the UI for selecting all / some and providing the offset.

4

I think there could be usability issues with your current design.

  • Dates duplicating clutters the interface. The dates are both on the timeline and within text blocks.
  • Too narrow text blocks lead to bad readability.
  • Bad reading pattern could lead to error in data perception:
    enter image description here.
  • Uncomfortable "jumping" reading pattern.
  • The entire graphics is too heavy (line width, etc.) which shifts the focus from the data to graphics.

.

Possible solution is to present the timeline in a vertical way with separate date column. Then you could move the projects in a two ways, see the picture below:

  1. Move the starting block of project with the "global" option, which affects the entire project.
  2. New project, which is inserted, automatically pushes down current project.

enter image description here

UPDATE
Overlapped projects could be presented ase parallel stacks. The stacks could be expanded to display the data. Narrowed view allows to focus on a current project while keeping track of other projects. Also ordering from left to right by priority allows to support convenient reading pattern.
enter image description here

5
  • +1. Vertical timeline is more intuitive and offers a lot of space for information.
    – Fr0zenFyr
    Jan 4, 2014 at 8:13
  • I like your idea and the vertical, but how would you allow for overlapping projects? They are clearly present in OP's example? Jan 4, 2014 at 13:11
  • @MarjanVenema, thank you for suggestion. I've updated the answer. Jan 4, 2014 at 15:52
  • Cool. Me likes. Jan 4, 2014 at 17:58
  • A top down timeline seems so unintuitive.
    – GollyJer
    Jan 6, 2014 at 16:37

Your Answer

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

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