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. [caption id=“attachment_186” align=“alignnone” width=“840”] Version 1 - the top timeline is shown double-width in order to indicate the movement of the information.[/caption] [caption id=“attachment_187” align=“alignnone” width=“840”] Version 2: this version of the felt too blue - although I did like the way that the anxiety levels traversed the sections linking them together[/caption] [caption id=“attachment_188” align=“alignnone” width=“840”] Version 3: similar idea except this wireframe includes the colourful anxiety levels visualisation under the timeline. This works better as the anxiety levels directly relate the the narrative. If the anxiety levels under the timeline could be animated to appear as the timeline is navigated that would look great. I’ll have to think about how best to do that (CSS3 I think).[/caption] [caption id=“attachment_189” align=“alignnone” width=“840”] Version 4 - this wireframe shows both versions of Anxiety levels (they look more like waves!) overlaid. It is a bit busy.[/caption] The new iteration of the design seemed cleaner and more focused in the sense that any page visitor would be immediately be shown the patient’s story as an interactive narrative. However, this also meant that all my prior work on the smooth scrolling was for naught. I did try to see if I could tweak it to go from left-to-right or rather back and forth, but that was a futile effort. A related attempt at this was to look at transition whether I could build the timeline itself in CSS by creating a
Upon looking at a number of medical websites for journals, professional bodies and organisations including:
- NHS choices (blue/orange/green)
- Nursing and Midwifery Council (dark blue, aquamarine, pink and lavender purple)
- Royal College of Midwives (dark blue, two hues of light blue, white, purple and grey)
- Nursing Times (dark blue, aquamarine and white)
- Nursing Standard (scrubs green, two hues of dark blue, grey and orange for callouts)
- The Lancet (purple, blue, green - a lot of white space)
- Médecins Sans Frontieres (red and black
An outlier with the red and black theme, however this would underline the critical nature of the work they do providing aid in emergency situations.)
- The British Medical Journal (blue and white, orange callouts)
The colour schemes contain a lot of blue and this influenced me to look at some different colour combinations. I used the palletton colour selector web application (http://paletton.com/) to try a few bold colour combinations. I also tried it with some vision simulations (available on the bottom right) to see how the contrast behaved for different types of colour blindness. The swatches below show one of the better combinations I came up with, although it still needs work. [caption id=“attachment_190” align=“alignnone” width=“400”] Paletton colour scheme 1[/caption] The challenge with this medical site is that I feel I need to avoid a number of colours that may evoke negative associations. For example, hues of red might suggest blood and certain hues of yellow should be avoided due to the hospital-yellow association. The blues above seemed a bit dark, so I tried some lighter hues for Wireframe 2, paying attention to the contrast between the text colour and the background colour.
These are resources that I referred to beyond what I have linked to in the content above.
Border-radius. (2016, November 13). Retrieved November 27, 2016, from https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
Titlow, J. P. (2014, February 20). About DuckDuckGo. Retrieved November 19, 2016, from https://duckduckgo.com/about