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.

Supervisor meeting with Simone 15/04/15

Today was the first meeting with Simone in about 4 weeks, as she was off for Easter for 2 weeks and prior to that I missed our last meeting because I had to go home.  I had sent her the draft sections of my dissertation which she had read some of.  The good news is, she is happy with most of what I have written (woohoo!) despite the fact that I am very over the word limit and I am not even finished drafting!  She gave me some notes on what she has read so far and we have another meeting on Friday to go over the rest of what she has read.  I had planned to blitz on and get the rest of the Contextual Review finished up today, but I was ill after lunch so it has not been a hugely productive afternoon.

In other news, a friend of mine who took the survey and viewed the prototype very kindly lent me his old iPad 3 to test on in order to help the design process, which was very kind and will hopefully help this last bit of cleaning up the UI as I will be able to see how it actually looks and feels, rather than relying on InvisionApp's simulator.  Speaking of this, Simone had a look through the prototype and voiced some opinions/concerns over navigation.  Once I am done with the current dissertation writing and editing, I am going to go in and change what needs changed/adapted.  This includes a re-ordering of some sections - we decided that exercises for mindfulness should be an option on the home page so that users would have a point of stickiness to return to the app again and again.  As you can see below, there is no direct route to this from the homepage on the current build.  It was also decided that the pale background would be the one to go for, as neither journalistic evidence nor the survey results established a definitive preference.  I wanted to give users the option to switch between a dark and light colour scheme, but Simone urged me to keep my workload to the essentials given that hand in is in almost 11 days (EEK).

Screen grab of "What Is Mindfulness?" page

We also discussed the idea of having users tap on buttons saying "Got it!" "Okay" etc as this will prompt them to read the text content and also make them feel like they are achieving goals, which directly relates to the application of flow theory in interactive design.  This is something I have written about previously and has emerged as something quite important to both practical and theoretical work, as well as being a help to the user experience design (and I need a lot of that!)

Exercises screens updated

I have updated all the exercise screens to have modal windows, so they look nice and concise now!

Section screens where users start for exercises.  As before, the illustrations are tapped on, opening up the modal windows.

Meditation

 Ice Cube Exercise

Compared to earlier screens: 

Body scan

Compared to older screens: 

Raisin Exercise

Compared to older screens: 

Survey results

Responses to survey questions (abbreviated):

1. "The content of the illustrations…helped me to understand the subject matter on each page:

•  32 respondents agreed
• 1 reponded was unsure

2.  Open ended question

3. "The amount of illustration on each page is:"

• 32 respondents said enough to help understand the subject matter
• 1 respondent said not enough to help understand the subject matter

4. "The amount of text on each page is:"

• 32 respondents said enough to help understand the subject matter
• 1 respondent said not enough to help understand the subject matter

5. "The style of illustration works well with the typeface used:"

• 30 respondents agreed
• 3 respondents were unsure

6.  Open ended question

7.  "The combination of image-text helps me to understand the subject matter of each page:"

• 32 respondents agreed
• 1 respondent was unsure

8. "I find that reading the text on screen is:"

• 32 respondents said easy
• 1 respondent said quite difficult

9.  Open ended question

10.  Open ended question

My survey results are in!  In total I got 33 respondents, which is a decent enough number to get data from.  The survey was posted alongside the prototype on my Facebook page, and shared by some of my friends who were able to garner a slightly larger audience.   Mostly, I got the results I had hoped for, affirming that the relationship between the image and the text was evident and that the text was legible.  A notable result, however, was that  a chunk of people felt that the text left them needing to know more.  Unfortunately I didn't think ahead and ask for examples of which pages needed elaboration, so I was not able to find out the specific pages this could be improved on.  Whoops!

One of the other issues with the questionnaire which only occurred to me later was that the prototype had 60 viewable screens, so my methods of controlling what the respondents viewed was not good as they all might have gone different routes and stayed in the app for differing amounts of time.  There is no way to know whether everyone spent 5 minutes or 50 seconds exploring the app, which again was an oversight of mine.  That being said, most people gave answers which indicated that they had had a proper look through the build. 

I also got a lot of informal feedback from Facebook friends who took the survey, some of whom viewed the prototype on an iPad and were able to report back on the user experience in general.  I didn't have an iPad at the time of building the prototype, as I had to be at home for a week, so getting others' feedback was very valuable.   General comments were that the breadcrumb navigation system was very unclear and did not feel intuitive to navigate, so I will need to go back and review how the app can be navigated not using that.  

