User Interface (UI) Design

User Interface (UI) Design

• Creates visual and interactive elements for software or devices, which are the elements users see on a screen; includes planning product function, look, and style
• UI designers focus on aesthetics with colors, typography, images, animations, spacing, and responsive design

Types of User Interfaces (UI)

• Graphical User Interface (GUI) provides a visual display with images, buttons and scrollbars where users can click, select, drag and manipulate objects with a mouse or pointing device, and is more user-friendly than CLI
• Command Line Interface (CLI) is the earliest UI, still in use today, where users activate functions by typing commands that prompt a menu to navigate a file structure or directory, providing an intuitive means of interaction
• Voice User Interface (VUI) allows users to engage with devices using voice commands and it is the core technology behind voice-based virtual assistants such as Amazon's Alexa, Apple's Siri, and Google Assistant
• Touch User Interface involves interaction through a user's fingertip, such as the touch screens found on mobile phones
• Gesture Recognition Interface enables users to interact with hand or body gestures; used in gaming consoles, VR/AR applications, and touchless devices

Principles of User Interface (UI) Design

• Simplicity in UI aims to minimize complexity and cognitive load for users to create intuitive experiences that allow users to focus on their tasks
• Consistency ensures that elements and interactions across different digital product screens and sections are cohesive and predictable, which provides a sense of familiarity, making it easier for users to navigate and understand the interface
• User control provides users the ability to navigate, interact, and customize the interface according to their preferences, empowering and enhancing their sense of ownership and engagement with the digital product
• Feedback with responsive interactions in UI design involves immediate visual or auditory cues when users interact with elements, that ensure they understand the outcome of their actions and feel in control of the interface
• Error prevention and recovery focuses on designing interfaces that minimize user errors and provide clear guidance and solutions when errors occur; involves validation, informative error messages, and intuitive error handling mechanisms to assist users in resolving issues
• Accessibility is a principle in UI design to ensure that digital products are inclusive and usable by individuals with disabilities; designers must consider color contrast, font size, keyboard navigation, and screen reader compatibility
• Clarity focuses on presenting information and content in a clear and easily understandable manner, involving concise and straightforward language, logically organized content, and appropriate typography and visual cues
• Visual hierarchy involves the arrangement of elements on a screen to prioritize their importance and guide users' attention, and helps users understand the structure and organization of information, thereby making it easier to navigate efficiently
• Aesthetics and visual appeal in UI contributes to a positive overall user experience by creating a visually appealing, engaging interface aligned with the brand’s identity, involving the careful selection of colors, typography, imagery, and visual elements
• Scalability and adaptability involves designing interfaces that seamlessly adapt to different screen sizes, resolutions, and orientations, with responsive design to create interfaces across various devices

User Interface (UI) Design Elements

• Includes three major categories of input, output, and helper elements

Input Elements

• Dropdowns allow users to select one option from a list, which “drops down” when activated
• Combo boxes combine a text box and a dropdown, with flexibility for manual input or selection from a set of options, prompted by clicking a dropdown arrow
• Buttons are interactive elements that users click to trigger an action or submit a form; they often have labels indicating the action, such as “Submit” or "Cancel"
• Toggle switches are UI elements that allow users to switch between two states, typically on and off, which provide a visual indication of the current state that can be toggled by clicking or sliding
• Text fields are areas where user can input alphanumeric characters, whereas password fields are designed for confidential information and often hide the entered characters for security
• Date pickers facilitate a date selection from a calendar by clicking on a specific day, month, and year
• Checkboxes are interactive elements allowing users to select or deselect options independently, often used in lists or forms where users can choose multiple items from a set
• Radio buttons presents a set of options where only one option can be selected at a time; when one radio button is selected, any others in the group are automatically deselected
• Confirmation dialogues are pop-up messages to confirm an action or decision before it is executed, that typically ask the user to confirm or cancel to prevent accidental or unwanted actions

Output elements

• Output elements are responsible for showing results against various user inputs, which include alerts, warnings, success and error messages, and are reliant on inputs and various operations

Helper elements

• Helper elements can be further divided into navigational, informational, and containers to move through digital products and get users attention
• Notifications are messages or alerts that appear on a device screen to inform users about important or relevant information, such as updates, reminders or warnings
• Breadcrumbs are navigational elements to show the user’s current location within a website or application, and typically appear as a trail of links at the top of a page, indicating the path back to the main or home page
• Icons are graphical symbols or small images used to represent objects, actions, or concepts; used to help users quickly understand and navigate interfaces in menus, toolbars, and buttons
• Sliders are UI elements that users can select a value from a range by dragging a handle along a track, used for settings like volume control or adjusting numerical values
• Progress bars visually represent the completion status of a task, providing users with a visual indication of how much has been completed
• Tooltips are contextual messages that appear when a user hovers over or clicks on a specific UI element; they provide additional information, explanations about the purpose or functionality of the element, aiding user interaction

User Experience (UX)

• UX refers to a person's feelings when interacting with a product. It focuses on making products easy to use, functional, and enjoyable
• A great UX means users can achieve their goals efficiently and without frustration, otherwise poor UX can cause confusion/frustration, and abandonment

User Experience (UX) Design

• UX design involves design teams to create relevant, and meaningful user experiences throughout acquiring and integrating a product, including aspects of branding, design, usability, and function

The 5 Elements of UX Design

• Strategy is the most abstract. Decisions are made about what objectives the product should be designed to meet, which include the goals that both stakeholders and end users want to meet
• Scope is where all of a product’s features are decided upon, including information UX teams must create a set of functional specifications that identify and describe every product feature
• Structure covers each element of navigation including where in the product each page can be found, interaction design, and information architecture
• Skeleton decides where navigation and functional elements from the previous plane will go on each product page
• Surface includes how the colors and textures employed in the visual design help understand how to navigate through and interact with the site