Dynamic Organizational Chart Layout for Browser Visibility
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
As organizations grow, displaying the relationships between numerous employees in an organizational chart becomes cumbersome and time-consuming due to the need for extensive scrolling and navigation within a browser window, making it difficult to visualize the hierarchical structure effectively.
Innovation Solution
A computer-implemented method dynamically updates the organizational chart layout by using a matrix layout that adjusts based on the number of employees and available window space, switching between vertical vectors and multidimensional matrices, and resizing tiles to ensure the chart fits within the viewable area, thereby improving visibility and usability.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Loss of information
If all employees are displayed simultaneously in the organizational chart, then complete organizational structure visibility is achieved, but the browser window becomes too large requiring extensive scrolling
Solution Approach 1:
The patent transitions from a traditional two-dimensional flat organizational chart to a three-dimensional spatial layout where employees are positioned in a virtual 3D space. This allows the system to pack more employees into the visible window area by utilizing depth and angular dimensions, reducing the need for scrolling while maintaining complete organizational structure visibility.
Solution Approach 2:
The organizational chart becomes dynamically adjustable through user interaction. Users can rotate the view angle, zoom in/out, and reposition employees by dragging them. This dynamic behavior allows the chart to adapt to different viewing preferences and window sizes, optimizing visibility without requiring fixed large window sizes that cause scrolling.
2Loss of information
If more employees are displayed in the organizational chart, then complete organizational information is presented, but the chart becomes confusing and difficult to navigate
Solution Approach 1:
Different regions of the organizational chart can have different visual properties and interaction modes. The patent allows users to selectively highlight, zoom into, or focus on specific departments or individuals while maintaining the overall structure context. This local differentiation helps users navigate complex organizational structures by focusing attention on relevant areas without being overwhelmed by the entire chart.
Solution Approach 2:
By adding spatial dimensions (rotation, depth, positioning), the patent creates a more intuitive navigation paradigm. Users can rotate the organizational view to see different facets of the hierarchy, similar to rotating a 3D model. This spatial navigation is more natural and less confusing than traditional scrolling through flat 2D charts with many employees.
3Loss of time
If the organizational chart is resized to fit the browser window, then scrolling is reduced, but the chart may overlap with window boundaries
Solution Approach 1:
The organizational chart is implemented as a dynamic, resizable component that automatically adapts to browser window dimensions. When the window is resized, the chart recalculates its layout and scales appropriately to fit within the new boundaries without overlapping. This dynamic resizing maintains layout flexibility while eliminating the need for scrolling in most cases.
Solution Approach 2:
The patent changes key layout parameters (scale factor, positioning coordinates, rotation angle) based on the available window space. By dynamically adjusting these parameters, the system optimizes the chart's fit within the window while preserving the complete organizational structure and maintaining navigability, avoiding both scrolling and boundary overlap.
Data Source
AI summary
Techniques are described for dynamically adjusting the layout of an organizational chart being presented inside a browser window. Adjusting the layout of the organization chart has certain advantages such as ensuring that the organizational chart can be displayed in the browser window with minimal scrolling. The direct reports of a manager can be presented as a matrix in the organizational chart when the manager is selected. In one example, the layout of the matrix can be a vertical vector or a two dimensional vector depending on the number of direct reports the manager has. In another example, the layout of the matrix can change depending on the space available within the browser window to display the matrix. In other examples, the organizational chart can also be scaled based on the screen resolution or screen size of the client device that is presenting the organizational chart.