Brainstorming a Tech company name

Brainstorming a name for a software company that I’m a part of (well, as soon as we sign an LLC with this name). A post on 10 company name types on TechCrunch is useful.

Encouraging User contributions online – the Community Activity Awareness pattern

As part of a homework for a Social Web course, I had to consider factors that research showed had an effect on user contribution on social websites (contribution can be anything from commenting, to rating, to making edits on a wiki page), and link them with popular design patterns used for crafting the user experience for such websites.

We primarily looked at the Yahoo! Design Pattern Library and tried to enhance patterns with more details, rationale for why they work, and more importantly, back our claims with credible references.

I didn’t find an equivalent design pattern in Yahoo’s library for the method of encouraging contribution that I was thinking of. I’ve seen this pattern used a lot on the Internet. I thought it might be good to give it some rigor and analyze why it works, in what situations it would work well, and how can it be improved. Below is the description of the Community Activity Awareness design pattern that I proposed (yes I know, I’m not good with names). The gist of the pattern is “When providing a user with the opportunity to contribute to the website, show information about how other users have responded (positively) to that particular contribution action”.

Pattern name	Community Activity Awareness
Problem statement	People might ignore requests for contributing to a website (any contribution that increases social content on the site, such as rating, ‘liking’, or leaving comments) if they are not given information about the contributions of other members of the community.
Solution sketch	Image 1 Mockup of a particular implementation of the pattern
Use when	Use this pattern when you want to tell the user about the activities and opinions of other members of the community about certain content on the website. This pattern can also be used to show popular trends amongst the community to the user. This pattern should also be used when the website wants to nudge the user into performing a certain action (such as commenting on an article).
Don’t use when	Do not use this pattern when you are looking to collect unbiased information, or the ‘wisdom of crowds’ [4] about a certain topic, since this pattern divulges the opinion of other members of the community to the user before they (the user) have weighed in with their opinion. For example, this pattern should not be used for an online poll, or when ratings are used as votes (in the traditional sense) to select someone or something. The reason for this is the anchoring and adjustment heuristic [1] that we as people are prone to. This heuristic states that people’s estimates are influenced by suggested starting points (or anchors).
Solution statement	When providing a user with the opportunity to contribute to the website, show information about how other users have responded (positively) to that particular contribution action.
Solution description & examples	There are many ways in which information about the actions of other users (relevant to the current action that a user is about to perform) can be communicated. Obviously, it greatly depends on the nature of the action. If the action is a simple ‘click’ operation (such as ‘vote up’, ‘vote down’, ‘like’), then information about the community’s activity can be provided in the following ways: · Showing only the number of users who have performed the same action. · Pointing out certain users (who might be connected to the user in some way; e.g. part of their social network) who performed the same action. · A mixture of both of the above. If the action is a little more demanding, such as writing a comment or a review, then information about the community’s activity can be provided in the following ways: · Showing responses of users who performed the same action. · Showing the number of users and their responses. This pattern is nicely demonstrated by Facebook’s ‘like’ feature. Image 2 Facebook ‘like’ feature (user pointed out) Image 2 shows the case of when the user is shown that another member of the community liked the content item they are looking at. The action in this case is ‘like’ (the button to perform this action is highlighted), and the information is presented just below the action button. Another instance of this feature on Facebook is shown in Image 3. Image 3 Facebook ‘like’ feature (numeric count of users) This case simply shows the number of people who liked this content, and clicking on the number of people provides the user with more details about each person. Another common use of this pattern is shown by the commenting system on YouTube, as shown in Image 4. Image 4 YouTube comments In this case the user is shown the total number of comments (83) and a paginated list of those comments below. The action to be performed in this case is to leave a comment on the video, and a link to perform this action (‘Sign in to post a Comment’) is shown right next to the information about the community’s response to that action. A slight variant of this pattern can be seen on the Yahoo! Buzz website. Image 5 shows the widget that displays information on the latest user activity related to the ‘Buzz Up’ action (which is just a fancy name for a ‘vote up’). Image 5 Yahoo! Buzz updates The difference in this case is that the actual action (buzzing up content) is not available at the place this information is displayed. The user has to click on the article’s name to see the entire article along with the option to buzz it up. This implementation of Buzz Updates can be improved by making a ‘buzz up’ option visible when the user moves their mouse over a particular article’s section. This would allow the user to instantly perform the action that they’ve been told has been performed by other members of the community. Another example of this pattern in a different context is shown below in Image 6. Image 6 Online Forum’s ‘Currently Active Users’ section This is the ‘Currently Active Users’ section on an online forum, which is located near the bottom of the page. This allows users to see which other members of the community are viewing the particular sub-section of the forum that they are viewing. In this case, the action is the actual viewing of content of a certain section of the forum (and possibly contributing to a discussion). Thus showing this information can have the effect of the user spending more time on a particular section of the forum that has a large number of active users. This is just speculation, and also based on my experience of being affected by this information; the user might think that since there are so many people viewing this section of the forum that there must be active/useful/popular discussions going on, and they would be more likely to look at topics in that part of the forum. Another different incarnation of this pattern is in the ‘Trending Topics’ widget on Twitter, as shown in Image 7. Image 7 Twitter Trending Topics The action in this case is tweeting about a certain topic, and the information provided is what other people are tweeting about. This information is provided relatively close to the place of action (the ‘tweet box’ at the top of the profile page). This use of the pattern is different because information about individual users or the number of users is not given. Instead, the fact that a topic is a trend implies that a lot of people are tweeting about it. Thus it has a similar effect as displaying the number of people tweeting about this topic.
Rationale	Kraut and Resnick discuss their claim that people will be more willing to contribute in an online community if they see that others are also contributing in [2]. Their reasons for this claim are: · Seeing others’ behavior activates a social proof heuristic, which states that in ambiguous situations, people will rely on the behavior of surrounding people and be influenced by it. · People usually don’t want to contribute to a lost cause, and seeing others in the community making contributions will give the perception that that piece of content is ‘alive’ and perhaps useful to the group in some way. Related to this is the notion that people mostly don’t want to contribute when no one else is. · People’s sense of fairness sometimes creates an obligation to contribute when they see that others have done so. Harper [5] also conducted a study that showed that giving users information about the performance of other users increased their contribution in the short term. In that particular case the number of ratings (at a move site) were tracked, and people who had been emailed a newsletter containing comparisons with other people rated, on average, double the movies than people who’s newsletters didn’t have any comparison information.
References	[1] Tversky, A., & Kahneman, D. (1974). Judgment under uncertainty: Heuristics and biases. Science, 185, 1124-1130 [2] Kraut, R. E., & Resnick, P. (In press). Encouraging online contributions to online communities. In R. E. Kraut, P. Resnick, S. Kiesler, J. Riedl, Y. Chen & J. Konstan (Eds.), Designing from theory: Using the social sciences as the basis for building online communities. [3] Cialdini, R. B. (2001). Influence: Science and practice (4rd ed.). New York, NY, US: Allyn and Bacon. [4] Wikipedia contributors, "The Wisdom of Crowds," Wikipedia, The Free Encyclopedia, http://en.wikipedia.org/w/index.php?title=The_Wisdom_of_Crowds&oldid=315858186 (accessed October 9, 2009). [5] Harper, F., Li, S., Chen, Y., & Konstan, J. (2007). Social comparisons to motivate contributions to an online community. Lecture Notes In Computer Science, 4744, 148. [OR]

