Brian Zhang Larsen’s Blog

Jan 10
Diagramming the web
  icon1 Brian Zhang Larsen | icon2 diagramming, web | icon4 01 10th, 2007| icon3No Comments »

After reading Jesse James Garrets: The elements of user experience, something has been annoying me slightly. Why is it that he, just will not stick to standards when diagramming. He insists on using his own modified standard, which in some circumstances can be quite disturbing.

Maybe it is because he simply never heard about UML, but I doubt it. Maybe it is because he doesn’t feel like he can diagram everything using UML, which there may be some truth to. But why does he use misuse UML notation then, instead of extending it? It is the de facto standard for modeling most software related problems, which in my opinion would include websites and applications. In fact I have stumbled about this lack of standards several times in my job as a web developer, and I think that is a serious mistake. I am not a UML or standard fanatic in any way, I just like the way that it eases my work to be able to immediately understand another developer/architect or other diagrammer’s work, without an explanation, or without me using time on understand the person’s intentions.

I am not solely against the way Garrets diagram, in fact I think there are many clever ways to diagram problems, that I would agree could be hard with UML as it is, like the differentiation between decision points from the system or the user. This could maybe be done with swim lanes, but this is not always a nice and clear way to show an otherwise simple flow. There are just some fundamental problems that I have a hard time coping with. Take for instance the way he diagram decision points below.

In my head, and according to UML, the flow split should be AT the decision diamond, and not at some point afterwards. It confuses me, to see a split like that, and this repeats itself at different kinds of split points in his visual vocabulary. Another disturbing thing is the way of grouping flows.

Why would anyone illustrate a flow merging with another like that? I would strongly prefer that the flow arrow from the left entity directly went to the destination entity, instead of this merge kind of thing. These flow has nothing else than their destination in common, why not keep it at that on the illustration.

Other than these more or less minor mishaps, I think the idea of trying to standardize web flow diagramming is solely a good thing. I recommend you check out JJG’s suggestion and make your own judgment. You can see his visual vocabulary here, or check the quick reference (PDF).