3

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

Improve this question
2
  • I think it can be termed as interaction model
    – user39257
    Dec 23, 2013 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, 2013 at 15:01

2 Answers 2

Reset to default
4

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

enter image description here

Improve this answer
4
  • 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, 2013 at 1:22
  • @Danger14 I'll see and get back to you!
    – Benny Skogberg
    Dec 21, 2013 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, 2013 at 6:05
  • @Erics I must have misinterpreted "in Balsamiq for a mobile app" then,
    – Benny Skogberg
    Dec 21, 2013 at 6:13
2

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.

Improve this answer

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.