I am creating a user flow aka flow chart aka information flow chart using Balsamiq, not using Omnigraffle or other tools, for a mobile app. What is the proper term for this diagram?

See Gustav Shiring's Moodswings wireframes for reference.

Related UXSE question

  • I think it can be termed as interaction model – user39257 Dec 23 '13 at 14:40
  • An interaction model is certainly different from a flowchart. Not a definitive source, but some deeper reading into a proper interaction model can be found here: uxmatters.com/mt/archives/2012/01/… – Courtny Dec 23 '13 at 15:01

A flowchart is a flowchart regardless of which device it is viewed on.

enter image description here

  • 1
    Thanks. Is there a more specific term for mobile flowcharts with touch gestures incorporated e.g. tap and drag to show navigation drawer? – Danger14 Dec 21 '13 at 1:22
  • @Danger14 I'll see and get back to you! – Benny Skogberg Dec 21 '13 at 6:03
  • 2
    True @BennySkogberg, however the question isn't asking about flow charts viewed on mobile devices, he's asking about charts depicting the flow of a user through a mobile application (possibly as viewed on a mobile devices, but also possibly as viewed on a papyrus scroll or carved into a tree). – Erics Dec 21 '13 at 6:05
  • @Erics I must have misinterpreted "in Balsamiq for a mobile app" then, – Benny Skogberg Dec 21 '13 at 6:13

I believe I finally found the exact diagram and answers I was looking for. They're called mobile app visual flow charts.

Slight variation from flowcharts in @BennySkoberg answer.

Merging of wireframes with flows. As the above artifact mixes readable screens with flows or user actions, the element of time and narrative begins to emerge. Since the flow diagram is inseparable from the wireframe, it also saves the designer from the extra effort of synchronizing multiple documents.

Transition references. Although not visible in the sample, the blue circles are actual links to .mov files that show short video demos of the transitions. Wires plus video feels fresh!

Screen references. All of the screens have an ID tag, and occasionally actions lead to screen references instead of full screens – a way of reusing and again minimizing duplication efforts. Also each screen links to a folder with source PNG layout files.

Action references. Most user actions here also have an ID with a distinct style and can therefore also be referred to.

Starting Point. Since the canvas is quite large it has a clear starting point to guide the viewer.

Layout structure. In the top right of the canvas, the core structure of the layout along with some popular components are explained.

Toggle-able layers. Various information is kept separate on distinct layers and so that it’s possible to toggle it on and off for various audiences.

enter image description here

Screenshot taken from Anton Volkov's user flow chart on Wireframes Magazine.

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.