2

I'm programming a small PC app which is mainly used to perform a set of sequential, step-by-step actions, and I wonder what would be a "standard" way to design its UI, so it would follow conventions of how such things are typically done in PC windows applications. I'm quite new to GUI design and I'm not sure what patterns or styles are appropriate for this.

Some more details about what it should do and how it would be used:

  • Each action is usually triggered separately by the user, although I may later add an "automatic" mode where the app runs through them them one-by-one without user intervention.

  • The interface should visualize which actions were already done and which weren't, and what actions are enabled / disabled at any moment. I was thinking of some kind of actions list with checkmarks, but perhaps another approach is better...

  • In the most common use-case, the user would perform the actions in order (actions A, B, C, D...) and is not allowed to do them in a different order. e.g., after "A" was performed, only "B" is enabled and the rest are disabled. However, there's an alternate use-case where the user may perform the actions in random order (C, A, D, B, ...). this is one reason I rejected the "Wizard" style (series of dialogs), which forces linear progression.

  • The user may do other things in between the actions of the list (for example, they would manually edit some values in a table that was populated by a previous action).

One thought was to implement this as a vertical list of buttons, each with a (read-only) checkmark near it that denotes whether that action was performed already. However I'm unsatisfied with this idea, it doesn't appear even remotely "standard" or conventional in PC apps (counterexamples are welcome :-) )

A variation on the above would be to replace the action buttons with clickable text (like hyperlinks), again with some kind of checkmark near each item. This example from Dropbox is close to what I mean. however, I'm not sure how conventional it is in PC Windows applications to click "naked" text instead of a button for triggering actions.

If it's relevant, the app will be implemented in Python using the wxPython GUI framework (my first use of wxPython).

Any ideas or examples would be appreciated!

About the program

This is a utility to automate some back-end processes for a small online sales business (which I run, with a couple other people). While the total user base of the software will likely never rise above a single digit, and therefore the design isn't truly critical, I still would like to take it as an exercise in professional UI design.

The main actions of the program are more or less these (in order):

  • Retrieve some customer / sales data from a database of a commercial sales management software I use, and display it in a table, optionally allowing the user to hand-modify some of the data in the table.

  • Process this data and create a file suitable for uploading to the local postal service website.

  • Upload the above file to the website. This may be done manually at first, by the user with a browser, until I write the automation code for this stage.

  • Receive some files back from the site and process them.

  • Save a PDF with shipping labels, based on the stuff received from the website, for later printing.

  • Send this PDF to another person by email, potentially adding a user-added custom message to the email.

  • Save another file with a summary of the shipment batch.

  • Generate and save yet another file (PDF with invoices).

  • Push some data (e.g. tracking numbers) back to the database.

Several of the actions may fail (e.g: website down, database unreachable, or the shipment is rejected for some reason). The user may want to try them again, possibly after changing something manually. Some failure modes require going back several actions rather than merely repeating the last one. This may imply that all past actions should be enabled, not just the next one.

In terms of what should be on the screen: the program should probably display a log of the actions as they are taken, as well as displaying the table mentioned above, and probably some additional data (e.g. summary of details on the shipment batch).

In addition to the sequential use-case outlined above of creating a new shipment batch, a second mode of operation is opening an existing shipment batch and allowing to trigger each of the above actions individually e.g., only generate invoices for the batch I opened. This is the use-case where the actions are performed not in order, which I mentioned before.

4
  • I answered a related topic here: [Showing Multistep Processes][1] May be some help for you [1]: ux.stackexchange.com/questions/64473/…
    – wassx
    Oct 20, 2014 at 9:01
  • thanks, the link from that topic about progress trackers in the web was interesting, but what I need is different in at least two aspects: I need something that allows the user to trigger actions, not only to report the current progress. i.e. something clickable. I also need something that feels natural in a Windows application, and I think such progress trackers are more of a web thing.
    – tinkerer
    Oct 20, 2014 at 17:03
  • I find it really hard to imagine what is needed without specifics. Can you state what this app actually does?
    – user31143
    Oct 21, 2014 at 6:45
  • Edited the OP with a detailed description of this app.
    – tinkerer
    Oct 22, 2014 at 9:31

1 Answer 1

1

I would use a large, colorful icons arranged horizontally (like a toolbar). If this user can perform this action, then the icon is enabled, otherwise it's faded.

When you click on the icon, the application space below is filled with the content of that action.

This will provide access to each process and give visual clues to what steps are next.

4
  • 1
    hmmm. a toolbar approach is interesting, but do you think it relays the notion that the actions are sequential steps? another consideration is that I'm not sure icons alone would convey enough info in my case, without any text.
    – tinkerer
    Dec 14, 2014 at 18:34
  • In addressing your second point, a toolbar model doesn't necessarily negate use of text. I would provide a functional title and provide additional information in a tooltip or a "more" button. The sequential nature can be relayed by the title "Step 1, download" and enforced by disabling the elements. This structure also allows a non-linear approach to allow for the random invocation you mention in the question. Dec 15, 2014 at 16:58
  • We have a similar need, showing the steps needed for a process. Most of the steps are manual, so we just need to convey the idea "has this step been done, if so when." We use a list with the step name and an icon of a red light or green light. Dec 15, 2014 at 17:00
  • Thanks Andrew. Your second comment regarding the list sounds more like what I had in mind, can you provide some more info? what is clickable (text / button / both), how is "disabled" visualized? if a screenshot is an option, that would be great!
    – tinkerer
    Dec 16, 2014 at 18:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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