2

I have a page to create orders on which the users can take any one of two actions - send to design and send for invoicing. Different groups of users take these actions in different order. The fields on the page are grouped in sections which are listed vertically on the page so the user can see all the fields. Assuming the user has already created a draft of the order - what is the best way to show the fields required for each action? (changing business process or ordering the actions is not an option)

Currently we use single asterisk for design and double asterisks for invoice on the fields and we have a legend at the top of the page to explain the single asterisk and double asterisks. One suggestion was to show a list of actions on the page and ask the user what action they want to take and show the required fields based on the option they select however I don't think its a good idea to ask the users what action they want to take - they should be able to take any action they want.

Thanks in advance.

enter image description here

Improve this question
1
  • Welcome to StackExchange UX! It's hard to understand this user flow in context when you use abstract actions like A and B. Can you include a wire frame of your existing interface and use more descriptive or analogous labels than Action A and Action B? That will help us understand how the actions relate to the order flow
    – tohster
    Commented Feb 23, 2015 at 21:56

2 Answers 2

Reset to default
2

This is a well known design pattern. You have a form which contains sub-workflows, which can be fired off at different times in different orders.

Problems:

  • Legends (asterisks in your case) should be avoided if possible, because it forces the user to dart around the screen to figure out which controls are asterisked.

  • Having the action buttons in a dropdown at the top is not great because (a) user has to click twice just to select an action; and (b) the action button is visually disconnected with the workflow (which is somewhere on the form) so affordance / cause-and-effect is not clear to user.

Solution:

  • Use islands to group distinct sub-workflows. Place the relevant action buttons next to each workflow, so there is good visual narrative for each sub-workflow.
  • This allows you to also arrange the sub-workflows themselves into a logical order. I've illustrated one layout below (where order detail comes first and the user chooses either design or invoicing after that), but you can choose whatever fits your overall workflow.

enter image description here

Improve this answer
2
  • Mouse-overs are really great when you want to give users a key or a legend. Instead of having triple asterisks consider the color-coordinating answer from above and adding a tool-tip that explains the input area(s).
    – sova
    Commented Feb 24, 2015 at 2:50
  • Thanks sova! The tool-tip will work for the desktop. The site is responsive and we have a decent number of users on the ipad. Any suggestions that will work both for desktop and ipad?
    – maddog
    Commented Feb 24, 2015 at 16:31
1

Color-coding the data entry boxes will give additional affordance.

Are there other visual representations of the two actions (A and B) that might be represented with an icon or symbol? Can you logically group the required fields for each action?

Improve this answer
3
  • Thanks Voxwoman! Good suggestions! We tried the icon/symbol approach but got shot down user's reason was icons may be confusing. We have thought about logical grouping - that will require considerable redesign of the page but its not off the table. Color coding the data entry boxes is an interesting idea - I'm going to give that whirl and see if its feasible across all the controls and browsers.
    – maddog
    Commented Feb 23, 2015 at 22:54
  • 1
    Colour-coding alone violates accessibility guidelines.
    – Izhaki
    Commented Feb 24, 2015 at 0:33
  • I agree that color-coding should be part of multiple differentiators. When I was at Lucent (when it still was Lucent), we had to use at least 2 distinct attributes.
    – Voxwoman
    Commented Feb 24, 2015 at 0:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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