Design and Code an Integrated Facebook App: Theory

During this series I'll be looking behind the UI of Facebook and, in the process, showing you how to create your own integrated Facebook blog app through an RSS feed.

Love it or hate it Facebook has become an integral part of people's lives. For many it's a tool that allows us to catch up with old friends, share photos or plan our nights out with our mates. However, behind the social interaction lies a complex structure of careful UI planning that has been tweaked and re-tweaked.

In the early days of Facebook I was never a fan of its "boring look and feel" and always felt that it had potential for so much more in terms of design. However, it's only as my knowledge and experience of being a UI designer has progressed that I now realize it's Facebook's simplicity and ease of use that has allowed it to become so successful. Its design is certainly something that should be admired.

Introduction

In this series of tutorials, I'm going to evaluate the UI of Facebook through a series of case study, research, implementation and analysis, so you understand how some of its design principles can help you in creating a native look and feel Facebook app. I wanted to create something that would hopefully come in handy to the Webdesigntuts+ readers and thought "Wouldn't it be great if I could show you guys how to turn your web blog into a native Facebook app". Well folks you're in luck 'cos this is exactly what I plan to do over the next 3 articles. So stick with me, make yourself a cup of tea and happy designing!

A Brief History on the UI Design of Facebook

Since the early days, simplicity has been at the heart of Facebook

In February 2004 thefacebook.com opened its doors to the students of Harvard before later opening it up to the public on September 26, 2006. The overall concept for the site remains similar to its original state. It still has the blue header, the clean white background, the blue tabbed column headers and the very same font it uses today, Lucida Grande. Of course a lot has changed since the early days. Mark Zuckenberg has grown up and the site's grown with him. It's hard to ever fully understand exactly what Zuckenberg's thought process was during the early days of Facebook but it seems likely his main focus was concentrating on functionality over UI. Zuckenberg does give some insight into his early design considerations:

More money than sense has been thrown at Facebook since its incarnation. With this came improvements in Facebook's design; little by little, bit by bit. Facebook regularly updates its UI usually in stages and often gets greeted with criticism before eventually being appreciated by the majority.

The Benefits of Designing Native

So why would you want to design your app like Facebook? It's entirely up to you how you design your Facebook app. Some of you will opt for native and others will design something completely new that will hopefully compliment Facebook. There is no right or wrong way to design your app but hopefully by understanding the logic behind Facebook's design it will give your design the best chance of success.

Familiarity

Perhaps the biggest advantage of designing native is that it will be familiar to your users. They won't have to learn a new UI concept from scratch, as they'll already be familiar with how Facebook works.

Security

Alongside familiarity sits security. Your users will no doubt feel secure and comfortable in an environment they already know as opposed to a foreign design that is sitting in Facebook. If you're considering selling items through your app then this feeling of security from your users could potentially lead to higher conversion rates.

As designers we have a natural desire to want to create something new and exciting, so following Facebook's style guidelines may not appeal directly to you, but how about if you were to set yourself a challenge and design something in the style of Facebook that Facebook doesn't have a direct style for? Ever wondered what a table might look like in the style of Facebook? Set yourself a challenge and create something that doesn't exist yet. I can assure you that this challenge can be as equally as much fun as coming up with a brand new concept from scratch.

Facebook Design Principles

Many large organizations have a brand or style guide. Facebook layout their guidelines in the Facebook design principles. Although they are vague and can be interpreted in a variety of ways it does help you understand what Facebook is trying to achieve through their website's design. As Facebook say:

There are certain beliefs we hold at Facebook, certain qualities that we strive for in our work. It's what enables us to debate whether something "Is Facebook" or "Isn't Facebook," it's what allows us to evaluate whether anything we're designing could be improved.

Facebook's mission statement is to make the world more open and this has a strong influence on the design. The Facebook UI needs to work across all cultures, across all continents of the globe in every language. This doesn't mean you have to translate your app into every language on the planet, but it's some things to bear in mind when creating your app.

Things to Avoid

Make sure you read the graph API documentation and make sure what you plan to do is achievable. For instance, when I first came up with the concept to create this blog app, I thought it would be a good idea to include the preview images next to my blog posts. However, (unfortunately) Feedburner's RSS feed (that we will be bringing the feed in from) doesn't bring in the url for preview images. This just enforces the fact that you should plan your app carefully. The more you plan, the easier you make it for yourself. There's nothing worse than having designed and coded your app in HTML/CSS only to find out what you planned to do is not available or possible.

