Search code examples
user-interfaceuser-experiencedivide-by-zero

How to display Infinity to users


I'm designing an interface that displays a table to users with marketing spend and conversions on that marketing spend.

The table is something like this:

<table>
  <tr>
    <th>Spend</th>
    <th>Conversions</th>
    <th>Cost per Conversion</th>
  </tr>
  <tr>
    <td>$45.92</td>
    <td>231</td>
    <td>$0.20</td>
  </tr>
  <tr>
    <td>$22.12</td>
    <td>0</td>
    <td>{{?}}</td>
  </tr>
</table>

The table is populated by JavaScript, which calculates the conversion rate dynamically.

When the JS runs into the third row, I end up with the string "Infinity" displaying for the conversion rate due to the divide by zero that happens (22.12/0)

What I'm wondering is, from a user experience perspective, what should I display there? These are users, not mathematicians, so using the Infinity symbol would confuse them and using 0 would portray the incorrect data.


Solution

  • Because your users are business folks wanting to know their advertising conversion rate, and none is available since there were no conversions, I would suggest:

    n/a
    

    By the way, as I see it, you're not giving them conversion rate per se. You're giving them cost per conversion, which should then be displayed in dollars, not a percent sign. That is, your first row should be $0.20 instead of 20%.

    Conversion rate is the number of people that converted (or took action) divided by the number of people that viewed the ad. That would indeed be a percentage.