I hope this is useful for you if you’re designing the social features of your site. Recommendations for improvements are welcome!

The complete solution for implementing a deep-copy clone() method in ActionScript 3

When I started out to write a clone method for a few of my AS3 classes, I looked online and didn’t find any official information about cloning classes from Adobe. There were however a few solutions that were hacked together to provide the same functionality (here and here). These solutions have one big problem though, they don’t work with classes which have non-primitive properties.

My solution mostly builds on top of these solutions but it also provides the ability to clone classes which have properties that are custom class. And it also works with inheritance.

I’ve placed all helper methods in a CloneUtility class for better modularity. We’ll be using these methods in the code examples below.

public class CloneUtility
{
    /**
     * This method registers an alias for a class. This registration is required for writing and reading the
object in AMF format. If the object is not registered, a runtime error will be thrown when the object is written
in preparation for a clone.
     *
     * @param object The object to register.
     * @return void
     */
    public static function registerClass(object:Object) : void {
        var qualifiedClassName : String = getQualifiedClassName(object).replace( "::", "." );
        registerClassAlias(qualifiedClassName, getDefinitionByName(qualifiedClassName) as Class );
    }

    /**
     * This method writes the passed object to a byte array. This method is supposed to be used in the
clone() method of the object that is passed.
     *
     * @param object The object to clone.
     * @return void
     */        
    public static function writeObjectToByteArray(object:Object) : ByteArray {
        var qualifiedClassName : String = getQualifiedClassName(object).replace( "::", "." );
        var bytes : ByteArray = new ByteArray();

        registerClassAlias(qualifiedClassName, getDefinitionByName(qualifiedClassName) as Class );
        bytes.writeObject(object);
        bytes.position = 0;
        return bytes;
    }
}

