Screen - Icons

As in all apps, the navigation of the app is one of the most important features.
My app is divided into 6 sections - quiz / profile / dictionary / political parties / news / statistics. To begin with I was going to have one recurring button on all screens which would take you back to the home screen from whatever page you were on, however I decided that having the option to go to and from any page of the app without having to go back to the home screen would make navigation easier.


Initially I was going to include flat illustrations in my app as a way of navigating. Flat illustration is the most popular style used in interface design.

It first found popularity in Microsoft systems under a new design called Metro - the style is still used in Windows products today e.g. in Windows 8. Apple also adopted the style in their iOS operating systems, where all app icons on the home screen of an iPhone are flat illustrations.

For my research into user interfaces I looked at the app QuizUp. There are many different topics on the app and all have their own individual illustration. Whilst I did not need to create as many illustrations as this for my app I like the style of the icons and could've either created mine in the style of QuizUp or leant more towards the traditional flat vector illustrations.

However, I decided that as there was a lot of text in my app (in quiz questions etc), I would focus on having a type based app would be better instead of mixing the 2 styles. In this way I could keep it consistent. Instead of mixing the styles, I decided instead to create icons for the navigation - taking inspiration from my earlier sketches for the illustrations.

After deciding on my general design for the icons (first row below), I experimented with enclosing these icons in circles and squares as well as blocking in sections. However I felt the icons worked well as they were, as stand alone line icons.

Below shows the icons in use on my app pages.

While there are 6 sections to the app, there are only 5 icons shown at any one time, with the icon for the page you are on missing as you do not need to navigate to that page. The icon for the section on which you are currently on swaps with the icon for the next page you tap on, meaning the row of icons changes each time. The order of the row follows the order of the home screen though.

I chose to make a question mark for the quiz, a standard head and shoulders for the profile, a book for the dictionary, balloons for political parties, a world icon for the news (one that is used widely in news), and a bar chart for the statistics page. I experimented with using a pie chart for this but as I already had a circular world icon I thought repeating the shape would look odd, especially in the order the list is in. The political party icon is my favourite as the balloons add the element of fun. This was the best way I thought of representing this section.