Week 7 Interactive Design Notes

UI Visual Design Patterns

User Interface Design Patterns alludes to how users are able to navigate throughout a site and how they interact with it. In order to successfully capture these patterns, we need to include factors such as different types of navigation and experiences to the design, as well as incorporating how the websites look pleasing to the users. Presenting the right tools for the users allow them to accomplish their goals are known as a pattern to guide users, incorporating a connection between the user and the experience allows the UI to be helpful and familiar for the individuals who use these sites. The requirement of balance between guidance and design aesthetic is crucial for every interactive designer should consider, if a website looks boring, dull, and uninviting it’ll create the atmosphere of the user to react negative towards the site. However creating a fun experience expands the users curiosity on exploration throughout sites and navigate on their own.

There are a number of visual patterns that a graphic designer must consider when creating their website for users, design patterns are a “Reference point for uses and designers.” Stated by Waterson. Patterns such as: Horizontal Menus, Carousel or Drop-downs help aid the UX to their interactions.

Tabs are known to be extremely common visual patterns, the term “Skeuomorphism” is commonly used in design fields and web design interior designs, tabs is a pattern where it allows users to separate content from each other and placing them in categories in their desire. It creates a clear indication to present data and categorization for users to feel organised when exploring through websites. An example such as searching for multiple recipes for their meal gives variety and choice for the users to interact with.

Drop-down menus is a simple pattern where it allows users to navigate sections of the site. This creates simplicity and saves space for specific content for the users. This organised pattern can be difficult to use as it may conflict with specific hierarchy of menus. The importance of hierarchy in menus represents that some sections can be in a drop down, in comparison to some that don’t belong together that isn’t in the specific topic or area.

Drawer menus provide quick access and spacing for a website, this plays a similar role to a hamburger menu however it is usually placed on the side. Drawer menus also help navigate information and important sections of a site including saving a huge amount of space as it gives users the choice to hide or unhide the section.

Search with dropdown options such as Google or Bing is a huge pattern for web design. This allows users to seek their desires and locates specific section of a website regardless of hierarchy, this is known to be a shortcut and prevents confusion for users who want a direct path to their location.

Big footer is a simplified navigation footer that holds quick access to specific sections such as “Home” returning sites and other information such as email disputes and social medias. These footers are also known to be a shortcut however its limitation towards footers is that it is limited to finding more specific pages.

The home button or link is represented as the standard web design’s starting location for the user, it is also known as the safe zone to locate home information and the starting point of user navigation. This reassures users who are unsure on where to go throughout navigating, are able to locate back to their original state on the home page.

There are many more navigation patterns that help users, all of these functions are able to support and guide users to their goal and our job as graphic designers is to allow them to accomplish that goal.