May 26, 2022Comments are off for this post.

A Year of Beer

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

NameStyleVolumeBrew DateDrink DateOriginal GravityFinal GravityABV
Kama CitraSession IPA5 gallons01/24/202102/12/20211.050??
Harold is WeizenHefeweizen5 gallons02/28/202103/17/20211.0451.0104.6%
Bourbon Barrel PorterPorter1 gallon03/31/202105/07/20211.0801.0207.9%
LemondropSaison5 gallons04/18/202105/16/20211.0501.0055.9%
Fruit BazookaNew England IPA5 gallons05/30/202106/30/20211.0701.0088.1%
Cream AleCream Ale5 gallons07/05/202108/08/20211.0401.0084.2%
Fruit StandFruited Wheat Beer5 gallons08/22/202109/26/20211.0451.0055.25%
Nut BrownBrown Ale5 gallons09/05/202109/26/20211.0401.0094.1%
Smashing PumpkinAmber Ale5 gallons09/26/202110/26/20211.0461.0094.9%
Dry Irish StoutStout5 gallons11/14/202101/02/20221.0421.0143.7%
Belgian TripelBelgian Ale1 gallon12/29/2021????
Belgian DubbelBelgian Ale5 gallons02/02/202204/18/20221.0601.0067.1%

December 16, 2019Comments are off for this post.

Stock chart UI patterns

This stock is -0.52% for the day, but at first glance the price appears to have significantly dropped.

As an occasional user of the Robinhood mobile app, it always struck me how the stock charts were displayed in a square format and with no y-axis labeling. On one hand, it seemed to be a savvy design choice to take advantage of the available screen real estate, but on the other it seemed to make every stock appear overly volatile due to the exaggerated height of the y-axis and lack of labeling for context.

The design has since been changed to display charts in a more landscape rectangular size, but it got me thinking about design patterns for stock charts. What are the standards? I did a deep dive across 10 financial sites/apps and took stock (!) of the common practices in displaying financial charts.

The criteria

Even though Robinhood was the impetus for this exploration, after some initial research I decided to focus on sites and apps that were built more for casual information consumption rather than investing. This was partially due to laziness — most investing sites/apps require an account to access market information. Here's the general criteria I used to pick the sites to evaluate:

  • Should be primarily used for financial news or general market information
  • Need to be able to look up stocks without an account
  • Must have a website and mobile app
  • Should be highly ranked on Google when searching “Apple stock price”, e.g.

The sites/apps

These are the 10 sites/apps that made the cut:

  • Apple Stocks
  • Google search widget
  • Yahoo Finance
  • Marketwatch
  • WSJ
  • CNN
  • CNBC
  • Bloomberg
  • MSN
  • Investing.com

One minor exception here — Apple's Stocks doesn't have a web experience, so I evaluated the desktop app. Not totally fair when I get into comparing desktop vs mobile consistency, since as a Marzipan app the Stocks desktop app is likely sharing the same codebase as the mobile app and gets a lot of consistency by default.

The patterns

An entire book could be written on the subtle nuances of stock chart design patterns, but these are the high level patterns that stood out as I compared them:

Chart type

There was a clear pattern here, no surprises — all 10 charts I evaluated were line charts with some type of fill. Seven of them were solid fills, and three had a downward gradient fill that transitioned to 0% opaque.

Yahoo's solid chart fill.
Apple's gradient chart fill.

This is likely a purely stylistic design choice, but whether intentional or not I think the gradient fill is functionally better because it helps reinforce that (in most cases) the bottom of the y-axis is not zero and what we're being shown is likely a clipped view depending on the time period and the stock's value.

Chart type options on Yahoo Finance.

It's also worth noting that 4 of the 10 sites/apps offered other chart types on the desktop experience (but defaulted to line charts), I assume to appeal to more advanced investors. Each of the 4 had at least candlestick charts as one of the additional options, and the ones that had more types were typically variations on line and candlestick charts.

Color usage

Every site/app uses color in some way to indicate whether a stock is up or down on the day (most typically, the price change amount and percentage text for the current day is green or red). Surprisingly, only some of them add color treatments to the chart itself to indicate gain/loss over the displayed period of time. Apple, Yahoo, Google, and the Wall Street Journal (on the mobile app only, oddly enough) change the color of the entire line and fill to green or red. I think this is a considerate design decision because regardless of the time period, at a glance it's obvious if the stock is up or down overall. Maybe most sites/apps don't do it because they don't want to cause potential confusion between the color display for gain/loss of the current day vs the selected time period?

On Google search results, the current day is up so green text displays at the top, but when switching the time period to 6 months it's down so the chart is red. Confusing?

Aspect ratio/size

Site/AppAspect Ratio (Desktop)Aspect Ratio (Mobile)
Apple Stocks4:11.5:1
Wall Street Journal3.7:11.8:1
Google Search3.2:12.4:1
CNBC3:11.3:1
MSN3:12:1
Marketwatch2.7:12:1
Bloomberg2.5:12.6:1
CNN2.2:11.8:1
Yahoo Finance2:12:1
Investing.com1.9:11.9:1

February 18, 2019Comments are off for this post.

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!