I recently found myself having to delve into HSBC’s Business Banking online experience. Something I’ve for the most part managed to avoid in recent years (thanks, Monzo!).

I needed to add a new user to the account. Following submitting a form I was given some reference codes to forward to on to the new user. Here’s a screenshot (with the top secret information removed):

The instructions are nice and clear (well they’re not – but that’s not the topic of this post). I need to get these details over to my business partner. The obvious thing to do now is select the text, right-click, copy and paste into Slack. Which I promptly did… and got this:

Business internet banking ID
Registration number
Activation code

XXX
YYY
ZZZ

The text is all there, but it’s been stripped of its context: the relationship between the name and its value. I can figure out how they correlate but once this gets forwarded on (as it’s meant to be), without rearranging the info, there’s bound to be confusion.

Here’s the markup from HSBC’s site. There’s nothing in the HTML to semantically link those pieces of information together. It’s just a bunch of div and p tags thrown together.

<div class="row bibId">
  <div class="col-sm-4 no-padding">
    <p class="ng-binding">Business internet banking ID</p>
    <p class="ng-binding">Registration number</p>
    <p class="ng-binding">Activation code</p>
  </div>

  <div class="col-sm-7">
    <p class="bold ng-binding">XXX</p>
    <p class="bold ng-binding">YYY</p>
    <p class="bold ng-binding">ZZZ</p>
  </div>
</div>

I’m not here to blame the individual developer who built this. But I am left wondering if the organisation and processes that led to this shipping left any thought to how their service fit into a wider experience beyond a user story that likely says “and the information is visible on the screen”. The tools we build don’t sit in a vacuum, isolated from the rest of the world.

On a practical level, how can we solve this? Obviously just rearranging the markup is one way, but I’m a fan of the HTML Description List and its associated elements:

<dl>
  <div class="item">
    <dt>Business internet banking ID</dt>
    <dd>XXX</dd>
  </div>
  <div class="item">
    <dt>Registration number</dt>
    <dd>YYY</dd>
  </div>
  <div class="item">
    <dt>Activation code</dt>
    <dd>ZZZ</dd>
  </div>
</dl>

And when you copy and paste them... well what do you know? 😉

Business internet banking ID
XXX
Registration number
YYY
Activation code
ZZZ

Further Reading -> Definition lists – misused or misunderstood?