Week 7 Lecture Notes

To meet the need for quick access to information and an expectation of effortless navigations, patterns in user interfaces have emerged. The purpose of any user interface is to provide the tools necessary for a user to navigate an interactive, ideally doing so while being intuitive and unobtrusive to the overall experience. While the content of a website is what draws the user in initially, the placements, structure and presentation of the interface means the different between those that are left with an inclination to return and those whose relationship to a brand has been soured.

Common Navigational Patterns

While there exists numerous design solutions to the need for easier interface navigation, these are examples of some of the most prominent.

Tabshanging-files-1920437_1280

Tabs within a user interface such as those commonly found on websites are an example of “skeuomorphism”, which is the practice of making design elements, like those within a user interface, mimic or closely represent the look or behaviours of their real-world basis. In this case, the tabs menu of a website has been designed to follow the expectations a user might have when retrieving physical documents within with an actual filing cabinet.

The purpose of a tabs menu is to both categorise several sections of content and provide distinct indication of location for the user within the interface.

Dropdown menus

Where the tabs menu might be limited by the availability of horizontal space, the dropdown menu provides an additional axis for additional navigational options. As a contextual menu normally hidden and obscured from view until called upon by the user, the dropdown menu is useful for hierarchically ordering navigational buttons and offering an increased specificity of navigation. It lacks however the ability to signify user location within the interactive due to its contextual functionality which leaves it better utilised as a means of navigating sub-categories of a larger section.

Search Bar with Dropdown

searchbar_dribbble

Where the hierarchy created through dropdown menus may obscure information to the point where it becomes counter-intuitive to use, a designer can opt instead for a dynamic dropdown menu that provides the option to search within a category relevant to the interactive. Through this, a designer can reduce the input required from the user to reach their destination and present them with a much more streamlined navigational experience.

Big footer

A big footer found at the bottom of a webpage forgoes the layered hierarchy of the aforementioned menus in favour of a set of navigational options that can be quickly accessed to navigate specific sections or functions of the website that are frequently utilised.

Home

It has become common practice to implement a home button in some capacity as to give users a consistent means of returning to the websites starting point. While this may be in the form of a labelled “Home” button, often instead, designers will bestow this functionality upon the website’s logo which should be found consistently in the same location throughout the navigational experience.

Breadcrumbs

Dolphin_barra_indirizzi

Breadcrumbs are a navigational option that allow users to easily identify their location within the layered hierarchy of an interactive. Whereas a menu serves primarily as a navigational tool and a signifier of location secondly, the breadcrumb menu exists to convey website structure and the user’s position within it. Its ordered, ascending format gives users a means of returning to previous sections of the site without having to first navigate to the beginning. This also provides the added benefit of signalling website structure to users who may have arrived on a page other than home through an external source.

Carousel

f57925585b69a96f9b077b7ef672578f.png

For a more visually oriented means of displaying web page content, the carousel exists as a slideshow of content, that can automatically flip through key pages or be manually navigated through. A carousel menu entices the user by limiting the amount of displayed content while hinting at further articles with buttons to access further headlines in close proximity.

Final thoughts

The experience a user has when first being exposed to an interactive can leave a lasting impression, and that feeling can mean the difference between a customer that returns, feeling that their needs as a participant have been fully realised and met, or one that is simply annoyed by the poor experience a lacking user interface has provided and hindered them with. The reputation of one’s brand is dependent on the association a customer has with the experience they receive, as such it’s vital for a design to adopt interface techniques that are instantly recognisable and immediately responsive to user needs so to not detract from the core content.

References
Counselling. (2016). Filing cabinet [Photograph]. Retrieved from https://pixabay.com/en/hanging-files-filing-cabinet-1920437/
KDE. (2009). Breadcrumb in Dolphin file manager [Screenshot]. Retrieved from https://en.wikipedia.org/wiki/Breadcrumb_(navigation)#/media/File:Dolphin_barra_indirizzi.png
Miller, B. (2013). Search bar with dropdown [Screenshot]. Retrieved from https://dribbble.com/shots/1202059-Search-bar-with-dropdown
Strong, D. (n.d.). Carousel slide [Graphic]. Retrieved from https://s-media-cache-ak0.pinimg.com/originals/f5/79/25/f57925585b69a96f9b077b7ef672578f.png
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s