3D Accordion Effect - UX Lab 006
I posted the following experiment as a way of demonstrating just how far the line has blurred between web based animation and OS based animation. I saw Dribbble shots (one and two) by Indian designer Pranav Pramod and was inspired to replicate the effect in CSS3.
Unfortunately nothing is ever as easy as it seems. If it was, someone else would have already posted a similar effect. The problem is that when animating something with a 3D transform with a forced perspective, there is no way to measure or mirror the actual height represented in the browser using CSS. If you animate the parent element from 0px in height to 30px, it’s a straightforward linear animation. The 3D transform, on the other hand, changes on a non-linear scale because of the perspective.
There are two solutions, neither of which are desirable.
The first involves JavaScript, which frankly I had tried to avoid. In this example, the animation is triggered by the addition of a CSS class via JavaScript - but could just as easily be bound to an :active:target CSS event. The only way to get the actual browser rendered height of the element is to get it via JavaScript with the obj.clientHeight getter. While discussion pointed to wrapping the object in a parent element and not needing JavaScript at all, this does not work in all browsers.
Instead the JavaScript method involves binding a function with requestAnimationFrame which sets the parent objects height to mirror the calculated height of the transformed object. Accurate, but if we wanted to perform calculations many times per second, why did we bother animating with CSS at all?
The other method, considerably less accurate and very fiddly, is to match the easing or timing of the two animations. It may be possible to create a custom timing function using cubic-bezier which matches the rate of easing of a 30px tall object, rotating from -90deg to 0deg, with a perspective of 400 units. But why would you? That’s shit house.
Maybe in this instance a flat out Canvas animation would have been much more sensible. You’re still performing a function every ‘x’ milliseconds, but at least the canvas itself may be hardware accelerated. Until CSS animation matures, we will most likely have to abuse the JavaScript add-ons such as the one described earlier. Or even better yet, sever the ties with HTML and CSS and - get this right - use graphical languages for what they’re intended.
Ninja Edit: Also, you can’t yet animate background gradients so the whole 3D effect on the depth of the flaps is kind of impossible for now.
Sad-face Edit: The second I posted this, someone posted pretty much the exact same thing to Hacker News in a much more polished way. Check out Paperfold CSS.
Dynamic Credit Card Type Selection - UX Lab 003
If you find yourself buying a lot of things online, or perhaps building a lot of eCommerce websites - you will have experienced a range of credit card forms. The good. The bad. The ugly. Some fields are required to pass security checks. Some seemingly exist only to frustrate you. But what seems constant is the lack of innovation over the years in what is a staple in eCommerce design.
One example that does it really well is the purchase page for Coda, by Panic Software. Not only does it auto-select the card type of the credit card, but it also updates the select button with a background image indicating progress. The only downside I can really find to the Coda page is that when the card image changes, it’s not sprited so you see a flash of white as the images load.
Using a list of prefixes published to Wikipedia, it’s possible to identify nearly every card type in the world. This opens a host of possibilities to designers, like this:
“CC Rebound” by Ryan Rumsey
Not shown in this demo is the ability to isolate the first two or three characters, to further narrow the type of card. How would you differentiate between Diner’s Club (36) and American Express (37), both starting with ‘3’? Using substr(). The rest is up to you.
Introducing the UX Lab
The lab is a place for me to share my thoughts and experiments with the web development community. While the name indicates a user interaction and user experience focus - I’ll also be sharing CSS3, JS and HTML5 tidbits. My aim is to make the web a better, more consistent place. And what better way to achieve that than by leading by example.
The experiments will be hosted as one main repo on GitHub. That way you can easily view the code, download any resources, as well as forking or branching it for your own purposes.
Some of the cool things to come:
- Credit Card Type - Passive Selection
- jQuery UI Slider Toggle Switches
- Mac vs. Windows Close Buttons
- Flash-free Google Analytics
- and more…
A behind the scenes look at Mill Touch. There are some amazing concepts going on with this device, aside from bringing the Minority Report concept to life. I particularly love the overlay where you can see the pre and post productions at the same time (around 2:55).
I never knew the team at Mill were behind so many incredible commercials. Nike. Old Spice. Skittles. Budweiser. Various super bowl ads. Here is their 2011 showreel and their more recognisable 2010 showreel.
Hi, I'm a UX Developer - You're a What?
I showed this to my computer-illiterate girlfriend a while back to help her understand what I do for a living. While broad articles like this are never going to describe every person, perfectly; it did ring true in a few regards.
A really good read. Recommended.
Interesting jQuery Mobile Design Choices
Following major announcements from Sencha Touch and jQTouch, the jQuery team has piped up: announcing jQuery Mobile. How the jQuery Mobile project differs from projects like jQTouch is the way in which it aims support a range of devices. This can only be achieved by making use of a unified design approach.
jQuery Mobile is faced with an exceptionally difficult task. jQuery Mobile theme design must complement a range of operating systems including iOS, Android, webOS, Symbian, Windows Mobile, Blackberry and more.
Over the years, Apple has introduced and perfected a range of design and usability conventions for the handheld device. It has always felt like the competition has been clamoring to catch up. Libraries like Sencha Touch and jQTouch piggy-back off the success of the iOS interface. If jQuery Mobile is to set itself apart from other libraries, and appear as native as possible across a range of devices, it must abandon some of the best-practice examples that Apple and others have already established.
Below is a comparison between jQMobile and iOS back buttons. I think the iOS back button is an excellent motif, where the tapering of the left hand side represents the direction this button will take you in. Without that, you need some kind of directional arrow. Your back button just grew 31px, and now reminds you of the early 00’s.
Rounded as Usual
I’ve been fairly critical of jQuery UI themes in the past. Points I made about the “goofyness” of the themes were in fact well received by the jQuery UI team and lead to some changes in ThemeRoller. A lot of the problems stemmed from excessive rounding, vibrant colour choices and dated gradients. With jQMobile, the rounding of pretty much every element remains unchanged. A combination of excessive rounding and the “abandoning Apple conventions” problem lead to the following example:
What this screenshot means to me is that if I want a ‘Back’ or a ‘Cancel’ button at the same time as a ‘Save’ button, (preserving padding and readability) I can only spare four characters for a title. That’s right. Four. Characters.
Don’t get me wrong, the majority of elements look big and clickable and enticing. It’s also good to see the design team toning down their colour choices to the colour-of-now: desaturated blue. jQuery and jQuery UI have revolutionised design and development for me personally, and have changed the way we do things at work. If jQMobile can iron out some of the UI teething problems, hopefully it can do the same for universal app development.
PS. For the love of god, please tone down the rounding. Everyone knows it reduces your perceived hit target. And it looks cheap.
Wow, not only does jQuery amaze me, but so does my increasing proficiency with it! Check out the Visio-style workflow builder I built using jQuery, jQuery UI and <canvas>.
- Double click to create new states.
- Drag to move states.
- Build relationships between states (accepts multiple inter-relations)
The best part of it all? It took less than two hours to build.
Introducing “Aristo”, A jQuery UI Theme
For those that arn’t familiar with jQuery UI, it’s essentially a collection of jQuery plugins that try to do for user interaction what jQuery did for JavaScript. Like it’s parent library, jQuery UI does its very best to remain cross browser compliant. It is easy to implement. It is very easy to theme. Unfortunately it hasn’t seen quite the same uptake as jQuery, and I set out on this task to improve the biggest hurdle I experienced: its design.
Frankly, jQuery UI themes are goofy. The rounded corners are goofy. The colour schemes are goofy. At this point you probably think I’m being a bit unreasonable, but compare jQuery UI to what the competition is up to:
Ace and Aristo are the respective open source themes of SproutCore and Cappuccino, applied to their parent JavaScript libraries. You can see a great comparison of the two in this article by Allen Pike. Both UI libraries duplicate the functionality of jQuery UI slightly, but look simply amazing doing so. I had already started mocking and building my own jQuery UI theme when I re-discovered the Aristo PSD. I decided to abandon my work and port the “Aristo” theme for Cappuccino over to jQuery UI.
So here we have Aristo for jQuery UI. A proof-of-concept to illustrate how jQuery UI could progress if they get sacrifice some of their direction and get some nifty designers on board. Imagine the possibilities if jQuery UI got Cocoia or Sofa on board!
Licensed under Creative Commons Attribution-Share Alike 3.0 with permission from 280 North and Pinvoke.
10 Great Twitter Designers’ vCard/Identity Sites
vCard and mini identity websites are an increasingly popular way of creating a facade for your web identity. These websites are characterised by their single page structure, where such little information is contained it is simply rendered to the page and hidden. If AJAX is ever used, it is more often than not to handle the contact form interaction.
The UI generally contains tabs and content is toggled by slick javascript animation. Most vCard website creators attempt to create a natural, tactile environment that barely resembles a web page at all. Information is available immediately, and the page never posts back.
The people I have chosen for this list work in a range of fields (UI design, icon design, graphic design, programming), but were all found using twitter. I have either been following them since day one, or found them through one of these contacts.
If imitators are an indicator of success, Tim Van Damme’s beautifully simplistic design is outstanding. Tim created a wall of shame for the long list of imitators who directly stole his code and design to use for their own vCard websites.
Okay, I admit I only found this one when I was writing this post — but I love it. The google maps integration, the subtle background and solid animation easing combine to form a slick UI.
Like most of the people in this list, I began following Chris after finding him on other designers’ pages and friend lists. His vCard/mini-site uses a spatial layout to slide between content.
Matthias Kretschmann (@kremalicious)
This vCard website makes the list because it introduced me to the idea of the microsite. While the design may not be the best in this list, it’s use of animation is what got me interested in finally learning jQuery.
The only paging on this mini site is between items in Mathieu’s portfolio.
Jonas recently hung up his mouse, but made this website as the final resting place for his work. It bears some resemblence to We Love Icons. Unfortunately this one does have post-backs, but because it embodies the simplistic design of identity design (and I love his work) I thought I would add it to the list.
While not an overly complex or stimulating design in itself, Kenichi’s website leads purely off the merit of his own work.
Jonatan Castro (@DDrDark and @bylinebreak)
This man and his work needs little introduction.
Another Mac inspired single-pager. An instructional notification slides down from the top, explaining to use the left and right arrows to navigate through the portfolio. Clicking the name header toggles the “about” information panel.
Honourable mentions (that have multiple pages, sub pages + blogs etc):
iPad UI Roundup
Sebastiaan de With has wrote a wonderful summary of the Apple iPad’s user interface. While I don’t think the homescreen is as slick as my mockup, the rest of the UI is fantastic. Sebastiaan carefully covers the good, the bad, and the ugly.
