UI / UX Improvements of the web app

This page collects ideas to improve the UI / UX of the Mifos web app. It has its sister in the Jira Epic here. Each idea should aim at being outlined with enough detail to implement it. There should also be a measure of importance. As soon as the idea is clear and prioritized, it can be made a Task in Jira, linked to afore Story and be worked on.

Please feel free to edit and comment. At the time of creation, this page represents Felix' opinions. But this should not be so.

1. Smooth workflow for non-admin users
   The current web app interrupts anyone with non-admin rights with frequent messages regarding
   non-accessible functionality. The fewer rights you have, the more you will be told so. Instead, no
   messages should be shown. Any functionality out of reach to the logged in user must not appear in the UI (menu items, buttons).
   Priority: High.
   
   

2. Support of different screen sizes
   A large portion of the current CSS is px based. It must be rem based instead. The web app should support (developped for, be tested on) any screen size between an iPad format (1024 x 768) to a larger office screen (3840 x 2160).
   Priority: Unclear.
   
   

3. Clickable items can be opened in new tab/window
   If items in a list can be clicked, it must be possible to open the item in a new tab by holding the shift key; e.g. compare the list of reports - but this is a problem in many of the lists.
   Priority: Low.
   
   

4. Non-required dropdown choices can be deselected
   If the choice in a dropdown list is not mandatory, it must remain possible to deselect all entries after an entry got selected. E.g. if I set out to create a user, choose an office, select staff and then change my mind (i.e. don’t want to select any staff), this must be possible. At the moment I have to leave the form, return to the form and start from scratch. Diverse forms have this problem. E.g. creating a client, “Gender” is not a required information, but can’t be undone, when selected.
   Priority: High.
   
   

5. Consistent way to signal inavailability of a choice
   If an action offered in a menu is impossible due to some status (e.g. a Group can not be deleted, if it is not pending), we need a consistent way to signal this to the user (in all of these cases): e.g. we could disable the option; or we could allow the user to click on it and then show an informative message. Important is that we have a single consistent way of dealing with this.
   Priority: Low.
   
   

6. A useful home screen
   The Home screen with its Activity Search and Dashboard button needs to be redesigned. The
   Activity Search should be available on every screen. The Dashboard button is redundant, because it can be found in the icon list on the left too. The Home screen should present relevant, recent data.
   Priority: Medium.
   
   

7. A wizard mechanism to facilitate setting up a new web app
   This is not a UX feature in a strict sense, but could improve the set up process of the web app significantly. Currently a System Administrator user must provide diverse configurations (mostly by configuring Codes, then Products and Charges) in order to reach a usable system. Instead of putting the burden on the knowledge and (likely prior Fineract) experience of the System Administrator, a wizard should guide this process by asking meaningful questions with an increasing level of detail, furnishing the system automatically with the most likely configuration. This seems in particular important due to a lack of up-to-date documenation.
   Priority: High.
   
   

8. Richer pages
   Most modern web applications have data rich headers, footers and sidebars, apart from the central area of the window. The web app has mostly - the central area of the window, plus means of navigation (menu, clickable icon bar). It therefore doesn’t look modern.
   Priority: Unclear.
   
   

9. Nice Empty State
   We don’t have a nice way to display empty lists and tables. This problem is usually termed “Empty State” in web design - e.g. see here or here .
   Priority: Low.
   
   

10. Removal of unnecessary features
    Many UI features are unnecessary. They should be removed:
    
    7. 1 The “Admin” menu item under “Institution” is redundant.
    Redundant menu items can make sense to facilitate specific actions for users who don’t know an
    application. E.g. on a shopping site: duplicated menu items are used to facilitate paying. However, they don’t make sense in an application for recurring users, who hopefully figure out that both “Admin” menus are identical soon and then only use the direct way.
    Priority: Medium
    
    7.2 “Keyboard Shortcuts” don’t work consistently.
    Try Ctrl-n on any page in Chrome – it won’t open the “Navigation Page”, but a new blank browser
    instance. Where shortcuts work, they cause more trouble than good. Ever tried to find a text in a
    page by entering Ctrl-f in the web app?! Admittedly, in many cases you find the text, but often you
    get directed to “Frequent Postings”.
    Priortity: Low
    
    7.3 “Home – Settings” has a useless Color Scheme and Font Selector.
    These settings are based on Angular features, but have added significant complexity to the Angular update process in the past.
    A banking app should be customizable by a System Admin without losing the ability to install new releases on top of old one’s. The System Admin needs to be able to create a brand, even for the smallest of organizations. A brand often requires a specific colour scheme and font.
    A banking app should not enable regular users to change the branding at will, - and then reset all the defaults again with the next login of the user. This is a useless gimmick. Instead a concept to support updating a customized (branded) app is needed.
    Priority: Low.