In software development, we often find ourselves reinventing the wheel—particularly when dealing with higher-level abstractions. As I mentioned in my blog "Unlocking Business Value: Moving Beyond Low-Level Programming", while open source has reduced redundancy at the technical level, user interfaces continue to see many foundational patterns being rebuilt repeatedly.
A classic example is the "Overview" screen, where users search for and interact with a set of data, performing actions like viewing or editing specific results. Each application tends to design this screen differently, often after much debate. To avoid reinventing the wheel every time, it is helpful to develop a reusable checklist of essential features. Although cost constraints may lead to the exclusion of some items, this list ensures conscious decisions are made for each feature.
A typical overview screen is divided into three main parts:
Header Section: This includes navigation options (e.g. breadcrumbs, back buttons…), settings (e.g. user language), and action buttons like "Create/Add" or "Import/Upload," enabling users to create (or update) single or multiple entities.
Filtering/Search Block: The area where users define and apply search criteria.
Result Block: Where search results are displayed, and users can perform actions on those results.
Let us break down these parts in more detail.
Filtering/Search Block
This section allows users to specify search criteria and refine their results. It typically includes four key elements:
Filters and Search Criteria: Ranging from simple text searches to complex multi-criteria filters.
Save and Retrieve Options: The ability to save filters, recall stored ones, categorize them, and share with others. You may also include templates for predefined filters that prompt users to input specific variables.
Clear Button: A simple feature that resets all active filters.
Applied Filter Overview: Displays the currently selected filters, with options to remove or modify them.
When designing the filtering section, consider the type of filtering required. Several filtering options exist:
Text search: Users enter free text to return results that contain a specific string.
Tag filtering: Clicking on a tag or category to apply a filter automatically.
Drill-down filtering: Starting with a broad filter (e.g. years), users can click to narrow down dynamically (e.g. months, then days).
Selection Filters: Users define filters based on specific attributes, which can range from simple to very complex.
Advanced Filters: Using a predefined scripting language (e.g. SQL or a domain-specific language) for custom filtering.
Additionally, you will need to address other concerns like:
Allowing single or multiple filter values, including "include" or "exclude" modes.
Whether to support wildcards, fuzzy searches, and operators (like <, >, ⇐, >=…) for numeric or date filters.
Options for relative date filters (e.g. "Last 7 days", "Current month" or "Last Year").
The combination of multiple filters using operators like AND, OR, and NOT.
Result Block
The result block is the core of the overview screen, where users spend most of their time. It is essential to avoid overcrowding this section with too much header or filter content to maximize the workspace for interacting with data.
The result block can be divided into these key components:
Quick Suggestions, Carousels and/or Banners: These could include personalized recommendations, marketing banners, dynamic carousels, or even data visualizations (e.g. statistics or charts) related to the search results.
Result Configuration and Result Actions:
Toggle between different view types (list, grid, map…).
Customize the number of results per page.
Export data with various options (e.g. output type XLS, CSV or PDF, current page or all pages, and column configuration).
Perform bulk actions like deleting or approving multiple results at once, often with a “Select/Deselect All” option.
Result Statistics: Display the total number of results, total pages, and the current page number for better user context.
Result Overview: The core table or other display formats (e.g. tile or map views) where data is shown.
Column Customization: Allow users to rearrange, resize, and sort columns. Multi-criteria sorting is valuable, as are actionable columns (e.g. flagging items as favourite or important, selecting for bulk actions or doing direct edits in the result set).
Column Header: Show column names and sorting status, with the headers remaining fixed when scrolling.
Paging or Infinite Scrolling: Paging is traditional, where users click through pages, while infinite scrolling loads more results as users scroll down. Infinite scrolling can offer a smoother experience when implemented with pre-loading techniques to avoid delays.
Rows: The rows correspond to the search results, and various actions can typically be performed on each row.
The most common action occurs when clicking on a row, which often opens a "View details" screen for that entry. However, different behaviors may be assigned depending on how the user interacts with the row. For example, some implementations may differentiate between a single click, double click, or right click. In some cases, clicking on a specific column within the row may trigger additional functionality. For instance, clicking a column might open a dialog that applies a filter based on that column’s attribute, allowing users to either select all records with matching values or exclude those values from the result set.
Additionally, contextual actions are often available at the end of each row. These may be presented as an action menu with various options or as individual icons. The specific actions that are visible or enabled depend on the user’s role and the characteristics of the returned results. Common actions include view, edit, delete, approve, reject, print, comment, attach a document, or clone/duplicate the entry.
Non-Functional Considerations
Beyond functionality, non-functional aspects like performance, security, and usability are crucial for a seamless experience.
Performance: obviously you want to ensure that a user gets a search result as quickly as possible and avoid that a user launching a heavy query brings down the platform (or negatively impacts the stability and performance of the system for other users). Many tricks exist for this:
Smart Filtering: Limit heavy filters like wildcards and ensure proper indexing
Caching: Cache data or search results to improve performance, balancing performance, infrastructure costs and freshness of the search results.
Asynchronous Exports: Large exports can be handled in the background, allowing users to continue working.
Time-out Management: Both front-end and back-end time-outs should be handled properly to avoid overloading the system.
Paging: Paging helps limit resource consumption by returning only a subset of the data at a time. The way paging is implemented significantly impacts performance. For instance, if the system retrieves all results but only sends one page to the API, the gain is limited to reduced network load and faster rendering in the user interface. However, the performance benefit is minimal in terms of data retrieval.
For optimal performance, paging should be applied at the data retrieval layer itself. This ensures that only the necessary subset of data is fetched from the database, resulting in more substantial performance improvements.Avoid double click: Users often click "Search," "Next/Previous page," or other buttons (e.g. sorting arrows) multiple times if they do not see immediate feedback. This can result in duplicate requests being sent to the back-end, potentially overloading the system. To prevent this, it is recommended to temporarily disable the button or action after it is clicked and re-enable it only once the action is complete.
Data Consistency:
Maintaining consistent data can be challenging, especially with continuously changing datasets and when paging is applied. Ideally, all pages should be cached to ensure consistency. If each page is fetched again from the data store and a specific sorting is applied, the composition of pages may become messy—records that appear on page 1 may reappear on page 2 if new data is added to page 1 in the meantime.
The same principle applies to action buttons, whose visibility may depend on certain attributes. If an attribute that enables an action changes between data retrieval and when the user clicks the button, the system should handle this gracefully and display an appropriate error message if the action can no longer be performed.
Security and Auditing:
It is crucial that the overview screen and all associated actions are protected by authorization profiles, ensuring that only users with the required permissions can access the screen and perform specific actions.
Data segregation: The results displayed in the overview screen should be limited to the data the user is authorized to view. If horizontal data segregation is applied, certain columns might need to be hidden or disabled for users without permission to view those attributes.
Filter visibility should also be configurable based on user roles. Not all filters are relevant to every user, so it may be helpful to hide certain filter criteria for specific user groups and customize the order or grouping of filters. This way, each user can search in a way that is optimized for their role.
Auditing and tracking: Log all searches executed by users, as well as which results were returned. Additionally track the filters users applied to better understand their search behavior.
Usability and Mobile Responsiveness:
Responsive Design: As applications are increasingly used across a variety of devices, responsive design is critical. Overview screens, in particular, can be difficult to optimize for mobile because they typically present a large amount of data on a single screen. Adaptations will be necessary to ensure a good user experience on smaller devices.
Common adjustments include:Converting the filter menu into a dialog box that can be opened and closed when applying a filter, preventing it from taking up too much screen space.
Displaying results in a stacked view, where multiple lines per result are shown to fit all relevant columns on a smaller screen.
Converting paging to infinite scrolling on mobile, which feels more intuitive for mobile users.
Replacing action menus with icons to improve clickability on small screens.
Persistency of User Settings: Another important usability consideration is whether the settings a user applies, such as Last executed search, Filter configuration, Result configuration or Page Size, should persist across sessions or be reset when the user leaves the screen. Different options like "Keep settings only as long as the current overview screen is open", "Persist settings for the duration of the user’s session" or "Always show the last applied settings, even after the user logs out" exist. The best option depends on the specific use case and user preferences. It is important to handle exceptions properly—such as when a user’s permissions change, or when updates to the application alter available filters—to avoid confusion or errors.
A well-designed overview screen is not just a luxury; it is a critical part of any business application. By incorporating the right features and thinking through non-functional elements like performance and usability, you can provide users with a seamless experience that meets their needs while also optimizing system performance.
For more insights, visit my blog at https://bankloch.blogspot.com
Comments
Post a Comment