This week we’re joined by HighEdWeb veterans Paul Gilzow, Nikki Massaro Kauffman, and Matt Ryan to take a look back at 2020. In this special roundtable episode, we see where they found success, what challenges they were faced with, and the tools that helped them build successful sites and do UX research despite COVID, remote work, and other challenges.
- A11y-media-player in Omeka-S
- Baby Steps for Web Components, Part 1
- ELMS:LN Slack
- ELMS:LN Studio Work in Progress
- Frameworks, web performance, and the pandemic
- HighEdWeb Lightning Talk
- Nikki’s a11y-media-player CodePen
- Pattern Lab
- Performance of Unbundled Dyanamic Importing
- Unbundled Web Components and Dynamic Importing
- Using Web Components in CampusPress/Wordpress
The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.
This is episode number 74. I’m gonna change things up on everybody, But before I do that, I am your host, Michael Fienen. Folks, have you been enjoying the Drunken UX Podcast? I hope you run by our sponsors over at nuCloud. If you’re looking for any kind of interactive mapping or illustration services, you can find them at nucloud.com/drunkenux drop in there and let him know that that the beard sent you. Otherwise, if you’re looking for us, I encourage you to go track us down on Twitter or Facebook.
It’s /drunkenux. If you’re on the Instagrams, /drunkenuxpodcast. That will find us in all of those places or dropping and chat with us, we are on a discord at drunkenux.com/discord. That will get you the invite. Do the whole thing dropping in the channel. We chat with you, you make fun of us. It’s a whole circle of life thing. Folks have a little special thing going on tonight. Unfortunately, Aaron cannot be with us.
So I thought, what better way to celebrate than the pack the house with some of my best friends in the world? That maybe sounds bad on Aaron, doesn’t it? That was not very kind of me. Um, Erin, we love you, and we expect you back here next week. As a matter of fact, um, but we had so this last week. It was at HighEdWeb And you’ve heard me mention this conference many, many times in past episodes.
It’s a giant conference of people who do marketing, Web marketing, Web development, design, UX accessibility, content strategy, all things Web related to higher education, university systems, private schools, Internet…
Keeping your sanity, doing all the things. There’s some sessions on that as well.
Yes, indeed. As I thought, What better way to celebrate? They were doing kind of a neat thing, obviously, because of co vid. So the whole conference was virtual this year, and so I reached out to a few folks and brought them in. Joining me on the other microphones are Paul Gilzow, Matt Ryan, and the illustrious Nikki Massaro Kauffman. And you know what? I’m just gonna hand everything over to you guys.
I don’t wanna do the introductions. Um, you folks tell everybody where you’re from, what you do and and how you fit into this wild world of Web things. E I love my chat. Everybody’s pointing in a different box.
Nobody is in
the same place on each other’s screens like Paul’s, just
pointing to space. Paul, tell us all about
your your the one
everybody’s familiar with. Probably because I’ve had you on the show before. So that’s Onley fair that I make you go for. All
Right, I’m Paul Gilzow, uh, at the University of Missouri. I’m a programmer analyst. I’m in charge of the along with a colleague, uh, building, designing and maintain the web infrastructure that we have for all of our sites and that I’m the lead WordPress architect for our campus.
So I’m Nicky Massaro Kaufman. I work for Penn State University and my I worked as a programmer analyst and my current position I am doing development for the College of Arts and Architectures Office of Digital Learning.
I’m Matt Ryan. I also worked at Penn State. I worked for outreach and, uh, outreach and online education. Um, and Im e am the u i slash ux designer for that group for the for the web strategy group. And I sort of what? What it says on the tin I Do you, I and you x work both on bond. Do it. Quite a bit of both. Sort of the soup to nuts of user research to deadly designed work.
Okay, so, Nikki, I’m gonna start with you. Because while Paul’s been on the show before, we’ve had a colleague of yours on Brian Oland. Ike joined us. I think is that part way through season two. I may be budging my brain on that because I don’t know these things nearly as well as Aaron does. But Brian was on. He’s one of the main brains behind the hacks CMS and hacks editor, which is a web component centric approach to kinda like what Gutenberg is doing.
But with an eye towards, you know, no dependencies on any platform, accessibility front and center, and and built entirely on open standards that make it very flexible, very portable in all of these things. So let me start there in terms of what have
doing with Web components of late? Because I know that you have gotten steeped into that world recently.
And we have another project that I’ve been working on this year. Uh, it’s a redesign for our our virtual studio because I’m working with arts courses. And how do you submit your work online for an arts course? How do you critique it? How do you encourage students to provide feedback? And we do that with a version of the studio that Brian had to put together in two weeks time at one point. And now we now that we’ve gotten past some of the co vid rush we are, you know, I have some breathing space.
Look at what we want to do with that, and that front end will be entirely Web components based. It’s going to sit as the front end to our Drew pull based systems. But if we someday one of my great off of droop a little, it just needs, you know, uh, in the html tag, it just needs attributes for the data sources, and then it will just build the interface from there. Let me ask a
quick question about that video player to, um, Is that something that you guys wrote from scratch? Or is that like I’m familiar with tools like Able Player that are very like accessibility forward media players? Is it built on top of that? Or is it something you develop? What’s the sort of nature of that player
I’m going to call it Able Player inspired in that, you know, for our needs. There was a point where Able Player was the only thing that could meet that. But I wanted something that was more component ized so that I could style it and theme it a little more a little bit more flexibly. And so there are some features that I don’t have in it yet that Able Player does. But it was definitely inspired by the Able Player work. It’s kind of like if the YouTube player and able player had a decent looking baby,
Um, let me go. Paul and Matt to you guys, um, same kind of question, but from a slightly different angle is anything especially Paul. I know with the WordPress rollout you guys have been working on and on about how that applies to things like, you know what you’re gonna do with Gutenberg, er, about Gutenberg, as the case may be, any Web component stuff flowing through any of that work? Or has it? Is it something you’re trying to avoid entirely right now?
So if you remember, maybe a couple of years ago I talked about that dream system where we would have a design system and as we built design system components, they flow into both WordPress and Gruebel. We’ve actually got that at a Alfa stage now toe almost a beta stage where our systems now actually can consume the design system. So as my colleague who is in charge of the design system updates things, he could push those out. Then I update from his system. Pull those down and it flows out to our base.
Theme is what we call it on. Those design system components are immediately available in all the sights as soon as they update. So that’s kind of the first stage. The next stage that we want to reach is to start swapping out some of those with Web components. Um, you asked you mentioned Gutenberg. We actually haven’t gone to Gutenberg. Still, the initial hesitation waas the accessibility of it. Um, it’s better now, I think from WP campus, and I forgot the speaker that talked about it.
There are about 66% completion of the different issues that were raised The challenge, though, being that as they fix issues, Gutenberg is progressing along. So Mawr issues were created, and so they’re kind of at this state of never quite reaching completion. And so one of the things we’ve discussed is taking the hacks CMS layer that peace and putting it on top of WordPress Andrew people instead of Gutenberg and using that and flowing that through the challenging needed that makes you
feel any better. We’re talking about the same thing, but not with we don’t use WordPress. We use a different CMS. But we’re discussing basically the exact same thing.
The challenge, the hesitations of ours, one we just don’t have the resource is to move as fast as we would like to do. I would like to go on the other Is is simply retraining content people in a new interface and how that works because they’re so used to the old interfaces
that’s been more than you know any technical or logistical complaints about Gutenberg. Er, you know the accessibility and what not just getting people used to it, especially when they have been used to the old style editing process, even if it’s not WordPress that that old sort of wheezy wig approach toe content editing has been so ingrained in a lot of people that the changes such a, uh, culture shock kind of thing to them. Um, I can handle it. Fine, because I understand the transition.
You know how what a block is and how to think in them. But a lot of people who aren’t technical folks who get put in charge of content bridging that gap is such a huge leap for them. Um, Matt, what about what’s going on? Then in in your outreach group, are you guys then plugged right into then the work that Nikki and Brian are doing with hacks? Or are you in a whole other silo unto yourself?
We really are in a very different silo. Penn State’s a big place, and there’s a lot of different groups. Um, and you know, unfortunately, Nikki and I have had little few opportunities to work together we, you know, sort of kept in touch. But I would say we’ve necessarily had more of an opportunity than before when I joined Penn State on Do some of that is perhaps due to co vid, um, eating at least large quantities of of my time. I don’t know about you, Nicky. If it’s eaten a big chunk of your work too.
Oh, yeah, less so than the people who are instructional designers who are on the front lines when faculty say, put this stuff online. But they’re they’re definitely effects. You know, People want this new studio redesign people who didn’t have arts courses online from the beginning. And we definitely we had issues Where, um, where when people first went online, we, um we had a you know, systems were running slower, but the web components were so fast that there was there was sort of a disconnect between the components that we were working with.
So we had the to do a little bit of re factoring. So, for instance, the the meat of the 11 y media player, um, was using the YouTube ap I. But I hadn’t thought of, you know, the way I was doing. It didn’t account for YouTube delay in rendering that initial I frame
eso last year in 2019 I did a presentation on Cem usability work we did with with Gutenberg, and this is something that the I I think it’s I think what you’re talking about is really a piece that that a lot of us who are kind of already pre familiar with many of the concepts behind Gutenberg don’t really recognize, um, the extent to which Gutenberg represents. A. You have
to have a
completely different mental model for how you interact with your Web content to use to like Gutenberg, and that for folks who are familiar with sort of classic queasy wig’s style editors, the learning curve is is much steeper, I think, than than, um, than than many people recognize Onda. We saw that some of the some of the big challenges had to do with, um, just this fundamental idea of thinking of things as blocks.
Um, that took a lot, a lot mawr for people to sort of actually sort of get their heads around that, um and, uh and Gutenberg Good. Birgit, sort of, through its design, obscures many of many of those sort of fundamental bones of of it. In its desire to also be wheezy wig as well as structured, it hides the structure to make it look like the page. Everything, like all of the discovery ability, is through mouse over and things like that.
And so and so many of the afford Ince’s and many of the sort of visual cues that might help you understand the structure of the thing you’re working with and might help you like understand that you have these blocks to work with are, um, are are sort of subordinated in the interface. Um, and I think I think if Gutenberg had a learner mode where it was not so with the wig and where, like, there was much more sort of sign posting and much more sort of omni present, um, user interface elements,
Um, it would it would really like make that learning curve much softer for users. Then people could turn it off once they’re like, you know, I’ve got this. I want sort of this more with the wig mode, but it’s sort of like at least the way it’s currently designed. We actually ended up. I ended up creating a WordPress plug in that just uses CSS to kind of at least provide some visual. Um, some more visual cues about what’s going on.
I’m immediately reminded of, like, a J query plug. And I think joyride, um, this is the one I’m thinking of, where it just lets you like, Mark certain things on a page or whatnot. And it’ll do pop ups and, you know, take you on that when you go in, like, a new product or something. And it does like the product tour or what have you? Um, something like that. I could see, you know, walking you through the Gutenberg editor. And
and Gutenberg does have a
tour. But in our in our user research, no one ever used it. So that didn’t help all that much. Its existence didn’t help. It really needed mawr. Just sort of, like always there. Interface changes. Um, you know, I think going through it to where it would have helped people a lot, but, you know, we were, and training obviously helps, but we were sort of wanting. They wanted to get up that raw usability, the of the untrained user and to see what they would do. Would they take the tour? Um, but they didn’t take the tour.
Yeah, that’s an easy one. I don’t I don’t need a lot of research to tell you they don’t read. They don’t check. Um, let’s go. So as we talk, obviously, Covert 19 has changed Everybody’s work, approach and schedule and location and all of this. Um, and I think in how I read in particular the number of fires that have sort of been thrown into your laps with regard to not just the strictly technical but Nikki, like you were saying, you know, adapting the LMS thio, except all of this content and all of these, uh, tools and features that kids need to make and they have access to what?
Let’s let’s start with the easy part. Which is where have you guys found success in terms of adapting, You know, whether that’s your work flows your tools? Um, anything. Let’s I’m leaving this table wide open in terms of what you consider success. If that’s code you’ve written or how you write, the code s so to speak.
So that’s an interesting question, because one of The things that that my co worker Brian has been working on is improving the performance of the systems that we’re using. And we’re now heavily, heavily alleged, leveraging dynamic imports. And and so, you know, in typical Java script framework land, you’re bundling up everything you could possibly use, plus your framework and loading that the first time a new user goes to your very first page, where what we’re doing with with this dynamic importing technique is that we have a cdn of Web components and all their dependencies.
And there’s none of the scripts really load other than this script that watches for which components are on the page and then loads any definitions that aren’t already cashed. So you’re only getting for each page the definitions that you have that you need, that you don’t already have, and we’ve seen a lot of performance increases are, you know, performance enhancements from that and, uh, anecdotally.
Ryan was also teaching a new information sciences and technology course when covert hit, and so some of the international students had to go back home. One of his students contacted him and said, It’s great that you’re content has been been on this hack CMS thing that you’re working on because I can’t The the third party LMS that we’re using Learning Management System is a react based monolith and from India. He was unable to access it, but he could get our course content.
And that’s that’s the sad part is you know there’s this So there’s always that build vs buy, But a lot of the built products are using frameworks. And what we we wanted to be able to have open educational resource is that we are content. You know, we have open source tools. We wanna open source the course, content to drive down the costs of textbooks. And so we had. We had built a lot of these systems so that we could author lot of continent scale and be able to share it across. We have.
We have 20 departments and, you know, and like, 20 some campuses across the state. And so to be able to share somebody teaching, you know, a basic music course at our campus we wanna be able to share. Once Kobe, it hit with the people that might be at a branch campus who teaches music course and all of a sudden put this stuff online. And with these model a third party systems, there was no way thio extract and remix that content because faculty I’ll like to teach a little differently.
I always talk about teaching as, um, it’s a lot like wearing somebody else’s clothes when you’re taking someone else’s content. It’s not exactly your style, and we are is remix herbal. So it’s like going thrift ing to put together your course.
So to the thing about Web components, if anybody wants to look at this, I’ll throw a link to some of the stuff Brian’s been sharing that he’s basically written up this very cool little loader Web components if you haven’t used them, their custom HTML elements. But you need a little bit of Java script to tell the browser what to do with that element. So there’s this. Let’s call it a definition file for lack of a better term that you have to load normally.
You would throw that in the build process and, like you’re saying, Nikki, mash them together into this giant file that everybody downloads. Brian, in his big brain thinking, went out and figured out that he could write a very small piece of Java script that figures out which specific files it needs to do that. And Onley downloads those on demand to speed up the rendering of the page freakin brilliant. So I’ll have all throw some links to that, because I think that’s very much worth sharing it. And making sure that people have some insight into
there was a tweet heard round the high end community about Web performance Ah, a couple weeks ago and it was related. It was a New York Times piece about students during the pandemic on the fact that there were students that not that I know of locally, but students who are going without groceries because their cellular data cost of having Thio take classes from home during the pandemic pandemic. You know too much for them to be able to do and keep themselves fed. And I think that underscores.
You know, universities always have, you know, really great Internet access when you’re on campus in the same way that Silicon Valley has really great Internet access. But when you’re talking about anywhere outside of that, lots of rural areas leave the United States all of a sudden, bandwidth becomes a big issue.
Yeah, and I think a lot of the ah lot of the focus has been on performance, and performance is important from a US perspective. But once you’re talking about data caps and once you’re talking about, you know, people’s people on on spotty connections, you know the actual quantity of data then becomes and you know the number of round trips and other things that aren’t necessarily performance per se.
You know, maybe it’s all stuff that’s happening after the you know, your first content, propane or whatever, but like it’s still it’s still charging against your data plan.
Have you noticed anything, Paul? With regards like you’re you’re going towards this sort of systemized approach toe websites is Have you done any research or or looking into, like, the performance impacts of or benefits rather of having sort of that shared design system across multi full sites?
Oh, yeah. I don’t know if we’ve done necessarily. And research, we definitely can show. Ah, number of FTE hours saved by doing this. In fact, you’re you’re asking about success is one of the successes that I’ve that we’ve seen. One thing that we’ve tried to sell administration for years is if we can stop treating everyone with website request as a special snowflake instead, take that time that we would spend on it and build common features, common wants and needs.
We could get to the point where we can churn out sites really, really fast. You know, if we have the stomach to tell people you want to side, I get that you’re gonna get 80% of your needs met, you’ll get another 10% will fudge it, right. We’ll figure out that other 10% but you’re gonna have to compromise on that last 10 and you’re not gonna get any of your wants right now. We actually finally got to do that. We were able to spend a big chunk of the summer building out functionality in these based themes that meet 80% of the needs.
And we were able t o in the later times as we started going back to class on, we had people coming and saying, We need to cite within a week. Well, in the past, that would have been unheard of. There’s no way we could have gone through the process of figuring out what they want. Build all the custom stuff, give them aside. In this case, we actually were able to start turning outsides in less than a week and giving them 80% of what they need right out the door and then fudging that last little 10%.
But then taking even that fudge and going back and saying, Okay, what do we need to adjust in these based themes to build out mawr of these needs or middle doubt that functionalities people need? So now we’re able to term really, really quickly, especially because we’re losing more and more of our own resource is.
Are you using anything on that end? Because, um, a design system is a big thing. Design systems include design philosophies and branding standards and all of this stuff. But just from like the Web in the Web, though, the useful piece that a lot of Web people touches that pattern library piece of it. Are you using utilizing anything like either fractal or Astra More Pattern lab? Or
he’s using fractal. Yeah, that’s right.
I’m glad to hear that, because that’s the one I’ve chosen for a project, so that makes me feel better. But it
was on a pattern lab, and then something didn’t work with Pattern that shifted the tractor. And that’s what it’s on town.
Yeah, fractals, a neat tool that lets you build in all these little examples of your code and showcase them in abstract. So if you just want to see what your buttons look like, here’s what your buttons look like. And hear your variations on those buttons so that when somebody says the way I like to talk about it is go shopping. You need to build your site. Here you go. Go shopping.
Pick your blocks pick your you know, your content sections, Pick your buttons. Some buttons come with the content section. So bu, you know, and we’ll have those mocked up there, but it really a storybook is another one. I think, Nikki, you may be a little familiar with storybook because I think doesn’t ship with ah, uh lib html. I think
it is, uh, opened up the open W C. Has their own implementation of storybook specifically for Web components. Before they had that I struggle to get a storybook up and running, and then any time, something that’s very dense, it was, Yeah, and it’s a
very dense tool, but it’s very cool. It the things storybook has over something like fractal to me is it has all these dials and tweaks like you can not only like, define like, different, uh, different variants of a thing, but you can code in all the little check boxes and stuff to set different things like really time in the display. So you want to see it disabled on a small screen on mouse over, and you can check those boxes, or, if you wanna change the width of its container element, you can make that a variable that can be resized.
It’s very cool, I think, if you’re really in the Q A, I think is where somebody would really geek out about that. Because you can write, you can write integration tests that literally use storybook. Change all these variables in real time, you know, take the screenshot and see if all your stuff still looks the way it’s supposed to look. But yeah, not easy to get there from Mike.
It’s It’s very nice once you dio we have a lot of so that that Web form with all of the controls. Basically, they call that a knobs, and they control slots within Web components, which is just the inside of a Web component and the attributes on the tag properties. But you can play around with those within those fields and then that would, you know, update the component.
And we’ve added pieces that give you the code snippet that you could just easily copy so that once you’ve tweaked that within our instance Web components, that p s u dot e D u. Um, if you play around with our components and you play around with those knobs you’ll get a customized version of that that you can just copy and paste. Um, on the developer end of it. I started writing a a set of scripts that allow me to write these stories a lot faster, and thio add sort of a random ization element it SSM of these.
I call them Laura, um, data tools. And so it throws in. Right now, it’s just using, um, these TV series community. So there’s a lot of community quotes and some of the random stuff that shows up, but it’ll give random accent colors, random numbers, random icons, and that helps us see how things look to.
And Matt, what about from your end being apart from some of this, uh, this web component hacks, craziness? What have you guys found success with in terms of the outreach and and the work that you’re doing?
Well, just personally, you know, one of the things that has been, um, a big part of this year for me has been I came from a place where I was very, uh, you know, I had I had become a jack of all trades, and so I was just personally stretched incredibly thin. Um, I was, you know, I was doing everything from, um you know, uh, back end development to, you know, I I was putting together our pattern library, Um, in pattern lab. I was doing you x and design work I was doing, you know, e I was the accessibility expert.
I was I was the everything in my previous role, and, um, I am now able to focus on the part of my work that that is sort of my strength. And so, um, that’s that’s that’s personally been incredibly gratifying. Andi enabled me to do some things which I’ve wanted to do, you know, for forever. It seems like one of the things that that I’m currently working on is a pretty large scale top tasks, uh, survey, Um, because none has none has ever really been done that I’m aware of.
There’s, you know, there There’s other kinds of surveys that that that get at, um, sort of measuring the temperature and of of our our this is sort of thinking, particularly about our perspective students. Um but we’ve we’ve never really done one that’s that’s aimed at getting a really solid quantitative sense of you. know what’s most important to perspective students. Whenever everything, our site on DSO you know that’s gonna be, I think, a really great foundation moving forward.
That’s, you know, it’s still in progress. We haven’t launched the survey yet, but just, um, you know, being able to work on that, being able to work on it with a really solid marketing research team who is able to, you know, sort of sort of take it to another level then I would have been able to do all by myself has been really great. So that’s that’s been something that just personally, it is really thrilling toe work on stuff like that
and probably helps reduce stress greatly.
Oh, yeah, absolutely. I mean, and it’s not all on me to, you know, to make that right decision. When when there are other people in the room who, you know, probably have more expertise about about, you know, certain aspect on DWhite where I I don’t have to always be the expert about everything.
Yeah, so we talked about the easy part. The easy part is dealing with the successes because it’s easy to know, uh, and much more comfortable, um, to deal with what we do well, what has posed the biggest challenge for you All right now, in terms of making these changes and adaptations and all of that toe, whether it’s co vid, whether it’s shrinking budgets, whether it’s changes, you know, just in in your personnel, you know, whatever the case may be. Where where have you found some of those struggles in terms of this year?
E think this year? The biggest thing is, everybody wants something and everybody wants it now and has to have it now. The core group of developers for all of the things I’ve described, hacks, the studio elms, Ellen the Drew, Apple based, um, the dribble based content system hacks, CMS all of that, and the beauty of Web components is that we’ve been doing all of that with a core team of for developers. But that also means now that everybody wants us to work on all of them.
Now, what we’re really interested in is having contributors, and, you know, we’ve been talking about how we’re doing this so that we could benefit all of higher head and its component ties so people can adopt, you know, maybe they just adopt the player and they don’t want to adopt anything else because they want to figure out this whole Web components universe. Maybe they just want the hacks. Ah, block editor. Maybe they go all the way to the CMS and everything else that we build.
But, you know, we could do so much more as people become aware that this is here and there’s so many levels to contribute, whether that’s the documentation or just submitting an issue in the issue queue. We have a developer in France that is doing some accessibility and internationalization stuff for us, and we welcome that. I really love it when people tell me my work needs to be fixed, because that means it’s going to get better.
It would be like me walking around with something in my teeth and nobody telling me. So I know you know, people can be really touchy about getting feedback and critiques, but, um, the Elms Ellen community loves contributions,
and it’s ah, it’s worth pointing out that if you’re listening to this on release day, there are still a few days left in the Octoberfest. I’m just gonna throw that out there. There’s still time. If you are looking for a project to G o Makesem PR’s, too. Maybe hacks is one of those little things that you find a nation.
Yeah, and it’s a friendly community. I mean, I’m I am, you know, Anno over 40 female type. And you know, I know people talk about toxic developer communities. This is this is the farthest you could be from toxic. So it’s It’s a place where, if you’re new or if you’re not sure if you’re welcome, you belong with us. Trust me
on end the thing that all kind of vouch for is knowing Nikki knowing Brian certainly better now than I did before. Um, you know, these are people who are also educators and so thio to say that you know, they are in this to help people learn. And even if they’re not teaching in a classroom, necessarily, it’s still it’s still no different from anywhere else. And so, if you wanna learn, if you’re looking for that area, I would definitely argue that that is a great place to get started.
Go read some documentation. Go look at what they’re doing. Um, and you may surprise yourself.
We’re sort of having a Halloween party next week on Friday, um, in the elms Ln slack space that anyone is welcome to join, we put out an invitation to a zoom call, and it’s We call it an UN code review. Basically, it’s anybody can bring up a topic, whether it’s something they want to show off or if they have questions.
Even the most basic questions related Thio to our projects and Web components were happy to answer. It’s we get such a variety of people. So if that’s something that somebody really wants toe, try something new, join us for our big Halloween party.
I stress frequently how important mentorship is in our industry, and you know how that that’s how we get better. That’s how all of us improve on things. And, you know, here here I am. I’m very near 40 and that’s something. Every time I jump in the new Java script and stuff, it’s like who can show me what I’m trying to do here? Because I know I’m in over my head. E just
presented and um on Web components in a 10 minute talk and got a lot of interest in it and one person you know reached out to me and said, How do I get started? And this has happened a couple of times, but it made me write a getting started article from the very beginning. Like, just I’m not even a developer. I just wanna, you know, play with your stuff with HTML code. And I went back and I told that person, thank you. Because this your question makes it better. Even the fact that you asked a question.
And Matt, what’s ah in your area? Where are you hitting the biggest sort of roadblocks or speed bumps in terms of especially like from the U X side. We we don’t being the drunken UX podcast. We should probably talk about us much more than we do a zey specific topic. But you know, is I can imagine. And I’m gonna I’m gonna throw a pitch out to you and see if see how it goes.
But you know how How even does user experience research work in the world of everybody being remote and not being able to bring people into your, you know, in your labs or into your spaces so that you could look over their shoulder and watch them interact with things.
Um, I have actually been having to figure this out. Previously, I had been doing most of my research in person and oftentimes very guerrilla style, just, you know, like sitting at a table in, you know, the student union or sitting at, you know, sort of grabbing perspective students in the admissions office. I’d say the biggest challenge has been recruitment, um, with, you know, with with in person, particularly students. It’s very easy to recruit using pizza, but that doesn’t work online. So so, sort of.
A recruitment efforts have had to be a lot more formal. The actual you know doing of the you know, if you’re doing just a standard usability study, it’s not really that different. You know, just using any screen sharing software seems to work really great, actually, for you know what, observing observing users there’s, you know, there’s there’s Maybe if if we were trying to do something, that was a little bit more, uh, contextual analysis, where we’re like wanting to see the workspace and that sort of thing, that would probably a little more challenging.
Typically, you know, in a previous life I’ve been used to being able just to go into people’s offices in terms of challenges, other kinds of challenges. One of the big challenges has been I’ve been part of a group. The big part of our work, typically in in our group, is supporting Penn State World Campus, which has been which has not been dramatically impacted by by co vid. But what So there’s two things that have that have really changed.
One is that some of the research that we want to do that sort of Maura about attitudes is very hard to do right now, because because we don’t know, we can’t necessarily bank on anything. We come out of that kind of research continuing to hold true for any period of time. You know, it’s so it’s so particular to this moment on DSO that’s that’s really challenging. And there’s actually a fair amount of qualitative research that we’ve just put on the shelf that that we you know, we’ve just tried to figure out other ways to do it.
In fact, this top task for these church is part of the reason why we’re focusing on that right now is because it felt like a kind of mawr structured kind of research that we felt like we could still get some really useful and, hopefully Mawr like durable insights. The other thing is that we’ve is that our group has been, has been tasked with maintaining the continuity of learning and continuity of teaching sites for Penn State. And that’s been a much like larger amount of work than I think we had anticipated.
You know, the pandemic being a larger thing than most people anticipated beginning, of course. But the one of the real challenges has been when when we enter a new realm, we oftentimes don’t apply the expertise that we already have. We’ve already built up in other realms to that new realm. We we sort of act like an absolute beginner, and we don’t sort of transfer that those skills over.
I think that’s true for institutions to, you know, institutions that maybe have built up good governance and good, um, sort of processes for their sort of their their their their operationalized Web work for in in this crisis communications in this like extremely long term crisis communications situation that that we’ve been in ah lot of that has has, You know, it’s sort of like it’s like that that that stuff doesn’t exist. Onda We are kind of back at square one of governance and process.
And so, you know, we’re in the we’re in that situation that you you never want to be in where there’s umpteen different stakeholders all just sort of helping you with things that you didn’t know We’re going to show up and it needs to go on the on the website the next day. And I think probably a lot of people at a lot of institutions are in that situation with with the right process and with the right sort of governance in place, you know, it could have it could have been a different story.
And so, you know, we’ve been, um, you know, trying toe trying to sort of make ourself persons out of our sow’s ears.
It adds a lot of weight toe what Paul was saying. I think in the success that they’ve found getting their design system rolled in as a, you know, a function of the way they are starting to do development now so that when those requests come in like you were just saying, You know, they don’t have to reinvent things over and over. They have found an enormous amount of efficiency by being able to, you know, component ties and systemized their development in their themes, such that somebody asked for something.
Now they can be much more nimble and meat that 80% threshold. We use that same kind of vernacular at work as well. This let’s let’s get that that easy. 80% You know, the 80 20 rule will pursue the other 20% when that value makes sense, Um, but not force ourselves toe keep fighting. You know, fighting back against this need toe make everything custom or everything new every single time.
I think Matt hit the nail on the head with the, you know, transferring that old knowledge to a new situation. And, you know, because I’m working in the, you know after somebody’s actually decided to go here and has opted to go online. Our courses have been designed from the get go to be online. So the typical pre co vid process for taking a course and saying, Here’s my course.
I’m gonna start working on it and I’m gonna put it online takes a couple of semesters toe actually happen, and that’s because there’s, you know, instructional media that’s involved. There’s thinking about how that transfers to an online space. There’s a lot of planning that goes into that. And then I I really feel for all the educators who had toe up and do this. So there’s there’s going to be a difference.
There’s a whole generation of people who are gonna think online learning is something different, because what they got is that the TV dinner version and what we usually do is prepare a five course meal. So there’s a There’s a big difference between the courses that are offered and, ah, lot of people don’t know how to transfer that skill, and you see a great variety. A lot of people think it’s just putting up power points or putting up 40 minute videos, which is really bad user experience.
And, you know, part of the reason that we got into this the block editing and the authoring that we’re doing is because ah, lot of course content management systems that are out of the box assume a face to face environment where you’re just uploading your slides and that’s it. And maybe taking a couple of tests, it doesn’t allow for that media rich interactive lab and simulation environment where, you know, one activity is this.
You get some information and then you try it out. It’s not a lot of online LMS is that are offered to people are not, are not built for for the ideal way to learn online. And so we built the block editor for that reason. So what you’re getting the best is yet to come. You know, if people start to figure out that this this stuffs available on this is how we’re gonna have to learn
a lot of opportunity in all of the frustration and all the inconvenience. Andi, even Nikki’s categories with me on that sentiment. Let me close this out on sort of a just a side discussion here. I’m curious to know, as this year has gone on and you know, you’ve worked remotely or, you know, worked with in collaborative environments in different ways. Um, you know, whether that’s approaching Matt the testing side of you X or Nikki, You know, developing and testing web components and and things like this.
What tools have you found and I’m not talking like just zoom. You know, everybody has to use zoom or hangouts or something or slack. But like with regards to the actual website of things, what are the tools that you are finding either newfound appreciation for or just new, you know, new stuff that you didn’t have in your tool chest before To help you accomplish what you’re working on now,
For me, there’s some It sort of came in and there was there wasn’t there wasn’t a strong existing library of, you know, pre built design components in any in any design tool. Um, there was a bunch of illustrator files on DSO. You know, it was it was sort of like, Well, you know, pick what? You know what ux design tool you want to use And so I got, you know, it’s kind of a fun chance to just play around with, um, Cem Cem, various options I’d already been using sketch a lot.
And, you know, I got to play around the stigma, which I like. Um, in the end, so far, I’ve I’ve settled on on X d. Um, just because it’s something that I can you know I can I can transfer with colleagues a little more easily within my setting. Um, but that’s just been kind of a fun process to play around with those tools on. There’s definitely things that X is still pretty rough around the edges, but it has some some very like, powerful stuff going on.
Um, and and so I’m you know, I’m appreciated that the things about it that are there to appreciate, um, also have have been ableto dive a lot Maurin toe optimal workshops, um, offerings on dso That’s been, you know, it’s it’s been good. Thio just sort of more broadly used some of some of their tools recently did a bunch of tree testing, um and, uh, and and also helped, um helps w p. Campus a little bit with some card sorting and treat testing work they were doing for their their website redesign, which was fun.
And I’ll attest to the X d component of that. If anybody is interested in wire framing prototyping, you know, design language type tools. The beautiful thing about X D is if you already have Photoshop or I actually got the creative suite for the photography deal, you get X D for free. It’s just included with your subscription. And so, ah, lot of it’s one of those things.
If you don’t know it’s there, go look because you just get it and it z easily available. We are a figment shop at work now, so that’s Ah, I I use X d for my personal stuff, but then fig HMAS where we land for all of our work stuff but has been very useful. Um, the irrespective of which one.
Yeah, I found pigment to be really fun to use. We we used it for the for the WP campus redesign and just being ableto sit with, you know, to other designers on a on a call and simultaneously, you know, move things around and and and throw together wire frames and stuff like that was really fun. You know,
the silly thing about fig MMA that I kind of like is I’m not a user of it in in the designer, since I’m a consumer of what are designers make. So I read it toe, make the stuff in html. When we’re all in there, you can see everybody cursors moving around. Yeah, it’s silly, but it makes me laugh.
The thing if I have a big grape about x d it z the typography and type handling, which I’m so I’m so shocked about because this is adobe like I would think they could just, you know, just pull that stuff in from, like, just pick one of their other products. Right? Um but there, you know, you You cannot, For example, in a single text block you cannot apply different textiles to that block.
You cannot apply different line heights even though you can apply different font sizes on dso. You know, there’s just this, like it just feels like this incredibly crude aspect of the software. I’m hoping they’re working on it.
Well, one of the things that I really miss is a lot of times the people who are local to my team would just meet at a local Starbucks on campus sometimes because we were, you know, two of us air in the arts college than two of us are in the college of science. And, you know, eventually we were picking up some other people. Um, because Brian teaches courses their students who get really interested in the project and the ethics behind it.
And I call them Brian’s Disciples. That would stop by people from other departments that were curious. And it’s, you know, so you could do some sort of like shared coding environment. And I It wasn’t until the pandemic that I really used the live share feature on DS code, and I’ve been using that toe. Sometimes I’ll block off my time to get some other people on campus who want to start contributing sort of up to speed. It’s nice to have that one on one talk. I could let them drive, but still have the ability to to step in if needed.
If you don’t use V s code, Adam has a similar feature called Teletype eso. If you haven’t converted, I’m a V s code convert. Now, I was totally Adam up until earlier this year, but V s code stole me. Um, so I can I can appreciate that. But there is a similar feature both ways that, um we’ve as part of, like, a swarm for our team.
We’ve because we had been playing with a lot of this, and if anything, we’ve taken that opportunity to kind of refine. I think some of our interactions and relationships and, um, anything else that either of you would like toa add to this discussion before we get out of here.
Well, that’s reminded me of I’m still looking for a good tool. I heard mentioned that I had Web Miro as one sort of, ah, digital white boarding collaborative tool. But, um, you know, if either of you or anyone else has any good suggestions for that, that’s something that particularly given the fact that that I’m remote. I’m a remote employees for the long term.
So you know, I’m going to need I’m going to need something like that, a big part of my design processes, collaborative sketching, white board work. And so, you know, it’s It’s something that I’ve been ableto work around to some extent. But I do feel that pain of not having that,
um, the one that I have used. I’ve used marrow. Um, whiteboard dot f I, um Now, it’s been a long time since I’ve used it, so I can’t necessarily speak to how it is now. Um, but it was useful, I think by two years ago is last time I used it so that that may be one worth looking into and just see kind of what it’s like in this day and age.
I’ll throw links to those in the show notes Um, and yeah, and if anybody, if any of the listeners have suggestions by all means thrown at us, throw them in the comments on the show notes or hit us on Twitter or any of those places I’d be happy to hear. And not just on white boards, but anything any of the tools you’re using, any of the resource is that have come in handy.
So I’ve been using because I don’t have my big white board. I bought myself a white board or a dry erase notebook because I had tried. But you know, when the pandemic first hit with just a bunch of note papers and I you’ve noticed I have desk cats and they don’t like my stacks of paper. But this wonderful dry areas notebook has been a way that I don’t have toe convert a bunch of my wall space. The white board and I can, you know, still whiteboard ideas.
Folks kick back, stay with us for one more minute and we will get you right back onto your next show.
I hope this was helpful to you, Nikki. Paul Matt, Eh? Thanks for taking time out of your evening to sit down. I know you’re all coming in hot out of Hyde web and the amount of work and time and effort that go into running and speaking and doing all of those things. So I appreciate, um, to the end of the earth, the flat, earth and back. Um, You taking that time to spend with us this evening, Paul, unfortunately, would have to cut out a little bit early on us.
If you wanna find him, He’s at Gill’s, out on Twitter. Um, he is a ridiculously brilliant mind, and he will be too humble to ever admit it, but he’s red stapler. Winner hired Web. He’s done some of the best talks I’ve ever heard. Um, and it is a smart, smart dude, so if you have a chance to connect with him, I highly recommend it. But, Nikki Matt, I’m gonna turn it over to you.
Take the microphone for a few minutes, tell folks where they can find you what you got going on and anything else that you want him to know.
Thanks, everyone. I’m at M Ryan. D m r y a n d on Twitter. Um, and that’s probably the best way to get in touch with me on, uh Yeah, Happy toe. Talked about any of these topics or anything else
on. I’m Nikki Massaro Kauffman. You can get me at NikkiMK on Twitter. Um, that’s also how you can get to me. Nicky. M p s u dot e d u other I also have the Penn State alias evil genius npsu dot eu. So if you’re feeling like you wanna send in a very fun way, you can catch me that way. And our project hacks web dot or GTA has more details on how you can get involved with our work. And don’t forget the elves. Ellen Slack Elms, Ellen slack dot com
We’ll have links to all of those and mawr in the show notes. If you want to get a hold of us were easy to find Twitter or Facebook /drunkenux. Instagram is /drunkenuxpodcast. If you want to join us on Discord, drunkenux.com/discord. Hope everybody found a little bit of usefulness in this and and learned a little something and took away Cem some nuggets. There’s a favorite piece of advice that dug always gives it hide Web which is you’re gonna learn a lot. You’re gonna hear a lot of stories.
You’re gonna hear a lot of talks that give you a wealth of information. And all you need to worry about is find the one thing that was valuable and apply that one thing. And if you could do that, then all of all of the learning was worthwhile. And I’m gonna say that about this episode. Go back, listen through it. Find the one thing that was useful. Valuable. Um, that can help you out and either apply it or ask a question about it or do whatever it takes.
Because when it comes to building good websites, whether it doesn’t matter if you’re in higher and it doesn’t matter if you’re in accounting or hospitality or our health care or any of those industries, the biggest piece of advice that matters is that you keep your personas close and your users closer. Bye bye.
This episode of The Drunken UX Podcast brought to you by nuCloud.