Exploring the Facebook Experience: A New Approach to Usability

There were a study made at the end of last year to understand Facebook success and popularity using traditional usability methods and user experiences. The study was performed by Jennefer Hart, Charlene Ridley, Faisal Taher, Corina Sas and Alan Dixand consisted on carrying  out  a Heuristic Evaluation  to assess how well Facebook complies with usability guidelines  and  by  conducting a user study to unveil unique user experiences.

The paper that resulted from the study can be obtained through the website of the Computer Department of the Lancaster University.

They took into account user experiences because traditional usability methods don’t consider the user’s ‘felt experience’ when interacting with social networking sites. But user experiences are something difficult to empirically measure due to the fact that they are personal judgments and opinions. However, it is something that is growing in importance as technology becomes far more ubiquitous and moves out of the office into the wider environment.

The study was done with 26 participants (16 female and 10 male) within the age of 18-44. It was a three stage study, being the first one the evaluation by experts of the participant’s Facebook pages using Nielsen’s 10 guidelines. The second stage consisted in interviews with the participants to uncover trends in the patterns of Facebook’s usage, as well as its perceived satisfaction. The last stage involved observation of participants’ interaction with their Facebook accounts, followed by in-depth interviews. Those interviews was performed to explore users’ experiences and to probe into their attitudes towards Facebook.

The usability evaluation revealed that Facebook only adhered to 2 of the 10 heuristics, while 4 were rated as having minor problems and the last four were rated as having major problems. The main problems were of consistency and standards, error prevention and recognition rather than recall.

The user study revealed that users would usually visited Facebook several times a day while doing some other activity (like visiting other websites). Afterwards they would periodically revisit Facebook, ‘hanging around’ in it instead of the traditional way of web surfing (get in, get it and get out). That fact further raised the question about   the  relevance  of  traditional measures  of  usability  such  as  task  completion  time  when designing and evaluating social web services.

To measure the user experiences it was built a self-reported experience scale consisting of the ten most prominent positive and negative aspects thought relevant for online social networking. The participants then used those aspects to tell how they felt in relation to Facebook main features. As expected, the features that were most often used by the participants were those that they felt created better experiences.

Two of the main aspects that were chosen were Curiosity and Enjoyment. This is due to the fact that Facebook takes advantage of curiosity by enticing users in to find out more about their friends through the numerous options on a profile page. That is done using several mechanisms like feeds, walls and applications, which has the consequence of clustering the user’s personal page. And even though that results in poor usability, the user is motivated enough to ignore the clustering.

Another key aspect that came out of the study was self expression, i.e. the fact that Facebook allows users to create of a personal profile. By having the chance of creating it and sharing with friends, they can express themselves and reflect their values. However, participants revealed they felt limited and confined in the creation process of their profile pages.

The data collected in the study also revealed that the majority of the participants described Facebook as easy or very easy to use. They also said that it allowed them to effectively communicate with friends. Another thing the researchers found out was that the Facebook applications that were personalized, yet simple, quick and reflected real life were preferred. One example of that are the applications that allow users to send gifts to their friends.

As a conclusion, the study showed that even though Facebook failed in traditional usability evaluation it excels in providing many positive user experiences for its vast community of members. Providing not only a great deal of social pleasure but also curiosity and a base for self expression.


3D SPACE: Using Depth and Movement for Selection Tasks

This paper is the result of a research made by Dr. Dale Patterson on how users utilize and interact with content in a 3D space. More specifically he presents two new three dimensional interface components (The Flow and Circulatory system) that use the depth provided by 3D computer graphics to present complex information in a natural three dimensional form for user interaction. Last but not least, Dr. Dale Patterson introduces the concept of “active 3D interfaces”, a new style of interface that presents its data to the user rather than statically waiting for the user to interact with it. The paper can be obtained through the ACM website.

Active Components
The concept behind the Active Components is to use the natural human understanding of 3D space and the motion of objects in that space. The key principles used in the conception of the components are the use of depth and of motion through depth. The use of depth is to facilitate the presentation of large sets of complex information in an easier to understand and more natural form. While the use of motion through depth is due to the fact that the world is alive with motion and activity, so makes it a key aspect in the presentation of data in a 3D space. In essence, active interfaces are not simply statically waiting for the user to interact but are actively presenting their information through the motion and animation of items in the 3D space.

