Week 7 User Interface Design Patterns

Week 7

Lecture Notes

User Interface (UI) design is about more than a designs aesthetic qualities. UI design is about the connection between the user and the experience they encounter when interacting with project, especially relating to first impressions and thoughts.

It is essential to balance aesthetics and effortless interactivity in order to achieve what is considered good UI design.

UI design is closely linked to the User Experience (UX). UX relates to the look, feel and usability of a design. It is vital to test and acknowledge how a user feels about various aspects of using the design.


Figure 1. UX vs UI Diagram. (Unknown 2015)

Common Elements/Patterns

Common elements/patterns are repeated in UI design in order to adhere to a known system of operation and navigation.

Some common navigation patterns include:


Figure 2. Tabs Control (mbanandetoro6  2014)

Tabs are used when content needs to be separated into sections and accessed using a flat navigation structure. Tabs are useful when there are between 2-9 sections included in project content. Tabs allow the user to navigate between content sections easily, and show the user where they are in the content.


Figure 3. Dropdown Menus (Unknown)

Dropdown menus are used when there is a need for the user to navigate to different sections of a project, but space for navigation is limited. Dropdown menus are useful to categorise and sort information/navigation sections and save space.


Figure 4. Drawer Menu (Unknown. 2012)

In a similar fashion to dropdown menus, drawer menus are used to categorise and organise navigation/content links/sections, and save space. They often slide out from the left side of a design and can be hidden or activated by the user.


Figure 5. Search Bar with Drop Down. (King, 2016)

Search bars with drop down menus can be used to allow the user to search content, and also see and interact with most frequently accessed sections within a project. Search bars with drop down menus are useful as they allow for quicker navigation and shorter user paths for the user.


Figure 6. Big Footer Example. (Zennand, 2011)

Big footers can be used as a mean of secondary navigation, containing a large amount of links to primary sections in one place, at the bottom of a page. Contained in the footer can be links to all areas of the project divided into numerous sections.


Aside from displaying a “home” button to allow users to navigate back to the home page of a design, it is common for designs to have an image or splash which works as a home button. Users can click or tap on the home image to be taken back to the home page/section of the design.


Figure 7. Breadcrumbs Navigation (Unknown. 2016)

Breadcrumbs navigation is a useful secondary navigation tool to show a user where they are within the hierarchy of a design. Breadcrumbs show hierarchical information in a subtle way and allow the user to view the path taken to their current page.


Figure 8. Webpage Carousel (Unknown)

Carousels are a useful way to display large amounts of information in a more condensed space. The user can navigate to the section of content they wish to view.


Figure 9. Tags Cloud (Unknown 2009)

Tags are used to contain and display a (usually) large group of links in one place on a page. The tags can display in varying sizes indicating the most popular links/sections, and can be useful for a quick glance at most content and sections available to the user. Tags also allow a user to search for specific terms in order to display content “tagged” with those terms.


Featured Image Tekki (2016) Splash Image. Retrieved from https://www.tekkiwebsolutions.com/uiux-design/
Figure 1 (Unknown) UX vs UI Diagram. Retrieved from http://www.crayondata.com/blog/the-difference-between-ui-and-ux/
Figure 2 Manandetoro (2014) Tabs Control. Retrieved from https://wrapbootstrap.com/theme/tabs-control-tabbed-form-responsive-WB066F8J6
Figure 3 (Unknown) Dropdown Menus. Retrieved from http://designdrizzle.com/25-free-and-amazing-dropdown-menus-in-html5-jquery-and-css3/
Figure 4 Unknown (2012) Drawer Menu. Retrieved from http://stackoverflow.com/questions/12027980/how-can-i-create-a-sliding-drawer-with-menu-items
Figure 5 King., J. (2016) Search Bar. Retrieved from http://www.androidpolice.com/2016/01/12/google-experiments-with-new-options-in-the-android-search-bars-dropdown-menu/
Figure 6 Zennand., T. (2011) Big Footer Examples. Retrieved from http://designwebkit.com/inspiration/website-footers-trends-tips-best-examples/
Figure 7 Unknown (2016) Breadcrumbs. Retrieved from http://www.wpbeginner.com/plugins/how-to-display-breadcrumb-navigation-links-in-wordpress/
Figure 8 (Unknown) Website Carousel. Retrieved from https://webpayload.com/legacy-video-episodes/should-i-use-a-carousel
Figure 9 Unknown (2009) Tags Cloud. Retrieved from http://eng.nihongodecarenavi.jp/eng/howto-tagnavi.html



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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s