Well that was a busy week and this journal entry has been a while in the making.
Sharing what I have learned thus far from building my child theme
Mark Joste from the DMP PG programme invited me to join his project site community.brighton.ac.uk<fn>University of Brighton’s Digital Award winning project</fn> as part of an Accessibility special interest group. Community is based on WordPress, it felt like a good opportunity to share what I learned about the WP Accessibility plugin and the best settings for it’s configuration. Mark is testing it out prior to deployment.
Have a project meeting on Wednesday
I have arranged a meeting with Dr. Fotis who has been away on a research trip. I plan to show him the designs and prototypes thus far and to iron out exactly what will need to go into the patient journey. I also need to find out more about the target audiences for the infographic/site as I don’t know enough to come up with a basic set of characteristics (beyond what I have outlined already in the task scenarios and concept). I am also working on a higher fidelity prototype in Photoshop prior to meeting him. If time allows I may well make the prototype slightly more interactive in Adobe Experience Design or InVision prior to our meeting. All of this feels like jumping ahead a bit, but this is necessary due to the structure of the project. As a general rule I learn by doing, so I have to set myself goals as I go along. You’ll notice that I have dispensed with the paper prototype idea from the concept journal entry; I need to get further ahead than that so that I can actually ‘build’ a web-based project.
I did look at some wireframing tools, such as Balsamiq, Wireframe.cc, Axure<fn>This one is definitely worth a more in-depth look over winter break in preparation for my final project.</fn> and MockFlow. Once again though I found myself returning to my Rhodia dotpad<fn></fn> and Adobe Photoshop for the wireframe and CSS grid planning. It just feels unencumbered and organised both visually and to an extent mathematically. Lucidchart is certainly my tool of choice when it comes to UML diagrams, site maps, flow charts and task lists. Again, if I do decide to create a UML diagram<fn>Another to-do that I set for myself in the concept post.</fn>, I can only do so once I have a better idea of what information to include in the patient journey.
I attended the Brighton Gamification Meetup group on Wednesday and was really inspired by some of the interface ideas that were discussed. Certainly worth bearing in mind in future, particularly The Manager’s Path presented by Vasilis Gkogkidis (from Gamification+), which looks like a fantastic foray into self-tracking and self-betterment. I’ll keep tabs on that as I consider the wearable app that I am looking to scope/design for my final degree project.
Development path this week
I really think that the scrolling function, as discussed in previous posts is good. However, it was clear that the function needed to be refined. Alas, as outlined above the function doesn’t work at all in Internet Explorer 9. I also felt that if I were navigating this site, I may run out of time at some point in the patient story and want to skip to another area of the site, so some sort of navigation always needs to be available. So I started to think about what might be possible. I drew some inspiration from the fix top-bar in the Gamification+ site (not shown in the mobile view of the site): https://gamificationplus.uk/
I started with a fixed position navigation that travelled down the page as you scrolled. This was based on month of the story. However, conceptually I started to have difficulty with dates and months, as it may feel too constricted and also unrealistic (or worse still idealistic) for the audience. I decided that it would be better to structure the timeline aspect around activities that take place in-time; as due to a collection of possibly delaying factors who knows when our fictional patient’s operation will actually take place. The positioning also ran counter to established navigation design patterns and would likely confuse users.
While I was still thinking about months. I also tried placing the months at the top of the page. You will notice that I added mock-up navigation for the future pages on the top-right as well. Although I have shifted my thinking on the items in the navigation – About is the same as the Patient; the patient is a fictional device to explain the project. About should actually be Team as we need to introduce the more about the team and the goals for the project. Devices can stay as-is as this will be used to describe potential device types and physiological measurements/sensors per device.
I kept the next buttons with the top navigation, as you can see from the screenshot below. However, after thinking on it, it really seemed like the next buttons were the most useful. Especially as they could offer more scope for styling later on and they allowed the user to progress through the timeline or steps of the patient story in a sequential way. Also in IE, if these buttons are hidden because the function is unavailable then the page will still have logical navigation based on either scrolling or using the arrow keys.
In the end I liked the next buttons as shown below (at 100% width) and then some kind of floating page navigation on the top-right. I shall have to look at some design patterns and have a think about the best way of doing that.
Then after the first Next button is clicked here is how the next section of the prototype looks (see Nav test 3.5 below). There is a nice amount of area for information.
The next step is to create a CSS grid system to ensure that alignment is accurate (as you can see above the text is not placed correctly). I found this post about grid setup and will refer to it and the Implementing Responsive Design book (Kadlec, 2013).
More timeline examples
I found this timeline by DuckDuckGo and it has completed shifted my thinking in terms of what is possible with a combination a horizontal timeline and a vertical layout site. This could be a really good direction to take with the design. I love the deceivingly simple design and the content is also pleasingly responsive. Having dug into the coding a bit, I love that the timeline itself if actually composed from a series of squares with “border-radius: 100%” in the CSS. No IE9 support and it is CSS3, sitting at just over 93% supported (according to caniuse.com: http://caniuse.com/#search=border-ra). If Dr. Fotis likes this layout then I shall look at whether I can adapt what I have so far to a horizontal layout with targets<fn>It is really hard to tell what DuckDuckGo are doing in terms of the .js I can’t tell which library they are using, if any.</fn>. My only criticism with this timeline is that you want to click on the year bubbles and they do not do anything.
Here are some examples of infographics from the British Medical Journal, which might be helpful:
The BMJ timeline:
Timeline or flow with decisions: http://www.bmj.com/content/350/bmj.h3036/infographic
Vertical timeline infographics – some nice examples here:
Vertical typeface timeline – I like the very clear layout for this one, even if it not the most information-rich example: http://www.minespress.com/timeline-of-10-famous-fonts-infographic/
Horizontal timeline design – I’m not a fan of stock chart designs, but this one is eerily reminiscent of my own design for the anxiety levels – worth mentioning as I am not copying it!: https://www.dreamstime.com/stock-illustration-timeline-infographic-flat-design-template-infographics-growth-image41562210
A journey down the wrong path
Here are a few things that I found along the way.
This is sort of cool, but I am not sure of when/if I would need it (removing, resizing and snapping windows): https://codepen.io/zz85/post/resizing-moving-snapping-windows-with-js-css
Tried to use querySelectorAll but couldn’t get it working correctly:
box-sizing – I just found out more about this which was helpful and spent some time checking out Marcus’ example responsive site:
Marcus’ example: http://itsuite.it.brighton.ac.uk/mw159/demo/responsive/
I realised that I definitely needed a border-box due to everything needing to be inside the box! At close to 98% supported, that isn’t too bad (http://caniuse.com/#search=border-box).
Useful site that I found and believe Marcus also recommended, youmightnotneedsjquery.com:
This is also a useful snippet to keep hold of for later as it could be helpful for calculations. I tried it in the Google Chrome console:
Also I found this, which might be handy to keep for later:
This led me to find out more about window.innerHeight: https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight
I ended up using viewport height (“vh”) for now but it might not be a robust solution at only 82.55% support (at the time of writing). It is CSS3 value and will have some compatibility issues: http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window
Website listing included throughout. Additional sites and books referred to are below.