Tuesday, 22 November 2016

General UI observations



Hamburger Icon

The hamburger icon was designed by Norm Cox when we was working for Xerox. With the advent of modern smartphones designers were tasked with trying to fit a quantity of content designed for desktops on the relatively small screen of a phone. In almost all cases the hamburger icon was employed to house a hidden navigation menu, like shown below. 



Though the hamburger menu is very useful for allowing content to fit on smaller screens, it has recently undergone a lot of criticism from UI/UX researchers who argue that another solution must be found that doesn't involve the content being hidden. Facebook's mobile app illustrates their point - when the app was first launched, most of the content was hidden within a hamburger icon to allow for plenty of space for the News Feed, etc. A few years later, however, they brought some of the links hidden in the menu and made them main action buttons on the app, and found that the percentage of users interacting with those functions increased considerably. 

You could argue that a good use of the hamburger icon is to house low priority functions within a mobile website or app. A balance between space and interaction should be found. The use of a hamburger icon on a desktop site would appear wholly pointless. 


Accessibility 

Legislation has been passed in many countries that makes it the law for all websites to be accessible to everyone, regardless of any visual or audio impairments. Websites tend to overcome such limitations by including compatibility with systems and software such as screenreaders, high-contrast modes, and magnifiers. 

Breadcrumbs

Breadcrumbs, or a breadcrumb trail, are a feature used in user interfaces to show visual hierarchy and to aid navigation. They're usually found on a website and appear like the example below. 



Screen resolutions 

Designs intended for screens originally would've been designed with a pixel density of 72ppi. With the advent of Apple's Retina displays, and the following industry shift towards high-resolution and ultra-high-resolution displays, digital content is now displayed on screens upward of 300ppi. Digital displays are now as crisp as the printed page, and so content for the digital space must abide by this. The original concern for accessing high-resolution content on the internet was poor internet speeds and the impact they would have on page loading times, but major improvements in broadband speed have been seen in recent years to massively mitigate this issue and accompany the shift to a high-resolution digital world. 

Responsiveness 

Instead of creating two different websites for desktop computers and mobile devices, UI designers and web developers are now opting to create responsive websites. Responsive websites infinitely and automatically scale content according the device which is being used to access it. 



Behance on Desktop



Behance on Vertical Tablet



Behance on Smartphone




App vs Responsiveness

Generally you could argue that unless the software, product or service depends on accessing hardware that would only be accessible through the creation of an app, then a responsive website is a more appropriate product to develop. It ensures that any device with web capability can access it regardless of the OS or platform used, and it saves time, resources and money that would otherwise be spent on creating multiple applications. 

User retention and performance 

50% of web users on average will exit a site if it hasn't loaded in 2.6 seconds. This demonstrates how important well-optimised and fast-loading sites are.


12-column Grid 

The use of a 12-column grid seems totally absurd when you consider that at base level, the vast majority of web pages seem to be 4 or less columns. See Twitter below for reference:

At base level, Twitter employs a 3-column grid

BBC News would appear to use a 4-column grid


However if you were to overlay a 12-column grid over these sites, and the vast majority of other major sites too, you would find that a 12-column grid fits perfectly over the top. This abides by the Modernist print rules. 

No comments:

Post a Comment