Hardcover Live

Summary

Adam and Ste discuss their recent activities and then dive into designing widgets for the Hardcover app's dashboard. They explore different options for displaying the 'currently reading' widget, including the possibility of a carousel-like feature. They also discuss the idea of customizable settings for each widget, such as the ability to track reading progress by day, week, or month. They consider the use of a universal control for widget sizes and the option to edit progress using input fields or a slider. They also discuss the design of the update button and the possibility of making the progress fields content editable. In this conversation, Ste and Adam discuss different ways to update progress and add actions to the currently reading widget. They explore options such as marking a book as read, leaving a review, changing the edition, and setting a custom page count. They also consider the possibility of resizing and reordering the widget based on the number of books being read. The conversation concludes with a discussion on using interactive inputs for page numbers and percentages. Overall, they aim to make updating progress and taking actions on the currently reading widget more intuitive and efficient.

Takeaways

The dashboard in the Hardcover app will serve as a customized portal to users' data and preferences.
Widgets on the dashboard can be designed to work on both desktop and mobile, with some widgets having multiple size options.
Customizable settings for each widget, such as tracking progress by day, week, or month, can enhance user experience.
The 'currently reading' widget can display all books being read, with the option to scroll or adjust the widget size based on the number of books.
The update button can trigger a drawer or window for editing progress, and progress fields can be made content editable for seamless editing. The currently reading widget can be enhanced by adding actions such as marking a book as read, leaving a review, and changing the edition.
Consider implementing a custom page count or minute count option for books with different editions or formats.
Resizing and reordering the currently reading widget based on the number of books being read can provide a better user experience.
Using interactive inputs, such as draggable sliders, for page numbers and percentages can make updating progress more intuitive.
Reuse design elements and styles from other cards, such as the letter books card, to maintain consistency across the application.

Chapters

00:00 Introduction and Recent Activities
08:03 Designing Widgets for the Hardcover Dashboard
27:06 Exploring Widget Design in Bento
33:32 Exploring Actions on the Currently Reading Widget
40:49 Marking as Read and Leaving a Review
51:09 Customizing Progress Updates for Different Editions
01:02:37 Intuitive Inputs for Page Numbers and Percentages

What is Hardcover Live?

Each week Adam & Ste focus on a specific feature, idea or prototype in Hardcover and iterate on it together or with guests.

Adam (00:01.354)
Hey, hey, stay, how's it going?

Ste (00:04.171)
Adam, pretty good. Welcome everyone to Hardcover number 43. How are you?

Adam (00:11.342)
Pretty good. My wife and I took like a staycation yesterday. We went out to, there's like this ski deal that one of the ski resorts has, where it was like, you could stay for the night, get two classes with instructors and rent like ski gear for like, what should have just been the cost of like a one night stay at a hotel?

And so it was kind of like a locals only deal. So, uh, we, we did that yesterday and, uh, I got to take a, a snowboard lesson while my wife took a skiing lesson.

Ste (00:51.503)
Wow, okay, so it's still snowing in Salt Lake City, I reckon.

Adam (00:55.39)
a little bit, at least up in the mountains. Not so much down here. Like looking at the mountains, the lower ones, like below 8,000 feet are pretty bare, but above that, there's still some snow on there.

Ste (01:07.699)
Okay, is it usually snowing? I'm asking because it's so cold over here. It's like in winter, it was like nine Celsius today, which is, I mean, I dress my kid like in the middle of winter. So yeah, with like fluffy overalls and I have my winter jacket as well. So yeah, not good times. And now it's weird because the day, I mean, living in the Northern Hemisphere means the day in summer gets so long and now...

Adam (01:23.651)
Yeah.

Ste (01:37.905)
long and cold for some reason and it's April.

Adam (01:44.059)
Yeah, it's been a really nice spring here. Like it's just starting to get a little warmer, but basically you can do well with just a hoodie like this. And then take it off when it gets too hot.

Ste (01:59.698)
Okay, that's pretty good, that's pretty good. And how did the snowboarding go?

Adam (02:06.218)
It went pretty well. Like I probably fell maybe 30 times in three hours or two hours, but yeah, I think I learned a lot. And by the end I was like going down a slope on a snowboard, which is I guess success.

Ste (02:16.091)
That's good, yeah.

Ste (02:25.055)
Okay, wow, yeah, that's huge progress. Yeah, snowboards are always like so, so difficult. I mean, yeah, it's, I think the coordination is like pretty different. Ski is, it's just like the same movement, left, right. Snowboard is like, you have to do something with your left foot and something with your right foot and something with your hip, and you're like, oh, what the hell, and.

Adam (02:49.67)
and

Ste (02:50.699)
I know because I'm not so good at coordinating movement. I'm kind of clumsy. So yeah, I had a really tough time trying to understand the movement. But yeah, I guess I was overthinking maybe.

Adam (03:05.807)
Did you take some snowboarding or skiing lessons or tried it out?

Ste (03:08.787)
Yeah, yeah, I haven't done it for like a lot of years, but in my teens, yeah, we had like pretty good and cheap ski resorts back home in Romania, so I did that and I wasn't, I mean, I could go on the advanced slopes, but I didn't like do.

you'd see in the videos like that kind of, but yeah, I had a hard time learning it. I remember the falls, there are so much worse than ski falls because you tumble and you pour this up in the air and whatever.

Adam (03:55.582)
Yeah, and just like getting up from a fall. Like I was able to, like I wasn't able to get up when like my board was downhill and I was trying to get up because I would like be getting up and I would be like moving as I was getting up. So I'd have to like turn over and like lay on my belly and then get up like that with my knees. Like a lot of respect for like just winter.

Ste (04:00.465)
Oh, oh yeah, oh.

