Blog

In my last entry I talked about the suggestions that Theo provided from his perspective as a nurse and researcher. They were very helpful, but lead to some rather major layout changes. In particular, the to do: “I will need more space in the carousel/timeline”. This led to what I nicknamed in my GitHub posts as the Weekend of Hell, I am softening this within the context of this journal entry to be the Weekend of Doom.

I knew that all of that work that I did on polls would come in handy at some point. The time arrived, as displaying data was something that seemed important from the beginning, to support the goals for the project. I wanted to support the information about ‘UK smart device ownership’ with some data. Having spent quite a bit of time looking at polling options and trying things out, I felt sure that the the Google Charts api (n.d.) would give me the level of interactivity and customisation required.

This journal entry represents a mammoth effort to add high-quality content to the site. I developed and added the patient story. This was based on a characteristics list which I worked through rather vigorously on the afternoon of the 25th. This is still in handwritten form, so I will link to it as a google doc later on. I have included some key references for that process below. I want to highlight the National Joint Registry (2016) data, which was particularly helpful during the process of defining the patient story. Also the specific images that I used will be cited on the portfolio site (including cc0 works; royalty-free works) as I feel it is always very important to include the provenance of images in any context, but especially when engaging in a thought process based on a fictional patient/nurse interaction.

Update on the previously mentioned to-do list: concept document Task scenarios Now at version 3 to reflect the decision to present all of the content on one long page. Business Model Canvas 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 \[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). 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.

I have been plugging away at the portfolio site with the primary aim of getting a semi-functional prototype version to Dr. Theo Fotis on Monday 12th of December. There is a still a huge amount of stuff to do, fix-up and streamline I will add these tasks to my Trello board. This journal entry provides a rundown of the decisions that I have this week.

This week I completed some major fix-up on my grid. Remember when I thought that it was almost fixed? Well I was wrong. In fact I ended up recalculating the whole thing and basing it on a single column being 65px or 6.5% in width. Happily it is now working exactly as I need it to (Mozilla Developer Network saved the day againhttps://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids#Creating_a_fluid_grid - I am going to up my donation this year).

After a lot of consideration, struggle and annoyance I finally gave in and decided to use a pre-existing tool for the timeline section of my front page. I looked a few different contenders in this final pass. Essentially, I came to the realisation that I would not be able to learn the requisite Javascript in order to build something sophisticated enough from scratch. I did a bit of trying out in this jsFiddle project, but kept running into deadends (this project is in a partially built state - so please do not judge me - the javascript is largely erased by this point): https://jsfiddle.net/43gg6x3v/7/ Initially I found only jQuery examples - but as I have previously stated, I really wanted to work with Vanilla Javascript, due to load times, future proofing the code content. I also feel that it will be more beneficial to my learning to stick to learning Vanilla Javascript (or rather Ecmascript 6) so that I truly get the language prior to becoming too invested in specific frameworks. Also having looked at these two resources: jQuery vs. Javascript gist and then the From jQuery to Javascript: A Reference - vanilla makes much more sense to me.

After starting my initial experiments/prototypes for the portfolio project from a boilerplate I decided that I wanted to build my own responsive CSS grid from scratch. The grid turned out fairly well although there are some very slight issues with the column alignment which I need to sort out. I also still need to add the mobile device break points. I did find it very helpful to make use of the CSS calc() function to actively resize widths in percentages based on window size (calc()., 2016). This is a fantastic function although the support for it isn’t universal yet (82.73 according to caniuse.com). Having said that I did try my grid in Safari to see how it behaved in an unsupported browser and I was pleased with how well it resized.

This post displays iterations of wireframe 2. In this wireframe, I took ideas from wireframes 0 and 1, but removed the next buttons in favour of a timeline at the top of the page. The top section of the page, containing the timeline, is shown as overflow (beyond the width) of the page to indicate the dynamic content. Clicking on the years, and circles on the timeline is intended to swap out the slide content and information in the centre of the timeline section. The arrow buttons on the left and right were also intended to switch between the content slides. These buttons ideally would also be operable via arrow keys on the keyboard.

This post shows the second iteration of the initial wireframe. This version is slightly higher fidelity and is still based on the idea that users would make use of the smooth scroll “next” buttons to transition from section to section. Navigating the information in chronological order.