UI Flows Diagram Editor

“I’m tired of unconservative transition diagram between screens , so I made an editor that can markdown the UI Flow diagram easily”

Premise

When planning or running a Web service or Application, more or less you will confront the problem of how to write the transition diagram between screen by some prototyping tools such as Excel, PowerPoint or Illustrator

This kind of diagram is basically build after the specification is clarified, in case of making a service the following obstacles may appear:

・Screens transition diagram is not conservative

・Composing is extremely troublesome

・It only focus on its appearance and really hard to motivate users

・It is not also machine-readable

By one or the other way these problems are really hard to be handled

Therefore, drawing a simple screen transition diagram only by text is not that easy so i start thinking of making a compiler that allows you to edit it interactively.

Regarding the UI Flows diagram

When composing the Screen transition diagram, I used my personal thinking based solution for displaying as following, that is UI Flows.

This is a technique that has been introduced in the famous 37signals blog that produced the Ruby on Rails.

It is as follows:

If we let the thing「ユーザーが見るもの」(what users see) chained with the almost same thing:「ユーザーがすること」(what users do), the Screen Transition Diagram will become much more simple.

Because of no redundant information, "Motivation" and "Action" are bonded together so that anything unclear can be easily noticed. Moreover, it can be seen clearly because i already put everything in details.

Regarding the uiflow Compiler

The current existing tools for composing UI Flows is extremely hard to use, you have to worry about the size of layout when the diagram become larger and larger, also the concern of too much decoration can be more noticeable than the main things that you want users to notice. If things go like that, graphic design and information design would be mixed together and causing confusion.

Therefore, if you can describe this in a kind of simple notation such as the mark down, it can be managed on github, also before transforming into pictures, you totally can request to see its inside construction, also can query the construction of screens, i think we can exploit in many others aspects.

[page]
ユーザーが見るもの
--
ユーザーがすること
==> page2

[page2]
ユーザーが見るもの
--
ユーザーがすること
==> page4
ユーザーがすること
==> page3

[page4]
ユーザーが見るもの

[page3]
ユーザーが見るもの

So, I made a compiler to make screens just from this kind of simple text

https://github.com/hirokidaichi/uiflow

Just with this, enough comparision

Basically, when hearing about console, programmer will be happy to hear the editor that he likes, for all and all because the Screen transition diagram is composed based on product orders, designers, and IA or some kinds of person like that, i decided to make an interactive editor like the above

I implemented it by Electron so it can be run on Mac but for Windows i am not so sure that it can work properly

Look how it works

https://www.youtube.com/watch?v=BJYl0nqNyjQ

Install manual

I am considering about releasing Beta version, for those who want to give a try

https://github.com/hirokidaichi/guiflow/releases/tag/v_0.1.1

・It works with a single off the dependence of graphviz
・windows10
・ubuntu
・mac

Things to be done

・I want an icon
・I want a download page
・I want a tutorial page
・I want an automatic generating art board of sketch

Things I want to do next

I want to open a conference for those who used this application - service, combining with the existing service, it can help people to understand much more about the construction of this service. Anyway this service will not take you the entire 30 minutes to understand, so why not give some moments to have a grasp on how to design a UI for a web application?

In short

Just an opinion given from a person who bored of Screen transition diagram

Reference URL:

http://qiita.com/hirokidaichi/items/ff54a968bdd7bcc50d42?utm_content=buffer5a19a&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer