UI design is about providing a user with the right tools to accomplish goals within/throughout the interactive. This is why producing user persona and scenarios are important, to guide the user interface design. User experience (UX) includes the process of personas, user stories, user research, usability testing, wireframes which connects to user interface (UI), layout, visual design and branding. Good UI designs should strive for a balance in aesthetics and effortless interactivity, guiding the user through the experience. User experience is the abstract feeling users get when using the website, it includes the look, feel and usability. The ultimate goal is to make your user have a positive experience. For websites the design team will focus on the UI in order to heighten the UX.
UI design patterns is reoccurring solution that solve common design problems. Common navigation patterns include:
Tabs
- Navigation tabs
- Module tabs
Menus
- Horizontal dropdown menu
- Vertical dropdown menu
- Accordion menu
Jumping in hierarchy
- Shortcut dropdown
- Fat footer
- Home link
- Breadcrumbs
Content
- Carousel
- Event calendar
- Article list
Common Navigation Patterns:
They are a digital version of filing tabs in a filing cabinet. This is an example of skeuomorphism, an interface object that mimic the real-world counterparts. Tabs are used to separate content into sections, which are illustrated as flat navigation structure, which give a clear and visible indication of current location.
Dropdown menus are used as navigation but to save space and to conceal information. You would use this menu for 2-9 sections of content that needs a hierarchy navigation.
Drawer menus (hamburger menu) allows for a quick access.
Search bar with dropdown eliminates confusion and is considered as a shortcut for the hierarchical structure.
Big footer is used to quickly access specific sections or application. It is also should as a shortcut.
Home is the starting location of a website. A website should always have a clickable link/logo that directs back to the home.
Breadcrumbs are used to identify location in the website hierarchy. They take up minimal space.
Content Navigation Patterns:
Carousel are used to browse through items within website. It is used to indicate that there are more than one items.
Amie's Blog 