Studio 3

Macy's

Suppose you want to buy a top at Macy’s (Women -> Tops). Choose your favorite color, fabric material, and the desired price range. Then choose your size(s)— Macy’s carries a variety of brands which are not always consistent in sizing with each other. So you could be a size 6 in a brand, and a size 8 in another. Choose women’s regular sizes 6 & 8, as well as petite sizes 6P and 8P.

How efficient did you find the process? What was efficient and what wasn’t?
How would you change the UI to support the user in being more efficient at filtering through items?

JOANN

Suppose you want to buy Halloween decor at JOANN. Play around with the price filters.

How efficient is it to select your desired price range for the items? What about the current price filters works well and what doesn’t?
How would you change the UI to make the price selection process more efficient?
What are the trade-offs of your suggested design vs the current design of the website?

To-Do List Part 2: Efficiency & Basic CSS

Remember the to-do list from studio 1? We will make it more efficient. We will also add some basic CSS to make it look nicer and improve learnability.

Fork the studio3-starter repo and then clone it locally.

Do not just clone the starter repo, because you will not be able to push your changes to it.

Step 1: Add a CSS file

Add a CSS file to your project and link to it to your HTML file using a <link> element.

Step 2: Add some basic CSS

Set some basic CSS for the page such as:

the font family (You can use Helvetica Neue, Segoe UI, sans-serif or any other you think is suitable) for every element on the page.
Spacing between the controls (right now the inputs, checkboxes, and buttons are all stuck together)
Increase the width of the text input
Remove the list bullets and its extra spacing

Step 3: Add CSS to make done items look different

Add CSS to make done items look different from undone items.

A suggested styling could be to:

You will likely find the following useful:

:checked pseudo-class pseudo-class
Adjacent sibling combinator (+)

Step 4: Make Enter insert a new item

Now let's work on making out to-do list more efficient.

In most to-do lists out there, there are established conventions for using them with the keyboard. One such convention, is that hitting Enter with the keyboard inserts a new item, and then focuses it.

You can use the keyup event, with an enter modifier to do that.

VueJS event handling

Step 5: Make focus move to the newly inserted item

In the previous step, we made it so that hitting Enter inserts a new item. However, the new item is not focused, so you have to click on it to start typing or press Tab. That's not very efficient!

You can use the v-focus MaVue directive to make sure the text field on new items is focused (the HTML autofocus attribute sadly works on page load, not element insertion).

Step 6: Make Backspace delete items

Another common convention is that backspace deletes entries.

You can use the keyup event, with a backspace modifier to do that.

Step 7: Make Backspace delete the previous item only if the current one is empty

Play around with your to-do app. Try to edit text and delete items. What do you notice? When we are trying to delete a character, the entire item is deleted instead! (Which dimension of usability suffers?)

Use the deleteItemIfEmpty(i) method instead of deleteItem(i) to fix this.

This is a trickier to implement, because you only want this to happen when the input is empty. Also, managing focus becomes harder, because the elements that should receive it already exist, so just using v-focus without a value will not work.

Step 8: Make the previous item be focused

When you delete an item, you still need to move focus to the previous item manually. That's not very efficient! Conventionally, focus should move to the previous item (if one exists). Just using v-focus without a value doesn't help here, because the element already exists.

This is where the active property of each task becomes useful: If you use it as a value in v-focus, then whichever item has active set to true will be focused at all times. This means you can manage focus programmatically!

We are providing you with a setActive(index) method that takes care of only setting active to true on one item at a time, and does not error when index is out of bounds.

The deleteItem() and deleteItemIfEmpty() methods already take care of setting the active property to the right item when items are deleted. Use @focus and setActive() to set the active property to the right item when inputs are focused manually by the user.

Step 9: Focus previous/next item with up/down arrow keys

Use your to-do list a bit more. What do you notice? Did you instinctively try to hit the up/down arrow keys to move focus between items? Let's implement that!

You can use the keyup event again, with up and down modifiers and the setActive() function to manage focus.

HW2 Critique & Feedback

We have curated a few representative homework examples to discuss here.

← Studio 2 Studio 4 →