Can I use UML for modelling website navigation? If so someone give me some books/links for referrence (UML for websites kind of...!!!). If not so what are the tools for this?
And basically I am a programmer and when I designed my previous website I just sketched down different page design ideas on paper and opted the one that I felt suitable. Then I did implement that design using html/css from scratch.
Is this the approach generally taken by all or have tools for drawing the to be implemented website designs (Wireframe kind of..)? Is the CMS meant for this? Please guide me on this.
Thanks
From time to time, I'll (ab)use a state diagram to lay out a site. Each "state" represents a page (or group of pages), each "transition" a flow from one page (group) to another.
I don't try to capture all navigation: that becomes impractically noisy very quickly. However it can be useful for capturing primary flows, e.g:
Arrive at home page, select login, navigate to login page
Enter credentials
If credentials correct: navigate to post-login landing page
otherwise: remain on login page
etc.
It's not a 'proper' state diagram but can be useful. You might also want to look at Garrett Information Architecture. It's a bespoke notation for the same problem but has a richer set of symbols.
hth.
Maybe, you will find this article useful :
http://www.ibm.com/developerworks/rational/library/4697.html
This article detailing user interface navigation via UML Activity Diagrams.
You might want to take a look at UWE, as it is as close as possible to UML and can do the job. The only problem is that there aren't many tutorials or documentation available.
If you're using UML in other parts of the design process, it makes sense to ensure that the user interface you put together meets your use cases. However, I've never used UML to actually design the layout or flow of a site.
We use Axure to mock up user interfaces, as this helps to let the customer/user have a play with the flow before spending time crafting the actual pages.
That said, I still do my website design using a pencil and paper.
Absolutely.
UML State Diagrams works quite well for this purpose. I have worked at large companies where this was standard practice, and with great success (even when keeping within strict UML rules and practices).
The key is to keep in mind what it is what you want to communicate with your diagram, and not try to model too many aspects within a single diagram. And also, keep in mind your audience. If you have to explain UML to them how UML works, then UML is not suitable for your situation.
I strongly disagree with those who think this is an "abuse" of UML. Consider that state diagrams represents the different states of a system and the transitions between them as brought about by events. When representing UI navigation, you are presenting UI forms as state and user actions and UI events as the events that brings about a change within the context of the UI instance of the system being presented to the user.
You are welcome to disagree with me, but please provide proof or support of your argument.
Related
I'm currently reverse engineering a ticketing system (a ticket booth system with human operator), in order to create a technical manual.
What I want to do was a flowdown from all the functionalities modeled as a workflow from the user PoV using a UML activity diagram. The objetive in this is to first lay the workflow of the user, to than specify all the interfaces/communications with databases and central systems and all the classes as class diagrams, regarding the functionalities displayed on the activity diagram.
The problem is that the system has so many options, like buy ticket, recover ticket, client info, shift managemen... the first problem i got is when i got to the main screen activity there are so many branches that i dont know if i could use a Decision point on the activity diagram.
Anyone can shed some knowledge here? Thanks to all. Cheers.
Even the system is already there the approach for building the model should be pretty much the same as if you were doing the analysis from the start. The main difference is you refer to how the system is actually used, however it's also a good occasion to discover the pain points in the current system.
Your use cases, scenarios etc will be based on what the system currently does.
Don't try documenting a complex system with just one diagram or even one type of a diagram. This approach will most likely fail. In a best case scenario you'll end up with something but it'll be difficult to impossible to read and comprehend.
Should activity diagram include detailed information about how the system functions from the start of the application?
Say for example i am making a swing application in which the app loads a JList with images when the application opens, so should i specify that in activity diagram even though user isn't himself performing the task of loading the images in the JList.
Also should swimlanes in activity diagram be divided according to the possible classes my swing application might have.
For example having 1 swimlane for model, view and controller each in a simple swing application.
Below are the Image's that I made,
OR
I feel that even though the first image is correct,the second one helps me visualize how the class diagram is going to shape up in a much better way.
So should I use the second Image?
As always, the answer is "it depends." The level of detail is not dictated by the type of diagram, but the context in which the diagram is used.
If the diagram is intended to show the flow through a use case, it should probably restrict itself to showing the activities performed by the actor(s) and the system as a whole, rather than the parts of the system.
If on the other hand the activity diagram shows the flow through a use case realization, it should definitely show the different parts of the system.
Let's say that halfway through the project you decide to change the design and not use MVC. This means the diagram needs to be redrawn. If the diagram is part of a use case realization, that's to be expected (because that's what you've done, you've decided to realize the use case in a different way). But a diagram that's part of the use case itself shouldn't need to be redrawn just because you've changed the design; the flow of interactions between the actor(s) and the system-as-a-whole shouldn't change.
That said, MVC is such a well-known way of breaking down a user interaction that it may be permissible to go to that level of detail even in a use case. So, assuming that you're documenting a use case and not a realization, if in your project or company user interactions are always designed as MVC, then I say go right ahead -- but keep it strict and use "model" rather than "image service". If the decision to use an MVC design cannot be taken during the use case analysis phase, I'd advise against it.
Swim-lanes have absolutely no model meaning. They are just a line. I recommend to use pools/lanes which are (BPMN stereotyped) UML elements. They are classified accordingly (usually with an actor) and the single actions go into each of those. This gives the activity a clear structure and it also shows responsibilities.
Firstly, I'm still quite new to UML; but, highly interested and am attempting to learn as much about it as I can.
With that said, I’m in a situation where I’m directed to assemble a ‘Context Diagram’. I feel as though I understand the concept of what a context diagram is and how to create one, so I think I’m ok there. Basically it is identifying the system and the components or actors it will interact with. It applies the focus on the system, and not the actors. Kind of like a Use case diagram, but not focusing on the actors. If I’m wrong, please tell me.
I read somewhere that Context Diagrams are not actually part of UML. I also read, somewhere, that, if you use a Context Diagram, it falls into the Component side of things. When I read about Domain models, it seems like it should be there.
For my current situation, I know a simple answer is to simply create the diagram and move on, as that is all that is required. But, for my interest to better understand and leverage UML, I know there is a right way and a wrong way. If I were in a case of a bigger project, what would be the right way?
Now here is where my question begins. I’m using Enterprise Architect, create my project, and start to create a model. Does it belong in a Domain Model or Component Model? What is the difference between these two? Or even more. As it is an aide to help identify requirements, should it go there? Or does is just simply depend on what and how I want to convey it?
The Domain Model is where you standardize the vocabulary that everyone on the project will use to communicate in a consistent manner. The development team are experts at software development, but they may not have any experience in the domain (e.g. banking, air traffic control, healthcare) in which they are being asked to work. So you get domain experts and modelling experts together to build a model that describes the domain, answering important questions like "how are account fees calculated?" and "how does a pilot know what route to follow?" and then this model is then passed to the development team to provide them with the important domain knowledge that they will need. I would use UML class diagrams to create a domain model.
A Context Diagram shows the system being modeled in relationship to external systems. It could show data flowing in from and out to external systems, modeled by a data flow diagram (not part of UML). It could show behavioral interactions between the system and external "actors", modeled by a UML use case diagram. It could show the system's physical connections to other systems, modeled by a SysML block diagram. Whichever you choose, it will be on page 1 of your design document, so choose wisely!
You (can) create context diagram by making any element composite. Then drag the element itself onto that diagram as link (not instance!) and highlight it by making the border a bit thicker. Finally insert related elements from the context menu (differs from EA version to version). Layout the diagram and now you have your element in the context.
A domain model is usually a class diagram showing the (business) domain on a higher abstraction level.
As you have said, Context Diagrams per se are not part of the UML spec. There are plenty of ways to do a context diagram, but the UML way is to use a Use Case diagram, with or without supporting narratives and scenarios. Start with this, which is a broad overview of different types of Context Diagrams. Then, investigate use case diagrams, use case narratives, and activity diagrams. If you need to go into more detail than a use case narrative can easily do, get into use case scenarios and sequence diagrams. Here is a pretty good use case narrative template (feel free to leave out sections such as "scope and level" if they are more than you need, and consider adding information about what triggers the use case and where you go when you finish it--these two are required for scenarios if you go that far).
Keep in mind that use case narratives and use case scenarios are often confused. (Some people will say that I am the confused one; I will invite you to judge the matter for yourself.) A narrative is an explanation of an entire (single) use case, and may be supported with an activity diagram. A scenario is an explanation of a single path through a single use case, and may be supported with a sequence diagram.
For example, a use case will generally have a basic flow of events, along with a number of alternate flows. The narrative describes the entire process. The basic flow and each alternate flow would each be a separate use case scenario.
I suspect that it's unlikely that you will have to get down to the level of use case scenarios. You will probably want to put a use case diagram together, and possibly prepare narratives and activity diagrams for each of the use cases in the diagram.
I would like to know:
how to convert users stories into sequence diagrams?
and what is the most easy diagram to understand (for customer)?
Traditionally, a use case is converted into sequence diagrams (through a "use case realization" collaboration for traceability). User stories are different from use cases in that the latter provide a set of distinct steps to take whereas the former concentrate on a need and reason.
If you were to to take a use case, each of the steps in the use case would be represented by messages in the sequence diagram. The use case actor (the "user" in the user story) would be the initiating timeline and a second timeline would be the "system". You could then iterate on that sequence diagram to extract various system components (thereby building a domain model for your application).
Does that make sense to you?
how to convert users stories into sequence diagrams?
There is no straightforward easy way. There is not enough information as user story is basically one or few sentences of text. Converting use cases to sequence diagrams is easier and can be partially automated
what is the most easy diagram to understand (for customer)?
it depends on who is the customer. In general, overview diagrams, e.g. BPMN style should be easy to read. See my answer to the question "UML diagram for dependency between systems" for some options and useful links
suggested readings
Enterprise Architect video - how to convert use case into a diagram -http://www.sparxsystems.com/resources/demos/use-case-analysis/structured-use-case-scenarios.htm
Enterprise Architect - various ways how to capture requirements and communicate them to stakeholders - http://www.sparxsystems.com/products/ea/requirements.html
Mike Cohn's page (defined the term "user story") about user stories - http://www.mountaingoatsoftware.com/agile/user-stories
Alistair Cockburn's page (defined the term "use case") about use cases - http://alistair.cockburn.us/Use+Cases
Some examples of tools for creation of sequence diagrams: https://www.websequencediagrams.com/, http://creately.com/diagram-type/uml-sequence-diagrams, you can Google out many more examples both free and payed both online and offline
In my opinion, what works best with the customers are not use cases. They are too abstract and complicated even for the most of developers. And when they are finally approved, you're never sure whether the customers actually understood them correctly.
I suggest the mix of UML activity diagrams and user interface prototypes (non UML) as far the best tool to work on this level of analysis with non technical business people.
Activities model their business in an intuitive, easy to understand and clear way.
UI Prototypes as well, so they can see how they business maps to screens.
Behind the curtains, I like to support activities with a formal and accurate domain class model, invisible to customers of course, but open to developers and making a nice technical backbone of the future system.
User stories fit perfectly in this modelling set, you can even make them less formal and more high-level, as the rest will fill the information gap. Sequences can now be build using domain objects, connecting 2 views - customers' and developers'.
I avoid use cases strongly, whenever possible (although I personally like them).
What is the best way to graphically represent page flow, as applicable to an action oriented web application?
What model do you use to represent page flows (page flow diagrams) encompassing pages (views), user actions on those views (events) and processes?
These diagrams should act as a starting point for understanding between a business domain expert (say someone specifying an e-commerce web site), a technical analyst (someone responsible for designing the web application) and a web developer (someone responsible for implementing the solution)
I am not looking for a software solution to help me draw those diagrams, nor am I looking for a web flow framework that will let me implement these page flows in software.
I am, however looking for a good scheme for drawing out a page flow using pencil and paper
For example, a good answer could be as follows
Rectangle with label in CAPS represents page
Arrow with label in lowercase represents user action
Diamond with label in CAPS represents a process
Entry points always from the left (arrows come into a page from the left)
Exit points always from the right (arrows go out of a page to the right)
If there is an accepted standard, or if this problem space is actually a specific case of a larger problem space for which there exists a standard, please highlight this.
In the spirit of Stack Overflow, one scheme per answer please, and votes rather than duplicates
I have always liked Jesse James Garret's Visual Language.
Check out nAML (.NET Application Modeling Language). It includes a Visio stencil and is very interesting amd expressive.
http://code.msdn.microsoft.com/naml
I have found that modifying the state chart diagram is most useful for this purpose. I represent a visual resource (html or jsp page) as a state and the transitions are the actions that the user can perform on that page.
I then introduce another symbol for the actions between the visual pages.
State diagrams are easy for the non-technical person to follow and expressive enough to capture some complex interactions.
take a look at yuml.me as this is pretty easy to use and generates nice "scruffy" diagrams