Welcome to Exploring Computing.
Today's video is human computer interaction.
Human Computer Interaction, or HCI
is an important field of study in computer science.
It focuses on how to improve interactions
between humans and computers.
And the computers that you are working on today
are a good sign of the success of HCI,
because HCI is responsible for things like the Windows, icon,
mouse, and point, or WIMP interface that we're all using.
And the fact that you are all using graphical user interfaces
instead of command line interfaces
where we're typing at the computer
shows that HCI researchers have had a huge impact on our world.
Hot topics currently in HCI include
virtual and augmented reality, speech commands,
gestures where you're using your hands
to interact with the computer.
And HCI researchers are even studying brain computer
interfaces.
One thing I always like to point out when I'm teaching my class
is because I teach a lot of non-computer science students
is that there's a lot of different fields out there
that are actually very important for HCI work.
And some of you may be studying these fields right now.
And so one of those is psychology.
Psychology is directly related to HCI
in a number of different ways.
For one thing having a better understanding
of human cognition can lead to better applications.
So things like how do humans perceive colors,
or what are the limitations of human memory
should be driving our applications.
In addition, psychological research
has a lot of similarities with computer science
user interface research.
And so in the basement of the psychology building,
there's a bunch of rooms where we
bring in intro to psych students and ask them to perform tasks.
And on the other side of a one way glass mirror,
we've got psych grad students who are watching
how they carry out those tasks.
HCI researchers do the exact same thing in a large computer
science company.
So we have the same rooms with a one way glass.
We've got a computer set up there.
We bring in some test subjects, and we
ask them to carry out tests on our computer.
And we see how they're actually interacting with a computer
whether they're able to use the computer the way we expect.
And typically again, for the larger companies,
we will actually have psychologists on staff
who understand how to run these experiments properly.
Another important related field is graphic design.
And when I was working in industry,
we had a bunch of people from art schools
who were working on staff specifically
to work on HCI work.
Obviously, ergonomics is super important.
And then sociology and ethnography
and other related fields are also really important for HCI.
I think particularly now that so many of the applications
are designed for multiple people to use
and how to help groups interact.
The importance of sociologists is, of course, really obvious
there.
But another way in which sociologists and ethnographers
are really important is if we're asked to go in and help
improve a particular workplace.
We need sociologists and ethnographers
to go in and study that workplace
and have a good understanding of what's
going on in that workplace before we
can help automate and computerize that workplace.
Let's take a quick look at some of the things
that user interface experts do when they're
trying to design a new UI.
The first thing you should do some need finding.
We want to determine what the user's actual needs are.
And so we're going to spend some time observing the workplace,
studying the current processes, and interviewing
potential users.
We then going to determine what the different roles
within that workplace are.
And what the different tasks that are regulated
carried out in that workspace.
And then we're going to do some prototyping.
We're going to do some testing of those prototypes
and then we're going to iterate.
This last part is really important
because it turns out that we are particularly good at coming up
with programs that actually help in the workplace.
And so it's very important that not only do we
interview people, and come up with ideas based
on what the feedback that they're giving us
in the interviews are, but that we test them out and try them.
Again, it's actually not uncommon for users
to think that they want a program.
And then when they actually try out the program to realize,
oh, this isn't as helpful as I thought.
I think maybe what we really want is this other thing.
And so that process of iteration where
you work in conjunction with your potential users
to try out different things, and ultimately really identify
what they actually need as opposed
to what their initial perceived concerns are
is super important.
The prototypes you can build range in quality
from low-fidelity to high-fidelity
are sometimes referred to as lo-fi to hi-fi.
And so examples include very low fidelity paper sketches
where you just draw diagrams on a piece of paper.
Now, these can still be used for user interface experiments.
So you can talk to people about the process by which they
go from one diagram showing a particular window
and, hey, where would you-- where would you
click on this window, you know, which buttons do you
think you should use to wire frames which are done
on the computer, but where we're not concerned with details
that we would be on a real application such as colors
and fonts.
But that wire frame still gives us
a good idea of what sort of information
might be on that screen.
And we can have a mock-up--
a higher quality mock-up with the fonts
and the colors and other things actually worked in.
And then we can have higher fidelity prototypes where
the user can actually interact with them
and press certain buttons and so.
The way this might work is suppose we
are working on an online bookstore example,
we use in more detail in a minute.
And we could tell somebody, hey, go ahead
and interact with our high-fidelity mock-up
here and look up a book on say South American history.
And so the user would hopefully find the correct text field
to enter in their search phrase, and type South American
history.
they would hit Return and we would
move to another screen that showed the results of looking
for South American history.
But the key thing that's going on here
is it doesn't really matter what you type in that field
when you click on the Search button
it only goes to results of South American history
because that's the only thing we have it hard wired for.
So here you've got a prototype that-- that looks real and has
some interaction but isn't the same as a real program.
It's much, much more simplified.
So these high-fidelity prototypes
can give better results, but they
are somewhat problematic because it turns out
that the more time and effort a team puts into creating
these prototypes, the harder it is for them to take results
that suggest that high-fidelity prototype that they spent
all that time on is, in fact, the wrong approach.
It's much harder to toss it out if the only thing you've done
is drawn some diagrams on a piece of paper,
and you start interacting with users,
and finding out that, hey, your ideas are wrong.
It's relatively low cost to toss out those paper diagrams
and come up with another set of paper diagrams.
I don't want to discount the cost of making paper diagrams
having spent so much time making some diagrams
for these lectures.
They are actually fairly time consuming
but nevertheless, it's much less time consuming
to come up with those diagrams.
So they're done on paper, or on the computer
than it is to actually have interactive prototypes
I mentioned we we're going to talk a little bit about a book
store.
So I want to do a little case study to sort of walk you
through some of the things that we
should be thinking about if we're designing a new program.
So in this particular case, I suppose the TAs
and I got together and we decided that we
wanted to do a new startup.
And we thought the best idea for a new startup
was to create an online bookstore.
It seems like a great idea and I don't think
anybody has done that right.
So-- so let's see how we could walk to the process of creating
this online bookstore.
OK, so we need to be thinking about who our users are.
And remember what I said earlier,
we wanted to be thinking about the roles and the tasks.
And for this particular video, I'm just
going to focus on our interaction with customers,
but if we're going to do this for real,
there would be a whole other set of tasks involved
with the employees at the bookstore,
but we're just going to focus on the customers.
So we want to be thinking about who our website visitors are,
and why they're visiting the website, what
their level of technical expertise
is, what sort of devices do they have,
and what their internet connections look like,
how fast are they, how reliable are they, and things like that.
And we want to think about different tasks
that they might want to interact with our website for.
So the obvious one is I'm looking for a particular book,
but that's not the only reason why somebody
might come to the website.
They might be interested in a particular topic,
but not be interested in a specific book,
or not have an idea of a specific book associated
with that topic.
And this is really a key distinction.
I think the Stanford library's gotten better at this.
But for a long time, they had a great interface.
When you were looking for a specific book it would tell
you, hey, here's the book, here's
which library is located in, here's how many copies we have,
here's how long that copy is checked out for,
and here's what it's going to be available next.
And so that was super useful, but when
it came to I've got a topic I'm interested in,
but I don't know a specific book in that topic it was
a horrible, horrible interface.
And so you need to think carefully
about what are all the reasons why somebody might visit
our little bookstore here.
And you want to think carefully about how
to meet each of those needs.
And then here's a third need down here at the bottom.
You know, they might be sitting in class,
and they might be bored.
And if they want to come visit our website every time they
go to they're exploring computing class,
we would be happy for them to do that.
We want to find new and interesting content
to show them each day, have some idea of the sorts of things
they're interested in.
And find nice glossy ways of presenting those books to them
so that they come by frequently and hopefully
get excited about something we show them
and ultimately buy them.
So these are three very different reasons why somebody
might visit our website.
And the sorts of things we might need
to do on our website to meet each of these three
different tests are actually quite different.
So you need to think carefully, why are people here?
Not just what is the minimum sort of thing
that somebody might need in order to come to our website,
but try and be as expansive as possible.
That's going to give you a broader range of audiences.
And that's going to give you an overall better website.
And then what we might want to do
is come up with information on potential customers
and keeping in mind that there are
lots of different people visiting our website,
and they're all going to have different characteristics.
And so one strategy that is often used to actually come up
with user personas.
So here are some potential customers.
Nicki is a young professional.
She visits a website on her cell phone.
She has moderate internet speeds on her cell phone.
But she often visits on her way home from work
and the internet connection on her bus ride home
is often kind of spotty.
Patrick is a senior citizen.
He has a low technical expertise and visits the website
on a Windows 95 laptop.
So do we want to support him.
His web browser is likely to be pretty old.
And he might have some security issues
because Windows 95 is no longer supported by Microsoft.
And that's actually a good point.
So you do need to think about what range of people
are you going to support, because the more people
you support as we've talked a little bit with the H team
on the success.
The more likely you are to run into problems
with their website browser the less compatible
the web browser is, and the fewer the cool stuff
that you're going to be able to do is.
Going back to Patrick, our senior citizen here though.
And so he has a really old laptop,
but he does have a good internet connection.
And then Matty is a junior high school student.
She's got modern technical skills.
She's got a low-end tablet, but she does
have good internet connection.
And so the idea here is we can think about the different tasks
that we identified customers potentially doing
on the website.
And then in our meetings, when we're discussing the design,
we can actually bring up these personas.
So we can say, OK, this seems like an interesting design
and I could see how Nicki would be
able to figure out how to use it, but what about Patrick?
Would Patrick be able to figure this out?
Or if we're thinking about the sorts of information displayed
on our website, you might ask how would Nicki
be able to see this part of the website
well on her commute home?
And if we're taking up too much bandwidth for her
to do that, how are you going to provide her
with an alternative?
So crudities different personas and giving them names
give us a way to talk about these sorts of users
when we're in our meetings.
And then we will want to do user testing
and so as we've talked about before,
you're going to have different prototypes
of different quality.
You're probably going to want to start off with a lo-fi
prototypes because the hi-fi prototypes take a lot of time
and effort to get in.
So spend some time with the lo-fi prototypes
and if it looks like you're in the right direction,
you can go ahead and refine them become more and more higher
quality prototypes.
You need to get a bunch of users who are not directly involved
with the project and in fact, you
might want to try and get users that match your personas.
So if we think we're going to have senior citizens visiting
our website who are using Windows 95 laptops to try
and get some older users who maybe don't have
a lot of technical expertise, bring them in, sit them down
in front of your prototype whatever level
of prototyping you're doing.
And ask them how to carry out particular tasks say OK,
suppose you're presented with a screen here
try to find the new best seller by Jane cardinal.
How do you think you would do then with this screen?
And so you know whether they're presented with a paper
prototype. , And hopefully, if it's a good drawing,
they can look it over and say, oh,
I see how this would translate to a computer program.
I think they could tap on the piece of paper
and say oh, I think I would enter something
into this field, or if it's a high-fidelity prototype,
they can actually interact with it.
They see the field there.
They can click their mouse on it.
And they can go ahead into that information there.
We could ask them, "Suppose you're
looking for a book on South American History.
What would you do?"
And they could take a look at your prototypes.
And figure out exactly how they would interact with it.
So HCI as I said is a really important field
in computer science and it's a great place
for people that may not have a strong computer science
background to get involved with helping to develop computer
products and programs.