UML Sequence Diagram – How to Write UI in Sequence Diagram

sequence-diagramuml

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.

enter image description here

need help , thankyou for the help

Best Answer

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).
Related Topic