Page 1 of 1

Work in progress: User interface improvements

Posted: Fri Feb 08, 2019 9:52 pm
by rosarior
One of the many tasks we are taking on during this development cycle is the consolidation of feature and code between all the Mayan EDMS forks. One of the areas we've been getting a lot of feedback about is the user interface. Users are very pleased with the capabilities of Mayan EDMS but often feel the user interface doesn't do enough to expose those features or make using them harder than they need to be. Below are some of the improvements that have made it into the code and will be available in the next feature.

The navigation bar has been moved from the top to the left side of the screen. This change was made to save vertical space which is at a premium in most modern letterbox style display with wide aspect ratios. The other reason to move the main navigation bar to the left was to allow greater growth capacity to the menu. The current top menu was already at the maximum horizontal size support by most screens and would have made it impossible to keep adding navigation options. The new menu uses accordions to hide entries but unlike the old top menu, stays open even after navigating to different pages. This saves some mouse travel and clicks.
Screenshot from 2019-02-08 17-19-20.png
Screenshot from 2019-02-08 17-19-20.png (64.26 KiB) Viewed 568 times
The next change has to do with the inter app navigation. Because the documents app if the main app of the system and provides so many views of a document, we had in the past create a special navigation area to the right which only this app used. For this upcoming version we've generalized this navigation area and updated the rest of the apps to take advantage of it. This not only save mouse travel and clicks but shows users in which of the views they are currently at.
Screenshot from 2019-02-08 17-20-04.png
Screenshot from 2019-02-08 17-20-04.png (76.81 KiB) Viewed 568 times
Screenshot from 2019-02-08 17-35-23.png
Screenshot from 2019-02-08 17-35-23.png (66.72 KiB) Viewed 568 times

The next area we tackled was item selection. We've added a standardized toolbar are above the item list views. The first icon is a "select-all / select-none" button. This feature was added in later version of the 3.1 series and this version improves on functionality and appearance. We've also added a visual indication when an item is selected by highlighting the border. In addition, items can be selected or unselected by clicking not only on the checkbox at the top but by also clicking on any part of the panel's body that is not already a link.

The other feature added to item lists is the ability to switch between item view and list view as can be seen in the screenshots below. Each view will display the same number of columns but provide a different visual layout to cater to user preferences. Many users have expressed that they like seeing the search results as a list view and improve their visual scanning.
Screenshot from 2019-02-08 17-23-42.png
Screenshot from 2019-02-08 17-23-42.png (159.3 KiB) Viewed 568 times
Screenshot from 2019-02-08 17-23-55.png
Screenshot from 2019-02-08 17-23-55.png (99.16 KiB) Viewed 568 times
Finally once the list view is selected, columns that come directly from a database field will be shown as a link indicating that the list can be sorted by that column. Clicking again on a sorted column will invert the sort order (ascending/descending).

We hope these new user interface and user experience changes are welcomed additions as we've built them following very closely user feedback.