whatever happened, happened

While brainstorming ideas for my next iOS app, I come across the need to accept large text input on the iPhone. Given the small size of the screen, it’s hard to fit a whole lot of UI controls while keeping the simplicity of the app. In this post, I’ll visit different implementations of iPhone text input I found out in some of my frequently-used apps.

Let’s get started with something really simple. Like, the built-in Notes app with no added awesomeness rather than the Marker Felt font.

App with only an extra bit of functionality like the official Facebook app makes use of the same full-scale text view. The Lock icon at the bottom right corner reveals a picker which allows the user to set the permission for his post.

Posting Notes requires both the post body and a title, hence the screen is divided up into 2 different areas, with a thin line to separate them.

In the same vein, Simplenote offers a similar UI implementation. It, however, hides the above tag input by default and the user has to explicitly ask for it by sliding down the text input. That way normal users with only a handful of notes don’t need to waste their precious screen space for something they don’t use. One neat thing is that the existence of this feature is hinted by the thin line near the top of the text input, so even a first timer can easily find out about it without having to consult any documentation or README that they are guaranteed to ignore. “What’s up there? Maybe I should try to slide down the screen” - Bingo! You get the idea.

In contrast, Instapaper explicitly devotes some pixels to display the “Description (optional)” text on its Sharing screen. The rationale behind this, I think, is that the description text is meant to be pre-populated from the selected text in the current article; therefore, a placeholder can’t be used to instruct the user of what to enter in the text input.

What if there are more to offer the user than just a single extra button/text input? Apps like Icebird (Twitter client), Reeder (Google Reader client), Momento (diary writing) and Trunk Notes (personal wiki) display a toolbar right above the keyboard to give access to their goodies. Their use is straight-forward and doesn’t require explanation.

In case of Trunk Notes, the text field on the title bar accepts text input, too.

A horizontal toolbar isn’t the only solution. If needed, the screen can be divided vertically as well. The official Tumblr app, formerly known as Tumblrette, provides an example of this.

Slicing up the UI like this has its obvious disadvantage. The text input size is strictly limited and makes it more suitable for writing a short post rather than a full-length blog entry.

The official Twitter app, formerly called Tweetie, offers an interesting way to access its advanced functionalities. Tapping the small button at the bottom right corner of the text input slides down the software keyboard and gives way to geotagging, image uploading, URL shrinking, etc. Or, leave alone, and you will have a nice character count.

Other UI controls (e.g. geotagging status, attachment list) will only appear next to that button when appropriate.

Note that the user can also tap the title bar to select the Twitter account from which he wants the tweet to be posted. In case he is replying to someone’s tweet, he can slide down the text input to read this particular tweet. The only complaint is that it might be hard to find out about those offering. I had been using the app daily for months without ever knowing about the latter feature, and would have continued like that if I haven’t came across one particular tweet sharing this tip. Regardless, the beauty of the whole thing is astonishing.

Unlike mentioned examples, sometimes the developers need to customise not the text input area, but the keyboard one. Soulver uses its toolbar to deliver different choices of the keyboard:

As a bonus, the user can use the first button to hide/show the software keyboard at will. Nice touch.

On the other hand, Wolfram offers a way to extend the keyboard, and page through different character maps. As powerful and convenient as it might be, the result is rather horrendous.

That’s an extreme example.

Complexity and flexibility don’t always mean messy screen and TaskPaper proves that. Simply adding or removing a space can change the nature of a particular line from a task to a sub-task, and the ways you can manipulate them (double tap to edit, swipe from right to left to cut/copy/paste/delete, swipe from left to right to mark/unmark as done, hold down and drag to move it to another place, etc) are amazing given the fact that what you see all the time is just a screenful of text.

This concludes my rare blog post. If you’ve got any inspirational UI implementations that I haven’t mentioned, or just something to contribute, feel free to photo reply to this entry.

♫ iPhone 4 Plans

As much as I want to lay my hands on an unlocked, SIM-free iPhone 4, I simply couldn’t afford to pay £500 up front at this time, after spending an equal amount on my iPad, plus my new monitor and a few more things, just last month.

On the other hand, I need a new iPhone to test my apps on iOS 4 (this is more of an excuse than an actual need, to be honest). So, a subsided iPhone from one of these UK carriers is the way to go.

I’m with O2 right now, which means I could theoretically get an iPhone 4 at launch, and while the data limit is modest compared to the other carriers, the fact that I can have my iPhone unlocked the official way at any time during my contract is really compelling. The only drawback (a major one) is that O2’s 3G coverage seems to be the worst in the UK. Search Twitter for #o2fail and see for yourself.

