Number Only Keyboard for iPad

The iPad doesn't have a way to enter only numbers into a UITextField. Sure, you can use "numbers and punctuation", but that still gives the user a chance to enter errorous data.

To use:

keyboard = [[NumberKeyboard alloc] initWithNibName:@"NumberKeyboard" bundle:nil];
keyboard.textField = youTextField;
keyboard.showsPeriod = NO;
youTextField.inputView = keyboard.view;

 Also, release the keyboard in dealloc and #include "NumberKeyboard.h".

The GitHub project includes streatchable images for most key rows, so you can modify it into any number of different keyboards. It also has the PSD; the skys the limit.

https://github.com/stuartjmoore/NumberKeyboard

YouTube Icon for ICS

After reading the Android Design guidelines, I found a new appreciation and understanding for some subtle parts of the OS. The difference between “back” and “up” for instance (which seems a little confusing for any user, let alone new ones.

But, I also learned to hate some of the non-guideline following apps. Especially the Google ones. I always knew I didn't like the Google Voice app (the app I use 90% of the time), and now I can point to exactly why!

Since the YouTube app has the worst icon, and YouTube is slowly rebranding itself, I decided to whip up an icon that matches the guidelines and their new brand direction. Have fun.

A PSD may be here.

Hovering Tweets

I've noticed on the new Twitter web app a curious hover/click behavior. When you load up the website, you get a list of tweets, like so:

Then, when you move your cursor over one of the tweets, you see your pointer change to the hand (the universal symbol for clickable):

The highlighted red area is the clickable area, or at least it seems to be the clickable area. It's assumed that buttons are one solid shape (most likely a rectangle). But in this instance, there are links contained inside of the entire tweet, creating the button with holes.

This doesn't seem to be a problem, there is still plenty of area to click on the tweet after all. And it's unlikely you'll try and click the non-white space (à la the instragram link), but the white space changes upon hover. The "reply", "retweet", "favorite", and "open" links don't appear until you're hovering over the tweet. So, as you're speeding your mouse cursor over the tweet to expand it, new links get in your way and cause and accidental and unpleasant click.

The design is similar to the iPhone and Android apps. The tweet is so small, and your thumb so big, that the entire tweet needs to be a button allowing you to perform actions on it. But the tweet is only one button, there are no links inside of it. This design pattern is brought over to the web app, but as it's on the web, links are added (since there's a lot more room).

I would leave the clickable areas at just:

The entire tweet will still be a hoverable area to reveal the "reply", etc. links.

Minimizing the clickable area to expand the tweet sounds counterintuitive, but I think it would greatly ease the user experience. In this instance, the area isn't being modified as I'm moving my mouse.

Redesigning Quora - The TabBar

When the Quora app for iPhone was released, there was much fan-fair. I'm not a huge Quora user, but this certainly caught my eye. I couldn't help but take a look and was surprised by the UI. Not in a good way.

As a start-up darling (at least at the time), I thought Quora would have a better design. The standard iPhone UI elements weren't even the worst part. Just looking at the the screenshots alone confused me. "Home"? "Search and Add"? Add what? Notifications are a tab? None of it sat well with me.

If there's one thing wrong with the app, it's that its designed with a web browser in mind. Web apps and native apps may be converging slowly, but they still have destinctive UI elements. A web app can't look like an iPhone app, just as an iPhone app can't look like an Android app.

"Home"? iPhone apps don't have a home. There are main pages, but they are never titled "home".

Notifications are meant to seek you out, not you seek them out. Notifications are only new items for you to check out, they don't persist as an entire tab.

Search is a great option, as is adding a question. But they really shouldn't be shoved into one tab. If I want to ask a question, where does my instinct lead me? "Search & Add" definitely isn't my first choice. I don't want to search, I just want to ask a question (the system wants me to search so I don't add redundant questions). Search & add is easy to get away with on a web app because you can have a persisant textbox with the placeholder text "Search for or ask a question". App space is more limited.

Nearby seems pretty useless to me. When it comes down to it, it's just another way to search.

Profile is fine, ignoring any minor graphical errors.

Changes

The tabBar is the most important part of the app. It's the top most level of your UI. It lays out the entire organization of your content, so getting it right is nessecary. Here's how I would fix their layout:

The "Home" tab is fine in and of itself (I'll get to the list later), but it needs a new name. "Questions" works.

Search needs to be its own tab. Even if Search allows you to add a question, the user sees that as a last resort, not as an initial interaction.

Same goes for "Ask" (not add). When the user tries to ask a question that has been asked before, the app can still search and intercept them before they do. Just as with a lot of apps these days, the "Ask" tab is more of a button. It stands out and is centered, because it's an action that behoves both the user and the app.

"Notifications" is renamed to "Activity" because activity is persistant, notifications are not. I really wanted to hide the activity under the "Profile" tab, but this way keeps the symmetry. Activity being under profile wouldn't be such an issue, since users only need to tap on the tab when there is something to check out. When the activity tab doesn't have the red number above it, it's essentially useless.

"Nearby" has been completely removed and combined into "Search" (just as "Shuffle" is in "Home"). "Profile" is unchanged.

I forgot to mention the "About" button on the "Home" tab. This view is mostly FAQ and privacy policy, something apps don't usually include. Although you can't see it, the "About" section is moved to the settings app, as is with most apps.

Next?

There are still plenty of web to app translations that need to be done. Lists are definitely number one on my list, seeing as how they allow for the most creativity in this instance.

Transparent ModalViewController

Working on a new app, I wanted to have a membership card slide up and dim the background of the current view. Since the card has a few features, and can be presented from multiple view controllers, I decided to present it as a modal view.

Although modal views (on iOS) can't have transparent backgrounds, because the parent view is no longer drawn. The solution? Take a screenshot and put it behind the card. It's fast and simple.

https://gist.github.com/1279713