Is there some kind of rule for this? like text+button

by the way, few questions that come to my mind… now speaking only VERTICAL alignment… a) where should the spacing be fixed / same? between elements in „element groups“? b) how should the responsiveness behave? (let’s say there is iphone SE with short screen and X with tall screen), should the content be same height and align towards top/center as a whole or stretch the spacings between „element groups"

0

06.02.2021

✷ ᴛʀᴀᴄʏ ✷

Marián Trpkoš
by the way, few questions that come to my mind… n...

a) you can try categorising your content to identify which should be grouped together. The spacings can be set at a design system level. And justify why that much / little space is needed, or is necessary. If it’s too far apart it’s too disconnected. If it’s too near, it’s hard for users to scan. There are than this but I think you got the gist 🤗

0

06.02.2021

Marián Trpkoš Автор вопроса

Marián Trpkoš
by the way, few questions that come to my mind… n...

the responsive-ness is the biggest problem for me, like if you make variable spacings between „element groups“, it may look weird on extra tall/small screens, if you make it fixed you may intrdouce weird scroll / overflow, maybe combination of these two? like creating variable spacings with min and max value?

0

06.02.2021

✷ ᴛʀᴀᴄʏ ✷

Marián Trpkoš
by the way, few questions that come to my mind… n...

b) you can set screen sizes / breaks. For example, for screen sizes > 375px (W/H)use spacing X. For screen sizes below < 375px (W/H), use spacing Y.

0

06.02.2021

Marián Trpkoš Автор вопроса

✷ ᴛʀᴀᴄʏ ✷
a) you can try categorising your content to identi...

is there anything like spacing <-> „importance“ relationship?

0

06.02.2021

✷ ᴛʀᴀᴄʏ ✷

Marián Trpkoš
the responsive-ness is the biggest problem for me,...

Usually in my experience, I would find a middle ground that can fit great for most phone sizes. For example, from your screens, a lot of space is given to the gradient layer behind. Maybe reevaluate the purpose or have a justification. If it interferes with users having smaller devices, maybe then it’s a good UI but a flawed UX. You can even try the sign up to be in a bottom sheet like your design for larger phones, but full screen on a smaller device? So the top part does not take any more space for smaller device.

0

06.02.2021

Marián Trpkoš Автор вопроса

✷ ᴛʀᴀᴄʏ ✷
Usually in my experience, I would find a middle gr...

+1 the top gradient is kind of trash

0

06.02.2021

Marián Trpkoš Автор вопроса

✷ ᴛʀᴀᴄʏ ✷
Usually in my experience, I would find a middle gr...

that was the initial thought, bigger phones would have the gradient and smaller ones will be fullscreen

0

06.02.2021

✷ ᴛʀᴀᴄʏ ✷

Marián Trpkoš
is there anything like spacing <-> „importance“ re...

Yess, definitely. If they are grouped closely, they are deemed related in a certain category. This is prevalent in pages that are loaded with a lot content. Further apart does not necessarily mean more important or noticeable because it feels disconnected. Unless it is a separate content from the screen like maybe a banner? That way even the UI would help it stand out as well.

0

06.02.2021

✷ ᴛʀᴀᴄʏ ✷

Marián Trpkoš
+1 the top gradient is kind of trash

😂😅

0

06.02.2021

✷ ᴛʀᴀᴄʏ ✷

Marián Trpkoš
that was the initial thought, bigger phones would ...

Cools :)

0

06.02.2021

Marián Trpkoš Автор вопроса

✷ ᴛʀᴀᴄʏ ✷
😂😅

*honesty* 😂

0

06.02.2021

✷ ᴛʀᴀᴄʏ ✷

Marián Trpkoš
*honesty* 😂

Hahaha

0

06.02.2021

Marián Trpkoš Автор вопроса

✷ ᴛʀᴀᴄʏ ✷
Yess, definitely. If they are grouped closely, the...

well and what about click-ability or something like that?

0

06.02.2021

Marián Trpkoš Автор вопроса

Marián Trpkoš
well and what about click-ability or something lik...

i sometimes face the issue where i can’t distinguish clickable and non-clickable elements, especially when there are made up of icons

0

06.02.2021

✷ ᴛʀᴀᴄʏ ✷

Marián Trpkoš
well and what about click-ability or something lik...

Bigger buttons can help :)

0

06.02.2021

Marián Trpkoš Автор вопроса

Marián Trpkoš
i sometimes face the issue where i can’t distingui...

imagine a triple dot share icon / trash delete icon you can’t shadow-ize, how tf do you tell the user it’s a button

0

06.02.2021

✷ ᴛʀᴀᴄʏ ✷ · Accepted Answer

No hard set rule I would say but more of, best practices. Common approach is to group them closer; this helps with context rather than having the chunk of text separate from the title, or button separate from the content. Once spacing is optimised, keep the elements vertically aligned in the middle of the screen helps keep things more balanced. A bigger button would have a larger tap area, helps too. Another layout commonly used, (usually for content longer than your examples) is to separate the content and button, by placing the button toward the bottom of the screen. This helps with user’s reachability. And of course, with a bigger button the larger tap area helps too. Generally regardless of the approach you take, you want to balance it evenly, so it is not too heavy on the top, or bottom. Hope this helps.

Похожие чаты

Is there some kind of rule for this? like text+button

21 ответов

Похожие вопросы