This is how to record a ScreenCast on Linux.
# ffmpeg -f x11grab -s $(xrandr | grep '\*\+' | awk '{print $1}') -i :0.0 -sameq screencast.mp4
In case you don't have ffmpeg, type "sudo apt-get install ffmpeg" first.
H/t @uggedal
28 October 2012
01 October 2012
Introduction to HCI
I am currently doing my postgraduate degree in University of East Anglia, and one of the modules that we are studying now is HCI (Human-Computer Interaction - Lecturer Dr. Dan Smith). I'll try to blog here about the different courses we study, and notes I take throughout them or any related books.
What is Human-computer Interaction?
According to this, Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them.
Two questions to ask oneself here. What problems do people face when using modern computer-based technologies? (Keep in mind that now computers are everywhere from your car to your washing machine). How to evaluate users interaction with computers? (It's said that up to 50% of all software code is UI code)
The most important thing to know is that HCI is not about the beauty of the design, but rather how useful it is. Knowing that for every dollar spent acquiring a customer, you will spend $100 dollars reacquiring them after they leave because of poor usability or bad customer service, you need to think twice about the usability of your product. A website's business (B) can be calculated as the product of the number of unique visitors (V), conversion rate from visitor to customer (C) and loyalty rate of returning customers (L)
The recommended textbook for this course is "Human-Computer Interaction", Alan Dix, Janet Finlay. But there there other books such as "Don't Make Me Think", which I've read a couple of years ago, and "The Psychology/Design of Everyday Things", which I am currently reading.
Conceptual Models
In "The Design of Everyday Things", Donald Norman pointed out what is known as "Conceptual Model". Conceptual models are mental models of the way an object operates. A user expects to have buttons lowering the volume and others playing and stopping a song one he has a music player in her hand, she may need to find out those buttons, but at least she knows they are there, and expect what they should be doing. Having a good conceptual model makes it easier for the users to anticipate and understand the consequences of their actions. Another term that we are going to discover later on is Cognition. Cognition comes from the two Latin words, Con (with) and Gosco (Know), and it means the mental action or process of acquiring knowledge and understandingly through though, experience or senses.
A user's conceptual model may not always match that of the maker of the product, and one of the tasks of the HCI Designer is to guide the user to have a good conceptual model and give him feedback to correct it when it is wrong. And back to Donald Norman, a designer can help building a correct conceptual model in the user's mind using the means of "mapping", "affordances" and "constrains".
Mapping: It is the relation between the controls and their effect. It makes perfect sense that turning the car's steering wheel clockwise (moving its top part to the right) will turn the car to the right.
Affordance: If it is a knob, you turn it. I.e. It affords (is for) turning. If it is a button, you push it. If it is a chair, you sit on it. Sometimes, it if is a glass, you break it, because you are into vandalism. Back to our steering wheel example, it affords being steered.
Constrains: Let's assume someone decided that pushing the steering wheel will make the car move faster, and pulling it will make it stop. Now, they user has an incorrect conceptual model, and the designer's role here is to put some constrains on the steering wheel and make sure it doesn't respond to pushing and pulling. The USB only works if plugged in a certain way, so putting constrains here on its shape is essential to make sure you do not plug it in an upside-down position.
Visibility: The controllers should be clear and visible to the user. It's also good to make the more essential controllers (those doing the main functions) more visible than the others. You know you should be pushing a door from the non-hinged side, so hiding the door's pillars is in fact a visibility problem. Hiding the hold functionality of a phone in a combination of two buttons instead of a clear dedicated hold button is also a visibility problem here.
Feedback: You should give the user immediate feedback. When you steer the wheel of the car it just turns. Whether your program is copying a file or doing some AJAX request, you should make it clear to the user that you are doing something, or else they might think that your software is not responding or quit or keep on trying the same actions over and over again.
Consistency: Don't make the user think. The symbols on the cassette's play, pause and skip buttons are universally accepted, so whenever you are playing an audio file, just stick to those symbols.
Let' take a shower now!
Now let me have a HCI-related rant here. I've got shower in my room, where they decided to combine the functionality of the tabs and the heater in one place, in the below not-so-black-box.
That thing for sure has got huge HCI problems. I failed to use it correctly, I just try different combinations each time till it works.
Let's first assemble a conceptual model in our minds. It should be basically doing two things, controlling the water's flow and temperature. right? It's has got two knobs, one with a scale going from red to blue. So that should be the one for the temperature. Now the other one has got words like Off, High and Medium. So this should be the one for the flow. But wait a minute. There is cold next to Cold there too. What is that knob doing then!? We seem to have a mapping problem here!
I'm sure we have no feedback problems whatsoever here, I've already burnt myself twice, so the feedback is already there, and it is instantaneous. But when it comes to the temperature (Temp) meter shown there, it is not that obvious feedback there.
We may construct another more accurate conceptual model here. Since this thing is basically a heater, so we may assume is the knob with Cold, Med, High and Off is to "Pass just cold water without any input from the heater side", "Mixing the cold water with some hot water", "Mixing the cold water with more hot water" and "Turning the water off altogether" respectively. But, now what is the use of the rad-blue knob? Fine tuning the above choices?
Seeing a scale going from red to blue makes you expect that putting the pointer at the end of the red scale gives you the hottest temperature and moving it to the end of the blue scale gives you the coldest one. Not true! The designer here decided to ignore the mapping (or consistency, not quite sure) principles and made the knob move beyond the end of the scale. So you can simply put it at the end of the blue scale and still get burnt. Enjoy!
Books to Read
The Design of Everyday Things, by Donald A. Norman
Human-Computer Interaction, by Alan Dix and Janet E. Finlay
Don't Make Me Think, by Steve Krug
Mobile Observations, by Tarek Amr
P.S. You might like to have a look at these slides too.
What is Human-computer Interaction?
According to this, Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them.
Two questions to ask oneself here. What problems do people face when using modern computer-based technologies? (Keep in mind that now computers are everywhere from your car to your washing machine). How to evaluate users interaction with computers? (It's said that up to 50% of all software code is UI code)
The most important thing to know is that HCI is not about the beauty of the design, but rather how useful it is. Knowing that for every dollar spent acquiring a customer, you will spend $100 dollars reacquiring them after they leave because of poor usability or bad customer service, you need to think twice about the usability of your product. A website's business (B) can be calculated as the product of the number of unique visitors (V), conversion rate from visitor to customer (C) and loyalty rate of returning customers (L)
The recommended textbook for this course is "Human-Computer Interaction", Alan Dix, Janet Finlay. But there there other books such as "Don't Make Me Think", which I've read a couple of years ago, and "The Psychology/Design of Everyday Things", which I am currently reading.
Conceptual Models
In "The Design of Everyday Things", Donald Norman pointed out what is known as "Conceptual Model". Conceptual models are mental models of the way an object operates. A user expects to have buttons lowering the volume and others playing and stopping a song one he has a music player in her hand, she may need to find out those buttons, but at least she knows they are there, and expect what they should be doing. Having a good conceptual model makes it easier for the users to anticipate and understand the consequences of their actions. Another term that we are going to discover later on is Cognition. Cognition comes from the two Latin words, Con (with) and Gosco (Know), and it means the mental action or process of acquiring knowledge and understandingly through though, experience or senses.
A user's conceptual model may not always match that of the maker of the product, and one of the tasks of the HCI Designer is to guide the user to have a good conceptual model and give him feedback to correct it when it is wrong. And back to Donald Norman, a designer can help building a correct conceptual model in the user's mind using the means of "mapping", "affordances" and "constrains".
Mapping: It is the relation between the controls and their effect. It makes perfect sense that turning the car's steering wheel clockwise (moving its top part to the right) will turn the car to the right.
Affordance: If it is a knob, you turn it. I.e. It affords (is for) turning. If it is a button, you push it. If it is a chair, you sit on it. Sometimes, it if is a glass, you break it, because you are into vandalism. Back to our steering wheel example, it affords being steered.
Constrains: Let's assume someone decided that pushing the steering wheel will make the car move faster, and pulling it will make it stop. Now, they user has an incorrect conceptual model, and the designer's role here is to put some constrains on the steering wheel and make sure it doesn't respond to pushing and pulling. The USB only works if plugged in a certain way, so putting constrains here on its shape is essential to make sure you do not plug it in an upside-down position.
Visibility: The controllers should be clear and visible to the user. It's also good to make the more essential controllers (those doing the main functions) more visible than the others. You know you should be pushing a door from the non-hinged side, so hiding the door's pillars is in fact a visibility problem. Hiding the hold functionality of a phone in a combination of two buttons instead of a clear dedicated hold button is also a visibility problem here.
Feedback: You should give the user immediate feedback. When you steer the wheel of the car it just turns. Whether your program is copying a file or doing some AJAX request, you should make it clear to the user that you are doing something, or else they might think that your software is not responding or quit or keep on trying the same actions over and over again.
Consistency: Don't make the user think. The symbols on the cassette's play, pause and skip buttons are universally accepted, so whenever you are playing an audio file, just stick to those symbols.
Let' take a shower now!
Now let me have a HCI-related rant here. I've got shower in my room, where they decided to combine the functionality of the tabs and the heater in one place, in the below not-so-black-box.
That thing for sure has got huge HCI problems. I failed to use it correctly, I just try different combinations each time till it works.
Let's first assemble a conceptual model in our minds. It should be basically doing two things, controlling the water's flow and temperature. right? It's has got two knobs, one with a scale going from red to blue. So that should be the one for the temperature. Now the other one has got words like Off, High and Medium. So this should be the one for the flow. But wait a minute. There is cold next to Cold there too. What is that knob doing then!? We seem to have a mapping problem here!
I'm sure we have no feedback problems whatsoever here, I've already burnt myself twice, so the feedback is already there, and it is instantaneous. But when it comes to the temperature (Temp) meter shown there, it is not that obvious feedback there.
We may construct another more accurate conceptual model here. Since this thing is basically a heater, so we may assume is the knob with Cold, Med, High and Off is to "Pass just cold water without any input from the heater side", "Mixing the cold water with some hot water", "Mixing the cold water with more hot water" and "Turning the water off altogether" respectively. But, now what is the use of the rad-blue knob? Fine tuning the above choices?
Seeing a scale going from red to blue makes you expect that putting the pointer at the end of the red scale gives you the hottest temperature and moving it to the end of the blue scale gives you the coldest one. Not true! The designer here decided to ignore the mapping (or consistency, not quite sure) principles and made the knob move beyond the end of the scale. So you can simply put it at the end of the blue scale and still get burnt. Enjoy!
Books to Read
The Design of Everyday Things, by Donald A. Norman
Human-Computer Interaction, by Alan Dix and Janet E. Finlay
Don't Make Me Think, by Steve Krug
Mobile Observations, by Tarek Amr
P.S. You might like to have a look at these slides too.
Subscribe to:
Posts (Atom)