Application protoypes

After a long hiatus on this blog of new posts, I got links for the two views that will be on the finale version of my application, named Social Circles. The two views can be used by login in Facebook and then going to this links:

First View:
Second View:


Some links…

The Blogroll was updated with links to blogs and sites that I’ve been following for some time now. The blogs added are from the core team of Papervision3D (Carlos Ulloa, John Grden,  Ralph Hauwert, Tim Knip & Andy Zupko) and from some elements of the the commiter team, namely Seb-Lee Delisle, John Lindquist & Mark Barcinski. In addition I’ve included sites with examples and/or tutorials of Papervison3D, which also provides great resources and inspiration.

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.

For the first post of 2009, I have some videos to show. The first video is about a new 3D interface for the desktop environment that tries to mimic and enhance the real world work spaces.

The second video is about a system that allows users to visualize social networks, namely the relationships between the users of networks. With that they can explore that network, seeing the information of it’s users and the groups that exist inside the network.

The last video is about a new calendar interface, that was built in the Human Computer Interaction Lab of the University of Maryland.

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.