MIZAN-TEPI UNIVERSITY

SCHOOL OF COMPUTING AND INFORMATICS

DEPARTMENT OF INFORMATION SYSTEMS

Course: Human Computer Interaction | HCI (InSy3091)

Chapter-6 Design Rules and Implementation Support

April 2023
Tepi, Ethiopia
By Rashid W.@IS 3rd Year
 6.1 Design Rules

 Design rules are guidelines or principles that help ensure effective and aesthetically
pleasing designs across various disciplines, including graphic design, industrial design,
web design, and architecture.
 Design rules in Human-Computer Interaction (HCI) focus on creating user-friendly and
effective interfaces for interactive systems. These rules aim to improve the usability,
accessibility, and overall user experience of digital products and interfaces.
 Here are some key design rules in HCI:
1. Visibility: Make important system elements and functions clearly visible to the users.
2. Feedback: Provide immediate and informative feedback to users after they perform an action.
3. Consistency: Maintain consistency in the design of user interfaces.
4. User control: Give users control over their interactions with the system.
5. Error prevention & handling: Design interfaces that prevent errors or allow users to recover from them
easily.
6. Minimize cognitive load: Reduce the cognitive effort required for users to understand and use the system.
7. Accessibility: Ensure that the interface is accessible to users with disabilities.
8. User research and testing: Conduct user research and usability testing throughout the design process.
9. Efficiency: Design interfaces that allow users to perform tasks quickly and efficiently.
10. Learnability: Create interfaces that are easy to learn and use, particularly for new users.
 Fundamental Design Principles
 Here are fundamental principles that can be applied:
1. Simplicity: Keep designs clean, uncluttered, and free from unnecessary complexity.
2. Balance: Achieve visual equilibrium by distributing elements evenly throughout the
design.
3. Contrast: Utilize contrast to create visual interest and highlight important elements.
4. Hierarchy: Establish a clear visual hierarchy to communicate the relative importance and
organization of different elements within the design.
5. Alignment: Maintain consistent alignment of elements to create a sense of order and
cohesion.
6. Proximity: Group related elements together to establish visual relationships and improve organization.
7. Colour harmony: Choose a coherent colour palette that complements the design's purpose and evokes the
desired mood or emotion.
8. Typography: Select appropriate fonts and typography styles that enhance readability and reflect the design's
tone and purpose.
9. Consistency: Maintain visual consistency throughout the design to create a cohesive and unified experience.
10. User-centered design: Prioritize the needs and preferences of the intended audience or users when designing
products, interfaces, or experiences.
 Principles to Support Usability
 To support usability in design, several principles can be followed to ensure that
interactive systems are user-friendly and efficient. Here are some key principles to
support usability:
 Place the needs, goals, and characteristics of the users at the forefront of the design process.
 Maintain consistency in the design of the interface, both within the system itself and in relation to
established design conventions
 Ensure that system status, available options, and actions are clearly visible and understandable to users.
 Design interfaces that prevent errors or enable users to recover from them gracefully.
 Clear and Familiar Mental Models: Design the system to align with the users' mental models and
expectations.
 Flexibility and Efficiency of Use: Accommodate various user preferences and skill levels by providing
multiple paths to accomplish tasks.
 Simplify complex tasks and information to reduce the cognitive effort required from users.
 Ensure that the interface is accessible to users with disabilities. Follow accessibility guidelines and
standards to make the system usable by individuals with visual, hearing, motor, or cognitive impairments.
 Design interfaces that are easy to learn and use, particularly for new users. Provide clear instructions,
intuitive navigation, and progressive disclosure of information.
 Gather user feedback and conduct usability testing throughout the design process. Incorporate user insights
to refine and improve the system's usability.
 Standards
 Standards play a crucial role in ensuring consistency, interoperability, and quality in various fields. Standards
