Facebook Chat Heads

Anytime we’re designing for mobile, we’re generally short on real estate. To fit all of a client’s features onto an iPhone screen can be a difficult and iterative process. But by prototyping and trimming away unnecessary features, we can come up with a smooth interface while solving our client’s problem.

Often we draw inspiration from other iPhone applications and take note of the way their creators solved user interface problems. Facebook’s Chat Heads feature is a great example, because they managed to allow users to seamlessly switch between chatting and viewing their news feed. It’s a creative design that keeps me engaged with my friends without muddling the app’s already limited real estate.

Take a look at a Chat Heads in action:

ChatHeads-Background

ChatHeads-ViewMessage

My favorite aspect of Chat Heads is the Drag/Delete feature. If a Chat Head is in the way, I can move it to a different part of the screen. And if I no longer want to see that Chat Head anywhere on my screen, I can remove it by sliding it to the bottom of the screen. From there, an X appears and the Chat Head will disappear. This is a welcome use of touch/gestures, when apps frequently rely solely on buttons for user interface.

ChatHeads-MovingAround

ChatHeads-Delete

Facebook’s official Chat Heads Page

Post your thoughts