Made with
ConceptDraw
DIAGRAM 18

Garrett IA Diagrams with ConceptDraw DIAGRAM

Garrett IA diagrams are used at development of Internet-resources, in particulars at projecting of interactions of web-resource elements. The diagram of information architecture of the web resource which is constructed correctly with necessary details presents to developers the resource in comprehensible and visual way. Diagram contains the information about the structure and organization of the contents of the resource pages. The main task of such diagram is to give an idea on how the user surfs on the resource pages, performing a concrete task and not to describe the navigation structure as a whole. At the diagram creation it shouldn’t be overloaded with details and with description of each interface element, used at task execution. It is enough to denote resource objects which are used, for example, which pages the user downloads. It is not necessary to denote which buttons he presses to download the next page because the diagram may turn out too overloaded with details, too intricate and difficult for study and analysis.

The main concepts of Garrett IA diagram:

  • Path. The resource is presented in the form of paths by which the user moves during the execution of any task
  • Action. Moving along the resource pages, the user performs some actions- opens pages, downloads or sends data, etc.
  • Result. The system reacts to user’s actions, generating definite results – it downloads pages for users, generates forms, receives and sends data.

The main elements used at creation of Garrett IA diagram

Web-resource element Graphic presentation
Page
File
Pagestack
Filestack

Pay attention that the page on the diagram should correspond to the page displayed on the resource at browsing even if it consists of several HTML files or frames. On the contrary, files are only files which just displayed on the resource as links (downloaded documents, audio or video files, programs and so on) or simply used at the resource work, for instance background music and data base.

For indication of the group of pages of similar meaning (E.g. a catalogue of the production types) or the group of files (set of documents for downloading) use elements pagestack and filestack. You can use any convenient for you way of indication of concrete diagram elements- text signs and alphanumeric indications. Connections between elements on the diagram are represented as simple lines. As a rule, the diagram is constructed in the form of a tree as the usual web-resource has the treelike structure (start or main page on which links to other pages are located) however this way of representation is not obligatory. If on the diagram there are represented variants of usage of a resource by a user at the execution of different tasks and in the presence of definite access rights, then you can use different kinds of arrows to show the direction of user’s movement on the resource and elements inaccessible for this user.

For representation of simultaneous output of several results it is used the arrow with semicircular insertion.

If the structure of the resource is sufficiently complicated or connected elements on the diagram are located far from each other then you can use breaks in connectors so that not to draw the connector through the whole diagram. Breaks and continuations are denoted with square brackets with the denotation of the element to which the connector leads and, correspondingly, from which the connector leads.

In case of a resource usage by users with different levels of access (registered users, unregistered users, administrators, moderators, etc.) with the help of conventional connectors or arrows on the diagrams there are indicated variants of users work at the execution of definite conditions. Conventional connectors and arrows are represented in dotted lines. It is also possible the usage of the branchy structure with elements of selection of further action at the fulfillment or non fulfillment of the condition.

Element Graphic presentation
Element of selection of one of the two variants. (correct or incorrect input of login/password)
Element of selection of one of many variants (any menu)
Element of selection of one or more variants (filling out of forms or questionnaires)

Thus with the help of Garrett information architecture diagram you can completely and in details describe the structure of web-resource of any complication with necessary detailed elaboration and get the picture of possible work with the resource for users of different access levels.

Garrett IA Diagrams with ConceptDraw DIAGRAM  *
TEN RELATED HOW TO's:
This sample was created in ConceptDraw DIAGRAM diagramming and vector drawing software using the UML Class Diagram library of the Rapid UML Solution from the Software Development area of ConceptDraw Solution Park. This sample shows the transport protocol mappings for SNMP (Simple Network Management Protocol), the classes of the transport system and relationships between them and is used in IP network.UML Class Diagram Example for Transport System *
Picture: UML Class Diagram Example for Transport System
Related Solution:
The Rapid UML Solution from the Software Development area of ConceptDraw Solution Park helps you to create the UML Class Diagrams quick and easy using ConceptDraw DIAGRAM diagramming and vector drawing software.UML Class Diagram Tutorial *
Picture: UML Class Diagram Tutorial
Related Solution:
How to design a Bubble Chart? It’s very easy! All that you need is a powerful software. Never before creation of a Bubble Chart wasn’t so easy as now with tools of Business Diagrams Solution from the Management Area for ConceptDraw Solution Park.Bubble Chart - Page Rank *
Picture: Bubble Chart
Related Solution:
Design efficiently the technical flow charts in ConceptDraw DIAGRAM software for various fields and provide ✔️ clarity, ✔️ accuracy, ✔️ usability, ✔️ simple communication, analysis, and improvementTechnical Flow Chart Example Design in ConceptDraw DIAGRAM
Picture: Technical Flow Chart Example
Related Solution:
The critical importance of house electrical plans. 🔸 Learn how to create efficient electrical layouts using the ConceptDraw DIAGRAM app. Enhance ✔️ safety, ✔️ functionality, and ✔️ compliance with electrical codes in your home projects with our comprehensive guideHome Electrical Plan
Picture:
Importance of House Electrical Plans.
How to Create Electrical Layouts
with ConceptDraw DIAGRAM App
Related Solution:
Wireless Network solution contains template, library and a set of design elements that help network engineers visualize Wireless Network. Network engineers and designers use this solution to design, create and illustrate the wireless networks.ConceptDraw DIAGRAM is an Advanced tool <br>for Professional Network Diagrams Creation *
Picture: ConceptDraw DIAGRAM is an Advanced tool for Professional Network Diagrams Creation
Related Solution:
The vector stencils library Activity diagrams from the solution Rapid UML contains specific data modeling symbols for ConceptDraw DIAGRAM software.Data Modeling  Diagram
Picture: Data Modeling Diagram
Understanding the connections between an organization department might take some time. If you are a newcomer to a company, an orgchart would help you if don’t know who to call when questions appear. This scheme usually is printed on one of the walls in the office. This template of orgchart is supplied with the ConceptDraw add-on containing solutions for making organizational charts. You can use it to depict an organizational structure of your company. The only you need is - open this template and alter it to cover an organizational features of your business. It is easy to rearrange the orgchart structure by dragging the elements by mouse. Finally fill the template with particular positions of your company's staffing table.Orgchart *
Picture: Orgchart
Related Solution:
Describing the way data flows through an information system might become a subject of a study. One of the kinds on a data flow diagram is called Gane Sarson Diagram after its authors, and it slightly differs from other notations. Process symbols in this notation are depicted as rounded rectangles connected with arrows representing data flows. This is a sample of data flow diagram. It demonstrates utilization of the Gane-Sarson notation for making DFD on the example of an online appointment system of the Health Centre. This sample is used the vector objects library of Gane-Sarson DFD notation supplied by the ConceptDraw solution for data flow diagramming. It contains all symbols of the Gane-Sarson notation including connectors, jumps, and processes. This solution can be successfully utilized to generate DFDs for business documentation, and presentations.Gane Sarson Diagram
Picture: Gane Sarson Diagram
Venn Diagrams visualize all possible logical relations between several sets and are widely used in mathematics, logic, statistics, marketing, sociology, etc. This Venn Diagram shows the relative complement of the set A with respect to the set B. It is the set of the elements in B, but not in A. In other words it is the set-theoretic difference B-A.Venn Diagram Example - Basic Circles Venn Diagram
Picture:
Basic Circles Venn Diagram
Venn Diagram Example
Related Solution:
ConceptDraw
DIAGRAM 18