Ste (04:07.845)
Yeah.

Ha ha ha.

Ste (04:15.883)
Yeah, yeah, that's the move.

Adam (04:24.934)
athletes.

Ste (04:26.035)
Uh huh, yeah, it's very hard. Snowboarding in particular, I mean. I have flashbacks of how it was to just like move from, you know, the place you fell like face down. So, yeah, I can relate fully with that struggle.

Adam (04:41.406)
it

Adam (04:46.166)
Yeah. How about you? What have you been up to lately?

Ste (04:50.287)
Well, I'm finally back home in London, so this feels good. I've been like Getting in my routine. So that's okay, especially with a kid. That's like Way way easier He's happy as well because he's hope so not a lot of like stimuli going like all over other than that just like staying in and taking one small like short

for a day because it's so cold.

Adam (05:25.219)
Yeah, I, is there like a, an activity you do when it's that cold that besides like, you know, staying in.

Ste (05:33.593)
Uh, yeah, just staying in and right now, basically, baby, taking care of the baby. He's learned to crawl now. So yeah, a whole other set of challenges, I guess.

Adam (05:42.355)
Yeah, makes sense.

Adam (05:50.762)
I was reading about like in Scandinavia, there's like this like normalized thing for like taking your baby out in a stroller and having them take a nap outside in like really, really cold weather.

Ste (05:51.345)
Yeah.

Ste (06:06.455)
Mm-hmm. Yeah, it's like minus 20 Celsius and they live outside. I know about that as well. So they really do it. I have some friends that live in Norway right now. And yeah, they're like super hardcore on their kids. They're just like, I mean, they wrap them up real tight. And I mean, judging by how I think that must feel like sleeping like really snuggled.

when it's minus 20 outside, so it's like ice cold. That must feel pretty good. I mean, unless your parents have done a bad job layering, so you freeze your ass off. But I mean, I'm guessing they have like good clothing in Norway, but yeah, they're pretty hardcore. I mean.

Adam (06:45.44)
Mm.

Adam (06:54.517)
Yeah.

Adam (06:59.534)
That sounds kind of nice.

Ste (07:01.483)
Yeah, I wouldn't mind. I wouldn't mind.

Adam (07:05.7)
Yeah, I'm starting to see more and more people like out just laying out under the sun on a blanket now. I want to like grab a book and find a spot now.

Ste (07:17.471)
Yeah, that's not too bad. So out in the cold, like just like cold bathing or yeah.

Adam (07:21.434)
Yeah, like pretty nice temperatures like 50 60s here

Ste (07:27.659)
Okay, that works, that works, that's nice. And how have you been winding down from your Seoul trip?

Adam (07:36.566)
Um, mostly just getting back into the rhythm of things here. Like, uh, yeah, between like the soul trip last week and then the ski trip was, which was just like a one, one night overnight. Uh, I'm, I feel like now I have like nothing else planned until like this summer.

Ste (07:58.183)
That's good, that's good. Nice, more time to work on the hardcover stuff.

Adam (07:59.799)
See ya.

Adam (08:03.59)
Yeah. And speaking of which, uh...

Ste (08:04.879)
Yeah, and speaking of which, yeah. We're doing widgets today. So that dashboard, everybody probably has seen on Discord. For that one, we did the survey a while back and people told us which widgets they wanna see on the dashboard. And right now we're actually building it. We have sort of the...

basics laid out and today we're gonna design some of the widgets that the people have voted for the most. And yeah.

Adam (08:44.499)
Yeah.

Yeah, I'm excited about this one. I think the idea is that the feed, which is kind of like the home right now on hardcover, we're kind of planning on switching over from that to the dashboard being kind of the home spot when you click on the home button on the app and also probably the place you get redirected to when you log in. The feed would still be around, you'd still be able to access it. And probably...

some of those feed items will also show up in the dashboard eventually. Um, but we're thinking of this as like that portal to hard cover that's customized to your data and what you want. And you can select what widgets you want to show up on your own dashboard.

Ste (09:36.051)
Yeah, it's gonna be pretty nice and people have been asking for this. I think there's like just one other app that does this, pretty different than how we plan it, but it's nice to log in and see your whole overview. I mean, I guess it gives you like a feeling of control over what's happening. And it also looks good. I mean, I'm a sucker for dashboards, just like seeing everything.

We have that dashboard that you set up by them with the hardcover numbers. And sometimes I just like, when I move away from the computer, I just leave that on and that's like sitting there. Kind of makes you feel like you're in one of those sci-fi movies and you're watching the numbers go up.

Adam (10:21.07)
Hehehe

Adam (10:25.626)
That's pretty cool. Yeah, I'll open that like once a day often and check out a couple of things. And yeah, it's nice because like once you get used to your layout that you're like, especially one that you designed for this dashboard, your eyes will go to like the places where you know to look already. And so yeah, I'm excited to both like create this but also use it.

Ste (10:27.026)
Yeah.

Ste (10:47.117)
Mm-hmm

Ste (10:52.943)
Yeah, yeah. Should we jump in the Figma and try to figure things out? Let's see if I can, do you want to share the screen or should I?

Adam (10:57.474)
Yeah.

Adam (11:05.61)
Maybe you should, because I know you're a little faster with Figma.

Ste (11:11.263)
Oh, yeah. Well, I want the trackpad. So let's see how fast that actually is. But here we go. So sharing a few more. Boom.

Ste (11:24.715)
Okay. Cool. So I cleaned stuff up a bit. I still have to clean our designs, but this is like active development. Like what we're doing now. And as everyone can see, working on the dashboard, the reading journey, the letter lists and the navigation. This is pretty much done. And then the discussions, which is after we do these probably and the few other stuff. Yeah.

Adam (11:50.239)
Alright, nice.

