Haze: Simple, Elegant, Awesome

It’s not every day (or every week even) that an app makes me sit up and say “holy crap, this is awesome!”. But the Haze iPhone weather app did just that for me this week.

Haze for iPhone
Haze for iPhone

Haze is a simple weather app that seamlessly brings together two important concepts of mobile interaction design: keep apps simple and focused, and make them engaging and fun to use. Haze nails it on both counts.

Unlike apps from The Weather Channel and other sources, which offer lots of data, features, and charts, Haze does just three simple things but does them very well — It tells you the current temperature, it tells you the likelihood of precipitation, and it tells you the amount of available sunshine for the day. Haze also uses subtle visual cues in its animated background to show if each of these are trending up or down over the next day.

Haze also incorporates fluid animations and audio feedback as you move between screens to create a rich and engaging experience. You can tap into each of the three main information points to get an expanded (but still highly visual) view of the information, but yet never feel like you’re swimming in data. Even in the “in-depth” view Haze uses the size of the infographic elements to indicate which data points are subordinate to the main one.

And real info junkies can easily swipe down to get five-day forecasts, which are also elegantly and simply presented. Add in different themes for a bit of customization and Haze seals it as a fun way to get basic but important information.

You can download Haze for 99 cents from iTunes.

iOS Icons For Web Apps

I just created a new set of iOS home screen icons for this website. Creating multiple home screen icons allows the icon that launches your site to look professional and crisp on Apple’s retina and pre-retina displays for iPhone and iPad.

Icons: Before and After
Icons: Before and After

It’s very easy to do. Just create a set of PNG image at 57×57 pixels, 72×72 pixels, 114×114 pixels, and 144×144 pixels. Create the images individually in Photoshop and don’t just resize the largest to the smaller sizes. Create the images as squares with 90-degree corners. iOS will take care of adding the rounded edges and reflective effect.

The image in this post shows the raw PNG I created and how it looked after iOS applied its effects. You can also tell iOS not to alter your image by using the “-precomposed” option. This approach is used by a lot of sites and apps like Path and Pinterest. Apple’s developer documentation will tell you how to do that.

Once your images are created, place them at the document root of your web server. Then add the <link> tags below in the <head> section of your site’s pages. And with that you’ll have nice clean home screen icons for people who want to keep your site one tap away on their Apple devices.

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />

The icons are used by the different devices in this way:

  • 57×57 will be for iPhone 3GS, 2011 iPod Touch, and older Android devices
  • 72×72 will be for iPad 1, iPad 2, and iPad mini
  • 114×114 will be for iPhone 4, 4S, 5, and 2012 iPod Touch
  • 144×144 will be for for iPad 3 and 4

For more information on configuring web apps, see Apple’s iOS Developer Library.

Adobe Shadow Device Mirroring

Adobe Shadow on an iPad, iPhone, and MacBook Pro
Adobe Shadow on an iPad, iPhone, and MacBook Pro

I recently started using a new tool for testing website designs across different mobile device screens without the hassle of having to refresh each browser I’m using.

Adobe Shadow is a free tool from Adobe that allows you to mirror your desktop Mac or Windows computer to multiple mobile devices. You can pair your desktop to iOS and Android devices, including the Kindle Fire. Shadow can connect to an unlimited number of mobile devices.

Adobe Shadow works by running an application on your desktop computer and using a Chrome browser extension to connect the desktop browser with your mobile devices. Your desktop computer and mobile devices have to be on the same network. The device synching worked fine on my home Wi-Fi network but I encountered problems with my wireless network at work due to corporate security settings that block certain ports.

Once the computer is paired with your mobile devices, the mobile displays are updated in near real-time as you browse on the desktop computer. This makes it easy to test things like media queries or any conditional logic that is using the user-agent string to tailor the layout for that device. This is done by sending a command to the mobile device that contains the URL of the page being viewed on the desktop.

Shadow also allows you to do remote inspection and editing of the HTML or CSS and immediately displays the results on all your mobile devices.

There is a video demonstration of Shadow on the Adobe Labs website.

Safari Reader Improves Mobile Browsing

One of the little-mentioned features in Apple’s new iOS 5 is the addition of Reader in Mobile Safari. Reader, which was introduced in desktop Safari last year, allows a user to click a button in the browser address bar to render a webpage in a user-friendly, text-only format.

