Updated on September 12, 2022
In this blog post, we’ll explain the specifics of the Eisenhower Matrix and provide a step-by-step guide on how to create it without any code manipulations using the DHTMLX Diagram editor.
What is Eisenhower Matrix and How it Works
Dwight Eisenhower is a significant figure in American history, who achieved the highest ranks in his military and political career thanks in large part to his enviable level of efficiency at work. He was known for his highly efficient time management principles. Mr. Eisenhower once said that most things which are urgent are not important, and most things that are important are not urgent. These words became a foundation for a new technique called the Eisenhower Matrix (or Eisenhower Box).
It is a graphical diagram designed for arranging and prioritizing tasks on the basis of their urgency and importance. Combinations of these core parameters form the structure of the Eisenhower Matrix i.e. four categories (quadrants) for dividing tasks:
- Important and urgent – tasks with known deadlines that have to be timely completed to avoid any repercussions;
- Important but not urgent – tasks without a clear due date that should be scheduled for attaining your objectives in the future;
- Not important but urgent – tasks that must be done but do not require your personal attention and it is possible to delegate them to your colleagues;
- Not important and not urgent – time-wasting activities that can be neglected or even excluded from your workflow.
This kind of diagram is widely used by business analysts, product and project managers, team leaders, and ordinary employees to classify their day-to-day activities. People love this approach for its simplicity and straightforwardness. Therefore, it is nice to have an instrument that helps to incorporate this functionality into a web app with minimum time and effort.
Our example provides a basic scenario of using the Eisenhower Decision Matrix to facilitate the workflow of a product team. Utilizing the task priority principle of this approach, we arranged tasks in four quadrants for three different product management stages: code review, automation, and maintenance. Each type of task is labeled with different colors to present the tasks’ prioritization in a more visually compelling and understandable way. As you can see, we also added clarification remarks for each category of the box that remind users how tasks should be handled.
Alternatively to a common coding approach, you can use the default mode of the DHTMLX Diagram editor for building an Eisenhower Matrix on the fly. This mode is initialized by invoking the dhx.DiagramEditor constructor and setting the “default” type in the configuration object:
- Adding and manipulating matrix elements
Using the drag-and-drop interface, you can choose all necessary shapes and visual elements listed in the left panel and place them in the grid area. You can specify the core structure of the Eisenhower Box using any built-in swimlane template. It is easy to adjust swimlanes using a context (3-dot) menu.
All swimlane text labels are made via inline editing. Tasks and other clarifying textual content can be added with the help of built-in topic shapes. Each shape has a personal toolbar with a pack of basic editing operations (copy, add a connector, delete). Thus, you can use the copy option to save time on adding similar shapes but pay attention that this option is unavailable inside the swimlane. Moreover, it is possible to quickly and accurately position shapes in relation to one another using snap lines that appear when the coordinates of the dragged and static shapes match up.
- Fine-tuning the appearance of matrix elements
When it comes to ensuring a unique look for your Eisenhower Matrix, you can find all editing options in the right-side panel. All you have to do is to click on the needed shape and you’ll get access to necessary settings. Here you can play around with all available parameters for any diagram element: dimensions, stroke, color, text, and text styling.
At the same time, there is a much faster way to style shapes that should look the same. You can use hotkey combinations to copy (ALT+CTRL(Cmd)+С) the style settings of the selected shape and paste (ALT + CTRL (CMD) + V) them into the target shapes.
- Exporting and importing in JSON
That’s how you can use the DHTMLX Diagram editor for building your own Eisenhower Matrix.