Forecast: A Rich HTML5 Weather App

It seems like every other day someone is launching a new weather app in Apple’s App Store or on Google Play. But it’s not everyday that someone releases a weather app with a rich user experience delivered in HTML5.

Forecast is one notable exception. The app uses delightful interaction design, a drop-dead simple information architecture, and fluid animation and transitions to create an incredibly rich native app-like experience. Once the app is added to an iPhone home screen it can be launched as a full-screen web app that provides a polished and elegant experience. The app also works beautifully on my Samsung Galaxy S3. It’s a great example of what rock-solid web developers can deliver to the mobile browser. You can also use Forecast on your laptop if you allow it to access your current location.

The app features a timeline-based look at precipitation projections and cloud movement. The app is playfulness and user engagement at its best. For tablets it includes an experimental feature called Time Machine that lets you see the weather for a given location in the past or the future.

Forecast merges multiple data sources and makes its data available via the Forecast Data API. Accoridng to Forecast’s blog, it provides its best hyperlocal coverage in the U.S., parts of Canada, Ireland, and the UK.

Forecast presents an exciting example of the capabilities now available on the mobile web.

Forecast Summary and Detailed Daily View
Forecast Summary and Detailed Daily View
Forecast Regional Map and Seven-Day View
Forecast Regional Map and Seven-Day View

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.

Siri’s Apple Store Integration

Siri Apple Store Search
Siri Apple Store Search

Apple last week updated its store app for iOS to include integration with Siri for speech-based search. You can now ask Siri questions like “How much does the new iPad cost?” and “Where’s the nearest Apple store?”. Siri searches like these can land consumers on the store locator results page or product pages for iPods, iPhones, and other gadgets.

The integration is provided through Siri’s interface with search engine Wolfram Alpha. Wolfram also enables Siri to search thousands of appliance and home computer products from Best Buy. Some of this search capability with Siri was available with previous versions of the Apple Store app, so it’s not clear what the latest app version offers, except perhaps more consistent search results.

One downside of the Siri Apple Store integration is that most users (except the most hard-core Apple fans) will not know it is available. I only learned about it through blogs and tech websites. The average iPhone user may not even think to ask Siri for the location of the nearest Apple store, and may instead either launch the Apple Store app or just search the web. That’s one of the biggest hurdles to using Siri — people don’t know what they can do with it so they may not try to do much.

One change I’d make to Siri’s Apple Store integration is the terminology used for store location searches. A store location search returns a set a of results that are labeled as the stores “fairly close” to you. It would be better to label these as the stores “nearest to you”. For someone in a more rural location looking for the closest Apple store, a distance of 100 miles may not be considered “fairly close”. Or in my case, a store 21 miles from my office is hardly “fairly close”. But aside from the labeling the interface is pretty intuitive and marks a step forward for speech-based interactions as part of the overall ecommerce shopping experience.

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.

Yahoo Bus Stop Derby

Now this is just fun and cool and engaging.

Yahoo recently rolled out a marketing campaign for its mobile apps called Yahoo Bus Stop Derby that lets people at 20 San Francisco bus stops play games against each other. The derby features four games played on 72-inch LED touch screens at the bus stops. The games allow people to indicate the neighborhood they live in for an added element of citywide competition. The campaign ends Thursday and the winning neighborhood wins a concert by the band OK Go (North Beach was winning this afternoon).

Further proof that the convergence of wireless and multi-touch technologies is changing everything.

Marty Cagan and Designing Great Products

Last week I had the good fortune to spend two days learning about designing great software from Marty Cagan of the Silicon Valley Product Group. Cagan’s approach to creating great consumer software products comes from years of working on wildly successful ones, such as Netscape, AOL, and eBay, and is a radical change from the traditional approaches many companies still use.

Cagan’s two-day seminar presented the topics raised in his 2008 book Inspired: How To Create Products Customers Love along with advice tailored directly to the audience, in this case my company, Cars.com.

One of the key aspects of Cagan’s approach is a focus on a core working relationship between the product manager, the lead engineer, and the lead interaction designer supporting a product. His method places heavy emphasis on a great user experience as a key part of making software people really want to use. He also advocates delegating product design decisions down to the product manager and empowering that person to make the right choices, while people managers and other leaders are tasked with doing what needs to be done to develop their product teams so they can be trusted to execute.