Flow Component
The Flow Component represents a new interface (or interaction technique) designed for presenting large sets of unstructured data. An example of this kind of data would be the results obtained from a web search for a particular topic. The common approach used in modern GUI interfaces is to provide the user with a large two dimensional list of results, which then he has to manually scroll through to locate the desired item. The flow component looks at this data in a different way.  Rather than treating the result set as a static two dimensional item (in the form of a large textual page) that the user needs to  move through, the flow component looks at the result data as a  flow of three dimensional items. That is, have the results flow out at the user from the depths of the screen. The use of depth to display the set of items allows a larger set of items to be displayed at any one time than would be possible in any 2D arrangement. At the same time, the use of movement through 3D space over time is used to enable the set of items to flow past the user, allowing him to see all the items in detail as they pass by without having to make any interaction.

Circulatory System
The circulatory system interface/component represents an extension of the principles established by the Flow component. Unlike the Flow (which presents unstructured data sets) it presents a new method for the presentation of large structured sets of data (e.g. selecting or locating a movie from within a large collection or library of movies). Extending from the basic flow concept, the Circulatory System takes the idea of a flow and creates a flowing loop (much like the human circulatory system). The items would loop past the user showing all options over time, without the user needing to navigate through the structure. Of course that more complexity can be introduced by creating more complex forms of loops and sub loops, allowing the user to have some control in their ability to choose which branches to take.

Experimental Results
To establish the effectiveness of the new 3D components, Dr. Dale Patterson made a series of test to a group of 14 trial users. All the experiments consisted in the user completing a task with the relevant 3D component and also completing that same task with a number of other interface versions (i.e. some 2D systems, others simply variants of the primary 3D component). After the trials it was possible to conclude that 3D computer graphics demonstrate potential in a range of common interaction tasks, being in many cases more effective than current systems. The active interfaces proved particularly effective in tasks such as browsing large structured and unstructured sets. In simple terms the addition of motion (active interfaces) and depth (3D space) has demonstrated potential to be an effective method for improving the human computer interface in these common real world tasks.

Skeletal Animation for the Exploration of Graphs

This paper is the result of a research made by Damian Merrick and Tim Dwyer on the use of skeletal animation for the exploration of three-dimensional visualizations of graphs. This paper explores the possibility of a physical metaphor for navigation with a graph visualization. For that, they formulated and implemented three algorithms for performing skeletal animation in graph visualization systems, testing them with a group of users to determine the relative benefits and disadvantages. The paper can be downloaded from the following link.

Skeletal animation is a concept that has been implemented to provide the illusion of natural motion for computer-generated characters in films and computer games. And due to the fact that a skeleton is a structure that we, as humans, observe and manipulate constantly in the real world, this paper suggest that skeletal motion, simulated adequately, would be a natural and realistic physical metaphor. A physical metaphor allows users to relate the interaction mechanism with phenomena that occur in the real world, providing perceptual cues that will increase the intuitiveness of the visualization system.

The three algorithms formulated were: one based on a method called Cyclic Coordinate Descent(CCD), another based on the nonlinear optimization method, and the third a naïve dynamics-based implementation implemented as a natural extension to an existing 3D graph visualization system.

The approach taken by CCD is to solve a localized optimization problem at each bone in the articulated chain. At each step of the algorithm the bone in question is rotated (and with it all bones and joints below it in the chain) such that the distance between the end-effector (the last joint on the chain) and the desired position of the end-effector is minimized. This process starts from the bottom bone in the chain and works towards the top, then repeats over again, until the end-effector is within some threshold distance of its desired position.

After the tests, the CCD method is believed it to be the most intuitive and the most successful in maintaining the users mental maps over successive configurations of the skeleton. One significant flaw is that it is possible for error in positioning of end-effectors to accumulate, allowing bones to stretch a substantial distance from their original length.

The nonlinear programming method takes the approach of formulating the skeletal system as a set of model parameters, constraints and an objective function. These are passed on to a nonlinear optimization module, which attempts to produce a new set of model parameters that minimizes the objective function.

After the tests, the results from this method were rather discouraging, as the motion produced was jumpy and non-intuitive, compared with the smooth transitions of the other two algorithms. However, the nonlinear programming method did have the advantage of being able to keep bone lengths constant. This is due to the fact that these lengths need not be specified in the model parameters (and hence will not be changed).