Adam (11:53.779)
Yeah, very clean.

Ste (11:53.939)
So yeah, still could use a bit more cleanup, but yeah, as we go along. This is the dashboard. Okay, so this is like the first version we designed. So maybe it's useful to drop a list of the things people have been voting on. Let me see if I can fetch it to our, if you have it open Adam. Yeah.

Adam (12:00.93)
Hehehe

Adam (12:17.978)
Yeah, yeah, I can, I can copy it over real quick. So these ones, make this text a little bigger.

Adam (12:34.262)
You're over here to the right of where you are. I just dropped him.

Ste (12:39.151)
Here we go. Okay, so this is like the first four requests. It's books I'm currently reading with an easy ability to update progress voted by 84% of people, recommendations based on your reading, reading goals, and book releases for authors you follow, and relevant upcoming book releases. Okay, so this would be like the top four. And I think the...

first one, we can start from this maybe. This is the first one that I think corresponds to books I'm currently reading. So, reading right now.

Yeah, it would basically be that. Let me make some space over here. So this is like the dashboard structure. So let's push this a bit. Actually, let's just copy the page maybe. And delete all of these. So we have like a clean slate.

Okay, so.

Adam (13:54.074)
And one of the things that we've been talking about for this dashboard is that each of these widgets would work either on desktop or mobile and that there's potentially different sizes for each widget. But I think that that's going to be variable on the widget. So not it probably not every widget needs to be multiple sizes.

Ste (13:54.407)
cool.

Ste (14:09.339)
Yes.

Ste (14:17.791)
Yeah, I was thinking, I mean, we do have, so this widget right here, for instance, like, reading right now, it's, we have three columns basically over here, and I was thinking that for mobile, this could basically be just like a little bit tweaked, so this fits pretty well. So it could just be like as big as this one. So we just like adjust the width.

And there's also these ones. Let's say you have the reading goal one, and this would basically, it can be kind of like this. So I guess some don't need that much adaptation. So the fact that the dashboard is already like laid out into columns makes it easier.

Adam (14:59.062)
Hmm.

Ste (15:17.123)
I was actually thinking like out of these widgets, which would require a different layout on mobile. And I pretty much think that all of these can go one underneath the other and just have like different heights. What do you think?

Adam (15:41.682)
Um, yeah, I think so. I think we might end up, it might make sense to do like some that are like square, like these, uh, these two boxes that you have, uh, here on the mobile one. Um, but those could probably be things like, you know, your, your goal progress in a small version that just shows it almost like a, like an apple ring or some, some.

Ste (15:55.493)
Mm-hmm.

Ste (16:07.78)
Mmm, nice.

Adam (16:09.03)
small or like other visualizations like as we bring in stats from your stats section and turn those into widgets I could see some of those being smaller ones too.

Ste (16:19.251)
Oh yeah, definitely. Yeah. And the smaller ones can be like as small as this one on desktop as well. So if they work on mobile, I'm thinking, you know, we could fit two of these in here, or we could just like adapt them to. So yeah, just have them like this.

Ste (16:46.521)
Okay.

So maybe let's bring in this right now. So we've got the current reading widgets. Let me turn on the columns as well. Maybe that's helpful. Ah, here we go.

Ste (17:02.713)
So.

Over here, this is for like if you're reading two books. If you're reading one, it could just be a...

Ste (17:23.367)
slightly more.

Ste (17:29.075)
slightly smaller widget, kind of like this. But my question is like, what alternative way of like how it can look, what are you thinking about? We could remove this for now. Let's just like design it.

Adam (17:44.632)
Yeah.

Yeah.

I'm thinking, so let's see, if this is like the.

Adam (17:59.615)
one way.

Adam (18:03.646)
I'm thinking like, if you are reading multiple books, you probably want them all to show up on your dashboard.

Ste (18:12.011)
Mm-hmm

Adam (18:13.21)
And so I'm thinking like maybe we don't need these. We just always show all of them.

Ste (18:21.783)
Okay, what do you think about having a kind of carousel-like thing where you can just like side scroll or something?

Adam (18:31.594)
I think we should, I think this is kind of the most important thing. Like we just show all of them. Like, cause, uh, from what, uh, from one of the things that we have talked to a lot of people about, like reading multiple books is a lot of people have like an audio book and a digital book or a physical book or maybe a nonfiction and a fiction, and they'll be making like little bits of progress in both of them. And so making it like super easy to like today I'm updating this one. Today I'm updating that one.

Ste (18:36.3)
Okay.

Ste (18:55.347)
Mmm, okay.

Ste (19:01.895)
Okay, gotcha. Okay, let's do that then. So here we go. I removed this button. Uh, but given that this widget probably have a fixed height, I'm guessing they could be like, it could be scrollable. So you would scroll it or were you thinking to just like adapt the widgets to make it as big as, you know,

the number of books you have currently reading.

Adam (19:35.194)
Yeah, that's actually a good question. Cause like if we're trying to create a dashboard with fixed rows and columns, we would either have to know it ahead of time or dynamically just do it. And...

Ste (19:39.674)
Yeah.

Adam (19:55.246)
Hmm.

Ste (19:57.187)
Yeah, it could be like a scroll area. So if you have more books, you can just scroll and you can update.

or we can just make it...

Ste (20:16.995)
adaptable according to the number of books you're reading. But, you know, that might be tricky because at some point, let's say you're reading 10 books, you're not, I mean, no matter how we adapt it, I'm guessing the difference between, yeah, one book and 10 books is going to be huge. So.

Adam (20:45.65)
Yeah, it seems like at some time, it's going to need to change its shape. But yeah, I wonder about like.

the, is there, how do you show like the columns so you can see like how many columns something is?