For an example of how to make your classes cloneable, I’ll go with the example of class A and its subclass B. (B extends A)

This technique of making a deep copy works by writing the object to a bytestream, and then reading it back in as a new object. To facilitate this process, the super class (A) will need to implement the IExternalizable interface, which requires the implementation of two methods:

public function writeExternal(output:IDataOutput):void
public function readExternal(input:IDataInput):void

The parent class would look something like this (explained with inline comments).

public class A implements IExternalizable
{
    private var prop1:String;
    private var prop2:int;
    public function A()
    {
        // we need to register class to be able to write and read it back successfully
        CloneUtility.registerClass(this);
    }
    /**
     * This method is responsible for returning a deep copy of this object.
     *
     * @return the cloned copy of this object
     */
    public function clone():A {
        var bytes : ByteArray = CloneUtility.writeObjectToByteArray(this);
        return bytes.readObject() as A;
    }
    /**
     * All properties of the class must be written to output.
     *
     * @param output The stream to which to write to
     * @return void
     */
    public function writeExternal(output:IDataOutput):void {
        output.writeUTF(prop1);
        output.writeInt(prop2);
    }
    /**
     * All properties of the class must be read from the input, in the same order as they were written out.
     *
     * @param input The stream from which to read from
     * @return void
     */
    public function readExternal(input:IDataInput):void {
        prop1 = input.readUTF();
        prop2 = input.readInt();
    }
}

Note that the writeExternal() and readExternal() methods will be invoked when the clone method is invoked (by the write and read calls).

The sub-class, B, would look something like this.

public class B extends A
{
    private var prop3:uint;
    /**
     * The constructor registers this class to enable it for cloning.
     */
    public function B()
    {
        super();
        // subclasses need to register themselves as well
        CloneUtility.registerClass(this);
    }
    /**
     * This method writes all properties of this object to output.
     *
     * @param output The stream to which to write to
     * @return void
     */
    public override function writeExternal(output:IDataOutput):void {
        super.writeExternal(output);
        output.writeUnsignedInt(prop3);
    }
    /**
     * This method reads all properties of this object from input.
     *
     * @param input The stream from which to read from
     * @return void
     */
    public override function readExternal(input:IDataInput):void {
        super.readExternal(input);
        prop3 = input.readUnsignedInt();
    }
}

Note that the sub-class doesn’t need to override the clone method, just the writeExternal() and readExternal() methods.

So far it’s been pretty simple. The cool thing however is that you can also easily clone classes that have a custom class (which supports cloning) as a property. Below is code of a class C that has a property of type B.

