UX/GUI details for Investors

All these suggestions are for your investor account GUI and may not apply to your CFD account GUI.

  • Fibonacci’s: when I draw a Fibonacci line on a chart (using candle-bar presentation), I’m unable to put the Fibonacci edge at the bottom of a chart. I have to work around by changing the zoom and the chart’s period. Sometimes it works, sometimes it doesn’t. You can easily fix this problem by adding a padded zone between the lowest candle in the chart and the vertical scrollbar of the chart.

Your main GUI is charting oriented, in a sense that a user always sees a chart, with one single exception: when I click on the search instrument search box, the searchbox expands and the search GUI goes full-screen (in a sense that it covers all your layout widgets). The user is then able to go back to your standard layout view (chart, watchlist (left), positions (bottom) and other details(right)) by either clicking on the upper left back arrow or ‘esc’ key.

I would like to see the previously stated behavior also for your open positions (bottom) widget (with an additional ‘full-screen’ button near the config button). This should be called ‘Portfolio’ and should take into account the following insights:

  • The investor portfolio tends to be larger than the trader open positions (in average). A full-screen view of the investor’s portfolio is a critical tool regarding position management (balancing).
  • You should consider some coherence in your naming: there is an open positions button, but then instead of a close position, you label it a sell (when hovering the open position listview). This was initially confusing because I thought that I was opening a sell position, but then remembered that you actually separate all CFD’s in two distinct accounts (which is not a bad thing).
  • I would rather see a close and buy (instead of buy more) button when hovering the open position listview. Buy in blue (as it is currently) and sell (close) in red or orange (check the color with your GUI style designer expert).
  • The blurring effect, when hovering opens positions is nice but counter-producent, as the common user tends to put the mouse over the instrument name to easily reference the remaining of the line (that is highlighted in grey- well done)- The blurring is actually frustrating as you are disrupting all GUI style guidelines because your web app does not behaves as expected. This means that I have to select the upper instrument in order to read the full line (all columns) of the instrument immediately bellow.
  • Now regarding the column selection: since brokers are commonly trending to fractional shares (as is your case), the amount of owned shares isn’t so important as it was in the past. By that I mean that as an investor, I like to see how much money I have invested in a given stock (instead of the number of shares). So I would suggest that you add/adjust the columns of the ‘portfolio’ (called Open Positions) listview as follows:
    • ‘Invested’ (new column)– The amount of money that I have (initially) invested in a stock.
    • ‘Ticker’ (new column) – ticker of the stock.
    • ‘Portfolio %’ (new column) – weight (in %) in my portfolio for each stock.
    • ‘Avg. Open’ – instead of ‘price’ (because the investor commonly opens new positions in preferred stocks).
    • ‘Value’ instead of ‘market value’;
    • P/L() instead of ‘result’ – with as an example for the base currency of the account (which can be $, € or £).
    • P/L(%) instead of ‘result (%)’

I would suggest that you keep your ‘open’ (buy) and ‘close’ buttons fixed (inline) as a fixed column at the right of each listview item (instead of hovering buttons in the middle). Keep my previous color suggestions in mind.

There is no behavior when I double-click an open position. When double clicking an open position (as an investor) I would like to ‘drill down’ on my positions, meaning that I would like to see all my opened positions for a given stock in the same listview format as the ‘portfolio’ listview and with the same columns I have in the portfolio listview in order to reduce cognitive friction with the following adaptations:

* ‘Open Price’ instead of ‘Avg. Open’
* Only a red/orange ‘close’ button (rightmost fixed column) instead of both ‘buy’ and ‘close’ (sell) buttons. (or something near to what you have in the CFD account GUI – keeping overall coherence in buttons)

This allows the investor to explicitly choose which positions he wants to close. You can then open your close position dialog window and proceed from here with the same behavior as the remainder of the webapp. With this behavior you may suppress your small ‘position history’ dialog window as it would be of no use anymore. This view should have the same back button you have in the search instrument view (and same ‘esc’ key behavior to go back to the portfolio view). This is an important issue because it impacts on position rebalancing of a given stock.

Right button click on a position: I would suggest that you suppress your small details dialog window, as it contains the same information as in the rightmost details widget. Instead of showing the details dialog, just expand the rightmost detail widget (of not already expanded).

When (single) clicking on an open position the detail widget on the right should updated itself as per the selected stock.

Keep coherence on the ‘close’ (sell) and buy buttons in the detail widget.

When closing a position, scale the slider (in the close dialog window), as there is no point in allowing more positions than the one’s owned by an investor.

When opening a position I would like to have an alternate input method, for amount of money instead of amount of shares (remember that an investor wants to ‘invest’ an amount of money in a stock instead of amount of shares as previously explained). The open position dialog should then compute the amount of shares as per the value of investment, adjusting the investment value to the nearest lower value that the user has set (based on the nearest amount of shares).

Rightmost GUI widget buttons: I would move the ‘videos’ button (which is a help button) to the last (bottom) place because after frequent use (in the long run) of your webapp the ‘news & analysis’, ‘calendar’ and ‘Notifications’ buttons will become more important than the ‘video’ button.

About your (instrument) upper tabs: Limiting the tabs at 9 is frustrating, because many times I need to have more than 9 instruments open. I must close one tab to open a new 9th one. I understand that this limitation is set because of the 3X3 chart gridview. I would suggest not to limit the number of tabs, and when opening the 3X3 gridview, you display the 9 first ones giving more flexibility to the user.

Buy buttons: You have enough buy buttons, namely:

  • In the chart widget
  • In the details widget
  • In the open positions listview widget.

You should evaluate if your generic buy button (on the left side of the position header columns) is really used by your userbase. I don’t see it why someone should use that buy button to blindly open a position upon a search. It is better to have no button than one that is not being used. But this is debatable and depends on user usage.

Future considerations (add to backlog):

Comparison in charts: You have no comparison option in your superb charting widget.

As an investor, it is particularly important to compare a stock performance against major market indices. When considering a compare option in your chart be sure that you include non-tradable (as they are CFDs) items for all market indices as these are widely used by investors.

I recall that these suggestions are for your investor GUI and may not be appropriate for your trader (CFD) GUI as I didn’t not analyze it thoroughly.

I have not analyzed your mobile app as I only use it as an overwatch tool, but I believe that it delivers what is expected from a mobile app standpoint of view.