mystcolor.github.com | James Tang's Blog

Simplicity isn't simple

2012-04-27T00:00:00-07:00

Remove: Get rid of anything that isn’t essential to the application. This could mean content, too; like the language you use in the navigation labels.

Organize: Arrange the elements of the interface so that they fit into logical chunks. This might mean based on a person’s mental model (how they think), or tie in to a more familiar interface pattern.

Hide: Place the most important elements within reach (make them obvious), and hide the others, making them accessible through navigation.

Displace: Pushing some of the functionality to another device, or feature, so that the one interface isn’t responsible for displaying every possible interaction.

When things are more organized and straight-forward, the effort behind are often less visible.

Participate on an opensource Github project, iOctocat

2012-04-15T00:00:00-07:00

I always love to know whether there are new watchers and forkers for my Opensource projects, even when I’m on the go. So what I do is to use my iPhone and browse github.com using safari, the ONLY problem is the page just not optimized for mobile experience.

> There is an app for that!

Right, the closest official app I found is the Github Issues, which lets me browse my own repos issues, others issues, just missing the details I wanted to know, my activity feed and forkers/watchers count.

I tried further to see if there’s any third party apps for that, and yes there are a few free ones like GitHubby, GithubView, etc, hmm… can’t expect too much.

I was going to start my own Github mobile client, and went to look for some existing API wrappers. A search on the keyword “github” brought me to this. .

iOctocat is a paid app on App Store, yet open source and welcome contributions. I immediately cloned it from dennisreimann / ioctocat and see if it fits my needs… Pretty close!

It got the Activity feed I wanted to see, list of repos of a particular user, but those numbers are missing from the list view. (YES I JUST CARE!)

It’s open source anyway, I can just patch it :) The code is clean enough for me to find where I should begin working with, so after about an hour of focused work, here I introduce my enhancement on ioctocat.

Thanks for Dennis Reimann for creating this wonderful app, you can find my fork here at mystcolor / ioctocat, and please support it from the App Store!

Update: 16 Apr 2012

This feature has been merged to the main repo, so I expect everyone would see it in the next version of their app release!

James

Stretchable images in UIImageView using IB only

2012-04-11T00:00:00-07:00

So maybe you wonder if there’s any way to use stretchable images without coding, but using Interface Builder only.

The problem is there seems to have no option for you to pre-configure your UIImage while you’re assigning an UIImage in IB, so here is how you can achieve the same thing by assigning the correct property to your UIImageView.

Stretchable images in UIImageView using IB only

View more presentations from mystcolor

Say goodbye to

- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;

And you don’t need to use a custom UIView subclass to override the drawRect: method anymore!

James

4 Tips on asking users to rate your app

2012-03-22T00:00:00-07:00

While an app having a good rating on app store helps promotes the number of downloads, some developers have been pushing too hard or making some mistakes that make their users have less incentive to rate their apps. Here’s some tips for it.

Never blocks the users work-flow. If you’re putting any alert box on app launch, while some libraries like iRate, Appirator make this insanely easy, I’d still recommend you to disable the app launch event. When I’m getting things done with your app, you know I’d click “No, thanks”.

Try to ask after the user accomplished some task after a few times, like if your app is a photo processing app, ask them after they finished saving the photo.
Understand how the app has been used. Ask your users directly and collect some data.

Check the end point of your app using analytics tools, such as Flurry. your app and by keeping the first point in mind, add to some critical flow which users actually reach.
Your users know when is the best time for them to give some credits. Make sure you have an explict button for them to have easy access to the rate system, the official way is just too cumbersome of anyone.

Juhani stated some pretty good suggestions on how to gently remind your users to rate your app at How to Ask Users to Rate Your App?.
The most important thing - Make your app awesome.

Remember after your users has rated your app, they are more easy to change their mind and drop a one star rating. Make your app awesome is always the key to win your users heart.

James

Pop-Under and Powerslide in iOS

2012-03-18T00:00:00-07:00

Please Steal My Ideas

A blog post by David contains a nice video demonstration on their Wikipedia app built in 2010 (which they’ve abandoned it), showing off two UX ideas including Pop-Under and Powerslide.

Using the technique of Pop-Under to avoid moving users away from current context while browsing external links is indeed a good solution, the same concept is exactly indential to the Folder pattern officially introduced by Apple which used to categorize apps at homescreen into folders. An open source project jwilling / JWFolders on Github has been out for a while to imitate SpringBoard’s “folders”.

