This page describes a typical HCI approach to a problem using real-world factors like time-management, enterprise politics and client demands/choices. Therefore, some decisions did not come from data (like they should), but rather from other pressing factors.

Most of the material about this project is displayed below but you can always read more here: http://pandere.m-iti.org/

Problem

With the arrival and spread of social networks comes benefits and challenges for both individuals and businesses.  While businesses have been able to take advantage of social networks to improve their visibility, marketing efforts, and customer support, they also have had to tackle the difficulty of reacting to and managing negative publicity that disseminates extremely quickly, and is difficult to react to and control.

We were tasked with tackling the challenge of social networks for technology companies like Collab. We focused on three main factors.

1. Explore how companies should expose themselves on social networks.
2. Tackle the challenges of social networks for companies.
3. Create new ways that companies can listen to and engage on social networks.

In response to this we focused on this defined goal:

Research

The team carefully selected a subset of methods that we felt would produce the most fruitful findings after immersing ourselves in data around social network users and contact center agents. These are displayed in the following image along with the amount of time we dedicated to each.

Insights

At the close of our research phase, we identified three key insights that would direct our ideation and design.

The experiences consumers have with products and services fall along a continuum, from first-hand experience to no experience at all. The closer in experience the consumer is to the product or service, the more confidently they can make decisions. Therefore, it is critical for businesses to deliver consistently good customer experiences. Only after businesses achieve this can they take full advantage of social media’s potential as a hub for company praise and community building.

Consumers ground their purchasing decisions using the opinions and knowledge of people they trust. This network of trust is derived from friends, peers, and strangers who have expertise and/or similar lifestyles as the consumers themselves. Pandere discovered a pattern when observing consumers and their purchasing process.

Consumers heavily weigh their first-hand experiences when making purchasing decisions. However, when a consumer is new to a product or has insufficient knowledge or experience with it, buyers turn to the opinions of those they trust, namely friends, peers, and strangers with expertise and similar lifestyles to themselves.
Moreover, everyone has their own needs, desires, and criteria for what makes a satisfying trade or interaction. Individual criteria is open for negotiation and compromise, and businesses can better cater to customers and promote a community around their business by knowing and responding to it.

Boiling down, the three insights are:

1. Experience drives consumer opinion and buying behavior
2. Consumers trust people like themselves and especially those who have more expertise
3. Personal touches build relationships and create community around a brand

Personas

As the first stage of analyzing our research phase, we created three user personas to represent the major personalities present within social media: Lígia Teixeira, a deal-seeker and lurker who represents a majority of the online population; Tiago Matos, an expert who enjoys helping others by producing online content; and Kurt and Grace Bedford, critics who frequently voice their opinion within social media.

Our solution supports the relationship between the “Lígias” and the “Tiagos” of our worlds, namely those individuals in our networks that we personally know and trust their knowledge for having expertise with product or brand in mind. Our application leverages the use of Facebook contacts to enable users to actively assist and collaborate with friends to make better informed purchasing decisions.

Values in Social Media

In our research phase we identified three phases in social media involvement: Participation, Anticipation, and Reflection. These represent the stages in which consumers consider connecting with a business, actively choose a particular brand, and look back on the experience and service that they received. In each of these phases, consumers value several things, chief among them being connectedness, trust, expertise, privacy, and consistency. To succeed in social media, businesses must respond to each of these values in the appropriate phase of their relationships with their customers.

Ideation and Concept Testing

Our first ideation session was conducted at the end of our research phase together with our clients. We divided the Pandere team into three teams of two, and each team ideated together with our clients using one of our three user personas to ground the session (refer to Research section). We developed over 30 ideas during this ideation session. Afterwards, we reviewed the concepts, and filtered them according to uniqueness, relevance to the user, relevance to the client, and feasibility.

At the start of our design phase, we reviewed the ideas that we had generated, which mainly fell into two categories, based on the three phases of Anticipation, Participation, and Reflection that they corresponded to. After grouping the ideas into these categories, we had two further ideation sessions to try and explore the problem space more.

