2

I know I'm being sort of oxymoronic here by referring to a wizard, but I'm not sure what else to call this.

I have a set of applications that do different things, but are parts of a whole process.

(I'm really dumbing this app down b/c the functionality is not important so much as understanding that the objects get passed from one app to the other)

App 1: user sees a bunch of tags that the user chunks together to form a list

App 2: the user takes their list and can see how their list will perform in other apps

App 3: the user takes the list and can add more details and parameters to it

App 4: the user sees all of their lists that they created (they can create as many lists as they want) and decide where to display their lists (in other apps).

The problem I'm having is that this is a non-linear workflow with the exception of the very first time the user uses these apps. Therefore, in the 2nd+ time they use this app, they could very well want to just go to app 4 without going through apps 1-3.
I want to communicate to the user that all of these apps are related and inter-dependent in a way that makes sense. I want them to understand that while yes, these are steps in a process, they can go to any of these steps as they see fit.
In a way, I want something sort of like a wizard - what I like about wizards is that you can see what step you are in a process and that each step is helping build the end result. But b/c wizards are based on a linear workflow, this won't work for me. Does anybody have any suggestions or examples of how to best achieve what I'm trying to do?

If you need clarification (b/c i realize this is so vague) please let me know in the comments and I'll be happy to clarify as I'm just at a loss of how to best accomplish this.

1
  • Can you explain how the apps are inter-dependent? it seems that there isn't any dependancy between apps 2,3,4. Also, when you say: see how list perform in other apps (#2), or display list in other apps (#4), does other apps refer to one of these 4 apps? I'm not quite sure why you describe these as apps, they seem too small that I would call them functionalities/tasks rather that apps.
    – myajouri
    Jan 7, 2014 at 12:34

3 Answers 3

7

Jumps and Loops

So, just be clear here, you have four user tasks which, with some limitations, can be completed in numerous sequences. Specifically, there’s 1) Create List, 2) Test List, 3) Set List Details, and 4) Display List. Obviously, the user has to create a list before doing anything else with it. Maybe there are some other limitations, such as the user cannot (or generally does not) set list details without testing the list first, but for the most part, the sequence is open. Maybe a user creates a list then tests it, then creates another one then tests it, or maybe a user creates a couples lists, then tests them each. Things like that.

Getting unstuck on a suboptimal

You’re gravitating to something like a wizard, but recognize that wizards are only good for a single linear path through the various potential steps, not this jumping around and repeating of steps in unpredictable sequences. As a designer, to get un-fixated on a particular design alternative (like wizards), focus on why you like the alternative, not what the alternative is.

You say a wizard allows the users “see what step [the users] are in a process and that each step is helping build the end result.” Wizards indicate the current step by the window or page the user sees at the moment. So how else can you indicate a step than by changing the entire window/page? A wizard itself is actually not too good at indicating progress. You have to add “Step 3 of 5” or equivalent graphic to each window/page, and sometimes you can’t because the wizard may take the user down various different branches of different lengths depending on user input to previous windows/pages. But the question for you is, how can you indicate progress, whether or not it’s a wizard?

You may have recognized another problem with a wizard for this context: they only work on a single entity (a list, in your case). However, your users have multiple entities each which may be at a different step of processing at any given time (maybe there’s even some looping back to earlier steps for some). You need to track status and progress on each list.

If not a wizard…

Now that we’ve gotten away from wizard and back to what the users really need, the solution should be clearer. I think you need a dashboard. You need “home” window that displays a summary of the user’s work. It would likely be a table of the user’s lists with fields/cells that summarize or aggregate 1) what’s on each list, 2) how the list performs, 3) what details/settings it has, 4) where it’s displayed. You can have a small control in each cell to launch the appropriate app for the corresponding list to complete (or re-do/modify) the step.

The cells are blank if the user hasn’t done a particular step on a list, providing a graphically obvious and intuitively clear indication of the step and progress of each list. The order of the cells “suggests” the order to do the steps, without locking the user into that order (if you have to restrict the order, dynamically disable the controls that launch the apps as necessary).

Making the most of it

Preferably each cell in the table will, not only indicate if a step was completed, but how it was completed. Cell 1 could be sample tags of the list, or a count of tags (if that’s useful), Cell 2 could provide a weighted average of performance measures or maybe a sparkline, and so on. Depending on your screen size and the number of lists users generally have (and thus the size of each cell), you may be able to put full details of the step in the cell (e.g., performance on all tests). Putting such content in the cells will help users distinguish lists and maybe help them decide if they want to re-do certain steps.

As much as possible, the “apps” should be integrated with the dashboard/home page to limit navigation and orientation overhead (unlike a wizard, which could automatically take the user to the next app, your users need to explicitly pick the app and list from home/dashboard, since it’s not predictable). How much you can do this depends on the complexity of the UI of each app. For example, rather than an “app” to set list details, you can show the list’s settings in master-detail relation: edit-in-place controls below the table of lists shows the current settings for the currently selected list. No need to explicitly launch the Details and Settings app. Of course, this only works well if the list settings are relatively few and you can afford to take some screen space away from the table of lists.

As another example, clicking on the Performance control could open a simple dialog of test parameters and a button to execute the test and close the dialog; the results appear only in the cell (if they fit), eliminating the need to navigate back from the Test and Performance app results page to the home/dashboard page. If the test runs quickly (< 0.5 seconds) and the parameters of the test tend to be fixed between lists and sessions, let the user set them in Options/Preferences and automatically run the test whenever the user creates/edits a list. No need explicitly launch the Test and Performance app. Sophisticated processing doesn’t necessarily need a complicated UI.

3

You could try present the steps as ordered set. Top-to-bottom ordering sets the sequence of the steps, as it will be perceived by users.

Each button contains some instructions, so the second-time users could select needed step, while first-time users are led by the top-to-bottom sequence.

enter image description here

Also you can implement some principles of the instructional UI in your interface:

  • Keep it simple. Introduce one basic concept at a time and use images when possible. Consider adding a Help section to a Settings flyout in your Windows Store app to address complex features.
  • Teach in context. Integrate instructional UI with the task it helps a user complete. A user is more likely to retain a concept when it's introduced when they need it most. Don't block interaction. Make sure users can still interact with your app while instructional UI is present. Instructional UI should help users, not annoy them by getting in the way.
  • Teach, then disappear. Remove instructional UI as soon as it's no longer relevant or allow the user to dismiss it. Also, in most cases, users only need instructional UI displayed once. Avoid repeatedly displaying the same instructional UI.
  • Use sparingly. Thoughtful design and a Help section can often teach users everything they need to know to enjoy your app. Consider the breadth of design options before adding instructional UI to your app.
1

I would recommend a bar of the four steps as buttons or links.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The first time they go through the process, the steps they haven't gone through would be disabled (grayed out), but after that they can quickly switch from one step to another in any order. Depending on the name of each app/step, it may make sense to put this bar across the top of the page.

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.