looking for UI design ideas for tracking a process

[David Schwartz 426]

I'm looking for design ideas in terms of how to approach this process model from a UI perspective. This isn't something that gets discussed very much here, so I thought it would be fun to see what others have to say.

 

FWIW, this is something I'm building to save my own sanity at work. 🙂

 

Say you have a process that has several steps, eg:

 

o Prepared

o On-boarded

o In Progress

o On hold / problem / issue

o Waiting for more info

o Pending signoff

o Completed

 

I set these up using a TRadioGroup. It works ok, but I'm finding things "falling between the cracks".

 

So I'd like to break each one into more detailed steps. If there are sub-steps, each of the sub-steps must be checked-off in order to get the entire step marked as complete.  Some can be optional, but the required ones need to be checked or some alert will be displayed.

 

The nature of things is you can't really jump ahead, but you can go back -- mainly to the hold or waiting steps then back to "In Progress"

 

"Pending signoff" might breakdown into these sub-steps:

 

-- Team code review (optional)

-- Team signoff

-- Publish to QA server

-- QA tests complete

-- QA signoff

 

FWIW, this is not intended to implement a fancy and highly-controlled workflow of any kind. Rather, it's intended to be more of a GUIDE ... a list of things to remind us of all the detailed things that need to be done for different kinds of tasks, like a checklist.

 

There's a similar approach to each task, but they have some variations depending on different things, and it's often hard for us to keep the differences straight. So having a list that's customized for a related set of tasks (or task group) will help us keep from doing stuff that's not needed, or forgetting things that are needed, for each kind of task.

 

For example, one group of tasks might require you to paint things green, while another might require them to be painted white. They all require being painted, but having a specific thing that says what color for a given group is often very helpful, so you don't have to ask someone or go searching through your notes. It's not obvious if you don't know, and not well documented otherwise. Until you've done it a few times, that bit of missing data can slow you down quite a bit. So rather than simply saying, "Apply paint" the step would say "Apply GREEN paint" or "Apply WHITE paint" or whatever, depending on which task group it belongs to. That's what I'm trying to get at here.

 