The third algorithm explored a simple dynamics-based approach to providing a skeletal metaphor. That approach was implemented as an addition to the 3D graph visualization package Wilma, that makes use of a force directed algorithm for the layout of graphs, representing edges as springs connecting nodes.

After the tests, it was verified that this method still allowed a very large amount of stretch in bones. However it seemed to appeal to users as a reasonable technique for graph interaction and was reasonably intuitive. Smooth transitions were produced, due to the force-based layout, which aided retention of the mental map.

Animation: From Cartoons to the User Interface

This paper is in the vein of the last one I’ve presented here in the site, talking about principles of cartoon animation but this one show how they can be used in the design of user interfaces. Some of the principles present in the paper written by Lasseter are explained here and then given an example of the application of that principle in a user interface called Self. The paper was written by Bay-Wei Chang and David Ungar and can be obtained trough the Sun website.

Despite the differences between user interfaces and cartoons, interactive tools vs. passive entertainment, cartoons animation has characteristics that are very useful in the design of user interfaces. Using some aspects of cartoons animation allows the user to visualize the changes that are occurring in the interface when he executes an action, making it clear what’s happening. By applying the principles of animation the interface can provide visual clues necessary for the user to understand what is happening before, during and after the action. Those visual clues take off the burden that result from those interfaces that make so that the user has to use his deductive ability to interpret changes, instead of using animation to smoothly change and move the objects present in the interface.

Bringing that kind of animation to the user interface has both cognitive and affective benefits. By offloading interpretation of changes to the perceptual system, animation allows the user to continue thinking about the task domain, with no need to shift contexts to the interface domain. By eliminating sudden visual changes, animation lessens the chance that the user is surprised, thus reducing his uneasiness. So employing animation not only aids the user in understanding the events in the user interface, but also makes the user’s experience of the interface more pleasant and comfortable.

The use of cartoons animation instead of a strictly realistic animation is due to three essential characteristics of cartoons animation, its theatrical basis, the engagement of its illusion and the nature of its artistic medium. Cartoons are theatrical, so actions and reactions are exaggerated, situations are staged, and all of the energy of movement and depiction is calculated to best telegraph the animator’s point. User interfaces have the same need to communicate clearly and concisely, and theatricality can contribute to this goal. Second, cartoons are engaging, because they create an illusory world, but effectively absorb the audience into that world. User interfaces can benefit by becoming more engaging and therefore fully absorbing the user into its world, so that his attention may be devoted entirely to the task. Finally, user interface designers can as well draw upon the wealth of experience in the field of cartoon animation to achieve similar successes of communication, vibrancy, and illusion.

The techniques presented in this paper are widely applicable, and may have additional benefits in certain kinds of interfaces. In particular, collaborative applications stand to benefit greatly from the use of cartoons animation. Anticipation, slow in and slow out, motion blur, and follow through can be used to more fully and more gently inform the user about remotely initiated actions.

The animation doesn’t have to be slow, or distracting, or silly; on the contrary, with careful tuning, cartoon animation can turn the user interface into an understandable, engaging, and pleasurable experience.

Principles of traditional animation applied to 3D computer animation

As the title of this post reveals, I’m going to present a paper about principles of animation that should be applied to 3D computer animation and that are useful in the design of 3D interfaces. The paper was written by John Lasseter, the Chief Creative Officer at Pixar and Walt Disney Animation Studios, and can be downloaded through the ACM website.

John Lasseter gives an historic overview over the the 11 principles of traditional animation defined by the Walt Dísney Studio and then gives an explanation of each one of the principles, relating them to the field of 3D computer animation. Next is a summary on some of the principles presented in the paper:

Squash and StretchDefining the rigidity and mass of an object by distorting its shape during an action
This is the most important principle and says that when an object is moved the movement emphasizes any rigidity in the object. The squash position represents when an object is flattened by an external force or when the object is constricted by its own power. The stretched position will show the same form in a much extended condition.  One important rule about squash and stretch is that the volume of the object has to remain constant during the movement or else the object would look as it had shrink or grown during the process. This principle defines the rigidity of the material that compose the object, i.e. depending on the level of stretch and squash the object would look as is made of different materials.