public class C implements IExternalizable
{
    private var customProp:B;
    /**
     * The constructor registers object to enable cloning.
     */
    public function C():void
    {
        CloneUtility.registerClass(this);
    }
    /**
     * Make a deep copy of this object.
     *
     * @return A duplicated object of type C
     */
    public function clone():C
    {       
        var bytes : ByteArray = CloneUtility.writeObjectToByteArray(this);
        return bytes.readObject() as C;
    }
    /**
     * This method writes all properties of this object to output.
     *
     * @param output The stream to which to write to
     * @return void
     */ 
    public function writeExternal(output:IDataOutput):void {
        output.writeObject(customProp);
    }
    /**
     * This method reads all properties of this object from input.
     *
     * @param input The stream from which to read from
     * @return void
     */
    public function readExternal(input:IDataInput):void {
        // note that you should cast as the parent custom class (if there is one)
        customProp = input.readObject() as A;
    }
}

Note that you will use output.writeObject() and input.readObject() for custom classes. These methods will invoke the writeExternal() and readExternal() methods that are implemented by those custom classes.

Let me know if this works for you or if you have any suggestions for improvements!

Evolution of the PC – Where are we headed?

I’m reading In Search of Stupidity: Over 20 Years of High-Tech Marketing Disasters these days which talks about some high profile and some not to high profile blunders in the early days of the tech industry. It feels so unreal to read about the early incarnations of the ‘computer’, which supported at most 640KB and were heavy enough to induce back pains.

I remember seeing and touching some of these old dinosaurs, and it’s amazing how fast we’ve progressed. I was wondering what people 20-30 years down the line will think of our Macbook Pros, our Netbooks and our HP Dragons. I wonder how quaint our operating systems and software will look to them.

Even today we can see change happening as the concept of the PC being the sole repository for everything is becoming antiquated as more and more things are getting pushed to the cloud. I’m really impressed by some of Microsoft’s new Live services, particularly Live Mesh. It will be interesting to see what role Windows 7 plays in this transition of everything to the Web and how Windows as an operating system will evolve over the decades.

Exciting times indeed.

Rant ends here. Now I’m going to enjoy spring break!

User Experience Design – Thinking out of the box

GreenWhite recently posted a Google talk, “Don’t make me click“ (sound familiar?) by Aza Raskin. Although his Wikipedia page has all the details, but this amazing guy (apparently a year younger than me) gave his first talk on user interface at the age of 10. I guess it helps if your dad is the visionary behind the Macintosh.

Anyway, the talk was pretty interesting. He spoke about how engineers and designers succumb to the ’seduction of interaction’ in trying to making their UI’s ‘look cool’. The point that he was making was that UI’s should strive for the least bit of interaction possible. No interaction is the best interaction.

This is not something that is really surprising, since this concept was present way back in classics such as Don Norman’s Design of Everyday Things (if you haven’t read this, and you’re a software engineer, read it now before you write another line of code). A good tool is almost invisible. The user doesn’t need to think about the tool when using it.

He showed off some pretty cool interaction concepts, some of which have already been implemented in existing features. I really liked the automatic loading of content in an RSS reader as the user scrolls down (its called ‘river of news’, go ahead and Google it for a demo). I thought it was a pretty good example of doing what the user wants without having them interact with the application, i.e. reducing interaction.

He also showed off Social Helix’s calendar (check it out, it’s pretty cool!), which has a pretty smart interaction design. Effective use of a simple zoom-in/zoom-out allows the user to access all events in the entire 21st century with a few simple mouse movements. He contrasts this with regular implementations of calendars (Google Calendar in specific) in which the number of clicks that you need to make to go to a certain date is directly proportional to how far away that date is from the current date on your calendar (which is sometimes a lot).

