This guideline will give comprehensive insights on how to develop a consistent, user friendly and accessible new openIMIS frontend module.
Content
01 Introduction to openIMIS’s Design
The following section will give you a short overview of the as-is situation of openIMIS’s user experience (UX) and user interface (UI). Therefore, we will introduce you to the current situation of openIMIS’s frontend, the found potentials and problems as well as the objectives of having this Design Guideline in place.
Current Situation (Release 2024-10):
Based on the Project Student Project 2024 UI/UX the UI and UX of openIMIS were evaluated. The approach included three different methods to collect information about the usability of the software. The first method which was applied was a user survey to get direct, anonymous feedback on the overall frontend. Secondly, a usability testing phase was done, including three attendees. Lastly, the current state of the UI/UX were checked against standardized heuristics.
The outcome of the evaluation can be found here: 02 Potentials & Problems.
As a result of the analysis it can be said, that openIMIS does already implement several design elements to enhance the user experience. With a moreover consistent UI and “Material Design” as a baseline framework, it isn’t mandatory to completely implement a new design strategy. That’s why the following design guideline will help developers to implement new frontend modules, still based on the current openIMIS design-
Potentials and Problems:
As mentioned in the section before, potentials and problems were found during the analysis. All possible enhancements were documented (List of findings). All findings were checked against an evidence or observation. Lastly, recommendations to solve those problems were invented and documented as well.
Objectives:
The following Guideline will have the objectives mentioned below:
Ensure a consistent UX/UI of openIMIS
Introduce the design principles of the software to new developers
Providing information to develop new frontend modules
Enhance accessibility and efficiency of the openIMIS platform
02 General principles
The general principle section will introduce concepts and frameworks which should be used overall in openIMIS UI, whether you create a new module or just change the existing components.
Material Design Framework:
The openIMIS frontend uses Googles “Material Design” design system as backbone. Therefore, it is useful to go through their official documentary to get familiar with the concepts. As the detailed documentation includes all needed information, this guideline will not provide any deep-dive into the system. You can find the documents at https://m3.material.io/.
User-Centered-Design (UCD):
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!
Usability best-practices:
Getting familiar with usability is crucial to develop a user friendly interface. As the subject includes several areas and a lot of topics to cover, it is good to know the basics. Thats why getting familiar with the basic heuristics is recommended. One possible source can be the 10 UX Heuristics by Nielsen https://www.nngroup.com/articles/ten-usability-heuristics/. Those cover topics like consistency, visibility, user controls or error prevention.
Responsive Web Design:
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.)