Web-Interaction Model  «Prev  Next»

Lesson 6 Software
Objective Software Layer and Components

Software Layer and Components

The third layer of the Web Interaction Model is software. Software provides the underlying components that enable the display of Signs and Metaphors. It provides the structure needed to establish a site's Information Architecture. Various types of software are used for creating and managing resources available to users over the Internet. This lesson examines the ways software supports the various layers of the "Web Interaction Model". You will not be expected to know every application in detail, but you should feel comfortable understanding the types of software available and their general capabilities. The diagram below illustrates the third layer of the Web Interaction Model:
Web interaction model consisting of 1) Signs and Metaphors 2) Information Architecture 3) Software 4) Networks and the Internet 5) Hardware

Signs and Metaphors   Signs are visual markings or sounds that present information. Metaphors cue users about the functionality of the site through the use of icons or images. Together, Signs and Metaphors create the look and feel of the site.
Information Architecture Information Architecture organizes Signs and Metaphors into a cohesive structure. In addition, it lays down the path for navigating through the site.
Software Software comprises underlying components (applications) that enable the display of Signs and Metaphors. In addition, software creates, stores, and manages all resources available over the Web.
Networks and the Internet: Networking hardware (Switches, Firewalls,) for client server communication
Hardware:Cloud, Hybrid cloud, Servers, PCs

Web Interaction Models used to ceate Flow

Interaction models can be used to create workflows for the information architecture (IA) of a website. In fact, they play a complementary role in guiding how users navigate, discover, and interact with content.
Here's how they align:
🔷 What is an Interaction Model?
An interaction model describes how users interact with a system — including:
  • Navigation flows
  • Page-to-page transitions
  • Input and response mechanisms
  • Behavioral expectations (e.g., what clicking a button should do)

🔶 What is Information Architecture?
Information architecture is about:
  • Organizing content logically (hierarchies, taxonomies, metadata)
  • Structuring navigation systems (menus, breadcrumbs, sitemaps)
  • Ensuring findability and usability of content

✅ How Interaction Models Support IA Workflow
🛠 Practical Use Example
Imagine you are designing a university website. The information architecture might organize content like:
  • About the University
  • Academic Programs
  • Admissions
  • Student Life

Using interaction models, you could:
  • Map how a prospective student explores programs and transitions to the application process
  • Show decision points (e.g., filtering majors or comparing departments)
  • Highlight support elements like chatbots or search functionality

🧩 Summary
Iinteraction models not only support the creation of website information architecture — they make it user-centered, task-driven, and adaptive to real behavior patterns. They turn a static IA into an experience-driven workflow.

Software Processes in Website Development and Interactions

Web software can be divided into four main categories:
  1. Languages
  2. Applications
  3. Databases
  4. Bundled software solutions

Note that these are not formal categories, but ways of understanding the different types of software. There is some overlap among these categories.
In Web site development, there are multiple levels and processes for software development. For example, software is used to create, use, and view other software components. To understand how these different categories of software relate to each other, it is helpful to think of a process that starts with languages and ends with a user interacting with a Web site, as shown in the following series of images below:

1) A web developer or programmer uses languages (possibly in the form of a development tool) to create an application, database or bundled software solution. For example, the developer might use the language Java to create a Java applet (an application) that provides specific functionality on a website.
1) A web developer or programmer uses languages (possibly in the form of a development tool) to create an application, database or bundled software solution. For example, the developer might use the language Java to create a Java applet (an application) that provides specific functionality on a website.

2) The application, database or solution components are moved to a Web server using software such as FTP. The applet itself may be stored in a database for some web applications.
2) The application, database or solution components are moved to a Web server using software such as FTP. The applet itself may be stored in a database for some web applications.

3) A user(client) accesses information by interacting with a Web application, often by clicking on a link or submitting a form. Software, in this example a React Component, is returned to the client and displayed on the client's browser.   Note: Java Applets are rarely used in 2019 for client applications.
3) A user(client) accesses information by interacting with a Web application, often by clicking on a link or submitting a form. Software, in this example a React Component, is returned to the client and displayed on the client's browser. Note: Java Applets are rarely used in 2019 for client applications.

Web Network Data Science

Team Software Process

Every great piece of software starts with a customer's big idea. It is your job as a professional software developer to bring those ideas to life. But taking a vague idea and turning it into working code, code that satisfies your customer, is the challenge of understanding all of the benefits of SW development. By delivering software that is needed, on-time, and on-budget, you will be able to maximize profit for your company.
  • Personal Software Process (PSP)
    PSP is based on the work of David Humphrey. PSP is a scaled down version of industrial software process. PSP is suitable for individual use. It is important to note that SEI CMM does not tell software developers how to analyse, design, code, test, or document software products, but assumes that engineers use effective personal practices. PSP recognises that the process for individual use is different from that necessary for a team. The quality and productivity of an engineer is to a great extent dependent on his process. PSP is a framework that helps engineers to measure and improve the way they work. It helps in developing personal skills and methods by estimating, planning, and tracking performance against plans, and provides a defined process which can be tuned by individuals.

Programming Languages

Programming languages can be seen as building blocks for other software applications, databases, and bundled solutions. A programming language formally defines logic to act on data. The logic provides the computer with instructions that result in specific kinds of operations. Different kinds of programming languages support different functions. Developers use programming languages to create what we generally call applications, as well as databases and bundled software solutions. Some languages commonly used for Web applications are shown below:
Programming languages support the upper layers of the Web Interaction Model in many ways. For example, languages for creating visual resources and screen functions, such as rollovers or animation, directly support the Signs and Metaphors layer. Similarly, the Information Architecture layer is supported by languages that provide data manipulation, logic, and navigation features, such as hypertext. In the next lesson, you will learn about applications that serve the end user and Web site support.

SEMrush Software 6 SEMrush Banner 6
Purpose How Interaction Models Help IA
Define Navigation Paths Model how users flow from a homepage to deeper content (e.g., via personas and tasks)
Prioritize Information Map out what content or features are accessed most often and streamline their availability
Optimize Task Flows Illustrate steps users take to complete actions like signing up, searching, or checking out
Reveal Gaps or Conflicts Identify missing content, illogical groupings, or UX friction in the structure
Support Responsive IA Visualize differences in navigation and behavior across mobile vs desktop experiences