How can I improve this wizard interface? [closed]

Question

I am working to improve a wizard like interface available to our users. I have attached mockups of the first two screens in the series.

I would like to get advice on the design. Currently these screens pop up over top of the page once a user clicks a button called "Build your own workout". I feel like this isnt good design and the user should be brought to a seperate page which show these screens? Is this setup intuitive to the user? I'm more concerned with the second screen...is this too confusing? I'm looking at it from a new "dumb" user. I want it to be painless.

Answer 1

The interface looks great, I would just suggest two things:

• rethink the fields and reduce them if necessary. Maybe the 'Edit Exercises' step could be even excluded from this wizard to make it more simple? Possibility of such adjustments could be just indicated by saying "You will be able to modify exercises later".

• I would move the "Customize Workout" step to the very end, probably combining it with the "Review" (it's a summary of previous steps, isn't it?). The reason is that this will let you show the users the most 'juicy' part of the process at the very beginning (configuring the workout is what they want to do, I believe). Having done it, they will be more interested in filling in the Name and Description fields.

This way you could end up with two steps instead of four. Hope it makes sense.

Answer 2

I would suggest the following:

1. Make tabs for future steps disabled before they get visited via "Continue =>". That is, you don't want the user to jump directly to step 4 skipping the first steps. So give a visual feedback that those steps are not accessible yet.
2. Add an "x" close button in the top right corner -- otherwise how could I cancel from step 2?
3. Remove the "Cancel" button in the first step and "Go Back" from subsequent steps. A user can always go back by clicking on the step name in the top row.
4. Place the Continue button in the left corner. Why force users to move the mouse more than necessary? Especially since they just have been typing something, so they could be using a mousepad or similar "slow" mouse.
5. The explanations under "Name" and "Description" aren't useful at all. Nobody thinks of a name and then tries to calculate the number of characters in that name. Not to mention the inherent ambiguity of the word "character", and potential differences in how the browser / your database / your programming language might be interpreting those. Unicode is hard :(
   You'd be much better off providing an explicit feedback "X characters left" as users type. (A very good example is the way it's done on this website when leaving a comment)

Answer 3

I've read other answers of @Pasha and @Dominik and I feel there are some things missing and some things well mentioned so I'll combine the points and add my own:

• I think there is no need of "edit exercise" tab if it does not offer anything apart from editing the content of step 2 i.e. "Select exercise" -- Put a edit button there itself
• Add an "x" close button in the top right corner
• Remove the "Cancel" button in the first step and "Go Back" from subsequent steps. A user can always go back by clicking on the step name in the top row.
• Continue button looks fine to me at the right position
• Its upto you to whether keep "Go back" button or not. It does not harm anyone.
• And you can let this whole thing be on top of the page rather than a new page as it feels right.

Answer 4

For the "Description" box: if the user enters a long description (up to 500 characters are possible), the text will be too long to be visible without scrolling or moving the cursor. You could consider increasing the size of the box so that it could accommodate all 500 characters. Unless you have data to suggest users will use short descriptions (but then why would you allow/need 500 characters?).