...
By applying UCD to the development process it enhances the acceptance of an application as well as minimizes the amount of needed UI/UX changes after the release. Implementing UCD means to involve the user at a early development stage already, to discuss for example about the page navigation or needed controls. Thats why, including a design review into the development of a new frontend module with a current openIMIS user would be useful!
...
To dive deeper into user-centered-design you can find a comprehensive article here:
https://usabilitygeek.com/user-centered-design-introduction/#:~:text=User%2Dcentred%20design%20(UCD),user%27s%20requirements%2C%20objectives%20and%20feedback.
Usability best-practices:
...
As the amount of different devices and therefore screen ratios varies between the users of openIMIS the layout of the application should comply with responsive design. Hence, all implemented components should scale in a way, that they still provide an acceptable user experience (no overlapping of components, readable labels and font size, etc.)
If you want to know more about “Responsive Web Design” then look at the following article. You will find a introduction into the topic as well as some solution concepts in HTML and CSS.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
03 Branding overview
The openIMIS initiative already established a corporate identity which introduces colors, fonts, logos, icons and texts. Hence, taking a closer look at the following documentations is really helpful to develop frontend components. Most of the already developed UI-Components will already include the colors and icons, but if you want to introduce a new one, you should check, whether a suitable icon exists or which colors to use.
OpenIMIS Colors & Logos | |
OpenIMIS Icons |
You can find all existing documentation to the branding of OpenIMIS here: https://openimis.atlassian.net/wiki/x/BwCrCw
04 Navigation Guide
Navigation between different screens inside the application is a core part of the user experience. The following principles set a baseline for a consistent and intuitive user experience across OpenIMIS.
The navigation system overall should rather be build more broad then going into depth. Means, it is better for users to have many menu items on one navigation level rather then building a structure where they have to drill-down into several levels. To provide an overview of the navigation system you can take a look at the following navigation model.
Navigation Model
The model includes several Screens, Triggers and Actions. All those will be described in the sections below. It is based on Material Design best-practices. With a depth of three levels and also just 4 different screens it provides a easy understandable but also comprehensive approach to build a consistent, user-friendly navigation. As the user does not need to recognize all the time, how to open the list of entries or how to add one, it will make it easier to navigate through the app.
Within the shown model it is possible to add another navigation level. As some entities (e.g. policy holders) do have direct related entities (e.g. policy holder insurees) it is possible to add a List Screen to an existing Detail Screen. This would result in the following navigation path:
Home Screen
→ List Screen (e.g. Policy Holders)
→ Detail Screen (e.g. one Policy Holder)
...
Screens and Menus
For OpenIMIS the following navigation principles and components should be used:
Home Screen
This screen is always the first one to show after entering the application (after the login). It does provide the user as a starting point into the different menus. From here is it crucial, that already a lot of menu items are available, in best case grouped into logical segments. The Home Screen as described is already a core component of OpenIMIS and is used as the starting point of the application.
Besides the menu items, the Home Screen should also provide a search component to give the user the chance to navigate to List Screen alternatively. The search should not redirect the user to the Detail Screen.
...
List Screen
Detail Screen
Context Screen