After several rounds of ideation, we eventually consolidated our strongest ideas into two main concepts. The first concept we named RetailDetail. This is a social service for browsing products while finding and collecting information and research on them, while allowing users to reach out to expert friends and company representatives for more information and help with their research and decision process. It focuses most on users in the Anticipation phase of social media engagement. The second concept we called the Personal Assistant. This application allows users to either interact with specific favorite customer service agents to solve a problem, or to reach out across many available agents to get answers to their questions and accomplish tasks. It aims to serve users in the Participation and Reflection phases of social media engagement.

Iterative User-Centered Design

In order to design a solution that would address the needs and wants of users, we first turned to the users themselves for inspiration and guidance. We incorporated an iterative design strategy that allowed us to quickly adjust and improve core attributes of our product to reflect the needs and reactions of users. As we began this phase, we focused less on the look and feel of our design, and more on the accuracy and usefulness of the concept itself.

We first quickly created low fidelity mockups and sketches of our concept, and conducted user tests to validate the concepts. Next we refined the concepts based on the feedback we received and retested the updated product through another round of testing. As a result, our product became more well defined with each successive iteration. In addition, the core elements to the design became more solidified, which allowed us to focus on producing higher fidelity mockups, first in Balsamiq, then in Photoshop.

As the product matured, we were able to incorporate user feedback directly into the design using iterative user testing, a fundamental part of our design and prototyping process since it allowed us to receive continuous feedback from actual users that could be immediately incorporated into the prototype. Our project was divided into three major iterations with two rounds of testing each for the first two iterations and one round of testing for the final iteration.

Some of the evaluation methods we used included contextual task analysis to understand the natural workflow of users’ product research strategies; participatory design sessions and speed dating to inspire how workspaces would be organized; think-aloud user testing to observe what users felt and thought as they completed tasks on our low-fidelity paper prototypes; and heuristic evaluation to gain expert opinions on our interface.

Testing and Refining the User Interface

The wireframe used for Iteration 1 User Testing to explore what content users prefer to place in a workspace and how they preferred to organize it.

In Iteration 2, we situated the application within Facebook’s interface. As a result, we were faced with working with less screen real estate and therefore we tucked certain features into a sliding drawer panel on the left, which would include Search, Friends, and Company Directory.

Moving into Iteration 3 meant producing hi-fidelity screens and experimenting with various workspace “skins.” Our team decided to go with a sleek look and feel.

As we reached our final round of prototyping and refining our design, we eventually narrowed down to focus on the development of the graphics and their placement within the interface. Finally, we were able to construct a working prototype of the RetailDetail system that lives within Facebook.

Solution

The program gathers all unique words in the given text and does three things

1. Orders them lexicographically. The columns are ordered by the first letter and the rest by the remaining letters in each word
2. Identifies each word and tries to bucket it into one of four categories: Noun, Verb, Adjective, Other. There is also not found for those that can be identified (like typos or other strange words).

It is made in FLEX running on AIR. Unfortunately, I can’t release the software. But I can show you a screen cap

It has two light sensors in the front. It compares the light values and instructs the motors to head to the side where there is the most light. If they are very similar, the robot just moves forward.

What is snackbot?

From www.snackbot.org

Snackbot is a mobile robot, about the size of a very small human, that rolls around on wheels, and will be delivering snacks to students, faculty, and office workers at Carnegie Mellon University. A Snackbot research team of faculty, graduate students, and undergraduates from more than three departments at Carnegie Mellon created Snackbot as a platform for studying human-robot interaction in the real world.

Snackbot is meant as an ongoing platform for research. The Snackbot will support research into robust autonomous operation in office environments. Our efforts range from multi-sensor fusion algorithms for perception, reasoning about dynamic spaces,communicating with people through verbal and non-verbal mechanisms, and planning with incomplete information.

In order for the snackbot to be used as a research platform or even just to deliver cookies, it needs humans to program it’s behaviour. This way, the software developers created three interfaces for researchers to create head animations, mouth animations and dialog trees. All of these interface’s outputs were stackable. For instance, a mouth animation would be created and saved. This file would be fed into the head animation GUI so that it is merged with it. This file was then saved to a single file that would be finally fed into the dialog tree GUI.

The task