I agreed the one finger horizontal reveal gesture (liked the Path/Sparrow for iOS app) could be easily activated by scrolling through content vertically without intend. But I am afraid the Powerslide which required two fingers horizontal sliding doesn’t really work for one hand navigation while you’re on-the-go, and it’s even harder to discover. Navigation bar only panning gesture recognition like the Facebook app could do the job, or we can simply steeper the panning gesture degree range like under 30 degrees down from which the author mentioned 45 degrees, I think that could be enough to reduce accidental activations.

Just note that there’s nothing against David, but because I loved to discuss things :).

A note on how Facebook syncs user experience across platforms

2012-01-29T00:00:00-08:00

Facebook has been one of the most popular platform on the web, and their mobile team are also working so hard to ensure everyone can have a great Facebook experience. Since the introduce of Facebook app v4.0, I think they made something worths me a second mention for their effort.

The shared navigation sidebar experience

No matter on Facebook’s desktop webpage, mobile page, and the mobile apps, we see the same navigation sidebar style.

And better yet their sidebar items syncs both ways on the mobile app and web, and you can directly edit your favourite list on v4.1 iOS mobile app.

If you’re an iOS developer, you’d know that the UIPopoverController is only available for the iPad SDK, and the Facebook mobile team took the hard path to build their own (or maybe not ;P), they still go for futher unifying the whole user experience across different platforms.

One thing to note is the those list of messages and requests on the app is cached after the first time access, (which you can try to scroll down to load the second page, and re-open the popup again to find page two doesn’t need to be load again). And it would be even better if the scrolling offset could be remembered as well.

The chat list, on the same right hand side, only when there’s enough screen width

This could matter to someone whom are serious Facebook chatter.

Conclusion

The above is just the part of the features that the Facebook team offers to their users, there are more like the new Bigger, better photos on the iPad app, the new Timeline layout available for mobile access, etc.

I really appreciate for their work and attempt to unify all user experience, for the same service across different platform, which we could have equally good product no matter where we are.

Open Source

If you’re interested on how to create the UIPopoverController layout on iPhone, you could check out my iPhone compatible UIPopoverController implementation bit.ly bundle for some open source projects on github.com

And there’re also some really good list of iOS Open Source Facebook/Path liked Sidebar Menu implementation also hosted on github.com

Let me know if you think there’s any other apps that worths some more attention, and you can also find me on twitter!

James

The real benefits on using Facebook/Path liked sidebar navigation in iOS apps

2012-01-02T00:00:00-08:00

We don’t have an official name for it, so I will called it the “Sidebar” at this moment.

The “Sidebar” navigation isn’t something that provided by the official SDK. Is it worth to spend time and effort to follow this trend and forget about common solutions, like the UITabBar or the old Facebook style dashboard launcher?

Before, we already have similar discussions as the iPhone App: Tab Bar vs. Dashboard (aka Grid Navigation). Or both? thread, and now the “Sidebar” is definately a new player.

First, let us have a quick remind on the original UITabBar and the Facebook dashboard launcher.

UITabBar

The problem of using the UITabBar is that it’s always there no matter the user needs it or not, which is waste of screen pixels especially on the iPhone and the iPod touch.

Another property is that assigning more than 5 view controllers to the UITabBarController would collapse the last tab into a “More” tab, which some may think it complicates the application hierachy.

Dashboard Launcher (Facebook app)

Using the dashboard, we gain back the precious screen spaces while the dashboard is only there when the app launches or until the user returns back to the main page.

However, some suggested it could still be insufficient even we got 9 icons at a page, and once it requires user to swipe between pages, it is not really much better than comparing with the “More” tab.

Why using the “Sidebar”?

Unlike the above approaches, that users would expect as simple as to see a new view controller, the “Sidebar” can provide a lot more info while presenting list of options, including pushing a new view controller, categories, browsing submenus, and even custom user actions, etc.

Consider the flexibility on using the “Sidebar”, custom accessory view, selected indexPath indication, section header and footer for descriptions, basically all goodies from using a UITableView.

Conclusion

The default UITabBar is definately good for situation that the tab bar is needed to be always there. But if you think you needed more screen estate, maybe you’d now really consider using the “Sidebar” for navigation.

