{"id":97,"date":"2008-05-06T01:57:30","date_gmt":"2008-05-06T05:57:30","guid":{"rendered":"http:\/\/patorjk.com\/blog\/?p=97"},"modified":"2014-01-25T18:01:51","modified_gmt":"2014-01-25T22:01:51","slug":"rethinking-the-color-fader-user-interfaces","status":"publish","type":"post","link":"https:\/\/patorjk.com\/blog\/2008\/05\/06\/rethinking-the-color-fader-user-interfaces\/","title":{"rendered":"Rethinking The Color Fader User Interface(s)"},"content":{"rendered":"

I’ve split my color fading app into two new online apps with interfaces that utilize Yahoo’s YUI<\/a>. You can see them here:<\/p>\n

http:\/\/patorjk.com\/software\/colorfader\/<\/a>
\nhttp:\/\/patorjk.com\/software\/gradientimage\/<\/a><\/p>\n

The new designs are meant to be more concise, cleaner, and easier to use. I tried to think up a nice way to let the user manipulate lots of colors without it looking cluttered. The old design had the problem where the input colors were stacked vertically. The more colors one decided to use, the longer the page got. To fix this, I decided upon using a two thumbed slider bar and a horizontal row of colors that would shift depending on what your selection was (see image below). One thumb indicated the number of colors the user wanted to use and the other one indicated which color the user was currently editing.<\/p>\n

\"\"<\/p>\n

I thought it was a really clever way of handling the problem, however, after watching a couple of people try to use the app, I realized it wasn’t that intuitive. People kept clicking on the colors they wanted to edit. And when that wouldn’t work, they assumed there was something wrong with the thing (no one bothered to read the instructions). Oh well. I made a modification to it to allow “color clicking” selection to work.<\/p>\n

Hopefully this is the last time I do a complete redesign this program(s). I’ve been perpetually annoyed with myself over the past 3 design jobs I’ve done with it. I was actually working on something else for a while, but for some reason I got side tracked, oh well. I think I have programmer ADD sometimes.<\/p>\n

Anyway, both redesigns were finished tonight, so there may be a few bugs. Let me know if you have any problems (or suggestions). The widgets I used from the YUI were the two slider bars and the color picker dialog.<\/p>\n","protected":false},"excerpt":{"rendered":"

I’ve split my color fading app into two new online apps with interfaces that utilize Yahoo’s YUI. You can see them here: http:\/\/patorjk.com\/software\/colorfader\/ http:\/\/patorjk.com\/software\/gradientimage\/ The new designs are meant to be more concise, cleaner, and easier to use. I tried to think up a nice way to let the user manipulate lots of colors without … Continue reading Rethinking The Color Fader User Interface(s)<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-97","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/97","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/comments?post=97"}],"version-history":[{"count":1,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/97\/revisions"}],"predecessor-version":[{"id":2754,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/97\/revisions\/2754"}],"wp:attachment":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/media?parent=97"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/categories?post=97"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/tags?post=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}