Reports UI

Published on 6/01/2013

As mentioned previously, part of the reason for developing my diabetic journal application alone was to help give me a better understanding of UI design. I wanted to really sweat the details and use the experience to help improve my rather limited skill set.

But as I’ve found, the tricky part about design is that what works well for you may seem entirely alien to other people. Which is why, last night, I took to Twitter looking for opinions on one of two options for a reports UI element: paginated results, or an infinitely scrolling ticker tape.

Been noodling with this forever, so help me out! Which do you prefer? Paginated results (left), or infinite scrolling? http://cl.ly/image/0z31060g1140 – @nialgiacomelli

The problem

Opinions were fairly mixed. The majority of people liked the cleanliness of the ticker tape approach because it was minimal and wouldn’t occupy much screen space. But I had a few concerns:

  • Discoverability was problematic. Would people know to scroll horizontally for more information?
  • Would the motion feel alien due to the fact that the ticker tape was sitting inside of a vertically scrollable table?
  • Because of the nature of the reports, it was likely that users would view them looking for a specific piece of information. Would they be able to find what they were looking for easily in the ticker tape, or would they become disorientated?

Then there was the paginated results. They were clear, and any information would be easily discoverable. But it seemed almost nonsensical to place them front-and-centre. I would be showing less of the information the user came to see in the vast majority of situations. But on the other hand, the reports provided an overview of the data below, making it a natural fit to have them towards the top of the screen.

My solution

After sleeping on it, I decided that discoverability was an important enough reason to ditch the ticker tape approach altogether. Instead, I decided to use the paginated results but hide the reports by default. This meant that unless the user was specifically looking to view a report, no screen space was spared. To view a report, I hacked up a hybrid of the ‘pull to refresh’ mechanic that acts a bit like a pull down projector screen.

UI preview

By pulling the tableview down below a certain threshold and releasing your drag, the report view will animate into view. You’re then free to flick between it’s various pages and read the data there. If you wish you can continue to scroll down the page, leaving the report visible at the top.

Alternatively, if you’re done reading the report and would like it to get out of your way, you simple have to pull the tableview down again to release it. Like a projector screen, it’ll whip up and hide away.

I’ll be interested to see what testers make of it in the coming weeks.