Our task was to design a software workflow that assists researchers create human-like expressions and animations for Snackbot. The proposed workflow will improve the productivity and efficiency of researchers creating animations and expressions for Snackbot.

Gathering data

Before we started to gather data, we needed a focus. To do this the team brainstormed ideas, issues and themes related to the project. This list was organized into an affinity diagram to structure the data into chunks. This process allowed us to share our knowledge with each other and have a group understanding of what the project is about and what we should focus on.

Using the affinity diagram, we made a focus setting meeting to define our focie. We came up with two.

1. Human-Robot Interaction – Finding out how researchers run experiments with Snackbot.  Since the users will be using the robot for reaseach of human robot interaction it makes sense to understand that part of their work.

2. Interface – Discussing the elements missing on the current interface and finding the most natural way to script animation on the robot. Again with the intent of supporting the researchers since they will need to animate the robot, ideally without any help from the technical people.

From these two focie we conducted contextual inquiries on experts in Animation and current researchers of snackbot. The Animators were students from ETC that showed us how 3D software was used to programe a sequence of movements and actions. The researchers showed us their whole process and methods to create a snackbot script.

Modeling

We consolidated all of this information into work, cultural, sequence and artifact models. The consolidation of our findings from the researchers was separated from the animations because of their radically different domains and focuses.

We noticed instances of role strain and role sharing among the Snackbot researchers. The GUI programmer often collaborated closely with the animator and compiler, and in some situations performed all three roles. Multiple people generated Snackbot expressions and all of these would be sent to a single person who would combine and input the assets into Snackbot.

Using the cultural model we understood the amount of pressure presented to the Research Assistants (RAs). Most of them are appeals for a better tool that is user friendly, does not force the user to remember software constraints and provides accurate feedback from the robot.

The sequence models gave us critical information about the process that the researchers undertake in order to create a snackbot script. Clearly, the digital creation of the script presented major problems.

From the Animations at ETC we learned much concerning the software for animation. We were particularly interested in the notion of timeline and how the experts use it to create and preview animations. We took these timelines as artifacts for our reference.

Design Ideas

All of this information was good fuel to create new designs.  To captivate the groups imagination had another brainstorm session to organize our design ideas and start envision.

Five categories were predominant in our affinity diagram: Human-Like Robot Behavior, Colaboration and Reuse, Feedback, Robot Restaints and a single unified tool.

Making Snackbot more human-like.

One fact we observed was the desire by both researchers and faculty to make Snackbot more human-like. Future versions of the Snackbot animation application should make it easier for users to create human-like expressions and head movements.

Affording feedback.

We noticed in our contextual interviews the unresponsiveness of the current Snackbot animation interface and its inability to effectively convey important aspects of the Snackbot animation workflow to the user. The Snackbot animation application should show the most important features forefront in the interface and provide responsive feedback for all interactors in the interface.

Indicating Snackbot constraints.

Our interviews with the Snackbot researchers showed that there were many hardware constraints with Snackbot, causing limitations on the expressions possible with Snackbot. Many of these limitations were initially unknown to the researchers and were discovered through experience. To prevent a repeat of this situation, the interface should warn users of expressions that may be impossible to perform with the current Snackbot hardware.

Supporting collaboration and reuse.

Our research has also shown that different people collaborate in overlapping areas of the Snackbot research. Additionally, many of the research assistants are Carnegie Mellon undergraduates who only can commit several years of work to the Snackbot project. As a result, the interface should make it easy for users to collaborate on a Snackbot project, and facilitate reuse of expressions and assets that have been previously created.

Merging interfaces

We have also observed that the researchers begin their work by first creating a script. The animations and expressions will then be tailored to specific points in the script to express an emotion. Due to this tightly integrated process, it would be unnatural to separate the work into different interfaces as it is currently being done. The new design should integrate and support this mode of work by building the assets from the script and integrating the script, mouth expression and head animation into one.

Prototyping and Testing

With those design ideas in mind we fashioned a prototype. Our first iteration consisted of an interface with two parts. The  dialog creation part and a “zoomed” view for each dialog for speech, mouth expression and head movement defenitions.

We then conducted think aloud usability studies on 4 novice users with no prior experience with animation software. The usability studies were conducted with paper prototypes using “wizard of oz” manipulation of the prototype, following Think Aloud principles. The users are asked to perform 2 simple tasks:

