Yesterday I had the pleasure of leading a panel discussion at Techweek Chicago 2013 on low-cost, lightweight methods that design teams can use to conduct user research and usability testing for mobile apps and websites.
Our team also created a list of mobile prototyping and testing tools that can be purchased for less than $300. It’s a small expense when your company is betting on you getting the product and its design right. We hope this helps you build better experiences for your users.
Luke Wroblewski conducted a one-day workshop this week at An Event Apart Boston on The Web Everywhere: Multi-Device Web Design. Here are my notes:
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.
Saturday I presented a talk at Mobile Camp Chicago that addressed touch and tablet-friendly design considerations for websites not using responsive web design. Here are my slides:
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 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.
If you work in an agile environment you’ve probably heard about the practice of “designing in the browser”. It’s a great way to design where you pair a UX and visual designer and let them execute their ideas directly in code to instantly see what it looks on any device.
Well here’s a way you can wireframe in the browser. Balsamiq Mockups now has an extension for Google Chrome that lets you build sketchy wireframes in the browser and save them to your Google Drive. You can also share them with other Google Drive users and edit them collaboratively.
You create your wireframes using the familiar Balsamiq widget set; you just do it the browser. Mockups can be saved to Drive as BMML or PNG files. Both can be downloaded, and the BMML files can be edited in your Balsamiq desktop software.
The extension is available in the Chrome Web Store. It comes as a 30-day free trial and you can get a single-user license for $5 a month or $50 a year.
While the Chrome extension is a useful tool for small teams and academic groups, you may need the more robust features for project management and collaboration offered in the myBalsamiq web-based product. But the Chrome extension is a great example of Balsamiq’s flexibility and shows how Google is turning the browser into a robust application environment. Enjoy!
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.
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:
For more information on configuring web apps, see Apple’s iOS Developer Library.
Yesterday I presented at UX Thursday in Chicago.
My 20-minute talk was on The Touchable Desktop – When Responsive Won’t Fly. It looked at design considerations for websites targeting desktop computers and tablets when responsive web design is not an option. Here are my slides:
Here are some additional resources to help you when designing for tablets and touchscreens:
The event was sponsored by User Interface Engineering.
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.