QR Codes.  We have them as designers when previewing our dashboards locally in Design Studio client, so how can we provide them in usable ways for our users?  I thought about one case to address two (delectably annoying to me) habits I see daily:

Habit 1: Printouts

Many meetings I go to involve print outs, yes even the final days of 2014.  Maybe it’s because we are a paper company, or maybe it’s just a cultural workforce thing, maybe it’s because people take notes on their handouts, or maybe it’s a combination of all these things.  Whatever the case, I see lots of printouts!

Let’s say that you as a business user, are using a Design Studio BI Application, and want to print out your current view and go photocopy 10 copies for your meeting you are heading to…

Habit 2: Screenshot Scrapbooking in PowerPoint

Similar to the printout habit, many times we need to take a static screenshot for a more composite and controlled presentation and so the habit goes that we end up taking the safe way out and making a static artifact out of it.

How can we make this better?

I’m not on a crusade to eliminate printouts or PowerPoint decks.  I’m of an opinion you do not remove habits unless you can replace them with better ones.  I think that QR Codes serve a potential for fingerprinting an artifact in either case mentioned above to allow recipients to track back to the source.  This is somewhat similar to QR Marketing Codes but maybe a bit more useful in a workplace environment.  Let’s use a very simple DS Application as a starting example:

QR2.png

A simple BI App with a dropdown to filter a dataset.  Of course we know that then for a PPT or Printout is then a static artifact in these 2 cases.  So how can it improve?  First thing comes to mind are hyperlinks, which may work for PPT decks.  But even with PPTs, in our organization I often see people just print those off so links end up being unclickable or unusable when the titles are not the URLs themselves.

QR3.JPG

I have to admit I have a few annoyances here:

  1. The wrong chart (this is my fault after taking screenshots) – Sales and quantity should be on a dual axis chart, not on the same axis.  Surely this can simply be corrected by firing the report author and hiring one with some common sense!  🙂   But more often the case is that this is the chart that was built based on half-baked requirements to begin with so let’s pretend this is what the business asked for and move on.
  2. No values are shown on the chart.  This is one of those things where the end-user uses what they have (an interactive BI Application/Dashboard) and takes a static screen-grab of it and does who-knows-what with it.
  3. And again as mentioned, of course it gets more silly as even when a well-intentioned link is placed, a printout negates that.

So while I don’t think PPT Scrapbooking will ever be eradicated, we can at least offer some usability alternatives that might sometimes survive a printout or deck.

QR4.png

Here we have the sample BI App at design time with a QR Code component highlighted.  The JavaScript library I used was jQuery.qrcode · generate QR codes dynamically · larsjung.de That link will explain some of the QRCode parameters better than I can, but some of the relevant ones are:


    • QR Code Text – The text to QR Encode.  Can be plain text or a URL, how it is handled depends on your QR Code Reader (I prefer Red Laser)
    • Render Mode – You can select DIV, Canvas, or Image methods.  They all nearly work the same in my experience.
    • Only show on printouts – This parameter I added and is enabled as on above, so that at runtime the user does not see the QR Code however by leveraging CSS @media query rules, is put on a printout.  Depending on if the user is PPT Scrapbooking or printing out, on or off each have their place.
    • Fill Color – Color of the code (the black part)
    • Background Color – Background Color of the code (the white part)


Most of these properties I also have the corresponding BIAL setter/getter methods exposed for as well.  For example, I also have some BIAL to build a URL that will change the QR Code at runtime:

/wp-content/uploads/2014/12/qr5_609417.png

Basically, in this example, as the Year selection is changed, it builds the corresponding BI Mobile OpenDoc URL that could be use to trigger an opening in the BI Mobile app.  (http://help.sap.com/businessobject/product_guides/boexir4/en/433_mobiOS_admin_en.pdf section 2.9.3 for details on the URL formation).  I also added a text box just to show for illustration purposes the resulting URL as we toggle between Years.  This of course doesn’t have to be a BI Mobile link, it could be whatever makes sense, but in this case I wanted to show the potential use.  So here we are at runtime:


/wp-content/uploads/2014/12/qr6_609419.png

And let’s print it out:

qr7.JPG

Hey, nobody said QR Codes were pretty, right?  🙂   But maybe with a little bit of formatting and creativity, they can be incorporated in a cool way like some of the QR Marketing campaigns have tried in the past.  (Maybe.)

/wp-content/uploads/2014/12/qr8_609422.png

I’m not a graphics artist, but you could place a visual cue and add some coloring or roundness to this QRCode (the Corner Radius parameter) to give it some illusion of a personality.  And of course you’d probably want to make it something you could dismiss and hide with a button somewhere in a real-life example.

So while there’s nothing to prevent a PowerPoint scrapbooker from just cropping out QR Codes, maybe in certain scenarios may choose to scrapbook them in as well, as to retain working links that are more resilient to their own printout issues?

So whatever the form, using your favorite QR reader, let’s see the proof that it works!  Again, I used Red Laser as it honors the sapbi:// registered URL.  QRReader, a different app, did not (but at least showed the URL) – Your mileage may vary depending on your QR Reader.

qr9.PNG

Answering Yes this launches the BI Mobile App (with the dummy placeholder values but we can see it should launch the correct app):

qr10.PNG

Source Code and Downloading

The Source Code can be found here: SCN Design Studio SDK Development Community in our new SCN Development Community repository.  In a day or so, the deployable version for non-SDKers will be packaged and made available as well.

Questions/Comments/Feedback/Ideas always welcomed!

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply