Context: Fintech and UX
Asking for a designer’s input on how to clean up a financial interface involving heavy amounts of market data feels like a throwback to the early days of an airplane cockpit design. You have an interface that is almost filled entirely with indicators, levers and gauges, with identical switches and knobs jammed in between them. Oh, and by the way, flipping the wrong switch could potentially mean your demise. In professions that demand large amounts of real-time information, how does one allow for the reduction of visual noise so that the crucial information can shine through? What happens if something that was previously considered noise is now the signal? Is there room for clarity of information?
Enter the world of financial technology and financial charting. Due to the nature of the industry, the availability of financial information allows for nearly limitless possibilities on building out functionality. Looking for a stock on the NYSE between 3M and 130M in market cap, holds a P/E ratio between 7.2 and 54.4, and has experienced a 52w price change between 1% and 3%? Want to display it on a chart that adjusts for splits but NOT dividends or bonuses? Do you want another chart adjacent to it that displays a different interval? How about an eight-pronged Fibonacci pitchfork and a VWAP indicator? This can all be done with the availability of financial data and technical analysis tools, and it’s a lot for any single company to handle.
Now enter the role of the UI/UX designer in the post-2010 world. Smartphones are taking up residence in our pockets and user experience (UX) is adopted as a necessity in software development. The trends in mobile application development dictate that information will be more compartmentalized going forward, in hopes that more mobile-friendly responsive solutions will be implemented. User research is key and feedback is more critically assessed. Users can now be advocated for and their best interests are reflected in the user interfaces (UI) that UI/UX designers help create. Whatever the user wants, they get…right? Not quite.
The Tragedy of the (UX) Commons
The ugliest truth of UX is that if users could have everything they want, applications would appear overly complex and difficult to use. This presents a particularly cumbersome problem in trading platforms. It’s the interface equivalent of the Tragedy of the Commons where every individuals’ needs are met, the population inevitably suffers.
For example, the above scenario involves a small subset of interface solutions that involve so many sliders, switches, and UI elements that it can lead to clutter and confusion. Even when placing a single new piece into the interface puzzle, all other pieces must be shifted. Before you know it, you have a thousand-piece puzzle with limited table space. This is not to suggest that feature requests are ludicrous to take on, but each individual request must be taken through a design process to avoid the interface mistakes that plagued the past.
Clutter was the way of the past and, unfortunately, it’s bleeding into the future. If you look at the popular trading terminals that hold their roots in the ‘90s and early ‘00s, it’s not hard to see that many old-school UI conventions have been grandfathered in by the old guard. This is understandable, given that anyone who was trading in the ‘90s is very unlikely to switch to a more stripped-down and attractive alternative in the future. Some companies attempt to condense the complex functions as best they can into toolbars and drawers. However, without limiting the scope of that functionality, users will find themselves bounded on all sides by toolbars packed with ambiguous icons. Watermarks, pop-ups, advertisements, and un-asked-for additions to the chart provide another layer of noise for users to parse and clear away. It’s not enough that the chart is already busy with flashing red and green numbers, a continuously populating graph, and trend lines, but now the user has to clean up a mess that the application gave them out of the box.
The goal of designing financial charting platforms is to allow users to focus on the task at hand and to avoid any distractions. If a trader loses money because of poor interface design, the chances of him or her scrapping the tool for a new one is high. UI/UX designers need to pave the simplest road toward buying and selling, and not distract users with bells and whistles.
The Paradox of Choice
In the past, veteran users of trading products attributed the “power” of software to having a myriad of functions available at their fingertips. For new traders, however, having too many choices can be debilitating. Barry Schwartz’s decade-old TED talk, The Paradox of Choice, discusses the paralyzing nature of an overabundance of choices. When trading software provides too many options, users become bogged down with the opportunity costs of making simple decisions.
If you’ve just opened your first brokerage account and are looking to begin with the basics of technical analysis, an eight-pronged Fibonacci pitchfork could look daunting. You might think, “What am I missing out on by not using a complex tool like this one?” or “This software might be too advanced for me. I’ll stick to the basics.”
Today, trading software doesn’t necessarily have to appear overly technical or crowded with functionality in order to be effective. In the end, users should be able to use complex financial applications with ease. Most would argue that the more complicated the technology, the simpler the design and user interface needs to be.
Adobe® designs its software and conceals its technological power better than most. When viewed outside the box, Adobe’s design giants—Photoshop and Illustrator—provide the user with a basic interface that can be customized and saved to the user’s desired level of complexity. Designers at Adobe realize that there are essential interface elements that must be visible from the outset, such as the tool and layers palettes. Even as the interface gets busier, Photoshop and Illustrator are still manageable since many of the nitty-gritty controls are left under the surface and inside contextual menus. When users realize that there may be more than one way to perform the same action, this does not come off as redundant, but convenient, because Adobe cleverly compartmentalizes each software’s many functions. This keeps users from feeling the paralysis of choice because the interface has a way of leading you down paths that gradually become more complex. This is the spirit of clarity within an interface.
Ahhh…Clarity. And the connection to Charts.
The importance of clarity in financial charting cannot be emphasized enough. UX clarity means many different things in various contexts, but it is not synonymous with simplicity or minimalism. In regards to financial data, we interpret clarity as the degree in which users can absorb relevant pieces of data amidst other data types. In order to help achieve this, it is necessary to incorporate principles of visual hierarchy, limit excessive features, and provide the user room to breathe within the interface (white space). We prefer to think of our HTML5 financial charts as interactive maps—open sandboxes or drawing canvases—which require a considerable amount of chart real estate and clever placement of tools.
Tools and other elements of our charting solution lie outside of the chart, grouped together in small clusters. We use words instead of icons for some tools. Icons, although useful and somewhat delightful, mask the function of tools behind one more level of abstraction. They are employed, however, in the responsive view to account for the shrinking space. Our use of clarity in this small example follows this logic: if you have space to spare, dish out the information directly and eloquently.
With all this said, there needs to be a balance, considering adaptability—adjusting to client needs. For example, if a client feels that icons are more intuitive than words, it is our duty to be flexible and compliant. In the interest of letting clients integrate our charts into their own personal brand, our charts allow for elements to be removed, inserted, and have color options for any aesthetic. This is why we chose to make our charting solution lightweight with the ability to be fully customized and white labeled.
When accommodating for smaller spaces, financial widgets provide the level of clarity needed to complement the chart’s surroundings. Widgets thrive on principles of minimalism because at such small sizes, general shapes and trends of charts are more recognizable and readable than big, granular charts. When applications aren’t displaying charts, widgets provide simple data visualizations and sleek text links. When it comes to smaller bits of information, there’s no need to be flashy or super-stylized; the goal is to get the information across clearly and directly.
Continuing the Pursuit of Clarity
We’re working to make overcomplicated charting interfaces relics of the past. Aside from the flexibility and the impressive nature of HTML5 components, embracing visual clarity in our interface is one way our charts stand out and are chosen by institutional banks, retail brokerages, and others around the globe. Visual clarity aids in the implementation of intuitive charting solutions, from mobile to multi-monitor desktop views. We’re not afraid to push for a cleaner, more lightweight future of charting, and we’ll continue to do so through our design and technology.
See how Fidessa, provider of trading and investing software and services, used ChartIQ’s Charting Library to improve their UX by enhancing their product interface in this case study.
