CT - UI and UX

• UI - User Interface, something designed to allow users to interact with machines and software; aesthetics, format/layout
• UX - User Experience, considers how the user interacts with a product to achieve a goal; accessibility
• User - The person or group of people who will use the product or service
• Utility - How well the product solves the user’s problem, and whether it has all the features the user needs
• Usability - The user-friendliness of the design: is it easy to understand how the product works? Can the user achieve their goals efficiently? Is the design pleasant to look at?
• Constraint - Anything that might stop you from moving forward with a particular idea. E.g., not having the necessary tools, skills, or time
• Dark Patterns - UI that are deliberately designed to trick users
• Design Criteria - The specific goals a design must achieve to be successful
• Design Thinking - A set of techniques and processes for creative problem solving
• User Story - Short description of what the user will do with a product or service
• Wireframe - A basic, 2D representation of a web page, app interface, or product layout -> can have arrows, labels, and notes to describe how it looks or works
• Landing Page/Screen - The first page of a website or mobile app, tells the user what the app does and get them to enter it
• Low-Fidelity Design - Low tech way of producing a design prototype
• Prototype - A rough or partial version of a solution idea that can be shown to users for feedback
• User Flow - Steps or path a user takes to complete a task -> in wireframes, the user flow is shown as arrows that connect input controls and screens, its purpose is to determine early in the UX design how intuitive a design is
• Input Controls - Interactive parts of an interface that allow a user to input data, they include:

  • Buttons
  • Radio Buttons
  • Checkboxes
  • Select Lists
  • Text Fields
  • Sliders
  • Toggles
  • Switches
  • Calendar Pop-Ups
  • Drawing Canvas
  • Voice Recording and Recognition
• Profile Screens include:

  • Username
  • Profile Picture/Avatar
  • Bio/Information about user
  • Specific app data about user such as player level
  • Menus to change settings or edit user profile
  • Menus to organise other app content

  User generated content such as photos and videos
• Quantitative Feedback - Any data that can be reduced to a set of numbers and counted. E.g., how many people use the app each day?
• Qualitative Feedback - Answers questions like “what?”, “why?”, and “how?”, cannot be easily counted. E.g., what features are missing from the app?
• A UI is made of different elements, including:

  • Input controls
  • Navigation elements
  • Information/content, like text, images, videos, sounds, and other multimedia
• Layout Conventions include:

  • Header, body, and footer
  • Grid
  • Columns and rows
• Layout Design Principles include:

  • White space - making sure not to overcrowd screen
  • Visual hierarchy - making the most important elements large, placing them in a central part of the design, or using colour to highlight them
  • Proximity making sure to place similar elements close to each other
  • Consistency using the same layout and elements throughout the design

  Reading gravity - users read left to right, top to bottom
• Style Guide - A set of visual rules to help UI designers keep the same look/feel across all company products, it typically contains:

  • Brand logo
  • Colours (swatches and hex codes)
  • Fonts
• Low Contrast Colours - UI elements blend into the background, making them difficult to see
• High Contrast - Text, icons, and other elements are easy to read and understand for all users
• Iconography Conventions include:

  • Making sense
  • Simple
  • One colour
  • Text label
  • Recognisable
  • Consistent size and style
• Typography: The art of selecting and styling characters to make them more readable and appealing, includes any text elements used in the UI
• Data Collection Methods include:

  • Bluetooth device receives data wirelessly from nearby devices
  • Sensors smart watches can measure heart rate
  • Phone GPS - finds location
  • Device mic records voices and sounds

  Tablet camera, gyroscope, accelerometer - VR
• Typeface: Collection of letters, numbers, and symbols that share a common design
• Baseline: The invisible line on which most characters rest
• X-Height: The height of lowercase letters (excluding ascenders and descenders). It’s a key factor in perceiving font size
• Cap-Height: The height of uppercase letters
• Serifs: Small decorative strokes at the ends of letterforms

  • Often association with tradition, readability in print, and formality
  • E.g., old-style, transitional, slab, hairline serifs
• Ascenders: Portions of lowercase letters that extend above the x-height (e.g., b, h, d)
• Descenders: Portions of lowercase letters that extend below the baseline (e.g., g, p, y)