I've seen buttons be smaller in width (with a minimum width of course)
like this
And full width until the margin like this
What would be best, or in which situations it would be better to choose one over another?
Add a comment
|
2 Answers
Choose bigger buttons when the main purpose of the screen is to attract your users to it, in the case where ie it's the only action to take or if it's a call to action. These type of buttons can also stand out by having brightly filled backgrounds or by placing them in specific places on your screen where there is whitespace.
Choose smaller buttons when the action taking place is secondary as would be ie adding an upvote/like or moving on to the next screen in a viewpager. These buttons are mostly discrete with often transparent backgrounds but brighter text color. You can place these anywhere that makes sense in your layout, usually close to the content that it will affect.
Spacing can be a bit tricky. Depending on layout, orientation and purpose but it's a good rule of thumb to add at least an 8dp margin. Keep in mind touch space limitations, for example on Android, Material Design deems as good practice to have buttons that are at least 48x48 dp wide so the area of the buttons is comfortable to use for the users.
Whichever options you decide for your buttons, make sure they follow a general style within your app (things like similar colors, shapes, sizes depending on importance, font families, etc.) . Repeat button patterns for similar actions so your users know what to expect when navigating through your app, for example if a user is able to save their profile data with a square green button on one screen, make it a habit to use that same square green button on any other screens that require saving of data.
You may find other interesting topics and tips at the Material Design Components - Buttons page
Hope this helped, good luck!
The size of the button is very important. A good explanation can be found in this article from Invision:
The first element to consider when designing a UX button is size. You should consider how large a button is in relation to the other elements on the page. At the same time, you need to make sure that the buttons you design are large enough for people to interact with.
As both examples have a good clickable size, I wound't say a bigger button is better, I think it boils down to the context and the style of the app.
