Among Facebook’s many user interface design changes in its September 2011 update is this: The Status Update box now looks considerably different from the Search box.

Old Facebook

(I didn’t have a screenshot handy so I found one on Flickr.)

Facebook maintains a consistent look and feel across its entire application. This adds to a great user experience because it makes design predictable. You only have to learn what a styled submit button looks like once to understand what it will do on another page.

But, it can be a problem when similarly-styled elements have different actions. Such was the case with Facebook’s Search and Status Update text fields.

On the surface, there’s a lot of contrast between these features. Search is at the top of the page set within the purplish-blue header while Status Update is placed within the content region of the page, above a user’s news feed.

However, they shared these commonalities:

• One line (approximately the same height).
• At the top, relative to a respective region.
• White background with thin blue border.

These similarities were enough to create occasional mix-ups. Users would accidentally type a Status Update into the Search field, or type a Search query into the Status Update field. It happened to me with alarming frequency, and I’ve seen it occur with friends and colleagues.

New Facebook

Intentionally or not, Facebook’s design update has made the fields dissimilar enough as to prevent confusion.

• The Status Update box is entirely hidden until you click the ‘Update Status’ link (or ‘Add Photo’, or ‘Ask Question’). Users have to take an action before the field will appear.
• The Status Update box is way bigger.
• There’s a light grey bar at the bottom of the Status Update field.
• There are additional actions like tagging, geolocation, and lists, represented by icons.