Ste (21:06.707)
Uh... over here in layout grid, so...

Adam (21:11.215)
Okay.

Ste (21:12.739)
Yeah, should I make them more, yeah, let's make them like slightly more visible.

Ste (21:21.063)
Yeah, and you can toggle them. Yep.

Adam (21:21.898)
Ah, there it is.

Adam (21:26.84)
Cool. Yeah. OK, so this is the equivalent of four columns now. And.

Ste (21:26.887)
So.

Ste (21:32.082)
Mm-hmm.

can be like eight columns and you can have like smaller books, I'm guessing.

could fit.

Ste (21:48.435)
About six books.

And then we go on.

Ste (22:00.268)
Okay, yeah, well, you couldn't.

Ste (22:06.037)
Uh...

Adam (22:09.234)
Yeah...

Adam (22:15.038)
So one of the things that I was thinking for these widgets that we'll probably need, and this comes into play especially for like the stats ones, is like aside from just a small, medium, large customizations or size customizations, however we decide on that, it's like settings for each individual widget might be needed. So for instance, if you're tracking your pages,

red for instance, you could track your pages read per day, per month, or I'm thinking of like stats in general. So I guess that's kind of a question in my mind. One way to go is we create all these individual widgets that are customized for like here are your 2024 stats, here are your 2024 stats by month, here are them by day, and create those as different widgets. And in another situation...

Ste (23:08.56)
Mm-hmm.

Adam (23:12.918)
we create a like pages read widget, and then we have a setting for like pages read by day, pages read by week, pages read by month, and the widget knows how to kind of adjust accordingly.

Ste (23:23.132)
Mm-hmm.

Ste (23:27.107)
I think that would be better. That makes more sense just hearing it. So you'd have like a widget pages read and you could maybe have a drop down that says pages read by month, day, year or whatever you choose. I mean...

Ste (23:48.635)
that kind of makes more sense. I mean, that's pretty easy because it doesn't change in size, which is quite different from this one. But I'm thinking that could be the approach. So you'd have like, depending on the widget, a way to customize what it's showing in some cases.

Adam (24:13.49)
Yeah, so for something like this one for like currently reading, I think I'm gonna, I'm gonna change this to currently reading, just to match over with our other terminology. So maybe like on the settings for term for currently reading, maybe you have like number of books that you want to show and that number

Ste (24:23.111)
Yeah, of course, go ahead. Yeah. Uh-huh.

Adam (24:42.842)
dynamically sets the number of rows that this will take up. That way, it's maybe like, that way, even if there are 10 books or three books, if they've said, give me five books worth of height, it'll always use five books worth of height.

Ste (25:04.383)
Mm-hmm. That could work. I'm thinking, like, what if, you know, I shared that Bento tool a while ago where you could set the size of the widgets. So let's say, you know, for some widgets, you have three sizes, because I'm thinking, like, set the number of books.

That sounds a bit...

Ste (25:40.503)
unclear, I guess. So let's say you'd have like small, large, and yeah, you'd have like three options for size and each option would

So for instance, the small widget would only show two books. The medium widget would show four books. So we'd have defaults, just like you'd have the number of books. But instead of the number of books, you'd have something we can use on other widgets as well, which is the size of the widget that we can customize.

I can show you real quick on the actual hardcover bento site.

Adam (26:34.878)
Yeah, yeah, I'm curious.

Ste (26:39.063)
Let me change the tab so everybody sees it. So bento.me slash hardcover. So I'm going to share the screen for Bento. Where is it? Where is it? Where is it? Hardcover app. Here we go. So.

Let me log in.

Ste (27:13.847)
Okay, so this is how they handle the widgets. So when you change them, let me just fetch my password so I can log in.

Ste (27:40.619)
Ah, here we go. Okay. So, see, they have this one, and you can actually change the size of... This is pretty cool. I mean, we could do this. This is like ideal for...

Adam (27:42.12)
Mm.

Adam (27:46.715)
Oh yeah.

Adam (27:54.615)
It's pretty cool.

Ste (27:56.927)
Yeah, and depending on the size, you can actually set what's shown. So if you have the small size, it just shows this. If you have the medium size, it shows it like this. If you have the whatever size this is, it shows it like this. And on mobile, you can just like, yeah, do the same thing.

and you can play stuff around and it gets moved.

Adam (28:34.058)
the little like uh like while you were dragging it had like uh i think it was using like the accelerator accelerometer like physics to decide like how much it was like moving left to right as a neat like dragging effect

Ste (28:34.163)
Did I miss it?

Ste (28:49.015)
Uh huh.

Ste (28:53.863)
Yeah, this is very good and clean. So I was imagining this is how it could look like, and it only shows up on hover when you're editing the actual order. So I don't know. That seems pretty clean, and it's a universal control. I mean, I'd say.

rather have that than something like particular to each widget. But I don't know, maybe it's better to have something for each one.

Adam (29:32.302)
Well, maybe we can focus on this one and then we'll see like what that leads into. Because I have a feeling if we get this one right, then we'll kind of know like the sizes that it needs to be.

Ste (29:47.151)
Yeah, exactly. Yeah, that sounds good. So for the, yeah.

Adam (29:50.718)
And I was thinking we could maybe add something similar to our goal one, like on a per thing basis. And

Ste (30:04.833)
Oh yeah.

Adam (30:08.679)
That's just a straight copy, but something that quickly indicates your progress.

Ste (30:12.603)
No, it looks good. Yeah.

Ste (30:18.135)
Yeah, that's good. And what about the way to update it? I had this button over here, which I don't love, but it was the only thing that was clear enough. Let's do this so it's more subtle. I know some people don't like that yellow, so we can maybe accommodate for them. And we can just...

Adam (30:38.738)
Or we can make that like green or something to indicate the part that you've read.