are established guidelines, specifications, or criteria that define best practices, technical requirements, and
quality benchmarks. Here are some notable standards that are widely used in different industries:
1. International Organization for Standardization (ISO): ISO develops and publishes international standards
across a wide range of industries. Some notable ISO standards include ISO 9001 (quality management systems),
ISO 14001 (environmental management systems), ISO 27001 (information security management systems), and
ISO 45001 (occupational health and safety management systems).
2.International Electrotechnical Commission (IEC): The IEC develops standards for electrical and electronic
technologies. These standards cover areas such as electrical safety, electromagnetic compatibility, energy
efficiency, and renewable energy.
3.International Telecommunication Union (ITU): ITU is a specialized agency of the United Nations that focuses
on information and communication technologies. It develops standards for telecommunications, radio
communication, and information and communication technology (ICT) interoperability.
4.Internet Engineering Task Force (IETF): The IETF is responsible for developing and maintaining Internet
standards. These standards cover protocols, applications, and infrastructure aspects of the Internet, such as the
5.Internet Protocol (IP), Hypertext Transfer Protocol (HTTP), and Simple Mail Transfer Protocol (SMTP).
World Wide Web Consortium (W3C): W3C develops and maintains standards for web technologies, including
HTML, CSS, and accessibility guidelines (WCAG), to ensure compatibility and accessibility of web content.
 Cont…Standards:
6.ASTM International Standards: ASTM International develops and publishes standards
for a wide range of industries, including construction, materials, manufacturing, and more.
These standards ensure quality, safety, and consistency in various products, processes, and
materials.
7.W3C Standards: The World Wide Web Consortium (W3C) develops and maintains
standards for web technologies. These standards include HTML, CSS, XML, and others,
which ensure compatibility, accessibility, and proper functioning of websites and web
applications across different platforms.
8.Web Content Accessibility Guidelines (WCAG): WCAG provides guidelines for making
web content accessible to people with disabilities. It covers various aspects, including web
design, multimedia, navigation, and content presentation, to ensure that websites and web
applications are usable by individuals with diverse abilities.
9.IEEE Standards: The Institute of Electrical and Electronics Engineers (IEEE) develops
numerous standards in areas such as electrical engineering, electronics, telecommunications,
information technology, and more. These standards promote consistency, interoperability, and
best practices in various technological domains.
 Guidelines

 Guidelines provide recommendations and best practices for designing, developing, and implementing
products, services, or processes. They serve as a reference to help professionals and organizations
achieve desired outcomes and ensure quality.
1. User Interface Design Guidelines: These guidelines offer recommendations for designing user-
friendly and intuitive interfaces. They cover aspects such as layout, navigation, typography, color
schemes, and interaction patterns to create effective and visually appealing user interfaces.
2. Branding Guidelines: Branding guidelines provide instructions on maintaining consistent visual
identity and brand representation. They specify guidelines for logo usage, color palette, typography,
tone of voice, and other elements to ensure brand consistency across different applications.
3. Web Accessibility Guidelines: Web accessibility guidelines, such as the Web Content Accessibility
Guidelines (WCAG), provide recommendations for making websites and web applications accessible
to individuals with disabilities. They cover aspects like text alternatives for non-text content, keyboard
accessibility, color contrast, and assistive technology compatibility.
4. Programming Style Guidelines: Programming style guidelines define coding conventions and best
practices for writing clean, readable, and maintainable code. They include guidelines for code
formatting, naming conventions, documentation, error handling, and code structure to promote
consistency and collaboration among developers.
 Cont…Guidelines
5.Data Privacy and Security Guidelines: These guidelines outline practices and measures to protect sensitive
data, ensure user privacy, and prevent security breaches. They cover areas such as data encryption, access control,
data retention policies, secure coding practices, and compliance with relevant regulations (e.g., General Data
Protection Regulation - GDPR).
6.Project Management Guidelines: Project management guidelines provide recommendations for planning,
executing, and controlling projects effectively. They cover areas such as project scope definition, scheduling,
resource allocation, risk management, communication, and stakeholder engagement to ensure successful project
outcomes.
7.Content Creation Guidelines: Content creation guidelines offer recommendations for creating engaging and
effective content across various mediums. They cover writing style, tone, formatting, visual elements, and
optimization techniques to deliver clear and compelling messages to target audiences.
8.Environmental Sustainability Guidelines: These guidelines provide recommendations for organizations to
adopt environmentally sustainable practices. They cover areas such as energy efficiency, waste reduction,
recycling, responsible sourcing, and carbon footprint reduction to minimize environmental impact.
9.Human Resources and Diversity Guidelines: Human resources and diversity guidelines outline best practices
for promoting inclusivity, diversity, and fair employment practices within organizations. They cover areas such as
recruitment, hiring, training, performance evaluation, and creating a positive and inclusive work culture.
10.Social Media Guidelines: These guidelines offer recommendations for using social media platforms
effectively and responsibly. They cover topics such as content creation, engagement with users, community
guidelines, brand representation, and crisis management to maintain a positive online presence.
 Golden Rules and Heuristics

 Golden rules and heuristics are design principles and guidelines that provide practical and
