A Story of Modern Graphical User Interfaces (GUI) in the FinTech Universe
Since their introduction in 1973, Graphical User Interfaces (GUI) have become a driving force behind the success or failure of any application. Nowadays, a well thought out and solidly implemented GUI can be the decisive factor of whether your users will embrace your product regardless of underlying features and power.
As an example, in probably one of the most recognizable Battle of the GUIs, Google proved that “more is not always better” and muscled out all competition in the search-engine market, such as yahoo! and Bing.
Over the decades GUIs have undergone several evolutions, with the latest iterations focusing around trimmed down, straightforward navigation and a filtering of on-screen data to avoid information overdose on the user’s side.
But how does one implement such an approach to GUI design in the FinTech world, where there is a constant demand for more data in the drive for more accurate risk assessments?
Removing data-bloat in financial applications is often not an option as you can’t know what data your end-user may or may not need access to. Thus, the name of the game changes to customization.
There are three main goals behind the design of a successful FinTech GUI:
- Intelligent use of screen space – utilize the available screen real-estate efficiently to maximize how much data you can display at any one time, without converting your app into a spreadsheet clone.
- Optimize navigation – ensure you minimize unnecessary navigation by grouping your data in intuitive ways and try to avoid extensive nesting of pages.
- Extensive customization – provide your user with plenty of options to customize the experience allowing them to tailor the GUI to their needs.
At swissQuant we attain the above through a combination of strategies, including and not limited to:
- Using a split-screen GUI with a clear colour separation. Data-visualisations (such as charts) are always displayed on the top half, while underlying data (usually in the forms of tables) are displayed in the lower half. The two halves have behaviours independent of each other that allow a user to freely change between different visualizations in the top half or smoothly navigate the underlying data bellow without having to navigate away from their chart of preference.
- Introducing customization in our data tables using extensive filtering options, sticky columns as needed, and data aggregation on demand to allow a more structured approach to how data is displayed on the screen.
- Dashboard pages that allow the user to see a quick overview of their financial universe, before drilling down into specific aspects. Such pages can include anything from an aggregated client/s portfolio page to a list of actionable items that require the user’s attention. Dashboard pages also provide a unique opportunity to display insights from your AI products that help focus your user’s financial direction without having to go digging for the information.
- Theming of the application to allow customization per customer/user. You should never assume that all your users will be satisfied with one universal approach, so some level of customization of your application’s theme should be available. This is especially critical when your application will end up as an extension of an existing client universe, with an established aesthetic.
In the end, the best way to start your GUI design, especially for a data-heavy application, is to know your use-case. It should be clear what problem you are solving and/or what message you want to pass with your design. Once this is settled, you’ll be able to start creating and come up with some great and simple designs. Remember that simplicity and testing are the key to success!
Author: Jason Mantzevelakis, Frontend Developer