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.

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 7.0.0.3128. 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.

Balsamiq for Google Chrome

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.

Wireframe Created with the Balsamiq Chrome Extension
Wireframe Created with the Balsamiq Chrome Extension

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!

Jared Spool’s Prototype Camp Chicago 2012 Keynote

Jared Spool gave the keynote talk on the power of prototyping at yesterday’s Prototype Camp Chicago 2012. Here are my notes:

  • Prototyping is not just about designing products, it’s really about exploring the problems you are trying to solve.
  • When you are making products you have to focus first on the problems you are trying to solve, not on what you are building.
  • Prototypes are key elements in creating a shared understanding of what problems you are trying to solve and what you can build to solve them.
  • Prototypes are a great way to expose the differences between the vision of the perfect product that is in the designer’s head and what your team can actually build.
  • The best architects, the ones who can walk into a building and say “This is exactly as I envisioned it”, are the ones who were involved with the project throughout the journey and making changes to their designs along the way.
  • The trick to planning iterative prototyping is knowing what you are going to measure. You have to start there and then design the prototype to ensure you get those measurements.
  • The key to iterative prototyping is moving fast. Design, test, learn, change, repeat.
  • With paper prototyping you get to change the design between every test as you learn about pitfalls in the design.
  • Sketching is prototyping. It allows you to explore designs before building anything.
  • You may never make the products you prototype, but in testing them you will learn things that will influence and improve other products you build.

Prototype Camp Chicago 2012

Prototype Camp Chicago 2012
Prototype Camp Chicago 2012

I’ll be presenting a session today at Prototype Camp Chicago 2012 on mobile prototyping with Axure RP. It will be my first conference presentation and a great opportunity to share what I’ve learned about mobile prototyping with the local UX community. I also hope to learn a lot from the many smart folks who will be there sharing their knowledge.

My demonstration Axure file for the presentation is available. It was created with Axure 6.5. Consider it yours and use it as you see fit. I hope it helps you in your growth as a mobile prototyper and Axure user.

For more information on mobile prototyping with Axure, see my recent article on Smashing Magazine, in which I walk through building this demo step by step. There are links to free and paid interface widget libraries, training resources, and some great books on prototyping you should read.

I plan to demo my prototype using the Xcode iPhone Simulator on my MacBook Pro. You can save yourself some time when first building your prototype by using the simulator so you don’t have to keep reaching for your iPhone. Just download Xcode from the Mac App Store (it’s free). To run the simulator as a standalone app without ever launching Xcode, just enter the command in this file in Terminal and it will create a shortcut to the simulator in your Applications folder. You will need to test on the device as you get further along in building more complex Axure functions into your prototype, but this is a nice way to get started when creating the basic framework and navigation for your project.

Happy prototyping!

The Value of Flexible Prototyping

I recently experienced firsthand the power of flexible prototyping — and it is powerful.

I was doing in-lab, moderated usability testing of a mobile website experience and had reached that point where after a few participants you know you have a problem and the team wants to test a new solution. Our team’s visual designer — also a rock star front-end coder — offered to cook up a new prototype mixing the UI elements from the current site that tested well with participants with some design elements from our prototype that also seemed to be testing well.

The prototype in question was coded in HTML5 and jQuery, running on iPhones and Androids off Dropbox. After about 30 minutes, he came back to the observation room to say the new prototype was ready to go.

Because we were at the last test session of the day, we could only test the new design with one participant, so we certainly couldn’t say it was a design success. But it did eliminate the stumbling block we kept running into.

Perhaps more importantly, the experience reminded the team of the power of lightweight flexible prototypes that can be changed and deployed very quickly. Our approach to future test planning will be focusing on how we can change the prototype mid-test, which should open the door to a more adaptive approach to user research.

Luke Wroblewski on Mobile Inputs

This week I attended Luke Wroblewski’s day-long workshop on Mobile Inputs at the UX Immersion 2012 conference. Here are my notes:

Mobile Input Controls

  • New mobile inputs are not just disruptive — They introduce completely new ways of doing things and totally new things to do.
  • Some designers will tell you not to use text inputs because people won’t type on a smartphone, but people send 4 billion SMS messages every day.
  • When people have something they want or need to do on their smartphone they will use text inputs if they have no other choice.
  • That said, avoid having people type any time you can, but don’t avoid text inputs when you can’t. Always encourage input, don’t limit it.
  • Think of people as one eyeball and one thumb when you design. Their partial attention requires a very focused design.
  • Think of a smartphone as a content creation device, not just a media consumption device. The most popular apps are content creation apps — Facebook, Twitter, Instagram, Draw Something.
  • Try to use the standard input types for mobile websites because they have been optimized for the operating system.
  • When you use standard input types, good things happen, because people already know how to use them. But don’t be afraid to go beyond the standard ones.
  • Try not to use select menus in Android if contents are longer than the screen because people may think their choice is limited to what is on the screen.
  • Try non-standard input types when there are too many taps, like the four required to use the select menu picker in iOS.
  • A stepper is easier than a picker if you have a small range (3 to 5) of numeric choices.
  • Only present input controls when people actually need them. Use progressive disclosure. Don’t hit them with everything up front in a long form.

