On the importance of self-discipline

Update on the previously mentioned to-do list:

1. concept document
2. Task scenarios  Now at version 3 to reflect the decision to present all of the content on one long page.
3. Business Model Canvas
4. General characteristics for user groups - I went a bit more in-depth and produced a user characteristics list for the primary user group of health professionals - direct link to the Google doc
5. [Tentative plan] create a UML diagram - I am not going to do this, as it is primarily a tool to communicate with developers and as I am UXer and developer here I think that it is more important for me to crack on with the development (although if I had been more self-disciplined and followed a UML I probably could have avoided the feature creep outlined below).
6. An paper online prototype – in the end this was a prototype version of the actual site. Delivered to Dr. Theo Fotis on the 12th of December.

Adding polling aka feature creep 16/12 - 24/12

In my last post I mentioned that I had decided to add a poll as I felt that some further interaction might be needed. I now realise that really a bit of a superfluous feature and upon reflection I have spent too much time on it.

What I can take from it, is that I learned a lot about JSON and PHP in the process. This activity was really the textbook definition of feature creep or scope creepA handy definition from wikipedia just in case you need it: https://en.wikipedia.org/wiki/Scope_creep. Here is a consolidated account of what I did and what I found out in the process. I thought about using the fantastic Google charts tools. I could not, however figure out how to feed data into the chart, based on clicks of the options and then also how to store that information. Here is an image of a mock-up that I made during that particular phase.

[caption id=“attachment_265” align=“alignnone” width=“840”]

Initially, prior to the radio buttons, I was just using buttons to visualise the poll options. It looks nifty, alas it had no functionality whatsoever.[/caption]

Then I thought about creating a custom Google form skin as the front-end for a Google chart. There was some documentation on this (https://github.com/heaversm/google-custom-form) and I referred to the excellent documentation from Google as well, but it wasn’t the right thing. Then as I use PollEverywhere, a web application for polling, in my day-job I thought that using their API might be a good way to go. Especially as their poll visualisation is very nice. I must highlight at this point that I wanted to avoid using an iFrame and have a solution that was integrated with the site. This is largely due to the fact that the iFrame content would almost certainly be blocked on NHS Trust computers (again this knowledge is based on my professional experience). The PollEverywhere API highlighted the use of JSON (Javascript Object Notation) for the configuration of polls. However, I have to admit that their documentation was a little beyond my own knowledge and I felt unsure of where to start. I asked Marcus for his advice on the 16th of December and I also found a PHP AJAX poll tutorial on the W3Schools. Normally I’m not a huge fan of the w3schools tutorials, but this seemed like the perfect solution. I was able to build the poll, but the issue with it is that it is that it stored its values in a standard text file and this is a very insecure method. Marcus advised that I look at writing the values to a JSON file via the PHP and then pulling said values through html for the poll visualisation.

So I decided to see if I could adapt the script to read from and write to a JSON file instead. Easier said than done as the syntax from PHP to JSON confused me a bit. Marcus did a bit of troubleshooting on it too and this was very helpful to get on the right track. I finally decided that it was time to join StackOverflow and start asking and answering questions, here is the question that I asked: http://stackoverflow.com/questions/41301335/json-newbie-permanently-saving-values-to-json-between-browser-reloads . The community were great and I got a lot closer to a solution. However, echoing data back via html in the php file proved too tricky and issue to surmount. I could get the one option to display, but I couldn’t pull the previous results to display. This was immensely frustrating, to be so close and yet missing at the final hurdle.

[caption id=“attachment_267” align=“alignnone” width=“499”]

Animated GIF showing the issue where I could only display current data not pull the existing data from the JSON. The values update in the JSON but the html based on echoing the PHP does not.[/caption]

It was also really hard to debug the issues as a small change could take a few re-runs (despite hard reload and clear-cache reloads) to actually manifest and break it all. Then I stopped and thought, why am I doing this? Sure, it looks pretty and adds an element of interest, but after working on the user characteristics list, it hit home that I had been the victim of my own self-inflicted feature creep. The end users have very limited time to look at this site and probably wouldn’t have time to contemplate the poll question. Furthermore, the poll question detracts from the content of the site. Finally it introduces additional security considerations and affects the life-span of the code in the site. So I have decided to archive what I did offline and continue from where I left off on the 16th. You live and you learn. I shall now be focusing on an prioritised to-do list and I will deviate from my Trello board no longer.

Added a skip to content link for accessibility

Something that I have had on my list for a while was to add a skip to content link for screen readers and keyboard navigation users. I looked at how a few sites did it and settled on advice from the WebAIM site (http://webaim.org/techniques/css/invisiblecontent/). Although instead of positioning the content off-screen by 1000px I positioned it above with top:-20em. Although the WebAIM site recommends against positioning above due to the fact that this may cause a scroll off-screen, based on testing I have not found this to be the case and as Mozilla use this method (e.g. here: https://developer.mozilla.org/en-US/Firefox/Releases/50#document-main) and I am trying to convert all my units to dynamic values (ems or percentages) - it seemed like the way to go.

References

Heaversm/google-custom-form. (2016, August 5). Retrieved December 24, 2016, from https://github.com/heaversm/google-custom-form Macascot. (2016). JSON Newbie - permanently saving values to JSON between browser reloads. stackoverflow. Retrieved 25 December 2016, from http://stackoverflow.com/questions/41301335/json-newbie-permanently-saving-values-to-json-between-browser-reloads Mozilla Developer Network. (2016a, September 13). Getting started. Retrieved December 24, 2016, from https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started Mozilla Developer Network. (2016b, June 1). HTML forms guide. Retrieved December 24, 2016, from https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms PHP AJAX poll. Retrieved December 24, 2016, from http://www.w3schools.com/php/php_ajax_poll.asp PHP Group. (2001). PHP: File_get_contents - manual. Retrieved December 24, 2016, from http://php.net/manual/en/function.file-get-contents.php Poll everywhere. (2016). Retrieved December 27, 2016, from https://github.com/polleverywhere?page=3 Populating data using server-side code. (2016, January 28). Retrieved December 24, 2016, from https://developers.google.com/chart/interactive/docs/php_example Scope creep (2016). In Wikipedia. Retrieved from https://en.wikipedia.org/wiki/Scope_creep Strawpoll/strawpoll. (2016, June 28). Retrieved December 24, 2016, from https://github.com/strawpoll/strawpoll Task analysis. (2013, September 6). Retrieved December 24, 2016, from https://www.usability.gov/how-to-and-tools/methods/task-analysis.html The poll everywhere API. Retrieved December 24, 2016, from https://api.polleverywhere.com/