Jotform Internship Project
''Best Enterprise Product Project Award''
Relation View
Relation View is a feature that allows Jotform Enterprise users to easily view asset connections.
Year
2024
Role
UI/UX Designer
In Jotform’s Workspace, assets are traditionally displayed in a list view, making it difficult for users to see relationships between them. For our internship project at Jotform, we developed a feature to help users visualize connections between their various assets, such as forms, tables, and reports. Our team, consisting of a UI/UX designer (my role), a backend developer, and a frontend developer, created a visual solution to address this challenge.
Purpose of the Project
We chose card view over list view to provide a clearer and more accessible display of asset connections. Card view allows for quick scanning of key details like asset type and connection count, presents connections more intuitively, and supports a more engaging, modular layout. This design choice aligns with our goal of simplifying complex data relationships for users.
View of Assets on Workspace
Relation view page that i designed where the assets are displayed as a card view
Jotform's current workspace page where assets are displayed as a list view
Tree View
The "Tree View" is a visualization format designed to present hierarchical or sequential relationships between various assets in a structured, branched layout. This view aims to provide users with a clear, organized look at how their assets connect and depend on one another, especially when managing a series of related assets like forms, tables, and reports. The layout mimics the branches of a tree, with each asset represented as a “node” and lines indicating their connections.
The asset we clicked in the workspace is at the top as the main asset, and when we click on the assets we want to see the links to, the links of the clicked asset appear in the lower layer.
We designed two distinct visualization options to cater to different user needs and preferences: tree view for basic asset connections and graph view for more complex interconnections
Types of Visualizations
By clicking the Zoom to Content button from the Zoom Menu, users can focus the entire camera focus on all assets, and by clicking Zoom to Selection, users can focus the camera focus on the selected part of the assets they have selected to see their connections. Users also can zoom in and out the camera's focus by clicking the Zoom in and Zoom out buttons.
When Zoom to selection is clicked, the camera moves by focusing on the connected assets as the assets are clicked and the connected assets are opened in a new layer.
Zoom Menu
Graph View
The Graph View is a visualization format created to represent the web of connections between assets in a clear, interactive, and flexible way. Unlike the structured hierarchy of a Tree View, the Relation View presents assets as individual nodes within a network map, with lines representing direct relationships between them. This view is especially helpful for users managing complex workflows, as it allows them to see both direct and indirect connections across their various assets (such as forms, tables, and reports) in a non-linear layout
When users open the Graph View, they see a selected single asset, which becomes the central node. This central node serves as the primary focus, with its directly related assets positioned around it, making it easy for users to see its immediate connections.
Nodes in the Relation View are typically placed based on connection strength, allowing users to see highly connected assets positioned closer to the central node. This positioning helps prioritize important relationships while pushing less connected nodes further out, reducing visual clutter
In Graph View, the main asset is always selected. Users can easily view the assets that connect two assets by clicking on the asset they want to see the relationship with the selected asset.
Seeing The Relations of Two Assets
Users can see the connections in the first layer by hovering over the assets in Graph View, and they can easily view which two assets are connected by hovering over the connection line.
Hover
Users can change the position of the assets they specify by holding down and dragging them to the desired position. In this way, they can view the connections they want to see more clearly.
Changing The Location of Assets
Users can type the name of the asset they want to find into the search button on the top right, allowing the camera focus to focus on the selected asset.
Searching An Asset
After users specify the connections they want to see in the Graph View, they can click the export button and export it as png, jpeg, svg and json.
Export
After users specify the connections they want to see in the Tree View, they can click the export button and export it as png, jpeg, svg and json.
Export
Relation
View
Relation
View
Copyright © 2024
Fatih Eren Yalçın
Portfolio 2024
Access with your computer or tablet for a better experience
