POST April 12th, 2007 Why Circle of Friends Works in Social NetworkingThe most popular paradigm for social networking sites is the “circle of friends” paradigm. This is when you connect to people by adding them as a friend, and your connection means that they are prioritized differently than those who are not. There are other paradigms, too. Wikipediamentionsa couple others including “Old Boys Network” (classmates.com) and “Circle of Trust” (epinions).
Although organizing around friends seems like an obvious way to do things, it wasn’t obvious at first and in some cases is still not obvious. Though much of how we think about our own lives is in terms of friends, its still another step to build software that recognizes this and leverages it to make social interaction work. One of the first to do this wasPlanetAll, sold to Amazon in 1998, and was the foundation of the Friends feature there. Up until then many networking sites had tried to connect people who didn’t already know each other…instead of leveraging people who were already friends. Duh, right? Well…hindsight is 20/20…
A great example of this difference is explained in this article aboutFriendsterfounder Jonathan Abrams.What I Learned from Friendster. He explains that what makes his new startup,Socializer, different from other event sites likeeviteis that you can connect to people in a circle-of-friends fashion. In other words, your event information is prioritized differently according to who your friends are. Their events will show up on your calendar and vice-versa. In some cases (like the professional arena) a circle-of-friends paradigm isn’t going to work. At that point a contacts-based paradigm will be more appropriate. It’s not hard to see how we can map our real life to software, but it does take a certain amount of suspension of disbelief. We have to believe that the system is modeling how things really are, and so using appropriate relationship words helps designers achieve that.
In terms of social networking, however, everyone, at all points in their life, can describe themselves in terms of their friends and organizing information in that way makes perfect sense. That’s why circle-of-friends systems are so prevalent. It works because it is the primary way that we view our social lives. Another reason why they say you can get a good sense of someone by looking at their friends. If you enjoyed reading this, subscribe to my RSS Feed(you can always unsubscribe later)
WHAT IS SOCIAL DESIGN? Social designis a subset of design that focuses on the social lives of users. It deals with the activities, behaviors, and motivations of people who work and play together through software interfaces. In the early days of the Web, most sites were read-only, focused on providing information to a single person at a time. Then the Web became read/write, allowing people to save information but still mostly for them acting alone. Now, we're seeing a tremendous amount of social software that allows many people to collaborate and share what they're doing with others. Designing for this social world is
social design, and that's what we're talking about here at Bokardo.
I've found that if you don't put your cursor exactly on the intersection of pixels in photoshop (e.g. so that zoomed in you see 1.00 and 9.00 in the info palette) then you can run into issues with the edges of the rounded rectangles. That said, you absolutely can get perfectly smooth rounded corners using the rounded corners shape with the extra added benefit of it not taking 5 steps ;-)
Here's a list of ten additional design elements that will increase the usability of virtually all sites:
Place your name and logo on every page and make the logo a link to the home page (except on the home page itself, where the logo should not be a link: never have a link that points right back to the current page).
Provide search if the site has more than 100 pages.
Write straightforward and simple headlines and page titles that clearly explain what the page is about and that will make sense when read out-of-context in a search engine results listing.
Structure the page to facilitate scanning and help users ignore large chunks of the page in a single glance: for example, use grouping and subheadings to break a long list into several smaller units.
Instead of cramming everything about a product or topic into a single, infinite page, use hypertext to structure the content space into a starting page that provides an overview and several secondary pages that each focus on a specific topic. The goal is to allow users to avoid wasting time on those subtopics that don't concern them.
Use product photos, but avoid cluttered and bloated product family pages with lots of photos. Instead have a small photo on each of the individual product pages and link the photo to one or more bigger ones that show as much detail as users need. This varies depending on type of product. Some products may even need zoomable or rotatable photos, but reserve all such advanced features for the secondary pages. The primary product page must be fast and should be limited to a thumbnail shot.
Use relevance-enhanced image reduction when preparing small photos and images: instead of simply resizing the original image to a tiny and unreadable thumbnail, zoom in on the most relevant detail and use a combination of cropping and resizing.
Use link titles to provide users with a preview of where each link will take them, before they have clicked on it.
Ensure that all important pages
Web Scraping is essentially reverse engineering of HTML pages. It can also be thought of as parsing out chunks of information from a page. Web pages are coded in HTML, which uses a tree-like structure to represent the information. The actual data is mingled with layout and rendering information and is not readily available to a computer. Scrapers are the programs that know how to get the data back from a given HTML page. They work by learning the details of the particular markup and figuring out where the actual data is. For example, in the illustration below the scraper extracts URLs from the del.icio.us page. By applying such a scraper, it is possible to discover what URLs are tagged with any given tag.
While this may not be the most ideal solution out there, it certainly expands upon the examples listed above. I absolutely loved Gina's idea, which is why I attempted to expand on it. Unfortunately, with the current limitations of CSS (as well as certain browsers), I wasn't able to fully replicate the exact functionality of Gina's example.
A simple multi level drop down menu which uses only CSS for most browsers and minimalist JavaScript with CSS for browsers that require an extra hand. A menu color generator helps you style the menu for your site.
- Here’s a fairly typical vertical bar graph showing a hypothetical set of quarterly data for, say, invoice and collection totals. The difference here is that the whole thing is a simple set of nested lists and CSS. Really.
This tutorial is written for the users that are new to Flash but aren't afraid to learn some new things. You will learn everything you will need to setup your first Full Macromedia Flash Web site, and not just some static looking HTML like page. I want to show all of you that you don't have to be some wizzard to get some nice things going in Flash.