Create a service that scans information
Scanning a list of information, selecting a topic of one’s interest, and exploring it in depth is a common process people go through on the web.
I have designed the pattern of ‘scanning information → checking in depth’ and used a split view to record the designing process.
What is Split View?
Split view is a pretty familiar screen layout to us, with the screen divided to the right and the left.
You can guess from the name itself that the screen splits, but split view is not an ordinary split-screen layout.
Split view consists of a primary column and a secondary pane.
The primary column, displaying the content that needs to be compared or searched, is on the left, and the secondary pane, displaying the results of the primary column, is on the right.
Unlike a common split-screen layout which only divides the screen in half, the secondary pane of a split view shows information subordinate to the primary column.
This layout features the information for comparison (scan) in the primary column and the in-depth information search (confirmation) in the secondary pane.
In the platform I am making, since the client selects two partners to work with and requests a meeting, I have introduced split view to make it easier for clients to compare (scan) and navigate (confirm) applicants.
Why We Chose Split View Among Many Others
In addition to split view, there are many layouts that are designed based on the concept, “compare (scan) → explore (check)”.
In the early stage of our project, we had many different layouts as candidates and had to compare them to select one.
Since there were so many options to consider in this process, we set up some criteria to choose a layout that meets our requirements.
<Layout Selection Criteria>
- For user convenience, switching between the comparison (scanning) action and the searching (checking) action is to cost the least.
- For user convenience, switching between the searching (checking) action and the comparison (scan) action is to cost the least.
- For clear recognition of information, the area for comparison (scanning) and the area for searching (confirming) are to be separated.
Based on the three criteria we established above, we took a look at several comparable navigation layouts and picked the one that suits us the best.
Candidate 1. Inline Form
Using the inline form, you can quickly compare items.
However, it is challenging to compare contents once you select specific information because the selected area enlarges.
Inline form is useful for comparing simple contents.
Since we have to compare a massive amount of information and it is difficult to scan them when a specific area enlarges we decided not to use this option.
Candidate 2. Slide-out Form
For the slide-out form, the conversion cost is high because of the “scan → confirmation → scan → confirmation” structure.
Also, there is a limitation of not being able to check the contents while scanning.
Slide-out form is used when the content is too long to use a modal. For example, Airbnb provides help content in a slide-out form.
When the amount of information is too large for the primary column of split view to process, this form can be a great alternative to split view.
Split view, which was candidate #3, met all three criteria for the layout selection, so I chose split view.
Designing a Split View
When designing a split view, the first thing to do is to determine the proportion between the primary column and the secondary pane.
The split view proportion recommended by Apple is to use one-third for the primary column and two-thirds for the secondary pane.
However, you don’t have to stick to that proportion.
The important thing here is to properly split the two sections based on their content and to make sure that the secondary pane, which the users use to digest in-depth information, is wider than the primary column.
The second thing to note is the unique characteristic of split view, the primary column’s result value being the output shown on the secondary pane. Hence, you need to take different approaches when designing the primary column and the secondary pane.
Knowing these two things makes designing a split view very simple.
Designing a Split View Primary Column
When designing a split view primary column, we need to keep in mind that it should be easy to compare and navigate.
Users need to scan the primary column and select content that allows them to navigate to more in-depth information, but there are a few things to be aware of in order to make the design easy for browsing.
- Fixed Vertical Width
It is recommended that split view’s primary columns have the same height and the amount of content per item, not to break the navigating rhythm.
But some items are difficult to be kept consistent with others for they have empty values. In that case, you can either boldly give up the consistency or fill out the form with empty values. The latter option will attract an equal amount of attention to all items, letting your users explore in an unbiased environment.
If the primary column is designed to show each item in inconsistent forms, it will make users focus only on specific contents and lose consistent navigation rhythm.
2. Clear Separation of Functions Using Various Elements
When using split view, it is recommended to use different visual elements for each component that has different features or characteristics.
Links should be colored to be distinguished from other components.
Additional information should be distinguished by using different visual elements, such as using lighter text color than the one for the core information. That way, when users scan information, they can quickly thin out only the ones they want to see.
When you need to show different types of information together, graphic elements such as icons are good for separating information for the users.
3. Non-overlapping Scrolling Area
The primary column aims to allow users to scan the summary and select the information to be viewed further.
That’s why summaries of information are piled up in the primary column.
The scroll area should guarantee that the users can navigate through these summaries smoothly. If possible, the scroll area should not invade the information area, creating a neat view that shows the information well.
4. Replacing Infinite Scrolling with Pagination
You can use infinite scrolling for most of the primary column.
However, if a user is open to multiple options, such as looking for several candidates to work with, pagination will help them to remember the location of certain information.
Paginating allows the users to keep track of the pages containing the information they are interested in, providing a more effective browsing experience than infinite scrolling.
5. Highlighting the Chosen Area
Since the value returned on the secondary pane depends on the choice made on the primary column, the more clearly marked the selected content of the primary column, the better.
Knowing which content was selected from the primary column, users can perceive the information on the two panels with more ease.
6. Adding Additional functions (e.g. Filter, Search)
Like other comparable layouts, split views can provide a more effective scanning experience to users by adding search, filter, and sort functions at the upper part of the primary column.
As mentioned earlier, split view offers the users a quick overview of the necessary information with the primary column, while information that requires in-depth exploration is shown in the secondary pane. Therefore, the importance of the two actions, scanning, and in-depth exploration, is almost the same.
If you want your screen to emphasize scanning (if the filter function is more important), it is recommended that you use the inline form or a table form instead of a split view.
7. Other Possible Options
You can also add deleting function to immediately eliminate the information you don’t want to see in the primary column.
You can create a primary column that induces a richer user experience by adding several functions to it.
Also, by adding a chat function, unread messages can be displayed in the same way as they appear on messaging apps, or if there is a change in the secondary pane, it can be displayed on the primary column in reverse.
When planning for such features, it is possible to add a chat function for clients to chat with applicants in the future. It would be a big plus, reflecting the secondary pane changes in the primary column.
Designing a Split View Secondary Pane
The secondary pane of a split view should enable the consumption of in-depth information. Therefore, the UI should be structured so that the users can focus only on the content.
- Making Use of the Header Area
To continue with the flow of ‘selecting information → checking whether the selected information is correct → consuming information’, check the separated part at the top of the secondary pane once more.
Also, in the header area, you can provide a summary of important information on the primary column.
2. Adding Functions to the Header Area
The header area is an already reserved space. In this space, users can use various functions to add necessary actions.
You can mark specific information and provide links to other sites for a more in-depth understanding of information.
You can also add action buttons here to navigate the users to the next page.
3. Designing the Text Area
The body area should be designed in a way that the information can flow naturally and seamlessly like water.
If additional actions such as writing or adding files are required, check the whole content and enable additional actions at the bottom of the pane.
Out-of-Panel Design
Let’s use areas other than the primary column and secondary panes.
- Using the Right Side of Split View
If you use the floating UI on the right side of split view, you can display a guide or help for platform users, and place buttons or additional functions.
Since the vast majority of users browse the website from left to right, we can help them by using the less crucial right area to place helpful information.
2. Using the Upper Part of Split View
You can attach other UI components to the top or the bottom of split view layout, just like LEGO.
In the example above, the tabs are organized according to the order of process at the top of the split view so that you can put more information.
In addition, by using the split view and the list view together, you can create a layout optimized for the information that goes into each tab.
Using the top tab allows you to use multiple layouts simultaneously, so it is good for containing complex information.
3. Designing Blank Page
Moreover, you can increase user participation by adding a function on the empty status page that enriches user actions in the service’s core function or the flow.
Split view is not commonly used on websites, but it is a functional layout. It is also easy to implement on mobile applications, so it is highly useful. (iMessage uses split view on Mac and list view on mobile. But it is not difficult to switch from web to mobile, as the layout conversion on web and mobile has already been officially set.)
I hope it will be of great help to those who need a UX design that can enable users to easily go through the process of [scanning information -> checking in depth].
Related screens can also be found in [List of Applicants: Functional Improvements].
Thank you for reading.