The book is a quick read and well worth the time as it opens up a new way of thinking about product management and software design.

Design Tools for iPad

Apple’s iPad has been out only a few weeks and already clever software developers are building design tools for this amazing new platform.

The Omni Group, makes of the popular OmniGraffle wireframing tool, have released OmniGraphSketcher for iPad. Priced at $14.99 in the iTunes App Store, OmniGraphSketcher allows you to create attractive charts, graphs, and other data visualizations on the iPad.

And Endloop, a Canadian iPhone/iPad development company, has released iMockups, a wireframing and diagramming tool for the iPad. Available on iTunes for $9.99, the app allows designers to create Balsamiq-like wireframes using their fingers.

I haven’t used iMockups but Endloop says in its blog that upcoming features include snap-to grid lines, a border and background color picker for UI controls, improved customization of UI controls, additional UI controls, more icons, and the ability to export to email, XML, or PDF. iMockups gets a 3-and-half-star rating from users in the iTunes store and the few reviews there comment about the app not being 100% ready yet.

It will be interesting to see how OmniGraphSketcher, iMockups, and other diagramming apps for the iPad add to the collaborative design process. For now I’m still keeping my sketchbook handy, but this could be the first wave of exciting new additions to the interaction design toolbox.

[youtube=http://www.youtube.com/watch?v=LOyIVqJcGfc]

Google’s 3D View of NYC

Google is once again using its technology to allow us to explore our world in new and exciting ways, this time helping New York City tourism promoters create 3D tours of selected parts of the city. In a marriage of high-resolution 3D streetview photography and digital maps of New York, Google’s partnership with NYC & Company gives us a glimpse into the future of immersive, exploratory experiences.

Using the Google Earth API and the new hi-res images, NYC & Company has added the 3D tours to the interactive wall and table displays at its information center. The 3D fly-throughs also are available on your desktop in Google Earth.

For more information, see Google’s case study.

[youtube=http://www.youtube.com/watch?v=4k2_HHrk8Y8]

A Delightful iPad Experience

With the launch of the iPad a few days ago we’ve been bombarded with countless commentaries and critiques of the user experience and potential new business models made possible by Steve Jobs’ “magical” new product. But sometimes you just have to sit back, relax, and watch someone totally engage with a product to remember why it is we UX designers live to create great experiences — we do it because it’s just plain fun.

A video surfaced on YouTube this week of a two-and-a-half-year-old girl playing with an iPad while her dad asked her to do different things. The dad, Todd Lappin, on whose telstarlogistics YouTube channel the video first gained attention, wrote that his daughter likes to play with his iPhone, but that this was her first iPad experience. While she clearly enjoyed herself, she also stumbled in a few places based on her previous experience with different devices (and who hasn’t seen that before).

The joy in this is seeing her complete immersion in the moment. She’s happy and excited not because of great UX or technical accomplishments, but because she’s having fun. It’s a great reminder of why we get up every day and do what we do.

[youtube=http://www.youtube.com/watch?v=pT4EbM7dCMs]

FRONTLINE Probes Evolving Digital Nation

PBS’s FRONTLINE recently took a fascinating look at our evolving online culture in a film that explores the pros and cons of the brave new media world we all inhabit. The film, titled Digital Nation, challenges assumptions about the negative effects of digital culture on childhood learning while also questioning if we even understand the social changes wrought by our always-online culture enough to render a verdict on the effects our virtual lives are having on society.

Showing a more optimistic attitude, Philip Rosedale of Second Life argues that in the last 50 years we have gone from movies shared in theaters to movies shared by a small at-home VCR audience to movies enjoyed solo on our iPods to a new social experience in which we can be physically alone but still communicating in real-time with many others via Facebook posts and Twitter feeds (remember the CNN/Facebook/Obama inauguration?). Have we come full circle and is the technology that once separated us now advancing to the point it can bring us back together, albeit in new ways? Great questions indeed. Answers TBD.

The film is available free online at PBS.org. A trailer is provided below.

[youtube=http://www.youtube.com/watch?v=-6PRIGW6pqA]