Hello and welcome to our lesson on forms and UI elements, now you may be thinking to yourself, what
are UI elements?
And that's a very good question.
You elements are basically just elements within your user interface, like take a look over here at
this picture.
We have cards, we have some icons, we have a navigation.
We have a badge on an icon right there.
We also have like a little picture over here.
And these are all considered UI elements.
But forms are probably the most common UI elements that we actually experience and probably, if not
the most important.
So let's take a step back.
Forms are everywhere.
Think about it.
We might think that a form is just a standard set of inputs on a page, but when we're designing a user
experience, they're featured in a lot of different places.
Take this, for example.
This is considered a form.
When you log right into a product, you have some elements here, like a button.
You have a forgot your password, Lincoln.
You have different form inputs like this is your standard password input and this is your standard email
input.
And these all come together to create a form, even these social logins over here.
What about when you even send a message this is considered a form, this alongside these buttons are
considered a larger form.
Component forms are everywhere.
Even when you search, this is considered a form.
They're crucial to the success of your design and can impact the business of the product if certain
forms rely on optimization and hitting certain goals.
With forms being such an integral part of building products, it's critical to get them right.
But don't be scared.
We're going to learn how to build some brilliant forms and UI elements that are really delightful,
usable and inclusive.
So you may be thinking, where do we start?
OK, you ready?
Remember how we built our own site map?
What we talked about building some preliminary site maps, user flows and concepts.
US earlier when we did that, we were thinking about the types of content we would have on certain pages.
Before we even begin thinking about designing a form, we need to know what type of content we dealing
with.
So when we looked back at the home page that we built for Habitual, we were talking about the same
map.
And at this portion we knew that users will probably want to search for products over here.
We kind of list as a piece of content that we were definitely going to have on that page.
So with us thinking about search, we drew a bunch of search inputs.
We drew what that search overlay would look like.
And that is all considered a form that comes together.
Now, we definitely know we need a search bar.
Another example is registration.
We touched a bit on that earlier as well.
This is a bit more trickier.
We know the standard types of UI elements that will be used to build the forms a user may see, like
text inputs, buttons, maybe a progress bar.
We saw an example earlier.
But it's not that easy, though, we also need to take into account if the registration wants to capture
other content like user interests or profile images.
So before we even build the form, we need to think about the types of questions we want to ask our
user.
This takes some time to figure out and can be done through some quick prototyping, testing and iteration
so you can find the result that works best for your product.
We'll come back to this scenario later.
But the goal here is to generate some ideas and come back to them.
That always just keeps on.
Coming up in our design process is that we need to keep on generating ideas, learn from those ideas,
refine them and then keep on going.
So same thing with forms.
We need to think about the types of questions we need to ask our users, because it's incredibly important
that we get that right and then we can iterate and refine the details later.
So you want to start building some components for your product, right?
Well, we're going to cover a wide array of examples of different types of forms and accompanying UI
elements will be covering like forms, input's, advanced inputs and buttons.
We're going to jump right into Fatema to take a look at the different types of scenarios we often face
as designers.