Touch Target Size

  • Design for a physical size, not a pixel size, due to differences in screen resolution and pixel density. Apple, Android, and Microsoft have extensive documentation and recommendations.
  • Use a minimum spacing between tappable objects as recommended by the operating system developer.
  • Studies show that 80% to 90% of people are right handed, and that about 50% of left-handed people use their right hand to for their phone. Most apps can get away with being designed for right-handed users.

How to Make Input Less Error Prone

  • Use the correct keyboard version for email addresses, URLs, and numeric values like zip codes and credit card numbers. For mobile web this is supported by HTML5 input types.
  • Turn off auto-capitalize and auto-correct for login screens.
  • Use input masks to change people’s input to the correct format. For email addresses, use an input mask that puts @yourdomain.com at the end of whatever the user types and show the person this is what is happening.
  • Use smart defaults (for example, the no tax checkbox is selected by default on eBay mobile).
  • Top align field labels because of field zoom.
  • Don’t remove critical features, like password recovery, from a login screen.
  • Consider just showing the password instead of masking it as asterisks, or show it by default and give the user the option to hide it.
  • Apply the concept of “touch first” and only go to the keyboard when there is no other way to collect the information.

Mobile Web vs. Native Apps

  • It’s not about which is better, it’s about what’s right for the use context and business goals.
  • A mobile website has near universal reach; a native app is a much more richer experience (although HTML5 and jQuery Mobile are changing that rapidly).
  • Designers working on the mobile web should look at apps for examples of controls you could try on mobile websites. The creators of Android and iOS built new operating systems from the ground up so they have had to think about making controls better.
  • Many device features like geolocation and access to a device’s compass are now available to web browsers through APIs. Even greater access to a device’s hardware features is coming in the future.
  • Facebook and Twitter get half of their content from mobile devices, and half of Facebook’s mobile content is from the mobile web.
  • The more app usage occurs, the more mobile web use occurs, and vice versa. They both drive each other.
  • The more people engage with a brand through the mobile web or apps, the more they engage with the desktop experience. Recognize they are all part of a holistic experience.

Mobile Web Advantages

  • Cross-platform reach and near universal access with one code case.
  • Faster development time because well-known web technologies like HTML, JavaScript, and CSS are used.
  • Larger developer pool available.
  • You can update your app at any time and don’t have to wait for Apple App Store review or for people to download the app to get the latest features.

Native App Advantages

  • Deeper hardware access.
  • Multi-tasking.
  • App sales and in app sales.
  • Integrated access with other locations like stores is easier (at least today).
  • Faster performance because much of the UI is already on the device.

Design From a Mobile Mindset

  • If you approach a checkout flow from a desktop perspective you’ll just get a shorter form.
  • If you approach it from a mobile mindset you’ll think about whether or not this person is in a physical store with a device that has a camera and can scan barcodes. Mobile devices can streamline the in-store checkout process.

Voice/Audio Input and Proximity Sensors

  • Android allows voice input to any form that allows text input.
  • Apple has Siri, and it is rumored Apple may open Siri APIs to programmers at the Worldwide Developers Conference in June.
  • Shazam and IntoNow use ambient sounds around a person as audio input.
  • If you put an iPhone next to your face during a call the proximity sensor hides the keypad so you don’t “cheek dial”.
  • With proximity sensors “every object in the world is now an input”.

Device Sensors for Input

  • Instapaper speeds up or slows down scrolling speed when you change the pitch of the device, allowing people read at their own pace without swiping.
  • Nearest Tube uses device motion, GPS, and the compass to show nearest London Underground station.
  • Google Goggles and FitBit are also examples of using hardware features as inputs.
  • The Android Galaxy Nexus, the first phone to come with Android 4.0 installed, uses facial recognition for its Face Unlock feature.
  • A proposed addition to the GetMediaUser API would open this to web browsers.
  • While Windows 8 is a desktop operating system, it allows people to create logins by logging custom gestures on lock screen images, for example drawing a line from a child to a pet on the picture. This is a very human solution to login problems. It’s like telling the computer “Hello, it’s me, let me in.”

Gestures for Input

  • Multiple finger gestures: two-finger drag moves an object, three-finger drag moves an entire pane in an app, four-finger drag moves the user between apps, and five-finger drag invokes operating system functions. However, these are emerging pattern, not universal rules.
  • Teach in context to help people learn how the app works when they need to know it, not in some large upfront tutorial (the Clear app does both).
  • Use content as navigation to remove as much chrome as possible.

Luke Wroblewski is the author of Mobile First. You can follow him on Twitter at @lukew