One respondent suggested implementing iPad gestures.  The good news is that I have discovered InvisionApp actually do swipe gestures, which opens up a possible range of interactions that iPad and tablet users will intuitively know already.   This may remove the need for some buttons, like the back button.

People also pointed out that the Home screen confused them and it felt more like a "Start" screen, so that will be changed.  One person mentioned that they expected the blue text to be a hyperlink, while others appeared not to notice and said it helped highlight the important information for them.  I will try out other colours and see if I can find another which works in the colour scheme, or alternatively underline any text that does link to another screen to make it apparent that it is a URL (since they are commonly underlined).  

I have previously mentioned that I am unsure whether or not to keep the back button in the interface.  One person mentioned they expected the back button to take them back to the root of the subsection, which is something I had not thought of and may be a use for it instead of a browser-style back button which simply takes them to the previous page.

The comments in the survey were also very insightful into the content of the illustrations.  Most people agreed that they were easy to understand, however some pointed out that some of the images, for example the head split open to reveal an exclamation point, did not connote mindfulness to them.  One useful piece of feedback I got was that the head of the character was much larger than the body, which was only fitting for the brain and mind-related sections of the app.  It's a very good point I never thought of before - if the illustrations demonstrate a body scan, for example, it doesn't make sense to emphasise the head instead! 

All of the feedback will inform the next bit of iteration for the app.  I hope to test it on an iPad soon after I have implemented gestures and changed the necessary parts of the user interface.

Published survey questions

Here are the survey questions that were answered after looking at the prototype by respondents.

They have been edited a bit from my last post on surveys as I had to include question 10, about the preference for dark or light backgrounds.   The survey was arguably more about how well the information could be understood than the image-text relationships but I definitely got a good enough range of answers to give me the sort of information I am looking for!

I began with illustration - was there enough?  Did it help them understand?  Illustrations are at the centre of every page so it was important to address them first.  I got some great feedback in Question 2 on what some people thought of the content of the illustrations which I can link back to semiotic theory.  

I wanted to understand how respondents felt about the text and typeface in relation to the illustration.  Had I succeeded in choosing a typeface that was both legible and could be matched visually with the illustrations?  Finding out if the text helped clarify the image is also important to evaluate the relationship from a semiotic standpoint.

Questions 8 and 9 were important from a legibility point of view - people need to be able to read the text clearly.  If the text isn't legible to everyone, I'll need to make changes.  Question 10 I have discussed before - dark and light backgrounds seem to divide opinions so any definitive survey pointers will help me decide which one to go forward with.

Prototype build is ready for the survey!

The app build on Invision is finally ready to be viewed as part of my questionnaire for my dissertation.  I did as much as I could of a walk through in the video above, hopefully you will be able to see that despite the grainy quality of the video (thanks YouTube).  There isn't much point in putting a prototype link up on here, because the prototype will change very soon and the app might look different to how it does here.

At this point, users can browse through by tapping on the icons or using the breadcrumbs to take them to different sections of the app if they wish.  The numbers in each subsection can also be used to progress through each bit.  In some places there is also a forward button to do this.  I hope to get feedback from respondents about whether or nota forward button is useful, because the numbers in the top right hand corner are already understood in web navigation to be a way of moving forward (for example in online clothes stores) so the forward button might be redundant. 

One thing I'm not so sure about at the moment is the accordion menu.  Unfortunately, the nature of touch screen navigation does not afford a hover or rollover state, which means that the menu has to appear on another screen for now.  It is possible that I can make a whole body of separate screens with accordion menus on each, but for right now that is a lot of work and I need to focus on other things. 

In the app I included some pages with dark backgrounds, so that respondents can say which they prefer ,and if any underlying general preference can be identified (since an online search drew no conclusions).   This means that whatever approach I choose, it can be backed up by the survey results and hopefully my dilemma will be solved! 

In the next post I will write about the survey questions I went for in the end, since it changed a bit from the last post I wrote about them.  

Testing on the iPad!

Since I am at home this week, I was able to borrow my brother's iPad and test out the first few pages I uploaded to the InVision Build.  The pictures did not come out a fantastic quality, but hopefully next time I will have access to a better camera in a brighter room, on an iPad which doesn't have weird screen damage in the corner! I got my brother to test it informally and give me some thoughts.   He found the text easy to read and could understand the diagrams well enough, which is a good start.  One thing he did have an issue with was the UI along the top, as it interfered with the iPad's own UI, which is something I'll fix.

Overall, however, I feel that the pages shown here looked good on screen (not that you can tell!).   None of the colours were so bright that they vibrated, which was a worry I had with the bright blue used on the dark text boxes.  I think I am going to shrink the back and forward buttons as they look a little clunky due to their size.