Feeling Touchy; Learning how to build great touch UI palm-run: a walk through of building a new webOS application
Mar 03

Facebook in your Palm; Fun building the new Facebook app

Mobile, Tech, webOS with tags: Add comments

facepalm

When Ben and I joined Palm to run Developer Relations, we knew that we wanted to eat dogfood pretty quickly. We have had some mobile related projects in the past, but they were either mobile Web sites, or Java based. Being able to take our web skillz to rich mobile devices was much more new and exciting.

Building sample code and apps is useful for developers, and the team will be doing plenty of that (e.g. this is how you use the awesome List widget in every which way, and why you would do X, Y, or Z) but building a production app is a whole different level.

We wanted to learn what it is like for our developers to design, build, and distribute webOS applications. We could have started with a smallish app, but no :) Instead we took the great work of Justin Newitter (who built the original app) and went running with an updated Facebook app. Along with other great developers in the dev relations world, we have gotten our first early release out there today.

Here is a walk through of the app by PreCentral:

We have definitely learned a lot in our short time on the app, and this is the first release of many. I really want us to have a regular cadence to our releases. If there is a feature you are excited about let us know.

fbpixi

We added a broad feature set to the application. The first Facebook application was very much about synergy. Why put something in an application silo when you can bake it into the platform? I still contend that webOS is the best platform for Facebook users as it integrates throughout. Other mobile platforms do some of this, but I think we continue to do the best job here.

There are a bunch of Facebook features that our users still wanted though, so we worked with Facebook themselves to prioritize this list. The top features were access to Facebook Mail, full profile access (info, wall, and photos), people search, events and birthdays. We also wanted to do interesting things to the UI as we bring in these features. Oh, and a couple of mini-easter eggs.

Designing the application was challenging and a lot of fun. At a high level, working out a design that is true to webOS *and* a strong brand such as Facebook was a balancing act. You will run into this same issue even without a brand like FB. How does it have your DNA and still fit in with the core platform. This has been a design consideration since the dawn of time. Do you make a clean Mac app that looks like Mail.app? Do you do your own UI that looks like a funky Flash UI? Most of the time you are in the middle.

fbappnav

One feature that we spent time on was the base navigation. We wanted to make it incredibly easy to get to features you use often, and also quick to get to all features.

We ended up with a solution that made the following decisions:

News as Root

The root of the application is the news feed. Some Facebook apps have an icon window as the root, but we decided to behave more like the Facebook website itself. The news stream is the blood line, so start there. No matter where you go in the app, if you back gesture away…. you will always end up at the news stream.

Also, just like the iPhone app, we share the shake gesture as a way to refresh the data here. Shake away.

Status Matters

webOS devices have hardware keyboards and are great for creating content. In the Facebook context this means updating your status and uploading photos are prime ways to get your content into the system.

For this reason the top left area is your way to always get to your current status and update on it. In fact, if you are on the new stream, just start typing and the update area will pop down and capture your new status (while showing your last one below).

Also, if you click on the camera icon, you are sent into the core photo experience on the device which natively supports uploading to Facebook.

The Navigation Grid

For all other features, we wanted to give you a quick way to access them. Click on the top right grid and a pop down will immediately appear, giving you one tap access to any feature. No need to switch to a navigation screen first.

We are also playing with the ability to use that hardware keyboard by giving you quick key access to any feature (e.g. SYM + E == sends you to events). Is that a good idea?

Facebook Logo Power

The Facebook logo itself has some hidden love. In an homage to to websites, a tap on the logo takes you home…. which means back to the news stream. If you are on the news stream already, and have flicked down…. that same logo will bring you to the top.

Where to go next?

We are excited to offer access to data that Facebook users haven’t been able to get in an app before, but where do we go from here?

We definitely want to do a lot of polish on various sections that we have out there. One idea that I have been playing with from the get go is doing something immersive when you rotate the screen when in a news feed. Instead of just having the news feed work in that format, what if the content took over. I mentioned this in my last post about touch UI. I flick through the stream and if on photos, the album takes on the entire screen for example.

