A simple graphical representation of my portal’s Live Chat with a Doctor feature…

Four principles of Design: Balance, Emphasis, Rythm & Unity. Below are some tips on the same.

Read the rest of this entry »

Marrisa Mayer, Google’s Vice President (Search Products & UX) talks about how Google works at Google I/O Developer Conference. There are lot of things which we don’t know run in backgrowund when we search on Google. Marrisa keynote goes in detail from User Behavior to Why Google’s homepage is so small & simple.

Via: Digital Inspiration

A demo of an experimental UI for Mobile Firefox by Aza Raskin, Head of UX for Mozilla Labs. Excellent, it is… Zoom, Pan, Throw… Aza posted some prototype concepts for the Firefox Mobile UI/UX.

The user interface shown in the video is a working prototype and will change, but there are some worthwhile concepts—some borrowed from Apple, some borrowed from Firefox. The mobile browser is built for a touch screen and allows scrolling with a flick of the mouse like on the iPhone (although it is single-touch, not multi-touch). The need to type is minimized by displaying any number of pre-defined buttons at appropriate moments, such as “search Google”, “send email,” and “map this.”

Via: TechCrucnch / Mozilla

Found something more sweeter than the simple CSS-only Horizontal Bookshelf I posted last week. Mike wrote a versatile 1kb horizontal accordion script can be used for menus.

The front-end mark-up

   1: <ul id="sm" class="sm">

   2: <li><img src="images/1.gif" alt="" /></li>

   3: <li><img src="images/2.gif" alt="" /></li>

   4: <li><img src="images/3.gif" alt="" /></li>

   5: <li><img src="images/4.gif" alt="" /></li>

   6: </ul>

To build the accordion call the function below onload…

   1: slideMenu.build('sm',200,10,10,1)

Demo & Download @ Mike’s Blog

I found a CSS Gallery somewhere on the web few days (I can’t find the link to that site, If found I will update the link here). It was pretty simple & starlight forward CSS to build an image gallery. Recently, I needed to put all supporting articles on BabyMagic in an easy navigation, Modified it a bit and out it under a rounded DIV’s. I wanted to create a bookshelf kind of UI so that anyone can easily navigate through the documents. A live demo is up, click the image at the end of this post see the demo. The good thing about this CSS Gallery is there’s no JS/AJAX, all pure CSS sweetness & it looks great! All the used images can be downloaded at Demo.

Here are the CSS & XHTML I used for it…

CSS for the Gallery

   1: #gallery {

   2:   padding:0;

   3:   margin:0 auto;

   4:   list-style-type:none;

   5:   overflow:hidden;

   6:   width:700px;

   7:   height:100px;

   8:   border:0px solid #888;

   9:   background:#fff url(../images/win_backh.gif);

  10:   }

  11: #gallery li {

  12:   float:left;

  13:   }

  14: #gallery li a {

  15:   display:block;

  16:   height:100px;

  17:   width:24px;

  18:   overflow:hidden;

  19:   float:left;

  20:   text-decoration:none;

  21:   border-right:1px solid #fff;

  22:   cursor:default;

  23:   }

  24: #gallery li a img {border:0;

  25:   }

  26: #gallery li a:hover {

  27:   background:#eee;

  28:   width:100px;

  29:   }

CSS for the Rounded DIVs

   1: .search_gallery {

   2:     text-align:left;

   3:     width:730px;

   4:     margin-left:35px;

   5:     position:relative;

   6: }

   7: .search_gallery .head {

   8:     background-image:url(../images/babytop.gif);

   9:     background-repeat:no-repeat;

  10:     width:100%;

  11:     height:35px;

  12: }

  13: .search_gallery .body {

  14:     background-image:url(../images/babyrepeat.gif);

  15:     background-repeat:repeat-y;

  16:     width:100%;

  17:     height:100%;

  18:     text-align:left;

  19:     padding-left:0px;

  20:     padding-right:0px;

  21: }

  22: .search_gallery .foot2 {

  23:     background-image:url(../images/foot1.gif);

  24:     background-repeat:no-repeat;

  25:     height:16px;

  26: }

XHTML for the Gallery

   1: <div class="search_gallery">

   2:     <div class="head"></div>

   3:     <div class="body">

   4:

   5: <ul id="gallery">

   6:

   7:         <li><a href="suppdocs/newborn.html"><img src="imagewin00.gif" alt="Sample Alt Text" title="Sample Title"/></a></li>

   8:

   9:         <li><a href="suppdocs/breastfeeding.html"><img src="imagewin1.gif" alt="Sample Alt Text" title="Sample Title"/></a></li>

  10:

  11:         <li><a href="suppdocs/breastfeeding_tech.html"><img src="imagewin2.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>

  12:

  13:         <li><a href="suppdocs/changesinbody.html"><img src="imagewin6.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>

  14:

  15:         <li><a href="suppdocs/comonprobs2.html"><img src="imagewin5.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>

  16:

  17:         <li><a href="suppdocs/comonprobs.html"><img src="imagewin4.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>

  18: </ul>

  19:

  20: <div class="foot2"> </div>

  21:   </div></div>

