Axure 7 Cookbook

I recently finishing reading the Axure RP Prototyping Cookbook by John Henry Krahenbuhl and think it’s a book well worth your time. Krahenbuhl goes well beyond the basics of Axure prototyping to look at how to incorporate Ajax, JavaScript, MySQL, and PHP in your prototypes. His book is organized into “recipes” that give step-by-step instructions for creating robust and highly realistic prototypes. This book should be on any Axure user’s bookshelf.

One thing to note is this book is not for beginner’s. You should have a strong working knowledge of Axure before digging into some of the advanced topics.

You can find the book on Amazon, or many other online booksellers.

What I Learned From Writing a Book

I recently had my first book, Mobile Prototyping With Axure 7, published in the US and UK. It was both a fantastic and trying effort, but also a great learning experience. So I wanted to share a few thoughts aspiring writers should take into account before jumping in. I wish I’d known all of these before starting, but I guess that’s why experience is the best teacher.

  • Be passionate about your subject matter. You’re going to spend a lot of time with this material, and I mean a lot, so you better love it.
  • However much time you think it will take, double or triple it. Organizing your ideas, writing, editing, and collaborating with reviewers is very time and labor intensive.
  • Don’t do it for the money. Writing a book targeted at user experience professionals is pursuing a niche audience. Plan on keeping your day job.
  • Have something unique you want to share. In a world full of books, blogs, tutorial websites, and online magazines, just one more book that covers no new ground is not likely to get much attention.
  • Have a purpose for your book. Maybe you want to start a conversation on a new topic or add a new point of view on an existing one. In my case, I was motivated by wanting to write the book I wish I had on my desk the day I started working in mobile design. That focus will help you organize your content and flow, and serves as a reminder for why you undertook the effort. This is really helpful at 2 AM when you’re finalizing yet another chapter revision.
  • Be prepared to make sacrifices. Now matter what you think, you will be trading personal and family time to get it done.
  • Make sure you are honest with family and loved ones about the time commitment involved. It will take more time than you expect so it’s better to prepare people so they know why you are always so busy for a few months.
  • Learn to negotiate. If the publisher offers you five free copies, tell them you want 15. If they are that interested in you as an author, things like that are a small cost of doing business for them.
  • Line up some good friends and colleagues who are willing to review draft chapters before you submit them. I can’t count the times that a fresh pair of eyes raised valid questions and provided invaluable feedback. And show your appreciation for their effort. Buy them a few drinks or take them to lunch; just do something to show you value and appreciate their help.
  • And remember your real priorities. Don’t let publishing deadlines dominate your life. Find a cadence that works for you and still let’s you have a life. And be up-front with the publisher on this. If the proposed schedule sounds like too much to maintain some semblance of work/life balance, tell them you need more time. If they absolutely refuse, let them find someone else. Chances are if they think you are the right author they will be willing to work with your schedule as long as this is raised early in the negotiation phase. Where it gets tricky is trying to change the schedule after a contract has been signed because they have started to make commitments to printers and resellers, and changes to these can have a financial impact to their business plans. Get the schedule worked out as soon as possible.

Having gone through this experience once I will definitely make some changes to my approach next time. But with a little knowledge and some good friends to guide and support you, the experience can be quite amazing. Especially when it all comes together and the printed copy is in your hands and on the market.

New and Notable in Axure 7: Chicago Design Meetup

This evening I presented a talk New and Notable in Axure 7 at the Chicago Interactive Design & Development meetup. My talk looked at some of the new features in Axure 7, including Adaptive Views, Repeaters, the variable panel in the sitemap frame, and HTML5 form input types for mobile devices.

As I mentioned during the talk, a lot of great resources and sample files are available and some of my favorites are listed below:

  • Sample files and community discussions are available in the Axure Forums
  • The Axure Beta Forum is focused on all things Axure 7
  • The Axure 7 Beta Updates thread lists the individual items included in each release.
  • You can also tweet questions to @axurerp. The product team is pretty awesome about responding to people and giving direction.

My demo RP file is available. It was created with beta version I hope you find it helpful. And, if you were at the talk, thanks for coming out.

Upcoming Prototyping Events

A nice set of educational and networking events related to prototyping user experiences is coming to Chicago in the next few weeks.

That’s a lot of good stuff in a short time frame. Go forth and learn.

Low-Cost, Lightweight Mobile UX Research

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 on Multi-Device Web Design

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:

A Framework for Devices and Use

  • Device sales are not the same as usage. Make sure you understand what people are referencing when they use statistics. For example, iPhone web browsing exceeds Android browsing even though more Android handsets are sold.
  • Trend: Now bigger is better for smartphones. You need to design for 3.5-inch to 7-inch screens when designing for smartphones.
  • Look at actual usage on your site and not device distribution in making strategic decisions. Figure out who is looking at what content using which devices.
  • A switch to smaller tablets is underway. Expect to see more traffic to your site from 7- to 9-inch tablets. And you can’t push the same design to a 7-inch tablet as you would to a 10-inch device.
  • Large tablets are not mobile devices. Most large tablet use is in the home. A 10-inch iPad is really a mobile-in-the-house device.
  • Human factors should drive what we do with the interface. Look at physical dimensions and human ergonomics.
  • Don’t use industry terms like “phablets” to drive your design. Think of devices as being good for the hand, good for the lap, good for the desk, or good for the wall.
  • Get ready for more diverse screen sizes. Wrist-sized screens and eye-sized screens are coming.
  • Android sales tend to follow a continuous predictable line, while iPhone sales spike and fall around device release cycles. Be aware of sales trends as you plan your design strategy.
  • Expect more growth in “hybrid convertible” devices that include elements of laptops and elements of tablets. Tablets have keyboards and laptops are becoming touch devices.
  • Computers from ASUS and HP will have touch input via peripheral devices.
  • Quoting Ethan Marcotte, “privilege the small screen” so those users have everything they need, then add more to the design for larger devices.

Navigation on Phones and Tablets

  • Try to avoid iPhone-like bottom tab bars on web designs meant for handheld devices. They conflict with Android device controls and support for fixed positioning is not universal for Android devices.
  • Use toggle menus at the top of the screen on websites designed for mobile devices.
  • Toggle menus are limited to one level of navigation. Use off-canvas menus for deeper levels of navigation.
  • Put content up front, not navigation. Allow easy access to your site’s navigation and an easy way to get back to your content.
  • The footer anchor pattern places navigation after your content but allows easy access to it with one tap on an anchor link in the site header.
  • There are more comfortable touch zones on tablets and laptops at the bottom and left and right sides of the screen. Understand this when designing websites for tablet use.
  • Responsive designs that fall back to desktop layout do not work as well as they could on tablets because of comfortable touch zones. Explore split navigation placed at the lower left and right corners of the device. Test your responsive designs with real users on tablets.

The Mobile First Approach

  • Depending on the market being served, especially international ones, you still have to plan for feature phones with minimal CSS support and no media queries. Start here and build up.
  • Within media query break points use fluid layouts to scale your design between the break points.
  • When doing responsive design consider portrait and landscape orientations. Also be aware of how your design works on widescreen devices, like Microsoft’s Surface, when they are used in portrait orientation.
  • Start your design with handhelds in mind, then enhance upward and build fluid layouts.

Design Techniques

  • Use the width of your content to determine break points. These become “stress points”.
  • Use content curation and responsive patterns when designing for multiple devices.
  • The off-canvas pattern puts navigation and supporting content off screen with UI elements to expose them. Use this as an alternative to the single-column “mobile stack”.
  • Use CSS3 and icon fonts whenever possible for buttons and other images.

Performance and Speed

  • Executing a multi-device strategy is somewhat like packing for vacation: Responsive is like packing when you don’t know the weather; you pack all kinds of clothes. A separate mobile-specific site is like packing for the beach; you bring only what you need.
  • Responsive design is about adaptation; mobile-specific sites are about optimization. Mobile-specific sites will usually perform better in terms of speed but come with additional development and maintenance costs.
  • Transitions and other UI elements can improve the perception of performance.
  • Spinners can communicate to the user that something is happening, but also can create the perception of the app being slower. Only use spinners and other UI techniques if they really create the impression things are running faster. Test with real users to see how they perceive it.

Multi-Device Strategies

  • Strategy One: Maintain the status quo and keep a separate mobile site.
  • Strategy Two: Add adaptive styles to your existing site as a step toward responsive design. See Dan Cederholm’s write-up on using adaptive styles on Dribble.
  • Strategy Three: Extend your existing mobile website to larger devices. This is easier than downsizing an existing desktop-focused site, and takes what you already have and gradually makes it responsive without disrupting your existing site and business.
  • Strategy Four: Start fresh. If you ever needed a reason to redo your entire website, the new multi-device reality is it.
  • When first starting with responsive design, try doing it on your most used pages to get the biggest bang for the buck. If you have a video site like YouTube, the video player page is the place to start.
  • Alternatively, you can try it on your least used pages to get comfortable without a lot of risk.

What’s Next

  • Websites on TVs and wall-sized displays are on their way to becoming mainstream. Examples include Google TV, Xbox, PlayStation 3.
  • The web on a TV is not about a web browser on your TV, it’s about creating cross-device experiences that include the TV.
  • Eye-sized screens like Google Glass will be design considerations in the future.
  • Apple, Android, Samsung, LG, and Microsoft all publicly claim to be working on a wrist-sized device. It will include some kind of HTML support in the future. It’s one more screen size you will have to consider in your designs.
  • Speech is becoming an input type, with Siri and Google Voice Search being only the beginning.
  • Google Glass uses speech interfaces, eye movement, device movement, and touch. The types of inputs used with your designs will only increase.
  • If a technique is used on one device form factor, it will spread to the others. Look at what’s happened so far with touch, voice, and high-resolution screens.

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

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.