HOW BIG Should Your UI ELEMENTS and COMPONENTS Be?

in today's video I'd like to go over something that I personally used to struggle with and that I also see other designers especially beginners to struggle with and that's how to make

your UI elements the right size how big should your buttons your forms your interactive elements your headlines your text how big should it be to provide a

good user experience and to be generally to make your uis look good there are going to be two things that are going to be important here right so it's going to

be usability or accessibility meaning if your elements are actually big enough or visible enough to be interacted with to be perceived with ease not only for

people with perfect eyesight and perfect motor scales but also maybe for those who are visually impaired or otherwise have any other difficulty navigating and

using devices and user interfaces and the second consideration we are going to keep in mind are actually Aesthetics or appearance just visual appeal in general

right if it looks good so we have two things here we have is it easy to use is it usable and then does it look good so those are two two things why we are

actually asking this question right so let's make a deduction here let's start with a premise with a statement that I think all of us can agree on and that is

that UI elements should provide a good user experience right so that's all UI elements or you all uis should basically keep these two things in mind right and

this means that text and icons should be easy to read should be big enough with your target audience in mind again consider people that are for example

visually impaired or older people that do not simply have 20 20 eyesight but at the same time it should be small enough not to take over the whole screen right

these texts and icons and here I want you to consider phones for seniors right for older people what is specific about those phones is that all the user

interfaces are extremely simple the buttons are very big also all the text and icons are also big that is to accommodate any visual impairment or

motor deal impairment that these people usually have so that these are usable for them right so we always with your target audience in mind so when you are designing phones for seniors or apps

that will be used by seniors you usually want to make these user interface elements large and extremely easy to interact with and also they should be small enough to take over the whole

screen right with obviously with some exceptions so that's for text and icons and then also when it comes to interactive or touch elements on on

touch screens like right so smartphones and tablets they should be again simply because you want to provide a good user EXP experience they should be easy to touch they should be big enough to be

easily pressed which means 7 to 10 millimeters at minimum for touch targets and any pixel or Point Dimensions depend on this right so you have

um there are different phones different devices with different dpis which is dots per inch which is a resolution so how many points per inch are actually

present on the physical screen right so if you have a high DPI this means that it's going to be more points to achieve this type of this size for user

interface for for interactive elements personally think that interactive elements can take up a whole screen only if important enough right so it doesn't make sense to have a button that covers

the whole screen it especially doesn't make sense if there are other buttons to be presented on the screen right if for example should make a choice but take for example swiping right for example

let's consider Tick Tock or or Instagram reels what is specific about these interfaces is that when you actually browse through these apps you can swipe your finger up or down to navigate

between next and previous reels or tick tocks and the area for swiping usually covers the whole screen right so if you have let's say let's say you have like a

screen let's let's pretend that this is Tick Tock you have some kind of elements for engagement right here you have like comment and so on here you have also I

think some kind of description and there are also a couple elements I think here's the back button I'm not sure but it's definitely there

with with Instagram reels but in this case this gray area is the area where you can swipe right so that's the only purpose well the main purpose of of this

interface is for users to be able to swipe through back and forth and then it makes sense to of course make this element large enough to be actually taking up the whole screen or almost the

whole screen right so 90 or more of the screen and also it's good to consider that a mouse or a touchpad on on a laptop provides or allows you to

basically afford higher Precision than when you touch a screen right so you're limited by your your limited by your fingers so that's basically why you have

this you have these guidelines right this is to accommodate our physical limitations as human beings where people have fingers obviously you cannot press

a single Pixel with with your finger because it's simply not sharp enough right but with a mouse though watch as I I can for example point on individual

Dots here or individual bullet points I think this would be extremely challenging to do on a touch screen so that is also why and I'm going to discuss this further in the video that

is why you could potentially make a kind of interactive Targets on your desktops or on devices where you use mouse or a touchpad these targets can be smaller

than this because they have a higher Precision device right and so how big should these elements actually be so whenever in doubt test or get inspired

so what you should definitely do is preview your design or your prototype on a Target device at one to one size with figma this is extremely easy you get

this preview mode or you can connect I think you can download a figma app to your phone and then design specifically for your phone

and then see the final result that's the closest you can get to the final product actually and also if you're not sure you can do two things or three things

actually you can test it by yourself with your users ask somebody to you know try and use that the Prototype you have created and ask them if if it's easy to

use or even use famous interfaces right use famous interfaces apps and websites to decide on size of these UI elements that is something that I do actually

quite often when I'm not sure about a text size right if I'm designing a mobile app and I'm not sure or a mobile website and I'm not sure about font size

I always compare these font sizes with for example screenshots from native iOS apps or Android apps so you can be sure that a lot of resources went into