During the QA session he mentioned something that I’ve been studying/reading/working on a lot these days, which is to design an effective UI, you need to start really early in the project lifecycle. Usability needs to be addressed right from the requirements phase. I had meant on writing a few posts on this in time for World Usability Day (I’m exactly a week behind :p) for GreenWhite, but yet again I proved to myself how incredibly lazy I can be.

Anyway, check out Aza Raskin’s blog, its got some pretty interesting stuff. I’ve actually read some of his stuff up on ALA without knowing who he was. And I’m pretty sure he’s got a hand behind the cool stuff going on at Mozilla labs.

Google ups the Ante with Chrome

Google has officially entered the browser market as of yesterday with their Google Chrome browser. It’s a completely new take on browsers (especially some of the technical aspects unknown to normal users) with a focus on making the browser a faster and safer platform for web applications and to move the focus from the browser to the web site.

I’ve moved to Chrome as my primary browser from the awesome Firefox 3. There are some features lacking in Chrome that I was used to in Firefox 3, but comparing a mature browser like Firefox with a first Beta isn’t really fair. And I’m sure plugins for Chrome will make up for any feature deficiencies, like they did for Firefox 1 and 2.

So far my Chrome experience has been exceptional. The browser loads really quickly and is very responsive. The one feature I absolutely LOVE is the omnibar, great job on that Google! I won’t talk about the features of Chrome in detail, since that’s been done already by a lot of people here (John Resig), here and an article on Internet News.

But before you check out any of those be sure to read the comics introducing Chrome (by Google), they’re very insightful.

It’ll be interesting to see how the browser market share shifts. Will Chrome take the users away from Firefox or Internet Explorer? I’m guessing Firefox, since the user base of Firefox is most likely to consist of early adopters. Majority of the people who use the Internet Explorer family of browsers hardly know of any other browser.

I’m very excited, as a web developer, about the paradigm shift that Chrome will undoubtedly bring in the browser market. And with other exciting projects like Prism, IE8 and the awesome stuff going on at Mozilla labs, we’re all set to change the face of the web as we know it.

P.S. check out these Javascript performance comparisons between Chrome and the other browsers. They’re insane!! The V8 JavaScript Virtual Machine incinerates the competition!

Firefox 3 – Why so few pledges from Pakistan?!

Firefox 3 is coming out tomorrow, and this time around Mozilla is going for a Guinness Record for the most software downloads in a day.

So far there have only been 1971 pledges from Pakistan. That puts us in the same category as countries like Ecuador, Belarus, Sri Lanka, Algeria and Egypt. Iran has a whopping 8684 pledges! And they’re right next door to us. (there’s no point in drawing comparisons with India)

Wasn’t Pakistan supposed to have one of the fastest growing tech industries? I thought our software industry and our ‘techies’ in general were a lot more enthusiastic about technology and generally well informed.

And Firefox is more than a web browser, for us web developers it’s a full fledge IDE. I simply can’t imagine web development without Firefox and Firebug. I shudder when I remember the days when we developed applications using Internet Explorer, and pretty much guessed what was going wrong with markup rendering.

So what’s wrong with us? Why are there so few pledges? What factors determine the level of participation in such events? Are we Pakistani’s inherently insular?

UPDATE: At least some Pakistani’s are doing the right thing. The awesome people at WCCFTech have put up a banner and I’m sure they’ve been the source of many pledges.

LUMS Comics

Yaay! We finally get our very own comic strip!

Funny stuff from a very gifted artist. The drawing style is somewhat similar to phd comics, which are my all time favorite web comic.

Added to pakdoc as well. Keep up the good work Bilal!

GeniDo – Granting your first wish (Offline Basecamp)

It was rightly predicted that the next big thing on the Web would be offline support from the web applications that we know and love. More and more offline apps keep popping up everywhere. The latest one to roll out is GeniDo (click to see demo video), a product by GeniTeam (founded by LUMS alumni).

I think it’s a great product idea, given the huge user base of Basecamp (more details at G&W). It’ll be great to see similar products for other web applications like rememberthemilk, backpack etc.

