iPhone

iPad Keyboard Layout WTF

You blew away 500$ on the craps table at Vegas flirting with the waitress in the low cut dress. I bought an iPad. So let’s call it even and stop judging, shall we?

Since everybody and their mother is writing an iPad review, I’ve decided to do the Internet a favor and not contribute to the hypefest. Instead, let’s talk about an interesting “design bug” in the keyboard layouts.

Due to the touch screen nature of the device, the iPad takes a leaf from the iPhone and implements multiple keyboard layouts, depending on the application context. I’m calling four of these layouts “Email mode”, URL Mode”, “Text Mode” and “Special Character Mode”. Here’s a side-by-side of the first three modes:

This morning, my roommate Meg pointed out an interesting observation in the Text Mode layout. the iPad has an interesting placement of the question mark (”?”) character as a shift-modifier for a comma(”,”). Now, there’s this “?123” button that when pressed, shows you special characters and number keys. But when you press it, the “?” key disappears! Where did it go?

Closer inspection shows that it has moved to the center of the keyboard. This is odd, you’d think: The question mark has always been right next to the shift key since the beginning of time. Further, this bizarre disappearing act when switching modes is unintuitive. Why would someone make such a design decision? Let’s take a look at iPhone’s Special Character Mode for an answer:

Notice how the “?” character on the iPhone is at the center, unlike classic keyboard layouts, where it’s to the left of the shift (which in turn has been replaced by the backspace key). The iPad is clearly trying to maintain consistency with it’s iPhone heritage. However, since it is a very different beast, it also tries to be change things up a bit and borrow from it’s big-boy-computer heritage; ending up with strange design oddities like these. Which begs the question, should a tablet be designed as a larger phone, a smaller computer, a bit of both, or just something completely different?

While this is a fairly minor quirk, it is representative of many oddities in the design of the interface across the board. Despite Apple’s willingness to throw the past out and redesign UIs, the need for consistency with its own family of products often creates ugly contradictions.

Visualizations for Navigation : Experiments on my blog

This is a meta post describing two features on this blog that I don’t think I’ve documented before. Apologies for the navel-gazing, I hope there’s enough useful information here to make it worth reading

Most folks read my blog through the RSS feed, but those who peruse the web version get to see many different forms of navigational aids to help the user around the website. Since the blog runs on Drupal , I get to deploy all sorts of fun stuff. One example is the Similar Entries module, that uses MySQL’s FULLTEXT similarity to show possibly related posts1. This allows you to jump around on the website reading posts similar to each other, which is especially useful for readers who come in from a search engine result page. For example, they may come in looking for Magic Bus for the iPhone , but given that they’re probable iPhone users, they may be interested in the amusing DIY iPhone Speakers post.

The Timeline Footer

However, given that this blog has amassed about a thousand posts over seven years now, it becomes hard to expose an “overview” of that much information to the reader in a concise manner. Serendipitous browsing can only go so far. Since this is a personal blog, it is interesting to appreciate the chronological aspect of posts. Many blogs have a “calendar archive” to do this, but somehow I find them unappealing; they occupy too much screen space for the amount of information they deliver. My answer to this is a chronological histogram, which shows the frequency of posts over time:

Each bar represents the number of blog posts I posted that month, starting from August 2002 until now2. Moving your mouse over each bar tells you which month it is. This visualization presents many interesting bits of information. On a personal note, it clearly represents many stages of my life. June of 2005 was a great month for my blog — it had the highest number of posts, possibly related to the fact that I had just moved to Bangalore, a city with and active Blogging community. There are noticeable dips that reflect extended periods of travel and bigger projects.

In the background, this is all done by a simple SELECT COUNT(*) FROM nodes GROUP BY month type query. Some smoothing is applied to the counts due to the high variance, for my usage, Height = Log base 4 (frequency) gave me pretty good results. This goes into a PHP block, which is then displayed at the footer of every blog page. The Drupal PHP snippets section is a great place to start to do things like this. Note that the chart is pure HTML / CSS; there is no Javascript involved3.

The Dot Header

Many of my posts are manually categorized using Drupal’s excellent taxonomy system. A traditional solution to this is to create sections, so that the user can easily browse through all my Poems or my nerdy posts. The problem is that this blog contains notes and links to things that I think are “interesting”, a classification that has constantly evolved as my interests have changed over the past decade. Not only is it hard for me to box myself into a fixed set of categories, maintaining the evolution of these categories across 7+ years is not something I want to deal with every day.

This is where tags and automatic term extraction come in. As you can see in the top footer of the blog mainpage , each dot is a topic, automatically extracted from all posts on the website. I list the top 60 topics in alphabetical order, where each topic is also a valid taxonomy term. The aesthetics are inspired by the RaphaelJS dots demo, but just like the previous visualization, it is done using pure CSS + HTML. The size and color of the dot is based on the number of items that contain that term. Hovering over each dot gives you the label and count for that dot, clicking them takes you to an index of posts with that term. This gives me a concise and maintainable way to tell the user what kinds of things I write about. It also addresses a problem that a lot of my readers have — they either care only about the tech-related posts (click on the biggest purple dot!), or only about the non-tech posts (look for the “poetry” dot in the last row!).

This visualization works by first automatically extracting terms from each post. This is done using the OpenCalais module (I used to previously use Yahoo’s Term Extractor, but switched since it seems Yahoo!‘s extractor is scheduled to be decommissioned soon). The visualization is updated constantly using a cached GROUP BY block similar to the previous visualization, this time grouped on the taxnomy term. This lets me add new posts as often as I like, tags are automatically generated and are reflected in the visualization without me having to do anything.

So that’s it, two simple graphical ways to represent content. I know that the two visualizations aren’t the best thing since sliced bread and probably wont solve World Peace, but it’s an attempt to encourage discoverability of content on the site. Comments are welcome!


Footnotes:

1 I actually created that module (and the CAPTCHA module) over four years ago; they’ve been maintained and overhauled by other good folks since.

2 Arnab’s World is older than that (possibly 1997 — hence the childish name!), but that’s the oldest blog post I could recover.

3 I have nothing against Javascript, it’s just that CSS tends to be easier to manage and usually more responsive. Also, the HTML generated is probably not valid and is SUPER inefficient + ugly. Hopefully I will have time to clean this up sometime in the future.

Tapbots goes fulltime

The Tapbots duo are quitting their day jobs to work fulltime on their iPhone app company:

Longer term we aren’t looking to get any VC funding, grow to 100s of employees or get bought out by some big corporation. We may get help with support, testing and/or marketing, but development and design is going to just be us two for the foreseeable future. We think that’s the best way to keep the quality of our applications at the level that everyone expects. Our goal is to produce about 4 applications a year. We aren’t going to shovel out crap-ware to cash-in on our names. We aren’t going to write the next Office or Filemaker. We are going to write simple but incredibly polished applications that are created specifically for the iPhone/Touch devices. Two guys, lot’s of passion and a lot of hard work, that’s the Tapbots way.




Two guys, two popular iphone apps (“Weightbot sold 100k copies in its first 100 days, Convertbot is selling at about twice that rate.”), one mission to make quality apps. Good luck, guys!

|

Advanced Location Tracking with Locomatix

The good folks at Locomatix just released their iPhone app My Aura :

The app shows a lot of promise. It even does UM Magic Bus Tracking! It’s definitely way ahead in terms of advanced features like real time alerts and location and time based privacy settings. Great work guys!

| |

Magic Bus for the iPhone

The Magic Bus project at our school enables students to track all the buses on the university bus system in real time, using GPS. They have a really cool Google Maps mashup, with little blue buses crawling around Ann Arbor’s map. Since these interfaces are quite detailed and javascript heavy, they don’t really lend to a great user experience on the iphone (actually, i dont even know if the mashup works on the iphone).

Enter Magic Bus for the iPhone, available at

http://arnab.org/mbus

This web-app simply takes the Magic Bus data feed and reformats it in an iPhone-friendly manner. Each route is listed in a section with its stops, and the number of minutes until the next bus (and the ones after them) at that stop.

IMG_6796

Tap on “prefs”, and you can pick and choose only the routes and bus stops you are interested in, since it’s a little unwieldy to see 43 bus stops and 9 routes at the same time. (This also makes the load times faster)

IMG_6798

Ironically, I wrote this almost a year ago; I just didn’t have the time to document it and tell people about it. Hopefully, people will use it now!

|

tech and the evolving dinner drama

Facebooker Dave Morin recollects a story so so very familiar to me (sorry Mom! :P ), but adds an interesting observation:

My parents would inevitably yell down to my room, “time for dinner!” To which I would respond, “ok, just a minute!” I would then continue doing whatever I was doing on the computer until my parents would inevitably get pretty mad that I hadn’t come to eat dinner yet. I think most of my generation probably knows exactly what I’m talking about

This was, and probably still is, pretty annoying for parents worldwide.

Last night I met up with some new friends in Geneva, and we were having a conversation about life, family, and technology. At one point we started talking about the iPhone and what a great new innovation it is. One of the guys mentioned that the best new thing about the iPhone is how it ha changed his kids behavior around dinnertime.

Now, when he says “time for dinner!”, his kids come running, iPhone in hand, right to the dinner table.

Now, the iPhone is an incredible new platform that we are all excited about for various reasons. But getting more kids to the dinner table again? That sounds like social progress to me.

| |

selected clips from david o'reilly

David O’Reilly recently shot to fame in the tech-geek land thanks to a seemingly authentic preview of his iPhone app, iHologram. A few hours and hundreds of thousands of page impressions later, it turns out the app is only a concept video and that David’s only a filmmaker, not the second coming of Obi-wan. He is, however, a rather talented film maker; lending his animation talents to productions such as Son of Rambow and The HitchHiker’s Guide to the Galaxy. His Selected Clips video is rather surreal, and worth the two minutes and twelve seconds of viewing time:

| |

DIY iPhone amplifier

I was cleaning up my home directory when I found this amusing picture I took a while back:
iPhone amplifier
I like to listen to music while cooking, but since most cooking is inherently noisy, the diminutive iPhone in-built speakers need some form of amplification to find good use. Enter the Arnab 2000: Zero-power amplifiers for the Kitchen! Built with oven-safe glass and ceramic, this incredible invention creates a nice little acoustic chamber that projects out the sound with a richer and louder quality! Can also be disassembled to be used as mixing and serving bowls!

Note: Keep away from the primary cooking area, especially when you’re frantically looking for a receptacle to pour fresh-cooked hot curry.

| |

i(mproper)Phone

yet another chat:

friend: i was eating lunch solo yesterday
friend: so i decided it was gonna be lunch and a movie
me: :D
friend: (i bought princess bride on itunes a) to have, and b) to have something on the phone)
friend: so win.
me: yeah, it’s like a 4” friend that gives you endless fun
friend: yessir.
friend: and the iphone’s like that too!

|

using the iphone without gloves

Carrying an iPhone in freezing temperatures is quite a task considering that the touch screen interface relies on capacitance, and the only surface that seems to work for that is your skin, or an expensive high-tech glove, which I refuse cave in and buy. I wanted to make my own!

So I embarked on an expedition, taking pretty much everything and sliding it across the screen, in the hope of unlocking the device. Note: some of the things I try shoud not be tried on your iPhone, unless you have a mylar screen on it (I use BodyGuardz). Here are my results:

1. Erasers don’t work.
2. Pencils don’t work.
3. Metal Knives, coins don’t work unless I touch them.
4. Q-Tips don’t work.
5. Plastic pens don’t work.
6. Felt tips don’t work.
7. Sharpies don’t work and stain the screen protector.
8. Silicone skins for the phone don’t work.
9. Wet rags don’t work.
10. Q-Tps dipped in moisturizer don’t work.
11. Q-Tips dipped in resin rubber glue don’t work.
12. Glue sticks don’t work.
13. Cheese sticks don’t work.
14. My Nose works.
15. My Tongue works.

So there you are. Answering the phone when I’m outside bracing the elements now involves a peck and a swipe with my stubby nose. I must say though, flipping through contacts with a lick of my tongue is a gross but effective technique. And it seems like I’m not the only one, there are many like me.

This quest is not over folks; I intend to search on, and report back my results to my beloved readers. Till then, if you see someone trying to smell and lick rectangular glowing objects in their hand, worry not, they’re just trying to make conversation. :)

|