Visceral & Contextual Transitions

John Gruber of Daring Fireball fame (as if he needs an introduction) linked to an excellent article written by Rob Foster at Mysterious Trousers. If you haven’t already, definitely take a gander (go ahead, I’ll wait for you to finish).

In summary, the article focuses on the gut or visceral reaction created when interacting with mobile apps. Specifically, apps that include subtle effects and/or transitions to build suspense/potential whereby the user anticipates and then experiences some sort of release or kinetic energy (e.g., pull to refresh, rubber banding).

Too often as UX/UI designs we design for the mind and lose site of the visceral elements that also play into what makes an app so darn great and fun to use.

Additionally, Pasquale D’ Silva recently articulated what he describes as Transitional Interfaces. His argument is that animations can be functional too (and not just sweet sweet mouth watering eye candy) in order to give context within an interface.

What happens when I click this button?
Does this menu just appear when clicked?
Did something just happen?
I missed that.

His most simplistic example is having slide-in/slide-out effects attached to list items when one is added and/or deleted from the UI. Be sure to check out the rest of his examples and nifty animated .GIF images that illustrate his point beautifully. If those examples don’t make you realize the benefits, then I’m not sure what will.

(As an aside: Chris Coyier over at CSS-Tricks took Pasquale’s examples and developed them using CSS transitions/animations – it’s definitely worth a look.)

My takeaway is this, two of the benefits of using subtle transitions/animations are: contextual and visceral.

Sure we should strive to make our designs pixel perfect, incorporate white space accordingly and develop a sensible hierarchy to the elements within an interface. But we would be wise to take it one step further – We should sweat the small stuff and then sweat it some more. Ask yourself, would a transition help provide context to the user for this interaction? Would a subtle animation provide a positive visceral or gut reaction when using the application?

Moving forward, I know I will.

Update (July 8th, 2013): With the unveiling of iOS 7, contextual and visceral transitions are going to become expected by users. Like Jeremy Olson, I’m looking forward to getting my feet wet:

Although I think we should try to give our apps a unique look through subtle twists on the iOS 7 design language, I’m excited to focus more on making our apps unique by experimenting with novel interaction models, transitions, and physicality, making our apps a lot more visceral.

Receding Background Modal Boxes

Slick concept by Hakim El Hattab.

A modal concept which aims to give a sense of depth between the page and modal layers. Click a button below to give it a try.

Give it a try I did and wow, what a great example of utilizing simple CSS3 transitions and transforms to accomplish some wonderful (and rather useful) ways to focus user attention on the task at hand. Stop by the example page or see exactly how it’s done by reviewing the walkthrough on Chris Coyier’s site.

Design Tip: Never Use Black

Excellent article by Ian Storm Taylor.

“…we see dark things and assume they are black things. When, in reality, it’s very hard to find something that is pure black. Roads aren’t black. Your office chair isn’t black. The sidebar in Sparrow isn’t black. Words on web pages aren’t black.”

Design Tip: Never Use Black by Ian Storm Talyor

It’s the very reason the blacks on this site, aren’t really black at all.

Breaking [My] Good Habits

Recently, Harry Roberts of CSSWizardry fame gave a stellar talk on taking a long hard look at our previously and rightfully conceived notions of building standards-based websites.

Breaking Good Habits – Harry Roberts from Front-Trends on Vimeo.

He made some great points throughout the talk, and I highly recommend you give it a quick look. The main message was geared towards the maintanability, flexibility, extensibility, (and several additional bilities) of our code. While Harry introduces and reiterates some great examples of doing so (abstraction, using classes only, etc.), his highlights on the benefits of Grid Systems caught my attention.

I’ll admit, I used to heavily dislike Grid Systems for their lack of semantics. The thought of putting “twocol” or “grid_2” into my markup made my skin crawl. How dare they, in the name of web standards, devise such an unholy and unsemantic framework that riddles my pristine HTML. I even scoffed when my coworkers began implementing these frameworks for several client projects.

Well, one look at the markup on this site (and the footer) will reveal that I am in fact using the 1140 Grid System. So why the change?

Continue Reading

Thank You!

I didn’t expect this.

Without a doubt the launch of this simple little site has exceeded my expectations and I could not be more thankful for the countless emails and responses I’ve received over the past few days. It’s confirmation that getting to work is the right approach.

To my surprise, the site was deemed worthy to be posted on the TheBestDesigns, a wonderful – if not the best – web showcase. In addition, I had the pleasure of being featured on the minimalistic gallery, Siiimple, a site that proves the old adage, less is more.

Aside from the aforementioned galleries, the site has been nominated for an Awwward. For those of you unfamiliar with the site, I will now face a firing squad jury of my peers and industry professionals who will provide their own assessment of my humble work. While I don’t expect to receive a high score, it is my hope that the overall rating will serve as a baseline by which I will further build upon.

Stay tuned. I have a few things in the till I think you’ll enjoy.

Update: Just noticed the site has recently been featured in a Web Design Ledger article, “21 Examples of Inspiring Typography in Web Design” and is now listed on CSSMania.

Finally, A Presence On The Interwebs

So I finally did it – I made my own web presence. I’ve been creating websites for over 10 years in some form or another. I’ve had the fortune of watching the web grow up, from my early years using Prodigy Online to check sports scores to my first foray into web design in [cringe] FrontPage. Since that time, I’ve built sites in tables, learned to love floats and now dream of the flexible box layout module. My layouts have been fixed, fluid, and now responsive. I recall nightmares that involved Netscape 4, countless hours beating Internet Explorer 6 into submission and the joy of developing anything for Webkit. While others feel old watching Bryce Harper swing for the fences, I feel old knowing there are people who have never coded a table-based layout. Lucky.

Continue Reading