Copenhagen

The museum of Copenhagen [1] placed a 12 meter long interactive multitouch screen on Kongens Nytorv (King’s New Square) that allows passers to quickly browse the history of the square. This interactive wall is connected to the database of the museum, allowing users to interact with their information repository. The interaction is a strange 3D/ isometric system that you can use to zoom in on specific parts of the square or to move to another time. You can focus on specific images of information and even send it to your email address. A very cool and interactive way to get more people interested in the history of the square and Copenhagen in general.

To get a better idea of the full functionality of the setup, visit their website are [2] or check out this youtube video:

Click here to view the embedded video.

Los Angeles

While we visited the crazy city of Los Angeles, we (as typical tourists) visited the Hard Rock Café in both Hollywood [3] and Universal City [4]. To my surprise they had some really cool HCI stuff in their cafes. First of all, when entering the cafe, there is a very large multi-touch and user display that allows several users to interact with memorabilia. Each user is dynamically given a workspace that he can use to interact with the information that is pulled straight of the memorabilia website of Hard Rock [5].

For more information check the youtube video:

Click here to view the embedded video.

Next, they also installed a small touch screen next to each table. This screen could be used to check out local memorabilia, other cafes and hotels and to vote on the video/music that you want to hear (as they constantly play music videos on tv screens). Although at the moment, it cannot be used to order drinks and foods, the bartender actually hoped (an thought) that this would be possible very soon.

Finally, I noticed that they had several Microsoft Surfaces that could also be used to check out memorabilia or play games with your table mates.

Check out this youtube video for more information of the functionality:

Click here to view the embedded video.

out.

Activity-Centered vs User-Centered

A first problem of the application of user-centered design (UCD) mentioned by Norman, is the potential of a duality between very usable versus not usable within the same goal audience. The more something is designed around the specific needs of certain users, the more it will be unusable to others. An second problem is the danger of an ad hoc focus instead of an anticipating approach. Norman claims that the usage proficiency that evolves from the successfulness of a product might force users to move beyond the product. Finally, the focus on users downplays the activities that the users are going to perform by using the product. This may result in an overly complex product that tries to comply to a users objectification of work, which is in fact by definition a collection of overlapping activities.

An alternative to user-centered design (UCD) is activity-centered design (ACD). This is an approach that does not focus on the user or his tasks but on the activities of a user. This approach can, according to Norman, be theorized in the form of activity theory [4]. Although this approach might seem novel, most products and designs of the last 1000 years were designed around the activity of users. This is why products such as a car, musical instruments and many other artificial devices are that successful. They were designed to excel in one specific activity. The main goal of activity-centric design is to achieve that users understand the activity they can perform with the design rather than the intension of the designer.

The fundamental difference between these two approaches is that, although they are similar in many ways, UCD defines the activity by the design of the tool rather than allowing the user to engage in an activity by using the tool. From this differentiation the following question is distilled: should the user or the technology adapt? Norman concludes by saying: “To the Human-Centered Design community, the tool should be invisible, it should not get in the way. With Activity-Centered Design, the tool is the way.”

Discussion

Although Norman makes as excellent point on the potential danger of an effusive application of user-centered design, I feel that the differentiation between UCD and ACD is a bit enlarged: it is perhaps not be as big as Norman tries to convey.

First of all, I believe there is a natural transgression between UCD and ACD when designing an Interaction Design system, especially when it is informed by activity theory. Although the term ‘activity‘ might seem to refer to an atomic task or action, this is definitely not the case. Activities as defined by activity theory are very rich, broad and comprehensive descriptions of the users intent. The complexity and natural interrelation between human activities that are engaged when using a product or design forces designers to take into account both the user as well as the activities the user is doing.

Another important consideration of the focus on an activity-centered design that is informed by activity theory, is that a computer or other interactive media cannot be compared to other more traditional tools such as cars or musical instruments. Because they are information processing tools that are used to attain a myriad of goals rather than one primary goal, they are not necessarily part of the activity but can also be used to drive or engage in activities. Kaptelinin [5] referred to the latter relation between (activity theory informed) human activity and computers as Computer-Mediated Activity. This reasoning refutes some of the apparent differentiations between UCD and ACD that are implied by Norman.

In conclusion, I feel the differentiation between both approaches is not as big as appears from Norman’s column, that frames in a recent trend to promote activity-based computing. Rather than replacing one approach with another, I think that extending the currently widely adopted user-centered design with an activity theory informed notion of the activities of users will vastly improve the quality of future Interaction Design systems.