Rob Christensen from Adobe Labs has written a great article on Six must-see Adobe AIR Applications (AIR; formerly code-named Apollo).

The goal of Adobe AIR is to make it very easy to build desktop applications with the skills and technologies web developers are already familiar with such as HTML, JavaScript, AJAX, Flash, ActionScript and Flex. Just as Flash and HTML are designed to run the same on different operating systems, the objective of Adobe AIR is to extend that same concept to desktop applications.

Once the AIR runtime is installed, the same file can be installed on a Mac or Windows (Linux coming soon). Applications built using Adobe AIR have read and write access to the local file system just like a native application. Other features include local SQLite database, drag’n’drop between applications, clipboard support, a simple and painless install, native file pickers, code signing, support for embedding PDF’s and more. Since a web browser is built-in (WebKit), you can also use your favorite AJAX libraries to build applications entirely in HTML and JavaScript. Or, if you want more creative control, you can use Flash and Flex. There are several tools for building AIR applications including Dreamweaver CS3, Aptana (open source), and Flex Builder 3 (public beta). Since the command line tool for building applications is included in the AIR SDK, you can technically use whatever your code editing tool you’re comfortable with.

Rob Wrote: “Since the alpha release of Adobe® Integrated Runtime (AIR; formerly code-named Apollo) on March 19, dozens of next-generation rich Internet applications (RIAs) built on top of the Adobe® AIR™ runtime have been designed, developed, and distributed across the Internet. Internally, the development teams have been inspired by the imagination, creativity, and resourcefulness reflected in the Adobe AIR applications released so far.” …. more»

Rob listed 6 AIR applications, which are:

• Twitter | Download Twitter
• kuler desktop | Download kuler
• Fresh | Download Fresh
• Finetune Desktop | Download Finetune Desktop
• DiggTop | Download DigTop
• SearchCoders/Dashboard | Download SearchCoders/Dashboard

One more recently launched AIR Application I just saw is Pownce by Digg’s Kevin Rose.

Rob’s Article | Adobe AIR | AIR SDK | More AIR Apps

At the D2007: All Things Digital conference Wednesday, Microsoft CEO Steve Ballmer will unveil Microsoft Surface, the first in a new category of surface computing products from Microsoft that will “break down traditional barriers between people and technology”.

A Surface computer is able to recognize physical objects from a paintbrush to a cell phone and allows hands-on, direct control of content such as photos, music and maps. Surface turns an ordinary tabletop into a dynamic surface that provides interaction with all forms of digital content through natural gestures, touch and physical objects.

The new product is aimed directly at hotels, retail establishments, restaurants and public entertainment venues and should be commercially available towards the end of the year.

It’s an interesting product in that it’s completely out of left field. Microsoft gives examples of ordering a beverage during a meal with just the tap of a finger and quickly browsing through music and dragging favorite songs onto a personal playlist by moving a finger across the screen. Build this into a bar and you’d get one-touch beer service although I’m not sure if they’ve found a way to work out when your beer glass is empty so replenishment becomes automatic, maybe in a later version.

The practical uses for Surface at the point of sale are broad. This is touch screen point of sale technology at a new level.

Initial launch partners include Harrah’s Entertainment, Starwood Hotels and T-Mobile. Coverage at CrunchGear here.

Update: Channel 10 has a great first look video here. Via: TechCrunch 

Few notable things about Microsoft Surface:

• Music - You put your music player on the table, and your credit card. Both are recognized, then you drag songs to the player. Zune is obvious first device, but potential other partner in the works. One demo used a nano. Could partner really be Apple? Let’s not get carried away… yet…
• Virtual Concierge - A fairly self explanatory guide program, complete with mapping programs.
• Food & Drink - Not just interactive menus, but glass (and presumably plate and maybe even silverware) recognition. Like Music program, it reads credit cards just by placing them on table.
• Photo - A simple photo editor reminiscent of iPhoto.
• Puzzle - A game where you assemble actual pieces of glass on top of the table, each with a sliver of live video playing.
• Water - A water screensaver that you can touch to make ripples.
• Paint - Simple painting program that reads pressure sensitivity by judging the size of your fingerprint.