Greg Swinehart - We CAN have nice Shiny apps: What's new in Shiny's UI & UX
The Shiny team has made big steps to help apps' UI and UX scale more thoughtfully and elegantly. We've built a cohesive theme that refreshes all of our colors and components. Our layouts will better serve your apps as they grow. And we've created Shiny Templates, which are opinionated boilerplate code to help users create small, simple apps or large, complicated, multi-page dashboards that just look right. Talk by Greg Swinehart
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
Hi everybody. This is a picture of me in, I don't know, what do you think, like 1972?
Okay, this is really exciting. I have a lot to show you today, so I'm excited to get into this. I'm Greg, I'm one of the designers on the team here at Posit, and I spend a lot of time in my life just trying to communicate things visually. I have no idea why this has been just kind of in my wiring since I was born. It's just something I've always focused on. So for the last couple years, I've been working with the Shiny team to see if I can make Shiny apps look better by default.
Now, I'm sure your apps look terrific. I mean, let's be honest, they are terrific. But I'd like Shiny to help make your apps look even more beautiful by default. So I want them to look nice, and I'd like them to feel more intuitively usable by the people who are viewing your work. And basically, I'd like your life to be less designy, and I'd like it to be more data sciencey. Are these real words? I'm sorry to get so technical.
The stakes of Shiny apps
Okay, so two years ago, I looked at every Shiny app that I could get my hands on. Yours, ours, everybody's, and one in particular that stood out was this one. This one was ours. This was RStudio's go-to-market dashboard two years ago, basically showing the current state of our professional product sales, which is how we sustain the development of free and open-source software like Shiny. So this dashboard made with Shiny Dashboard was very important to me. And it struck me as I was kind of going through old apps that I had looked at that your apps probably have very similar stakes to this one.
Like, I discovered this app because one of the bosses at RStudio was looking at it on their phone, and by the way, it looked pretty horrible on a phone. And as they were looking through it, I just said, what is that? And they said, oh, it's our go-to-market dashboard. You know, this lets us know if we can sustain the open-source development. And also, it lets us know if our kids can eat in six months. I was like, wow, that is a really, I like not even joking, like that was, he was very serious when he said that. So I was like, wow, there's Shiny apps have stakes is what I'm trying to get at there.
And so, I don't know, let's take a look at it here. I'll just kind of scroll through real quick. Obviously, zeroed out everything, but okay. Okay, looks nice. There's lots of value boxes going on. They're all kind of different sizes. I'll just say best app in history, 10 out of 10, no notes. Having said that, I mean, this is obviously a very valuable thing, and the stakes are very high by what this is showing. And people really rely on this thing, and I'm sure this is what your apps are like as well. But I'm a graphic designer, and so I'm here to say, could it look better?
Obviously, it's very valuable. I don't want to take anything away from what it's doing, but can we have nice Shiny apps? After a bit of work, I'm happy to report that we can. We can have nice Shiny apps, everybody.
After a bit of work, I'm happy to report that we can. We can have nice Shiny apps, everybody.
Okay, so two years ago, I gave a talk at this conference, basically showing the feedback that I had of all the UX trends I was seeing happening in the Shiny apps, all the Shiny apps that I could get my hands on. Joe Cheng called this one of my do this, don't do that talks. And this talk is kind of a sequel to that one. Back then, I talked about all the things we planned to do to make Shiny's UI look better, and this talk is to talk about what we've done in the last two years.
Refreshing Shiny's visual identity
Okay, so where do we start? Well, I've designed a lot of open source stuff in the past, or hexes for open source anyway. Here's some of them. And let's see, some I didn't really do much work on, like this upper right hand one, the light blue one. Max came to me and said, hey, I need a hex for recipes. Also, my kid made an illustration of a cupcake. And I was like, Max, I think we're done here. I don't think there's anything else we need to do. But others of these, I did a lot of work. So if I'm going to work on how Shiny looks, of course, I'm going to start right here.
It's 10 years after I had made this. And, you know, I want a second crack at this thing. So we updated the hex this way. We kind of updated the blue. It's still a little nostalgic with some of the old school RStudio aspects to it, but I also did some of the vector work. Obviously, that's not what I'm here to talk about, but doesn't it kind of look like I dusted off that blue and made it a little bit more vibrant?
Okay, so once we had this blue, we were ready to go. And I know that seems ridiculous, but that's actually how these processes work. I was like, let's make the hex amazing, and then we'll build from there. So from there, we had our Shiny primary blue. It's up there in the upper left-hand corner. And we made a whole complementing color palette to go with that blue. And so we are now loading this color palette that we have designed into Shiny by default. And the way we're doing that is we're packaging it inside a boot swatch theme that just kind of loads on its own. Of course, you can change the boot swatch theme if you'd like. You can also, with some R code or Python code, you can change these colors into, you can modify this if you want with a little bit of code. And we have very exciting things down the road of how that will work that we're actively working on.
The left is what it looked like in 2012. The right is what it looks like now. The left is Bootstrap 3. That's what those default colors are. This is Bootstrap 5, but we've added our own colors to it.
BSLib and Shiny for Python
So now that we have these colors, and they're loading by default, that gives us all kinds of opportunities to do some things in both Shiny for R and Shiny for Python. Now let me just sidebar for just a second here that Shiny for R has been around for a long time. And if we were to do all the stuff that I'm talking about in this talk to Shiny R, it would break a lot of your apps from the past. So we are doing all of this kind of UI and UX work in BS Lib. So if you're unfamiliar with BS Lib and you're using Shiny for R, I guess that would be my number one takeaway for you in this talk. If you are using Shiny for R and you don't know about BS Lib, that would be the thing to check out. BS Lib is how we are kind of making modern apps in Shiny for R. It unlocks all kinds of modern awesomeness from Bootstrap 5 and also does some custom stuff that we've done with the kind of further extension of things that I'll show you in a second. Because Shiny for Python is new, by the way, we're just putting all this stuff directly in Shiny for Python. So no need for an extra package there.
Updated components and accessibility
Okay, so this color palette will now flow into Shiny components. And Shiny components, you're all familiar, are inputs, outputs, display messages. Not all of our components are from Bootstrap. Some of them are from other places, like the selectize dropdown. This is a very minor difference before and after, but it's still pretty meaningful when you're looking at a bunch of these inputs next to each other. I'm pretty happy with it. It gets a little bit more dramatic when you look at our slider. That's the old one in the past. That's the new one now. The kind of new streamlining of the design is in our boot swatch theme, but the color is obviously Shiny blue. All coming from the hex guys. And most everything I'm talking about today is for both R and Python.
The kind of overall concept. So here we go, before and after. They look pretty nice when you start stacking them together. I should also mention that these components on the right, you notice how they have kind of a darker line there. There's more color contrast on this because we're starting to kind of look at everything through the lens of accessibility now. And our goal is to give Shiny a double A accessibility rating and color contrast at every turn. So I'm not going to say like we've certified a double A, but I just want you to know that that is always what we're going for. So if it's not that, that means we haven't fixed it yet. So we're still finding things, but that's what we're going for there with the color palette that we made and how it's impacting these components.
So speaking of components, I know that when you're making an app, it can be kind of hard to figure out which one you should use or what to use where. And so we've come up with this Shiny components gallery, which is kind of like, we like to think of it as like a live cheat sheet, really, where you can shop for a component. And a lot of these are live components inside these little cards here. And so you can go through your inputs, your outputs, your display messages. You can find one that you're interested in using. And when you click into it, you're going to get kind of what you would through a cheat sheet, where you're going to get kind of the code you would need or some function references or whatever, or function signatures. So we put some details, the functions, and then some variations that we think might be helpful for you, you know, if you want to have a value box that looks like that. It's right there for you. I also want to say that this is the Shiny for Python site that you're looking at here. This is a live site. I really wanted to have this on the Shiny for R site by today, and we just almost got there. So all of this will be on the Shiny for R site soon to very soon. That's the timeline that we have given ourselves. So right around the corner, all of this will be on the Shiny for R site as well.
Layouts that scale
All right. So Shiny's looking better, everybody. And finding what you need is better and easier as well. Okay. But obviously, Shiny apps aren't just components, you know, obviously. How you lay out the components is equally as important as far as how your app is going to look and feel. So let's talk about layouts.
When you make an app, sometimes it's kind of a somewhat disposable thing, like you use it for like 15 minutes and then you throw it out. You might even be making it in Shiny live in your browser. But some people in this room make apps and it grows and grows and grows for three to five to eight years. I mean, it just keeps going. And old school Shiny for R kind of buckles under the weight. It doesn't easily make a usable app eight years later. So we're trying to make layouts that will help keep Shiny apps nice as they grow and scale.
Okay. So just real quick, let's look at this old school standard Shiny app. Three things to consider. Obviously, it has a title. It has some inputs right there in the well. And it has an output. This, you know, not bad. This is usable. I mean, it might be kind of a pain on a phone. But, you know, it never stops here. You add some stuff to that well. You add more plots. You might add some tabs here, some tabs there. Tabs everywhere.
So here's how we think of it now. This is a page sidebar layout. And we've decided to move on from the well, to be honest, and use a sidebar instead. I think it's a generally less infuriating process and experience to have the inputs in a sidebar. And we have accordions, if you have a million inputs and you want to stuff them into an accordion that you can expand and open and close. We have some ways so that your app can kind of not show everything all at once. So let's say I wanted to add some tabs. And by the way, this is all kind of dummy content in here, but this is what it really looks like. I should have used wireframes, but I wanted to show you what it really looked like. So let's say we're adding some tabs. Well, I want the tabs to be in close proximity to the thing that they control. So I'm going to put this in a card, which is new in Shiny, kind of comically new in the last year or two. This might be why a lot of you were using Shiny Dashboard in the first place, just to get cards. Well, they're here now in Shiny for Python. And if you're using BS Lib, you'll find them as well.
Cards are the greatest when it comes to Shiny apps because they can start to scale. Like, I'm a grown-up and I want to put a table on this app. So I'm going to put a table at the top. But you know, oh, and now I've got more information here. We've got a nice area in the card to put a title. So now people can understand the context of each of these cards for whatever this fake app is, right? Now, this app might grow to multiple pages at the top. We can add those links at the top in the nav bar, and they don't start to shove things around. You know, it all kind of fits in what was already there. And I think it makes sense for users as it starts to grow.
Hey, I want to point something out here. Notice how the table in the top one and the plot in the bottom one are taking up, kind of filling that space there. They're filling up the space that's been given to it. We're not setting a height here. That's happening with the fillable stuff that is in BS Lib and Shiny for Python now. And actually, the cards themselves are being, are not, you know, given a height. They're expanding to the area that they have, you know, available to them as well. And you have control over that. If you're trying to make a nice Shiny app, I would definitely check that out. And I'll have some links for the fillable stuff or just layouts in general at the end.
Okay. So just like Shiny components, we've made a Shiny layouts place, which is a little bit more conceptual, like some illustrations of the kinds of layouts you might want to choose from. You can choose into a specific thing, or you can go into, this is hilarious, I'm showing how to use the internet. And on these detail pages, just like the components, gives you kind of just what you need and a little bit of article, you know, explaining it. And live demos, you can click the lightning bolt there and go right into Shiny live and start messing with it on your own. It's very cool. So Shiny layouts. Also, again, coming to the Shiny for our site soon to very soon. And on the Shiny for Python site right now.
Before and after: a real dashboard
Okay. So I just want to do a little quick before and after, just to kind of show where we've come. Garrick Aiden Bowie, this is a Shiny dashboard that he came up with. And he's always been very CSS-ish. You know, he knows how to make, you know, value boxes, you know, full width in their container and stuff like that. So he'll always go a little bit of an extra mile. But still, this is the old, you know, Shiny dashboard. And just to show you what this kind of app would look like now, here's some value boxes here. Here's some plots and cards. He did a little bit of CSS shenanigans in the table at the bottom, but you wouldn't have to do that to make this look nice. And check this out. These value boxes here with the spark line, you can actually kind of hover over and see what the values are here. So not only do you see the trend, but you can also get some info there.
Also, value boxes and cards all go full screen. And so when you go into the full screen, you can also show more information here. So you can see the X and Y axes there. I think this thing alone is going to be amazing for your dashboards if you have tables, because tables can be monstrous. And sometimes they're in kind of a small card. You can go full screen and maybe give them the ability to filter stuff and use the full width of their browser to do that. So full screen cards are kind of cool.
And then there was one other thing I wanted to show you here. Let's see. Oh, yeah. He opens up this accordion. Oh, and he shows that the app can go to dark mode pretty easily. And this is something you can do pretty easily in your app. And it can also be aware of what your computer's settings are in that moment. You know, if it's night for your user, it'll load this one automatically. And notice how it's impacting all the plots as well.
Shiny templates
Okay. Kind of racing through this. I apologize, but I'm trying to get through a lot here. Okay. This one is just for Shiny for Python to help people who are getting started with Shiny for Python quickly. We call them Shiny templates. So much like components and layouts, you can also shop for what you want to make and hit the ground running with boilerplate code using a sample dataset. So I'm going to choose this dashboard here. Here you'll get to a detail page with a Shiny create command to get this template running locally on your machine. You'll also see information about what is used in the template on this page and a live version of it at the bottom here. It's as if Carson Seavert made you a template. And the reason it feels that way is because Carson Seavert literally made these templates for you. So that's nice.
I'm kind of hand waving my way through the templates thing because there's just no way I could get through all of it right now. So let me get to this next slide here. Carson actually filmed two videos showing how this works, sharing his screen, walking you through getting a template running on your machine, and then also swapping out that dataset with your own data and kind of figuring out how to field those errors once they happen.
All right, everybody. That was a lot. But that's my overview of how Shiny looks better in 2024 in both R and Python. If you want to get started in Python with some of the stuff I talked about, go to the Shiny for Python site and go to the components drop down there. If you are using BSLib and Shiny for R, go to this layouts drop down here, and that is going to help you get started there with that fillable stuff, and you'll hit the ground running. Thank you so much, everybody.