Open Source

Since we don’t have an official implementation for it, maybe you’d like to checkout the few open source library on Github that aimed to provide this function, including my own implementation JTRevealSidebarV2 or others good work in my bit.ly bundle.

Let me know what you think!

James

My first github blog

2011-12-30T00:00:00-08:00

Using github for blogging sounds cool to me. Will be trying to post something useful here starting in 2012!

NSStringf. Simpler printf styled +[NSString stringWithFormat:]

2011-08-27T00:00:00-07:00

If you thinks that +[NSString stringWithFormat:] is simply annoying.

If you missed the C style string formatter like printf() or NSLog().

[NSString stringWithFormat:@”Why should I type this long?”];

NSStringf(@”It’s just so much easier. %@”, @”Really.”);

Rendering any UIViews into UIImage in one line

2011-08-25T00:00:00-07:00

Looks like you’d like to make some snapshots of your application, or maybe capturing partial UI elements on the screen for caching or saving? You can achieve this in just one single line like this.

UIImage *viewSnapshot = [myView toImage];

Add this UIView+JTViewToImage category to your project, and you’ll also needed to link <QuartzCore/QuartzCore.h> framework too.

In advance, if you want to make sure you’ve the exact size of the static image output, try this line instead.

UIImage *viewSnapshot = [myView toImageWithScale:1];

This will tell your app to ignore the screen scale and simply reference to the size of the view bounds.

Loading a Nib file programmatically using NSObject category

2011-08-22T00:00:00-07:00

Maybe you’ve an IB created uitableviewcell.xib, or some kind of uiview.xib wanted to load to your code-based view controller, and you come out finding it’s not that straight forward just to do this simple job according to the official Resource Programming Guide

Isn’t it ideal to load a nib file using one line like

MyTableViewCell *cell = [MyTableViewCell objectWithNibNamed:@"MyTableViewCellNibName"];

Add this NSObject category make this possible

Easy enough?

Creating a placeholder UIImage dynamically with color

2011-08-22T00:00:00-07:00

Ever needed a placeholder color for your lazy loaded table view cell image view? Typically can create a 1x1 pixel image in PhotoShop, add it to your project, then load it with UIImageNamed. Can’t imagine how lots of effort and steps, and if the placeholder color are requested to be updated, you’d have to repeat the process all over again.

If you needed work with this kind of situations a lot, lets do it programmatically and DRY! Consider the following UIImage+JTColor category.

Usage:

#import "UIImage+JTColor.h"

UIColor *color = [UIColor lightGrayColor];   // Or your whatever UIColor
imageView.image = [UIImage imageWithColor:color];

Nothing magical but will saves you a lot of time.

Cancelable Scheduled Blocks in Objective-C

2011-08-20T00:00:00-07:00

Sometimes you’d really want to perform a delayed action for your apps. We’ll create a category on NSObject to provide a really handy usage.

The best thing with this snippet is your scheduled operations are cancelable, so you can choose to only perform your latest triggered operation (e.g. for your table view cells maybe?)

Usage:

[self performBlock:^(void) {
     NSLog(@"delayed operation!");
} afterDelay:2];

Handy right?

You may also interest about how others doing in alternative ways.

Delayed Blocks in Objective-C

Easy Delayed Messaging using NSProxy and NSInvocation

mystcolor.github.com | James Tang's Blog

Simplicity isn't simple

Participate on an opensource Github project, iOctocat

Update: 16 Apr 2012

Stretchable images in UIImageView using IB only

4 Tips on asking users to rate your app

Pop-Under and Powerslide in iOS

A note on how Facebook syncs user experience across platforms

The shared navigation sidebar experience

The popover access to Friend request/Messages/Notification on v4.1

The chat list, on the same right hand side, only when there’s enough screen width

Conclusion

Open Source

The real benefits on using Facebook/Path liked sidebar navigation in iOS apps

UITabBar

Dashboard Launcher (Facebook app)

Why using the “Sidebar”?

Conclusion

Open Source

My first github blog

NSStringf. Simpler printf styled +[NSString stringWithFormat:]

Rendering any UIViews into UIImage in one line

Loading a Nib file programmatically using NSObject category

Creating a placeholder UIImage dynamically with color

Cancelable Scheduled Blocks in Objective-C