Stephen Martin

Taking Screenshots on Mobile Devices

While working on a blog post, I needed screenshots of a mobile web app on various devices. Decided to throw together a short list of instructions here for anyone that needs to do the same.

iOS

Requires

• iPhone OS 2.x

Probably the easiest. Hold down the "Home" button and press the "Power/Sleep" button. The screen will flash and the photo will be saved in your photo library.

Android

Requires

• Android SDK
• USB Debugging Enabled on Device
• ddms (in SDK "tools" folder)

Head over to your android SDK folder, there is a tools folder that contains an app called ddms (Dalvik Debug Monitor). Make sure your device is connected to your computer. Open the ddms app, navigate to the screen you want to screenshot on the device, select your device from the list and press ctrl-s. This will screenshot the current screen and bring up some options, one of which is to Save the screenshot.

BlackBerry Torch

Requires

• CaptureIt or similar screenshot app
• Convenience key set for CaptureIt

This was probably the most difficult screenshot to grab. On the BlackBerry I was using (9800, v6.0), the menu option for CaptureIt would not work within the web browser. I had to assign a convenience key to CaptureIt, then I was able to snap the web browser's current view. Hopefully that small bit will save you the 30+ minutes it took me to figure that out.

Low-cost branding for packaging

When I started my little sketchbook business I was shipping all of the sketchbooks in USPS provided packaging. After some of the long distance deliveries began to experience damage, I switched to easy-fold kraft mailers made for shipping books. The mailers held up well and were fairly easy to assemble, pack, tape and label.

After shipping a few hundred, I realized that I was missing a really awesome branding opportunity.

I came across Simon Stamps. They make custom wood handle or self-inking rubber stamps. The process for creating a custom stamp is super easy. I just uploaded my logo, selected the appropriate size stamp and selected some ink. I was able to find a blue ink that was really close to the blue color in the App Sketchbook logo.

It took about an hour or so on a weekend to stamp my shipment of boxes from Uline.

How much? The custom stamp, ink pad and shipping was only about $36 total.

iPhone Form Field Design Patterns

When designing iPhone apps, entry fields seem to be where I struggle the most. While I definitely agree that a mobile device is not the best place for data entry, there are cases where it's necessary to have a series of entry fields. So after you've spent time refining the form process and the number of entry fields in your iPhone app, what options do you have for layout and design?

Left-align, bold label and inputs

This pattern can be seen in Mail's Account Info view. Touching inside of the entry area activates the keyboard.Probably the most common form pattern used.

Left-align labels and hinted inputs

In Reeder for iPhone, this is the style used for username/password combinations for setting up service connections. In the case of Instapaper, you may or may not have a password. Rather than mark fields optional or display external help text, the instructions are there in the input area.

No label, hinted inputs with clear button

MailChimp for iPhone uses this for username and password fields when logging in to your account. This is really useful in 1-3 field forms. Past three fields, there's some recall involved for the user. "Why did I put my first name in that box? Is it my screen name, display name, first name or user name?" They would need to clear the field for the hint text to be visible again.

Right-align label with action button, active label

In Apple's Contacts app, you have the ability to add/remove fields and specifiy custom labels. This app implements a right-aligned label with an entry field, hint text and clear button combined with an add or remove button which is shown to the left of the field area. They also use a vertical rule between the label and entry field. The label can be tapped so you can edit the label.

Multiple fields, single-entry view

OmniFocus for iPhone has a tappable row in their initial entry form which brings you to a Title and Note entry view. The Title field and Note field are stacked, leaving room for the keyboard. The navigation bar title doubles as the field labels in this case.

This is just a small sample of the many variations for iPhone entry forms. When starting to design forms for your own app be sure and take note of the number fields, context for each field and field variations.

A "Flurry" of answers before updating your iPhone app

While working on the latest version of the MailChimp iPhone app, I decided to look into our Flurry analytics to get a baseline for where our users were in terms of devices and OS versions.

The results turned out to be very valuable.

They're still using 3.1.x

A good majority of our app users have not been upgraded their phone OS recently. There's a ton of reasons why you wouldn't upgrade, but if analytics from the web hold true for mobile, it's just not common for people to upgrade *anything* unless absolutely necessary or prompted by the OS. And don't count on OS upgrades, as some people will ignore those as well.

What about retina display?

A quick glance showed that the iPhone 4 is doing quite well in terms of model distribution across our active sessions. So, we took some time to update the interface and app icon.

If you're not in your mobile analytics everyday, at least take a few minutes before planning your next release to get a baseline.

Cocoa Camp Recap, Sample Files

As promised, a brief recap of my Cocoa Camp presentation.

Iterative iOS Design

Sketch

Start with sketching, doesn't have to be perfect. You're just dumping your ideas on paper. I use an App Sketchbook (a little biased on that) but any notebook, notepad or scratch paper will do the trick.

