Handout08.docx

**Week\#9 - User Interface Design** +-----------------------------------------------------------------------+ | **Topics** | +=======================================================================+ | - User Interface (UI)...

**Week\#9 - User Interface Design** +-----------------------------------------------------------------------+ | **Topics** | +=======================================================================+ | - User Interface (UI) | | | | - Interface design models | | | | - Design principles | | | | - User Experience (UX) | | | | - Usability Evaluation | | | | - Common UI Design Mistakes | | | | - Challenges in UX/UI design | | | | - UX/UI tools | +-----------------------------------------------------------------------+ **User Interface (UI)** The user interface (UI) is the focal point of a device\'s human-computer interaction and communication. Desktop monitors, mouse, keyboards, and other pointing devices may fall under this category. It also describes how a user interacts with a website or program. The point of interaction between a user and a product is referred to as the user interface. This item might be a web page or a smartphone application. Button, icon, dropdown menu, scrollbar, toggle, slider, screen header, input field, search field, and other UI components are examples of components that enable user interaction with a product. UI design is concerned with how visually appealing and engaging the app is. - Does the button do the action that the user anticipates it to upon click? - Does a text make sense? **User interface types** There are numerous types of user interfaces, including:- - Graphic User Interface (GUI) - Command Line Interface (CLI) - User interface with menus **GUI Characteristics** A graphical user interface (GUI), which is a digital interface, allows a user to interact with graphical elements such as buttons, menus, and icons. A GUI\'s user interface uses images to convey information important to the user as well as potential actions. Today, it\'s hard to picture computers without graphical user interfaces. But before the mouse pointer even existed, there was a time. Let\'s examine how GUIs were created. +-----------------------------------+-----------------------------------+ | **Characteristics of GUI** | | +===================================+===================================+ | **Characteristic** | **Description** | +-----------------------------------+-----------------------------------+ | Windows | On the user\'s screen, many | | | windows allow for the | | | simultaneous display of various | | | pieces of information. | +-----------------------------------+-----------------------------------+ | Icons | Icons can stand for processes | | | (like printer drivers) in | | | addition to files (including | | | folders and apps). | +-----------------------------------+-----------------------------------+ | Menus | Rather than requiring a command | | | language, menus group and | | | organize commands. | | | | | | - Scrolling menus | | | | | | - Hierarchical menus | | | | | | - Walking menus | | | | | | - Associated control panels | +-----------------------------------+-----------------------------------+ | Pointers | A pointing device, such as a | | | mouse, is used to choose commands | | | from a menu or to highlight | | | elements in a window that are of | | | interest. | +-----------------------------------+-----------------------------------+ | Graphics | On the same display, commands can | | | be graphic elements. | +-----------------------------------+-----------------------------------+ - They are simple to use and learn. - Even novice users can easily pick up how to utilize the system. - Between tasks and applications, the user may shift their focus. - With immediate access to the entire screen, quick full-screen interaction is feasible. **Problems** - A GUI does not always make for a nice interface. - Due to bad UI design, many software solutions are never used. - A user may make grave mistakes as a result of a poor user interface. **Command Interfaces** The user types commands into a command language to instruct the system. - Possibly implemented using inexpensive terminals - With compiler approaches, simple to process - Combining commands can result in commands of any complexity. - Simple interfaces that need little typing can be made. - Scripted commands can be used to allow skilled users to interact with the system fast. - Users need to memorize a command language - Not recommended for infrequent or unskilled users. - A system for error detection and repair is necessary. - It must be possible to type (!) **The method of UI design** User interface (UI) design is an iterative process that closely involves users and system designers. The three main steps in this UI design process are as follows:- - **User analysis**. Recognize how users will utilize the system. - **Prototyping a system**. Create several experimental prototypes. - **Interface assessment**. Use people to test out these prototypes. Figure 9.1. UI design process **Models for interface design** Human Computer Interaction (HCI) design uses four distinct models:- - The software design is expressed by the design model. - The profile of the end consumers is described by the user model. (For example, experts versus beginners, cultural background, etc.) - The end users\' conception of the system is known as the user\'s model. - The system image (look and feel plus documentation, etc.) is the system\'s external manifestation.  Figure 9.2. The manifest model of UI design **Principles of User Interface Design** ----------------------------------------- ------------------------------------------------------------------------------------------------------------------------ **Principles** **Description** Feedback Feedback should be given to the user both visually and audibly, preserving two-way communication. User friendly Use words and ideas the user is familiar with. Efficiency Be efficient in your speech, actions, and thoughts. Reduce the number of mouse and keystrokes. Minimal surprise If the operation of a command is known, the user should be able to anticipate the behaviour of similar ones. Consistency Similar operations ought to be initiated in the same manner. The format of commands and menus should be the same, etc. Memory use Lessen the quantity of data that needs to be retained between actions. Reduce the memory workload. Recoverability Permit users to fix their mistakes. \'Soft\' deletes, undo capabilities, confirmation of damaging activities, etc. User instructions Include some kind of context-specific user aid and instruction. **Use of Color Guidelines** The use of color can simplify complex information structures for the user. - Don\'t just convey meaning through color!: Easily misunderstood (because to color blindness or cultural differences\...) - Design in black and white, then add color - To support user tasks, employ color coding: Users can manage color coding by highlighting noteworthy events. - Change the color to indicate a status change. - Avoid using too many colors. - Avoid clashing color combinations and consistently use color coding **Help for Users** When a user needs system information or makes an error, the user guidance system is connected with the user interface to provide assistance includes:-. - System notifications, such as error messages - Users are given with documentation - Online support. - **Use the help system** - There should be several entry points available. - The user should be able to seek assistance from a variety of sources. - Where the user is located should be indicated via the support system. - Facilities for navigation and traversal must be available. - **Message Guidelines for Errors** - Speak to them in their language - Provide a positive piece of advice for overcoming the mistake - Indicate the error\'s negative effects (such as potentially corrupted files). - Provide a visible or aural cue - Make sure the user doesn\'t feel bad! **User Experience (UX)** User experience (UX) design is the process that design teams use to create products that provide customers with meaningful and relevant experiences. In the design of the entire process of acquiring and integrating the product, UX design encompasses elements of function, design, usability, and branding. The term \"user experience\" describes how a user generally interacts with a product. It investigates how people feel, act, react, prefer, and believe both before and after contact with a product. One part of experience design is making software easy to use. Other experiences related to the product, such as the marketing plan, the packaging, and the after-purchase support, are also planned. The provision of solutions that address needs and pain points is the main objective of UX design. After all, nobody will use a product that serves no purpose. The focus of UX design is on a product\'s flow and how each screen is connected to the others. - How straightforward is it for the user to find what they need? - Does the consumer get frustrated when attempting to use the product\'s features? - Do they think the product is challenging? - How long is the onboarding procedure? - **Consideration in UX design** - **Who**: Whether they relate to a task they intend to accomplish with it or to values and views that consumers identify with the ownership and use of the product, - **What**: Discusses a product\'s functionality---what users can do with it? - **Why**: Involves the users\' reasons for adopting a product. - **How**: How functionality is created in an approachable and aesthetically pleasing manner. - **User-Centered Design (UX)** - **What is involved in UX design?** - How simple is the online checkout process, for instance? - Can you grip that vegetable peeler with any strength? - Do you find using your online banking app to manage your finances to be simple? Figure 9.3. UX vs UI **Usability Evaluation** Watch a group of test participants carry out a pre-planned scenario. - Which test participants? - Which instances? - What shall we watch? - How many people will be tested? **User interface assessment** It is important to evaluate a user interface design to see how usable it is. For the majority of systems, full-scale evaluation is both expensive and unfeasible. An interface should ideally be measured against a usability standard. The production of such requirements is uncommon, nevertheless. **Simple methods of evaluation** - Surveys asking for user opinions. - System use is being captured on video, followed by action analysis. - Code instrumentation for gathering data on facility usage and user problems. - The software\'s inclusion of code for online user feedback collection. **UI/UX design effectiveness measurement** In modern world, almost everything can be measured, including design. The indicators that enable you to assess the effectiveness of the UX design include behavioural, attitudinal, and business KPIs. - **Behavioural KPIs**: The best technique to monitor user behaviour is through task-based usability testing. It typically assesses how well users interact with a product in terms of task success, task time, potential roadblocks, and user displeasure. Let\'s talk a little bit about these three parameters. - **Attitudinal KPIs**: We\'ll spend a little more time on attitude-related performance indicators because they\'re more complicated than behavioural ones. The Customer Satisfaction Survey collects information on how satisfied customers are with the product overall. - **Business KPIs:** MRR (monthly recurring revenue), traffic volume, bounce rate, conversion rate, and other metrics. **Usability Attributes** -------------------------- ------------------------------------------------------------------------- **Attribute** **Description** Speed of operation How well does the user\'s work style match the system\'s response? Learnability How long does it take a new user to start using the system effectively? Recoverability How well does the system rebound from user mistakes? Robustness How forgiving of human error is the system? Adaptability How closely is the system bound to a certain type of employment? **Common UI Design Mistakes** - Your UI elements\' pointless consistency - There is no text hierarchy - Negative iconography - Ambiguous forms - Unpredictability of UI Elements - Primary and secondary buttons are identical. - Various Fonts are Used - Put Trends Before Usability - Misused of colors - Unclear and misunderstand word / language **Tips to avoid bad UI design** - We ought to consider ourselves as our customers. This helps you identify the UX components that will appeal to your potential clients the most. - User centeredness should permeate the entire design. To make sure that our design concepts are successfully received and understood by the user, more data analysis and user interface tools are needed. - Seeking feedback **Specialize aspects of user interface design** - **Front-End Development:** involved designing the interactive and visual components of a website or application. These programmers specialize in creating appealing and user-friendly interfaces and are proficient in HTML, CSS, and JavaScript. - **Responsive Web Design:** UI developers can specialize in responsive web design as a result of the rising popularity of mobile devices. They make sure that websites and programs effortlessly adjust to multiple screen sizes and deliver the best possible user experience across a range of devices. - **Web Accessibility:** A UI developer with a focus on web accessibility may make sure that programs and websites are usable by people with impairments. To design inclusive user interfaces, they apply accessibility best practices and adhere to regulations like the WCAG (Web Content Accessibility Guidelines). - **User Experience (UX) Design:** A UI developer can also specialize in UX design, even if UI development concentrates on the visual elements. They work together with UX designers to develop interfaces that offer outstanding user experiences, taking into account elements like usability, information architecture, and user flow. - **Interaction Design:** You can focus on creating and implementing user interactions that are clear and seamless by specializing in interaction design as a UI developer. They make use of methods like micro interactions, animations, and transitions to make the user interface more enjoyable and usable. - **UI Prototyping:** Interactive user interface prototypes can be made by UI developers with prototyping skills. Before final development, they conceptualize and validate design concepts using technologies like Adobe XD, Sketch, or Figma, allowing for quick iteration and feedback. - **Interface testing and quality control**: A UI developer may focus on testing and quality control to make sure that the user interface works as intended on various operating systems, devices, and browsers. They test for usability, verify for cross-browser compatibility, and boost UI efficiency. - **Libraries and UI Frameworks**: An expert in well-known UI frameworks and libraries like React, Angular, or Vue.js is attainable for UI developers. They make use of these technologies to speed up development, boost output, and build solid, scalable user interfaces. - **Data Visualization**: A UI developer with expertise in data visualization can turn challenging data sets into dynamic, aesthetically pleasing charts, graphs, and infographics. When presenting data, they make use of tools like D3.js, Chart.js, or Highcharts to make it interesting and understandable. **Challenges in UX/UI design** The product\'s appearance and feel are the work of UX/UI designers. They are the designers who guarantee the user can engage with the product in a simple, natural, and pleasurable manner. Some of the difficulties UI & UX designers confront are:- - A lack of time - Lack of familiarity with the intended audience - Lack of understanding of what customers want from your product - Not enough people are using the product to collect feedback from them. - The product is difficult for a user to comprehend on their own. - Excessive features that make the software difficult to use and navigate **UX/UI design tools** UI design tools give designers the tools they need to create high-quality prototypes , wireframes, and mockups as well as minimal viable products. They convey a design\'s functionality while serving as a stand-in for its structural components. UX design tools prioritize the user and how they interact with the content. For example, sketch, Figma, and webFlow. Designers can create engaging and aesthetically beautiful digital apps with the use of UI/UX design tools. During the design process, UI/UX design tools are advantageous for the following things:- - User experimentation - Prototyping - Optimization of the visual design **Summary** - The user interface design process entails system prototyping, user study, and prototype evaluation. - The creation of user interfaces should be guided by user interface design principles. - Direct manipulation, menu navigation, form completion, command languages, and verbal communication are various types of interactions. - Trends and approximations of values should be shown via graphical displays. When precision is needed, digital displays are used. - Utilize color consistently and in moderation. - UI evaluation seeks input on ways to enhance interface design and determines whether the interface satisfies usability standards.