Vodafone provides the best deal out of the three carriers who have announced their plans. No one is perfect, though. Vodafone doesn’t allow me to unlock my iPhone, during or even after the contract, and I don’t want to mess around with unofficial unlocking methods every time I upgrade my iPhone firmware.

Orange does allow carrier unlocking, but it’s obvious from the table that everything they provide with their tariff is more expensive than the others. Half the minutes, limited texts, etc.

T-Mobile has yet to provide their tariffs, yet I don’t want to switch to them given my girlfriend’s bad experience with them.

3 told the press that they’ll wait for the others carriers to announce their plans, and undercut them all. I have no idea whether they’ll provide official unlocking, though. Let’s wait and see.

♫ My (Updated) First & 19

Back in January I wrote about all the apps I put on my home screen as well as my dock. Since then, the landscape has changed dramatically. So, here it is - my updated First & 19:

• Mail, Mobile Safari, Music, Facebook (Free), Y! Messenger (Free): The same old things in their same old spots. Admittedly I don’t use Mobile Safari much, but I need it for my university network authentication (which, by the way, sucks big time). I don’t listen to music on my iPod these days, but instead enjoy podcasts. I highly recommend you to subscribe to The Conversation talk show hosted by Dan Bejamin. I have only gone through a handful of episodes, but they’re very insightful and entertaining.

• Tweetie (soon to be free), Reeder (£1.79), Instapaper (£2.99), Momento (£1.79): Again, same old trusty apps. All these apps are, like I said before, indispensable. I tried a couple of other Twitter clients, but always find Tweetie the best one out there.

• Ego (£1.19), My App Sales (€20+ for both the app & SVN access to the source code), and PositionApp (£2.99): I simply love stats & numbers. Ego gives my access to my site’s total hits, my blog’s number of RSS subscribers, my tumblelogs’ followers, etc. My App Sales bring me the updated number of App Store sales at noon every day, and PositionApp gives me an insight into my apps’ rankings across all App Stores.

• WriteRoom (£2.99) and TaskPaper (£2.99): Amazing apps written by Jesse Grosjean. You got to try out TaskPaper - it blows Simplenote out of the water. The interface is equally simple, but the app itself is much more powerful. Go read this review by Smoking Apples and you’ll get some ideas of what TaskPaper is capable of.

• ReaddleDocs (£2.99) and ReadMore (£1.19): ReaddleDocs replaces Good Reader for me. The interface is nicer and the feature set is quite the same, though I hate its in-app dock icons with a passion. Meanwhile, ReadMore helps me keep track of my reading progress and give me some incentive to continue my reading whenever I got bored.

• Tumblr (Free): I still prefer tumblr gear, but have to switch back to the official Tumblr app because of its multi-dashboard support. Maintaining more than one tumblelog is a big pain.

• Today Todo Pro (£2.39): A strange yet colorful todo list app for the iPhone. It doesn’t aim to be yet another 2Do in terms of features, which is a good thing.

• Words With Friends (£1.79): A great game you gotta try out. It’s too much fun and addictive and amazing. My username is ‘quanganhdo’ as usual - looking forward to playing against you.

Jesse Grosjean wrote about using Notational Velocity with SimpleText:

To integrate Notationl velocity with SimpleText for Mac:

1. Open Notational Velocity Preferences

2. Open “Notes” preference pane.

3. Select SimpleText’s folder for “Read notes from folder”

4. Under storage, select ”Storage and read notes on disk as Plain Text Files”.

Those switching from Simplenote like me might want to do 3 more steps:

5. Open “Editing” perference pane.

6. Deselect “Soft tabs (spaces)”

7. Convert previous notes’ soft tabs to real ones using Terminal:

perl -pi -w -e 's/ {4}/\t/g' *.txt

From then on, all notes will appear properly in Taskpaper for iPhone.

1. The price and availability date for the iPad in the UK has been announced. The 16GB Wifi-only model will cost me £429, which is the exact amount I expected. That means I will have absolutely no problem shelling out my hard-earned money on May 10th, the day I can pre-order the device. I’d receive it on the 28th, just in time I get back to Sunderland from my short trip to London. I can’t wait to see my workflow being changed dramatically by the iPad.

2. Yesterday I learnt about the Manga Rock iPhone app written by 4 Vietnamese students in Singapore. Some of my observations:

