Facebook Developer’s Garage 2 & Some UI Notes

14 03 2008

Last week E27 and the Singapore PHP User Group organized the 2nd Facebook Developer’s Garage in Singapore. As a fresh Facebook developer, I was ecstatic when my teams and I were invited to present 2 of our applications there: AntRush and Prosperity Garden.

I have not written about AntRush before because the application is still in Beta so here’s a quick introduction:

AntRush is a simple online turn-based strategy game where you’re given an ant colony which you can grow and some eggs which you can morph into workers and soldiers. Once you have a big enough army, you can invade your friend’s colonies, kill their ants and rob them of their resources in the process.

Coming back to the event, I felt that we didn’t really give a good presentation because we didn’t have time to prepare for it and hence went with an impromptu style presentation. We mainly spoke about our experience developing the application, how we came up with the idea, the technology used and problems encountered(especially with the user interface(UI)). As promised, I’ll spare the technical details as they can get pretty mundane and focus on writing about the interesting points I learnt UI-wise from my experience of developing these 2 Facebook apps.

.
.

1. Users NEVER READ instructions
When we first released Prosperity Garden, the very first feedback I got from a friend was “Su Yuen, I don’t understand. What am I supposed to do?”. That came as a slap in the face, indirectly hinting you created an app which no one knows how to use “ack!!”.

Lesson: If you want your users to read instructions, make sure they are GRAPHICAL and not text. In other words, the very first page they see are graphics that intuitively educate them on what your app is about and how to use it, instead of expecting them to understand / read the help page. Very few users will ever visit the “Help” page. If a user doesn’t know how to use your app within the first 5 minutes of poking around, you’ll probably never see him/her again.
.
.

2. Avoid confusing graphical instructions
Graphical instructions with snapshots of the parts of the application your instruction corresponds to is helpful but only if users don’t mistaken those snapshots as part of your application. Confused? Here’s an example:

These instructions were placed at the very top of the page for Prosperity Garden, explaining to users how to send gifts. Many users mistook these instructions as part of the application as well and were trying to do things like type text into the snapshot of the textbox above.

Lesson: Why not make the instruction as PART of the app itself? Saves the trouble of creating snapshots for your instructions. 🙂
.
.

3. Users hate to scroll!!

For example, in AntRush, a HUGE mistake we made was making players scroll down quite a bit to access the main control functions of the game. This was troublesome for most users as the huge picture at the top was considered as “useless” and in the way.

Lesson: Try to have the main functions of your application available right within the first screen seen for a better user-interface experience. After all, there’s no harm in making things more convenient for your users right? ^_~
.
.

4. Facebook tabs not always noticeable

Depending on the layout of your application, the default Facebook tabs provided are not always that effective in attracting users’ attention. If you have a really attractive image right below the tabs, there is a tendency for users not to notice them like in Prosperity Garden. Hence if users are not noticing your tabs (and if your tabs are important of course), its better to replace them with a navigation bar / buttons of your own which follow the feel and flow of the overall application design.
.
.

5. Avoid using Flash if possible
It is true that Facebook users enjoy doing no-brainer things that are time-wasting but! they hate to waste time WAITING (or doing nothing). It may sound silly but it is a very true fact. Hence, if your application takes a while to load, you are testing your user’s patience. Many will withstand the test of time and move on to doing something else. Flash is very flashy but takes quite a while to load on Facebook. Our Prosperity Garden application is an example of this.

Lesson: If you want to use Flash, try to ensure that it doesn’t take too long to load. Always try to look for other ways of doing things without Flash (JavaScript, AJAX, GIF animations, etc).
.
.

There you go! 5 quick user interface(UI) points from a fresh Facebook developer. Will share more as I delve further into my new developer life. ^^;;

Before I leave, here are some pictures of my teams and myself from the event taken by Willy Foo. 🙂


From far left: Me, Jihoon, Duc, Ali and Ahmed

Some links:
Video Recordings from the event (Note: Videos of my presentation not up yet. Will update once they are! ^_~)
Live blogging from FBDG2
Details and Program of Facebook Developer’s Garage 2
Aftermath of Facebook Developer’s Garage II

Advertisements

Actions

Information

7 responses

15 03 2008
dewmelon

The geek-team. LOL. Great that the team is trying to understand users’ needs and implement changes for the better.

15 03 2008
bitbot

Wow omg… please don’t call us the geek team. My team may be geek but I’m definitely not haha.

Anyway yea, we’ve been trying to modify the UI quite a bit everytime we get feedback from some user testings. However, as UI design is something very new to us, we’re still learning what works and what doesn’t along the way.

7 11 2008
Grady

Awesome, great job guys

24 12 2008
Grady

but, there is another game already called antrush, my favorite game, and its much better(no offense)

3 06 2012
fraggs

+1

4 03 2009
Smitty

How do i play the game?

5 03 2009
bitbot

hey Smitty! Sorry the games are no longer online as we do not have time to maintain it anymore.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: