Pek Pongpaet

Hot Tweeters is my latest web app. It can be best described as Hot or Not for Twitter. You go to the site and are presented with a grid of 18 Twitter profile pics. You click on up to 3 profiles that you think look ‘hot’ whatever ‘hot’ means to you and click on the vote button. Then you are presented with another 18, and that’s pretty much it. There are other features like viewing a larger image using a popup lightbox effect, voting on the profile page, a Hot 100 charts, a quick follow button for easy stalking following, but other than that, there’s not much to it.

The project took me a bit less than 45 days from conception to launch and I thought I’d share the story.

A little background info
I work full time as a Lead Interactive Developer at Roundarch, a consultancy specializing in Rich Internet Applications. At the time that I created Hot Tweeters I was also being slammed at work, doing 10 hour days and taking work home on the weekends. Throw in several speaking engagements, blogging for the company and my own blog, trying to fit in my wushu training and you have someone who’s trying to bite off more than he can chew.

However with the help of another developer, my community manager/social media guy, my wife, and several of my coworkers who served as private beta testers, I was able to launch this site for very little money and a little bit of good old fashioned elbow grease.

My Inspiration
The reason for doing this project, among others, is because I am inspired by those who’ve created very successful websites for very low cost and very little effort. These include James Hong and Jim Young who created Hot or Not and the now famous Markus Frind of Plenty of Fish. The fact the Hot Tweeters is a site along those lines is purely coincidental though as I didn’t have them in mind when I came up with the idea.

I see these guys as sort of the commandos of the web. They were able to accomplish with very little what many ‘real’ companies can only hope to attain. And they did this with very little in terms of cash and human capital relative to others.

The Idea
If you look at the About section of the site, it says a bunch of dudes came up with this idea on a Friday night over some beers as a way to find hot chicks on Twitter. In actuality, it was one Asian nerd geek who thought it up on his train ride home. I figured the former made for a better story. The idea just hit me and I started sketching it down right away.

I came up with 4 versions of what was to be the “main game”. I had just come back from SXSW and Leah Buley’s talk on “Being a UX Team of One” was fresh in my mind. One of the thing she advocates is this forced creativity where you just come up with different designs just for the sake of it instead of just focusing on one. This way, the “better” version would just be apparent.

I settled on Design 4 for several reasons.

• Twitter profile images are small, putting only a few on the page is just wasting a lot of real estate. I wanted to be able to scan through lots of people really quickly.
• With Design 1, I might run into a bunch of non photo profile pics and that would quickly ruin my experience as a user.
• Design 2 just seemed like a lot of mental load having to rate each person from 1 to 10.
• Design 3 just didn’t seem to have a strong intuitiveness to me.

The Philosophy
I made a conscious choice not to have a 1-10 rating on Hot Tweeters for a couple reasons. First of all I wanted an upbeat site. I didn’t want someone to feel bad because they were rated ugly. This is because unlike Hot or Not where people upload pictures of themselves, Hot Tweeters allows you to vote for anyone on Twitter. If you thought somebody with a Twitter account was ‘hot’, then you can just vote for them. That’s a big difference between Hot Tweeters and something like Hot or Not. In Hot or Not, if you upload your picture and put yourself out there and if you get a low score that’s on you. However at Hot Tweeters a person could find themselves on there because somebody voted for them without them knowing. Thus I didn’t want somebody to come to the site one day and see they had a 1 out of 10 and feel bad.

The Visual Design
I knew from the beginning that I wanted the site to feel fun and light hearted. I knew that a site such as this could easily turn sleazy but if the site design reflected a fun attitude, perhaps it would be taken that way – just as a fun little site.

Originally I had the idea of doing a logo made up of a girly girl pink bird and a puffed up blue guy bird with their backs towards each other with their eyes looking towards each other. I quickly realized that it was going to take too long to create and settled on a much more simplified logo of a cute round looking bird. The male and female versions are just color swaps of each other in the vein of Sub Zero and Scorpion from days of old. If you look carefully at the bird, you will see that it’s just made of up of really simple shapes. I budgeted around 3 hours for the logo and probably spent around that much. The font was a publicly available font that was reminiscent of the Twitter font. The flame was introduced to convey the idea of hotness.

The Mentality
This was very much a guerrilla effort. The development team consisted of Joe and I working part time. I would release the most basic functionality with just a few bells and whistles and see how people would bite and see if it was worth putting more effort into it before building out something that nobody cared about. With such limited resources, I distilled the website down to the essence of the site, but I wouldn’t compromise on the user experience. Whatever I made, the mandate would be the same – make it a delightful experience to use and the users will come back.

The Development
I divided the development work between my developer Joe and I. I would do all the visual design, HTML, CSS, and some of the AJAX so Joe could focus on the back end. The reason I decided to have somebody help code on this project was so that I could get things done that much faster. Had Joe not helped me, it would have probably taken me 2 or 3 times much longer to launch because of my current workload. I ended up doing some of the backend+frontend work once all my UI work was done.