• Manga Rock seems to make use of the MBProgressHUD code to display its loading messages. I myself used it in some of my apps, and not until now I realise that it sucks. Instead of letting the user browsing around while the task is carried out in another thread, the whole UI freezes during the process. The wait really annoys the hell out of me.
• It has the same licensing issue as other manga reading apps based on One Manga, which means a large number of licensed popular manga is unavailable for reading (e.g. Naruto and Bleach). This quite limits the potential of the app IMO.
• There should be a way to remove partially-downloaded manga. They take up precious space.

3. This is also about Manga Rock: I found an amusing article on Người Lao Động praising the app developers for ‘successfully making a deal with Apple’. Every time I read an article like this, I feel a little bit sad for the so-called ‘reporter’. The fact that he has no idea what the App Store is about totally ruins the article’s otherwise interesting content.

4. I decided to create yet another tumblelog, namely Chém gió, available at http://chemgio.tumblr.com. Think of it as a site dedicated to the most ridiculous Vietnamese articles written about IT. Currently I have only a few links, so feel free to add your own.

5. I joined the iPhone Developer Program since last August, and had my first app approved for selling in November. Two third of a year has passed, and I quite enjoy the process. The amount of money I made greatly surpasses my expectation. I won’t disclose the exact number, but I guess you will be interested in this graph:

FYI, the graph shows the number of sales I had for all of my 6 apps since day one (4 iPhone apps, 1 universal app and 1 iPad-only app). I have no idea why sales suddenly shot up on April 1st, so don’t ask me about it. So far, I have spent zero dollar on marketting, and rely entirely on the word of mouth. As the number of sales have started to go down this week, I might make a few forum posts to get the words out soon.

For the record, the fastest reviewing time I experienced is 4 hours for an update, 4 days for an entirely new app. The slowest one had me wait for exactly 1 month before it turned out to be a rejection. One of my app was rejected 6 times in consecutive, which depressed me a lot, but in the end, everything went well.

No doubt I’ll renew my developer account once it expires this August. I have some ideas to improve my iPad-only app, but it has to wait until I get hold of the device. Having no iPad to test my own app sucks in every way.

That’s it for today.

This is inspired by the work done by the WordPress & Tumblr team, as posted here.

If you are using Tweetie 2/Twitterrific on your iPhone, use “http://linkhay.heroku.com” as the Twitter API endpoint.

• In Tweetie 2, tap “Accounts” → “+” → enter your LinkHay username and password → tap the gear icon → enter “http://linkhay.heroku.com/” in both fields.

• For Twitterrific, tap ”Sources” → “Edit” → “Add a New Account” → enter your LinkHay username and password → tap ”Advanced” → set “Base URL” to “http://linkhay.heroku.com” and disable “SSL”.

The following will work:

• View LinkHay’s first page (20 links)
• View anyone’s posted links (10 links)

Feel free to have a look at the source code and make changes to it as you see fit. It is released under WTFPL

My first paid app, Time Waster, is indeed a time waster. Never take off, modest sales.

The second one, .Vn, is doing okay. Popped to the 2nd place in the Top Overall ranking in the Vietnamese App Store in a few days, then it went down hill faster than I could imagine. Still #2 in the Productivity category in said store, though. Regardless of what position it might hold now, once Apple officially jumps into VN market, this app will be doomed. Mac OS has Unikey built right in, there’s absolutely no way Apple could let the iPhone be sold in the VNese market without a VNese keyboard.

The third one, Shopaholic, is currently waiting for review. I am requesting permission to sell the app from the people behind its API, so even I don’t know whether it would be a paid app or not. If yes, the price would definitely be $1.99.

The fourth one, [retracted], has been sitting in my App list for a long long time, yet it still couldn’t see the light. Guess what, this app has been rejected 3 times for the very same reason: It crashes on the test devices. Worst thing is I can’t even reproduce the bug using both my miserable 1st gen iPod Touch and my friend’s 2nd gen one.

Now I am eagerly waiting for my first App Store payment from Apple. Not much, but every penny counts.

Relevant links for you guys:

• TinEye - Reverse Image Search
• Vector Magic- Easily Convert Bitmap Images To Clean Vector Art

♫ My First & 19

• Mail, Mobile Safari, Music: Built-in Apple stuff that I can’t afford to push to the next screen. Truth be told, I hardly use iPhone Spotlight, so I rely much on my home screen to access frequently-used apps.

• Facebook (Free), Y! Messenger (Free): Again, for quick access to my communication apps. Both come with Push notification.

