The Touchable Desktop

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.

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!

Wikipedia Redefined Project

A co-worker recently made me aware of a project by design agency New! that was a two-month exercise to redefine and redesign Wikipedia, one of the world’s most popular websites. If only we all had the time for such an interesting effort.

The New! revision of Wikipedia is online at the Wikipedia Redefined website, where the team explains the multi-faceted approach to redefining this internet icon.

It explains its motivation quite simply:

“It all started from a question: ‘If we could improve one thing which we use and love, what would that be’. We have chosen Wikipedia and called our quest Wikipedia Redefined.”

New! started with the brand, moved on to the logo and what it conveyed, and eventually drilled down into the information architecture, user interface, and UI elements like icons that make up the Wikipedia experience. New! approached the site from both the content-creation and content-consumption aspects, and even took on the Wikipedia text editor. The results are impressive.

Of course there are flaws, as there are with all design projects. Some of the icons are not immediately clear as to what they do and some of the color choices are too low contrast for people with less than perfect vision.

But remember, this is a design agency trying to show its creative capabilities. The fact they took on such a challenge should at least inspire all of us to pick a homepage or a web form or a mobile app screen we don’t like and just have a go at making it better. Those exercises would not be informed by the technical or financial realities of the product in question, but they could serve to stir our own creative juices and cause us to look at our own products in a new way.

Why Outlook.com is Good For Email

Microsoft launched a preview of its replacement for Hotmail this week (rebranded as Outlook.com) and this could be a good thing for all web-based email users.

While I’m not normally impressed by the user experience of Microsoft products, my first impression of Outlook.com is that it is a significant improvement over Hotmail (which was an ancient and dying beast, to be honest).

Interesting side note: I actually had to create a new Hotmail account and then upgrade to Outlook.com since I hadn’t signed into Hotmail in at least 10 years or so.

Outlook.com is exciting because it could introduce new competition into the web-based email market. And competition is good; it keeps us on our toes and forces us to constantly focus on improving our products. The screen shots in this post clearly show Microsoft is moving to a more simplified user interface that makes better use of layout and content organization. The product appears to be taking cues from the more simplified design of Google’s Gmail.

The annoying ads that plagued Hotmail have been reduced and social media integration with Facebook has been added (although I did not experiment with it).

There are plenty of beta-software moments, like how editing your profile takes you back into the Hotmail user experience, but it was clearly labeled as a preview.

Engadget gives the Outlook.com preview a pretty good review. CNET also gives the preview pretty good marks.

Would I switch over to Outlook.com? Probably not, mostly because I have committed too much effort to living with Gmail and Yahoo Mail. And in the mobile-centric world I live in, most of my email is sent and read from a mobile device anyway. But if Microsoft can keep its smaller Hotmail user base from moving to Gmail or Yahoo, it will probably consider the effort a success. And if Outlook.com causes the other web-based email providers to keep looking at ways to improve their user experience, we all win.

Hotmail
Hotmail
Outlook.com
Outlook.com

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.

Tap Targets Should Be Sized Appropriately

It seems so obvious that tap targets on mobile devices should be discreet tappable regions on the screen. But sadly that’s not always the case, even on mobile websites and apps from major content creators.

Font Size Controls for the CNN Mobile Website, the LA Times Mobile Website, the AP iPhone App, and the New York Times iPhone App
Font Size Controls for the CNN Mobile Website, the LA Times Mobile Website, the AP iPhone App, and the New York Times iPhone App

One of the main uses of handheld mobile devices is taking a quick look at the latest news. And often people’s eyesight is not as good as the young designer who created the app, so a mechanism often is (and should be) provided for people to increase the font size, especially since reading is the main reason people are using the mobile website or app in the first place. Sadly the mobile websites for the LA Times and CNN, and the Associated Press iPhone app all fail at this simple task.

In the accompanying image note the size and spacing of the font controls on the CNN mobile website (the first screen grab). In this image I positioned them adjacent to the Mobile Safari control bar for comparision. Note the difference in size and spacing between CNN’s mobile website and what Apple recommends in its iOS Human Interface Guidelines. It’s not even close, and this is a product from a major content producer that’s designed for mobile users.

The same problem exists on the LA Times mobile website (the second screen grab). The controls to increase or decrease font size are too close to one another and are too close to the Reset link. Imagine tapping the big A twice to increase the font size and then hitting the Reset link when you are trying to increase the font size one more time.

The Associated Press iPhone app is an even stranger creature (the third screen grab). Font controls are actually buried in a settings menu. So it’s not clear to someone that they can change the font size, and if they want to they have to hunt around to find the control. The controls themselves are sliders, which require a person to apply a bit of precision to their adjustments. Wouldn’t an up/down arrow construct work just as well? This smacks of a design in search of a problem to solve.