concise advice for creating user-friendly and effective designs. They are derived from
research, best practices, and experience in the field of design.

1. Nielsen's 10 Usability Heuristics: Developed by usability expert Jakob Nielsen, these

heuristics serve as a set of general guidelines for user interface design. They include
principles such as visibility of system status, match between the system and the real world,
user control and freedom, consistency and standards, error prevention, recognition over
recall, flexibility and efficiency of use, aesthetic and minimalist design, help and
documentation, and error recovery.

2 Hick's Law: This heuristic states that the time it takes for a person to make a decision
increases with the number of options available. It suggests that reducing the number of choices
and simplifying decision-making processes can improve usability and user experience.
Nielsen's 10 Usability Heuristics
 Cont…
3.Fitts's Law: This law states that the time required to reach a target with a pointing device
(such as a mouse) is a function of the target's size and distance from the starting point. It
implies that larger targets and shorter distances lead to faster and more accurate interactions.
4.Pareto Principle (80/20 Rule): This principle suggests that roughly 80% of the effects
come from 20% of the causes. In design, it can be applied by focusing efforts on addressing
the most significant issues or prioritizing features based on their impact on user experience.
 Cont…
5.Gestalt Principles: These principles describe how humans perceive and organize visual information. They
include principles such as proximity (elements that are close to each other are perceived as related), similarity
(similar elements are perceived as belonging together), closure (mentally completing incomplete shapes), and
continuity (perceiving continuous patterns or flows).
6.Jakob's Law: Jakob's Law states that users are more comfortable and familiar with designs that adhere to
familiar patterns and conventions. Designing interfaces that align with users' expectations based on their
previous experiences can enhance usability.
7.Miller's Law: This law suggests that the average person can hold only around seven (plus or minus two)
items in their working memory at a time. Designing interfaces with this limitation in mind can help avoid
overwhelming users with excessive information or complex interactions.
8.Principle of Least Astonishment: This principle states that a user interface should behave in a way that
minimizes surprises or unexpected outcomes. Users should be able to predict the system's response based on
their prior knowledge and experience.
9.KISS Principle (Keep It Simple, Stupid): This principle advocates for simplicity and avoiding unnecessary
complexity in design. Simple and straightforward designs are often more intuitive, easier to use, and less prone
to errors.
10.Progressive Disclosure: This principle suggests that complex information or functionality should be
presented gradually, revealing details only when necessary. It helps prevent overwhelming users with too much
information at once and provides a smoother learning curve.
 HCI Patterns
 HCI patterns, also known as interaction patterns or design patterns, are reusable solutions to common design
problems in user interface and interaction design. These patterns capture best practices and established
approaches to address specific user needs and improve the overall user experience. Here are some of HCI
patterns:
1.Navigation Patterns:
 Menu Bar: A horizontal or vertical list of options that provide navigation within an application or website.
 Tabs: A set of labeled tabs that allow users to switch between different sections or views.
 Breadcrumbs: Sequential links that show the user's current location within a website's hierarchy,
facilitating navigation and providing context.
2.Input Patterns:
 Form Design: Guidelines for designing user-friendly and accessible forms, including labeling, input validation,
and error handling.
 Auto-Save: Automatically saving user input or progress to prevent data loss and provide a seamless experience.
 Drag and Drop: Allowing users to interact with objects or elements by dragging them and dropping them into
