HTML/CSS tips to reduce use of JavaScript

https://calendar.perfplanet.com/2020/html-and-css-techniques-to-reduce-your-javascript/

Great article with examples of uses of JacaScript and how they can be replaced with HTML or CSS. I had no idea these techniques were available

0to255.com – find lighter/darker shades of colors

Color choosers are a dime a dozen online, but 0to255.com is a very nice one.  Its stated purpose is to allow you to specify a color and then find shades that are darker and lighter than that color.  It’s very well designed, aesthetically pleasing, and has the good sense to allow you to copy the hex value of the color with a single click.

I use it on a semi-regular basis to design Java Swing UIs; just a quick tip for the Java folks out there – when you have the hex code copied, you need to preface the hex string with 0x for the Color constructor to work correctly.  In other words, if you are have the hex string #facade, you would create a Java color object with the command new Color(0xfacade).  The 0x tells the Java compiler to treat the following text as hexadecimal.

Netflix queue manager – a case study in UI design

In this blog post, I examine some good and bad aspects of user interface design present in the queue management system on Netflix.com.  By examining these issues we can see some concrete examples of more general purpose principles of UI design that are promulgated by books such as About Face by Alan Cooper

For those unfamiliar with Netflix or computer science data structures, a queue is a first-in-first-out data structure, just like a line at a grocery store.  By moving a movie to the top/front of the queue, you ensure that it is the next movie to be delivered.

Let’s examine some good and bad aspects of the UI design in the queue management system of Netflix.

Good:

The queue screen is very minimalist in its appearance, containing only relevant information without fluff.  For instance, the tabs immediately display how many movies you have both in your DVD queue as well as instant queues; you don’t have to look far.

One thing not immediately obvious to a casual observer is the consistent color coding scheme at play.  Notice in the tabs that the DVD section and any related text is red; the word Instant in the tab and all words related to the Instant queue are in blue.

This color scheme is present while searching for movies as well:

The queue screen does more than display information about the movies currently in your queue; if that were all it did, it could be a static HTML page.  Instead, this screen is where you can rearrange the order of the movies as well as delete them from the list.

Deleting a movie from the queue is entirely painless.  There is an unambiguous X link to the right of each movie.  Mercifully, clicking the X does not pop up a dialog box asking “Are you sure you want to delete the movie from the queue?” or any such nonsense.  Instead, the row becomes grayed out with an undo link replacing the previous X button.  This is absolutely the right way to do things, and I wish that more sites worked this way.  Throwing up a dialog box in front of destructive actions as a way of removing responsibility from the programmers/computer program is all too common and lazy.  It’s harder to implement the ability to undo destructive actions, but from an interaction design perspective it is far superior.  Users often click through dialogs without actually reading what they’re doing (I accidentally deleted a high-level Diablo II character this way.  I’m not bitter or anything).

Undo:

After deletion.  Note that the movie underneath the removed one has its position moved up in the queue

In order to move movies around, you have three main options.  The first is dragging and dropping the movie to its new location.  The second is typing in a value in the text box and hitting enter.  The third, and probably most useful, is hitting the Top button which pushes the movie to the front of the queue.  Each works fine, though I will have more to say about the dragging and dropping option in the next section.

Bad:

There is no mechanism to move multiple movies at once.  In general this would not be a problem, but one of the main reasons I use Netflix is to rent TV series on DVD that would otherwise be too expensive to own, and they often come in multiple discs.  If you want to move all six discs of a series up to the top of the queue, you have to move each disc individually – in reverse order.  If you start with disc 1 and move on through disc 6 pressing the TOP button each time (which is your natural inclination) you’ll end up with the series in reverse order, 6,5,4,3,2,1.

There are two solutions to this.
1) Allow multiple selection and movement.  This is executed to perfection in Animoto, an online tool for creating slideshows with music and animated transitions.

See the following screenshot:

As the image (or images) is moved around, all the other images move to make room.  The same could easily be done with rows of movies.  However, I do not feel that this is the best approach, since the most important function of the queue is to move movies to the front.  If you had a long queue and were trying to move something to the top via drag and drop, you’d have to move the items a long way.  Drag and drop is best when it occurs within the same screen so that no scrolling has to occur; it is a difficult task for some computer users to drag items to the very small sweet spot that causes the window to scroll up or down.

2) Automatically determine if the item you are attempting to move to the top of the list is part of a series.  If it is, either

• ask if you want to move all of the DVDs up
• automatically move all of the movies up and allow user to easily undo if this is not what he meant to do

I prefer the second option as I imagine the vast majority of time people intend to move all the DVDs in a series up to the top of a queue, and to have all those “yes” people have to answer a dialog box seems like a waste of time.

Another poor design choice for the queue screen is the lack of keyboard controls.  I like to do as much on my computer as possible without removing my hands from the keyboard; thoughtful UI design demands keyboard alternatives for the most frequently used operations.  Tab traversal works as expected through the movies, shifting the focus to the numerical position in the queue.  Unfortunately, this is the only operation available to you using only the keyboard; you cannot delete movies from the queue without using the mouse, as the tab traversal does not bring you through the fields of the individual movie.  Instead it skips from movie to movie.

Conclusion

Overall the queue management is painless, with the exception of the inability to move more than one movie at a time. I would give this aspect of the site a B+ for overall usability and design.