Regarding offline support for web apps, Flex and Google Gears have helped a lot in providing the infrastructure. I personally am really excited about Firefox 3’s offline app support (demo). Will finally have a reason to consider building Firefox only apps …

Writing Semantically correct HTML

“I see dead HTML tags”

Seriously. Sometimes I’m amazed at how the Web is still able to function with the absolute junk with which web pages are built.

CSS is almost 10 years old, but it still doesn’t render uniformly across browsers (even latest ones). And the fact that it is severely crippled doesn’t help either (you can’t even vertically center text without applying half a dozen hacks!).

JavaScript, the poor thing got crippled during its inception due to the infamous browser wars. It’s precariously carrying the burden of Web 2.0 on its worthy yet twisted shoulders.

HTML … well that’s what this post is all about. HTML on the web has gone through many phases. First there was the plain text phase, with newly introduced presentational tags such as <font> and <color>. Then came the Era of the Table. We’d see tables within tables within tables within tables being used to keep the layout of a page in place. Tables were the easiest thing to use for column layouts back then.

But then came CSS with its call to developers to shun tables and use divs and CSS rules for layout. Most of that stuff fell on deaf ears. So now we see a web where a large number of sites are made by developers who are either infected with divitis, or they haven’t looked beyond tables and inline styles. Either everything is a <div> in these sites, or a table element. Headings, lists, blocks of text, you name it, it’s a div/table.

What I want to list in this post are some rules to remember while writing HTML, such that the resulting HTML:

• Has semantic meaning. The next developer to work on your markup will get a good idea of what it represents if your HTML is semantically correct and has ‘meaning’ (rather than a huge table within table within table…)
• Is short and concise
• Is primarily the structure of your page (as opposed to having presentational and structural properties)

The first thing to keep in mind is to use the correct tag at the correct place.

<h1> – <h5>: These tags should be used for your page name and other section headings. You can set these tags to both inline and block displays to suit your needs. They are SEO friendly as well.

<div>: You should use the divider primarily for layout purposes. A basic rule of thumb should be that if a div itself has any content in it, then you should rethink your use of it, and maybe replace it with a list item (if you’re making tabs or a ‘collection’ of items), span (inline text formatting), paragraph (block error messages) or maybe you don’t even need an encompassing tag for your content (think unnecessary boxing of images into divs).

<ul>, <ol>, <li>: Very versatile tags, should be used for both vertical and horizontal (tabs) lists. Also consider using lists for structures of data such as galleries, menus and draggable items. They work really well when floated as well.

<span>: Tag of choice for formatting inline text. It is essential however that you know that you don’t have to use it every time. There are other tags, such as <i>, <pre>, <dfn>, <code>, <strong> etc that you can use in most cases. Remember that you should use these tags according to the context of your site, e.g. <strong> doesn’t necessarily have to be ‘bold’ text. You can give it any style that applies to emphasized text in your page’s layout. Note that these tags will give structure to your data, through CSS you will set their presentational properties, and actually define what, say a <strong> tag will look like.

<label>: I’ve seen many forms that don’t use this tag. I’ve seen JavaScript that is doing what this tag automatically does for you in your forms (click sets focus to related input field). This should not be so. Your forms should always make use of this tag to describe what the user should input in a field. Be sure to use the ‘for’ attribute to link a <label> to its <input> tag.

<p>: This tag should be considered when you’re writing welcome/instructional/advert text on your webpage. Note that usually this text is encompassed in a div or other structure. <p> works just fine in these cases.

<table>: Use for displaying tabular data only. Remember to use the <thead> and <tbody> children tags.

<a>: Use for links. Also work really well in block display, so consider using them where you might be using divs with onclick events and cursor set to pointer.

These are the most commonly used tags out there. Be warned that you will need to swallow the bitter pill of CSS to make full use of some of the above tags, especially divs and list items.

Hopefully this rant makes some sense to you and will help you in structuring your pages better. If you think I got something wrong, comment and be heard!