Ste (30:44.919)
Oh yeah. That didn't work.

Ste (31:02.991)
Yeah, that's nice. And what about the Update button?

Adam (31:05.056)
Yeah.

Adam (31:08.678)
Yeah, so I guess like we need to figure out if we want to edit in, like right now we have the book button, you click update progress, it pulls up the either the drawer or like the little window for editing. We could pull up that skip straight to that page or that drawer if you're on mobile with an update button.

That might be the quickest way.

Adam (31:41.618)
Or another way is like, you know, this, this slider has a, a range slider in it. And you can just drag the range slider right there and update your progress.

Ste (31:54.239)
That's cool. But on mobile we have to ditch that some. I mean, I can't imagine and I'm pretty good with like how to drag it. But yeah, we'll have lots of people saying I can't, I couldn't drag this to the exact place I'm in like in the book. So yeah, let's just trigger the

Adam (31:55.381)
and

Ste (32:19.131)
I'm guessing on desktop as well, it's gonna be annoying to nail it exactly where it should be.

Adam (32:19.703)
and

Adam (32:25.391)
There's also the option that this field, like the 324 and the 64%, like we can make all of these variable and editable. And then the slider is just like a third way of editing it. So you could edit it by your page number, your percentage or the slider.

Ste (32:30.613)
Mmm. Yeah.

Ste (32:44.915)
Okay, yeah, let's do that. Yeah. And try to keep it as similar to this as possible. I mean, not make it look like an input field. Just make it like I'm editing it right now. So kind of like this. So it's seamless. What do you think?

Adam (33:07.198)
Yeah, yeah, it's kind of like content editable. And one of the ways that I've done that in the past is used like a dotted underline on fields that are editable. So maybe we could do that for like the 324 and the 64.

Ste (33:11.088)
Mm-hmm.

Ste (33:19.547)
Mm-hmm Yeah

Ste (33:32.859)
make it really subtle so...

Ste (33:40.908)
and this one, right?

Adam (33:42.394)
Right. Yeah, and we wouldn't need it on this one.

Ste (33:49.1)
Oh yeah.

That's not that double. Maybe, what do you think about some quick controls to change the addition over here? I'm thinking like...

Ste (34:14.459)
This is like the default edition, but what if you're reading the audio book or what if you have a different edition that doesn't have this number of pages? I mean, you could just like input this, but it's kind of like if your edition has 600 pages, that takes a lot of math to, I mean, it's not gonna be accurate ever, I guess.

Adam (34:38.374)
Yeah, because it seems like the different things you might want to do, like you said, you might want to change the edition. You might want to mark it as red. You might want to rate it. You might want to review it.

Ste (34:51.355)
Mm-hmm.

Adam (34:51.614)
So it's kind of like, yeah, there are a bunch of different actions that you might want to do at this point.

Ste (34:56.551)
Maybe just put the book button. Yeah. Best I can do is the book button. The small one. Yeah. Here we go. So it's this one. Could be this. We could make some stuff appear on hover though.

Adam (35:01.078)
The mini book button on there.

Yeah.

I mean, that kind of gives people an option to go to any of those as long as it's the smallest one.

Ste (35:24.955)
That could be interesting. So what do you say you could do from this? Let's see if we can actually split it into some actions. So you said, like, Marcus Redd. But Marcus Redd would basically be setting this all the way to the finish. And we could have that as an interaction. Right?

Adam (35:55.176)
Yeah

Ste (35:57.363)
So if you put 100% over here, that would basically be marking it as red, or we could have a button. So leave a review.

Adam (36:07.049)
Yeah

Ste (36:15.696)
What else was there? Change edition Yeah

Adam (36:17.134)
There's edit addition and also like as Maria mentioned in the chat, like there might be incorrect data. So it's almost like edit addition if there's a way to like do that super fast from this view.

Ste (36:33.931)
edit edition.

Adam (36:34.219)
especially for like the page numbers.

Ste (36:39.367)
Oh yeah, that's true.

So this is like, it has to take the data from the edition. I'm thinking, is there a scenario where we can actually let people, maybe we don't have that edition. They're not a librarian. So I'm thinking, ah, they don't find their edition. That's like something like really annoying. They have to edit the edition. Could we like maybe allow them to set a custom like page count or minute count to, so yeah.

Adam (37:13.524)
That's kind of what we do now with the progress.

Ste (37:19.475)
Mm-hmm. Yeah, I know it's like it's that custom like Thing you can set that doesn't I mean it takes the initial page come from the addition, right? But you can change it

Adam (37:35.026)
Yeah, I just threw it in the Figma. Yeah, it's like if you select page, then it allows you to kind of edit both the start and the end page. In the database, we're not actually saving your page number, we're just saving the percentage, and then we're repopulating it, and we're saving your page number in local storage.

Ste (37:39.655)
Yeah.

Ste (38:06.063)
I think that, I mean, that works, right? Because you're only interested in like your page number, except for stats. I mean, are we saving that for stats as well? So it counts towards an accurate page number, depending on like this one.

Adam (38:23.13)
Yeah, I mean, ideally, this 189 should, like, be updating some addition somewhere in the background that lets us know an addition exists with this many pages. And this is the addition this person's using. And then maybe in the next time, someone else will use that one. It's almost like it's almost like this 64. Like, as I was saying that I was imagining this 64 almost being like

Ste (38:44.977)
Yeah.

Adam (38:52.606)
a dropdown for the edition. And that, and then it's, it's like, maybe it's like, uh, the number of pages in each edition. And so you're, you're kind of like, you're not really selecting the edition based on, oh, this is the hardcover 20th anniversary, blah, blah. You're, you're setting it based on, oh, this is the 624 page edition.

