Preview of new PBI Edit Dialog

Microsoft shows a new design preview for the Product Backlog Item edit dialog. As usual, Microsoft releases this in Visual Studio Online before it arrives in the on-premise version of the Team Foundation Server. So the software vendor engage users to give feedback on the changes. IMHO it was time to focus on this dialog since the user experience was not that handy. So let’s have a look what Microsoft has done for now. Just for comparison, this is the old dialog:

Old PBI Edit Dialog
Old PBI Edit Dialog

Microsoft keeps all the controls from the old dialog but spends a complete new layout. The result looks like this:

PBI Edit Dialog
PBI Edit Dialog

Missing the Status and Details panes? No, the new dialog is more responsive now. So resizing the window or the dialog itself rearranges the controls so that they make efficient use of the available space. Making the dialog wider looks like this:

Responsive PBI Edit Dialog
Responsive PBI Edit Dialog

Changes I like

  1. Responsive Design.
  2. Cleaner design, less line, more structure – lets the dialog look fresh and modern.
  3. Title Bar – Important information is on the top, like the state, which person works in the item, number of comments and link to the discussions, as well as important functions like save, undo, redo etc.
  4. More Details Pane – More details about the backlog item are shown above the tabbed content. There you find the area, iteration, when and by whom the item was updated the last time and last but not least: the tags.
  5. Direct Edit – You can change all the details (e.g. assigned person, state, are etc.) with a click. Was the same in the old dialog, but now it feels a bit better.
  6. Tabs – Areas of the dialog are now arranged in tabs. So there is more available space for each area, e.g. for the details, history, links and attachments, because they all have their own tab. Really nice. You can now see more information in one view.
History Tab in PBI Edit Dialog
History Tab in PBI Edit Dialog

My Suggestions

But there are some points I do not like and some suggestions what I would like to change.

  1. There is only a single, light gray vertical line that indicates that there is an input control, e.g. for effort, business value and so on. This is a bit confusing and it is not clear that there is an input control. The overall layout feels unclean with that. This is reinforced through empty fields. I would prefer a complete border for input controls or if there are some meaningful default values. Then, as a user, I can see that there is a value I can change.
  2. One problem of the old dialog was the available space for the description and acceptance criteria. It’s not better now. These fields are not really resized when resizing the window nor I can resize them manually. There is the maximize button for each field, but I don’t like that. Maximizing the fields means that I lose context since all other fields are hidden. I would like to resize those fields manually to my desired size.
  3. There could be more space for the description text and the acceptance criteria, if the fields from the status pane and from the details pane are put into the header resp. put them above the tabs. And why not? Priority, effort, business value etc. are important values and want to see always (as is for the area iteration etc.). So I would put old the fields from status and details pane to the top. And then there is more space for the other fields.
Suggestions for PBI Edit Dialog
Suggestions for PBI Edit Dialog

Conclusion

The new design and layout of the PBI edit dialog feels cleaner and modern. But currently there are some functions missing and there is place for improvements. But the overall direction is the right one. What do you think?

Written by robinsedlaczek

I am studying informatics at TU Berlin and work as project manager at Fairmas Berlin. Further I develop technical solutions in the Microsoft .Net environment.

2 comments

  1. Robin, thanks for the great feedback.

    1. Changes are in flight already here… we’ve dropped the vertical line, and are tightening up the spacing and contrast.

    2. Makes sense, and we’ll get to this over time. We’re first adding support to add new fields. When we do that, we’ll add support for HTML fields with custom sizes.

    3. I love this idea and we’re playing with some ideas. No finalized design yet, but we’re kicking around thoughts. Ideally the user could choose the fields that matter most and “pin” them to the header.

    1. Hey Aaron!

      Thanks for your answer. It’s great to see how Microsoft is hearing user feedback, over and over again!

      Pinning fields sounds really good. So pinned fields disappear from the tab once they are pinned? As stated, resizable or larger description and acceptance criteria fields would be great at the end!

      Thanks again to you and your team! Keep movin’! 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s