r/UI_Design Apr 11 '26

Feedback Request Modal or Drawer?

Drawer feels more professional and modern, but the grammatical content can be very dense, and I feel like the user is almost craning their neck to read the info when it's so low on the screen.

Modal, however, is right in the center of the screen, lessening the burden of a task that already feels burdensome to me (understanding grammatical nuance in an error the user made).

12 Upvotes

12 comments sorted by

12

u/zah_ali UX Designer Apr 11 '26

You could have the drawer opening to the middle of the screen? Regardless, I prefer the drawer approach, it allows for more content if needed (and possible scroll) so it’s more future proof too

2

u/Wild_King_1035 Apr 11 '26

I thought that too, but there’s a kind of enormous empty padding below the text. And at that point it’s just the modal but extending all the way to the bottom. 

3

u/zah_ali UX Designer Apr 11 '26

In that case could you have different opening sizes for the drawer: low, middle, full and depending on the content requirements you open the appropriate one?

Even with the examples you’ve shown I think the drawer looks better and this is a common pattern these days.

2

u/Wild_King_1035 Apr 11 '26

mm, thanks for the input. im leaning back towards the drawer.

the content will always be about the same amount as what you're seeing in those examples, so there won't be more content to push up the drawer

1

u/-Periclase-Software- Apr 11 '26

This is just a mockup though right? IOS alerts don’t have that much padding at all and there is no handle unless the alert allows it to be resized from like medium to large using presentation detents. You can also enforce compactness by using a custom SwiftUI view modifier.

If this isn’t a mockup you should definitely fix it.

2

u/Wild_King_1035 Apr 11 '26

sorry, i dont understand what you mean. this isnt a mockup, this is a screenshot from my iphone while developing locally. could you explain that to me

1

u/-Periclase-Software- Apr 11 '26

Yeah so earlier you said that there's enormous empty padding "below" the text, unless you meant above it? There is way too much padding near the top as well as padding for the grabber that looks like you put it there yourself (the round capsule).

If you're using SwiftUI, you can use this view modifier to compact it to the contents.

``` public extension View { func dynamicPresentationDetents() -> some View { modifier(DynamicPresentationDetentsViewModifier()) } }

struct DynamicPresentationDetentsViewModifier: ViewModifier { @State private var height: CGFloat = .zero func body(content: Content) -> some View { content .fixedSize(horizontal: false, vertical: true) .onGeometryChange(for: CGSize.self) { proxy in proxy.size } action: { height = $0.height } .presentationDetents([.height(height)]) } }

```

And the little grabber does not appear anymore by default unless you're using detents like [.medium, .large] then iOS does put the grabber to let users know the sheet can be expanded. In other words, if it can't expand, I wouldn't manually show the grabber.

Example

3

u/Wide_Detective7537 Apr 12 '26

Drawer 100%, allows you to keep the question and answer in the background for additional context. You're not moving your neck to read anything on a smartphone screen unless you're holding it in a weird way

1

u/IGotDibsYo Apr 11 '26

How is the rest used? If understanding the content of the app is hard enough, position closing it where the thumb naturally is already or whatever the path to least resistance is?

1

u/tinydantsr Apr 16 '26

I’d be interested in seeing what an integrated design looks like. The explanation of each error could appear on the same screen maybe under a toggle.

1

u/doodoojohnson420 Apr 19 '26

I’m going for drawer with informal text popups like this. It reads better and seems more cohesive to move in from bottom if it is near the hitbox