Ste (38:55.475)
Oh yeah, mmm.

Ste (39:16.856)
Uh huh.

Adam (39:18.046)
And maybe there's some other data there as well, but that seems like one of the most important things.

Ste (39:21.271)
Yeah, yeah, exactly. I'm thinking if we should also add like a custom one in the dropdown, just in case you don't. I mean, I was initially thinking to just be able to edit this one, but yeah, it can be like a small dropdown and you can select your like page number because, yeah, you just look at the end of the book and you could have like a custom.

Adam (39:28.526)
Mm.

Ste (39:50.959)
custom page number as an option.

and it turns this into an input so you can actually like change it.

Adam (39:57.12)
Yeah.

Adam (40:02.674)
Yeah, I think that would work really well for being able to set the addition in a very easy way, very low friction way. I think...

Ste (40:10.628)
Yeah.

Adam (40:14.41)
Like for books with pages, this will work well. For an audio book, we'll probably have to figure out some other alternative way, but wanna keep going on the pages part for starters.

Ste (40:23.909)
Mmm, yeah.

Ste (40:28.123)
Yeah. Okay. This is good for now. I mean, this is like great. It's like an easy way to update progress. I'm thinking like mark as dread, like leave a review. If you want to leave a review, maybe that I mean, that definitely happens after you mark it as dread, right?

Adam (40:49.69)
Yeah, I'd say, or at least like marking as red could give you next steps from that point. And one of those could be lever review.

Ste (40:58.943)
Mm-hmm. I'm thinking what if You drag this all the way to 100%

Ste (41:09.627)
maybe there's a step in between or it asks you, do you want to finish the book or mark it as read, just so you don't drag it accidentally and mark it as read, just so let's think if we ditch the book button. So you drag this, you get a thing that overlays, so kind of like a contextual action over here. This is just like very, very...

but bear with me. So mark it as reds. Yes, no. So no would go back. Yes would basically set it at 100%. And then maybe this could turn into leave a review.

Ste (42:03.811)
and then you'd go through the flow of reviewing a review. What do you think?

Adam (42:12.114)
The idea there was like after you drag it to 100, then like maybe the card would like, it would it would almost be like a interstitial that shows up on top of that area like it would like fade in on top of there with like this question.

Ste (42:17.209)
Mm-hmm.

Ste (42:23.952)
Yep.

Ste (42:30.522)
Uh huh.

Adam (42:33.15)
Yeah, I think something like that could work. Like, I feel like that's kind of a missing thing right now. Like we, it takes two steps to do that today. So if we can group those together, then that would, you know, be one less thing for people to have to do.

Ste (42:49.663)
Yeah, I'm thinking, you know, it could also, I mean, we basically be, I mean, replacing this and making it so that you can do it via the slider or the page over here. So if you'd set it to 100% via text, just write it down or just drag this, it would prompt you if you want to mark it as red and...

then you could leave a review so you wouldn't have to do that through the book button manually. It would be just like a flow. And if you'd want, maybe we can have like a link to the book where if you'd like really want to do that, you'd...

Ste (43:41.763)
or the cover can be. So if you press the cover, you go to the book page, I'm guessing, right?

Adam (43:48.835)
Yeah, I think so. That makes sense.

Ste (43:51.051)
and you can access the book button over there, just not have the book button over here. What do you think?

Adam (44:02.15)
I think I like having the book button there just for all the things that we could be missing for like dates read list management Rating Yeah Because because Marcus read is probably one step, but there's also Rate it and that's less friction than a review

Ste (44:13.823)
Okay, let's just leave it. Yeah, let's just leave it there.

Ste (44:25.84)
Yeah, true.

Adam (44:27.146)
So maybe, yeah, I'm thinking like you drag it to, you drag it to 100% or you click on this button and you change its status from currently reading to like stopped, like did not finish. Then in both cases,

Adam (44:50.99)
Well, I guess if you, if you slack this to a hundred percent, maybe we should just like not even worry about asking them anything. We just mark it as red because a hundred percent like it's red. So it's more question after that is like, do you want to rate it or leave a review? So maybe there's some other state, which is like, maybe it's like a drop down here or like some other.

Ste (44:58.723)
Yeah, of course.

Ste (45:02.588)
Mm-hmm.

Adam (45:19.982)
Yeah, I'm trying to think like the interstitial over it's one way of doing it. But like we could also just have like five stars here and you just like click on that.

Ste (45:34.187)
Yeah, I'm thinking like after you mark it as red, this is gonna be the only time when it still shows up here. So it kind of like makes sense to cover it because you're not gonna see it in the widget anymore. So it's kind of like an end currently reading process. So that's why I was thinking to like have this, these interstitials. So...

Adam (45:42.222)
true.

Adam (45:47.054)
Thanks for watching!

Ste (46:04.155)
rate it and then it can be like live review and you can yeah.

Adam (46:11.033)
I was thinking like a.

Adam (46:15.206)
for like Letterbox for instance, when you like what they do is they pop up and this is this feels like going back to something we tried before and then stop doing um but they uh you know they bring up this modal

Adam (46:42.078)
And that's what happens. Yeah. And I know I don't want us to have a review modal because like having, cause if you're like typing and you like mistype outside of the modal and then it might close and you lose all your review. So I don't like it for that, but for like the rating and status, it's kind of neat. But no, I don't, I don't want to, I don't want to modal here.

Ste (46:42.496)
Oh yeah, the review model.

Ste (46:48.433)
Hahaha.

Ste (47:09.651)
Okay, that's a good way of deciding.

Adam (47:11.485)
Hehehehehehe

Ste (47:16.139)
Okay. We can have the, I mean, I like the interstitial. Where have I seen it? I mean, it's not a pattern necessarily in iOS, but basically it's not a model. You're like not moving from here to the middle of the screen. It's just like having it over what you are doing and basically you can dismiss it, but...

