As developers, it is our responsibility not only to provide customers with a system that meets business requirements but also to provide the users with a pleasant experience, ensuring they feel comfortable navigating the application and performing tasks.
In this blog, we'll explore how we can implement User Experience (UX) best practices in Oracle APEX, thus providing clean and consistent outputs both in terms of the UI design and our code.
UX (User Experience) refers to how a person feels when interacting with a system. Good UX would imply that the user found that the application was intuitive and took minimal effort to accomplish what they needed. It is often closely associated with UI (User Interface), which focuses on ensuring the visual interface is functional and easy to navigate.
Having a well-designed UI will enhance the UX, as it not only makes the application aesthetically pleasing but also instils confidence in users. When the interface is self-explanatory, users feel capable, leading to a more enjoyable interaction with it.
Perhaps the most famous UX example was given by the 'Father of UX', Don Norman. 'Norman Doors' refer to doors that are poorly designed in such a way that users are unsure how to operate them. Have you ever approached a door and pulled it instead of pushing it? Norman argues that in this scenario, the flaw lies in the design itself as it doesn't convey to the user what is required of them. This example serves as a cautionary reminder for designers and developers to prioritise clear interfaces, minimising the risk of errors and preventing confusion and frustration for users.
In order to portray the correct look and feel to an application, consistency is crucial. Within UX design, stylesheets are often used to reinforce this. They will consist of agreed fonts, typography, icons and colours. By creating a centralised style sheet, you can share it with other developers to ensure everyone adheres to the same standards. This can then be applied within Oracle APEX.
It is often easy to make changes at the page level. If you're trying to achieve a particular look when developing, you may write some CSS or custom JavaScript on a page. However, when you're happy with this and continue with other parts of the app, do you then copy that code to another page?
The answer is, if you want a consistent style that flows through the application, there are lots of other ways to do so:
This one may seem trivial, but buttons and calls to action are a huge contributor to UX. Having a consistent placement and colour for buttons will massively improve usability. APEX has an option on buttons to set them as 'hot'. By doing so, this applies the primary colour that has been set at the application level.
The colour of the buttons will indicate the intended user action, with hot colours representing positive actions and plain/secondary colours for neutral or negative actions. For example, on a modal screen, you may have two buttons within a region. The hot button will likely be a 'save' or 'apply' and be placed in the bottom right corner (or in the save position within the region), and the plain button will be a 'cancel' action and be placed within the bottom left (or the close position).
The button positions within the region serve as placeholders. APEX uses these to define a template for your pages, making it easy to preserve consistent component placement.
If this is then applied throughout the whole application, users will know that when filling out a form or entering search criteria for a report, regardless of what the buttons are labelled as they will be indicative of positive and negative outcomes. This will add familiarity to each screen and will reduce the amount of time tasks take, as the layout is always homogeneous.
The user interface should be clear and straightforward. Upon logging in or landing on a page, users should instantly understand what actions they need to take. Ways to help with this are:
Good UX isn't just about the UI design; it also requires clean, well-structured code. Here's how you can apply UX principles at the code level:
As developers, it should be standard practice to add comments to our code. Often, there are multiple ways to solve one problem and adding text to explain your choices and how it affects the application can help development. Particularly for large applications that have lots of developers, it's incredibly helpful to have context and understand how things work, and generally, the way to do this is through adding comments.
As much as we love comments, the code should be clear enough that, when someone reads it, they can understand what it's doing without needing additional wording.
When you aim for self-documenting code, you tend to write cleaner, smaller functions and choose meaningful names for variables and cursors. This leads to a better overall structure.
For example, in the above code, the function get_username is very clear as to what it does (i.e. return the username), the cursor and variable are also clearly named, with c_ prefixing the cursor and v_ prefixing the variable, both also contain the name of what is it hoping to select/be set as (username). Even if you're new to the project or are a more inexperienced developer, this structure is easy to understand and use in future.
If all of your code follows this pattern and is human-readable, this reduces the amount of time it will take others to troubleshoot or amend the code and reduces the risk of the wrong code being changed.
To make your application maintainable and efficient, package your code into reusable modules. For common business logic or validations, encapsulate them in PL/SQL functions or procedures that can be called across different pages and applications.
This will ensure all validations and value assignments are the same. Having components which slightly differ from page to page may cause issues in the long run.
A key part of this is confirming that for these reusable modules, you keep it as simple as possible to make them widely applicable. When a function is focused on a single task, it can be used in various contexts as there is no additional code that is rendered irrelevant. Using this approach will remove the need to replicate the applicable parts of the code elsewhere.
For example, instead of having one procedure that validates the input and then inserts that record, you may want to split these into two. This makes each procedure more reusable across the application, allowing you to perform validation on its own when inserting a record isn't the desired outcome.
Consistency in coding styles is essential for collaboration. When lots of developers are working on a project, they may have different styles and casing, and ensuring all code looks and acts the same establishes uniformity within the database and application backend.
Adhering to coding standards across the entire project makes it easier for developers to work together and confirms the code is clean and readable. You can use tools to ensure that it follows consistent formatting rules if needed.
Error handling plays a significant role in UX. Clear error messages help users understand what went wrong and how they can fix it. Ensure that your error messages are interpretable and don't just display technical jargon. In APEX, you can easily configure custom error messages both inline and on-screen, highlighting what they need to do to come to a resolution.
When testing, it is useful to identify bugs which could happen at a database level (e.g. constraints and package errors) and try to implement error messages which give a clear answer as to why it's erroring instead of displaying ORA error messages, which likely would confuse users.
When working in APEX, it's essential to keep track of changes to your code. Versioning packages and components helps to explain the changes that have been made and allows developers to easily track these updates or revert to previous versions if necessary. Always include a change log detailing the modifications made in each version.
By developing applications with clean, consistent code and focusing on intuitive, user-friendly design, you will significantly improve the user experience in your Oracle APEX application. Clear navigation, reusable components, and well-commented, maintainable code are all key to ensuring that users can interact with your app with ease. When development is done right, it not only benefits other developers but also translates into a smoother experience for the users.
For more information, check out our Oracle APEX Services, and if you liked this blog, check out our other APEX blogs here.
Contact us today, and one of our expert developers will be in touch.