LECTURE 7: UI Visual Design Patterns

Notes

  • UI design is not just about how the design looks, but is rather about presenting the user with the right tools to accomplish their goals
  • Why user personas and scenarios are important to guide the UI design

User experience (UX)

  • Personas
  • User stories
  • User research
  • Usability Testing

User experience is the abstract feeling people get from using a website

  • Look
    • Credibility
    • Trust
    • Harmony
    • Spirit
  • Feel
    • Joy of use
    • Interaction
    • reaction
  • Usability
    • Functionality
    • Individuality
    • Predictability
User Interface (UI) Design [Image]. (2016, Nov 2). Retrieved from https://www.aytech.ca/blog/ui-design/
User Interface (UI) Design [Image]. (2016, Nov 2). Retrieved from https://www.aytech.ca/blog/ui-design/

Common Navigation Patterns

  • Tabs
    • Extremely common navigation design
    • When your content needs to be divided into sections and gives a clear
    • Flat navigation mode
  • Menus
    • Drop down menus
      • Save space by organising and concealing information
      • Don’t increase usability as they can be difficult to use
      • 2 – 9 sections of content that need a hierarchical navigation structure
    • Drawer Menus/Hamburger Menus
      • Space save
      • Easy access to key menu items at once
    • Search bar with drop down
      • Quick way of search without hierarchy
      • Shortcut to most used item
  • Big footer
  • Mechanism to quickly access areas without the use of the navigation system set at the top
  • Shortcut to most used/common/important areas
  • Home
    • Important to easily link the user to the home page
  • Breadcrumbs
    • When user needs to know their location in the websites hierarchical structure,
    • Easy to understand for users over website
    • Current location in the hierarchy state
  • Carousel
    • Browse through set of items and possibly select one
    • Display a large amount of items but only certain items at once
    • Tease more content
  • Tags
    • Jumping in hierarchy
    • Content
    Nike [Image]. (2019, June 3). Retrieved from https://www.nike.com/au/

    Wireframes

    User Interface (UI)

    The user interface is what users interact with as part of that experience

    • Layout
    • Visual Design
    • Branding

    A great UI design will guide the user through the experience
    Users need to enjoy using the website

    Summary:

    User interface design patterns are important patterns in the user interface of websites that users are familiar with. UI design is not just about how the design looks, but is rather about presenting the user with the right tools to accomplish their goals. User personas and scenarios guide user interface design to avoid any problems or issues that may be problematic in the future. User interface design patterns consist of navigation bars, menus and how the website is presented to the user.

    Reflection:

    Through this lecture pod I learned a great deal of the vast ray of varying UI design patterns and realised that much more research was required to fully understand the differing patterns. I realised the importance of UI design and how to get there through previous lecture pods about UI personas and scenarios, as well as further research. For my project I will be brainstorming UI visual design patterns that will be appropriate in my concept, this also coupled with the previous testing and brainstorming from my user personas and scenarios and develop a well and thought out UI visual design pattern.

    Leave a Reply