Tip:
Highlight text to annotate it
X
Let's take a quick spin through the complete project so you can get a full picture of what's
ahead.
If you are the type who likes to dive right into the code and you have access to the exercise
files, you'll find the completed project in the Chapter 1 01_01 folder.
Here we are, in the Roux Academy Store, where I have six paintings for sale.
As you can see, they range in price from $400 for the eye to $75 for graffiti.
One of the top considerations for any user in any online store is obviously price, but
how to narrow down that price?
Well, over here on the right we have a Price slider.
When I drag this slider to the left to indicate a lower price, watch what happens.
Paintings that are more expensive, out of my price range, are dimmed, like the eye and
the rabbit there.
So as you can see, the Price slider is very visual and it's very easy to understand, which
are key aspects of an enhanced user experience.
Once the shopper has narrowed his or her options, we want to make it easy for them to note their
favorites.
As this big text indicates here under the Favorites heading, all the user has to do
is to drag their favorites to the right.
So let me scroll down just a little bit so we see all of our paintings.
And let's say I'm kind of interested in orange star here, so I'll place my cursor over it
and with the arrows indicating there that I can drag something, click and drag it over.
When I move it over into the target area, a plus sign appears, and if I drop it, it's
listed under my Favorites.
Let's do that again with Graffiti, just so you can see how the list is built up.
You'll notice that when I come into the drop zone I get an indication that I've entered
that area by the change of the background color, and I'll drop it, it changes back,
and now Graffiti is on my list of favorites.
But what if they don't purchase right away?
We'll make it painless by automatically saving their favorites so that the next time they
visit the site their favorites will be waiting for them.
Let me simulate that experience by closing the browser window and then I'm going to open
a new window and go to my history, and if I scroll down now, you'll see that the favorites
are waiting for me.
Now that you've seen an overview of what we're doing, you're ready to dive a little deeper
into how we're doing it, with an explanation of the related technologies in the next lesson.