specific areas.
3.Search Patterns: Search Box: A text input field combined with a button or an icon that enables users to search
for specific content or information.
 Filter and Sort: Providing options to filter and sort search results based on various criteria, improving
findability and relevance.
 Autocomplete: Suggesting search terms or completing user input as they type, enhancing efficiency and
accuracy.
 Cont…HCI Patterns
4.Feedback Patterns:
 Error Messages: Informing users about errors, validation issues, or required fields in a clear and concise
manner.
 Toast Notifications: Non-intrusive messages that appear briefly to provide feedback or alerts without
interrupting the user's workflow.
 Progress Indicators: Visual cues, such as progress bars or spinners, that indicate the completion status of
a task or operation.
5.On boarding Patterns:
 Welcome Tour: Guiding new users through key features and functionality when they first interact with an
application or website.
 User On boarding Checklist: Breaking down the onboarding process into a step-by-step checklist to help
users understand and complete essential tasks.
 Tooltips and Coach marks: Providing contextual information or guidance through small pop-up boxes or
arrows to highlight features or explain functionality.
6. Mobile Patterns:
 Bottom Navigation Bar: Placing primary navigation options at the bottom of the screen for easier reach
and access in mobile interfaces.
 Swipe Gestures: Enabling users to perform actions or navigate by swiping gestures, such as swiping to
delete an item or swiping between screens.
 Pull-to-Refresh: Allowing users to refresh content by pulling down the screen, commonly used in lists or
 Cont…

4. Development: HCI considerations are integrated into the development process to ensure that the software
system is implemented according to the user-centered design. Developers work closely with HCI specialists to
translate design specifications into code, ensuring that the interface is implemented accurately and that user
interactions are implemented as intended.

5. Evaluation and Iteration: HCI evaluation techniques, such as heuristic evaluation and cognitive
walkthroughs, are used to assess the usability and user experience of the software system. Feedback from users,
usability tests, and other evaluation methods help identify areas for improvement. Iterative design cycles based
on evaluation findings allow for refining the software system to better meet user needs and preferences.

6. Documentation and Training: HCI principles guide the creation of user documentation and training
materials. Clear and concise instructions, help guides, and user manuals are developed to assist users in
understanding and effectively using the software system. HCI considerations ensure that the documentation is
user-friendly, accessible, and supports users in achieving their goals.

7. Maintenance and Updates: HCI principles continue to be relevant during the maintenance and update
phases. User feedback, bug reports, and user support interactions are valuable sources of information for
identifying usability issues and making necessary improvements. HCI practices help ensure that the software
system evolves to meet changing user needs and technological advancements.
 6.2 Implementation Support
 Implementation support refers to the assistance, resources, and guidance provided to individuals or
organizations during the process of implementing a new system, software, process, or initiative. It aims to
ensure a smooth and successful transition from planning to execution. Here are some common forms of
implementation support:

1. Documentation and Guides: Providing clear and comprehensive documentation, user manuals, and
implementation guides that outline step-by-step instructions for implementing and using the system or
process. This helps users understand the requirements, setup procedures, and troubleshooting techniques.
2. Training and Workshops: Conducting training sessions or workshops to educate users and stakeholders
about the new system or process. Training can be provided through in-person sessions, online courses, video
tutorials, or interactive modules. It helps users gain the necessary skills and knowledge to effectively use and
manage the implemented solution.
3. Technical Support: Offering technical assistance and troubleshooting services to address any issues or
challenges encountered during implementation. Technical support may be provided through various channels
such as phone, email, chat, or a dedicated support portal. It helps users resolve problems and ensures smooth
operation of the implemented solution.
4. Consultation and Expertise: Providing access to subject matter experts or consultants who can offer
guidance, advice, and expertise throughout the implementation process. These experts can assist with
decision-making, system configuration, customization, and addressing specific challenges or requirements
based on their experience and knowledge.
 Cont…Implementation Support