The New York Times takes a different approach with its iPhone app (the fourth screen grab). There is only a single control, which increases the font size until you cycle through all the options and return to the smallest size. It’s not clear at first how this works, but it’s very learnable. And the size of the tap target and the spacing around it are in line with Apple’s recommendations.

Most mobile device makers provide user interface guidelines to developers. More designer should read them. Here are the design guidelines for three mobile platforms:

HCI 530: Usability Issues for Handheld Devices

I just completed my latest DePaul University graduate HCI course: Usability Issues for Handheld Devices. I want to share one of the papers I wrote, a brief survey of automotive telematics and the associated usability issues and related regulatory frameworks. It’s hardly an exhaustive work due to course time constraints and an assignment maximum page limit, so it does not touch on every aspect of telematics or all the possible usability problems in this emerging field of computing. It does, however, point to some interesting topics for more focused future research.

My paper is over here in PDF format.

Jeff Gothelf on Lean UX

This week I attended the UX Immersion 2012 conference. Jeff Gothelf’s featured talk looked at Lean UX and how he used it at The Ladders. Here are my notes:

On Lean UX

  • When converting from Waterfall Development to Lean UX, a great place to start is to look for stories of failure. You learn what didn’t work.
  • Lean UX doesn’t seek to answer the question “can we build this?”, but instead asks “should we build this?”.
  • Usability testing with three users helps you find the boulders, not every little flaw. Subsequent iterations can find problems in the smaller details.
  • Style guides and pattern libraries let you work faster. You have all the tools you need to solve problems. If it has pixels, it goes in the library.
  • Live style guides is a concept in which the HTML markup and CSS is attached to the product in a way that a change to the style guide changes the product.

Learnings From the Agile Transformation at The Ladders

  • UX as a shared services didn’t work because it divided people’s focus.
  • You have to put UX designers on a dedicated team to build camaraderie, focus, and trust.
  • If a UX designer must be split across two teams, make sure they have a primary team so they can prioritize work appropriately.
  • Putting a UX designer on more than two teams is a recipe for failure.
  • Solve the problem together, not in silos. Co-creation builds understanding.
  • Sketch together as a team, then everyone “owns” the solution.
  • The Ladders had many iterations on what was the right way to manage the task wall. We learned that if you cram your entire functional spec onto a board, it’s not agile.

What Lean UX Means for Designers

  • No one gets into user experience to create documents. They want to make things.
  • In fast-paced agile environments the traditional UX approach becomes a bottle neck. We need to use new tools to achieve our goals.
  • Create the lowest fidelity document possible to explain and validate whether the concept in your head is the right thing to do.
  • Don’t be afraid to sketch. All you need is a circle, a rectangle, and a triangle. This covers every interface out there.
  • Get the experience out there, not the design document. Get it in the wild to validate the concept.
  • You’ll never solve a problem with a design document, you solve them with software.
  • Unless you are building the product for yourself, your design is just a hypothesis.
  • Work in a tight integration with the rest of your product team. Designers can’t hide behind their monitors any more.
  • Pair up — Put designers together with developers when problem solving and brainstorming.
  • Pairing up also helps you build an understanding of each other’s work and limitations.

Jeff Gothelf is the author of a forthcoming book on Lean UX. You can follow him on Twitter at @jboogie

Great New Features in Axure 6.5 Beta

The beta version of Axure 6.5 was released recently and includes some great new features for mobile prototyping, especially simulating iOS apps.

Axure 6.5 Beta Demo
Axure 6.5 Beta Demo

Some features I’ve already explored:

  • A home screen icon for iOS can be imported into a project as a PNG
  • A splash screen that displays when your “app” first loads also can be imported
  • Full-screen display mode for prototypes launched from the home screen icon
  • Dynamic panels can now be “pinned” to the browser to allow simulation of a fixed tab bar with content that scrolls from underneath it
  • Black or translucent status bar
  • An iOS-style arrow button shape
  • Support for drag and drop
  • Left and right swipe events

Your prototype is still created as HTML and displayed in Mobile Safari but the full-screen mode allows you to simulate a native app’s appearance. To test your design on anyone’s iPhone or iPad just place the files on a publicly available web server or Dropbox and access them with the browser. You have to add the app to the home screen to get the icon on the device and launch in full-screen mode.

The biggest problem I’ve had with the beta is that scrolling actions can pull the simulation away the browser’s edges. This is not a real problem for a prototype being used for usability testing or requirements demonstration, but fixing it would make your simulations seem even more native (it also may be possible already and I just haven’t got it yet).

All in all the new version of Axure is pretty exciting. It’s fast become the best tool short of HTML coding for mobile prototypes.

To learn more about the new 6.5 beta consider attending the Chicago IxDA monthly chapter meeting on Wednesday at Critical Mass. I’ll be giving a short talk on Axure for mobile prototyping.

To view my demo, a screenshot of which is included with this post, point your iOS browser over here.

You can also download my RP file, which was craeted in the 6.5.0.2981 build.

Happy prototyping!