For any given group of related tasks, their lists would be pretty much static -- that is, the steps involved change very rarely. (They've been in place for years. The problem is, one guy has been doing them for years, and he has forgotten more than he can recall. In training us to do this stuff, he's missing lots of little details, and we're having a hard time documenting this in a way that makes it obvious at the time we need to know.)

 

Timing wise, a lot of these tasks can be handled in an hour or two, most within a single workday. Sometimes they end up spanning several days, especially when they get put on hold while we wait for clarification of ambiguous or missing details.

 

This would also make it easier to bring on new people.

 

How might you approach this from a UI design standpoint? (I don't expect to see a single component that does it all, but who knows?)

 

(I'm not looking for how to store this data in records or lists ... but how to represent it visually on the screen using VCL components.)

 

 

[Bill Meyer 337]

If your processes are stored in a table, and the steps in each are contained in delimited text in the process record, then you could stay with the radio button -- or checkbox -- group model, but easily customize per process.

 

Alternately, you could use master/detail tables to contain the processes and their steps. As to the UI, a TreeList could also be a good approach.

[aehimself 396]

First things first, I am horrible in UI design. With that said...

 

Considering the fact that one main step can not change without all the sub-steps complete, my main UI would only show the currently active step.

 

"Project XY is in Pending Signoff state"

list of substeps below, with a fancy green checkmark right next to the substeps already accomplished. Don't make a dfference between optional and required ones - the main step will change anyway if all required ones are completed.

 

This applies to the user and admin interface too. I don't really care when the previous main step's substeps were completed if my only purpose is to approve something / check how my thing is progressing. Have a history, as a side menu option.

 

But then again, I am really, really bad in UI design. It's just how I would do it.

 

Edit:

 

Edited September 1, 2020 by aehimself

[David Schwartz 426]

There's clearly a hierarchy. I'm mostly curious how folks would handle it, which is why I didn't bring it up. (My mind seems to be locked-in on a tree-view, so I'm looking for some other ideas.)

 

I'm guessing you'd start with what I showed (the main tasks) and then when one of those items is clicked you'd show this in a popup?

 

Then once all of the required sub-steps is complete then the parent would show complete?

I had not thought of this. Thanks!

[Bill Meyer 337]

Just now, David Schwartz said:

There's clearly a hierarchy. I'm mostly curious how folks would handle it, which is why I didn't bring it up. (My mind seems to be locked-in on a tree-view, so I'm looking for some other ideas.)

 

I'm guessing you'd start with what I showed (the main tasks) and then when one of those items is clicked you'd show this in a popup?

 

Then once all of the required sub-steps is complete then the parent would show complete?

I had not thought of this. Thanks!

Given the obvious hierarchy, the TreeView seems an obvious approach. You have:

Product

     Process

           Steps

               Details, perhaps....

A tree with checkboxes to show progress, and if necessary, a confirmation required for unchecking.

The data hierarchy would keep your options open, and the TreeView would keep the UI compact and intuitive.

[David Schwartz 426]

1 hour ago, Bill Meyer said:

If your processes are stored in a table, and the steps in each are contained in delimited text in the process record, then you could stay with the radio button -- or checkbox -- group model, but easily customize per process.

 

Alternately, you could use master/detail tables to contain the processes and their steps. As to the UI, a TreeList could also be a good approach.

Ahh, this is what I was trying to avoid -- storage details. 🙂  Forget what's under the hood. What does it LOOK LIKE?

 

A treelist is sort of my automatic go-to choice for the UI. What I'm looking for is ... something different. I'm curious what others might come up with.

 

[Bill Meyer 337]

5 minutes ago, David Schwartz said:

Ahh, this is what I was trying to avoid -- storage details. 🙂  Forget what's under the hood. What does it LOOK LIKE?

 

A treelist is sort of my automatic go-to choice for the UI. What I'm looking for is ... something different. I'm curious what others might come up with.

But data drives the presentation*. If you are a DevExpress licensee, then you could use their grid with grouping. (But it's still logically a tree.)

 

*See Wirth: Algorithms + Data Structures = Programs

Edited September 1, 2020 by Bill Meyer

[David Schwartz 426]

I'm kind of limited on vertical space.

 

What about a combo-box with the main items, and that displays a different list of check-boxes below.

 

Maybe when you click the down-arrow on the combo, it shows the list of radio items. Pick one and it shows that item in the combo as the one you're working on and the check-boxes below.

 

Or start with the radio buttons; pick one and it disappears but shows the selected item at the top with its related check-boxes below. Kind of a "drill-down" effect.

 

Do you think you would you find something along this line easy to use as well as compact?

 

Thoughts?

[David Schwartz 426]

5 minutes ago, Bill Meyer said:

But data drives the presentation*. If you are a DevExpress licensee

in this case, we know its hierarchical. But there are probably dozens of ways to display and navigate a hierarchy. 🙂

* vertical (trees), horizontal (org charts), or free-form (mind-maps)

* bubbles, boxes, graphics, text, both

* lines or not

* static or dynamically expandable/collapsible

* background colors / graphics / highlights

* editable (inline, popup, separate form) or not (configurable vs. hard-coded)

 

For what I described, I'm curious what comes to mind most naturally. I rather doubt something like a mind-map would flash up immediately.

 

We don't have either DevExpress or TMS, unfortunately. They've got some stuff that would be great for what I'm building here.

[Mike Torrettinni 198]

When I need to design UI that is rather unique (or I've never done before), I always try to get ideas form existing tools. I just search google for keywords that make sense and look through screenshots of tools, software, web apps... sometimes I combine ideas to fit my needs.

I try to avoid 'wizard' style where each step is it's own tab, that means in step 2 I don't see info from step1 or step 3. i prefer more info vs less info.

 

The immediate idea I got from your description was 2 VistualTreeViews (VTV), 1 on the left (25% width) as work-flow (steps) and main VTV (75%width ) with details. That way you can see at which step of the overall l process you are at this moment, while the details of current step are in the main VTV. And VTV is very customizable, icons, check boxes, combo boxes...

 

 

 

[Rollo62 536]

Beside all the structural discussions behind, I'm a huge fan of color information in a UI, like
 

o Prepared

o On-boarded

o In Progress

o On hold / problem / issue

o Waiting for more info

o Pending signoff

o Completed 

 

Which is able to give you in a dashboard the information of the situation immediately.

All green lights is a no-brainer, it took only milliseconds to recognize this state.

 

 

 

 

[Lars Fosdal 1792]

Unless you are some sort of color blind?

I also use color, but where there is a critical significance that requires attention, I usually add an icon or symbol in addition.

[Lars Fosdal 1792]

If I take the liberty of making some assumptions about these states

 

Normal States

1. Prepared
2. On-boarded
3. In Progress
4. Completed

Wait states

• On hold / problem / issue
• Waiting for more info
• Pending signoff

I could consider the following grid view, with Id identifying f.x. an order of some sort.
If you select a line and/or hover over a cell - you could have the details in a panel or popup.

 

 

The "perfect" day would be all green and no icons.

 

Edit: I clearly didn't read all of the initial post before starting my design - but well - the signoff stages could be more signoff cells.

[Stano 143]

Left tree and right panels on which you can have anything. The advantage is that you only see the selected detail. Others do not disturb you.

Edited September 2, 2020 by Stano

[Stano 143]

Sorry

Left tree and right panels on which you can have anything. The advantage is that you only see the selected detail. Others do not disturb you.

[David Schwartz 426]

On 9/2/2020 at 12:10 AM, Lars Fosdal said:

If I take the liberty of making some assumptions about these states

 

 

This is a nice idea for a summary dashboard, for sure. But in this case, I'm looking for something that only applies to individual tickets. It's a tool to help both show the person what's needed as well as signify what's done and what's left, sort of like a check-list.

Edited September 3, 2020 by David Schwartz

[Lars Fosdal 1792]

Individual ticket display - It depends a lot on the type of user. 

I know that our users that are non-PC aficionados, are uncomfortable with tree views. 

If the series of stages are sequential, I'd consider a segmented progress bar,
combined with a panel with information on the status of the current stage in progress.

 

Just to stay in line with my original example

[David Schwartz 426]

That's also very nice and organic. 

 

I've set something up using a kind of "drill-down" approach, and I'm not sure I like that it hides the overall process.

 

I like that this approach also resembles a progress bar.

[Anders Melander 1782]

On 9/4/2020 at 9:03 AM, Lars Fosdal said:

If the series of stages are sequential, I'd consider a segmented progress bar,

Building on your concept I would suggest something like this:

 

I've attached the 14 image segments used to create the above.

progress arrow elements.zip

[aehimself 396]

1 hour ago, Anders Melander said:

Really nice idea!

As the shapes are not even that complicated, it could be custom-drawn on a TWinControl-descendant and call it a component.

I like it.

[Anders Melander 1782]

7 minutes ago, aehimself said:

it could be custom-drawn on a TWinControl-descendant and call it a component.

They're alpha blended so you'd have to either give that up or use GDI+, Graphics32 or something like it. If I were to implement it as a custom control but I would probably use bitmaps and maybe draw them as 9-patch images so it could be resized. The colors could be applied with a simple HUE filter.

[Guest]

DevExpess was mentioned. afair there is both a breadcrumb control and a token control.