Monday, January 18, 2010

Designing Within Facebook

Week one of app-building, and we've already come up against the constraints of building within Facebook. Exhibit A: design. How does design work within Facebook, if you're not building a flash-based app? The site already has a compelling visual identity, with 10 point sans-serif fonts and a dark blue theme, and so how are you going to a) feel 'natural' - i.e. part of the Facebook ecosystem, and yet b) not feel like you're some core part of Facebook itself?

Add that to the other limitations you'll have to consider. For instance, the maximum width for a Facebook app is 760px. What can you do within those pixels? How far down should the user scroll, and how high should the app be, if it's written in FBML? Is an iframe a better option, usability wise?

And there's speed: Facebook is notoriously fast. People surfing within Facebook expect your app to match those loading speeds (though they make exceptions for Flash apps, I suppose, because everyone knows Flash takes time to load). If you can't match Facebook's speeds, what can you do to convince people to wait just a wee bit longer for your app to load? Should you use an animated background to leverage user perception of Flash? Do you use a complete different design scheme to convince users that this isn't Facebook, and you're allowed to be slightly slower?

Also: UI elements. There's a bank of ads on the right side of the screen, how are you to design around that? You want users to focus on what you have inside the app. Do you use different fonts from the ones displayed in the ads? Do you use customized buttons in your UI, or use Facebook's own? Plus weightage - site design has to have some form of aesthetic balance. WIth a bank of ads 'weighing' down one side of the screen, how do you balance the other side out? Use bigger geometric shapes? Colour?

Most importantly, however, how can I convince users that what they're dealing with is a 'private' app, within the open platform that is Facebook?

Boy do I have my work cut out for me.

2 comments:

detach8 said...

I'm standing on your side on making the app look like it's part of Facebook than something really out of the blue!

Second part about loading speed, there's two factors for FBML apps. First is the speed of the server (duh), second is the latency of the server FROM Facebook, not the users! That's because Users->Facebook->YourServer

I guess the part on ads is that we are automatically switched off, so I'm less worried.

P.S. Your title should rename to function isNerd() { return true; }

- Justin

Eli James said...

The latency of the server from Facebook shouldn't be a problem, I think. The site's crazy fast. But I believe it's going to be a little challenging to build within this platform, since user expectations have been raised by Facebook's fast loading speeds and liberal use of AJAX. Should I include AJAX into the app's settings screens and so on? Not sure yet ...

As for the title, I ... don't see what's wrong with it. Take a boolean var named isNerd from, say a Person class, check if it's true, if it is, say yes!. (Though maybe that's unnecessary, since isNerd is already itself a boolean variable).