TimingSpacing actions to define the weight and size of objects and the personality of characters
It represents the speed of an action, giving meaning to the movement and defining how well the idea behind the action will read to an audience. It also reflects the weight and size of the object, as well emotional meaning. It’s important when defining the timing of a scene, to make sure that the audience is capable of reading and understanding the meaning of it as fast as is being shown. Another aspect related to timing is the weight of the objects. A heavy object will have a slower acceleration and deceleration than a light object, and will take a bigger force to change is motion. Timing can also give a feeling of size and scale to an object, by making a huge object with enormous mass to move slowly and a   small object with a small mass to move quickly. Last but not least, timing can show the emotional state of the object by varying the speed of his movements, indicating whether the character is lethargic, excited, nervous or relaxed.

AnticipationThe preparation for an action
Anticipation is used to catch the audience’s eye and to prepare them for what the next movement will be before it happens. The amount of anticipation used considerably affects the speed of the action which follows it. If the audience expects something to happen, then it can be much faster without losing them. This principle is also used to direct the attention of the audience to the right part of the screen and at the right moment, preventing the audience from missing some vital action. Anticipation can also emphasize heavy weight, as for a character picking up an object that is very heavy. An exaggerated anticipation, like bending way down before picking up the object, helps the momentum of the character to lift the heavy weight.

StagingPresenting an idea so that it is unmistakably clear
Staging is the presentation of an idea so it is completely and unmistakably clear, whether it’s an action, a personality, an expression or a mood. To stage an idea clearly, the audience’s eye must be led to exactly where it needs to be at the right moment, so that they will not miss the idea. That is accomplished trough staging, anticipation and timing. One important aspect, when staging an action, is that only one idea should be seen by the audience at a time. Due to that the object of interest should contrast from the rest of the scene, preventing the user of overlooking the idea being transmitted when there is a lot of action happening at once.

A Graphics Toolkit Based on Differential Constraints

This paper is in the vein of the last one I posted, talking about a graphical toolkit called Bramble that also uses constraints. The author of the paper is Michael Gleicher and he outlines the main characteristics of Bramble, showing also what set it apart from other existing graphic toolkits of that time.  Being the big differences the fact that it uses a differential approach and the fact that it allows non-linear constraints, such as distance and orientation, in addition to simple connections. The paper can be obtained through the following link:


Bramble uses a differential approach, in which constraint techniques are used to support direct manipulation i.e. interactions where objects move with continuous motion that are coupled to the user’s actions, such as dragging.

The differential approach used in Bramble aims to provide more flexible methods for the manipulation of graphical objects by permitting constraints and controls on aspects of objects, rather than just directly on their parameters, and permitting these constraints and controls to be combined. Allowing graphical objects to provide the positions of points as outputs without knowing what will be connected, and interaction techniques that can be defined in terms of point positions, without knowing what types of objects these points come from.

The differential approach also permits users to control how combinations of aspects evolve over time, being that aspects can either be driven towards a particular value, or forced to follow a moving target. Those basic differential interactors serve as building blocks for interaction techniques. More complex differential interactors are created by rules which switch a basic interactor on and off as needed. The range of interaction techniques results not from extending this set, but rather from the aspects to which they are applied and how they are switched on and off.

A User Interface Toolkit Based on Graphical Objects and Constraints

This is a paper from Pedro A. Szekely and Brad A. Myers that describes a user interface toolkit called Coral (Constraint-based Object-oriented Relations And Language). Coral uses constraints to manage the relationships between the graphical objects on the screen and the application data structures that they represent. The input from the mouse and keyboard is also not handled by the graphical objects themselves, but by special input handling objects called interactors. This paper can be obtained through the ACM site, in the following link:


Even though the paper is centered in Coral, it gives some insights for the construction of interfaces in which it’s whether recommend or required the use of constraints to obtain a good software product.

  • The use of a hierarchy of graphical objects facilitates the creation of new classes of objects, because the new graphical objects can inherit the complex mechanisms already implemented or override it to their specific needs.
  • Another aspect is defining constraints that can be applied to list of graphical objects and making them reusable so that different sets of constraints can be applied to different instances of the same class.
  • Last but not least, the fact that Coral uses mechanisms call Active Values (data values plus a list of objects and procedures that depend on that value) to provide a clean separation between the user interface and rest of the application. This is a very important aspect in the developing of applications, because allows the application and the interface to evolve without having the burdens that would come with the tact that they were tied to each other.