designing and testing these interfaces let's consider like a Settings app on your iPhone for example so you can be probably sure that if you use a similar

font size as these native apps are using you you can't go wrong there right so here's a thing an example let's say so

this is supposed to represent the iPhone 11 Pro or I made it as tall as the iPhone 11 Pro and the iPhone 11 Pro I

think has 144 millimeters so here I place some UI elements radio buttons and kind of buttons here and try to measure how big they should be how big they

actually are right so in case of this button I mean you don't have to measure this to see that this is like too small for a phone like imagine if this were a

phone this button is hardly readable right and also the actual size confirms this hypothesis if you measure this or compare the height of this element

against the height of the whole phone you get 3.43 millimeters which is definitely well below actually twice as

small as the minimum Dimension with these guidelines that I that I outlined previously if you take a look at the next button the one that says maybe you

can see that when we measure the height it comes up to 9.53 which Falls between uh which kind of adheres to these

guidelines and also it visually makes sense right maybe this is something that you you get the more you are trained the more experience you have as a designer but like for me when I look at this

button I immediately see that this button is reasonably large and also not too small and not too big it's not surprising to me that it is actually adheres to these guidelines and then

this huge button that says a bit much that's just obviously that's too big right but for example if this were a interface for an app that would serve as

emergency as calling emergency for seniors then it actually might make sense right everything comes down to the context and the target audience you are actually designing for but for the

general population we can agree that this button is a bit too large similar to our radio buttons right here again this is hardly readable I I have to zoom

in to actually see what's written here so it says definitely not too small and the size of the area for touch for the touch interaction is actually confirms

that as well so it's 2.34 millimeters that's even smaller than this tiny tiny button so you probably don't want to go for for that let's say that the ideal

Dimension according to these guidelines would be approximately three times as big so let's make this three times as big and uh I mean this looks quite large

so what could be done here is if we consider like um that this is the touch area and we make it three times as tall then that doesn't mean that this needs

to be this option needs to be as tall as this rectangle it also means that if we actually make it a bit smaller it means that this area let me highlight this

this is the area for your touch interaction with this radio button right this this is seven point approximately seven millimeters tall and you can see

that it looks again compared to all these other elements it looks it looks reasonably sized at least in my opinion right so here we could write maybe the

right size if we actually make this area clickable or tappable we adhere to these guidelines and then also obviously this this is too big right so you probably

don't want to make your radio buttons this big again make sure it looks and feels reasonable right and measure your

final outcome when it comes to a desktop websites or apps what I generally do is I use 16 points or base or 15 points for

Bass and paragraph text and then I built my UI elements around that I also personally aim for 7 to 10 millimeters on desktop as well although as I said

you can go a bit smaller since the user has a mouse or a touchpad which offers increased precision and what I mean by the second bullet point in this section

is that let's say that we had a 16 point text this is 32 but let's pretend that this is 16 right

so let's say I'm designing at 200 size if I had a base text I could make it a menu item and then I could like add an auto layout maybe take into

consideration what the touch area or the click area around such menu item how big could that actually be right so I use the

16.16 point menu item then I placed some clickable area around that and then what I'm going to do I'm going to duplicate that and I get a different menu item I

have three menu items then I place this into an auto layout I have a logo over here and then I again use Auto layout in

between facing and what I got here right now is a header right so that is how I built a basic structure for a header for my website I think I think you could

potentially go a bit smaller with this I mean menu items don't have to be as large as 16 points that's usually for paragraph text you can go for like 13 or

12 but generally you want to base everything around text size so from text size you deduce reasonable spacing reasonable padding and then you just

build upon that and create a whole element a whole layout around that right so you can obviously go a bit smaller with this so if this weren't like let's

say 16 it could be like 2012 which means the size would go to 24. yeah I think this looks like a reasonably sized header I'm planning to do a video in the

future about designing a landing page so um just take this as an approximate basic guide and also all the rules that I have outlined previously which means

test us create a prototype and then preview that at one to one size that also goes for desktop or web app so if I had to summarize all of these things to

uh to a couple sentences is to make your text easy to read make your interactive elements easy to click and then use

write and tested interfaces as your guide or test yourself and then also make sure your elements don't look ridiculous I'm aware this is not very

specific but that's definitely a rule that I use so if something looks out of line if something looks weird and awkward then I make sure to change that

and if everything else fails simply use your judgment look at your design and change the size of all ridiculous looking elements right I've already

mentioned that build prototypes and test with yourself and or your potential users and also prototypes are great because they allow you to see the final

product quote unquote final product right because just a preview so why not use it and especially if you're using figma figma has great prototyping options so make sure to use that thank

you for watching leave a comment below if there's anything unclear if you have any questions leave a like if this video helped you and I will see you in the next one