This post backtracks on the research we did when we were designing our user interfaces to further document our research. It will look at both iPhone and iPad screenshots, however, the elements of design transfer into both.
This app uses a swipe interface, which lends itself to the apps nature of progressing through game levels. This idea could be implemented in our app for selecting different instruments. GarageBand has the same swipe interface when selecting instruments as well, so it is practical for that purpose.
This interface is very basic and uses rectangle buttons, allowing a user to go into the different areas of the app. This is straight to the point and allows quick and easy navigation. We were thinking of using a button based menu to access the different sections of the app, although, the hard edges make it look less sophisticated.
This app is very basic but it is a prime example of a button-based user interface. Each button accesses a different level, which could be taken onboard in our app for the theory/aural training sections.
Music Theory Pro
This app uses an asymmetrical design, combining logos and text with rounded rectangles and circles. It is clearly designed to work with the backdrop image which makes it effective and the use of colour allows the orange icons to stand out. You can tell that, “Ear Training” is the main feature of the app because it has the largest icon and the second strongest text weight (second to the title). This is taken on board with our app as the immediate use of the app can be music creation. The button is the largest and stands out to the eye and all the other features complement it.
Sight reader uses a colourful symmetrical user interface with simple icons. It is very clean and uses a scroll to access the buttons below the fold. For our design, we will try to keep everything on one page (at least for the iPad layout).
Notes & Chords
This app uses a scroll-based design with buttons and sections. The downside to this is that nothing really stands out in comparison to Music Theory Pro. The app shows detail though, as the layout design allows for text description for each section of the app.
This app uses stylised buttons with icons to match the overall design and artistic vision. This makes it inviting for younger users, and the colour contrast between brown and blue/green makes the icons stand out. We have taken this approach in our user interface as we have a contrast between the background and the buttons.
What We Have Learnt From This
Each design fulfils a particular purpose and has their strengths and weaknesses. When learning about design, it is important to look at what there is already available to know how to cater for the users. Hitting users with a very strange user interface could render the app to the trash bin if it does not make functional and aesthetic sense. We chose to pursue the button based design, which also is a wise choice considering we are using Hype to create the wireframe instead of Xcode or other native coding apps.