Modal windows and navigation changes

As detailed in the post about survey feedback, one of the main issues was with navigation and the user interface.  People were not happy about using breadcrumbs and back buttons to go back to the roots of subsections, so I had to do a lot of distilling down of content.  With the home page (see previous post) re-jigged, I had a starting point to figure out how on earth I was going to do so.  There were so many subsections of subsections, how could I sort it?  Then I remembered my brief foray into using modal windows back in February, and realised I had my answer.  If each subsection page could appear in a pop-up window, there would be no delving into another area of the app.  Users could simply view a sequence of mondal windows on each topic while remaining in the same main subsection - all they had to do to return to a main page was close the modal window.

I tried modal windows on the "Anxiety" section first:



Tapping on the first illustration opens up this modal window:

Looking at the old screens in comparison to the new modal ones shows that the modal windows help visually tie everything together through the "bounding box" they create.  This adheres to the Getsalt law of proximity, which states that elements in close proximity to each other can be identified as having a relationship of some sort.  Figure-ground contrast is maintained by the paler colour of the modal window, which has a gaussian blur drop shadow applied to it to lift it off the page.  

I also tried adding in a "Got It!" button, which was something I has spoken about with Simone in the week before.  I have been reading a lot of flow theory for interaction design for my dissertation, and one of the ways flow is achieved in interactivity is a measure of progress.  One way I could try to bring this in was to have users pressing an "I understand" button at the end of each page, which would give them access to the next page.  This can also (arguably) re-enforce the understanding of the page content itself, as a button with a phrase which prompts the user to have understood what they read might encourage them to read the text properly and not skim.  

You will see I have made changes to the look of the drop shadows too.  I got sick of the self-made drop shadows and wanted to try something that was seen regularly in user interfaces, which is a generated drop shadow with a blur.  I tried it out and found that it added the depth I was looking for without looking like an extra element on the page.  The softness of the shadows feels less clunky to me than the ones I created myself using the Pathfinder tool! 

Before and after the modal windows

Since I was distilling the navigation down, I realised I could link to relevant exercises at the bottom of some pages.  For example, the anxiety pages refer directly to meditation, so asking the user if they want to try a meditation after immediately reading about how it can help made sense, and opens up another way for the user to reach the meditation page. 

The windows also proved beneficial for the exercises screens, which I had always felt were a bit cluttered.  Below are some before and after of some meditation screens.  You can see how much of an improvement the layout is, especially in the first example!  It's amazing what you see in hindsight...

I am going to go through and add modal windows to all necessary screens now.