Another point to make is don't mislead people with false Facebook UI elements such as the like button - Facebook will penalize you for this which could result in your app being suspended.

Make sure you design within 760px for apps, or if you aim to put your app in a page then no larger than 520px.

The Wireframe

As with any good website it is important to plan. Long gone are the days when it is acceptable to jump straight into a code editor and code your site. Nowadays you can save yourself a lot of headaches and time by sketching out a wireframe. This limited graphical representation of your app can help you plan navigation, paths and present information that will be most beneficial to your users. It gives you the chance to analyze and assess your decisions without being influenced by the design. Fortunately for us today there's whole host of software and resources to help us knock up wireframes in a matter of minutes.

If we look at the wireframe of our Facebook app, you can see how we have planned out:

The routes and paths users will take once within our app.

Approximate dimensions to ensure we're working at the correct scale, and that our app will fit in Facebook.

Approximate font sizes – This can be useful as a guide for when we plan out our CSS later on. I wouldn't usually do this when creating a wireframe for a site but in this case when we're wanting our styles to be really simple, it can often serve as a good guide for basic styles such as our heading tags h1's, h2's etc.

The most logical places for our content. Notice how the blog posts have all been placed on the left. This is to draw the user straight into our content as soon as they hit our app.

Navigation

Until recently I've never really liked Facebook's app navigation. I've always felt that our apps are hidden away and that there was no clear direction or organization of them. Luckily things have been improved lately and they have streamlined the home page navigation. This does give a great advantage to us app developers as it makes accessing our apps easier and more at the forefront on the homepage.

Facebook say:

We're making it easier for your users to easily access and reengage with the applications they use most often. Platform applications now have equal opportunity for real estate on the home page. They can occupy the positions currently held by the Applications Dashboard, the Games Dashboard, and Photos, depending on which applications the user interacts with the most.

Colors

So the first thing you'll have noticed is that Facebook uses blue as one of its primary base colors. It's a sensible choice from Facebook. Ever wondered why so many websites (Twitter, Facebook, LinkedIn , Paypal etc) use blue as their primary color? It's because blue is seen to be the color that is most universally acceptable. In many diverse cultures blue is associated with religious beliefs, bringing peace or is thought to keep the bad spirits away. Blue is a color that most of us have subconsciously grown familiar with; it is the color of the sky and sea. Universally we have come to associate this with calmness. Facebook seem to have the balance just about right with its blue header and clean white background as too much blue can evoke feelings of coldness, sadness and depression.

Take a look above and you can see some of the other colors Facebook uses amongst its site.

Fonts/Typography

Facebook still retains the same primary font that it used on its opening day, the sans-serif font Lucida Grande. This is then followed by a series of fallback fonts. If we take a look at the CSS from Facebook we can directly see the full font family as:

font-family: "lucida grande",tahoma,verdana,arial,sans-serif;

The font designed by Charles Bigelow and Kris Holmes is considered by some to reflect minimalist, formality and quality. All qualities that make it the perfect choice of font for the world's largest social network.

Facebook's paragraph text is 11px with a line-height of 16px. This gives it a good ratio of around 1.5 allowing it to be easily read and evenly spaced. Line height is extremely important on text when you're working on clean, minimal designs. If you get the line height wrong on your text then this could easily make a good design into just an OK one. It's these font attributes that we've decided to use for our blog app.

User Input Fields

By breaking down Facebook's user input fields we can find out which ones would be most suited to the type of app that we are making. Facebook generally has five types of user inputs fields. These are:

Status Update

Sign Up

Comments

Search

Login

If your user has had to register some details with your app, perhaps an email address for a competition, then the most obvious choice would be to use the sign up input type for your users to enter their details. These are a good choice for this kind of thing as these large fields draw the user in and will help with signup conversion. If your app includes a search then why try and re invent the wheel? Why not use the Facebook style search? Your users will already be able to relate to the native search and instantly know that it will help them find what they are looking for. It's this kind of detail, when designing your app that will make it the ultimate in user friendliness and eventually give it the best chance of success!

Another option would be to do what we've done with our Facebook blog app and create some slight alteration that isn't in Facebook. Notice in the diagram above how the comments and login inputs both have padding of 3px, well we've taken this and used the border stroke from the status update input. Using this kind of combination will still sit right within the design and will still give the feeling of being native as we're extending the Facebook style sheet whilst still sticking to the rules.

Think Clean

Facebook's ambition within their design is for it to act as a blank canvas from which their users can live. This makes sense because the design shouldn't intrude on what users are trying to achieve when they're on your app. Facebook believes that:

