1

Say you have features A and B with following pages:

A: List -> Detail -> Edit
B: List -> Detail -> Edit

On page Edit (B) you have a dropdown to select a record of type A. You might want to edit that record. So the flow would be:

List (B) -> Detail (B) -> Edit (B) -> Edit (A)

How would you design a good ux experience for that kind of flow?

Some ideas:

  1. Let the user exit the B flow and go all the way to A: List -> Detail -> Edit and then back to the Edit (B) page.
  2. From Edit (B) link the selected record to Edit (A). Use a breadcrumb to indicate where the user is located.
  3. From Edit (B) open Edit (A) page in a dialog or side sheet.

Idea 1 is bad. The user has to go through multiple navigation steps to achieve the desired result. Idea 2 is better. Idea 3 is again a little bit better, because the user does not leave the Edit (B) page.

What do you think? How is such a problem generally solved?

DarkLeafyGreen
  • 243
  • 2
  • 7
  • 1
    I think idea 1 is the best option as it provides focus to the specific tasks. Introducing additional steps isn't necessarily a bad thing, but it all depends on how you let users maintain the overall view of the process. Without any more details or visuals it is hard to give advice on that. – jazZRo Sep 16 '22 at 12:02

2 Answers2

1

There are two concepts here:

  1. Path taken to arrive at current location (breadcrumb trail), and
  2. Relationship of current page to application structure (sitemap).

Both are helpful pieces of information for the user to know. But if both are presented must be cognitively distinct from each other—not to confuse one with the other.

 

That may be done with location on the page. Breadcrumbs typically at the top/left, sitemaps typically at the bottom. Other locations can work—one left, one right—but most important is the location is different and consistent.

And delimiters can help distinguish a trail from a map. Arrows naturally for trails, bullets or bars for maps.

List (B) → Detail (B) → Edit (B) → Edit (A)

Edit (A) page goes here.

Blah, blah, blah.

A: List • Detail • Edit

 

Labeling or icons may speed mental processing:

Path: List (B) → Detail (B) → Edit (B) → Edit (A)

Edit (A) page goes here.

Blah, blah, blah.

Map: A: List • Detail • Edit

Idea 1 introduces more clicks, and cognitive load. Have you ever gotten to the car, remembered the keys, got back in the house and forgot what you came back for?

Idea 2 maintains the flow. But a user may loose track of where they are and how they got there. The solution above gives the user a better idea where they are from both how they got there and how the page fits in the application structure.

Idea 3 streamlines the process for the user, but doesn't help the user understand the relationship of that page in the application. And it increases the complexity of programming and maintaining the program. (Of course better to increase complexity of the code-base than the user interface—but only if necessary.)

bloodyKnuckles
  • 2,655
  • 10
  • 16
0

Your best bet here is to see what your users prefer.

Ask people who would use the pages what they think. You could make some sort of tree branching test with tasks in a specific order so you can see what they would expect from navigating from one page to another. Optimal workshop is a good site for creating tree branching studies if you haven't done one before.

Jivin Jawanda
  • 318
  • 1
  • 8
  • 1
    I urge, don't ask users' preference—rather, as you mention, set up tasks then measure quantitative and qualitative metrics. – bloodyKnuckles Nov 03 '22 at 03:14