5.Project Management: Assigning a dedicated project manager or implementation team to oversee and
coordinate the implementation process. The project manager ensures that tasks are completed on time, monitors
progress, manages resources, and communicates with stakeholders. They serve as a central point of contact and
provide support to ensure a successful implementation.
6. Change Management: Supporting individuals and organizations in managing the changes associated with
the implementation. This may include communication plans, change readiness assessments, change impact
analysis, and strategies to address resistance to change. Change management helps stakeholders understand the
benefits, adapt to new processes, and embrace the implemented solution.
7. User Feedback and Iterative Improvements: Collecting feedback from users and stakeholders during and
after implementation to identify areas for improvement and address any usability or functionality issues. This
feedback loop helps in refining the implementation, making necessary adjustments, and ensuring continuous
improvement of the solution.
8.Community and Peer Support: Establishing a community or forum where users can connect, share
experiences, ask questions, and provide support to each other. Peer support platforms foster collaboration,
knowledge sharing, and problem-solving among users, creating a supportive environment during and after
implementation.

 Implementation support is crucial for maximizing the benefits of new systems or processes and ensuring a
successful adoption. It helps users overcome challenges, build confidence, and effectively utilize the
implemented solution, ultimately leading to improved efficiency, productivity, and user satisfaction.
 Elements of Windowing Systems
 Windowing systems are graphical user interface (GUI) frameworks that provide a visual environment for
users to interact with applications on a computer. They allow multiple overlapping windows, each containing
its own content and functionality. Here are some key elements typically found in windowing systems:

1.Windows: Windows are the primary elements of a windowing system. They are graphical containers that
display application content, such as documents, web pages, or user interfaces. Each window can be moved,
resized, minimized, maximized, or closed independently.
2.Title Bar: The title bar is located at the top of each window and typically displays the name or title of the
application or document being shown in the window. It may also contain buttons for minimizing, maximizing, or
closing the window.
3.Menu Bar: The menu bar is a horizontal bar typically located at the top of the screen or at the top of each
window. It contains menus that provide access to various application functions and commands. Clicking on a
menu reveals a drop-down list of options or submenus.
4.Toolbars: Toolbars are typically located below the menu bar or at the top of a window. They contain icons or
buttons representing frequently used commands or actions. Toolbars provide quick access to commonly used
functions, such as saving, printing, or formatting.
5. Controls: Controls are interactive elements within windows that allow users to input data or interact with the
application. Examples include buttons, checkboxes, radio buttons, text fields, dropdown lists, sliders, and date
pickers. Controls enable users to manipulate and interact with the application's features and settings.
 Cont… Elements of windowing systems
6.Dialog Boxes: Dialog boxes are windows that appear on top of the main application window to prompt users
for specific input or to display messages or alerts. They typically have a specific purpose, such as saving a file,
confirming an action, or displaying error messages.
7. Window Management: Window management refers to the ability to control the behavior and arrangement
of windows within the interface. Common window management features include minimizing windows to the
taskbar or dock, maximizing windows to fill the screen, resizing windows by dragging the edges, and arranging
windows side by side.
8. Drag and Drop: Drag and drop functionality allows users to select and manipulate objects within windows
by clicking and dragging them to different locations or onto other objects. It is often used for tasks such as
moving files, rearranging items in a list, or dropping content into specific areas.
9.Window Controls: Window controls are typically located in the top right corner of a window and provide
standard actions for managing the window. These controls include buttons to minimize, maximize, restore, or
close the window.
10.Context Menus: Context menus, also known as right-click menus or context-sensitive menus, appear when
users right-click on an object or within a specific context. They provide a set of relevant options or commands
related to the selected object or context.
 These elements collectively contribute to the functionality and user experience of
windowing systems, enabling users to interact with applications, manage multiple tasks
simultaneously, and customize their working environment.
 Programming the Application
 Programming an application involves writing the code that defines its behaviour, functionality, and user
interface. Here are the general steps involved in programming an application:

1.Requirement Analysis: Understand the requirements of the application by gathering information about its
purpose, features, target audience, and any specific technical or design considerations.
2.Design: Create a high-level design for the application, including its architecture, data structures, user
interface layout, and flow of control. This step helps plan the organization and structure of the code.
3.Select a Programming Language: Choose a programming language that is suitable for the application's
requirements, platform compatibility, and your familiarity or expertise. Common programming languages for
application development include Python, Java, C#, JavaScript, and Swift.
4.Development Environment Setup: Set up the development environment by installing the necessary tools,
such as an integrated development environment (IDE), code editor, compilers, and libraries/frameworks
specific to the chosen programming language.
5.Write the Code: Start writing the code based on the application's design. This involves implementing
algorithms, data structures, user interface components, logic for handling user input, processing data, and any
other required functionality.
6.Testing: Perform testing throughout the development process to identify and fix bugs, validate the
application's behavior, and ensure it meets the specified requirements. This includes unit testing (testing
individual components), integration testing (testing the interaction between components), and user acceptance
testing (testing with end-users).
7.Debugging and Troubleshooting: Debug the code to identify and resolve any errors or issues that arise during
testing or runtime. Debugging tools and techniques help locate and fix problems, such as logical errors,
unexpected behaviour, or performance issues.
8.Optimization and Refinement: Optimize the code for performance and efficiency, considering factors such as
response time, memory usage, and resource utilization. Refine the user interface and overall user experience
based on feedback and usability testing.
9.Documentation: Document the code, including comments, explanations, and instructions, to make it more
understandable and maintainable for yourself and other developers who may work on the application in the future.
10.Deployment: Prepare the application for deployment by packaging it into a distributable format suitable for
the target platform (e.g., an executable file, mobile app package, or web deployment). Follow the necessary steps
to distribute and install the application on the intended devices or servers.
11.Maintenance and Updates: Monitor the application's performance, address any user-reported issues, and
release updates or new features as required. This includes on-going bug fixing, security patches, and
enhancements to ensure the application remains functional and up to date.

 Throughout the programming process, it is important to follow best practices, adhere to

coding conventions, and utilize appropriate design patterns and principles to create
maintainable, efficient, and robust applications. Continuous learning and staying updated
with the latest technologies and programming techniques also contribute to developing
high-quality applications.
 User interface management systems
 User Interface Management Systems (UIMS) are software frameworks or tools that provide a set of libraries,
components, and utilities to facilitate the development, management, and presentation of user interfaces in
software applications. UIMS aim to simplify the process of creating user interfaces by offering predefined UI
elements, event handling mechanisms, and layout management capabilities. Here are a few examples of
popular User Interface Management Systems:

1.Qt: Qt is a cross-platform application development framework that includes a comprehensive set of tools and
libraries for building graphical user interfaces. It provides a wide range of UI components, layout managers, and
event handling mechanisms. Qt supports multiple programming languages, including C++, Python, and
JavaScript.
2.JavaFX: JavaFX is a platform for creating rich and interactive user interfaces for Java applications. It offers a
collection of UI controls, layouts, and effects to design visually appealing applications. JavaFX provides support
for styling, multimedia, animation, and includes a scene graph-based rendering engine.
3.GTK+: GTK+ (GIMP Toolkit) is a popular open-source toolkit for creating graphical user interfaces. It is
primarily used in the GNOME desktop environment but can be used independently in other projects. GTK+
provides a wide range of UI widgets, layout managers, and theming capabilities. It supports multiple
programming languages like C, C++, Python, and Rust.
 Cont…
4.Windows Presentation Foundation (WPF): WPF is a UI framework for building Windows desktop
applications. It is part of the .NET framework and provides a rich set of UI controls, data binding capabilities,
styling options, and layout management. WPF uses XAML (eXtensible Application Markup Language) for
declarative UI design.

5.Flutter: Flutter is an open-source UI framework developed by Google for building native-like user interfaces for
mobile, web, and desktop applications. It uses a single codebase and provides a rich set of customizable UI
widgets, layout system, and a reactive framework for building interactive UIs. Flutter uses the Dart programming
language.

6.React: React is a JavaScript library for building user interfaces, primarily for web applications. It follows a
component-based approach where UIs are composed of reusable and independent components. React provides a
virtual DOM (Document Object Model) for efficient rendering and offers a declarative way to describe UIs.

 These UIMS tools and frameworks help developers create visually appealing, responsive,
and interactive user interfaces. They provide abstractions and pre-built components,
allowing developers to focus on the application's logic and user experience while abstracting
away the lower-level details of UI rendering, event handling, and layout management.
Thank You!!!