Changing the UI slightly and new blue backgrounds

I decided to change the background colour of the screens which relate to exercises, classes and class information, after liking the change that I made to the "Find A Class" page.  Someone had commented in my survey that a different colour of background (in this instance it had been a dark background) helped them to identify where in the app they were.  As the exercises are a different kind of content to the general information, I had been thinking for a while if I should act on that.  

The pale blue is also particularly suited to the exercises as it is proven to trigger a calm, serene physiological reaction, which is what the exercises aim to do, after all!

I have also made slight changes to the navigation - to enhance the interactivity further and subsequently foster more of a flow experience within the app, I added a feature where users would tap once to select an icon, which would be highlighted.  Users now progress to the subsection by double tapping - I will have to add this to the page somewhere as an instruction.

The user interface has been shifted slightly upwards to make more space between the breadcrumbs and the modal window.  I hope to implement a function where the breadcrumbs disappear when the user is idle (i.e. not tapping the screen), but the deadline is very soon so I may have to add that as an extra little feature for the showcase (if I am allowed, which I have yet to ask about).

How the blue background looks with the "Body Scan" pages.  I think it lends itself better than the neutral here, and is fitting with the idea of "Headspace" as the backdrop suggests some clear floaty blue  sky.

With the raisin exercise.

Bringing in some breadcrumbs

In tandem with designing the accordion menu, I created the breadcrumbs I had been meaning to do for so long.  It was important to look at other examples first, as I have a large number of pages to reference.

Using the greater than sign was a no-brainer, as the sign itself denotes "leading to" if you remove it from it's mathematic context.  I liked the banner look and was considering it, but after looking at all the content already in place I decided a text-only breadcrumb style was best, to keep negative space.

I knew when I started applying the breadcrumbs that I wanted the "current page" to be in bold, as I had done with the numbers in the top right hand corner.  I felt that the bold on it's own did work, but after trying out a little box with a drop shadow around it, I decided that this gave just enough of a "pop" to the text.  While the breadcrumbs should be low down on the hierarchy list, I felt that highlighting the page was validated as it might help the user to orientate themselves that little bit more.

Example of breadcrumb design as is on the "Body Scan" page.

Accordion menu making

Ahead of some final iterating before putting the app out to a survey, I made an accordion menu layout as discussed with Simone, as well as adding in a style of breadcrumbs I was happy with so that the user would know where they were in the app.

"The purpose of an accordion menu is to manage an overabundance of content through dynamic switching." (Rocheleau, 2015)  For this reason exactly I chose to create one, with links to the core pages.  I considered adding in a fly out menu which would extend these sections in a second sub-meu, but ultimately dismissed this as it is far better suited to a computer's mouse/track pad gestures than a mobile device, which would rely on tapping to navigate.  In addition to this, I checked with the instructional videos on the InvisionApp site and saw that there was no apparent way to create this! Furthermore, when I discussed it with Simone she agreed that it was perhaps not needed.

First, I looked at the web flowchart and decided which were the most important pages for users to refer back to for their search journey.  These will be the main sections of the accordion menu.

Next, I looked at examples of accordion menus which mimicked the iOS style, as well as ones I thought would work stylistically.

Search dropdown by Alexandre Naud

Menu (Rebound) by Nicola Arminelli

Free PSD Accordion Menu by Wassim

I then created a draft of the accordion layout and duplicated it a couple of times to test colour schemes. 

After looking at the ones I felt were well designed, and keeping in mind what Simone said about mimicking Apple's style of user interface, I went for a look that was quite skeumorphic.  This may well change, because it does look a little more 3D than the rest of the page.

I tried out a couple of different fonts, the look of which I felt fit with the mood of the app.  It was a close call between my chosen typeface Arvo, and Armanth, which is seen in the image below. 