References

[1] Donald Norman, http://www.jnd.org/jnd.html
[2] Human-Centered Design Considered Harmful, http://srl.csdl.tamu.edu/courses/CHI2009/assignments/data/Harmful-norman.pdf
[3] Interactions Magazine, http://interactions.acm.org/
[4] Activity Theory Overview, http://carbon.ucdenver.edu/~mryder/itc/activity.html
[5] Kaptelinin, Computer-Mediated Activity: Functional Organs in Social and Developmental Contexts  http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.87.9044&rep=rep1&type=pdf

Fitts’ Law

For those who have never heard of Fitts’ law [2], it basically describes the relation between distance, size and speed of movement. Mathematically, the movement time (T) can be modeled as the sum of device independent but through observation defined constants a & b times the amplitude or distance to the target divided by the width of the target along the movement axis. a is defined as the start and stop time while b is the slope (log scale) that defines the speed of the device.

In a nutshell, it means that nearby large objects are easier to hit than small objects that are far away. In context of the start button, this means that we can expand the hit space to enlarge the target area resulting in an increased hit rate and in general better usability of the system. Because the start button is located in a corner of the screen, you can “throw” your mouse in the corner and “click” to launch the start menu. In my implementation this area was extended to the red rectangle you can see in the image, and the start button was located in the upper left corner of the screen.

For the initial validation of this system, we performed a first use field study with two participants. In the semi-structural interviews that were done afterwards, none of the participants referred to this specific implementation. They simply argued that they liked using the system.

Since I was curious about the hit rate I added some logging code to the application to check the hit rate on the circular button as well as the rectangle extension area. Unfortunately, both test users preferred not to be logged (as we also log many other things and they were using the system on their main machine). In the next study on this application, which will probably be  lab study, we can hopefully use the logger to get some significant data on this issue.

As an alternative I have used the application myself on 6 separate occasions and logged (or measured) the hits on the actual circular button and rectangular extension area. I myself was very surprised with the results:

It is amazing that I only hit the actual circular button lesser than 30% of the times. This means that if I did not implement the extended area I would have missed the button about 70% of the times I attempted to launch the start menu (I’m ignoring learning curves etc. here).

Although this data is not very significant or valuable, it does however demonstrate the potential value of considering things such as Fitts’ law or other psychological analysis of information processing or motor skills.

References

[1] Steven Houben, Activity Theory Applied to the Desktop Metaphor 
[2] P. M. Fitts. The information capacity of the human motor system in controlling the amplitude of movement. J Exp Psychol, 47(6):381391, June 1954

Event?

An event is a notification message that is send from one object to another object. It is used to notify an other object about the changed state of the object. Lets use an example to explain the context of events. Image we have a class called Main, that holds the application logic. In this  Main class we want to use a parser, a xml analyzer for example. We declare a new instance of the object Parser by using a piece of code that could look like this:

Parser parser = new Parser();

We can now access the parser class from the main class by using its methods and properties. We could for example call the method parse and set the property TimeOutTime:

parser.parse(data);
parser.TimeOutTime = 2;

In figure 1 you can see a conceptual representation of this process. The down arrow demonstrates this instantiation and use of methods and properties. If we would send some raw data to the parser in order to change something in our main class, it would be nice that the parser can send back the result of the parse method. One way could be to add a return type to the parse method. This can be efficient in some situations but when timing, or threading are an issue this may not work well. We could perhaps let the Parser class create an instance of the main class, so we can use the methods and properties of the main class to update it. The latter wont work because the new instance is not the same as the existing instance that created the parser class in the first place. Although both instances are of the same object, they are not the same. Another issue that may be of concern is the fact that the parse class doesn’t really need to know anything about the main class. It simply wants to process data and output the result. With the usage of an event the parse class can simply send a Parsed message when the parsing is done. In figure 1 you can see this process. The Parser class simply sends a Parsed event when it is done parsing. This  instantiation of Class B by Class A and the usage of an event to notify class A should make clear that Class A uses Class B but Class B has in fact no knowledge about Class A, it is simply used by Class A. This is called Loose Coupling [1].

Fig 1: Conceptual event model

Event in C# (.Net)

To create a custom event in .net we need three components: a delegate [2], an event arguments class and the event. We will use the example of the Main class and the Parse class to demonstrate how to implement an event in c#. You can find the complete class files at the bottom of the page.

