hci reviewer.docx

**Unit I : Lecture 1: Principles of HCI** **Human-Computer Interaction (HCI):** "is a discipline concerned with the design, evaluation and implementation of interactive systems for human use and with study of major phenomena surrounding them." It is the study of interaction between people (users)...

**Unit I : Lecture 1: Principles of HCI** **Human-Computer Interaction (HCI):** "is a discipline concerned with the design, evaluation and implementation of interactive systems for human use and with study of major phenomena surrounding them." It is the study of interaction between people (users) and computers. Interaction between users and computers occurs at the user interface. The golden principle in HCI is that "people should come first" Components **HUMAN** could be an individual user or a group of users. **COMPUTER** any technology ranging from the general desktop computer to a large scale computer system **INTERACTION** any direct or indirect communication between a human and computer. **HCI is about** \- Understanding the users - Understanding users tasks - Understanding the surrounding environment \- GUI requirements gathering and analysis \- Design prototype - Evaluate the system **HCI is NOT About** \- Making the interface look pretty \- Only about desktop computers (and that goes for computing as well!) \- Something that would be nice to do but usually there's no time for it Goals To develop or improve the safety, utility, effectiveness, efficiency and usability of system that include computers." To produce usable and safe systems, as well as functional systems **Usability** was born because of badly designed arms that caused "friendly fire" during war. Importance of HCI \- Competition is very close. \- Comparison is easily possible. \- Users who can't find the product in the shop can not buy it. \- Users who are not able to fill in correctly the order form are not going to buy **Unit I : Lecture 2: Disciplines Contributing to HCI** A diagram of the topic of psychological disorders Importance of HCI 1\. Can Preventing accidents 2\. Health and safety concerns 3\. Can reduce the cost of customer training and support 4\. Direct correlation between HCI and sales 5. HCI can provide you a job **System Design Approach** Traditional approaches to system development  User Centered approach UCD Approach 1\. Data Collection Data recording --Using media Interviews --Stakeholder interviews --Subject Matter Expert interviews --User and customer interviews Questionnaires --Surveys, product reviews Literature review--Studying existing systems 2\. Data Analysis Requirement analysis--Formal specifications of the system User analysis--Identifying and understanding the user Task analysis--Steps user take to accomplish this task Functional analysis--Functions that system perform to help the users carry out their task 3\. Prototyping Users are actively involved in the development It provides a better system to users The users get a better understanding of the system being developed. Errors can be detected much earlier Quicker user feedback is available leading to better solutions 4\. Design Goals-Achieving goals Users and systems-Understanding the raw materials: computer and human Limitations-Accepting limitations of humans and of design 5\. Evaluation Testing the usability, functionality and acceptability of an interactive system Expert evaluation-Evaluation by Subject Matter Experts User evaluation-Evaluation by user or customer **Unit II : Interaction Design** Interaction design can be broken down into **5 dimensions** **Words** Language is the core of interaction and communication since the wording can either enhance or cripple the foundation of interaction. **Visuals** Visuals are equally important to the copy, since the experience suffers if the words and appearance do not complement one another. **Objects/space** Space creates the context for interactions with the right look, feel, and relationship between all on-screen elements. **Time** Time is what users interact within. **Behavior** This is how users and the interface act and react. The 5 Pillars of Interaction Design **Goal-Driven Design** In every design discipline, the artist must first acknowledge their constraints, and then devise a solution. 3 fundamental tactics for designing for your target user: Personas User Scenarios Experience Maps **Usability** In many ways, usability is the bare minimum of interaction design. If your audience can't use your product, they certainly won't desire it. **Affordances and Signifiers** The concept of affordances is that a function should speak for itself, and suggest its own use (i.e., a road affords walking). Signifiers are what hint at the affordance (i.e., the road's flat surface signals you to walk with your feet). One of the most common signifiers is the blue underline for link text. Without signifiers, users won't be able to perceive the affordance. Ex. Learnability In an ideal world, a user would remember every function after only a single use. The reality is that familiarity and intuition must be consciously designed into the interface. A common tactic for improving learnability is using UI patterns. Many sites and apps already use these patterns so the user is familiar (plus the design is consistent), and you're still allowed plenty of creativity to customize the design elements for your site. **Feedback And Response Time** Feedback is the heart of interaction. If user interaction is a conversation between your user and the product, then your product better participate in a friendly, interesting, and helpful manner. Whether an elaborate animation, a beautiful micro-interaction, or a simple beep, a response gives the user the satisfaction of knowing if their task was or was not accomplished (and what to do next). **Fundamentals of Language in IxD** **4 main duties of Words in IxD** **Greeting** More than just a friendly "Hello!" It explains what the site is and recommends a good first step, whether suggesting signing up or directing to content that's likely to hook your user. **Navigation** It tells users where they are and suggest new or lesser-known options to deepen the user's experience. **Suggesting Actions** Words in menus, on buttons, and within instructions are all necessary to the usability of your product without them the user would grow frustrated figuring out the mechanisms on their own. **Providing Service** Along the same lines as the actionable functions, wording also plays a vital role in certain services **Unit II. 2 : PERSONA EMPATHY WORKSHOP** These are one of the most popular tools in user research and are a great way to create shared understanding about users. But they are useless unless people know what they are and how to utilize them. The best way to do this is through a workshop where participants practice thinking from the user's perspective and brainstorm ways to improve their experience. WHY A WORKSHOP? for personas to be effective, there would need to be shared understanding across the whole company (not limited to product people) about what personas are, how they are created and how they can be used. Workshops not only increased empathy for users and understanding about the personas across the company, but having a variety of participants from across different functions work together resulted in some great product improvement ideas. WORKSHOP GOALS: 1\. Empathize with the user -the ability to recognize, understand, and share the thoughts and feelings of another person, animal, or fictional character. 2\. Ideate ways to improve their experience 3\. Discover how users differ from your expectations **BRAINSTORMING ACTIVITY** Persona's behavioral data Imagine what sort of person this is Basic quantitative information Preconceptions from anyone How important personas are as a tool to align understanding CREATING A POV STATEMENT FOR THE PERSONA **\[USER\] who is \[IN SITUATION\] needs to \[NEED\] because \[GOAL\]. However, \[PROBLEM\].** Sally, who is a masters student, needs to keep track of the latest global news because she is researching international relations. However, she can't search through saved articles and sometimes misses updates. **BRAINSTORM IDEAS TO IMPROVE THE PERSONA'S EXPERIENCE** Practice empathizing with the user. It is a good idea to create a How Might We statement based on the point of view created in the last step. **REINFORCING THE IMPORTANCE OF PERSONAS** This workshop is a great way for people unfamiliar with user research and personas to realize the importance of having a shared understanding about who users are. Unit 5 : WHAT DOES A UX DESIGNER ACTUALLY DO? 1\. What is UX design? UX design focuses on the interaction between real human users (like you and me) and everyday products and services, such as websites, apps, and even coffee machines. It's an extremely varied discipline, combining aspects of psychology, business, market research, design, and technology. To encompass all of the different elements that determine how a user feels while interacting with a product, Donald Norman came up with the term "user experience" 2\. What does a UX designer do? As a UX designer, you're there to make products and technology usable, enjoyable, and accessible for humans. UX designers tend to work as part of a wider product team, and will often find themselves bridging the gap between the user, the development team, and key business stakeholders. As a UX designer, it's your job first and foremost to advocate for the end user or customer. As for the kinds of projects you'll work on, this will vary dramatically from company to company, as well the size of your team, and your priorities. You may find yourself designing websites, mobile apps, and software, or even designing for voice, AR and VR devices! Despite the variety the role offers, there are some general functions that a UX designer can be expected to perform, including: It is important to be aware that UX designers are not typically responsible for the visual design of a product. Rather, they focus on the journey that the user takes and how the product is structured to facilitate this journey. 3\. What are the typical tasks and processes of a UX designer? As a UX designer, you'll go through each step in the UX design process to make sure that any and all products are designed with the user in mind. Now let's take a closer look at the kinds of tasks that typically fall into the UX designer role. Conducting user research The initial stage in the UX design process is where the research (magic) happens. Generally, a UX designer will get a brief from the client or their manager asking them to do some project research. The user research phase is when you scope out the project, identifying exactly who you're designing for and what the users' goals and challenges are in relation to the product. Personas and information architecture Based on extensive user research, UX designers might then create user personas. This is where you delve deeper into what tasks each persona wants to perform and why. Next, you'll start thinking about the kind of content needed and how it will be structured across the website or app. A good information architecture makes sure that the user can easily find what they're looking for and intuitively navigate from one page to the next without too much thought. User flows and wireframes User flows are basic flowcharts which visualize the complete path a user takes when using a product, from entry point right through to the final interaction. While user flows map out the entire user journey, wireframes provide a two-dimensional outline of a single screen or page Prototyping and user testing A prototype is simply a scaled-down version of your product; A simulation which enables you to test your designs before they get developed. Prototypes range from the simplest of paper models to the more realistic, high fidelity interactive prototypes which closely mimic the final product Visual design While some UX designers will also specialize in visual design, it tends to fall under user interface (UI) design. So, the final imagery, color schemes, icons, and typography will usually be taken care of by a UI designer. One final point to make is that a UX designer's work is rarely finished after the product launch. There will be refinements, small changes, new releases, feedback to gather and analytics to discuss with the team. The UX design process is highly iterative, and a career in UX is as much about collaboration and coordination as it is about design 4\. What skills does a UX designer need? Besides technical and design skills like wireframing, prototyping and interpreting data and feedback, UX designers also need certain "soft" skills. Adaptability, communication, empathy, problem-solving and teamwork These are all essential soft skills. As a UX designer, it's important that you can collaborate effectively with those around you---from clients and stakeholders to developers and fellow designers, all the way through to the end user **PLATFORM TECHNOLOGIES** In web development, platform technologies refer to the foundational tools, frameworks, and systems that enable developers to build, deploy, and manage web applications efficiently.  Key platform technologies commonly used in web development: **Web Servers** - **Apache HTTP Server**: A widely-used open-source web server that powers a significant portion of the web. - **Nginx**: A web server and reverse proxy known for its high performance and scalability. - **Microsoft IIS**: Internet Information Services, a web server from Microsoft used mainly for hosting.NET applications. **Backend Frameworks** - **Node.js**: A JavaScript runtime built on Chrome\'s V8 engine, allowing developers to use JavaScript for server-side programming. - **Django**: A high-level Python framework that encourages rapid development and clean, pragmatic design. - **Ruby on Rails**: A server-side web application framework written in Ruby that follows the MVC pattern. - **Laravel**: A PHP framework designed for elegant syntax, with features like routing, session management, and caching. **Frontend Frameworks and Libraries** - **React.js**: A JavaScript library for building user interfaces, maintained by Facebook. - **Angular**: A TypeScript-based web application framework developed by Google. - **Vue.js**: A progressive JavaScript framework used for building user interfaces and single-page applications (SPAs). **Content Management Systems (CMS)** - **WordPress**: An open-source CMS that powers a significant portion of the web, especially blogs and small to medium-sized websites. - **Joomla**: A flexible CMS that can be used for creating websites and powerful online applications. - **Drupal**: A CMS known for its flexibility and scalability, used for complex and large-scale websites. **Database Management Systems** - **MySQL**: An open-source relational database management system (RDBMS) commonly used in web applications. - **PostgreSQL**: A powerful, open-source object-relational database system known for its robustness. - **MongoDB**: A NoSQL database used for handling large volumes of unstructured data. **Version Control Systems** - **Git**: A distributed version control system that tracks changes in source code during development. - **GitHub/GitLab/Bitbucket**: Platforms that provide Git repositories and additional tools for collaboration, CI/CD, and more. **Web Hosting and Cloud Platforms** - **Amazon Web Services (AWS)**: Offers a wide range of cloud services, including hosting, storage, and database solutions. - **Google Cloud Platform (GCP)**: Provides cloud computing services including hosting, machine learning, and data analytics. - **Microsoft Azure**: A cloud computing platform offering services like virtual machines, app services, and databases. **API Management Platforms** - **Postman**: A tool for testing and managing APIs, used extensively in the development and debugging of web services. - **Swagger/OpenAPI**: Tools for designing, building, and documenting RESTful APIs. **Containerization and Orchestration** - **Docker**: A platform that enables developers to package applications into containers for consistent deployment across environments. - **Kubernetes**: An open-source system for automating the deployment, scaling, and management of containerized applications. In web development, the terms \"front-end\" and \"back-end\" refer to different aspects of creating and maintaining a website or web application. **Front-end development** focuses on the user interface and experience, essentially what users see and interact with in their web browsers. It involves: **Key Technologies:** - **HTML (HyperText Markup Language)**: The standard language for creating web pages. It defines the structure of web content. - **CSS (Cascading Style Sheets)**: Used to style and layout web pages, including design, colors, and fonts. - **JavaScript**: A scripting language used to create dynamic content and interactive features, such as forms, animations, and real-time updates. **Frameworks and Libraries**: - **React.js**: A JavaScript library for building user interfaces, particularly single-page applications (SPAs). - **Angular**: A TypeScript-based framework for building complex web applications. - **Vue.js**: A progressive JavaScript framework for building user interfaces and SPAs. - **Bootstrap**: A CSS framework for responsive design and UI components. **Back-end development**  **Key Technologies:** **Programming Languages**: - **Node.js**: Allows JavaScript to be used for server-side scripting. - **Python**: Often used with frameworks like Django and Flask. - **Java**: Commonly used with frameworks like Spring Boot. - **PHP**: Widely used with content management systems like WordPress. - **Ruby**: Known for the Ruby on Rails framework - A popular open-source web server. - **Nginx**: Known for high performance and scalability. - A web application framework for Node.js. - **Django**: A high-level Python web framework. - **Ruby on Rails**: A server-side web application framework written in Ruby. - **Front-End**: Sends user requests (like form submissions or button clicks) to the back-end. - **Back-End**: Processes these requests, interacts with databases or other services, and returns data or responses to the front-end. - **APIs**: Often used to facilitate communication between the front-end and back-end. - A **full-stack developer** works on both the front-end and back-end, having skills and knowledge in both areas to handle the complete development process of web applications.