Reader instantly turns mobile webpages that may be poorly designed or have small fonts into elegant and highly readable pages. All ads, photos, and graphics are stripped from the page. Reader also merges articles that may be spread across several pages on a mobile website into a single scrollable page. And as with all things Mac, the handling of typography is excellent.

Reader is based on technology licensed from Readability, which also created a bookmarklet version for desktop web browsers and is embedded in the Amazon Kindle and popular iPad applications like Flipboard and Reeder.

Below is an article from the Chicago Tribune using the normal Mobile Safari display and Reader. I know which one I’d rather read.

Mobile Safari Reader
Mobile Safari Reader

iPhone Stencils for Visio

I recently found a great set of stencils for wireframing iPhone apps and mobile websites in Visio. The stencil set was created by Jonathan Abbett of Beacon 16 and is available under a Creative Commons License.

The stencil shapes include:

  • iPhone
  • Navigation Bar
  • Search Bar
  • Browser Bar
  • Four and Five Button Tab Bars
  • Keyboard
  • Date Picker
  • More…

If you need a higher fidelity GUI design toolkit for iPhone and iPad, Speckyboy Design Magazine published a great list of resources last year. If you need to illustrate touch gestures in your wireframes, Luke Wroblewski maintains a Touch Gesture Reference Guide on his website.

iPhone Stencils for Visio
iPhone Stencils for Visio

App Store Flow on iPhone Could Be Streamlined

Normally I love the iTunes App Store, but not so much today. I was trying to add Kayak’s travel app to my new iPhone and found the experience to be full of unnecessary and redundant tapping.

This was my screen flow:

  1. Launched the App Store
  2. Clicked Search
  3. Typed “kayak” and clicked the Search button
  4. Tapped Kayak’s app on the list screen
  5. Clicked the Free button
  6. Clicked the Install button
  7. Received a prompt for my password
  8. Entered my password and click the OK button
  9. Received a message asking me to confirm I wanted to download the app since Apple had detected this was a new device
  10. Clicked the Continue button
  11. Received a prompt for my password
  12. Entered my password and click the OK button
  13. Got directed to billing page with a request to confirm all information (since this was the first time using this device)
  14. Entered credit card security code without making any other changes and clicked the Done button
  15. Returned to the Kayak screen
  16. Clicked the Free button
  17. Clicked the Install button
  18. Done

Did I really need to enter my password twice? The App Store should be smart enough to know I just entered a password when sending me to the billing information page. Normally I don’t mind having to authenticate when accessing billing information, but not when I just did it a moment ago and am finger tapping an iPhone.

Another redundant step was requiring me to tap the Free and Install buttons a second time after going through the setup screens. At that point I had gone through 36 taps, so I think I clearly expressed my desire to download the app (“Really, I do want it!”, I thought). The App Store should have just started the download.

A last unneeded step was asking me to update my payment information to download a free app. My guess is that was done to get my iPhone ready for seamless purchasing in the future, but that’s a business goal of Apple’s, not a user goal of mine. I just wanted to download a free app. Ask me to confirm my billing information when it’s really needed.

My entire Kayak download took 38 taps. Eliminating the second password prompt and the last two buttons would have cut it to 26, a 31% reduction in taps. That’s a lot in a mobile experience. Dropping the credit card setup for a free app would have removed four more taps. Luke Wroblewski stated it best in Web Form Design, don’t ask for data you don’t need to complete the user’s task at hand.

As I said before, I love the App Store. But its download flow needs some streamlining, especially in the mobile context. I’m surprised Apple missed this aspect of the store’s design given its usual laser-focus on all the small details. As Charles Eames said: “The details are not the details. They make the design.”

iPhone Prototyping Tool

Ever find yourself looking for tools to help you prototype apps for the iPhone? After an hour or so wasted looking for Visio iPhone stencils, I came across a PSD-based solution that did the trick for me. It is amazingly ease to use and resulted in some gorgeous high fidelity prototypes that very accurately conveyed the app’s design in a way that made it a breeze to sell my team’s idea. Give it a whirl, you’ll love it. You will need to have Helvetica Neue available. Download it free from the Teehan+Lax blog.