ISM 301 Ch10: Human-Computer Interaction Layer Design PDF

Ch10: Human-Computer ISM 301 Interaction Layer Design Interface Design Interface design is the process of defining how a system will interact with external entities (e.g., customers, suppliers, and other systems). User Interface Design: How the users interact with the system and the nature o...

Ch10: Human-Computer ISM 301 Interaction Layer Design Interface Design Interface design is the process of defining how a system will interact with external entities (e.g., customers, suppliers, and other systems). User Interface Design: How the users interact with the system and the nature of inputs and outputs that the system accepts and produces. Command-Line User Graphical User Interface Interface (GUI) Components of GUI Navigation Mechanism Input Mechanism Output Mechanism Navigation Example: Using Canvas Types of Navigation [Drag a file to upload] Languages Menus Direct Manipulation Input Mechanism Example: Writing a discussion post on Canvas Types of Input: Text, Numbers, and Selection Box. Output Mechanism Example: Report of current grades Principles of UI Design Layout ◦ Standard three-box layout: ◦ Navigation (Top) ◦ Main Content (Middle) ◦ Bottom (Status) Content Awareness ◦ Clear indications of correct location and displayed information Principles of UI Design Aesthetics Balance of white space, color, and fonts to maintain readability. User Experience: Ease of learning vs. ease of use: Design considerations differ for novices and experts. Principles of UI Design Consistency: Predictable and familiar layout enhances usability. Minimal User Effort: Limit clicks needed to complete tasks (usually max three). User Interface Design Process Use Scenario Development A use scenario is an outline of the steps that the users perform to accomplish some part of their work. It is one path through an essential use case. Navigation Structure Design The navigation structure defines the basic components of the interface and how they work together to provide functionality to users. A Windows Navigation Diagram (WND) is used to show how all the screens, forms, and reports used by the system are related and how the user moves from one to another. Most systems have several WNDs, one for each major part of the system. A WND diagram models the state changes of the user interface. Sample WND Diagram Stat e Transitio n State can be a window, form, report, or button  Interface Standards Design Interface Standards are the basic design elements that are common across the individual screens, forms, and reports within the system. Interface Metaphors: Use of real-world metaphors to enhance understanding (e.g., shopping cart for e-commerce). Templates for Consistency: A common appearance and structure for screens, forms, and reports. Includes standard placements for navigation, status, and content areas. Icon and Label Design: Use intuitive and familiar icons for frequent actions (e.g., save icon as a diskette). Interface Design Prototyping An interface design prototype is a mock‐up or a simulation of a computer screen, form, or report. Wireframe Design: A picture that resembles the actual user interface Storyboard: Hand-drawn pictures of what screen will look like and how they will flow from one screen to another. Wireframe Diagram UI Prototypes: A prototype that allow users to interact with the system. WND and Wireframe Diagram Navigation Design- Basic Principles The goal of the navigation system is to make the system as simple as possible to use. A good navigation component is one the user never really notices. Prevent Mistakes- Prevent the user from making mistakes. ◦ This can be done by appropriate labelling and limiting choices. ◦ Do not show a command that can not be used. ◦ Confirm critical functions. E.g., prompt before deleting a file. Simplify Recovery from Mistakes. Use Consistent Grammar Order ◦ Object-Action Order (more common now)- requires first to choose the object and then the action. E.g., select a text and then copy. ◦ Action-Object Order- requires first to choose the action and then the object. E.g., select highlight action and select text to highlight. Input Design- Basic Principles Simplify and easily capture accurate information for the system. Online vs Batch Processing ◦ Online processing or Transaction processing is when each input item is entered individually, and usually at the same time. Online processing is important for real-time information. E.g., reserving an Airbnb. ◦ Batch Processing- all inputs gathered and then entered the system. E.g., payroll input Capture Data at the Source- It is important to capture the data in electronic format at it’s original source or as close to the original source as possible. Minimize Keystroke ◦ The system should never ask for information that can be obtained in another way. e.g., by retrieving it from a database or by performing a calculation. ◦ A system should not require a user to type information that can be selected from a list; selecting reduces errors and speeds entry. Input Validation Output Design- Basic Principles Present information to the system user so that they can accurately understand it with minimum effort. Understand Report Usage Manage Information Load ◦ Most managers often get too much information. A well-designed report provide all information that is needed not all the information that the system has. Minimize Bias Bias can be unintentional. But analysts needs to be aware that biases can be introduced in many ways. International and Cultural Issues Multilingual Requirement: Global applications support multiple languages. Color: Colors have meanings and culturally significant. Cultural Difference: Analysts may need to account for cultural differences in the users. Hofstede’s cultural dimensions can be relevant to user interface design. THANK YOU End of Chapter