Friday, 20 February 2015

Working on styles of presenting information

After looking at a lot of information graphics that I felt to be effective, going back to my own work made me think about changes I could make to what I already have.  In particular, I loved the projected illustration approach I saw in some works and wanted to try it out on the brain diagram.


Above is an updated version of an illustration I posted earlier in the week.  I realised the lines needed to be angular and clean rather than slanting, because the diagram is quite busy as is even without the annotation.   I hoped the numbers would help direct the eye but I realised it might be a bit weird if there wasn't a corresponding number next to each bit of data.  This was sorted in further development later on.

(Below) first attempt at a projected image - not a success as you can see.  Having never tried it before it took a couple of tries.  I will have to find a tutorial on how to do it properly using rulers so that I don't repeat the mess below!


Happily, this version turned out slightly better!  I am still in two minds as to whether this is any more effective than the face-on illustration, so I am going to ask friends for feedback to see which they find easier to understand.  I used gradient drop shadows to give each part of the limbic system the look of floating over the diagram, distinguishing them from each other a little more than if the diagram were flat.  


Annotated illustration with numbered sections.  I may have to review this, as the circular dots are quite big so I can't place them over the smaller parts such as the amygdala (no.3) and the thalamus (no.5), but  the use of numbers ties each bit of information with the corresponding part of the diagram.


Modal Windows and Hover Controls

After reading several UI how-to articles, the effectiveness of modal windows was highlighted to me and got me wondering about how I might use them to handle the information above in a different way.   A quick check on the InvisionApp website confirmed that these were easy enough to create (watch the instructional video on modal screens and rollover buttons here).  Following the creative example below, I tried out a couple tests for a modal window, which would in this case be used on a touch screen to have different parts of the limbic system individually highlighted. 



Dark window vs. light window.   Not totally happy with these so iterations might follow, but I think it could be an effective option if the diagrams above turn out to be a bit of an information overload.  


An alternative idea I have been considering is using GIFs to break down the illustrations.  InvisionApp supports the use of GIFs and even has a how-to guide on making them for the application.  If I have time next week (not likely!) I will have a go at creating a gif version of this information.  The potential to break down the information into more chunks through an animation could be really effective.





No comments:

Post a Comment