Web 2.0 User Interface and Interaction

Here I summarize (and envision) some major features of "web 2.0" rich web user interfaces. The question is what features are usually considered to be rich and usable. Let us know if there are things missing.

• Dynamic content changes and animations: auto-fill, marquee, slides, etc.
• Traditional GUI controls and interactions: drop-down/pop-up, expanding/collapsing, selection, highlighting, etc.
• Advanced user interactions using mouse: hold and move, drag and drop, and multi-touch.
• Within page action: to complete a task, especially that with a number of steps, within the same web page: sorting, filling out forms, log in, add new or change content, seeing additional content, etc.

Technologies and tools that can be used to achieve these features:

• Traditional and basic DHTML, JavaScript.
• Client side embedded component: Applet, Flash, Silverlight.
• Recent AJAX, JavaScript library (JQuery/Prototype).
• Advanced UI language: XUL.
• Browser GUI integration.

Here are some other good readings:

• http://blog.lab49.com/archives/779
• http://woork.blogspot.com/2009/01/10-beautiful-web-ui-libraries.html
• http://en.wikipedia.org/wiki/Rich_Internet_application

Site Map 2.0

Just some casual thoughts about the new site map features for better information organization, search, and share:

1. Structured and separated from its presentation: this makes it searchable. The search based on the structure is much more effective and efficient than search the whole page. Google site map is on the right track.
2. Multi-perspectives (path): the structure of the site map should reflect multiple perspectives or dimensions of information. Current site map or menus are always fixed and the same in every session. Many types of information have the characteristics of multi-categorization, which means they can be categorized in different schemes by different dimensions.This will lead to a resource with multiple path.
3. Rich navigation information embedded: it is not just in a hierarchical structure, but also with rich navigation information, such as tags, links to related resource, etc.
4. Dynamic and client oriented: it can be customized in presentation on the client side, supporting common information seeking features like filtering, marking (favorites), tracking (most visited, history), etc. The customization can be saved and synchronized from the server when the site map is changed.

HTML Link with Target to a Div

Last time I mentioned about a new trend in the web navigation mode based on within-page navigation: http://cubicle-h.blogspot.com/2009/05/web-between-page-based-navigation-and.html

Currently scripts and plug-ins need to be used to realize such a behavior. But it would be good to have this as a built-in feature of HTML and directly supported by browsers. Here is my thought:

The current <a> tag has an attribute "target", with values like "_blank", "_new", "top", etc. All these are based on the reloading of the whole page. It would be really good if the target could be set to a certain section of the page, such as the <div> tag. For example:

<a href="calendar.aspx?month=3" target="cal">Next Month</a>
<div id="cal"></div>

In this case, the page content will be directly loaded to the "cal" <div>, without special script handling, without reloading the whole page.

It would be good if HTML 5 specification and future browser can support this feature.

Web UI Integration via REST

My previous blog mentioned about web slice, which can be integrated to IE nicely. Now, can such nice web slices be integrated (mashed-up) to web pages? It's easy to do it on the receiving end, through manipulating XHTML DOM dynamically. What's difficult now is the publishing end. I am not aware of any neat way to just get a particular web slice. Maybe webpage scraping does work but not ideal.

Here is my imagination. Can we use REST and do some URL processing to get a particular web slice? For example, assuming there is a web slice with id "bidstatus", the a URL "http://example.com/examplepage/webslice/bidstatus" or "http://example.com/example.aspx@bidstatus" will retrieve that exact web slice. Maybe this is already there but I just don't know.

US and Chinese Online Social Difference: Social Network Site (SNS) vs. BBS/Forum

What is the major difference between the online social sites for the Americans and those for the Chinese? The most popular ones in the US are SNS style, like MySpace, FaceBook, Twitter, LinkedIn, etc. The most popular ones for the Chinese (in the US) are comprehensive BBS/Forum style, like MITBBS, Tianya, Huaren, etc.

The biggest difference of these two types of online social styles is: SNS is centered around individuals and focused on personal status updates and sharing, but BBS is topic and activity driven and focused on discussions. SNS features personal status and content sharing: blog, photos, videos, recent doing, etc. BBS features talking, discussing, debating, word of mouth, and other group activities. SNS features a rather closed socialization (with friends) while BBS is more open (with completely strangers and anonymous users). It could be a whole paper to compare the two styles.

From a developer perspective, these two are not exclusive to each other - how can we integrate the two? Forum seems like a tool that every SNS should have. At least, if SNS like FaceBook and Google+ want to succeed in China, BBS is a must-have function. From this perspective, I think LinkedIn is the best among all. Its group settings are exactly to have people with common interests to interact with discussions. Google+ just added the "community" feature (Dec 2012) and hope to integrate Google Groups into Google+. BBS like mitbbs.com also added personal profiles and blog services.

Read more in this article about "BBS: The Chinese Social Networking".

Between-Page and Within-Page Web Navigation

Traditional web navigation model is based on web pages: clicking on a link (pointing to a another page) takes you to another page (url) and the browser refreshes the whole page. Most of the time, the new content will replace the previous content in the same browser window (or tab). I label this navigation model as "between-page web navigation/action".
An alternative model is "within-page based navigation/action" where the navigation or user activity remains in the same interface container. For example, changing the month of a calendar only refreshes that calendar division, not the whole page. Browser plug-ins can implement this model, such as Flash or Silverlight (see TargetScope and SilveOS). Another way is to use scripts, or AJAX, which is gaining popularity recently.
One good practice is to implement MDI (multiple div(ision) interface), similar to the MDI (multiple document interface) or TDI (tabbed document interface) in desktop applications. One of the advantages is it allows multi-tasking and multi-threaded navigation. It is certainly useful for many web applications; Yahoo's new email is a good example.