It is not necessary to have a deep understanding of a delegate. Simply remember that a delegate is basically a type-safe pointer that points to a specific memory address. A delegate is used as a point where you can hook your event on ( a callback function). An event is actually an instance of a delegate. The delegate is a static point that links your event message from one class to an other class.

So, first of all we need to create a delegate outside (!) all classes. You typically do this at the top of your code file inside the namespace but outside(!!) the class. In our example we are creating an event for the Parser class so we will put the delegate in this file but outside(!!!) the class.

public delegate void ParserHandler(Object obj, ParserEventArgs e);

We named our delegate ParserHandler, as it is going to handle parser events. The arguments for our delegate are an object and a ParserEventArgs class. We will use the object so we can check what instance has send the event. The ParserEventArgs doesn’t exist so we need to make it.

Any event arguments class holds information about the state of the object. This class is the actual message or notification we are sending to another class. In this case we want to send a result back to another class. There are two ways we can do this:

1. First of all we could create an empty EventArgs  class. When an event is send the Main class will receive an empty event message. This may seem not seem very useful but we could use this event as a trigger to retrieve information. The parse could have a property Result. When we receive this empty message we know that the Result property is updated with the new result and we can retrieve it by using the property.
2. Secondly we can put the result into the EventArgs and send it over. When the main class receives the message we can find the result inside the message

Iin this example we are using the second method. We need to create a new class ParserEventArgs that hold a Object field and a Result field:

  public class ParserEventArgs
    {
        public string Result { get; set; }
        public Object Object { get; set; }
        public ParserEventArgs() { }
        public ParserEventArgs(Object obj, string result)
        {
            this.Result = result;
            this.Object = obj;
        }
    }

Now that we’ve got our delegate and our ParseEventArgs class, it is time to implement our event. First of all we need to create our event:

 public event ParserHandler parserEventHandler = null;

Place this event inside the Parser class. Next we are going to wrap this event for simplicity and to make sure the event is never null.

 protected void OnParseEvent(ParserEventArgs e)
        {
            if (parserEventHandler != null)
            {
                parserEventHandler(this, e);
            }
        }

If we now want to send the event, in this case when the parsing is done, we simply need to call the OnParseEvent method:

 public void Parse(Object rawdata)
        {
            //parse code here
            string result = "ParsedData";

            OnParseEvent(new ParserEventArgs(this, result));
        }

The Parser class is now modified to send an event when the parse function is done. We can now use this in our main class:

>class Main
    {
        Parser parser = new Parser();
        public Main()
        {
            parser.parserEventHandler += new ParserHandler(parser_Parsed);
            parser.Parse("RAWDATA");
        }
        private void parser_Parsed(object sender, ParserEventArgs e)
        {
            string result = e.Result;
        }
    }

This may seem familiar as this code is basically what the IDE generate when you use a standard event. In the main class we create a parser object. In the constructor we hook an event listener to this and call the parse method. When the raw data is parsed the parsed object sends a Parsed event that we are catching with our handler.

The complete Parser class:

namespace Parser
    {
        public delegate void ParserHandler(Object obj, ParserEventArgs e);
        public class Parser
        {
            public event ParserHandler parserEventHandler = null;

            public void Parse(Object rawdata)
            {
                //parse code here
                string result = "ParsedData";

                OnParseEvent(new ParserEventArgs(this, result));
            }
            protected void OnParseEvent(ParserEventArgs e)
            {
                if (parserEventHandler != null)
                {
                    parserEventHandler(this, e);
                }
            }
        }
        public class ParserEventArgs
        {
            public string Result { get; set; }
            public Object Object { get; set; }
            public ParserEventArgs() { }
            public ParserEventArgs(Object obj, string result)
            {
                this.Result = result;
                this.Object = obj;
            }
        }
    }

References

[1] Loose Coupling, http://en.wikipedia.org/wiki/Loose_coupling

[2] Delegate, http://en.wikipedia.org/wiki/Delegate_(.NET)

It is however nice to see that even beyond the Computer Science /  Human-Computer Interaction community people are realizing that the current implementation of the desktop interaction is to limited for many modern tasks or activities .

The Video

References

[1] http://10gui.com/

The second project I am working on is based around visual object manipulation[2]. The idea was to write an article for Codeproject about visual manipulation of polygons and other shapes in 2D space. This project  includes: a custom build drawing canvas (rectangles, polygons, ellipses,…), direct manipulation for drawn objects, selection and deselection of drawn objects, basically :visual representation of context or data.

