In addition to form validation,

there are several other design patterns that can be applied to user input.

When I schedule appointments at my veterinarian for

my cats, the form asks for three different dates that might work for me,

and they can be prioritized from most desirable to least desirable.

Let's see how a problem like picking prioritized dates

can be resolved with some design patterns.

We want the user to be able to add appointment dates to a list, and

then reorganize that list according to their most desired date and least desired.

The first thing we need to add is a way to add these dates.

We could do this with say a text input, so

I could go to Forms here, and I could drag out a Text Input like this.

But it would be very challenging to get the user to format

the date in the way that the form is expecting, so let's get rid of that.

Instead, when there's a limited set of possibilities,

it's best to provide specialized input.

Many forms take dates using drop down menus of days, months, and years.

That's probably best when there's a wide number of possible dates such as when

you're asking the user for their date of birth.

But if we just need a day that's in the near future like within a few weeks.

It's best to use a design pattern called a calendar picker.

Balsamiq has a field element just for that in the forms section,

and they call it a Date Chooser.

So I'm going to scroll over here to the Date Chooser and

drag that into the canvas area.

And when a user clicks this form element, a calendar will pop up,

so let's add that calendar with a small arrow to the left.

In Balsamiq, you can find interface elements quickly

by typing in the search box up in the right, so let's do that.

We'll type in Calendar, and there it is, and

I'll drag that over here and make it a little larger.

And then I want a little arrow on the left side.

Believe they call it a Caret, so we'll do a Caret Left,

and I'll just drag that so it's flush with the calendar there.

And let's line that up a little better, there we go.

So in the calendar picker pattern,

the user can use the arrows in the top left and

right to change months, and then click on a date to select it.

Sometimes if a range of dates needs to be selected,

such as in the case of booking a hotel for several days.

The user can click on the first day in the range and then select the end date.

In this case, where we're adding dates to a prioritized list,

we should add a button so the user can confirm the selected date.

Once a user has picked a date, they'll need to add it to the list.

So let's go back to Forms here, and find the Button.

And I'm gonna put that just below this calendar picker here,

and we'll change this to say Add Date.

That finishes the date picker, and now we need to add the list of dates.

Each date should have the ability to be deleted, so let's do that.

I'm going to use just some rectangles for that, so I'll go to Common here,

and there is a rectangle.

And I'll make it roughly the same size as the calendar

picker there, maybe a little thinner.

Change the Border Style, and

then I want to add some text to this so I'll drag out a label here.

And let's just pick some dates here,

so here's my most desired date.

I will make this a little larger.

There we go, and we want to be able to delete this too, so let's.

Add that times icon there, and let's actually change this to maybe red.

So it looks like a delete button, and maybe let's put a circle behind it too.

So we'll right-click on that, send it backward, and

let's actually make that red, and we'll make the times icon white.

There we go, this looks a little better.

So we'll do that, and now we'll just select all this, and copy and paste it.

So let's say we've added three dates here, and we'll just change the days on these.

And now we have some dates added there.

However, these dates need to be prioritized, so

we can't just add them to a static list.

It would be really annoying if the user had to delete items,

and re-add them just to rearrange the list.

We can fix this with a UI pattern called Drag and Drop.

In this pattern, the user can click and drag a handle,

usually represented by a few lines that are together.

And as I drag an item to another place on the list, the list will rearrange itself.

So let's add those three lines, usually this is called a hamburger menu.

And it looks like Balsamiq calls the Bars, but

has thankfully also tagged it with hamburger.

So this is a little large, I'll make this smaller.

Put this here, the date over a little bit, and then we'll just copy and paste.

Those bars and move these dates over as well, just like that.

The handles on the left indicate to the user

that these items can be rearranged using drag and drop.

On a touchscreen, they can tap and drag with their finger,

and on a computer they can click and drag with their mouse cursor.

Once we're finished with a design pattern, the solution might seem obvious.

But remember where we started with this, we needed to choose dates and

prioritize those dates.

We avoided a lot of annoying UI problems like badly formatted dates,

or deleting and re-adding dates just to rearrange them.

While you're designing, try to imagine yourself as a user

going through the process, and think about the potential problems that might come up.

Chances are you're not the only one that's had this problem before, and

there's a design pattern that can fix it.

As I mentioned previously,

we're only reviewing a few design patterns here to get you started on the right path.

Be sure to check the notes associated with these videos for

more design pattern resources.