Tip: The name of the event you attended could come in handy at checkout if you want an App Sketchbook, just saying.

Wireframe

Pull together a simple wireframe of your ideas and refine the interface, using the HIG as a reference to plot out core controls.

OmniGraffle UX Template

IB/GUI Kit

Translate your wireframe (or sketch, if you skipped wireframing) into stock controls, using Interface Builder or one of the GUI Kits available for iPhone/iPad design.

Great list of GUI kits at Speckyboy Design Magazine.

Customize

Here's a sample customization of the Cocoa Camp app Schedule view that I didn't have time to run through live. It includes the grid layer from the GUI template I use.

The Cocoa Camp app is a great example, because it's already gone through the 2nd and 3rd phases mentioned here. It's built with stock controls and it's wide open for customization.

Hope you enjoyed the talk and have fun with your future designs.

Next Pint on App Store, Lessons in Private APIs

Mark and I submitted an app a few weeks ago but were rejected for using a private API, which I'll explain in a minute. But first:

Really excited to say that, after an interesting (and long) review process, Next Pint is now available on the app store.

It's a really personal project that we started working on for fun. When we were in San Francisco for the WWDC sampling some local beers, it occurred to us that we should be keeping track of these craft beers we were drinking, especially the ones we liked. We had already started working on a beer app for a specific club, but felt like the app needed a broader audience. So, Next Pint's focus changed and we went after a simple task: Find and keep track of beers and Tweet the beers you're drinking.

Private APIs

The first initial drafts were pretty simple, but we eventually came up with a nice theme and carried it throughout the app. According to Apple, we carried it out a little too far. In order to theme the search bar, we used a private API in attempt to tighten up the user experience. Unfortunately it backfired and Next Pint was rejected.

We fixed the design and jumped back into the review process.

We feel like the search bar doesn't fold into the design as well and that this is a compromise. After hearing so much about creating rich user experiences at the WWDC, this seems really hypocritical of Apple. Our guess is that they would want us to roll our own search bar rather than customizing the stock control.

With that said, we're completely pleased with our first release and hope Apple will open UISearchBar a bit more in the future.

My iOS SXSW Panel, Feedback Welcome

Yesterday SXSW opened up their panel picker. I've learned so much about designing iPhone/iPad applications this year, I decided to submit a panel.

You can vote here:

http://panelpicker.sxsw.com/ideas/view/6016

But first, a little backstory

When I was first asked to design an iPhone app I had no idea where to start. I downloaded all of the developer tools and followed all of the instructions for setting up my machine to work on an iPhone app.

I was presented with lots of unfamiliar things like XCode, Interface Builder, Certificates and Key Chain management. Not to mention, I hadn't written a line of Objective-C in my life and had never worked with the Cocoa framework.

But there had to be plenty of tutorials online, right? Not really.

You get to choose from PSD templates, Illustrator templates, screenshots and how-tos for creating stunning apps. I couldn't find one single post or tutorial on how to actually build out the assets.

After a few months of working on a small app, I learned my way around XCode (a little), how to prepare images for iPhone portrait and landscape, a little something about stretchable buttons and dove into multiple button and table cell states for touch interaction.

This is the foundation for my SXSW talk. If it sounds interesting to you, please vote for it.

iPhone App Template, Inspired by 44px Rhythm

After attending Josh Clark's iPhone UI presentation at SXSW, I came home and put together a PSD file with a 44px horizontal grid for aligning my app designs. There's more about it in the presentation, but essentially all of Apple's core apps are designed with this 44px rhythm in mind. There's also a good bit of Josh's book, Tapworthy, dedicated to explaining the "44px rhythm."

What's in the template? Not much and it's only for portrait mode right now.

• Empty tab bar
• Bar button shapes
• Search input shape
• 3 stock type treatments
• Static keyboard
• Grid layer and guides
• Guide for the tab bar and "safe area" above for badges
• Single Grouped table cell (2 sizes)

Experimenting with UI Patterns, Sync, Disclosures

A few months ago, I had the pleasure of working with @cricketgeek on a Phone app he was building for ShootQ. It's a pretty deep app and pulls in tons of data from the ShootQ web app.

One of the challenges we faced early on had to do with showing "Shoots" that you had synced vs. 'Shoots" that you still had to sync with the web server. As not to go into detail about what a shoot is, I'll refer to it as a project, since it has a subset of items and tasks.

Projects are listed out with disclosure indicators, allowing you to drill down into more specific details about the project. In order to do this, the app needs to sync the project with server and gather the latest data.

Rather than show another date (the creation date is already part of the project), we opted for changing the disclosure icon to a sync icon if the project had not been synced.

It's just a small indicator of what's to come when you tap a specific project. Sync or view.

This becomes important if you lose your data connection. You'll know which projects don't have the most up-to-date information.