OUGD504 - Studio Brief 2 - Pictogram Icon Research & Analysis

To define which is the most appropriate option for representing a certain action and or subpage, I first analysed what makes some of the most popular apps iconography so effective. Social media sites were chosen as their usability is by far the most approachable and easy to understand. These attributes are what need to be embedded within my own design to make the house selling and buying process as simple as possible as the current estate agent process can be quite daunting.


Arrows feature in most of the social media interfaces side menus. However, this can cause problems when trying to navigate to a page quickly. Arrows also function similar to a hamburger menu which vary in popularity depending on the age of the demographic. It is estimated that the use of a hamburger menu drastically drops usage with the older generation who may not have encountered it before. This could be problematic for my app as the majority of the target audience will be over the age of 20.

Some other positives and negatives are listed below and sourced from the website http://numiko.com/blog/pros-and-cons-hamburger-menu

Hamburger menu pros

The hamburger menu initially appeared on mobile devices, where space was at a premium and a large menu was required for a website with a lot of pages. Since then we have seen the emergence of responsive design, with a single website catering for all browsers and devices. Because of this, many user interface designers have adopted a ‘mobile first’ approach to keep the interface clean and simple, working across all devices. The idea was that if a site worked well on mobile then it would work even better on desktop where space and control is improved. Some designers, therefore, view maintaining a sense of consistency across browsers as a pro.

My second pro is around how clean and uncluttered a hamburger can make your global menu and header. Displaying a lot of links can sometimes create an untidy header; hiding all this behind a piece of functionality will keep your site looking slick and minimal.  

All the kids are using them! This approach is obviously very common and heavily used, meaning users are associating the icon more and more with menus. This is particularly evident with users that have grown up with social media; it’s as if they’ve been wired into automatically looking for a burger menu. We're finding more and more in user testing that it's a 'learnt' interaction that users are gravitating towards naturally. 

Spotify has embraced the hidden menu and they are well known for user testing so must have the data to back this approach up. However, the hamburger is just one of many ways of searching their vast range of music as they embrace a number of navigational elements.

And my final pro? It's cool. Making things move and animate on a website is playful and engaging, right? Which leads me onto…

Hamburger menu cons

They may be playful, but is there anything more frustrating on a website than looking for content without a visible and clear means of navigation? The kids might be down with the hamburger, but for those users who haven’t grown up with technology, they require a little more guidance and handholding.

So the big con clearly is its poor discoverability, hiding the menu behind a small button means it’s less likely to be found and can be the cause of frustration.

A hamburger requires an action or additional click before a user can use it. This involves added time and effort that a user might not be committed to, especially if it’s just one of many sites they’re visiting in a session. The fewer clicks you make to a piece of functionality, usually the more usable and intuitive. This theory has also been tested, which indicated that hamburgers were likely to be clicked 20 percent less than a traditional open nav.

The positioning of hamburgers in the top left-hand area on mobile screens can lead to poor usability as it's often the furthest away spot for anyone right-handed and forces users to reach across the screen to access the menu.  

For sites that have only a small number of global categories, hiding them in a drop-down menu doesn’t make sense. One example that is guilty of this is T-Mobile. They have placed all their services and offerings within a drop-down menu labelled 'Shop', which actually only contains 5 links. These links could easily be visible and displayed horizontally across the top. 

The typeface on all of the apps criticised seems consistent throughout, sans serif and clean, it is by far the most legible and approachable route to take.

My Wireframe Sketches Shared by the Design Page 'Wireflow'

Simple buttons feature at the bottom of each app which navigate through the different pages. As suggested by Adrian Shaughnessy, every page of an interface must be navigate able via any another page. This is important to keep the interface as user friendly as possible.

Gestures are one other consideration which not many of the apps use, this is due to the hidden nature of gestures and that they must be learnt before being utilised. This can be confusing for first time users and may put them off using the app altogether. One way of possibly utilising gestures would be by installing them into the software along with the use of arrows, this way both can be used and it would be down to the users personal presence, giving them more customisation options and therefore becoming more user friendly. It could also be toggled on and off in the user settings.

Simplicity within the pictograms seems to be a common reoccurrence across all applications. This is due to the small scale of the icons, people with bad eye sight must be considered within the interface and therefore the icons cannot be too complex.