I recently decided to combine both projects and build a reusable .net component that provides a generic syntax editor + visual designer. There is still a lot of work to do before I can even release a alpha test version but I am putting most of my free time in this project. The idea is to supply a workspace containing :

• An advanced syntax editor (based on the editor of Roger Alsing). (90% done)
  • Custom properties/events
  • Syntax Highlighting
  • Marks (EOL/white spaces/…)
  • File management (IO/ FTP/…)
  • State management
  • ….
• Visual Designer (build from scratch) (75% done)
  • custom events/properties
  • fully customizable design space
    • drawing canvas
    • grid
    • rulers
    • shape renderer
  • toolbars (standard manipulation)
  • advanced graphics object for custom drawing
  • object manager
  • custom file types
• Visual Code Framework (10%)
  • customizable code <=> design parser based on XML templates
  • …

Here’s a new quick preview of the Orbis Visual Designer Component:

]]> http://anxma.com/index.php/c-drag-and-drop-shape-manipulation-part-3-a-reusable-visual-designer-code-editor/feed/ 1 http://anxma.com/index.php/c-drag-and-drop-shape-manipulation-part-2/ http://anxma.com/index.php/c-drag-and-drop-shape-manipulation-part-2/#comments Mon, 28 Sep 2009 19:45:45 +0000 Steven Houben http://anxma.com/blog/?p=457 Continue reading →]]> Development (and article writing) isn’t going as fast as I would like as I am reading a lot of papers from university courses most of my free time.

As I already stated in my previous post [1], I am currently working on an article about object manipulation which I want to submit on codeproject.com in the near future. It is still work in progress as I am adding features and exploring new possibilities. I would like to show you a second preview with extended functionalities as:

• Object selection/deselection
• Dynamically addition and removal of points  (as a polygon = collection of points)
• Z-index
• Object transformation by direct manipulation

The basic idea behind the article is to demonstrate how to modify any shape in order to support drag and drop and direct manipulation. These functions can be usefull in any application that supports visual editing. (FE: Flash designer /Visual studio toolbox drag- drop/ Paint application) I am still figuring out some difficult issues but here’s a quick preview that demonstrates ‘drag and drop’ and ‘direct manipulation’.

String str = Console.ReadLine();

The application skips this line which can lead to errors as the string is  empty.

Reason

This error is no bug in Mono but when you run a console application in MonoDevelop the application outputs all the console related actions[1] to a build in pseudo-console. This console is no ‘real’ console and I cannot handle any advanced action like input etc.

[1]

Console.ReadLine();
Console.Read();
Console.WriteLine();
Console.Write();
Console.Clear();
...

Solution

The only solution to fix this problem is to execute the console application in the (real) Linux console. You can do this by changing a property in the Project properties > Run > General > Run on External Console [true|false]

#include  pthread.h
#include stdio.h
#include /usr/include/semaphore.h
#include iostream

//!!!All of the above includes need <..>

using namespace std;

#define BUFF_SIZE 4

//Shared buffer
char buffer[BUFF_SIZE];

//Index values
int nextIn = 0;
int nextOut = 0;

//Semaphores
sem_t empty_slots;
sem_t full_slots;

//produce an item from the buffer
void Produce(char item){
  sem_wait(&empty_slots);
    buffer[nextIn] = item;
    cout<<"Producer:"<<<"n";
    nextIn = (nextIn + 1) % BUFF_SIZE;
  sem_post(&full_slots);
}

//Consume an item from the buffer
void Consume(){
    sem_wait(&full_slots);
        cout<<"t---->Consumer:"<<<"n";
        nextOut = (nextOut+1)%BUFF_SIZE;
    sem_post(&empty_slots);
}

//Producer
void * Producer(void *param){
    for(int i = 0; i < 10; i++)Produce((char)('A'+ i % 26));
    pthread_exit;
}

//Consumer
void * Consumer(void *param){
    for(int i = 0; i < 10; i++)Consume();
    pthread_exit;
}

int main(void){

    //Create a threadpool
    pthread_t pool[2];

    //Create thread attributes
    pthread_attr_t attr;

    //Initialize attributes
    pthread_attr_init(&attr);

    //Initialize semaphore CREATE(&semaphore,shared[NOT supported],initial value)
    sem_init(&empty_slots, 0, BUFF_SIZE);
    sem_init(&full_slots,0,0);

    //Create threads
    pthread_create(&pool[0],&attr,Producer,NULL);
    pthread_create(&pool[1],&attr,Consumer,NULL);

    pthread_join(pool[0],NULL);
    pthread_join(pool[1],NULL);
    return 0;
}