1. Create two nodes and connect them with a transition with a simple speech as the transition type.

2. Go to the editor. Create smile and pan animations from the presets library and modify one of the frames.

Most of the users are able to complete the tasks successfully. Some usability issues with the prototype are identified through the study:

• Users are unable to identify the functionalities of some buttons based on the icons alone. The grouping of unrelated functionality of the buttons confused some users.

• The prototype uses some ambiguous phrases in the interface that the user is unable to understand.

• Some of the interface interactions use drag and drop which is not easily discoverable by users. The mental model in the interface is not consistent as some parts use button clicks and others drag and drop.

• Some of the users are not aware of the concept of key frames and how to manipulate them.

Final Prototype

Here are some screens of the prototype and a video explaining how it should work.

The team

Angela Park www.angelaepark.com	Chong-Han Chua www.5threvision.com
Honray Lin	Clifton Lin
Paulo Coelho www.paulojtcoelho.com	Dr. Paul Rybski Faculty Sponsor http://www.cs.cmu.edu/~prybski/

Parents face a problem when kids leave their houses. One of which is decluttering. Part of this problem is knowing what the child wants to keep or not.

The orbanizer consists on an orb with a screen in the back that  supports parents and their children with the decluttering process. On the opposing side of the screen (the orb’s top) there is a camera.

Both the parents and the children have an orb. When the parents wants to declutter they use the orb to take pictures of objects and make an initial decision about that objects destiny.  By default there are three options: Throw away, give away and put way.

When the parent finishes the tagging process these are sent to the child orb that starts glowing. The child can then agree or disagree with the parent decision. These decisions are then sent to the parents that now know exactly what they should do with those items.

This project was an assignment for the Methods course at CMU.

The objective for this project was to create a device that could print graphical elements into a surface that had the ability to erase itself.

To do this, I explored the potential of a photochomatic ink. This special kind of ink, also found in sun glasses, has the ability to change color when exposed to UV light. In my case, it is blue when UV light is present, and while when it is not. The speed at which the effect dissipates depends on the color. Mine is blue and it fades away in about 2 or 3 seconds.

In order to print on this surface, a scanner was used because of its sliding arm. It allowed me to replace the regular light with a strip of 32 UV LEDs. These in conjucton with the sliding arm allow the scanner to print a 32×40 pixel image in an area of about 16 square inches. This is very low resolution but it is perfect for a prof of concept.

What i used to built it

The circuit

The surface

The UV reactive surfaces were created by spreading the UV reactive power on adherent film. This film is stiky on one side and not on the other. This allowed me to cover the adheret side of two films and them glue them together so that the adherent part faces the middle. This traps all of the power inside.

This ink can be found here: http://www.solarcolordust.com/

How it works

A processing program was created so that images could be captured using the computer’s webcam. Doing it this way avoids the extra work of creating a system for the arduino to capture the image, process it and save it.

All the image process is done by the computer. It captures the image, converts it to a 32×40 pixel image, then converts every pixel to black and white and only then sends them to the arduino using serial.

The arduino receives these values and interprets them as white, gray and black. These correspond to the three levels of the UV LEDs: no power, half power, full power. The reason why this was made this way was because the UV paper fades away too fast. If the whole scale was used it would disappear before we could perceive it.

To test if the concept was working I created two cards with high contrast images drawn on them. One with a smile =) and another with a uppercase F.

It is very hard to capture this with a camera but if the camera is set for long exposures, you get something like this image.

Demo of it working

Vision

This technology could be improved to create a new kind of paper. If the ink lasted a day and the printing resolution was much much higher, people could print their newspapers using this kind of technology, reusing always the same sheet.

It is true that devices like the kindle already are able to produce similar results with their E-Ink display. However, this alternative opens the possibility to have something just like paper–very thin and very light–that can be used over and over.

Codes

Arduino Code

Processing Code

Some Images

In order to study the performance of capacitive sensing I created a Nintendo Entertainment System (NES) style of controller. It performs just like an NES controller but uses capacitive sensing pads instead of buttons. In order for it to interface with the computer I used a keyboard interface. However, since the system is modular it can be swapped for a real NES controller or any other input.