There are some other really fun features that revolve around webOS notifications and giving you a great way to “never miss a thing” (life moves fast you know ;) and choosing what content matters to you.

And, finally, we have to work out what makes sense in an app, and what could be baked into the platform. Giving access to birthdays is great, but would you like to have them as a calendar on the device? Maybe, but you would definitely want to be able to turn that view off…. and in fact you may already have birthday info in your profiles, so we should have one unified birthday view. Life gets more complicated when you go to the generic doesn’t it.

Again, we have just started here, but would love to hear from you on our feedback area in the app page.

Thanks to the team that played a part in this release! We haven’t reached Joe Hewitt foo yet, but we are having fun!

27 Responses to “Facebook in your Palm; Fun building the new Facebook app”

  1. Jeff McLean Says:

    Great job guys on this app. I really like the interface, and the news feed as the root. Where to go next: Notifications would be good, but chat event better. Also, if you could get the events to show up in the calendar with the right time for us folks not on the west coast. As far as turning off birthday or events in the calendar. If you treated each one as a calendar like the many calendars that I have in google, I’m able to turn these on and off in the calendar app.

  2. Rob Says:

    Great that you are building an app with the tools. I’d be really interested to read about what did and didn’t work well for you in the development process.

  3. Ted Mielczarek Says:

    I guess I fail to see why you’d want a native app at all for something like Facebook instead of just a well-designed mobile site. For anything that doesn’t need access to platform specific APIs, it seems like “just use the mobile site” makes more sense than “write a platform-specific app”. Especially when you’re rewriting something that’s already a webpage in HTML+JS.

  4. Chuck Says:

    Maybe I’m missing it… Any way to upload pictures or video?

  5. gbp Says:

    Dion,
    If you can integrate to invoke maps with in the app to either google maps or Bing that would help.Speaking of which we need Bing maps native app on WebOS. Its about time folks need options for maps.

  6. gbp Says:

    Also, I cannot use the facebook app unless I use the PALM Synergy. Some of us do not want to integrate the contact or schedules from facebook on our Pres. We just want to login to see the wall and post status. We would love to have a super fast “lite” app.

  7. G Says:

    The app is really great. Well done, A++. A great improvement, and well integrated.

    As the above commenter noted, proper time zone support would be great. In Europe, the event times are way off, sometimes leading to events being pushed to the wrong day (e.g. an even that happens at 5pm UK time gets listed as 1am or 2am the next day in the app).

    Chat would be great, but I’d rather that it was integrated in to the Messaging application using Facebook’s Jabber interface.

    While I’m on my soapbox, could you badger the WebOS Messaging team to allow the addition of generic Jabber accounts, not just Google Talk?

    Oh, and notifications in the FB app would be great. Especially if they took over from FB’s normal emails. I sometimes get notification emails from FB, then deal with them in the app. But the email of the notification is still unread in my email inbox, and I then have to open there it in order to make it disappear. So I end up doing two separate actions in order to deal with one thing.

    I’m thinking something like the Blackberry implementation of FB, which takes over any emails from FB and routes them into the app.

    Thanks!

    G

  8. Cecemf Says:

    Hi, love the new app. so much better ! it’s really good love the new UI and I can tell that so much work as been put into. For me the feature missing are the “Pages” (which could appear in the pop down menu) like on the iPhone and of course being able to update the status of my PAGES (like on the iPhone also) as I’m sure many user have they how PAGES (group).

  9. Melvin h Says:

    I think you should just set up a FB Birthday’s should be synced to a separate calender in the calender app. You shouldn’t have a unified birthday view because i’m people would like to be able to distinguish between FBfriend bdays, and friend/relative bdays.

    I think the main focus for the next update should fbChat. the second focus be a fully customizable notification system. It seems like you guys already have plans in that department!

    keep up the good work!

  10. Josh R. Says:

    I want to thank you and I completely agree with Jeff. I wanted to know if anyone is working on some sort of sports application like ESPN or SI?

  11. Sid K Says:

    Great job on the app – love it!

    Given that it represents such a tremendous improvement over the previous app and other options (including the mobile FB website), can I please request you devote your attention elsewhere for the time being?

    All the new features you’re proposing are well and useful, but they’re incremental attempts at improving the current app which will have only marginal value (as opposed to the step change the last one was).

    I’d argue your (and your team’s) development efforts are much better utilized focusing on other apps which have languished (email) or are non-existent. Or maybe even OS-level improvement efforts (the laggy, laggy UI, for example)

  12. art Says:

    Great job on the new Facebook App! I’m glad it was a learning experience for you. Will the source code be made freely available so webOS developers can learn from it too?

  13. Doug Says:

    Hey guys,

    Great work on the app and thanks for keeping us all informed. I went ahead a upped my old review on the app to a 4 star ….how do you guys get a 5?

    Notifications! This def. would be mine, as well as other’s, top request. Also…this may be a bit more involved, but incorporating Facebook chat into the messaging app perhaps? I don’t use it myself, but having the option would be great.

    Otherwise, keep up the good work.

  14. Dingy Says:

    First of all, kudos galore for the new and improved apps. With video recording/editing and a fully functional dedicated facebook app, we (WebOS’ers) can now really talk smack to the iPhone fanboys. Thanks for your work.

    From here, I think it would be great if you guys incorporated Facebook chat capabilities into the app. I don’t use Facebook calendar so I could care less about that. But chat on the other hand, would be utterly awesome. I would also like to see a new Facebook icon that is more in line with the original WebOS icons, i.e. all the quick launch icons which have the semi-translucent circle in the background. Currently the Facebook look is indistinquisable from the iPhone Facebook app’s logo.

  15. Alex Says:

    From what I know of the technologies behind webOS, it would not be difficult to add facebook chat to the messaging app. Google Talk already uses XMPP and you can now use facebook chat with this ( aka Jabber). All it would really take is adding the menu option – i’d like to see this.
    overall, great work on the updated app. The only other this is notifications and requests, which should be native. That and the issue with facebook events being incorrectly timed if you’re not in the same time zone as palm’s servers

  16. Joe Says:

    With regards to the birthday thing, honestly it should be integrated into the contacts / calendar itself, not in Facebook.

    Synergy already puts the data for the Facebook and Google contacts’ birthdays into contacts, and so there should be an option in contacts to put all of that in the calendar, not just the Facebook birthdays.

  17. Kelsey Says:

    It looks really great guys! I’m glad you’re having so much fun with it. Since I have a Pre, I’m excited to try it out.

  18. Hemna Says:

    Nice looking app, but one problem. No one can log in currently.

    http://www.facebook.com/topic.php?topic=13808&post=53474&uid=4620273157#post53474

  19. chris milette Says:

    uhm can I has fb chat + notifications? Kthxbai

  20. Hemna Says:

    /var/log/messages gets this when I click on “Sign In” to version 1.10 of the FB app running in WebOs 1.4

    2010-03-04T19:53:14.878234Z [261685] palm-webos-device user.crit LunaSysMgr: {LunaSysMgrJS}: com.palm.app.facebook: Error: Error – unable to get accounts {”errorCode”: “ErrorGenericMethodException”, “errorText”: “Service Method Exception: java.lang.NullPointerException”}, palmInitFramework330:2510

  21. dion Says:

    @Ted Mielczarek

    I am a strong believer in just using HTML5 etc. However, right now, there are things that we can do in the app that we can’t do on a website. We can offer very deep integration into synergy etc which ties into the device very nicely indeed.

    @Chuck

    Tap the camera icon on the top left next to status info and you will be taken to your photo album

    @gbp

    Can totally see that. We have that on the feature list…. just need to piece apart the synergy stuff from the rest.

    @G (and others on FB chat)

    - Time zone; hmm that is weird. We should be getting the right date from FB….
    - Chat; would love to get that into messaging. Messaging on devices is trickier than I thought. There are issues with getting pinged w/ presence info all the time and sucking battery life and the like. I believe that is why it isn’t trivial and you end up having to work with the backend provider to make their service mobile friendly.
    - Nice thoughts on notifications

    @Cecemf

    Pages are important. Got it.

    @Melvin h

    Yeah that makes a lot of sense. Will think about preferences so folks can choose between options.

    @art

    We very much intend to open up the source code and use it as a way to share info on a production level application. We still have a ways to go to make the code exemplary but that is very much in the plan.

    @Hemna

    We are working to reproduce this darn bug…. but will get there. Thanks for your patience.

    Thanks to everyone for the great thoughts and feedback! Keep it coming!

  22. David Says:

    This looks great! Can’t wait to download the update. Thank u and great job. I agree that ur talent be focused on developing new apps, not further improving this one. When or will we ever get a xm Sirius app? I’m dying for this and not in a flash version as I have and love my Pixi. Anybody know anything on this?

  23. Felipe Villasenor Says:

    Nice app guys….keep it up! I am always cheerleading and tweeting for WebOS. @jfelipe33

  24. Neo Says:

    Just to throw my 2 cents in:

    Great work on the facebook app!

    – Notifications: It’s been said before, but WebOS has a great notification system implemented; it would be tremendous for the Facebook app to leverage that for use with its own popup style notifications.

    – Improved Photo/Album function: I’m not really sure why, but some photos work better in the facebook app than others. Sometimes I’m left with no image, or just the blurry image that never resolves (does the image time out)? And sometimes I see albums populate quickly, and yet others don’t. Is there a reason for this?

    – Facebook Chat: I’ll just voice my opinion that this is an irrelevant feature for me, and is probably more harm than good with the added power/data consumption.

    – Person search: the functionality here is still a little glitchy — to use the “Peter Smith” by way of example, sometimes I can type in “Peter Smit” and get all the Peter Smiths I want, and then when I add the final “h”, suddenly the list is empty.

    Thanks again for the hard work!

  25. Brian Benton Says:

    I just updated my Facebook App, now I can’t log on. I’m getting the similar error message as above:

    2010-03-04T19:53:14.878234Z [261685] palm-webos-device user.crit LunaSysMgr: {LunaSysMgrJS}: com.palm.app.facebook: Error: Error – unable to get accounts {”errorCode”: “ErrorGenericMethodException”, “errorText”: “Service Method Exception: java.lang.NullPointerException”}

  26. Matt Pierce Says:

    Some feedback after the latest FB app update (v1.2.0)

    - Having notifications is great, but you need to click on each notification individually to check them off the list. So if there are 20 responses to one wall post, you need to click on each one individually instead of just the most recent one in the thread. It would be nice to match the behavior of the FB website, where notifications are marked received when the user opens the menu. The user is not required to take action to have received a notification.

    - Notifications on photos don’t work. If I get a notification “XXXX likes your [photo].” and I click the “photo” link, I get the error “Error: Unable to open photo.”

    - Even though I can watch videos that come up in the news feed, I haven’t been able to from a notification yet. I would love to give you more details but the only video notification I have now is “Your video has finished processing. You can either [watch it] or [select a thumbnail].” The “watch it” link doesn’t open the video like the app does from the news feed, it opens the browser which then displays a missing plugin error.

    Great work though – adding notifications makes this way more useful!

  27. Bob Says:

    So the “ErrorGenericMethodException”, “errorText”: “Service Method Exception: java.lang.NullPointerException”}, palmInitFramework330:2510″ is a bug that is being worked on? How will I know when it is fixed? I assume I just have to keep trying to sign on??

Leave a Reply

Spam is a pain, I am sorry to have to do this to you, but can you answer the question below?

Q: Type in the word 'ajax'