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-