The Design of SIMPK BPKH App’s Interface
--
It’s 2021 and visual design has evolved as a tool to aid software development. With visual design, designers are able to visualize how software should look and function to both clients and developers. However, in the context of software development, we often refer to visual design as a high fidelity prototype instead. High fidelity prototype is a user interface design that allows realistic user interaction. Designing a high-fidelity prototype has since become an important phase on various software development frameworks. In this article, I shall discuss the design of Sistem Informasi Manajemen Program Kemaslahatan (SIMPK) BPKH app in my software engineering project.
Stage 1: Wireframe
Before we get into high fidelity prototypes, it’s best if we start with wireframes or low fidelity design first. According to Interaction Design Foundation,
Wireframing is a process where designers draw overviews of interactive products to establish the structure and flow of possible design solutions.
As you can see, wireframes can help us design a better user interface. The problem with jumping straight to high-fidelity prototypes is that we are easily swayed to create a design that looks good instead of creating a design that is effective. While there’s nothing wrong with paying attention to aesthetics, it is more important to ensure that our design can help users to achieve their goals effectively.
With that in mind, my team decided to begin our design process by creating a wireframe. We used Whimsical as our wireframing tool, as it has built-in properties that ease wireframing process compared to other tools.
We work on the design by regularly checking on the features and information architecture that are defined earlier. With wireframe, my team is able to focus on defining the features and flow for the app better. It also eases my team to review and revise our design continuously. To end our wireframing process, we present the final wireframe to the clients. Once they’re good with it, we then proceed to design the high-fidelity prototype.
Stage 2: High Fidelity Prototype
In this stage, we began to shift our focus from features and flows to visuals and interactions. High fidelity prototype is a user interface design that allows user interaction. It looks and acts as if it is the actual system (NN Group, 2016).
The motivation behind high fidelity prototypes is to create an effective user interface design while saving time and effort. If we jump straight to coding implementation, it may be more difficult and time-consuming to revise the design should the client demand it. Revising a high-fidelity prototype is much easier and faster than revising your whole program. It also allows us to focus on actually creating an effective design instead of a design that is easy to code.
My team did not jump straight into designing a high-fidelity prototype right after the wireframe. Instead, we create a design system first to ensure consistency among our designs. More about that design system can be found HERE. Once the design system was complete, we finally began to design the high-fidelity prototype. My team used Figma as the prototyping tool, as it is free, easy to use, and allows collaborative work.
To ensure that we deliver all the possible design solutions to clients, we create some design alternatives on our prototype. Design alternatives are also used to validate some designs that we are still uncertain about. With all the designs complete, we finalize the process by evaluating the design with Nielsen’s 10 Usability Heuristic.
Evaluate UI Design with Nielsen’s 10 Usability Heuristic
Nielsen’s 10 Usability Heuristic (Nielsen, 1994) is the 10 general principles for interaction design, consisting of a broad rule of thumb. It has been largely used to evaluate user interface design to ensure that it meets the desired usability standards. With Nielsen’s 10 Usability Heuristic, my team is able to reduce possible revisions from clients.
#1 Visibility of System Status
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
Our design will inform the user when they are offline through a feedback banner. Therefore, users should be aware that the report they create onward will be saved temporarily in the local storage instead of the database.
#2 Match Between System and the Real World
The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.
Our design used terms and icons that are familiar to the user, as seen on the bottom navigation menu. The information architecture for our design is also aligned with the real-world BPKH convention. For instance, a partner can be assigned to many projects and a project can have multiple monitoring reports.
#3 User Control and Freedom
Users often perform actions by mistake. They need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process.
Our design allows users to undo mistakes through the delete button on booking and report. The user also has control to cancel or backtrack their action with the cancel and back button on every form page in the design.
#4 Consistency and Standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
Our design implements a consistent design on various components, such as buttons and cards. Each card has a distinct design based on its function.
#5 Error Prevention
Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.
Our design disables the next or save button if the user has not filled in the mandatory information on every form. Confirmation pop-ups are also present in our design every time a user is about to delete an item.
#6 Recognize Rather Than Recall
Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.
Our design provides information on the owner and last edited date for each attachment and report. Therefore, the user can recall which report is made by them and when it is last edited.
#7 Flexibility and Efficiency of Use
Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
When accessing the booking page, users can have a flexible method of finding a project. The top 3 recent bookings are present on the home page as a shortcut, should the user only wish to see bookings that are relevant in a certain time period. In the bookings tab on the project page, filters are present to help the user filter information more efficiently.
#8 Aesthetic and Minimalist Design
Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.
Our design does not include excessive assets that may be distracting and unnecessary to the user. The design of our app’s interface follows the recent trend for UI design based on the Google Material Design guide. It’s also designed to be minimalistic and simple, as it is a formal app that will be used by government officials.
#9 Help Users Recognize, Diagnose, and Recover from Error
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.
Our design provides an input form validator that informs the user should they enter the wrong input and how to solve them.
#10 Help and Documentation
It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.
Our design provides brief information on what each subfeature does in a project dashboard. Form fields are also provided with labels and placeholders to ensure that users are aware of what information they should fill in.
Conclusion
User interface design, in particular, has become an important part of the software development process in the digital era. With user interface design, our software can achieve more things in terms of usability and user experience. However, it is important to know that a user interface is designed in a series of steps, from wireframing to a high-fidelity prototype. Our design should also comply with Nielsen’s 10 Usability Heuristic to ensure that it has met the desired usability standard.
Truth is, I’ve learned about user interface design way before this semester starts. I have understood well the importance of user interface design in a software development process. The implementation of user interface design in my software development project course has strengthened that understanding. Hopefully, this article can introduce you to the process of designing a good user interface. Thank you and I’ll see you on the next one!