• Tweetie for iPhone (£1.79): Simply the best Twitter client out there. Push notification provided by Boxcar (Free).

• Ninjawords (£1.19): A simple yet well-designed dictionary app. As seen on Daring Fireball.

• iStudiez Pro (£1.79): Help me keep track of all my classes and assignments and exams and holidays. With all the different rooms and times, it is a very useful app.

• MoneyBook (£1.79): An eye-candy app to document where my money went. Pennies done right.

• WriteRoom for iPhone (£2.99): Love to compose my future blog posts in this app. Sync with SimpleText.ws.

• Simplenote (£1.19): Yet another Gruber’s recommendation. The fastest way to jot down my thought. Use together with DashNote for extra awesomeness.

• Outside (£1.79): Lovable interface to know what the weather’s like in the next few days.

• Stanza (Free): Reading a chapter of my to-read books while waiting for something (or someone) is the best way to kill the time.

• tumblr gear (Free): Admit it, the official Tumblr app sucks (don’t bother to link to it). tumblr gear is a better solution to check your dashboard.

• PomodoroPro (£1.79): If you’re using The Pomodoro Technique, you’ll know what this app does.

The last four apps that reside on my Dock are indispensable:

• 2Do (£3.49): Give access to my ever growing but hardly done todo list
• Reeder (£1.79): The best Google Reader app on iPhone.
• Instapaper (£2.99): Since I can’t read a long article on my laptop without being distracted, I choose to lie down on my bed and read it in Instapaper instead.
• Momento (£1.79): My secret diary

Since I have submitted .Vn to the App store for reviewing, I’d love to share some ‘behind the scenes’ information regarding this short project.

As far as I know, there is at least one Vietnamese keyboard solution for the iPhone, which is conveniently named VnKeyboard. It, unfortunately, doesn’t support iPhone OS 3.1.2 and I have no idea when it would be updated to do so. As you may have guessed, I decided to roll out my own app.

Spending a few minutes browsing the net gave me the impression that the new VnKeyboard is delayed by technical difficulty which are completely understandable for those entering the jailbreak realm. I simply didn’t have the time and talent to venture into that mess, so an Apple-blessed app (i.e. no deep system integration) was the way to go.

Following that route means I won’t have the ability to type Vietnamese anywhere in the system and have to open the app each time I want to do so. Sure it is a major drawback for some, but if I could live without a Vietnamese keyboard for more than a year now, I would have no problem accept this inconvenience. All in all, it’s me who would be the first user; cater for my need is the first priority.

And so, what I was about to have is a simple text editor. A big text area coming with a software keyboard, that is. I would be able to change between Vietnamese and English input mode with a tap of button. I could choose to input by TELEX or VNI method (not that I know how to type by VNI). VIQR wouldn’t be supported, since it is awkward to access these ^*.? characters and the like.

A typical use case would be like this: some Mr N. wants to type his Tumblr post in Vietnamese. He terminates the Tumblr app and exits to the home screen. He opens up my app and sees a big welcoming text area. He types his thought in, and types it in, and in. After finishing his masterpiece, he pleasely taps the Done button, chooses to copy the whole thing to clipboard, quits the app to fire up Tumblr, pastes that in and tap Publish to complete his adventure. What if he wants to type something else for his email? Well, just rinse and repeat. My app doesn’t run in background, sorry. It’s Quit - Launch - Type - Copy - Quit - Launch all over again.

Now that I had a clear idea of what to make, I went on to read some Vietnamese keyboard’s source code. For the sake of simplicity, I skipped Unikey and checked out various JavaScript-based projects, like AVIM, CHIM or Mudim. Each of their length is well over 1000 lines of code and honestly, they weren’t a pleasure to read. AVIM’s source code is cryptic, CHIM’s variable names are sometimes nothing better than a mixture of i, j, k and p. Ironically these variables make up the most important part of the source code, so I had a hard time tracing through the file trying to understand them. Not that I want to criticize any fellow developers, they all did a marvelous work. It’s just these projects’ lack of documentation makes me complain.

Anyway, here are some relevant links for those wishing to dive in:

• Hacking xvnkb: Part 1 and Part 2
• JavaScript - Detecting keystrokes
• Một ý kiến nhỏ về cách ghi dấu thanh trên văn bản tiếng Việt
• The right place of the Vietnamese accent
• Quy tắc đặt dấu thanh trong tiếng Việt

That’s it. See you in my next post on this topic (And in case you haven’t noticed, this is my first Project52 post).