Social Network UX UI IA Information Architecture Design Structure Style Guide Lines

Send to Kindle

Via SMO Social Media Marketing and Internet PR Firm

We’ve built a lot of social and quasi social network sites. We’ve built components for large sites. And we’ve built entire sites that have gone big. And these are the common factors or general guide lines for understanding the information architecture of a social network website. See: iPhone and Android App Programming Process Best Practices

While your website can look as different as Quora vs Pinterest. You’ll see that they both follow the exact same principles. Only the visual CSS Design elements are different. By stripping away the superficial differences, we’re left with the foundation skeleton of what today’s HTML 5, CSS, C++, PHP, and Ruby languages can do coupled with server side database driven content.

Basically, what this means is that the examples below will show you what can and cannot be done today.
dcdc 4. qzqz qzqz temp-2012-09-24/wDEJcJBFekEjmjxIfdoyitqAeCgsBstsctnhkmzvjCwtbvipGargvmGmuBxy/goog1.png.scaled1000.png”> qiqi 2. qzqz qzqz temp-2012-09-24/wDEJcJBFekEjmjxIfdoyitqAeCgsBstsctnhkmzvjCwtbvipGargvmGmuBxy/goog1.png.scaled500.png” alt=”Goog1″ width=”500″ height=”337″ />

Google Blue: While the main column pulls it’s data feed from the primary content database, the BLUE circle shows extremely brief one word summaries of trending topics and when showing “WHO YOU MIGHT LIKE” which also pulls profile images, which demand heavy server labor, only 3 icons are shown. Then, interactivity is also enabled in the FOLLOW buttons but since that calls for even more server load, this is also limited to 3 buttons.
Google Red: The far right column puts the most load on the server. It requires real-time data that must be processed in the background and pulls a list of over a dozen other users from a totally different database than the main column. If you go to this page on your own, do a refresh. You’ll notice that the moment you do a refresh, the right column is the first to disappear and the last to fully populate.

dcdc 7. qzqz qzqz temp-2012-09-24/jbuHjbugAiusEantotJAklpFewFnDmhoyrvtyubJAqbidteaJzvgrClGAjwH/digg1.png.scaled1000.png”> qiqi 2. qzqz qzqz temp-2012-09-24/jbuHjbugAiusEantotJAklpFewFnDmhoyrvtyubJAqbidteaJzvgrClGAjwH/digg1.png.scaled500.png” alt=”Digg1″ width=”500″ height=”337″ />

Digg’s new home page makes it easy on themselves. They only show one data stream. Content. While the content is pulled from two main data sources, text and photos, they resist showing any other columns of other data that pull from other databases such as MOST POPULAR USER or RECENTLY SUBMITTED HEADLINES.
  zxzx3. qzqz qzqz temp-2012-09-24/uszcmjIEopArItIltuAhzEnfAFcjoIDelJmepivzeqpwdFFJzDutBgzbDDEC/goog2.png.scaled1000.png”> qiqi 9. qzqz qzqz temp-2012-09-24/uszcmjIEopArItIltuAhzEnfAFcjoIDelJmepivzeqpwdFFJzDutBgzbDDEC/goog2.png.scaled500.png” alt=”Goog2″ width=”500″ height=”337″ />
In Google+ Circles, the user has the ability to drag and drop. This is not a standard database or CSS or HTML5 feature. This functionality basically requires that you build an app developer in San Diego inside your website that conforms to Google (via Google seo company) Chrome’s OS API. This might require Java, AJAX or C++ to build depending on your environment, data, and requirements. This generally requires a totally different programming team than the team that builds your website or database.
qiqi 2. qzqz qzqz temp-2012-09-24/swefomsjlfIwAhoiCbplHfhDIJqyJvdeqJvdEucrjbcjqhoiafGIlIpwAirG/pinterest1.png.scaled500.png” alt=”Pinterest1″ width=”500″ height=”337″ />
Pinterest Red: Pinterest shows even more restraint than Google+ but less than Digg. Pinterest shows only 4 data points from the RECENT ACTIVITY database while the entire page is wallpapered with content from the main content database.
qiqi 7. qzqz qzqz temp-2012-09-24/GapmjdHuebeBzFmGqAkgutucnfGhCrkbgsjzxoiHAAjzxzpxodxuuwmdIqAn/pinterest2.png.scaled500.png” alt=”Pinterest2″ width=”500″ height=”337″ />
Pinterest Red: When you’re in a Pinterest user’s profile page, Pinterest pulls simple user bio text from the PROFILE DATABASE.
Pinterest Blue: Only shows names and tiny smaller than thumbnail size photos.
Pinterest Green: To tab over to other data feeds, summary data is shown. No actual content data is shown to conserve database and server load.
  zxzx9. qzqz qzqz temp-2012-09-24/mtjoefpbDEcIdakzGqxmxrudqAJqmatdleEcpmnFEpnCuAJyrnwAavjDBrcE/quora1.png.scaled1000.png”> qiqi 2. qzqz qzqz temp-2012-09-24/mtjoefpbDEcIdakzGqxmxrudqAJqmatdleEcpmnFEpnCuAJyrnwAavjDBrcE/quora1.png.scaled500.png” alt=”Quora1″ width=”500″ height=”337″ />
After Google+, Quora is the next most unrestrained. Quora’s main feed page pulls from
a. main content database
b. activity database (notifications, Inbox, etc)
c. trending topics
d. invite people (reconciled then pulled from your gmail or Twitter (via social media optimization smo) contacts)
But again, they are not pulling any actual content. Examples of actual content would be the first 100 characters of your most recent 10 inbox messages or summaries of the TRENDING TOPICS.

dcdc 2. qzqz qzqz temp-2012-09-24/ltpBblrrxfuxjlvdiJtIjugfiJfAmGpIyumDEanvDHFtpFigGCrFkbundhJm/quora2.png.scaled1000.png”> qiqi 5. qzqz qzqz temp-2012-09-24/ltpBblrrxfuxjlvdiJtIjugfiJfAmGpIyumDEanvDHFtpFigGCrFkbundhJm/quora2.png.scaled500.png” alt=”Quora2″ width=”500″ height=”337″ />