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:
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.
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.
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.
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.
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.
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.
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:
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.
The beta version of Axure 6.5 was released recently and includes some great new features for mobile prototyping, especially simulating iOS apps.
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.