Once this was done, I tested how it looks over the page layout. (At the moment I am deciding between dark text on a pale background and grey-white text on a dark background.  Going to detail that more in another post, because there's quite a bit of literature making the case for the readability of both.)  I kept the typefaces and colour scheme consistent.  

Simone suggested that having a contrast between the accordion menu and the main background colour would work for the paler screen as it did in the darkened background (above).  The one I use end of course will be determined by the tone of the background colour.

So at this point, with regards to the menu, all there is to do is for me to implement it in InvisionApp.  I hope to get that started tomorrow as I have an iPad for the day from the Hannah Maclure Centre which I can test on.

Image references:

Armellini, Nicola.  2011.  Menu (Rebound) [online image] Available at: 

https://dribbble.com/shots/320535-Menu-Rebound?list=searches&tag=accordion

[Accessed 25 March 2015]

Naud, Alexandre. Date unknown.  Search dropdown [online image] Available at: http://www.uiparade.com/portfolio/search-dropdown-2/

[Accessed 25 March 2015]

Wassim.  2012.  Free Psd Accordion Menu [online image] Available at: 

https://dribbble.com/shots/663761-Free-Psd-Accordion-Menu?list=searches&tag=accordion_menu

[Accessed 25 March 2015]

Article references:

Rocheleau, Jake.  2015.  Best Practices for Accordion Interfaces.  [online] Available at:

http://webdesignledger.com/web-design-2/best-practices-accordions-in-web-design

[Accessed 25 March 2015]

InvisionApp tutorial (for reference):

http://support.invisionapp.com/hc/en-us/articles/203328329-How-can-I-create-a-drop-down-menu-

Bringing in type to layouts

A couple of weeks ago I began to input information into my page layouts, as most of the brain process illustrations were done and it was time to stop shirking what I felt was "the difficult part".  So far it's been a continually iterative process, which even now is ongoing!

 As I think I mentioned in a previous post, I am toying with the idea of having some images in my survey with serif fonts, and others with sans-serif.  This is because, as I will detail a little bit more in an upcoming post, the whole "sans-serifs are a rule for screens/actually it's OK use serifs" debate seems to still be largely unresolved.  My personal feeling is that I can use a serif font for the body text, however there is supporting literature for both sides of the argument.  Since I shouldn't base a design intended for other people entirely on my own opinion, I hope to gauge some helpful feedback from the survey.

The typeface I used for most of the banner headers here is Bebas Neue, and the body font is Chapparal Pro.   Since Chapparal Pro is a serif, I felt it had a friendlier "tone" to it and that it could complement the style of the illustrations.

In pages that are intended to be modal windows or similar, the illustration was kept centre and annotations usually placed on either side.  In the example above, the essential points of the subject matter are both on the same side of the page, so in cases like this text is placed under the image.  I am attempting to "preserve" space at the bottom, because this app will be viewed on an iPad in a landscape orientate which means that the iOS navigation bar would pop up at the bottom if activated.  Putting content too low on the page would interfere with this.

I was quite into having the boxes at the bottom in a dotted line, but my supervisor pointed out that this meant there were too many dotted lines in the layout and the eye would get a bit confused.  Since the dotted lines are used in a semiotic sense to indicate a link or an idea, it doesn't actually make so much sense to have them as bounding boxes.  I may, however, use the same style of bounding boxes as seen lower down this post, because I feel that they are a good "anchor" for the text.

The examples shown here are what the dotted line could be used for - linking things together that are not physically or explicitly linked as is. 

In some earlier illustrations, I use white dotted lines to outline areas of the brain that are highlighted.  To me this adds a bit of depth so I am planning to keep it.  In later text implementations, I kept the linking line white too - perhaps if I try iterating the images to include this the link between information and text will be a visually embedded a little further.

I was advised to remove the "tab" look as seen above as it didn't suit the navigation, but was happier with the contrast the paler box provided against the text.  This led to me eventually creating bounding boxes for the text in the same value of white (70% opacity).  See this further down the page.

In the example above, I started trying to frame key words and establish a text hierarchy through use of bold font and darker hue of grey.  It was decided that black type was too heavy and stark on the page, so a muted grey would be used instead as there is still adequate contrast against the background.  The words also "float" on the page a little, which may mean that some information gets lost without a shape or backdrop to ground it.  In the image below, I tried to see how a (obviously a bit off-kilter!) bounding box would look.  While a singular box highlights an important piece of information, I don't feel that it guides the eyes in the direction I want them to go, as it is nearest the bottom of the page.

The family tree layout came about from trying to link the illustrations together by something that suggested a connection, rather than a proper line drawing elements together. 

The same layout was applied to the "about this course" section, as seen below.

The how to guides were a little different and took a few attempts to arrange.  Even now I'm going to have to look back and re-shuffle, looking more at Gestalt theory, readability and saccades of the eye (in relation to how long each line of text is).

I tried out different headers when I got to this stage, as I was really sick of the banner look and was wondering if it even fit with the rest of the visuals.  The first change I briefly played with, before deciding against it, was a white and (surprise) dotted line border.  I decided that it didn't really work, as compared to the rest of the rounded shapes it was very sharp and looked out of place.  This could have been solves by using a rounded square, but since this is the same shape as the bounding boxes of text there may have been confusion with visual hierarchy as both header and body text would have had similar "anchors".   As I spoke about in an earlier blog post, the "step 2/3/4" navigation button will not be staying, as it is distracting text on the page and a small list of numbers in the corner would easily display what stage the user is at in the step-by-step process.

This title was an experiment following a tutorial I did during a slump, but I ended up liking the clean look so much I kept it.  The cross-hatching (also part of the tutorial) adds a bit of a crafty look, which could compliment the stitched look that the white dotted lines lend to some of the diagrams further up the page.   This font is Futura Medium in caps, which is one that you can't really go wrong with.

As in some places the body text was placed quite far apart, linking arrows help literally guide the eye from one step to the next.  The shapes of the arrow complement the circular illustration anchor so I feel at the moment there's a nice movement. 

The header is quite stark compared to the body font, but I feel that at the moment it keeps it quite refined and means that the central components are the illustration and the informative text.

Week 10 Supervisor Meeting with Simone

Today's supervisor meeting involved Simone going over my current methodology section with me, which turned out to be a lot more of a making chapter than anything!  At this point, I have written more about research which constitutes as part of a contextual review than a methodology, but I am ok with that as the section as is is at 2000 words - a little too wordy for what is supposed to be the shortest section of the dissertation.  Simone recommended two books - Art Practice as Research and another one about visualising data, the name of which I can't remember.  The writing side of things will come together more when I start working on my literature review next week.

When showing Simone my work, I got some really good feedback and pointers on the design of the navigation system.  At present, I have designed an interface which is pretty basic and relies on little icons on the corner to take the user to either the homepage, the starting point for the brain, or the starting point for the body.  (See this in an upcoming post - I've been keeping my work to myself again, oops!). While talking to her about it we both realised I had no breadcrumbs system in place to tell the user where they were in the whole system, so that's something to fix ASAP.  Simone pointed out that if I was planning to use an Apple device for my showcase, I should follow the way Apple's operating system is designed as many iOS apps mimic Apple's own design.   She showed me the style of menus used both by Apple and apps run on them, such as Spotify and Ebay.  From looking at these I could glean that the accordion style of menu which pops out from a subtle hamburger icon, as well as where the simple navigation buttons were placed.  This is an extra something to iterate for next week.

I showed Simone my work from the past week, explaining how each broader section was sorted into a topic (for example, mindfulness and mental health is currently one page) and how that leads to a new modal window which goes into each section of that page in more depth.  In some places, I thought about having scrolling implemented so that the process pages (the how-to exercises and so on) but after discussing it with Simone and taking into account literature studies in reading about page vs. screen learning, I decided to keep the style consistent and have single-screen windows which centre around an illustration.

An important decision which was made during this meeting was to use a darkened background in a modal window.  Between Simone wanting to consider the element of "switching off" in the design of the app, and supporting literature against the case for on-screen reading as the brightness hurts the eyes, the "dimmed" look is my current choice for the modal windows.

For next week I am aiming to have a more solid idea of questions to ask in my survey - there are 6 weeks left, I need to get it sorted!

Buttons, icons, and menu navigation

My next step for practical work was going to be to work on implementing text into the illustrations already there, but I have realised it's high time to consider the interface elements and how they will affect screen space before I move on to that.   From a few good sources and the excellent function-centred UI Patterns, I have pulled together some examples which, while mostly framed for mobile design, can be borrowed and adapted for horizontal screen layout. 

Circular anchor icons in sidebar

The menus shown here are sleek and concise, which makes me think a similar design would save negative space on-screen if implemented into my design. The navigation bar shown in the image below could be aligned horizontally and placed in a corner; whether this would be top or bottom depends on how the device itself places it's main slide-out navigation bar.

Fig 1

Fig 2

Stand-alone icons

Fig 3

By creating icons which contrast the backdrop, the navigation options are subtle yet clear in function, which is indicated by their form.  This could work well if I have to be economical about screen space in order to keep enough negative space.   The icons shown above have a bit of personality about them too, which is something I would like to bring to my own work.  Much of the same icons are seen again and again in UI for devices, so a custom approach could be a subtle way to bring an authentic feel to a layout.

Accordion menus

Accordion menus are a failsafe as most people are familiar with how to use them and navigate with them.   However, I will have to check how my chosen/given tablet functions - if there is a pull out menu in this direction this approach will run into some problems.  It's possible that I could implement a pull-out menu, provided the device does not have one of it's own which is swiped at the same side. 

Further thinking: Small icons alongside text add an element of semiotics, which could help link dissertation to practical work.

Fig 5

The header sections shown below could be a useful way to split sections of the app down into chunks the user can group together.  Splitting pages into sections such as "Mindfulness and your brain", "Mindfulness and your body" and so on could be a concise way to present themes among pages. 

Fig 6 

Vertical drop down menu

Fig 7

Vertical drop-down menus act in the same way as modal windows - they are not part of the existing page, rather, a break from it where new information - in this case navigation options- can be presented.  Using one could be a viable option as there is also leeway to use breadcrumbs in conjunction with it.  The web flow chart is not overly straightforward, so this style of menu may be beneficial to navigation as the user can see and gauge where they are in the application, as well as where they can go from the current page.

Accordions and anchors for icons

Fig 8

Circular icons are a nice visual anchor in the accordion layout.  The circle's shape suggests a point to tap on as well as, in some cases, concise links to social media or other functions.  

Fig 9

Accordions and icons 

Similar to the above but with less of a visual anchor, accordions with small icons nevertheless still indicate where each tab will take the user.  It would have to be slim in order to give adequate space on my current layout, which makes me think at this point it is not the best method.  

Fig 10

Fig 11

Fig 12

An accordion layout paired with icons visually indicates to the user where each navigation option will lead.  It's clear from the above example where each section is linked to each tab.

Icons

Fig 13

Stand-alone icons with some form of anchoring can be a clear but space-saving way to create visual links to the hotspots for page navigation.  By having icons free-standing, they can be arranged in a non-linear way which complements the feel of the application.  Enough contrast needs to be created for them to stand out if they do not have anchoring to visually "hold them down" on the page. 

Fig 14

Ribbon labels

These are more for aesthetic value than anything else, as by now I think we all know I love a good ribbon!  The effect of depth looks very nice in the image below. 

Fig 15

Breadcrumbs

Breadcrumbs are great as an overview of content, and make quick navigation easy, so are definitely a frontrunner in my mind for the main user interface layout.  The question for me is whether or not it will look at odds with the existing illustration, which remains to be seen.  

Fig 17

Fig 18

References

Fig 1: Simeon. 2014.  App Screens [online] Available at: 

https://dribbble.com/shots/1705636-App-Screens

[Accessed 10 March 2015]

Fig 2: Yarokhovich, Y.  2012.  iPhone App Design [online] Available at: 

https://dribbble.com/shots/696016-iPhone-App-Design-Opened-Menu?list=users&offset=19

[Accessed 10 March 2015]

Fig 3: Perez, J.  2014.  Date app [online] Available at: https://dribbble.com/shots/1713396-Date-app

[Accessed 10 March 2015]

Fig 4:  Leonczuk et al. 2012 Dolny Slask Guide [online] Available at: https://www.behance.net/gallery/Dolny-Slask-Guide/4643875

[Accessed 10 March 2015]

Fig 5: Negele, T. 2012. mused Redesign [online] Available at: https://dribbble.com/bytino?page=3

[Accessed 10 March 2015]

Fig 6: Unknown

Fig 7: Schurdak, M.  2012.  SOV iOS app  [online] Available at: https://www.behance.net/gallery/SOV-iOS-app/5008997

[Accessed 10 March 2015]

Fig 8: Jasinski, M. 2013. iamcreative.pl mobile [online] Available at:

http://awesomeinspiration.net/post/44130898689/iamcreative-pl-mobile

[Accessed 10 March 2015]

Fig 9: Gillis, C.  No name [online] Available at:

http://scoutzie.om/chris-gillis

[Accessed 10 March 2015]

Fig 10: Unknown.  My Place.  Year unknown [online] Available at:

http://awesomeinspiration.net/post/42991770410/my-place

[Accessed 10 March 2015]

Fig 11: Starmatic. Date unknown.  Starmatic [online] Available at:

http://www.knowyourapps.com/reviews/starmatic/

[Accessed 10 March 2015]

Fig 12: Zhukov, N.  2012.  Navigation Bar For App  [online] Available at:

https://dribbble.com/shots/591708-Navigation-Bar-For-App

[Accessed 10 March 2015]

Fig 13: Unknown.  Circle In  [online] Available at: http://awesomeinspiration.net/post/44131880552/circle-in

[Accessed 10 March 2015]

Fig 14: Bastian, N. Date unknown.  Meerli app [online] Available at: 

http://iphone.meer.li/designs/makemoresense-iphone-app

[Accessed 10 March 2015]

Fig 15: No name.  Linux.com [online] Available at: 

http://ui-patterns.com/patterns/AccordionMenu/examples
[Accessed 10 March 2015]

Fig 16: No name.  Affiliates4U [online] Available at:
http://ui-patterns.com/patterns/AccordionMenu/examples
[Accessed 10 March 2015]