Welcome back.
Now we're going to talk about how we can create our very own form and the questions we often ask ourselves
in terms of the types of input we want to use, we're probably not going to create our own components
and go really deeper into what that looks like just yet, because we want to, you know, just come
up with some quick concepts in terms of what types of content we're going to see on the page.
Step number one, where are we going to find a form on our page within our product for our client habitual?
I think, like you'll probably see, like log in and, you know, sign up.
And I think probably like the biggest form we'll probably see is like the registration.
And that's about it really.
This is a type of product that doesn't necessarily have a lot of forms, but registration is huge.
And especially with this product, I think it's going to be pretty integral to the way people kind of
like maybe talk about like why they're joining the product or maybe to like pick some interests, maybe
narrowing down those interests.
So let's jump right in to how we can create some form elements for our client.
When I think about our client, they need to have a registration and I need to think about those different
types of elements.
So I'm just going to create a frame.
Let's press F and we're going to just use one of these screens.
We'll just call it registration.
OK, so we're going to kind of just create like a wire frame just so we get a good indication of like
what we want to build and then we can eventually get to a higher fidelity.
So when a user comes to the page, they'll probably see like an input.
And let me just.
They'll probably see 40, it's probably good.
Don't want to get too fancy just yet.
Let's give it a stroke.
We can actually start creating some pieces if we wanted to over here.
I'm going to create a couple of elements that I can just easily reuse.
I know I said I wasn't going to go for creating it, but, you know, maybe maybe that's the best course
of action.
What else do we have here?
Let's make a button.
And we are just going to fill that with brand color, I don't know if I have the brand color, but we
can just kind of get close to it right now.
Oops.
Maybe that's our primary, but in.
And we'll put some text in there in primary.
I like I like a lot.
This could be like 16 pixels.
Make this phone, we'll call it primary button, so we are kind of creating our own little components
we can make this way.
I know it's probably not accessible, but I mean, we can kind of fine tune.
Like sometimes accessibility could be like a little wonky in terms of like.
What is actually readable and what isn't like this is probably like ordering that line, it's probably
not accessible, like if we check right now.
It's to contrast like it's probably not.
Yeah, it fails, but it may be more legible than black, which is probably actually accessible.
So that's our primary button.
We can just go over here.
We can make a secondary.
So probably have a second like a back button.
And that frame, we won't have anything in it, no, Phil, but the primary button's color will probably
be like a block, so that's good.
We'll just call it secondary.
And remember what I said about constraints, so we can do that, I can do that.
Perfect.
Do you have a secondary in a primary?
We have an input up there.
I think that's fine for now, I guess let's just call this our our components for now.
Just so we have some basic empathy, like we may have some checkboxes, so it's like this is an input
field.
And we'll just call it field.
We probably should have some text in there.
And by text, that's totally fine, and we could pop that to regular.
You're not going to worry too much.
We do need to, however, create some, like checkboxes possibly I'm envisioning that there will be
checkboxes in our future 30 to 40, some still using that base unit.
Of eight pixels to create my components here, that's a little big, bump it down to 30 to.
Change the border radius.
I think that's fine.
We do need some text for it, though.
CheckBox, text.
Just do this.
I mean, we can start creating some of our components.
I mean, they don't necessarily need to be components, it's good to just kind of prep before we even
start.
OK, I think that's enough.
Cool.
Let's create another frame.
Select F.
So when a user first comes to our registration, I think like the first thing we'll probably ask them
to do is maybe like, you know, we'll say something like Welcome.
It's said that in their.
We see something like Welcome, how are you?
And we'll probably ask them to possibly, like, you know, add a profile image and like in terms of
input.
It's kind of tough because we don't necessarily have, like an input for the actual like it could just
be a button that, like, uses their phone to, like, find an image.
And that's all handled on, like the iPhone side or the Android side.
So that's a discussion to have with your developers.
So we'll just do this.
Um, and let's just go to a corner of fire.
Let's use material design icons and we'll just say profile a person.
OK, there we go.
So I'm going to take that.
I'm just going to detach it.
Command, Comanche.
Let's bring that into our registration.
And there you go.
OK, so we have like a thing here, like a little image, maybe we should have some text below because
this is very vague.
Had a photo, so other members I don't know if other members know who you are.
Or actually add a photo, so, hmmm, why would they add a photo so you can customize your experience?
This is probably like a nice to have feature.
Do they really need a photo?
It's really about exploring if you need something versus like if it's a nice to have.
So the button here may say upload a photo and the secondary could be something like skip this for now.
So we want that primary action to be much bigger, much more prominent.
I mean, we can even go over here and make this a little bit less obvious.
And I think another thing is we need to let people know this seems like it's going to be a multi-step
process.
So we need to let people know, like what step of the process to in this just change that.
So step one of for.
OK, and let's just pull that so it's pretty obvious, I mean, we can actually just leave it at the
top.
I'm not sure about the whole deal.
The page is set.
So we copy that, we can just change that over there and the next one could be like, what's your main
reason for joining?
It's good to understand why they want to join.
I could just pop this up here.
We're not being to like crazy in terms of, like how we structure just yet, but we could, like, essentially
put these items in a frame that has auto layout and thout whenever we adjust something, it's going
to bump it down.
I'll show you what that looks like.
So if we select these, we do option commands.
We have a frame and if you select auto label, it will automatically position them vertically.
You can even do it horizontally, but it's going to push it to the right over here so you can space
it any which way you want.
So if I want to, like, adhere to a pixel based upon you like twenty four pixels, and if I add to
this, it's just going to keep on pushing the content down and you can just like keep things incredibly
consistent.
It's just it's for your own sanity to be honest.
OK, so this will help us make some great.
Recommendation's.
So when I'm thinking about this registration, I want to get as much info about the user as possible
with kind of making it fun, checkboxes are kind of hard to hit on mobile sometimes unless you make
this whole feel like saveable or just each interact with so we can do optional kind of like checkboxes
or like radio buttons.
And I'll show you what we can do here.
So I've taken like the primary button over here and I'm just going to make this feel like white.
I'm going to go in and I'm going to make that Phil Black.
Perfect.
And I am going to also apply a stroke, and that stroke is going to be like a.
We'll just do 50 percent of black.
So, I mean, there you go, we kind of have like a radio button that they can click.
So we can give them some options, like maybe one of them is discover.
New and exciting.
The next one could be make month to month shopping.
Easier so that is like a definitely a big thing in terms of like shopping, in terms of like the usefulness
of this product.
If you do a lot of month to month shopping, you have a lot of like things that you constantly buy over
and over again.
If we know more about you, we can easily make the experience much better, get home, get relevant
recommendations.
So there's a couple of options.
And like if I select one, so for this use case, I'm just going to select it just to kind of showcase
what that's going to look like.
So I'm going to.
Do the.
And that is going to be white and that's what it can look like.
So all of a sudden we kind of have.
A nice little active state there, too, we can create a component for that.
What I've done here is I've actually removed this get because this is a mandatory, um, I'm thinking
about this actually being mandatory because it's pretty it's pretty big in terms of like the type of
question we're asking.
And if they don't fill it out, we can give them like a disabled state.
So just make sure you disable seats are easy to read in terms of contrast, and when they do to select
that, it will move to the active state here.
You can work along with me and just think about the type of content we are we are creating for in terms
of the registration.
I mean, there's so many different things we can do.
You can just think about the different types of like inputs that we need and the different types of
processes that we're going to like designed for, so I'm saying this registration process actively as
I'm kind of coming up with these concepts, I'm thinking about the different questions and asking users.
So I probably at this point, I want them to just start picking some like interest gets started by picking
some interesting.
And I mean, I don't even know, I think that's pretty self-explanatory and they can essentially, like
we could create like cards for them to make it a little more fun, like checkboxes are kind of boring.
So for something like this, we could create.
Like cards, I'm not sure what's in the cards, maybe.
Actually, I think it would be best if we do something like this.
Let's create a frame.
For a square and we'll put a text in that frame and we'll call it something like music.
That's a little debate, but let's go down to 20 pixels.
And that's fine.
This is going to be our different type of checkbox.
And the background color, let's give it a fill so it's a little bit more interesting than it is now.
And there you go.
Like we easily have like a checkbox that we can select.
So there it is.
Remember what I said about constraints?
So if my position this like that.
I'm going to try and make this almost a square.
So if her position is like the there it go does need to be perfect.
We have a bunch of different options, and if they will do the same thing over here, oops, I forgot
to actually make that continue.
This one can be continue as well, for now at least, I don't know what this is going to be.
It could be like an image.
It could be like a colored square.
I think we need to really kind of think about that a little bit more in terms of what that active state
looks like.
But that's when we get more in depth in terms of actually creating the component.
But now I know what types of questions I'm asking.
I'm asking them to upload a photo for customization purposes, you know, making their experience a
little bit more delightful.
It's not needed.
So I gave them like a skep option.
I asked them why they're joining, because maybe the types of products we do push to them is relevant
based off of this question.
You know, if they want to have like a month to month subscription of things, like we could do something
like that, if they also discover new and exciting products, like we can push like new products to
them.
But if they weren't relevant recommendations, it's a little bit of both in terms of the types of products
we decide to push them.
If we think about this from a data collecting perspective, this will definitely help us kind of learn
more about our users.
So if people keep on creating this, we'll know the types of users we're getting in terms of like what
they're trying to achieve.
Are they trying to like, ah, the majority of our users doing month month subscriptions or something
like that?
If that's the case, then it could actually force us to pivot the purpose of the application.
It moves away from relevant recommendations to more so like a one stop shop where we constantly just
ship to you every single month.
And that's it's constantly relevant and it's constantly based off of what you need.
So take that into consideration in terms of the types of questions you're asking even for over here,
like getting started, I've kind of given them the option to select different types of interests.
I could have sports.
I could have like tech.
Another option could be like gaming.
I've given them a bunch of different interests, I don't know what I have for I mean, we could have
four, we can even go a deeper level and think about like now, like narrow it down.
What type of music do you like?
Do you like to listen to like vinyl?
Do you like to listen to live music or are you thinking, like buying speakers like if you've selected
something like fashion, like are you into sneakers etc. or if there's anything else, can you add that
so we could even go even deeper here?
I think we're at a good spot right now just to get some basic information for from our user.
What we can do for now is what I would do is actually.
Put this together and put it into a prototype and test with users immediately test fast.
We're here, we can just get started at the end, we'll probably have like a nice little screen that
just says like, Woo, you did it like these are your results or we could show them results, if that's
important.
I don't know.
It's really going to depend based off of, like, how we validate our assumptions.
But this is essentially how you go about, like, thinking through a form.
You got to ask yourself and the questions of like, well, especially with this case in terms of registration,
what types of questions am I going to ask our users?
And like, how do I break that down?
Like what types of inputs on my using based off of those questions?
Now, this is a really simple form, and I'm sure eventually in your career, you're definitely going
to have much more complex forms.
So take it step by step, start with sketching, move on to like user flows in terms of like figuring
out what that process kind of looks like and then jump into like a product like Fatema and really start
to figure out those details.
So that's how you create your own form within Sigma.