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]
No comments:
Post a Comment