Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

When creating a flow diagram, there are some universal symbols. For instance a rectangle for a 'screen' and a diamond for a 'decision/action'. What is the symbol to show a branching outcome based on some state?

For example, diagramming a person logging in using an open ID account would have a flow that (in text) would be:

  • Log In Screen (rectangle)
  • user chooses OpenID option (diamond)
  • if user is already logged into openID account... (???)
    • Home Page (rectangle)
  • if user is not already logged into openID account... (???)
    • Open ID Log In Page (rectangle)
    • Home Page (rectangle)

I'm trying to figure out the shape for the two marked (???). I've been using diamonds, but that doesn't seem correct and is cluttering a there are plenty of actual user choices already in the diagram.

share|improve this question
add comment

2 Answers

The diamond (rhombus) is for conditional use, the distinction to me seems to be between a condition that is determined by the user and a condition that is determined by the system rules.

I tend to use color to distinguish these sub-types for flow charts.

So perhaps a yellow diamond for user-defined conditions and a blue diamond for system/business rule conditions.

You maintain the integrity of the symbology but you are also providing a more granular depiction of what is actually going on.

share|improve this answer
    
Indeed, that is the distinction (user decision vs. system state). Yep. Color is a good idea! –  DA01 Jul 12 '13 at 3:24
add comment

The problem is that you are mixing page flow and process flow in one diagram.
For Page flow you have Pages (rectangles), Pathes (lines) and States (diamonds). For Process flow you have User Actions, which are displayed as rectangles (pages, where actions are performed) and Conditions (diamonds).

So you have obvious conflict in diamond semantics (State or Condition) and non-obvious conflict in rectangle semantics (Page or User Action). The problem with rectangle non-obvious because User Actions (rectangle) performed within Page (rectangle).

To solve the problem you could:

  • Switch to J.J. Garrett visual language, that could be a little painful and time-consuming, or
  • Expand you language with Path names. Just adding note to Path makes it obvious, that User Action within Log In page was OpenID login. This is mostly Page flow diagram which supports elements of process flow.
    page flow
share|improve this answer
    
It's definitely more of a process flow than page flow, as we're not being overly literal with pages. But even so, there's still the issue in a process flow where some process are user dictated while others are state/system dictated. When there's a lot of both, it seems a bit cluttered, but I guess that is the standard symbol for both. I think I just need to have two slightly different shaped diamonds. –  DA01 Jul 12 '13 at 3:33
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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