Just to kind of give everyone a baseline of what the
expectations are for today, I'm kind of assuming that if you're here you're
interested in, one, either if you're interested in web development,
or you're interested in how people like myself are putting together
visualizations and how to specifically work with a
specific audience, so in my case, I work with a lot of faculty members, so in that
case I'll be walking through one particular project and making
sure that I talk about all the little steps in between that are not so much
coding development, but mostly understanding that user
group that I'll be developing for. So again, if you're interested in the
web development side, we'll have some information about that, and we'll be
talking a lot about the human factors so that connection between the person and
the actual sort of final product if you will.What I'm going to do now is share
my screen. There are a couple slides with this
that are going to have some sound. I typically don't like to do this, kind of
going online, and kind of having a secondary video playing while
I'm doing my presentation, but I have a couple small videos, they're only
about two to three minutes long, in total, but hopefully this will work out as it
should. So let me share my screen and, again, if someone in the chat can
just kind of let me know that you guys can see what I'm seeing in terms of the
presentation on my screen, again, that would be very helpful, just to make sure
that we're all starting at the same sort of place.
Thank you everybody! So let me get started here... Okay, so let
me make this full screen and start going.. Okay.
So I go to this place one second sorry... Actually, it'll be fine right where it is,
so I'm going it down just a little bit. Okay so yes, just getting started
with this, basically the idea of today is to start to talk about
starting a project and hitting the end of the project as well,
All the little steps in between. The project I'll be talking about is
actually a project I worked on about a few months ago, with one of the faculty
members here at Huck Institute for Life Sciences. Specifically, we're going to be
walking through the first conversation to looking at the
data to getting some prototypes together to sort of finding a final sort of
product and at the end of all of this. So basically, we'll be walking
through all those sort of incremental steps, and hopefully you'd be able to
pull some information from how this development process actually
goes through and how we refined the prototypes and ideas and
get to a final product. A little bit about myself, I should mention my name is
Patrick, Patrick Dudas and I actually would like to do a little special thanks
to Institute for CyberSciences who helped me market this particular workshop and
in terms of Teaching and Learning with Technology, when I have the live version we
have a room set up for Althouse Labs, and they're nice enough to lend me that
location for those particular talks. A little bit about myself, my PhD is through the
University of Pittsburgh where I was specifically an information scientist and I
was specifically looking at data visualization, social media, and data
mining, and I actually currently support a large portion of the
university here at Penn State through the Huck Institute for Life Sciences,
Institute for CyberSciences, and the Eberly College of Sciences as well. A
couple things I'll make note of is
the fact that when it comes to these workshops, I kind of
think about this in terms of four different dimensions, when we talk about
sort of this development process, one is the UI/UX, which stands
for user interface and user experience, so basically a lot of stuff that we'll
talk about today, the data and how we put the product together, coding
in terms of developing the ideas and putting them to a point
where we can actually see them online or put them in a way that we can
make use out of them. And finally, Art, so aesthetics or
how things are looking and how if it's eye-catching or was
something where it gets people involved or interested in
what the story we're specifically trying to tell is. At the
bottom of the screen I have my github accounts, dudaspm, and in one second
I'm actually gonna showcase that. If you go to my github account, I'll throw that
link into our chat, so if you go there you're going to be able to see
something called DataWorkshop, and in there you're going to see all the
workshops that I've developed for specifically that and had some code involved with it,
and what we'll be doing is working with workshop 5. So I'll kind
of leave it there for now, but if you're interested, you can check out that to
get resources, there are a number of different things I'll be talking
about, I'm not going to go into all the specifics of all these projects if you
will, but if you're interested you can always go here and utilize this to actually
run your own sort of visualizations, specifically for that one. So again, all
the resources used today will be located here. The final product that I ended up
putting together, there's actually a couple, so...
Sorry, should've had this, I forgot to keep this rolling... but the
final product for this was actually, I'll show right now was
looking at connecting data, specifically about antibody counts
and how and when that data was being collected, so this top plot here, and we
were mapping that specifically to a histogram at the bottom here, but I'll
showcase the data as well as we move forward, and you're going to find that
it's not a lot of you know, we've got five different columns of information, a
lot of data points, but for the most part, kind of simple idea, and what
the professor or the faculty member was trying to do is to walk
somebody through an example animation. So this was a video we put
together, and this was our final product specifically for that. And I'll kind of
let it play out for a couple more seconds here, but we'll get to
most of these steps today, and you'll have access to a lot of the code that
you're seeing here, the text box is not presented, but for everything else is
actually presented to you if you want to, again, you can reproduce this particular
graph later on if you would like to.
So i just showcased the final product. So today, what we'll be covering specifically is the
development of the project in terms of some human factors, and human factors is
exactly how it sounds, just specifically it's basically thinking about that end
user, the person sort that will be utilizing something like this, and it
goes into a lot of those topics in terms of design. I'll walk you through the
project itself, we'll talk about something called "paper prototypes" and
how you can think about them, utilizing something called iterative design.
Front-end analysis is basically getting to know your end user better basically,
getting to know that information so you can design specifically
for that user group and then finalizing our project.
I break this presentation up into two sections basically and I have sort of
markers as we go through the presentation you'll be able to
see this. One is the technical side so, what programs do I need to start this
type of work if you if you're interested, how do I get these
applications to work properly, create graphs and things of that nature, and
then on the human factors side, we're going to talk about steps to design, how
do I talk to a specific audience or target a specific
audience, and how many designs I actually need to get a
good final product. So we'll start off with the human factors side of this
conversation, and there's a number of different topics that I could hit on, but
I'll just mention a few of them, again a lot of these have to go into a
lot of the final products and final designs when I'm putting them together,
one of the best resources for something like this is a wonderful book by Don
Norman called The Design of Everyday Things,
I utilized it before for classes when I was teaching students, and it's
still something I use today. And the design aspect he talks about
is concerned with how things work, how they're controlled, and the nature
of interaction between people and technology. But specifically, he talks
about different appliances, dishes, or you can see here he has a coffee pot, he
talks about basically anything in terms of design, so it's not just limited to
webpage design or data visualization design, it's meant to be sort of an open
discussion about any type of design. So a couple things in terms of why we see
poor design, it's one of those situations where we don't notice it until we
actually see it kind of situation, where if we see
good design we kind of just sort of take it for granted, unless it's something
that's sort of novel or so remarkable in some way shape or form, but we notice
this poor design. Basically you can think about this in terms of, something that I
always think about when it comes to poor design is whenever you go to a
shopping mall like a or a grocery store or something like that and you go to the
checkout aisle, and you go to swipe your credit card and you notice that the fact
that there's no sort of standardization with those types of devices, so in one
situation, you might have to ask, "How do I swipe? Do I put my chip in?" You know,
different button layouts, things of that nature, so that's sort of a
broad example of poor design, basically having all these different
ways to do the same sort of interaction. When it comes to design, a
lot of things in terms of trade-offs occur, why do we have these
trade-off? Things like cost, a specific aesthetic choice, maintenance, experiences
that matter, but most importantly when it comes to
human behavior there's a lot of assumptions that are made and it comes
from the fact that people assume that because they're a person, that they
innately understand the human behavior behind all contexts -- which is
not the case. We have one perspective, and so we need to know and understand the other
perspectives as well. This first slide is actually one of those videos
I'll be showing now, but basically on the left hand side you should be able to see
John Norman, basically he's on the left hand side there, and what he'll be
talking about is something called a conceptual model. Basically, a conceptual
model is an intuitive layout or arrangement of an
object and helps design, and how well basically we apply our past
experiences to that particular project or object specifically. So
it's basically if we can design for that conceptual model,
we're gonna have a better chance at designing specifically so more people
understand it intuitively. So I'm gonna play this and hopefully everything works
as planned...
One of the things both of us have talked about for a long time is the
importance of a conceptual model. The fact that, you know, the designer has some
model of what this thing is, and the person using it is trying to figure out
what the model is, and the only thing to go on is the device itself. And you said
you had trouble with this and it looks to me like it's a pretty straightforward
bowl, so what's the story? Well I came across this at a hotel in Stockholm,
Sweden, they had a whole big stack of jumbled up for us to put our breakfast
cereal in and so I made the mistake of putting my breakfast cereal in it. I
poured the cereal into the bowl, and then I added some milk, and I do like my
milk, so...
All the way up to the rim yeah, because that's just the way I like it and then I
put it down on the table. Now that does not require a warning
notice, that requires a redesign. So the conceptual model of a bowl is that is flat
and horizontal and that's what people expect... and as long as you're holding it this way it looks like it is right?
Yes and particularly the way it was jumbled, one bowl on top of the other,
now, what it was intended for was to make a nice presentation, for having
the chef fill this bowl, and then a waiter bring it out to your table
so they'd pressed it into a different service. So wait a minute, you found this in a hotel
in Sweden?
Alright, I'm gonna pause it there but if you're interested, you can watch the rest of
this, but again just sort of gives you a little bit of introduction to what a
conceptual model is, and when it breaks down some of the issues you
might run into. Keep an eye on the chat as well... Okay, the next topic we'll be
going into is
going to be something called affordances and anti-affordances. So when
we're thinking about the bit with like a visualization or any kind of web page
specifically, we're going to be thinking about making things intuitive
and making sure that people know that there's some sort of relationship
between what they're seeing and how to interact with it.
And affordances are basically that relationship between an actual object
and noticing how to use that particular object
intuitively without having to have instructions or something to
tell us exactly what it is. I have two examples, I'll go over this, the
top right-hand side is actually a bad example of affordances, which is a little
bit easier to showcase versus good affordances kind of idea. But what
you see is basically, if you've ever gone to, I see this a lot in terms of like
movie theatres, but it's basically that bar that goes
between the two doors, and so when you walk up to it you walk the wrong side
and all the sudden you're pushing on in and kind of walking into the door kind of
situation... You know you're supposed to push it, but you're not sure what angle
to come from to actually interact with it.
On the bottom right hand corner is something called an anti affordance so
we're trying to make people not do a certain action, so this is sort of a
great example of that, where they use lines on the road and basically, the
lines get closer and closer together. And what that sort of tells the person as
they're driving is, even though they're trying to slow down to go 25 miles an
hour, it's a situation because the lines are getting closer together, it's
actually causing them to slow down even more, because it looks like the lines are
sort of coming at the same speed which is going to kind of make us want to slow
down a little bit more in that regards.
And so that's the idea of that affordance versus anti-avoidance idea. A signifier
is basically attached to that affordance idea, it's more or less just a marker or
sign or signal of some sort, so an exit sign is a very good example of
this, basically it's telling you specifically what to do or what the
action is that can occur at that point. So basically, if you want to be really
good at design, you're going to have a signifier plus the affordance, but you
can get away with either-or, but for the most part if you need a signifier, it
basically is kind of one of those situations where maybe it's not as
intuitive as you would like it to be, so just a different way of
looking at it. One another topic is the idea of mapping and this is sort of
mapping relationships between objects in this regard. So my
example here at the bottom of the screen is, we see that we have a situation
where we have some various layouts of a stovetop, and
so on the bottom left-hand corner, we have more of a very
poor design in terms of the mapping is sort of incorrect, it's very
difficult to actually figure out which of those knobs goes to which of
the burners. And it gets a little better as you kind of move from left to right.
And then full mapping is basically a very intuitive mapping between those two
different types of layouts if you will. I can attest to this because this
is actually, what you're seeing here, is actually my stove top, and I used some
white circles to highlight where the burners are specifically but for this it's
sort of the same situation. If, you know, the top right-hand corner is actually
where one goes to, bottom right-hand corner is two, top left is thre, and then
four is the bottom left hand corner. So it's not intuitive in terms of making
that connection between what we're seeing on the right hand side and
how the actual burners are laid out. And it's caused some issues before, luckily
no one's ever been burnt or anything like that, but it's just one of the
situations where it's something you see a lot in terms of poor
mapping between the two objects being
involved here. Okay, so in terms of our our client, if you will, the faculty
member I was working on, so we kind of hit some of the basics in terms of the
human factors side, we're getting now into the project, there's a faculty
member, Maciej who's here at the Huck Insitute of Life Sciences, and basically
he approached me to help him put together an animation or a
visualization to promote some of his research, and so basically he reached out me, he's a
mathematic, statistics, and that nature, and so he came to me and said, "Hey,
could you help me with a visualization that I'm trying to put together?" And for
the most part, here's the data set, first I'll make note, there's obviously no
human data to connect to any individual or anything like that, it's very
very very high level in terms of he had an antibody count and, don't ask me what
disease or virus he's talking about, I specifically meant to kind of keep
this at a very very high level. So basically, there was an antibody count or
a value, so that's what you see on the left hand side, and a date where
this information was taken, so a test was done, and an infection date. So an actual
infection date. So the idea was the relationship is going to be, if it has a
higher antibody count, we'd assumed that the infection was a lot farther back, or
vice-versa in terms of lower values. This gets us into one of our topics, one of
the main topics that I'll be talking about in terms of putting together some
ideas if you will. And this goes into this idea of sketching. So sketching is
basically a very quick and crude way of actually getting ideas on a piece of
paper, and what we'll do is I'll sit down and we'll think about things in terms of
you know developing ideas and working with a faculty member to
communicate these ideas via piece of paper and a pencil. Great for
design choices, ideation, putting together these ideas.
It's also to kind of think through the ideas, force ourselves to kind of
visualize a lot of the medium, and also helps in terms of
getting a common ground between myself and the faculty member. Also I can come
back to these records in terms of I have these designs, so I can come back to
them and say "We started here, how did we sort of move from that process?"
and sort of reflect and communicate between each other as I
already mentioned. So this is actually one of the things I use utilize a lot in
terms of my design I have a sketchbook and a number of colored pencils. And what
I'll do is I'll sit down with that faculty member, and I'll open that up in
terms of the colored pencils, and I'll let them sort of walk me through and use
colors and draw out what they're thinking
specifically, so it allows me to actually very easily connect to them and
ask questions without doing a lot of design aspects. I know this is a
little bit difficult to see, I think it's a little bit better in the actual
presentation, but this was actually one of our first drawings and
our first starting point if you will. And as you can kind of see here, the
top graph and the bottom graph kind of emulate a lot of what we've seen,
the final product. Basically having the antibody account going up the
the y-axis, and having the year, in this case it says 2013, and then mapping
it back to some sort of histogram if you will. So this is our first
conversation piece to kind of get us going in terms of seeing
putting an idea together. I have a couple other sites I'm going to
show here, but one of the nice things about doing these sketches is
the fact that I'm not developing anything. There's not a lot of
expectation in terms of this development process, we can have an easy
conversation, I don't have to code something, come to him, come back and
sort of situation, again, this is just a good starting conversation and
again, a lot easier for me to take that piece of paper and throw it
away versus doing a lot of coding and development beforehand. So this is again
that first sort of way of looking at this if you will.
I have a couple quick little examples, I'm going to kind of share about 20
seconds of each of them, basically there is --
Sorry, let me mute that... we don't need to sound for these ones, but for these ones
basically, they're just kind of showing you different ways of doing paper
prototypes. So on the right hand side, we have a situation where they just think
you know - picking a piece of the paper, folding it up, layering on top of one
another, a lot more sort of I'll say more you know a little bit more fidelity in
terms of the prototype, but for the most part it kind of gets that idea across
pretty quickly. The one on the left hand, basically, I'm just
going to skip forward, it's a very very detailed paper prototype if you
will, so again I won't go through the entire video, but it kind of gives you an
idea of how elaborate some of these can be actually. So they're using some
sticks to actually move and have the changing of the character, the hair of
the character, facial features, things of that nature
kind of they have a sort of player in there, they're designing a game of some
sort, and so they have a lot of detail and a lot of movement and stuff like
that, again, a little bit more detail than I usually get into but for the most
part, another kind of cool way of actually doing game design in
this case, without having to do any kind of coding. Okay, so now we're going to be
walking into the more technical side of things. So to this point, we've kind of
walked through the idea of putting together, thinking about
the project and how we're starting that particular project. This first step is
actually getting us more into the conversation of, if you're interested in
developing a web project or something like that, how you would
actually go about doing so. I'm going to spend a little bit of time in terms of
going through some of these steps, but for the most part the
instructions are available through the presentation, but if you run into issues
please let me know we can have a conversation after this one today, but
for the most part, this is to me is one of the more
straightforward ways of doing this. When it comes to
running a web server, if you're on a Mac they natively have this
installed for you, but for Windows you have to actually install something to
get a web server actually up and running. So to do this, I provided a link, and I'll
kind of walk through this a little bit...
Apache is a open-source product, basically it's sort of a way for you to
download and install, it's a the web server of some kind... If you
already have access to web server, a whole lot of this information you don't have to worry
about, this is just if you're interested in development and you want
to do something that's local to your machine. The one I recommend is the
Apache lounge, so that button there... And if you are again, the Windows user
more than likely you're going to use that win64 version for most modern systems.
So we just click on that and it will have a zip file at that point. All I need to do
at this point is, if I unzip this, so open it up, I''m gonna have a folder called
Apache 24, and all I need to do is open up my C-Drive, and
drop it in there. I'm not going to do that now, because I already have one installed,
but you just take it over and drop it over here. And for us, that's all you need
to do to kind of get things installed if you will, again, it's one of those
situations where I really like this installation because it doesn't really
"install" anything per se, you're just running the actual server when you need
it and when you don't need it kind of situation. Again, Macs have this built in
natively, so you actually don't need to do anything specific for
that. So as I already mentioned, you'd go to the Apaches, sort of drop it into the C
folder, and you have it installed there. One thing I'd would like to mention and
I do recommend this very much so, is the fact that if you would run this Apache
application, basically it kind of opens your computer up to be a web server. It's
actually what they would utilize on any kind of web server. So one thing you do
want to edit is something in the, it's called the "httpd.config" file. It's basically
the config file for Apache. And what I'll do is, I will open mine on
here, so it's located at C:\Apache24 and then inside the config folder...
Config and then inside
there, there's going to be a file called "httpd.config". For Mac users, it's going to probably
be on a different location, I kind of list ones that I've ran into, so I have
that tested here. And all you need to do is actually just open up this file as a
text file, so let me open that up, I'll expand this a bit... And for the most part
the main thing we want to change is, and you can either search for this or just
scroll down, is this section right here. In this case originally it's going to
look like this and it's going to say "Listen 12.3
4.56.78:80. What we want to do is just add a line here that says "Listen",
and then this specific number sequence. So 127.0.0.1 : 80
and all that means is it's only going to listen for
traffic from that particular IP address which is
actually your local machine. So basically it won't allow any outside
connections, it'll only let you as a developer go to
this particular IP address, and you're the only one that
is going to be able to see this. So it doesn't open up any kind of issues or
anything like that, but basically it sort of locks it down so only traffic that's
going to be utilizing your webserver is just your local machine specifically.
And so what you'll do is make that edit, you'd save it, you'll see I saved it...
Come back here... Again, you do that for both Mac and for the PC versions. You still
have the documents, and what we need to do now is basically start the web
server, if you will. And again, I kind of like this because you're going
to be actually starting the server, turning it off as well. Again, if you have
access to a department web server that you can develop on,
that's the best scenario, but if you wanna have a local instance this is
going to be how you're going to do it. I have both the Mac version and
the Windows version, so for Windows, all you need to do is actually go to your
little window icon at the bottom, and type "cmd", and this is going to bring up
something called the command prompt.
And all we need to do is navigate to where the actual application is. And so what
I'll showcase is a couple really quick commands
to get this actually accomplished. And this is true for not
only Windows, but also for Mac or Linux or anything like that. The command is C
as in Charlie, D as in David, and then space dot dot, and all this does is
basically, if you see here, it says "C:\Users\pmd19", if I run that it moves me
back one folder. Then I do that again and it takes me to the C Drive. And now all I
have to do is CD, and that means change directory, to Apache, and then into bin.
And so now, I'm inside that bin folder.
So right now I'm in the bin folder, and all I need to do to start this actual
server is type in httpd.exe, and hit enter and it'll start. I already have one
running so it won't let me run it again I'm you know because it's obviously
already running for me and so I'll run this, and basically as long as this
command propmt is open, the server is running. If I want to turn off the
server, I click the exit, the little X button, and
the server's off. And again, this is going to be something
where this allows you to actually have a web server to actually
develop and put your programs and start developing in that environment
if you will. Let me minimize this... Okay, and for Mac it's a little bit different,
you're gonna open up a Terminal, and to do that I have some instructions up at
the magnifying glass you just search Terminal, and then you just have to run
this particular command. And that'll get things going for you. And to test this
all we have to do is go into a browser, so in this case, although my browser is
obviously already open, and what you would do is type in either
127.0.0.1, which I'll do now, it's going to be a little bit different on my
end versus what you'll see on your end, this is going to show you all
the projects that I'm working on, because I don't have the particular file...
I've used this a lot, let's put it that way. You can either do that, or do something
called localhost. And if you type out localhost, it will be the same exact
thing. And again, localhost and that 127.0.0.1 is all local
to your machine, it's not going out to the internet at all. It's basically just
running everything locall. And what you should see on your end, if you're just
doing this for the first time, you should see a window that pops up and it says, "It
works!". And that's it basically, if you see that, it's working for you as an
attendant. The last thing I'll make mention of is, just to get
things going with our project today, what we're going to do is we're going to go
to our github account, and github is a way to sort of publicly make
projects available, it's a free service for people to utilize... So again,
something where if you're working on a project and you want to get
other people's feedback on it and you're okay with it being in the public
space if you will, github is a great way to do that. Let's go to github
real quick... And when you go to that particular site, again, this is gonna take you
to dudaspm, my github account/Data Workshop, which is the workshop for this
particular Data Visualization Workshop. You should see a button over
here that says clone or download. You're going to click on that, and you're going
to see an option for download zip. So you see at the bottom left hand corner, it
downloaded, I can now open it, and what I want to do is actually drop that into...
we're going to go, under C:, we're going to go to Apache, and then when you put, if
you have projects you're going to start working on, where you want to put those
particular projects is the folder called htdocs. So I open up that, and
again, for you it's going to just have one single file, but for me cuz I have a obviously a lot
of projects that I'm working on, you're going to see a lot
more folders in here. But all we need to do is
unzip the folder and then drop it directly
into your htdocs folder. And you should see a file that's called Data
Visualization-master. And in there you're going to see a couple projects
which is the ones we see right here, and we can actually start looking at some of
these projects. So if you go on your web browser, and go localhost, and you find
that DataWorkshop-master, workshop5, and then let's say we
start with start.html... There you go, you should see that webpage pop-up, and it
should say "very basic webpage" or we can do basic, and you should see that
basic webpage visualization pop up for you as well. Just trying to keep an eye on the
chat in case there's any kind of questions... so yes this is how you go
about starting this whole process to actually get starting on
development. So for the most part, if you can get to this point, you can start
putting these projects together and developing some of these actual web
projects or data visualizations, web data visualizations as well. Ok, back to the
presentation, one thing I'll make note of is the fact
that in terms of text editors that are available, the one I typically use is
something called Notepad++, here's a link to it. It's what you saw
here... So basically it's nice because it has different tabs so you can sort of
see different pages you're working on,
it'll also encode each of the pages as well,
so if I go, and let's say I choose this index page, it's going to
encode things, so comments are specific color, numbers are a certain color
as well so it just helps in terms of making it more readable in that regard.
So here is our first design. And so basically, I took the data that we
talked about already, and just plotted this out. And what I'd like to do is
just talk a little bit about designing a very basic web page and
how we got this first visualization put together. I'm not going
to spend a ton of time on the further projects, only because
the focus today is on getting things started.
But again, if you're interested, all the source code is made
available to you. So mine starts HTML, if you're new to development this is
basically what a web page is. This is, any web page in terms of what you go to, you
know Penn State or Google or anything like that, this is the basic structure of
an HTML page or a web page. You have some tags that sort of start and have
a little slash, it's sort of end thing, that sort of tells you that this is an
HTML page, and then you have two specific parts: you have the head or the header
and then the body. Basically the body is what you see when you go to that
web page. So if I go through here and
save, and go back to here, and check that out. You see I made a little small change in
the body and now that's showing up on the webpage now. So that's just sort of
the basic structure if you will. Now in terms of the visualization and
again, I'm not going to spend a ton of time, I also try to go through and add
documentation throughout this, so if you have any questions you can kind of refer
back to this and hopefully kind of walk through it. I use something called D3 to
do most of my visualizations, so let me show that real quick. D3 stands for
data-driven documents, again, open source, free library to utilize, it's something
called JavaScript, so it's basically if you get into development,
Java Script is the programming language if you will of web pages,
one of the more basic front ends if you will in terms of
coding or development. D3 is a wonderful library to try
out different types of visualizations, definitely a little bit of a learning
curve to it, but it still gets you kind of going in terms of some of these ideas.
If you're interested in something that's a little, again, this has a
little bit of a learning curve to it, if you're interested in
getting baby steps into data visualization, I'd highly
recommend checking out something called Vega-Lite. I'll show that right now...
Again, free to utilize in terms of it's open source in that regards, has some
great examples, so examples here, very straight, a lot easier to walk
through some of these examples, a good starting place if you're
interested in getting into making some of these data visualizations, try
this out first. It uses D3 for a lot of what you're seeing, so basically once you
get a good handle on this, coming back to D3 you have to learn some of the
little nuances and stuff like that, but again, it's sort of a nice little way to
get your feet wet if you will to getting some data
visualizations together. So for ours, again, what we're doing is we're creating,
D3 uses something called SVG or scalable vector graphics, vector graphics
is sort of the way it's generating these plots. It's reading in a file and it's
mapping it to an XY coordinate plot, and what we're mapping is basically the
date that data was being collected, and the antibody value. So it's using that
sort of as our plot, let me bring that back up real quick... There we go.
And so we see at the bottom we have all the years of the data that's
provided to us and antibody value. And it goes from, I think basically, right
above 0 to about 1800. So basically, this is where we started. So we started
with that first sketch, and then here is basically the first conversation and the
first thing that I actually coded for the faculty member. So
is our first design, and what I'm going to do is get back here. Oh,
one other thing I'll make mention of is that while you're developing, you might
want to double check and you might run into errors or
issues with the code, it is coding so obviously there's a way to debug
this type of information and I'll show you how to do this
in Chrome, so let me do that right now. So in here I have my project up and running,
and what you can do is, if you click the dots over here and go to More Tools and
then developer tools, or Ctrl-Shift-I, if you want a shortcut, you're gonna have
a prompt show up and basically in here is your development tools and
specifically under this console is where you're going to see errors that sort of
pop up. So let me make an error... So save, and refresh... it's
going to say, "Oh we ran into an issue!" Basically this combination of letters I
just put on here is not defined. So it's not a variable, it's not a string, it's
basically just.... it's an error. So it tells me where it is, it tells me which
line it's on so it can highlight it so it's easy for me to debug it, come back, make
sure everything works okay, save, reload and... no errors. Everything is good,
basically. But as you develop more code, you're going to use this debugger or
console down here to make sure that things are working properly or
if you get any errors you're going to be able to check here
and see specifically where that actual code is referencing and where the
error is actually specifically occurring. So a great way to sort of debug things.
So I kind of wanted to walk through this, and so we have the technical level we've
talked about, getting our web server up and running, securing it so it basically
only listens to that local traffic, we moved our project into our htdocs folder
so we can actually run and utilize this, and we talked very basically of
what makes up a web page and hopefully you have some links now that you can
check out and see as we're developing how we actually
developed this particular project. So moving back into the human factors side
of the conversation, we're going to start talking about something called front-end
analysis and what front-end analysis is basically, they're common
questions I'll ask a faculty member when I'm starting to develop these projects.
Who are the end-users that are going to be utilizing this and in what
type of environment will this be utilized? What are the tasks, so what
does he need to have accomplished, or what will his users need to have
accomplished? And what functions, what things does the system have to
do to facilitate completing those particular tasks?
The first thing we'll talk about is something called the "User analysis", again
that's who's going to be utilizing this system? One of my biggest pet peeves when
it comes to teaching this particular thing to students, is the idea that when
I talk to students I'll ask, "Hey, you know when we talk about users, who's using
this system?" A lot of times I'll get feedback from them
saying, "Well, everyone's going to be using this particular sort of thing,"
Everybody is my user group, basically. And so I would tell them, I have
this slide pop up and say, "No," that you can't assume that everyone is
going to utilize what you're trying to put together. Difference between
another faculty member seeing this information versus my three-year-old
daughter seeing it kind of situation. Like, there's going to be some specific people
that are going to be utilizing this particular webpage or visualization, and
we need to design specifically for that. Things to think about in terms of user
analysis, age, gender, educational level, reading ability, basically a lot of task
relevant skills and familiarity to the product idea as well. So for us
it was basically fellow researchers or doctors, roughly 25 to 60, gender, both
male and female, and then familiarity to the product they would be familiar to the
concept, but the idea itself is very novel, so it's basically a novel way of
actually presenting this information.
Environment goes into where this is going to be utilized, and this is
actually more crucial than most people think. Typically you'll think
about things like location, temperature, or lighting, things like that, weather
or noise, stuff like that, and again that's more for any types of system. So for
us, we had to consider the fact that he wanted to present this information at a
conference, which he did not know if he would have Wi-Fi access, it was meant to
be during a presentation, and also he wanted to provide a voiceover while
he was showcasing this particular visualization. And that's why the
final product ended up being an animation. He could download it, embed it
into one of his Powerpoints, and just push play, and have it play out as well.
Another thing that this brought up is the fact that while we
were developing it and if we're going to be using it for an animation, we actually
had to talk about putting a script together, so he would give me
information so I knew where pauses needed to be, and where text needed to be
as well. So a couple crucial things were learned through the environment
analysis. Tasks basically is, what do
users need in terms of what tasks are they
interested in having and how do we accomplish those tasks? So the functions
needed to do that. For us it was, present a novel idea that showcased the two
specific scenes and the function basically means the visualization
would have to smoothly transition between those two different scenes. So
basically, when data was at the top of the screen and then moving to
specifically the other visualization at the bottom. Task
number two would basically show small examples to build to larger ideas, and so
for us we decided, instead of showing all the information at once, we were just
going to showcase one specific year, so 2015. So basically, taking the entire set
and then specifically stopping and talking about specific
points first, then introducing a year, and then giving the whole data set
at that point. So couple things, design for short video, something that
can be embedded into a PowerPoint, and develop a script for small data
set to one year, to all the data. In terms of design, one of the best ways to
actually go about doing a design- process, if you will, is the idea of
iterative design process. Sometimes, it's a situation where
I'll kind of reference some of the students I've worked with over my time
of teaching and things of that nature, they always kind of
would have a project and a deadline for a project, they would put
all the projects, you know, they would develop the project, and at the end of it
they would just hand over the project to the teacher. So they would turn in the
assignment if you will. And in situations where something like this is going to
used in a presentation, we need to have sort of a back and forth between myself
and that faculty member. So we will start with basically that sketch, first
draft, second draft, third drafts, all these drafts basically till we get to
a final product. And that's basically this iterative design process. I'd like to
showcase it, I'm only going to show about two minutes, I think two
and a half minutes, of this particular TED talk, it's about eight minutes long, I
highly recommend maybe coming back to it, and checking out the rest of it, but it
talks about the iterative design idea. It's specifically for something
called the Marshmallow Challenge. So I'm going to mute myself here, and put this
back in place. So again, I'm only going to show a couple minutes of this.
"Several years ago here at TED, Peter Skillman introduced a design challenge
called the Marshmallow Challenge and the idea is pretty simple: teams of four have
to build the tallest freestanding structure out of 20 sticks of spaghetti,
one yard of tape, one yard of string, and a marshmallow, and the marshmallow
has to be on top. And though it seems really simple, it's actually pretty hard,
because it forces people to collaborate very quickly. And so I thought this was
an interesting idea, and I incorporated it into a design workshop and it was a
huge success. And since then, I've conducted about 70 design workshops
across the world with students and designers, and architects, even the CTOs
of the Fortune 50, and there's something about this exercise that reveals very
deep lessons about the nature of collaboration and I'd like to share some
of them with you. So normally, most people begin by orienting themselves to the
task: they talk about it, they figure out what it's going to look like, they jockey
for power, then they spend some time planning, organizing, they sketch in, they
lay out spaghetti, they spend the majority of their time assembling the
sticks into ever-growing structures and then finally just as they're running out
of time, someone takes out the marshmallow, and then they generally put
it on top and they stand back and, ta dah! They admire their work. But what really
happens most of the time is that the 'ta dah' turns into an 'uh-oh', because the weight
of the marshmallow causes the entire structure to buckle and to collapse. So
there are a number of people who have a lot more uh-oh moments than others, and
among the worst are recent graduates of business school,
they lie, they cheat, they get distracted, then they produce really lame
structures and of course, there's teams that have a lot more tada structures and
among the best are recent graduates of kindergarten. And it's pretty amazing, as
Peter tells us, not only do they produce the tallest structures, but they're the most
interesting structures of them all. So the question you want to ask is, "How come?
Why? What is it about them?" And Peter likes to say that none of this, none of
the kids spend any time trying to be CEO of Spaghetti Inc, right? They don't spend
time jockeying for power, but there's another reason as well and the reason is
that business students are trained to find the single, right plan, right? And
then they execute on it. And then what happens is when they put the marshmallow
on top, they run out of time, and what happens? It's a crisis! Sound familiar?
Right? Okay, what kindergarteners do differently, is that they start with the
marshmallow, and they build prototypes, successive prototypes, always keeping the
marshmallow on top, so they have multiple times to fix it and build prototypes
along the way. So designers recognize this type of collaboration as the
essence of the iterative process, and with each version, kids get instant
feedback about what works and what doesn't work."
Okay, and yeah, again, a couple more minutes, he
goes into a conversation about how when incentives are used as well,
how that changes the construction, how well it actually is
done in terms of a complete structure, kind of a cool initiative for
that as well, so check it out if you're interested. But it sort of
highlights specifically
the idea that, you know, basically, we have to think about design
processes in terms of iterative design, it can't just be a final marshmallow on
top of the design process. Last thing in terms of just things to
consider, critiquing, I kind of bring this in here just to, on the last
two sort of points, basically, you know if you're working and you're
working with that faculty member, you want to make sure that when you get
feedback you're getting an idea of why they have that
particular feeling, so you can make sure you design specifically between, focus on
that why and make actionable suggestions. So basically when you're trying
to get feedback, make sure we have a good plan put in place for
the next iteration if you will. So back to the technical side of things, so this
was our first design, and basically I sent this out, we started working
from there, I have a couple little emails back and forth, couple
of the things, one of the nice things about starting at this level it
was, one, we were able to find an issue with my code in terms of, I've mentioned
that this was months, when actually it should have been weeks, so they should
have been basically per week and then per year as well, and so we were able to
correct that, I had some questions about the data and the max values, as you
can see there was a lot of max values up here and I was wondering
about that and I was able to get that feedback to get our second
round put together. Things I learned from that process was that anything that had
a value of zero or N/A, we need to remove it
Month should be mapped to week specifically, not you know, month to month,
kind of situation and...
we were concerned with, we were comparing the date taken that of the antibody
value and the date that was
taken versus the antibody count itself, so a histogram
final display. And so here, the second iteration of this basically put
these two ideas together, so we have our two plots, and I'll show that real quick
here... Second design, and so this was the second design, and so basically we see a lot
more data being filled in because I changed it from months to weeks, we also
have a couple of simple interactions at this point, so anything
with a N/A value or zero is immediately removed, which happened to be values
basically around 150 and lower and
so, we got that out of the way, and then the next thing we did was I wanted
to transition smoothly from the top plot down to the bottom plot and that's what you're
seeing here right now. This worked in terms of getting some ideas together,
but we weren't satisfied with that version as well. So what we talked
about, and I'll talk about that right now. First of all, the first animation needed to
be quicker. It was basically very quick we didn't need to really see that
information so that had to be sped up a bit. That is in batches, one of the
things that I was told about was, because of these weekly pooling
of information, or testing, or something to that effect that a lot of the the
information was actually pooled, you know, so you can actually see specific sort of
patterns in the data... And I'll maybe refresh this so you can kind of see that
there is data, gap, data, gap, data, gap, data, gap, and so on and so forth. And so could
we use that to our advantage to tell our story?
Okay, the next thing is also to slow down the second animation. Originally as you
can see here, basically, I'll just say random values were
being moved from the top to the bottom, and we needed to show that in a more
elegant way as well, just to tell that story better. And so, I'm sorry, the
wrong image here, but I'll show you the final one for what we have... This is our
third design, so a couple things we wanted to be changed on this is that we decided to
color code, these weekly bins if you will, and again you can see
data, nothing, data, nothing, data, nothing, so we were able to, I'll just say,
loosely cluster all this information. We're focusing on just from 2015... well
one other thing we did but that I didn't mention specifically was we had a common
x-axis, so we have a date/time lined up so we can tell that if something is
happening up here, we can map it directly to the same timeline. Now when I
click, very quick, get rid of that data, click again, and we transition and what
it's doing now is actually transitioning from the lower values up to the higher
values of the antibodies. And you can kind of see the lower values map farther back
versus the higher values, which makes sense in that regard. So I'll let just
kind of play out for a second here, but this was our takeaway in
terms of one of our good final products if you will.
There was a couple designs in-between all this and whatnot, but for the most part, this
is what we were looking to accomplish and tell that
specific story. A couple other things: Basically, you know, same at the top and
the bottom, we've kind of already mentioned a lot of this informatin, what
we learn in terms of, we also filtered the data and clustered basically on that
weekly data collection. So if you're interested, say you design,
you put together this animation, and now you want to put it together in
terms of recording it and creating a natural animation. For Mac
users, I think they might natively have something that you can use to record
your screen, but if you're a Windows user, I highly recommend something called the
Open Broadcast Software or OBS. A lot of people are utilizing this now
for recording videos and putting them on YouTube or on streaming
services that are out there, but it's a very easy way to record actual
video for your project. So it's also free as well, so you can play around
with it and actually record some of these animations and so you can do that
for projects as well. And one other thing I'll mention about that, is when I finish
up a video, sometimes PowerPoint has some issues with encoding issues or something
to that effect. Another website, it's free to utilize if you're only using for it
for a smaller project, called Cloud Convert, you drop your video file, your
mp4 or whatever that your video is, and then you can change it to different
formats, make sure it's the right encoding for PowerPoint and all that stuff,
so this is a great resource to utilize. So yeah, that kind of hit
specifically everything I wanted to talk about today, we talked about
going through some of the human factors of design, things to consider, ideas to
consider as well, we talked about how we sort of approach projects in terms of
things to consider in terms of affordances, anti-affordances, conceptual
models, mapping, everything of that nature. And so you kind of get
that relationship, also we talked about introducing the project and
walking through some of the basic steps, we talked about paper prototyping
and that iterative design process, some of the common questions I
get into in terms of that front-end analysis, so who are we designing for?
What environment will be utilized? And then finalizing that project. So
from here, I'd like to thank everybody for coming out today, I'd like to stay on
the line here just so if there are any kind of questions, I can answer them now,
if there are follow-up questions, feel free to email me at
pmd19@psu.edu and i'll be happy to follow up with you in that regard as
well. If there's any kind of clarification, always feel free to email
me in this regards, but again, I'd like to thank everybody for coming out, this is
our last workshop for at least the summer, hopefully we'll be coming back
with these in the fall, so if you have any suggestions, again, email me or check
out the survey that I'll be sending out probably tomorrow morning, and provide
some feedback so I know how to design some of these for moving forward. So
again, thank you for coming out, I'll keep an eye on the chat here...
So if there's any questions, if not, again, thank you for coming out today and
I appreciate everyone taking the time to check out designing some data
visualizations and the human factors involved with it.
You're welcome everyone, I very much appreciate you guys coming out to
hear me talk today, so again feel free to email me or contact me, and I'll be
happy to have a follow-up with you as well.
So there's a question in terms of the video, I do record these and I send
this off to the Institute for CyberSciences and they actually will have it on their
YouTube page, so if you check out their YouTube page, again, it's ICS or Institute
for CyberSciences, their YouTube page through Penn State, well, they're a
Penn State Department and they have a YouTube channel, you'll eventually see it
up on there as well, so it will be made available afterwards.
Again if there's any follow-up questions, please let me know, I'll be happy to
address them, if not, again, thank you for coming out today!
you
you
I'm going to close up things on my end here if there's any follow-up questions
please feel free to email me I'll put my email address in the chat : feel free to
email me and I'll be happy to follow up but I'm going to close out for today
again thank you for coming out today!
For more infomation >> Ron Paul slams tech giants for censoring libertarians - Duration: 5:29. 
For more infomation >> Pavê de Chocolate, Café e Amendoim (Sugestão para o Dia dos Pais) - Duration: 2:49. 
For more infomation >> Bitte keine Entschuldigung – Joyce Meyer – Mit Jesus den Alltag meistern - Duration: 25:01. 
For more infomation >> Alerta por redadas históricas de ICE | Al Rojo Vivo | Telemundo - Duration: 2:30. 
For more infomation >> Caen estafadores que fingían ser familiares de víctimas | Al Rojo Vivo | Telemundo - Duration: 1:24. 
For more infomation >> Julión Álvarez espera normalizar su situación legal | Al Rojo Vivo | Telemundo - Duration: 2:32. 
For more infomation >> Tras las rejas líder del cartel de Tepito | Al Rojo Vivo | Telemundo - Duration: 2:38. 
For more infomation >> El momento en que un acusado de violación muere baleado | Al Rojo Vivo | Telemundo - Duration: 0:44. 
For more infomation >> Mujer drogada dio a luz en el baño de un restaurante | Al Rojo Vivo | Telemundo - Duration: 0:33. 
For more infomation >> Marisela revela con cuál de sus exparejas cantaría | Al Rojo Vivo | Telemundo - Duration: 2:38. 
For more infomation >> Juez ordena regreso de madre e hija deportadas | Al Rojo Vivo | Telemundo - Duration: 0:59. 
For more infomation >> Serias advertencias por usar cremas para blanquear piel | Al Rojo Vivo | Telemundo - Duration: 0:41. 
For more infomation >> Revelan video del interrogatorio de Nikolas Cruz | Al Rojo Vivo | Telemundo - Duration: 0:40. 
Không có nhận xét nào:
Đăng nhận xét