ChartIQ Blog

Posted on by Dan Nicolai

Part 2 of 2: Enhancing Clarity through UX Design


The Paradox of Choice

In the past, veteran users of fintech 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 software provides too many options, users become bogged down with the opportunity costs of making simple decisions.



Figure 4:  With so many options, how do you know you’re getting the best product? 


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, 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. 


                                                        Figure 5:  Photoshop’s interface is surprisingly open for how many features and functions it has.


Ahhh…Clarity.  And the connection to Charts.


The importance of clarity in charting cannot be emphasized enough. Clarity means many different things in various contexts, but it is not synonymous with simplicity or minimalism. In regards to fintech 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 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. Notice that 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.


Chartychart.png                                 Figure 6:  ChartIQ’s library demo. Red indicates open chart space for interaction. Note the placement of tools and features.



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. Plus, our lightweight charting solution can be fully customized and white labeled.

When accommodating for smaller spaces, our 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 the big, granular picture. When they 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.


Widget1.png Widget2.png

Figure 7:  ChartIQ widgets convey information in a more minimalist fashion.


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 industry leaders like Nasdaq. Visual clarity aids in the implementation of intuitive charting solutions, from mobile to multi-monitor desktop views.

For experienced individual users looking to chart on-the-go with Technician, or an enterprise business client looking to give their customers a deeper look into the market, our solutions have been built from the ground up with clarity in mind. 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.

Click here for Part 1: The Importance of UX in Financial Applications.