Generalized Transition Networks and Use Case Diagrams

What is a Generalized Transition Network (GTN)?

A Generalized Transition Network is used to study the various states and transitions of a website.  GTN diagrams are essentially a map of how to navigate to a specific page on the site.  GTNs should be started at the beginning of the design phase, after the initial wireframes are created.  They are constantly updated until you have finalized the designs, workflow, and functional document of the site.  

I find it helpful to first take screenshots of all your designs/wireframes and just lay out them out (similar to dumping out all of the puzzle pieces first). Then, after you've laid out and organized your pages, you can figure out the flow of how to get to each section of the site and can begin drawing arrows and connections between pages (begin connecting the puzzle pieces).  

Not every aspect of your site has to be fully designed out, but how to get to the major features of a site should be planned out in your GTN.  GTNs help you manage the connectivity of your site, as well as allowing your client and developer to visualize the workflow of the site.

Examples of Generalized Transition Networks


Figure 1


Figure 2

Tips on How to Make Your GTN Useful: 

  • Some pages on a website may be basic.  You don't need to design out each page, but you can always include a note of what the user can expect to see, or include a space to indicate that there will be a page for 'this' and it will be located 'here'.
  • Group together pages that make sense.  For example, if you need to take your user through multiple steps, group those pages together so it's obvious that you can't get to page B without going through page A.
  • With sites that are heavy with workflow and user roles/permissions, it may be helpful to create separate GTNs based on each user's role.
  • If it takes a particular action to get to a certain page, add a note of what action needs to be done in order to get to that page.  (Examples: a filter is applied, a user signs in through Facebook, the fields of this webform change after this checkbox is marked..)

Use Case Diagrams

Simply put, a use case diagram is a representation of a user's interaction with the system.  There are a few key components you should include in your Use Case Diagram for it to be successful: 

  1. Identify all of your "actors" (these will translate into roles in Drupal!).  These actors will represent the different type of users on the system.  It may be helpful to create a persona / scenario to visualize how your "actor" sees your website.
  2. What can one actor do that the other one can't?  You want to make sure you describe all the distinct behaviors that one user can do.
  3. Create a hierarchy of users. Administrators and User-1's should usually have the highest access.  If the site is a public facing site, include differences between what an unauthenticated user (aka a visitor) vs. an authenticated user (someone that has logins).  

The most common example of a Use Case Diagram is a user's interaction with an ATM - 

Source: http://docs.embarcadero.com/products/rad_studio/delphiAndcpp2009/HelpUpdate2/EN/html/devcommon/uml20usecasediagramdefinitionexample_xml.html
Source

This example gives you a visual representation of how the users interact with the system (i.e.: the ATM).  The actors in this diagram are: the customer, the bank, and the administrator.  The administrator inherits all the actions that a customer can do (e.g.: the administrator can also withdraw, transfer funds, and deposit money).  Actors don't necessarily need to be people, but can be an agent or an external system (i.e.: the Bank in this example)

Use Case Diagrams are used to provide a high level overview of the system.  This limits the need to list out every action a user can do.  However, you definitely want to draw attention to the 'special' or 'higher' permissions if a user has any.  These diagrams are especially helpful to visualize the ranking of the different roles on your system.  It's easy for your client to point out if something isn't right and it's easy for your developer to take this diagram and create roles and set permissions on your Drupal site.  When the site is ready for testing, a use case diagram also acts as a quality assurance checklist to make sure all of your roles are set properly in your Use Case Diagram 

Helpful Tools

Creating Generalized Transition Networks

  • Prezi - http://prezi.com/
  • Balsamiq Mockups 
  • Adobe Illustrator
  • Microsoft Powerpoint

Creating Workflow Diagrams (Use Case, UML, Sequence, Swimming Lane Diagrams, etc)

... and last but not least... basic pen and paper!