Yeah, I don't know.

Adam (47:48.246)
I have an idea that just came to mind for it. So it's kind of a take on the book button, but it's a little different. I was trying to find your navigation drop-down part. So it's like this popover.

Ste (48:08.925)
Oh, here it is. Yeah.

Adam (48:09.97)
Yeah, let me, I'm gonna paste it in here. So the idea would be like, after you...

Ste (48:13.732)
Mm-hmm.

Adam (48:21.538)
complete it, it pops up something like this. And that has like, rating and then like, mark is red. So it's kind of like all the interstitial stuff could just show up in a popover there.

Ste (48:26.143)
Oh yeah, okay, so it's, yeah.

Ste (48:39.867)
Yeah, of course. So it could be like, rated and you could have the stars over here. Let me show you, I have a component from that. Why am I not using it? So here we go. And it's small. Okay. And rated.

And then you'd have another thing, like leave a review, like this.

Adam (49:16.107)
Maria says you're killing it. And figma stay.

Ste (49:16.435)
And thanks. I'm on a laptop trackpad, so. Yeah.

Adam (49:26.434)
Yeah. And, and we could probably show like, um, dates read here and like they would hopefully not need to edit that at all. Like it would just, it would almost be like confirmation that everything's working.

Ste (49:46.731)
Oh yeah. Sounds great.

Adam (49:51.982)
I'm going to delete the icon and then see how our.

Ste (49:56.42)
Oh yeah.

Maybe leave a review. What do you think if we make it actually into a...

Ste (50:06.831)
thing that takes you on a different page.

Adam (50:06.86)
Yeah.

Adam (50:12.722)
Yeah, I could see that. I was thinking like.

Ste (50:16.498)
Okay.

Adam (50:19.274)
We have, yeah, exactly.

Ste (50:25.127)
And maybe what else was there? Right to review your rating and.

Adam (50:28.959)
Uh-uh.

Adam (50:34.298)
this up. I think it is really big. Maybe not that big, but pretty big.

Ste (50:40.34)
Yeah.

Ste (50:44.987)
Ah, that's pretty. I think we can put it in the... sorry, this is just auto layout, so...

It's hell to edit it. I usually like just group stuff, but yeah, in this case. Here we go. Oh yeah, date thread. Okay, okay.

Adam (51:09.184)
Yeah.

Ste (51:09.331)
was leaving out something.

Adam (51:12.341)
and

Adam (51:18.247)
And so that would, it's kind of like a mini book button in a way, but it wouldn't show up on click, it would more show up when you just like complete, like set the status to 100%.

Ste (51:34.391)
Yeah, exactly. Yeah, it's an action prompt. So you finish the book, you get like some contextual action for that thing you just did. So it kind of feels like you're guided and it's automated versus you're changing the status, I guess.

Adam (51:57.138)
Yeah. Yeah, I think that this works well for kind of hiding all these features, but still making them very relevant for when they need to be used.

Ste (52:09.139)
Mm-hmm. Yeah. And after you do this, I'm guessing it would remove it from this list, right?

Adam (52:10.324)
and

Ste (52:19.375)
So this would just disappear.

Ste (52:25.651)
together.

Adam (52:26.265)
Yeah, maybe it just shows up until.

until you like navigate away from this page. Like I don't, yeah, like I don't know if it would need to like fade out, but we could, it could just show up until you go to another page.

Ste (52:35.728)
Yeah.

Ste (52:41.847)
Oh yeah, exactly. I mean, if you leave a review and come back here, it's not going to be here anymore, right?

Adam (52:44.994)
Mm.

Right. And Ed in the chat said that he sometimes leaves text for DNF reviews. And it seems like that could work where if you're not setting this to 100%, you're just changing your status to did not finish. And then you click on the button again, and you go to write a review. So that case would still be accessible through the book button.

Ste (52:49.903)
Yeah, that sounds good.

Ste (53:07.101)
Mm-hmm.

Ste (53:16.594)
Yeah.

Ste (53:20.623)
Yeah, this is looking good. I mean, you can do all the stuff you can do now, but you have some extra controls and maybe we'll find, I mean, I kind of sense that there's a way of updating progress and going through all that flow of marking a book as read, then leaving a review, then adding the tags that we can make even smoother than this now.

Adam (53:53.671)
Yeah. Yeah, that like end of book thing, I know we've like prototyped some alternate ways of the review form. And yeah, I want to definitely want to revisit that again, because I feel like even since this, we've, we've learned even better ways.

Ste (54:03.359)
Mm-hmm. Yeah, right over here

Ste (54:13.411)
Yeah, exactly. And there were some things in here that we have yet to apply. So this kind of like leaves us in a place where we have this for, this one's for two books right now. But what if you have three, four, five books, should we just like do the resizing thing? So.

This would be like the smallest. This would be like.

Ste (54:50.671)
larger, I guess. This would make the widget larger.

Ste (55:01.715)
So it would have the same widget but maybe...

Adam (55:05.381)
Like four.

Ste (55:07.511)
Yeah, if you have four books of this.

You have to...

Adam (55:13.614)
I'm just gonna delete this one.

Ste (55:25.743)
Yeah, this would be like the medium and well, not at the same time, obviously, as an alternative to this one, but you could have maybe three sizes and it would be like two, four, eight books. So for eight books, it would just be maybe like this and anything in between could work.

Adam (55:54.414)
Yeah, because it's like four columns exactly. So yeah, we could tile it.

Ste (56:00.195)
Yeah, this one is the, I think the most difficult until we get to the next ones, which are probably gonna be just as difficult. Yeah, exactly. Just like life. Here we go. So.

