Made with
ConceptDraw
DIAGRAM 14

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:

How to create your UML Diagram →

The UML diagrams in this Solution are divided into three broad categories: Structure Diagrams; Behavior Diagrams; Interaction Diagrams. The 13 diagrams contained in the Rapid UML Solution offer an essential framework for systems analysts and software architects to create the diagrams they need to model processes from the conceptual level on through to project completion.How to create your UML Diagram *
Picture: How to create your UML Diagram
Related Solution:

Flow Chart Symbols →

If you need to describe some process, diagramming is a perfect tool for almost any imaginable purpose. The set of the most commonly used flow charts symbols is quite wide and includes symbols for operations, processes, data inputs and outputs. You can see the full list of all the symbols used for flowcharting in Flowcharts solution from Diagrams area in ConceptDraw Solution Park. A flow chart is often used for visual representation of a sequential process flow. The flowchart approach to any process is to divide it into some sequential actions. What makes a flow chart so popular and clear to make out is the set of standard flowchart symbols that has the same reading independently from processes described with their applying. The current drawing represents the vector library containing the pack of standard flowchart symbols. This library is supplied with ConceptDraw Flowcharts solution.Flow Chart Symbols *
Picture: Flow Chart Symbols
Related Solution:

Personal area (PAN) networks. Computer and Network Examples →

All computer networks differ by various params, and their size is one of them. As global area networks are the biggest, personal area (PAN) networks are the smallest. Personal computers, smartphones and other devices that have possibility to connect to Internet form a personal network. This diagram was created using ConceptDraw Computer Network Diagrams to represent a typical components of Personal area network. A personal area network (PAN) is the connection of IT devices around an individual person. This sample of personal area network involves a notebook, a personal digital assistant (PDA), and a portable printer. Commonly a PAN contains such wireless devices as mouse, keyboard, smartphone and tablet. A wireless connection is typical for a PAN.Personal area (PAN) networks
Picture: Personal area (PAN) networks. Computer and Network Examples
Related Solution:

Meeting Agenda Map →

PM Meeting makes preparing for meetings a quick task. Meetings become more efficient because of the ability to easily record results. Collaborative decisions made by the project team are captured as part of the meeting process and then distributed. This innovative process makes meetings more productive and keeps activities on track. Meeting notes can be easily distributed at a meeting's conclusion to all participants and stakeholders.Meeting Agenda Map *
Picture: Meeting Agenda Map
Related Solution:

Affinity Diagram →

The affinity diagram is a business tool used to organize ideas and data. It is one of the Seven Management and Planning Tools. But how design the Affinity Diagram quick and easy? ConceptDraw DIAGRAM diagramming and vector drawing software offers the Seven Management and Planning Tools Solution from the Management Area.Affinity Diagram *
Picture: Affinity Diagram
Related Solution:

Flowchart Examples and Templates →

Visual information is easier to perceive. You can teach even a child to make diagrams with a good flowchart example that would be interesting for it. Flowcharts can be fun, it’s not about business processes or programming algorithms. This flowchart shows step by step process of manufacturing of Nixtamal The product which is obtained by processing maize with calcium hydroxide. We must assume that the Aztecs were very fond of this product, if the recipe of its production came to our times. This flow chart was designed using ConceptDraw DIAGRAM with its solution for designing flowcharts of various types, sizes and purposes. ConceptDraw Flowcharts solution consists from the library of flowchart symbols, containing the set vector objects. Also there are a lot of diverse templates and samples of flow charts.Flowchart Examples and Templates *
Picture: Flowchart Examples and Templates
Related Solution:

Local area network (LAN). Computer and Network Examples →

Computer networks nowadays are spread all across the world. The large number of parameters, such as geographic scale or communication protocols, can divide networks. One of the most common types of networks is called local area network (LAN). It convenient to represent network examples by means of diagrams. This local area network (LAN) diagram provides an easy way to see the way the devices in a local network are interacted. The diagram uses a library containing specific symbols to represent network equipment , media and the end-user devices such as computers (PC, mac, laptop) , network printer, hubs, server and finally a modem. There are two types of network topologies: physical and logical. The current diagram represents precisely a physical type of LAN topology because it refers to the physical layout of a local network equipment.Local area network (LAN) diagram
Picture: Local area network (LAN). Computer and Network Examples
Related Solution:

Best Program to Make Flow Chart Diagrams →

ConceptDraw the best business process modeling tool to make flow chart diagrams. Start creating your own flowchart with ConceptDraw DIAGRAM and accomplish great results in the moment. This is the best program to make flow chart diagrams that gives users the ability to simply draw any type of flowchart. The fast creating visualization for the structural data with the vector stencils from object libraries by using RapidDraw technology makes ConceptDraw DIAGRAM the first program in drawing flow data.Best Program to Make Flow Chart Diagrams *
Picture: Best Program to Make Flow Chart Diagrams
Related Solution:

Organizing and Selecting Social Media Response Action →

Interactive tool helps you find the appropriate response to social media mentions quickly.Organizing and Selecting Social Media Response Action *
Picture: Organizing and Selecting Social Media Response Action
Related Solution:
ConceptDraw
DIAGRAM 14