ChartIQ Blog

Posted on by Eric Barden

3 Ways Google Maps Inspired UI/UX Design for WebTrader


When comparing forex trading and technical analysis tools on the market, one thing stands out - most all forex platforms look and deliver the exact same experience. So what advantage does one tool have over another? The answer is little, if anything.

When we were refining our charting and technical analysis products, we spent several hundred hours researching experiences and front end design. Little did we know that one application that we use quite regularly would be very influential in helping us get through the last mile of our charting design. The king of cartography, aka Google Maps, helped us to design an intuitive UI that would lead to a better UX for all of our clients and their users.

To demonstrate how a mapping or navigation application could inspire technical analysis, charts, and trading tools, let’s look at the things that Google Maps does exceedingly well.




Make the most important information blatantly omnipresent.

There’s no ambiguity to a visitor’s purpose when they go to Google Maps. They want maps! And maps are what they get. Google fills the entire screen with the map, even eschewing borders. As the rest of the page elements load, you can immediately start getting your bearings on the map. Go ahead! Try it out on your phone now, we’ll wait….By limiting barriers and overlays to the map, Google creates a more efficient and immersive experience.

For ChartIQ’s WebTrader for MT4, the chart is our “map”. While there are hundreds of things you can do within WebTrader, it all stems from the chart. We fill as much of the screen as possible with the chart and avoid obstructions like overlays or excessive toolbars. This creates a more immersive and interactive user experience that users love and want to return to again and again.

With the transaction tabs collapsed, WebTrader occupies about 70.7% of the screen (on a large monitor) whereas Google Maps occupies 97.5% of the same screen. The other 29.3% of WebTrader screen real estate is occupied by a quoteboard and transaction summary. Our focus was to clearly make charting the most active and engaging part of WebTrader.




Beauty in clarity. Clarity in beauty.

Do you remember paper maps? Even ignoring the impossibility of refolding them back into their original shape, these maps were bears to comprehend. They tried to be (or had to be) everything to everyone. They showed every seldom traversed country road, park, and tiny lake, making it much more difficult to see the most important information – where you were and where you were going.

Google has put an immense amount of time into researching and testing what to show on the map and in what detail. The result is not only effective and easy-to-read, but the design choices (soft yet distinct colors; white rather than jarring black roads) also provide an aesthetically pleasing experience. They also allow users to design their own themes to customize their mapping experience.

With WebTrader, we’ve also chosen to focus on the beauty that comes from presenting data clearly. ChartIQ’s HTML5 Charting Library (which powers WebTrader), was largely birthed from the notion that financial charting didn’t have to look like it was generated on the screen of a TI-81 calculator. If you’re going to look at charts all day (or even for a few minutes), they should be visually pleasing, not an ode to the power of MS-DOS. The colors were specifically chosen not to distract, but to reduce eye fatigue and keep traders focused on their mission.




Make things feel simple, but still pack a punch.

Google Maps has an ingenious way of tucking away its powerful features without making them inaccessible. Each chart with WebTrader has only a few actionable pieces such as a zoom in/out toggle and a simple toolbar at the top for basic chart customization. A pane to the right of the ChartDock allows easy access to a variety of drawing tools, as well as a button that quickly gathers and docks chart frames if the user wishes to quickly organize his work space.

Despite the limited amount of space used, the chart area is simple and intuitive. A mix of text and icons are easily identifiable and help direct user actions based on its importance related to trading and technical analysis.

Although we’ve only demonstrated the application of these principles for a desktop web browser, we’ve also applied the same thought process for Mobile WebTrader. On mobile devices space becomes limited, so the use of icons and hidden-but-accessible menus needs to be done in an even more concerted and careful manner.

To recap:

  1. Make the most important information blatantly omnipresent.  
  2. Beauty in Clarity. Clarity in Beauty.
  3. Make things feel simple, but still pack a punch.

All of these takeaways lead to one essential aspect, critical to modern forex trading platforms and one that currently only ChartIQ offers to the forex community - Differentiation. ChartIQ’s design succeeds in creating an advantage for the broker. And this makes a difference. It is this differentiation of thoughtful design that accomplishes the goal of making brokerages stand out on an otherwise flat playing field.

As we continue to develop our suite of products, you can expect us to devote the same care and reverence to maximizing visibility and improving usability that Google has made us all accustomed to with its Google Maps product. For our clients, differentiation has become and will continue to be their competitive advantage: Users are attracted, quickly convert, and active users are retained in perpetuity.

Learn more about the advantages of ChartIQ's WebTrader for MT4 platform.