Hci 4, 5

Apple’s Siri :
Amazon’s Alexa :
Microsoft's Cortana :
Google's Assistant :
Samsung’s bixby
GOMS Model
Example 1 :
Task: Sending an email using a computer email client.
Goals: The primary goal is to send an email.
Operators: These are the basic actions or interactions the user performs to accomplish
the task. For sending an email, the operators could include:
 Clicking on the email client icon to open the program.

 Logging in by entering a username and password.
 Clicking on the "Compose" button to create a new email.
 Entering the recipient's email address.
 Composing the email message.
 Attaching files (if necessary).
 Clicking the "Send" button.
 Logging out (optional).
Methods: Methods are sequences of operators that accomplish sub-goals within the
task. For sending an email, methods might include:
 Logging in method: Click on the icon (operator), enter username and password,
and press "Enter" (operators).
 Composing email method: Click on "Compose," enter recipient's email, type the
message, attach files, and click "Send" (operators).
Selection Rules: These rules help the model determine which method to choose, given
different scenarios. For example:
 If the user is already logged in, the system will skip the login method.
 If the user is composing an email and wants to attach a file, the system will
activate the "attach files" operator.
Example 2 :
Task: Create a new document and format it with a specific font and style.
Goals: The primary goal is to create a new document with the desired formatting.
Operators: The basic actions or interactions with the system include:
 Move the mouse pointer.

 Click the mouse button.
 Type on the keyboard.
 Navigate through menus and toolbars.
 Select text.
 Change font settings.
Methods: Methods are sequences of operators used to achieve subgoals or complete

the overall task. Here's how a user might perform this task:
 Open the word processing application.

 Click "File" and select "New Document."
 Type or paste content into the document.
 Select the text to be formatted.
 Click the "Font" menu in the toolbar.
 Choose the desired font family.
 Choose the desired font size.
 Apply bold and italics formatting if necessary.
 Click "Save" to save the document.
Selection Rules: If there are multiple fonts, the user must choose the correct font from
the font menu. If there are multiple formatting options (e.g., bold, italics), the user
must decide whether to apply them.
Website Name : Yale School of Arts
Website Link : https://www.art.yale.edu/
Mistakes in Website :
1. Picture width is not proper.

2. Image covers the entire content.
3. 7 pages with quality issues.
4. Dropdown icons in the menu are not proper and need to be clicked.
5. Mobile incompatibility : Works slow and loads images at a slow rate.
6. 4 pages have W3C standards isuues.
1
Website Name : New York Universtiy

Website Link : https://www.nyu.edu/
Mistakes in Website :
1. Site has Inadequate Call-to-Action

2. It should contain consistent Typography.
3. Site is simple and descent. It should be little more attractive.
4. They could have utilized the space at the side.
5. General Structure of F- Shape of Menu is not followed.
6. It has Lack of Social Sharing Integration.
Code:
1] index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur dolorem aut
dignissimos tempora veritatis quibusdam magni, iure itaque exercitationem? Vel
accusantium dolores, non corporis iste maiores. Dignissimos, itaque nostrum fugiat ad
quod reprehenderit nulla facilis debitis est sapiente, explicabo totam. Deleniti ducimus
facilis fugit nobis. Excepturi, totam odio? Nesciunt, eos!</p>
<button class="textBtn">Hide Text</button>
</section>
<section>
<img src="pic.jpg" alt="">
<button class="imgBtn">Hide Image</button>
</section>
<section>
<video src="vdofile.mp4" controls></video>
<button class="vdoBtn">Hide Video</button>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
2] style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
div{
display: flex;
font-size: larger;
gap: 2rem;
}
section{
display: flex;
flex-direction: column;
width: 300px;
border: 1px solid black;
border-radius: 10px;
padding: 20px;
gap: 1rem;
}
img,video{
width: 250px;
height: 300px;
}
button{
all: unset;
font-size: medium;
padding: 5px 10px;
background-color: rgb(212, 206, 206);
}
p.deactivated , img.deactivated, video.deactivated{

display: none;
}
3] script.js
const textBtn = document.querySelector(".textBtn");

const imgBtn = document.querySelector(".imgBtn");
const vdoBtn = document.querySelector(".vdoBtn");
const textArea = document.querySelector("p");

const imgArea = document.querySelector("img");
const vdoArea = document.querySelector("video");
let text = true;

let img = true;
let vdo = true;
textBtn.addEventListener("click", () => {
if(text){
textArea.classList.add("deactivated");
text = false;
textBtn.innerHTML = "See Text";
}
else{
textArea.classList.remove("deactivated");
text = true;
textBtn.innerHTML = "Hide Text";
}
})
imgBtn.addEventListener("click", () => {
if(img){
imgArea.classList.add("deactivated");
img = false;
imgBtn.innerHTML = "See Image";
}
else{
imgArea.classList.remove("deactivated");
img = true;
imgBtn.innerHTML = "Hide Image";
}
})
vdoBtn.addEventListener("click", () => {
if(vdo){
vdoArea.classList.add("deactivated");
vdo = false;
vdoBtn.innerHTML = "See Video";
}
else{
vdoArea.classList.remove("deactivated");
vdo = true;
vdoBtn.innerHTML = "Hide Video";
}
})
Output:
Code:
1] index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<form onsubmit="submitHandler(event)">
<section>
<label for="input">Enter Input: </label>
<input type="text" name="input" placeholder="Enter text"
onchange="changeHandler(event)">
</section>
<button>Submit</button>
<p>
</p>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
2] style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
width: 100vw;
height: 100vh;
display: flex;
}
form{
display: flex;
flex-direction: column;
width: 400px;
gap: 1rem;
font-size: large;
padding: 20px;
}
form section{
display: flex;
gap: 1rem;
}
section input{
font-size: large;
padding: 2px;
}
button{
font-size: large;
padding: 5px 10px;
}
3] script.js
const para = document.querySelector("p");

let Output = "";
function changeHandler(event) {
if(event.target)
Output = "Output -: " + event.target.value;
else
return;
}
function submitHandler(event){
event.preventDefault();
para.innerHTML = Output;
}
Output:

Hci 4, 5

Uploaded by

Copyright:

Available Formats

Hci 4, 5

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Hci 4, 5

Uploaded by

Copyright:

Available Formats

Apple’s Siri :

Task: Sending an email using a computer email client.

Goals: The primary goal is to send an email.

 Clicking on the email client icon to open the program.

Operators: The basic actions or interactions with the system include:

 Move the mouse pointer.

Methods: Methods are sequences of operators used to achieve subgoals or complete

 Open the word processing application.

1. Picture width is not proper.

Website Name : New York Universtiy

1. Site has Inadequate Call-to-Action

p.deactivated , img.deactivated, video.deactivated{

const textBtn = document.querySelector(".textBtn");

const textArea = document.querySelector("p");

let text = true;

const para = document.querySelector("p");

You might also like