Web List Component: Beyond Simple HTML Table
Today, I am going to share the list component we use in our ERP applications. Web applications UI is a very important topic for web developers. UI design is an activity that mixes both functional design and graphical (artistic) design. Function richness, usability,
comfort and look&feel are very important. Mixing these aspects into components determines your GUI success.
Web applications should have following components; List, Form, Grid, Tab, Popup, Calendar, Alerts, Navigation Bar, Tool Bar, Command Buttons etc. Graphically or HTMLly designing these components are not enough. We have to carefully attach functions while considering usability. When attaching functions, there is always a decision to be taken for function design; where do we provide this function, in server-side or in client-side or with Ajax?
Here is the snapshot of our sample list:
![Web List Component]()
Our list is mix of a table and a layer element. In a web application, a list component is a must. We added the find&edit responsibility to the main lists. For this reason, our lists are an entry point for editing records. Let’s dig into details:
1-3 Command Icons: These icons do the functions in lists. Command icons from left to right are “Delete”, “Add”, “Copy”, “Update”, “Search”, “Documents”, “Workflows”, “Audit Trail”, “Print”, “Filter” and “Customize”. When user clicks these icons, it triggers server-side commands and execution. Every command icon is associated with a hot-key so that users can easily invoke this icon clicks without moving mouse. As a UI design note, every function on page can be used by using only keyboard. Some users prefer keyboard for its speed compared with mouse.
2 Paging: Paging is very important when the number of records in tables reach thousands or millions. Loading and displaying all records in a browser is not acceptable so we have to skip some records. The neat way of doing this is paging. (Some applications load records or pages when scrolling the list but I think this is an ugly function design) By paging, we both minimize server and client processing with the cost of reading page counts. Many database systems support paged fetch. We use a paging object in a list object for paging functions. “Total” is the number of records that a user can see, “Page No” is the number of page I am viewing, “Record” is the number of records that I want to see in the page(The default record count we are using for lists is 10). If the number of rows displayed on page overflows the height of the list, then a list scroll bar emerges instead of page scroll bar. One important design note, when user scroll rows you have to keep the command icons and column headers fixed at the top. (Many lists I analyzed don’t have fixed header feature but users would want it. We achieved fixed column header feature by using CSS expressions).
4 Fast Filter: Fast filter is my favorite feature in our lists. We added a filter line to filters instead of some search inputs at top of the page. In this way, users are not limited with the filters you added. Users can use every column for filtering. This is a very rich function. For lookup values, we add lookup icon for opening popup and user can select reference values. In fast filter list we support following filters: "Equal", "NotEqual", "Smaller", "SmallerEqual", "Bigger", "BiggerEqual", "Starting", "Including", "Ending", "Null", "NotNull", "NotStarting", "NotIncluding", "NotEnding", "Covering", "NotCovering", "ExistingInList", "NotExistingInList", "Between", "NotBetween".
Sample Filters:
Bigger: >145
Including: *2009*
NotExistingInList: !03,04,05
Between: 1000<>5000
Users can add multiple filters by opening “Filter” page (With Filter command icon, on the right top of the list).
5 Selection: Single or multi-selection is possible. Commands may require a row selection, for example “Copy” command. For single selection in our lists, user only clicks the row and row is highlighted. Clicking on checkbox for single row selection is not user-friendly. Users usually use these columns checkboxes for multi-selection. We may use CTRL keys for multi-selection but we thought that this is more usable. For example sometimes, some rows can’t be selected. With this column it is very understandable to show disabled rows.
6 Column Headers: We add a function to the column headers, “Sorting”. When user clicks a header, the list is sorted according to this column. If user clicks again to the sorted column, sort order is reversed.
7 Selection Row: When user clicks a list row it is highlighted. User can also select row by using keyboard navigation keys (Up-Down). One important function is that, when user leaves this page and then returns again this page, user’s previous selection is remembered and selected. This is very useful when user list has many rows and scroll required. By double-clicking a row, users is taken to edit page. Double-click is also useful, otherwise user had to select the row then click the edit icon.
Web applications should have following components; List, Form, Grid, Tab, Popup, Calendar, Alerts, Navigation Bar, Tool Bar, Command Buttons etc. Graphically or HTMLly designing these components are not enough. We have to carefully attach functions while considering usability. When attaching functions, there is always a decision to be taken for function design; where do we provide this function, in server-side or in client-side or with Ajax?
Here is the snapshot of our sample list:
Our list is mix of a table and a layer element. In a web application, a list component is a must. We added the find&edit responsibility to the main lists. For this reason, our lists are an entry point for editing records. Let’s dig into details:
1-3 Command Icons: These icons do the functions in lists. Command icons from left to right are “Delete”, “Add”, “Copy”, “Update”, “Search”, “Documents”, “Workflows”, “Audit Trail”, “Print”, “Filter” and “Customize”. When user clicks these icons, it triggers server-side commands and execution. Every command icon is associated with a hot-key so that users can easily invoke this icon clicks without moving mouse. As a UI design note, every function on page can be used by using only keyboard. Some users prefer keyboard for its speed compared with mouse.
2 Paging: Paging is very important when the number of records in tables reach thousands or millions. Loading and displaying all records in a browser is not acceptable so we have to skip some records. The neat way of doing this is paging. (Some applications load records or pages when scrolling the list but I think this is an ugly function design) By paging, we both minimize server and client processing with the cost of reading page counts. Many database systems support paged fetch. We use a paging object in a list object for paging functions. “Total” is the number of records that a user can see, “Page No” is the number of page I am viewing, “Record” is the number of records that I want to see in the page(The default record count we are using for lists is 10). If the number of rows displayed on page overflows the height of the list, then a list scroll bar emerges instead of page scroll bar. One important design note, when user scroll rows you have to keep the command icons and column headers fixed at the top. (Many lists I analyzed don’t have fixed header feature but users would want it. We achieved fixed column header feature by using CSS expressions).
4 Fast Filter: Fast filter is my favorite feature in our lists. We added a filter line to filters instead of some search inputs at top of the page. In this way, users are not limited with the filters you added. Users can use every column for filtering. This is a very rich function. For lookup values, we add lookup icon for opening popup and user can select reference values. In fast filter list we support following filters: "Equal", "NotEqual", "Smaller", "SmallerEqual", "Bigger", "BiggerEqual", "Starting", "Including", "Ending", "Null", "NotNull", "NotStarting", "NotIncluding", "NotEnding", "Covering", "NotCovering", "ExistingInList", "NotExistingInList", "Between", "NotBetween".
Sample Filters:
Bigger: >145
Including: *2009*
NotExistingInList: !03,04,05
Between: 1000<>5000
Users can add multiple filters by opening “Filter” page (With Filter command icon, on the right top of the list).
5 Selection: Single or multi-selection is possible. Commands may require a row selection, for example “Copy” command. For single selection in our lists, user only clicks the row and row is highlighted. Clicking on checkbox for single row selection is not user-friendly. Users usually use these columns checkboxes for multi-selection. We may use CTRL keys for multi-selection but we thought that this is more usable. For example sometimes, some rows can’t be selected. With this column it is very understandable to show disabled rows.
6 Column Headers: We add a function to the column headers, “Sorting”. When user clicks a header, the list is sorted according to this column. If user clicks again to the sorted column, sort order is reversed.
7 Selection Row: When user clicks a list row it is highlighted. User can also select row by using keyboard navigation keys (Up-Down). One important function is that, when user leaves this page and then returns again this page, user’s previous selection is remembered and selected. This is very useful when user list has many rows and scroll required. By double-clicking a row, users is taken to edit page. Double-click is also useful, otherwise user had to select the row then click the edit icon.
No comments:
Post a Comment