How to write UI in sequence diagram?

Question

So i want to make a sequence diagram for login .. the first step is user access my website then the system redirect to login Form, then he insert username and password than the system validate it , if success it will direct him to homepage

my question is : how to put UI like login form into the sequence diagram? i use like interface : Login Form but i think thats the wrong way , because what i know interface is like some class in c#/ java .. here's my sequence diagram.

need help , thankyou for the help

Answer 1

There are a few things "wrong" with the diagram, but nothing major. It is mostly that you have used elements with a particular meaning in UML where that meaning does not match with what you want to express.

As a sketch on a whiteboard with some verbal explanation, your diagram will do fine.
If you want to use it in a document, where you may not be around to explain the deviations from UML, I would propose some minor changes:

• The UML stereotype <<interface>> means the same as a C#/Java class defined with the keyword <<interface>>. If you want to use an UML stereotype to indicate something is a page in your UI, you should choose another stereotype, like <<UI>> or <<Form>>.
• Your diagram uses synchronized calls (a component makes a call and then does absolutely nothing until that call returns). That is not an accurate representation of how a (human) user would interact with a system. It is more accurately depicted as asynchronous communication (by using solid arrows with an open arrow head).

Answer 2

In short

Your diagram is interestingly confusing.

If you want to model the user interface scenarios, better go for some annotated wireframe scenarios. These are more expressive for that.

More arguments

Left side of the diagram

The first question is whether or not put the user (i.e. the actor) in the sequence diagram:

• In reality the actor does not interact with the form, but with UI widgets on that form, and you have transformed this widgets into messages. So the level of abstraction and the semantics are not the same on both sides of the diagram.
• it is even questionned if it is legal to use an actor in a sequence diagram (for example here or here or here).

But the goal of modelling is to better understand the design, so if the actor helps you, it’s up to you to decide on that formal question.

Right side of the diagram

The role of your :User object is not fully clear. Do you have a user object that exists all the time ? Or do you attempt to create it once you have all the elements ?

In the latter case, you may probably want to go for a create message to conditionally create this life line.

And what is its role: why to you want to “show” a web page to an object ?

And why, if the login fails does the User object return the login form to the login form which then return the login form to the actor. There is obviously a couple of things wrong here.

Use the right modelling tool for the right problem

UML is a good tool to show the system in its environment (use case) and show the internals of the system (most of the other diagrams).

But it is not a tool to document user interface scenarios. Even Booch, Rumbaugh and Jacobson, the inventors of UML make this clear in their book “Unified Process”, which is about using UML in the system analysis and design. Other more specialised tools are more appropriate for the human perception of what happens (e.g. wireframe scenarios).

Once the interactions with the user are clear, you can of course show an abstracted version in a sequence diagram. But this shall make cristal clear what system object is responsible for what action in the interaction. And the messages should then be mappable to function calls or system events.