The Full Stack of User Experience
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Part Number | 40 | |
| Number of Parts | 52 | |
| Author | ||
| License | CC Attribution - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/32722 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
DjangoCon US 201640 / 52
6
10
13
14
17
20
23
31
36
44
46
47
48
49
00:00
Point (geometry)Group actionDistancePhysical systemDifferent (Kate Ryan album)AreaMultiplication signProcess (computing)Arithmetic meanMereologyLine (geometry)Product (business)Network topologySelf-organizationBus (computing)Library (computing)Digital libraryDisk read-and-write headRegular graphToken ringComputer-assisted translationFocus (optics)UsabilityForm (programming)Service (economics)Shared memoryTransportation theory (mathematics)NumberDirectory serviceMappingGraph (mathematics)Wave packetLimit (category theory)Latent heatGraph coloringGodRight angleInformationStatisticsComputer architectureAnalogyCountingArmStandard deviationVisualization (computer graphics)GradientSoftware developerIntegrated development environmentState of matterMotion captureBuildingCircleBitFerry Corsten1 (number)Heat transferBusiness objectOpen setStrategy gamePulse (signal processing)Interactive televisionContent (media)Web 2.0NP-hardAnalytic setNatural languageCore dumpComputer iconWorkstation <Musikinstrument>Object (grammar)Carry (arithmetic)Slide rulePerturbation theoryPlastikkarteWaveUMLComputer animation
08:40
Mechanism designWordSoftware testingState observerKeyboard shortcutProduct (business)Video gameNeuroinformatikTracing (software)HypermediaMultiplication signExpected valueProjective planeCellular automatonPopulation densityQuicksortWave packetContent (media)Point (geometry)ACIDMessage passingEnterprise architectureBounded variationBuildingImage resolutionMereologyOperator (mathematics)Internet service providerObservational studyPrice indexPole (complex analysis)Office suiteContext awarenessField (computer science)Social classSheaf (mathematics)Directory serviceWater vaporIntegrated development environmentFrustrationPower (physics)Mathematical analysisTextsystemStrategy gameSoftwareView (database)Software industryData conversionPattern languageDrop (liquid)WebsiteAirfoilProcess (computing)Type theoryBootingBitContent (media)Physical lawPresentation of a groupTask (computing)Computer virusComputer animation
17:06
Computer architectureMultiplication signData structureInformationMessage passingDifferent (Kate Ryan album)Context awarenessStrategy gameTheory of relativitySystem callContent (media)Group actionOnline helpProduct (business)WebsiteLine (geometry)Natural languageProbability density functionService (economics)Self-organizationCoefficient of determinationWeb pageDescriptive statisticsMetadataPlanningType theoryAnalytic setHierarchySpreadsheetPosition operatorRight angleExistential quantificationMereologyPattern languageHypermediaParameter (computer programming)Office suiteArithmetic mean1 (number)Level (video gaming)Confidence intervalSpectrum (functional analysis)WeightMathematicsFigurate numberCategory of beingLogical constantCellular automatonSlide ruleLattice (order)WordTerm (mathematics)Insertion lossReading (process)Computer animation
25:32
DataflowWave packetMenu (computing)Line (geometry)Context awarenessComputing platformIntegrated development environmentInteractive televisionProduct (business)Group actionDefault (computer science)InformationLevel (video gaming)Graph coloringWorkstation <Musikinstrument>AreaDigital libraryComputer architectureDependent and independent variablesElectronic mailing listSingle-precision floating-point formatPlastikkarteMikroblogGoodness of fitRight angleNatural languageProjective planeWebsiteUser interfaceMappingSheaf (mathematics)DivisorSign (mathematics)LaptopTerm (mathematics)PlanningTransportation theory (mathematics)Uniform resource locatorMobile WebDecision tree learningSpacetimeFrame problemMereologyDifferent (Kate Ryan album)Data structureSocial classTime domainSelf-organizationWordNumerical taxonomyVideo gameContent (media)QuicksortDevice driverRevision controlConservation lawNominal numberTheory of relativitySoftware testingGreatest elementSpecial unitary groupFree productSystem callComputer animation
33:57
SpacetimeTransportation theory (mathematics)HypothesisTelecommunicationContent (media)Strategy gameWeb pageSoftware testingHierarchyInformationComputer architectureGroup actionVariety (linguistics)UsabilityCodeAnalytic setCircleObservational studyDifferent (Kate Ryan album)Product (business)Point (geometry)Differential (mechanical device)GoogolWebsitePressureWeb 2.0Form (programming)BitContent (media)AreaComputer iconVisualization (computer graphics)TwitterGraph coloringPlanningPattern languagePhysical systemRevision controlMeasurementDisk read-and-write headInteractive televisionSelf-organizationExecution unitInformation extractionStandard deviationQuicksortNumerical taxonomySet (mathematics)Bus (computing)Student's t-testFamilyFlow separationTrigonometric functionsBoss CorporationMereologyTask (computing)Interface (computing)Computer animation
42:23
Computer animationXML
Transcript: English(auto-generated)
00:21
stack developers which are, from what I understand, front-end and back-end. They kind of do everything. User experience has these different disciplines as well. And today we're going to talk about them a little bit. What are their goals? Why are they here? Essentially, with the designers you work with, like, I want you to come away with at least some language to be able to talk with them, but also
00:44
some keywords if you want to go Google and some, do some more searching and a deeper dive in the user experience. I will try to hold some time at the end for a Q&A. So to get started, why did you use your experience? What's this UX thing? It is a hot topic right now.
01:03
UX designers, there are not enough of us for all the job openings. That's a statistic from Jared's school. There is a UX design school opening up in Chattanooga, Tennessee if you decide to change careers and want to do this at some point. So to get started, Usability.gov defines it as
01:21
user experience focuses on having a deep understanding of users. So users are number one. What they need, so user needs. What they value. We also need business goals and objectives. Our users' abilities and also their limitations.
01:42
So that's our Usability.gov definition. Nielsen Norman Group is an organization in the UX world. They do a lot of research into behavior of people and how they use the web and products. They have a little bit broader of an approach here on their definition.
02:02
User experience encompasses all aspects of the end user's interaction with the company, its services, and its products. That's definitely a little bit more broad. Usability.gov is definitely more pinpointed. However, the key takeaways that we use to define user experience is we focus on our users, we focus on products, we focus on services,
02:24
we focus on goals of our users and our businesses, and we focus on our users and our business objectives. So that's the broad stroke take of what is user experience. So why is it important? Why is all of a sudden there's like a ton of jobs out there and not enough designers to fill them and every company is
02:45
asking for a UX designer? So companies are now finding out that if your users are not enjoying their service or the product that your company is offering, they will leave. They will take their business somewhere else. Apple is definitely the first company to kind of to promote user experience and it's kind of the standard right now.
03:05
A lot of designers will hear, we want to be like Apple and Apple's Apple because it's Apple. You know, you're a large company. If you work in finance, it's gonna be hard to be Apple. So that's why UX is important is the customer, your customer base is starting to demand it.
03:22
They're starting to compare your product to other great products out there. The disciplines of user experience. There's a lot. And I know if you were at Tracy Osborn's talk yesterday, I did see that she had the slide in her deck as well.
03:42
There's a lot that goes into user experience in general, into design. There's a lot to think about. So this graphic is by Dan Safer and he, with this, he aims to kind of organize all the different areas that user, that consists of user experience. But today,
04:02
we're going to be talking about six core disciplines. And these are typically found within the digital realm, but also just in general. When I say products, I'm not just speaking to digital. There is, people get, they conflate UX meaning digital. User experience can be digital. It can be, as we're seeing with this building,
04:23
not all elevators go to all floors. You know, what's going on with that experience? And that's not digital. So, you know, so when I say products, I'm being very broad here, but the core disciplines when we talk about digital, we talk about user research,
04:41
we talk about content strategy, information architecture, interaction design, visual design, and then usability and analytics. So there's the sciences part, there's the art part, and then everything comes together before it even makes it to code. So it's left-brained, it's right-brained, it all comes together.
05:03
Does that. So to get started, public transportation is a good example of what can be good UX and what can be bad UX. So for those of us in Philadelphia, and for anybody who has, who is visiting Philadelphia, if you've ridden our public transportation SEPTA,
05:22
so depending on what mode of transportation with SEPTA you are riding, you will have a different form of payment. So on some trains it's cash only, on buses it's tokens, on some other, like it's just a hot mess of things, and it makes it very difficult when you transfer.
05:45
Yeah, when you transfer from one mode of transportation that takes tokens to another mode of transportation that's cash only, and the world doesn't really carry cash anymore. Like most people are using credit at this point and you get on the train and they go, oh, yes, you have to get off at the next stop because you can't pay your way to get to where you're going.
06:03
Really hard. So we're not gonna be talking about SEPTA today though. We're gonna be talking about a completely different mode of public transportation that is Transport for London, which houses the London's Underground, their bus system, their coach system, and we'll be examining a lot of that today. How many people have been to London?
06:25
Awesome. So I went for the first time about three weeks ago, and I was like, oh my gosh, this is amazing. So we'll go through and examine some things. So one of the best things about Transport for London is they have a recognizable logo.
06:42
You know, this is the Underground, even though it does not say Underground on it. This is the Bank Street icon that they use. So you notice the Underground by the way it looks and you know, it's Bank Street with the typography on it. It's also used as a wayfinding tool. So here, this is a bus stop.
07:04
Same circle with the line, same iconography, but it looks a little bit different. It helps with wayfinding of how you're going to navigate around London. Am I going to navigate on the Underground? Am I going to navigate by bus? Am I going to navigate by coach, which is different than a bus?
07:22
Coach buses will run you between large towns, so say from London all the way to Bath, where your bus is more local to London, more of what we have here in the States. It's really well designed. It's very pervasive throughout all of London's transportation systems.
07:44
So we have the visual design in the maps and the colors of the different rail lines, contactless payment. So super awesome in London. If your credit card has RFID enabled, you don't even have to buy a ticket to get on the subway. As you go through the turnstile,
08:03
you just wave your phone and you're on your way. Yeah, who has money on an MTA card that they haven't used in a while when they were in New York? Yeah. So, you know, talk about pretty awesome. The other thing that's really cool is they have these moquettes.
08:21
So this is a moquette. Each Underground line has its own moquette, which means once you learn the moquettes, you know what line you're on. It's a wayfinding tool. So you take, you know, London's really big, so you finally find the stop that you're at, you get to the train, you're like, am I on the right platform? And then the train comes in here like, is this even the right train? Because there's like four trains that come to that station.
08:45
You can just look at the pattern on the seats and go, no, I don't need that. Yes, yes, you will take me where I need to go. So the beginning of the UX process starts with user research.
09:02
So up until this point, your business is like, we have a grand idea. We want to be awesome. Help us. Okay, you know, we can't, you know, the one thing we need to do is understand why we need to be awesome and that we can't just create stuff out of thin air. I mean, we could, but we can't guarantee that it'll work. So user research is the science-y part of user experience.
09:29
We're using scientific research methods. In Techni-Ace, we want to understand who we are designing for. We want to understand our users goals and their motivations.
09:42
User research really hones in on what is your users behavior? We're not asking at this point. Do you like this product? Are you going to use my product? My product's awesome. What do you think? We're really honing at what is your users behavior? Because the goal of user research is to identify how your product will naturally fit into the behavior of your user.
10:04
Because you can't, you could change how your user behaves. We're seeing that with Pokemon Go, a lot of people are spending time outside. You know, so there is a way to change your users behavior, but you kind of need a baseline to understand where they're at and what's going to get them,
10:21
what's going to get somebody to go outside and play a game like that. You also need to understand what are your users expectations for a product or what are they trying to do? Here in user research, you don't want to focus on will you find X feature valuable, because the users don't know.
10:48
You don't want to ask users to forecast behavior. So for example, New Year's resolutions. How many of us are still working on our New Year's resolutions in July? Yeah, okay for those of you who aren't, mad props.
11:04
If you asked in December, there were probably a lot more hands going up being like, yeah, I got resolutions going on. However, to forecast your behavior is very difficult because hey, maybe somebody got sick in March and your New Year's resolution, go to the gym four days a week, kind of had to fall through because now all of a sudden
11:22
you're sick or somebody else is sick or something happened. It's really hard to forecast, so you'd want to stay away with our user research from having users guess. So some techniques that can be used and the thing with user research is even, it doesn't necessarily
11:42
have to be your target user. Research can be very expensive. You can poll somebody who's not on your project but at your company and just get their thoughts on how they're going to accomplish A, B, or C. So interviews and observations. So interviews. Interviews are self-reported. It's one-on-one time with people. So I
12:04
get to sit with Kurt and I go, hey, what's up? Hello. Hey. We have a one-on-one dialogue. I get to ask him about what his goals are in trying to complete a task. That task is what my product aims to fill and fix
12:24
and it's self-reported in the sense of Kurt's going to tell me what his opinions are about things, any kind of stresses or frustrations he has with this building and I'm just going to take that back and completely be non-biased about that and understand and if I interview everybody here,
12:41
I'm pretty sure everybody will have a complaint about this building here. However, when you are interviewing people, you want open-ended questions. You do not want yes or no questions. If you write a question and you can and the user can answer yes or no, not good. We're aiming to get stories here. Stories are going to provide us context in how
13:02
our customers are going to potentially use our product. We don't know for sure but we can get an idea. And we're trying to gather data around that to understand how is our product going to fit into our users lives and how is it going to provide value when it finds that niche in their life? You also want to avoid asking leading questions. So leading questions are assuming that
13:26
potentially somebody got a benefit out of something when I'm trying to think, you know, let's go with an example. A leading question would be Did you feel that Tracy's talk prepared you for this
13:43
class for this lecture today? Yes or no? That's that's a close question. But also I'm assuming in that question that a you went to Tracy's talk and b that Tracy's talk prepared you for that and that's gonna People can feel weird, especially if Tracy's asking you that question
14:04
So so a better way to ask a question like that would be how did you prepare to come to today's session? At that point the user can then open up a story. Well, I took a boot camp class and then now I'm here because I want to learn more about Django
14:22
and they can tell it they can bring you into their world. So observations so observations are based in anthropological studies of field studies and observing people really. So self-reported is one mechanism. However, observing people, people what they say and what they do can be completely different.
14:46
And it's observations give you that extra layer of context and environment too, especially if you're interviewing somebody not where they're working or where they would be using your product. So enterprise. If you work on software for companies to consume, it'd be good to see your users in their day.
15:05
I worked, I did a project for a trading desk like Wall Street traders. You know what? I went up on the trading desk and I got to see what was happening in their day. Self-reported my users were could not tell me that they used
15:22
the mouse more than the keyboard. They would not observe that. They would not know that about themselves. If I asked them about it, they would go, I don't know. Most people aren't telling the time they are on the mouse versus the time they're typing on a keyboard. But observing, I can see as they're interacting with their software in their computer that because traders have, they're on the phones,
15:44
they might only have one hand free. You know that they do a lot of mouse clicks which will inform when I go to design that maybe I want to stay away from clicks on the keyboard and stay with clicks on a mouse just because their behavior does not
16:00
accompany the keyboard clicking and the keyboard typing. So content strategy. Who's heard of content strategy? Okay. Content strategy is one of these not totally pervasive in companies yet,
16:21
but they're learning. So when people come to your product and they're coming to absorb things, however, they're coming, your site's going to have content on it. You're not just going to make it pretty, give it a drop down and not put any content in your drop down because not useful.
16:41
So the goal of content strategy is to ensure that your product's message is being delivered and that your users understand that message that is being communicated to them. It's the voice and tone of how you talk about things. You know law firms are very formal in their presentation where a tech company is a little bit more casual
17:05
and how they might talk about things. It's you know our lawyers and our employees versus our crew and our team members and you know, how they're how you're going to talk to your customer base about that. It also covers how
17:21
how your content is going to be governed. So I'm pretty sure a lot of us have been the websites and the content is like way, way, way out of date. It's for a product that might not exist anymore or they changed that feature and they didn't take that content down and you came across it and you're like, what is this? Your content strategist, part of their goal is to put some kind of governance in place to get rid of what we call content rot.
17:46
So rotting content, content that goes bad because things move along, language changes, your products evolve and if you're not taking down all that old stuff somebody's going to come across it and you might get a phone call because that help article did not really help them.
18:06
A couple things with content strategy that you that you can do and get started and it is the writing guidelines. So for anybody writing content for your site, what are the brand values they need to be writing to?
18:21
So your product's brand. What's the voice and tone? I mentioned lawyers. Are you designing a site for for lawyers and it needs to be very formal because that's how the legal industry operates or is this more of like a technology site? Hey, we're fun. Come work with us. You get like unlimited PTO and like dog friendly
18:42
kind of thing, you know, like how how are you communicating to that where it's like, yeah, we offer these services and you know the difference between the two is like legal services, you're usually in a crisis if you're going to a lawyer for something and you know the big thing to keep in mind is on that spectrum,
19:00
you know, you you do want to be very clear and stated. It's not a time to be funny if somebody's going through a crisis. So this is where content strategy comes in is you need to understand the context of your user and how they're absorbing that content and your content strategist will be like this is how we're talking to our users because we did our user research and we know that this is our user group.
19:23
So message hierarchy. So this is how you tell your story. Your story will start with your primary message of what the goal or the brand of your site is. You want it to be valuable and understandable.
19:43
From there secondary messaging are the key messages that support your primary message. So your primary message is we are x company. Here's what we do. You know, your secondary messaging is maybe why you're doing what you're doing. And you want to consider the facts and the data on the page as well
20:02
as you're putting these messages together and then any calls to action. So the big thing with content is I come to a website, I gather content. What do I do with that content now? The big thing that you want to make sure is when you're writing content or asking a content writer for content is
20:21
can your user take action on that content? If it's legal content like your terms of service, maybe not. However, anything else am I, are you positioning me to sell something? Do you want me to buy? Do you want me to get help? You know, how am I going to get help? You know, you're messaging me that something's wrong.
20:42
Great. What do I do now? You know, putting messaging in line that's like here's how you go get help to fix your problem rather than providing dead ends. So calls to action are incredibly important. And then metadata. So metadata, it totally comes in to content strategy.
21:05
We spend all this time putting these guidelines together, figuring out our voice and tone and what we want to say to the customer. So using SEO analytics and the guidelines that we've put together, what's the metadata going to be on the pages? How is that going to populate throughout your title tags, your description tags, your HTML tags, and your title,
21:26
those HTML title tags? Because SEO is going to come for them and user research, we know what language our users are using to reference what could be our product. Re-following user research now informs us.
21:43
And then you can go go on from there. So taking a look at this because content strategy is still can be a little difficult to grasp. So New York MTA, which owns the subway, and Transport for London are both public entities and they have to publish their budgets.
22:04
Pretty dry information. However, this is the first line of the body of their body copy. So they have their title. Hey, you know, we're here for budgets. Transport for London is pretty informative. This is the budget year we just passed. It was passed on this date. Here's what you can find here.
22:26
MTA is like, here's PDF. Enjoy. You know, so you might not know what the user exactly is coming for when they come to the budgets page, but to help them, it's setting context.
22:42
You know, Transport for London, it's sending context that, okay, I know this is a recent budget I'm looking at, and I know what the goal of this budget is. For the MTA, I'm just, I'm expecting a giant Excel spreadsheet right now. So yeah, so with content strategy, you want to avoid content rot by having a governance plan as well.
23:06
So this is some type of intake, copy scrub, maybe every six months, maybe once a year, to get rid of the old stuff, introduce new stuff, things like that. Moving on. Information architecture. So this is my personal love. I love organizing things. Who loves organizing their closets?
23:28
Has anybody organized their sock drawer? Oh, yeah. Okay. So information architecture in the digital sense, it's the underlying glue to everything that's going on.
23:40
It focuses on the organization and relationships of your content. So this is why we don't wait for content to be the last thing, because we need content to organize on the site, right? So to save your content for last is not going to help very much. So
24:00
I mentioned information architecture. We organize information, we create relationships. We take you content A and you content Q, you're related, so we're going to put you together. A lot of, I had on my first slide, the post-its. UXers love post-its.
24:21
And they're also, because you can take that information and create relationships with that, with the content that their content strategist is working on. So here we're talking about structuring and labeling. Bless you. Thank you. Structuring.
24:41
How is the organization, or how is the content related to each other? But then within those organizations, those little clumps of related content, how do those relate to the other things around it? And then how does it relate to the product? So it's this really like, you have one post-it,
25:02
you have a group of post-its, you have a wall of post-its, you have a room of post-its, and everything is tied together and everything relates to one another. Everything can play off of each other. So the whole goal of structuring is to work to provide meaning of behind the content. And it also provides structures. So
25:26
an example I often give of IA is Bed Bath and Beyond. When you go and it's like anything and everything for your home, you can get lost in there. However, if I found laundry products in my kitchen section, okay, who's going like, huh? Yeah, that's information architecture. It's putting those relationships. So
25:48
you know, your laundry detergent should not go next, you know, probably doesn't go next to your dish detergent because your dish detergent typically from your user research you know is classified as kitchen, kitchen cleaning item. So maybe it goes in the kitchen section or
26:01
you know, your utensil dividers. You know, do your utensil dividers belong next to the dryer balls that go into the drying machine? You know, like yeah, I see faces you're like, huh? Information architecture goes you two people, you two items, you don't belong together. But you two, you know,
26:21
the utensil rack and the baking pans, you all can go together. You can hang out and be friends. Labeling. So labeling is super, super, super important because it conveys meaning and in the world of taxonomy, which is defining of terms and concepts,
26:42
you know, who's been on a project where you've had four terms for one concept? The business calls it one thing, research is calling it another. Yeah, so labeling is incredibly important because you can have exactly what you're dealing with on your teams right now and a lot of confusion can happen because of it. So
27:02
working on your labels and how do you get to your labels? You do your research to understand how your users are talking about things and what kind of language they're using. And then you work with the content strategist who helps to figure out like, okay, we're going to talk about the product in these terms and then we're going to label things based off of all that work that's been done up until now.
27:23
So a couple IA examples outside of digital. So in the underground, larger stations actually have one-way hallways. So we'll see no entry and you'll see the underground and once you get underground in the large stations, it's literally a single hallway and everybody's moving in the same way. You're not running into people who are going opposite of you.
27:46
Really awesome for traffic flow and getting you to where you need to. So we're running through the tunnel and then we get to a platform and what do we do? Oh my gosh, how do I know where I'm going to go and what line I'm on? And am I going east, west, north, south?
28:02
These are awesome because it tells you northbound serves these stations. Southbound serves these stations. Depending on where you want to go, the sign's going to help you and the labeling based off of usually location in the public transportation area is going to tell you where you're going. So you come here and you're like, okay,
28:23
I'm on the Jubilee Line, awesome. I'm going to go southbound and we're going to go see the London Bridge. Great. So we go and get on the platform and the train pulls up. Oh awesome. It's the Jubilee Line market. So now we know we're on the train right now.
28:41
Information architecture is the underlying, is underlying all of that. It's helping you weigh fine. And we talk about site maps and navigation structures, all of that falls into information architecture. Wireframes as well.
29:01
Interaction design. So people are coming to your product, they're looking for stuff, they're obviously going to interact with it somehow. So interaction design focuses on the behavior of the product and the interaction between the user and your product.
29:23
So how does your product respond to the user's input? We see this a lot with phones, the tap, the swipe. How do you know to navigate around? There was a designer who was like, we're going to make this a swipe. We're going to make this a tap. We're going to make this one a tap and hold.
29:41
A designer is actually thinking about this stuff. So your interaction designer is going to be focused on the environment and transitions. So your environments are setting the context for your user.
30:04
I'm here in Huntsman's Hall at Penn using my phone. I am at home using my desktop to work online, to do work at work. Those are your environments and that context might change how, what you're going to serve to your
30:22
user base. The transitions are moving between contexts. So I start, you know, Amazon's really great at this. I start browsing something on my phone and then I'm like at home on my, you know, sitting on the couch on my iPad and they go, oh, hey, yeah, you were browsing this or you added this to your cart. Then I go on my desktop because I'm still weird about purchasing stuff on my mobile devices.
30:44
And it's like there, you know, all throughout these different, you know, I'm moving, I'm transitioning between contexts. I'm able to pick up right where I left off. So the user's
31:01
environment will impact how you present that information. So whether you're on a mobile device or if you're on a desktop, if you're planning your journey on public transportation or if you're in the middle of your journey. All right, if I'm in the middle of my journey, I'm most likely not on a desktop or a laptop of some sort. So how is your product going to
31:23
meet those user needs as they switch between these environments and these contexts, these contexts. Transitions are key and we see this as you take public transit, the transition of buying your ticket to getting, to actually getting onto the train platform,
31:43
to boarding the train, to getting off the train at your stop, you know, and here in Philly, we don't have to do it, but I know in New York you have to swipe your card again. I'm pretty sure. I can fit in there in a while. But in London, you swipe your card to go in and you swipe your card to go out and then it charges it. Here in Philly, we don't do that. It's like pay when you go on, you're good.
32:02
Those transitions are key in understanding and making things easier. You know that contact list I brought up, like it'd be awesome if America had that, but we don't. So looking at this digitally, this is the status updates for the London Underground.
32:23
So here we can see on the left side our information architecture shows, here's all the different lines, here's all the, all the statuses for them, the London Overground and Piccadilly line are having some issues. And this is the default map that we're seeing. So typically when you see the London Underground map, you have all these colors,
32:44
but here the colors are kind of gone. And you see there's this, I'll go in with this, we got blue and there's like an orange here, an orange here, and it's like, okay, like are those working, are they not working?
33:02
It turns out you can change your context of how you're understanding this information. So your interaction designer is, right now they have their, there's this like menu that pops up over, you know, your interaction designer in the digital space, could it be a radio button
33:22
that allows you to switch? You know, could it be an overlay? They're determining, your interaction designer is looking at all these different things and how is somebody going to interact with these? And then this is the mobile screen. So here, and then if you want to view the map, you click
33:43
and it just like appears, there's no animations or anything. Your interaction designer can totally put in some cool animations. Well, you all can code the animations, they'll say we can do an animation. So,
34:01
so to continue on, visual design, so this is like so much, right? Like some, in some companies there's one person who does all of this, FYI. So visual design, this is like the first impression that people usually have. They look, you know, they pull up the product, it's like, oh this looks awesome. Your business is going to say more about your visual design than they will about your information architecture
34:23
or anything, any of the other work you've done. Just because it's, there's something about color and typography that give people that this, like this visceral reaction of like, oh, I love it! Or like, oh, that's awful. There's just something about it where information architecture or like content strategy people are like, okay, cool.
34:41
Like, like your idea. So with visual design, visual designers establish systems and they establish patterns. And they are to be, you know, the whole goal of this is to be utilized and reused and reused and reused with a variety of different products. Visual design will differentiate,
35:02
as we saw earlier with the London Underground and Transport for London roundel, as they call them, with the circle and the line across. But it also unifies. So, you know, with the roundel we, you know, we saw earlier, oh, that's the underground. Oh, that's the bus. Oh, that's the coach. They all look the same, but they're different.
35:24
So it's unifying that this is a transportation mode, differentiating what mode of transportation. So here, and I know there were some talks on this a little bit earlier. So visual design,
35:41
you know, some aspects of it are typography, color, and space. So, typography, we use heading sizes to designate the hierarchy of the page. So your information architecture is going to go, these groups of information go together. Your visual designer is going to lay them out in a way so that your user can visually distinguish.
36:05
Group A belongs up here and group B is this group of information and group C is this information. Headings always help with that. That's why we have, I think, what is it, up to H6s in the HTML now. I'm not coding that much anymore. So,
36:21
you know, but there's a reason for that and you can utilize it here. We use color just to distinguish a lot from one another. So there's a, you know, there's definitely accessibility that needs to be, you know, thought about here. We're not going to get into that today. And then space. So space is the other form of,
36:41
another way of showing architecture. You have your heading of an H1 and then your paragraph, but then visually representing like this item and this item that's a little bit further away are two completely separate items. So these are the roundels for Transport for London.
37:02
And it's really cool to see how one icon can be used in eight, nine, ten, eleven different ways to represent eleven different modes of, well, really like ten modes of transportation because that first one is the Transport for London logo. But the differentiation between them two.
37:22
So your IA is like, we need a logo. We need a way to say this, this is a mode of, special mode of transportation, but your visual designer will go, okay, this is how we're going to tell them all apart. And here, you know, we see really big, like coaches, this is a coach stop.
37:42
And we can actually see behind here, we have a bus stop too. Spatially, they're not even on top of each other. They're like maybe, you know, a couple feet apart. But on the coach sign, it's clearly, okay, this is a coach stop. Here's the stop name. We're at Hyde Park Corner.
38:01
Here are the buses that come here, the coach buses. And then without getting in the details, here's the bus operator. So usability and analytics. So usability is really awesome because we did all this work
38:22
and now we get to test it all. So science comes to play back in here. So why do we want to do usability? Has anybody sent out code without QA-ing it? Like do you do that normally?
38:41
And that's what I thought. So usability is our way of testing whether our design met what we learned. So we did our user research and we can set up a hypothesis on the user research. Then we do all the content strategy and the IA and interaction design and visual design and it looks awesome.
39:01
Now usability is going to tell us how close we were to that mark that we were able to gather from the user research that we did all the way at the beginning. So it's our version of QA-ing essentially. Some techniques for usability studies. There are task-based studies. So here
39:26
you tell, you're going to have your participant go, I need you to plan a trip. You're going to you're going to plan a trip from Westminster, Westminster Abbey over to the London Bridge. Can you show me how to get there?
39:45
And your user would go through your transport for London site and you know, hopefully they have no problems. However, if you find after three or four or five participants that they keep getting hung up on one aspect of that plan your journey
40:03
or they're just not able to complete it at all. That's obviously an area where you're going to have to go back and rethink. But the good news is you didn't code it. So it's a little bit easier to do that now. So the task-based studies, that's really what it's for. At this point you can start asking questions about
40:23
you know, about the product. Like, you know, can you tell me what you see here and how, you know, how would you use A, B, and C on this product? The one thing with the task-based study though is if a user is struggling, so if you're having somebody plan their trip on the transport for London site
40:45
and they're like really really struggling, do not show them how to do it. Do not. A, we're testing the interface. We're not testing our participants and we don't want them to feel like they're stupid. Because a lot of people will be
41:02
putting pressure on themselves and they're like, oh, I just don't get it. It's me. Just ask them, how would you complete this task? Because that's, there's a purpose in that. And, okay, so we're going to run through this real quick. But the purpose of asking how would you complete this is getting insight
41:22
into how, how they're thinking and how they would accomplish that task. Zero? Okay, so I'll give you this term. You can go google. Gorilla usability testing. So real quick to wrap up, user research focuses on understanding.
41:43
Content strategy focuses on communication. Information architecture focuses on organization. Interaction design focuses on transitions. Visual design focuses on clarity. Usability and analytics focuses on measurement. So ladies and gents, that is full stack of UX.
42:02
It's a lot. At some companies you have one person who does this all. At web through companies you'll usually have people split up into some kind of specialties. So if you have any questions, I will be here today. You can find me on Twitter. So, thank you.