Bring the data forward

From the time you make your morning toast, to setting your thermostat, to starting your car, to paying for your coffee, to crunching an Excel report, to opening your garage door, to browsing Netflix, to setting your dishwasher, and to brushing your teeth, we engage with products hundreds of times a day. Many of the microinteractions we engage with are often invisible. 

Read More

The anatomy of a credit card payment form

Paying for something online with a credit card is simple, right? Yes and no. Yes, because we've been doing it since the early days of the Internet (e.g. Amazon), and no, because no two credit card forms are alike.

Over the past 20 years, we've built a mental model of paying online: I pull out a credit card from my wallet, enter the card details into a web form, and click a submit button. But getting from A to Z can be a tricky journey, riddled with questions the user has to answer. And obviously, nobody wants an instruction manual.

Read More

Menu selection with blink animation

Have you noticed how on Mac OS menus, when you click an item, the selection blinks a couple times? You probably haven't, because it's very subtle. We probably perceive it unconsciously.

But this pattern serves a purpose: it directly highlights the item we clicked. For that split second, you get a visual confirmation that your click registered, and that an action was triggered.

Read More

My list of things design

As designers, one of our motivations is stay up to date with what's new in the design world, so that we can improve our craft. 

But it seems like every day, there is a shiny new spot for design resources. It could be a new Tumblr, a new mailing list, a new Twitter account, Facebook page, you name it. How does one sift through it all? We can't read every new piece of design content, so we have to be selective. 

Read More

Bootstrap responsive tabs

In a previous project, I had to create a tabs interface that combined a responsive design with the ability to add/remove tabs dynamically.

Typically, a tabbed layout has a set number of tabs, and a fixed width per tab. But if we peek just above our web world, we see a familiar tab interface that can have “lots” of tabs: our browser tabs.

Chrome, Safari, Firefox, IE, all rely on tabs to navigate across multiple web pages at once. They share a set of similar patterns.

Read More

Making buttons better with subtle tactile feedback

A simple concept to make a button "better" is to shift it down by 1px when it's clicked. This is not a new concept, in fact Chris Coyer wrote about it all the way back in 2010.

"Better" is of course a subjective attribute. Typically, websites employ various ":active" states for buttons, such as:

  • Darkening the button background color
  • Adding a highlight border color
  • Using the default 'outline' glow
Read More

Review: Braun Watch BN0021BKBKG

I discovered Braun watches after reading Dieter Rams: As Little Design as Possible. The book itself is a must-read for any designer, offering rich insight into the design ethos of Dieter Rams, and the incredible collection of Braun designed products over a period of 40 years.

Braun watches were introduced to the market in the 1980's, including desk clocks, wrist watches, and wall clocks. One person deserves much recognition: Dietrich Lubs. He was instrumental in designing the first line of watches for the Braun family of products. 

Read More

Color range slider with jQuery UI Slider

Most UI sliders use a range element or a tooltip to indicate the current value of the slider. Some update the range color as a user slides the handle from left to right. I wanted to build a visual indicator in the handle as well, mostly for aesthetic purposes.

Below is a slider I build using jQuery UI Slider. As the user drags the handle from left to right, the color of the handle changes to match the color of the track. Give it a try!

Read More

The one shipping option I wish I had when shopping online

I frequently make purchases online from Amazon or Chapters Indigo. Recently, I needed a packaged delivery right away, so I choose the express shipping option. I placed the order on a Friday, expecting delivery for the following Monday. When it came to shipping, I had two options available:

  • Option A: ship to my work address. If the delivery occurred between 9AM-5PM, I would be at the office to meet the courier.
  • Option B: ship to my home address. If the delivery occurred after 6PM,  I would be at home and could greet the courier there.
Read More

Startups, stop spamming to ask for feedback

I sign up for new services/tools on a regular basis, usually from startups. Some promise to do "XYZ" better than tools I currently use. Some just peak my curiosity and I want to simply dig around. I would say 9/10 times, I end up not using the service/product I signed up for.

As a startup, I can understand that speaking to customers is super important. Speaking with customers helps you to figure what's good (or hopefully great) about your product, where customers get stuck, how well are you solving their problems etc. 

Read More