Adam (56:04.895)
Yeah.

Adam (56:10.002)
It's the most different until the next one, yeah.

Ste (56:23.199)
Yeah, if you have six books, you're just gonna like three sizes for the widget, I think is okay, I guess. And we can have widgets that are resizable, for instance, this one and one, I'm guessing there are some widgets which, you know, with

won't need to resize, for instance, I can't imagine like the goal being bigger than this or like this widget or the based on your reading widget. So.

Adam (56:55.39)
Yeah, like we could, like for the goal one, for instance, we can make like a tiny square one, which is just like a circle that's partially complete. And then that the medium, but maybe there's not a large version. Unless the large version, we wanna also show like the most recent books that you read towards your goal or something like that.

Ste (57:05.263)
Mm-hmm

Ste (57:16.123)
Hmm. Yeah. Oh, yeah. True. Yeah. Well.

Adam (57:17.387)
but...

But that's less useful than just having it. Ha ha ha.

Ste (57:23.691)
Yeah. If we can pull that off, let's do it. But yeah, I mean, it makes, it's good that the resizing makes sense, but I don't know, does it make sense if we do it like this so we can actually like resize the resize and reorder? I mean, it makes it like very complicated on our end, but I don't know, we can pull it off.

Adam (57:51.894)
Yeah, I like the idea that widgets have a set number of rows and columns that they take up. And I think if we go with that as our basis for how we design every widget, it's like every widget has, for example, three modes. And in small mode, it's always going to take up

this many columns by this many in medium, it's always gonna be this by this, then I think that's a good limitation that we can embrace.

Ste (58:21.724)
Mm-hmm.

Ste (58:28.291)
Yeah, this, I mean, it sounds good. And, you know, for the currently reading, if you're reading more than eight books, uh, we can just make it into a scroll area or just like limited to eight books. I mean, I don't have any there. Options right now in my mind.

Adam (58:45.226)
Yeah, I think now that we've come full circle on this, the idea you had of having the little dots to indicate multiple pages, I feel like now I'm more ready to embrace that concept, having looked at all other available options and ruled many of them out.

Ste (58:57.792)
Yeah.

Uh-huh. Yeah, it might be. We could do like the, oh, we could even do the thing we did for the urine books where we lock in the scroll. So if you have like two books.

over here and you're reading like four and you want to keep this size. It would be these books and then when you scroll you could lock in those other books. So what's that thing called when you scroll snap? Yeah. We could scroll snap and yeah, basically make it into a snapping carousel. And even if you would read like...

Adam (59:37.282)
Mm-hmm.

Ste (59:44.451)
for instance, let's say 10 books, you'd have these ones and you could scroll and it would snap to the next two remaining books.

Adam (59:53.162)
Yeah, exactly. And I like this more than like, like Goodreads has a carousel that's one high. And that one always bugged me because if I was going for like my fourth book, I have to scroll to the fourth column. But this one, at least like having it be a couple of rows and a couple of y dimensions, then that makes it so that if you're reading a lot of books, you're probably just going to use the large

Ste (59:55.148)
Okay, that's good. Yeah.

Ste (01:00:09.124)
Yeah.

Adam (01:00:23.214)
currently reading size widget. And then you probably only have to scroll if you're going to your 11th book.

Ste (01:00:30.275)
Yeah, exactly. And it gives you a better overview. And if you're reading like the most common use case is like one, two books, the small one actually does its job. So we kind of like have all our bases covered. It doesn't look, I mean, if we made like a universal dimension one, it would look weird if you had like two less or too many books. So yeah.

This is, yeah.

Adam (01:01:03.816)
Yeah. I had one thing to show real quick for something that Justin, I'll share my screen for a sec to show it. It was like for the page number and the percentage number, something that I was doing on another project is I had these interactive,

Ste (01:01:13.678)
Oh yeah.

Adam (01:01:30.03)
parts here. And so like this is an input where you can enter numbers, or you can click this little drag handle. And it makes like the range bigger as you're like, in the middle of dragging it. So it becomes a range slider. And it's and this ended up being like very, very quick to

Ste (01:01:32.935)
Oh yeah.

Ste (01:01:48.547)
Yeah, I like that and I've actually used that on your site.

Adam (01:01:57.406)
Like people got it real fast. And if they need to enter the exact page number and they don't want to try to get that with the rain slider, they can just zoom in and enter it.

Ste (01:02:08.623)
Yeah, that's perfect. Yeah.

Adam (01:02:11.665)
Yeah.

Adam (01:02:15.018)
Well, I think this will make it a lot easier to update progress on this widget.

Ste (01:02:15.079)
Real nice.

Ste (01:02:22.039)
Mm-hmm. Yeah, it's crazy to me how we're still uncovering better ways to do it. I think we'll be five years from now still thinking of an even cleaner way to do all of these. But yeah, that's why we're here, I guess.

Adam (01:02:37.01)
Yeah. And we're talking about the letter books cards that show up in different contexts. And one of those cards is probably the currently reading card. So we could probably use some of the same style on that card style.

Ste (01:02:53.939)
That's true. Yeah, that's gonna be nice. Yeah, I don't think they're gonna think about that. Okay.

Adam (01:02:59.3)
Yeah. Just reusing all the stuff.

Ste (01:03:02.751)
Yeah, that's perfect. Yeah, well, I think that's the hour. Thanks everyone for hanging around. We solved one widget. They were thinking we will solve the first four in one hour, but yeah.

Adam (01:03:22.758)
Yeah. Well, yeah, thanks everyone for joining us. It's been fun kind of working through this with some feedback and yeah. I'll talk to you next week. Bye.

Ste (01:03:35.707)
Yeah, see you all next week. Have a good one. Bye-bye. See ya.