Note: ignore the last rule.

A semaphore is an integer variable that, apart from initializiation, is accessed only through 2 standard atomic operations: wait() and signal()

wait(S){
    while s<=0
    ;// no-op
    s--;
}

Signal(S){
    s++;
}

A semaphore is used when multiple threads or processes are using a limited amount of shared resources. A pretty easy to understand example of this is a printerpool. Imagine 10 printjobs that are send to a  printerpool with 5 printers:

package semtest;

import java.util.concurrent.Semaphore;

public class PrintJob extends Thread{
	private int id;
	private Semaphore sem;

	//constructor
	public PrintJob(int id, Semaphore sem){
		this.id = id;
		this.sem = sem;
	}

	//Print
	void Print(){
		System.out.println("Printjob "+id+" :Start Printing");
		try{sleep(1000);}catch (InterruptedException e){}
		System.out.println("Stop Printing");
	}

	//run methode executed when thread.start() is called
	public void run(){
		try{
			//Accuire the semaphore
			sem.acquire();
			Print();
		}catch(InterruptedException e){
			//ignore
			}
		//Release the semaphore
		sem.release();
	}

	public static void main(String[] args){

		//Amount of printers in the printerpool
	    final int PRINTERS = 2;

	    //Java semaphore object : Semaphore(permits,fair)
	    Semaphore sem = new Semaphore(PRINTERS,true);

	    //Amount of printjobs
	    PrintJob jobs[] = new PrintJob[100];

	    //Create printjob threads
	    for (int i = 0; i < 100; i++){
	    	jobs[i] = new PrintJob(i, sem);
	    	jobs[i].start();
	    }
	}
}

Output for PRINTERS = 5:

Printjob 0 :Start Printing
Printjob 1 :Start Printing
Printjob 2 :Start Printing
Printjob 3 :Start Printing
Printjob 5 :Start Printing
Stop Printing
Printjob 7 :Start Printing
Stop Printing
Stop Printing
Stop Printing
Stop Printing
Printjob 4 :Start Printing
Printjob 6 :Start Printing
Printjob 8 :Start Printing
Printjob 9 :Start Printing
Stop Printing
Stop Printing
Stop Printing
Stop Printing
Stop Printing
…

Output for PRINTERS = 2:

Printjob 1 :Start Printing
Printjob 0 :Start Printing
Stop Printing
Stop Printing
Printjob 2 :Start Printing
Printjob 3 :Start Printing
Stop Printing
Stop Printing
Printjob 4 :Start Printing
Printjob 6 :Start Printing
Stop Printing
Stop Printing
Printjob 8 :Start Printing
Printjob 10 :Start Printing
Stop Printing
Stop Printing
Printjob 12 :Start Printing
Printjob 14 :Start Printing
Stop Printing
Stop Printing
Printjob 7 :Start Printing
Printjob 9 :Start Printing
Stop Printing
Stop Printing
…

Anti

//C++
int** generateSudoku(void)
{

    int ** sudoku;
	sudoku = new int*[9];
	for(int i=0;i<9;i++) *(sudoku+i) = new int[9];
	for (int i = 0; i < 81; i++)
	{
		if (i % 9 + 1 * ((i / 9 * 3 + 1) % 9 + (i / 27)) > 9)
			sudoku[i / 9][i % 9] = i % 9 + 1 *
			((i / 9 * 3 + 1) % 9 + (i / 27)) - 9;
		else
			sudoku[i / 9][ i % 9] = i % 9 + 1 *
			((i / 9 * 3 + 1) % 9 + (i / 27));
	}
	return sudoku;
}

//C#
static int[,] generateSudoku()
{
    int[,] sudoku = new int[9, 9];
    for (int i = 0; i < 81; i++)
    {
        if (i % 9 + 1 * ((i / 9 * 3 + 1) % 9 + (i / 27)) > 9)
            sudoku[i / 9, i % 9] = i % 9 + 1 *
			((i / 9 * 3 + 1) % 9 + (i / 27)) - 9;
        else
            sudoku[i / 9, i % 9] = i % 9 + 1 *
			((i / 9 * 3 + 1) % 9 + (i / 27));
    }
    return sudoku;
}

Anti