Mobile Button Size

[mikey_w]

On the desktop I am used to buttons being narrower than fields - like this text area field is wider than the corresponding “+ Create Topic” button.

I know someone creating a mobile app, and they have all of their buttons full screen width which is confusing to me as I don’t know if it is a shaded/reversed heading or a button or something else.

Is this okay?

Username: _____________________

Password: _____________________

------------
|  Log In  |
------------

[ralphm]

There are recommended min sizes for buttons on mobile, as they need to be easy to tap with a blunt finger tip. The recommendation used to be something like a min of 40px width/height, I believe. Imho, you can’t make them too big on mobile. I like the full width look on small screens, personally.

[mikey_w]

@ralphm

Imho, you can’t make them too big on mobile. I like the full width look on small screens, personally.

Unless they are so wide that they no longer look like a button, but instead look like a section heading…

[ralphm]

@mikey_w

instead look like a section heading

I think that would just be a design #fail. It’s pretty easy to style a submit button that looks like a submit button attached to a form.

[mikey_w]

@ralphm

@mikey_w

instead look like a section heading

I think that would just be a design #fail. It’s pretty easy to style a submit button that looks like a submit button attached to a form.

You mean like rounded corners and drop shadows?

[ralphm]

Not necessarily. I mean just making it clear what it does, like “Send Message” or whatever, and a style that doesn’t make it look like a heading, but somehow ties in with the overall form styling.

[mikey_w]

@ralphm

Not necessarily. I mean just making it clear what it does, like “Send Message” or whatever, and a style that doesn’t make it look like a heading, but somehow ties in with the overall form styling.

Would it be clear what happens when you click on the green rectangle?

[ralphm]

@mikey_w

Would it be clear what happens when you click on the green rectangle?

I’d say Yes to that. I’m not keen on that green, though, and the white doesn’t contrast enough. I’d also close that gap quite a bit.

[mikey_w]

@ralphm

@mikey_w

Would it be clear what happens when you click on the green rectangle?

I’d say Yes to that. I’m not keen on that green, though, and the white doesn’t contrast enough. I’d also close that gap quite a bit.

That’s the point - he chose a horrible color scheme and layout. And if you saw things with his Facebook button, you’d be inclined to think that clicking on “Sign In” takes you to another screen to sign in…

If the color were changed, it was narrowed, and rounded corners added, I think it would be more clear that is a button t sign in and not a place to go. But that is me…

[ralphm]

@mikey_w

he chose a horrible color scheme and layout.

There are lots of bad designs out there. Is this your problem? If not, I’d say pick your battles …