In about 3 weeks we had something up and running and I was soon playing with it. I think I’ll end here for this post. In the next post I’ll cover the remaining weeks.

Popularity: 2% [?]

I’ve been thinking about 3D desktops, alternative user interfaces, and user experience for a while now. I keep a sketchbook that has illustrations of some of my ideas. When I saw the Apple patent filings for their 3D desktop ideas, I was delighted to see that some other folks have very similar ideas to mine.

I hate 3D for the sake of 3D. When I think of adding a new dimension to something as vital as your desktop, many questions come up like:
What benefits does adding another dimension mean to the user?
Am I making certain tasks harder when I add another dimension?
What problem am I solving?

Watch this quick video on some of the ideas I’ve been tossing around.

Multiple Desktops
The Mac OS spaces have never made sense to me. I never use it, not because i haven’t tried. I’d rather stick to my dual monitor. But when I am out and about with only the 1 screen, I still don’t use it. Here’s why – When I put something in another space, I just forget about it. It’s out of sight – and out of mind. I rather just have tons of apps on one screen and use Expose to sort it out.

Having a shoebox/diorama analogy of multiple desktops makes more sense to me since I can zoom out and see where my other spaces are. I have a sense of the spatial relationships of multiple desktops as well and that is key.

Cover Flow on the Desktop
I’m a big fan of Cover Flow even before it was integrated in all the Apple products – when it was somebody’s plugin for iTunes. That’s right – it wasn’t create by Apple. However having it confined within the iTunes application feels restrictive. Once you have a 3D desktop, why not make cover flow a full class citizen of that desktop?

Carousel to Navigate Apps
This is probably one of my weakest ideas and needs to be fleshed out. The basic premise is once you have a 3D Desktop, your apps should exist in 3D space. I’m not sure on the benefits of the Carousel myself, but I felt it was a cool UI.

Using Head Tracking to “look around”, by looking around
To me, this concept is what makes a 3D desktop really cool. The scenario is this: Say I’m downloading something, I can put that window on the desktop on the side of my main one. When I want to check on the progress of the download, instead of having to hit keys on the keyboard to find out, I just very naturally look around to see how it’s going. This is a very natural interaction that doesn’t have to be memorized or taught. This interaction therefore has a low cognitive cost. Instead of having to explicitly take action via keyboard commands by switching desktops to see the progress and switching back, possibly losing context, I quickly glance over and come back to my task.

There’s a lot more than can be explored. Right now, the “floor” of the desktop has not been considered. Also, I have some ideas around 3d folder navigation that I can dive into in the next episode of 3D Desktop concepts.

Popularity: 3% [?]

Yesterday I gave a talk at the monthly Chicago Flex Users Group organized by Mike Epstein. In this presentation I give away all my tools and secrets on how I create great experiences for Rich Internet Applications. Here are the slides I promised.

Popularity: 1% [?]

On May 8th I as at RIApalooza Two, an unconference event for Rich Internet Application enthusiasts. Adam Flater and I gave a talk titled ‘RIA Beyond the Mouse and Keyboard’. Adam and I talked about how computing user interfaces are evolving and moving away from the current status quo of mouse and keyboard.

Adam talked about and demoed examples including his use of the mac accelerometer as an input device, his Lego Mindstorm robot controlled via Flash, and his mobile device, the Tesla Roadster.

I showed a couple videos of innovative uses of technologies such as augmented reality, touch computing, and the Wii balance board. Here’s a link to some of those videos. I demoed controlling a virtual 3D car with the Wii balance board, controlling a 3D earth using head tracking, combining Augmented Reality with Twitter, and my PostIt board with handwriting recognition. These are all part of a holistic vision of what constitutes a more natural user interface, moving away from the more artificial interaction that are the current state of input devices.

Here are some photos taken from Anthony Hand’s camera. My favorite picture has to be where I’m caught picking my nose – great.

Popularity: 1% [?]

Here’s a demo that illustrates my ideas on computer human interaction. Instead of controlling the movement of a 3D globe through the mouse and keyboard, why not move your head to look around the globe. You’ll need a webcam for this demo to work.

Side to side motion works pretty well. Up and down is a little iffy.

Moving around to see what’s on the other side is a much more natural and intuitive human behavior than say pressing some computer keys to change perspective of an object. I believe that as computers become more powerful and more and more people have to interact with them in their daily lives, computer scientists will have to design systems and software that provide a more natural user interface (nui) than what we currently have.

Although many people today deal with computers and the internet, this highly technical tool is still completely inaccessible to a large population because it is so difficult to use. By creating interfaces that are more natural to use, we make technology more approachable to the masses. That’s my 2 cents. Feel free to chime in.

Popularity: 2% [?]