Thursday, October 8, 2015

Simple and Subtle Javascript Input Responses

When pondering this assignment, I figured the best place to look these little bite-size pieces of Javascript would be on websites that I am very familiar with and have regular interactions with.

1. Drop-down menus on Thingiverse.

Just about every website now-a-days has interactive drop down menus, but it wasn't until I started thinking about this assignment that I figured out Javascript was behind these minor aesthetic conveniences.

On the top of Thingiverse's home page there are 3 main menu options, "Dashboard", "Explore", and "Create". While "Dashboard" has no drop-down, "Explore" and "Create" both have whole drop-down submenus. Furthermore, I prefer these drop-down menus to other drop-down menus I have encountered because they only appear when you click on them and will stay activate until you click away. This is in contrast to other drop-down menus that will automatically open when you hover your cursor over them and will instantaneously disappear when your cursor (often mistakenly) leaves their bounding box.

http://www.thingiverse.com/


2. "Add note" feature for items on my eBay Watch list

I never noticed this feature before, but now that I know it's there I may just start using it. 

On my eBay watch list, when you hover your cursor over an item's picture, a small icon with text appears to the bottom right that allows you to "Add note" and save any notes/comments about the particular item. When you click on the icon, a small text box appears and when you are finished entering the text and press enter, a small note is automatically added under the item. At this point, the "Add note" button then appears as "Edit Note"


(You may need an eBay account to see your my eBay page)






3. Stylized underlining on Silodrome

They say it's the little things in life that matter most, I think this is a perfect example. 

As is common in seemingly all HTML, when you hover your cursor over a blue link, that link is automatically underlined. For the menu bar on Silodrome, the designers built off this aesthetic, but added their own flare with Javascript.  The menu bar options on Silodrome are just separated by a small vertical line and have a continuous underline floating below that is incorporated into the rest of the page. However, when you hover your cursor over one of these options, a thick red underline appears under the word and seemingly comes out of the smaller continuos underline. I really like this feature because it incorporates subtle user feedback into the aesthetic architecture of the page. Enjoy!







No comments:

Post a Comment