This would allow me to test the repetition of strokes of capacitive sensing pads while the users were having fun playing a game. It was developed as part of the research for my final thesis for my Master in Computer Science.

I encountered many obstacles like this on my project for my Master in CS (I’ll blog about this project in a few months).So I searched many sources and asked many opinions… I chewed it all up and came to a process that works for me. This does not mean it’s the best but, it’s the best for my needs.

The PCB Design

I use EAGLE as my primary source for drawing PCB boards. Being myself and HCIer I can tell that this software is NOT usable at all from that standpoint. However, it does it’s job very well.

I designed this in eagle to be printed into a PCB:

I will not go over the details on how to do this in EAGLE because it’s a whole new topic.

Getting it into the paper

So the main idea is to transfer that circuit into our PCB. Unfortunately we can’t really use PCBs in printers as they are stiff. However, what we can do is print into a special paper that allows us to transfer our design from the paper to the PCB.

I have used many kinds of paper depending on the availability. The ones that work are the glossy ones (non porous). In this example I am using regular magazine paper that I have cut to fit in a printer.

To print it you MUST use a laser printer. It should look like something like this:

It does not really matter if you do it over type or images in the magazine. What is happening is that the toner from the laser printer is sitting on top of the glossy layer of the paper. This is important for the next step.

The transfer

Now that the design is in the paper you need to transfer it to the PCB board to act as a shield for the acid. The way this process works is by using heat to melt the toner and make it stick to the copper in the board.

I start by cleaning the copper. It has to be clean because otherwise the transfer will not happen. No grease, no oxidation, no fingerprints. I clean it with acetone.

After that I cut the paper so that the design is in one of the corners. This makes it easier to align the board to the paper.

Now that your board is aligned under the circuit that is clean, apply heat to it with an iron. It is crucial that the paper is firmly secure. If it is not it can move and smudge the design as you move it. Remember that the toner melts and for a few moments it actually has the consistence of jello.

Use the tip of the iron to make sure you are going over everything. Don’t be afraid to apply pressure but start slowly and move towards pressure.

I generally know its done when I can clearly see the pattern on top of the paper. However, this varies with the paper and sometimes this does not work.

If you apply to less pressure&heat the toner does not melt and does not transfer. Too much heat will melt it so much that will start smudging itself.

Let it cool down for a little bit and then use a knife to separate it from the rest of the paper. Drop it into cold water and let it sit for a minute or 2 to soak the paper.

The soaking is what allows for the paper to be removed efficiently from the board. I have tried using brushes and sponges to remove the paper. However, fingers are the best.

After this dry the board. I had bad experiences using paper to do this because the toner is quite fragile. I have a very “energy consuming” bulb that I use to heat the board and dry it out.

Drying is important for the inspection part. You need to make sure that all the circuit has been transferred and that there are no residues of paper bridging signals. If you check closely there is actually a piece of the circuit that is missing from the board because it did not transfer correctly. For minor fixes like this just draw the missing piece with a permanent marker.

Also, make sure the places that are supposed to have holes, do have them. This makes the drilling process easier afterwards.

Etching

Ok, now that we have out circuit “protected” we can start etching away the copper. There are several chemicals that do this but the one I found to be the quickest and the less messier is a solution of Hydrogen Peroxide and Muriatic Acid.

Here is my DIY setup.

Just a side note: Hydrogen Peroxide is called Água Oxigenada in Portuguese.

Now the solution I use is 2 parts hydrogen peroxide to 1 acid. And if you don’t remember chemistry class, pour the acid last.

Get the boards in and keep an eye on it because there are two things that can happen. If you are etching double sided boards you need to keep an eye on the underside. If the circuit part is etched away, remove it and cover it with tape so that you can continue on the other side and not ruin your work. The toner will only work so far…

After the etching is completed remove the boards and drop them in the water container that you used to remove the paper. Just so you remove the acid (or dilute it a lot).

It’s just about done. Now use the acetone to remove the copper.

The result is not professional nor perfect. However, comparing the price of the commercially made ones, specially if you just need one, it is way (way) cheaper.