As designers it's sometimes hard to take a step back. We're so used to layering our designs up with gradients, drop shadows and border radius' that we sometimes forget that the simplest of designs can be the most effective. Being able to accomplish this can often be quite a difficult task but it's something that every UI designer should master and be able to do. Peter Soyer wrote an interesting article on minimal design. If you need some ideas or inspiration for this kind of thing then you should definitely check out this post 60 clean and minimal websites for inspiration.

Or, of course, you can always have a look at Facebook and see what elements you can pull in from their current clean styles.

Think Consistent

Something you may not have noticed before when you're browsing Facebook, is how much Facebook uses patterns within its UI design. This is to encourage users to become familiar with their layout. Facebook explains how this works

By embracing patterns we can recognize that our usability is greatly improved when similar parts are expressed in similar ways. Our interactions speak to users with a single voice, building trust. Reduce, reuse, don't redesign.

In our blog app you can see we have adopted Facebook's ideals by reusing parts such as the tab headers in the sidebar. This easily breaks it down for our users and lets them quickly scan the content to find what they are looking for.

Think Human

At the forefront of Facebook is social interaction. Users are no longer just typing into computers; they are interacting and connecting with the people they know. They come onto Facebook because they want to be surrounded by their friends. Technology and design should stay in the background and not detract from this. It's often a good idea to try and make your app more human and interactive. Fortunately for us Facebook offers the Facebook graph API, which allows us to make our app more interactive and connect with their powerful social graph.

We'll be talking more about the graph API in the upcoming tutorials as part of this series. Facebook also offers simpler ways for these kinds of interactions to be incorporated by using any of their social plugins such as the like button, send button, comments and several more.

Making it Adaptable/Updateable

I'm sure you'll all have noticed that Facebook does update its look and features quite frequently. This is not only something that annoys users but can also annoy the hell out of us designers and developers. This is because it has the ability to ruin all the hard work that we have put in. Why not prepare for the worst so that if Facebook do make an unexpected update then we are ready to take them on. From my own experience the key to this is by making elements reusable and simply styled.

Of course we never know when or how Facebook is going to update - it can come up and bite you in the ass when you're least expecting it. In fact so much so that as I was half way through writing the tutorial accompanying this series, Facebook went and updated their application canvas page making me have to readdress some of my design. Thanks Facebook!

Putting it All Into Action!

If you take a look at the .PSD that accompanies this tutorial then you'll be able to have a look and see how some of the points we have touched upon today relate to our design. Our design is styled in a similar way to Facebook whilst at the same time is still unique to our app. We have borrowed and followed Facebook's design principles so that our app has a native look and feel to Facebook. Some items that we have adopted for our app are:

The filter search bar: Inspired by Facebook's native search bar.

Paragraph text: Styled the same as Facebook. One of the most important factors in making it look native.

Page tabs: Although not exactly the same as Facebook's native tabs, they still evoke the feeling of Facebook's original page tabs.

Tab Headers: Our tab headers are styled the same as Facebook's.

Username and profile image: To continue with Facebook's focus on human interaction we've included this to make our blog app more personal.

Simple styling: We utilize the whitespace on the page effectively to give our text room to breathe and to carry Facebook's ideals of creating a blank canvas to encourage participation and honest transparent communication.

My Personal Study

At the beginning of 2011 I held three focus groups with regular Facebook users to find out about their using habits within Facebook. Some of the results surprised me, even though they were relevant for the application that I was involved in. It is important to understand that Facebook has an extremely large user base and you should not rely heavily on the information I gathered - you should conduct your own research for your own criteria and demographic.

The users who we interviewed all said that they spent at least 30 minutes to an hour on Facebook every single day. It surprised me that the majority of people wanted our app to look native to Facebook, and that every user said that they'd feel safer purchasing items from an app through Paypal than paying by credit card. So that might be something to bear in mind if you're planning on selling anything through your app.

Conclusion

Facebook's UI style and the psychology behind it is definitely something that should be admired. It is amongst the most successful websites of all time and part of the reason for this is due to them making the correct decisions when it comes to their design. Think about it, would Facebook be as successful if their canvas primary color was black? It's hard to judge just how much of their success is down to their UI decisions but I definitely think it deserves some credit towards its success.

By adopting and borrowing ideas from Facebook's simple yet effective design principles and incorporating them into your own app, I'm confident that your app stands the best possible chance of becoming a success.

In the next part of the tutorial we will be looking at how to code our blog app .PSD into HTML/CSS. So until then, happy designing peeps!