Some colleagues and I recently launched two iPhone apps for finding local art events. One is focused on New York, the other is focused on Tokyo. Key features include:
- Ability to browse hundreds of exhibitions in NYC
- Map to find nearby events
- Opening reception listings and other “smart” lists
You can learn more at http://bit.ly/NYABapp and http://bit.ly/TABapp.
Heuristic evaluations involve systematically inspecting a user-interface and judging its compliance with a set of heuristics. This method is a fast and effective way to identify usability flaws, however, the widely used heuristics put forth by Jakob Nielsen were originally created for desktop software. As a result the language and examples are not always appropriate for other platforms. Over the years, researchers and practitioners have evolved and expanded the heuristics to meet their needs. While there are many noteworthy efforts, nearly all of them were created before the iPhone was developed. With that in mind, I attempted to adapt Nielsen’s heuristics for the iPhone. I’m certain there are many more useful examples, so I’ll edit this post as I–and my readers–discover more new and exciting apps. Interested in learning more about heuristic evaluations? Check out Useit.com’s heuristic evaluation overview.
1. Visibility of app status
The app should always keep users informed about what is going on, through appropriate feedback.
Example: Shazam provides feedback as it analyzes audio. More common feedback use cases: progress indicator when sending content (e.g., email) or receiving content (e.g., latest news).
2. Match between app and the real world
The app should sense the user’s environment and adapt the information display accordingly.
Example: Compass (lower left of app) changes the map orientation as needed. Other apps change the display orientation from portrait to landscape when appropriate, e.g., iHandy Level.
3. User control and freedom
Users often choose app functions by mistake and will need a clearly marked “emergency exit.”
Example: “Cancel” and “x” buttons are common iPhone controls. In the case of “immersive” apps, e.g., video or games, users should be able to tap to access controls and/or exit. The screen capture below is for the Facebook status update screen.
4. Error prevention
Eliminate error-prone conditions or check for them and present users with a confirmation option.
Example: Spell check has option to reject the recommendation. The example below is from the built-in email app.
5. Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing.
Example: Kindle uses standard controls for bookmarking and showing progress. See Apple’s iPhone Human Interface Guidelines for the complete set of standards.
6. Recognition rather than recall
Minimize the user’s memory load by making objects, actions, and options visible.
Example: The Yelp “Recents” tab stores businesses recently visited. Maps also uses “recents” to enable users to access past addresses and routes. Other ways to reduce recall (& minimize typing) include remembering the app’s last state as well as previous search results.
7. Flexibility and efficiency of use
Reduce the number of steps required by anticipating user needs and enabling customization.
Example: Urbanspoon provides suggestions as the user enters their query. Additionally, pre-populating fields can make users more efficient, e.g., the built-in Maps app will pre-populate the “start” field with the current location.
8. Aesthetic and minimalist design
Screens should not contain information which is irrelevant or rarely needed.
Example: Photo controls are hidden when not in use. The same is true for other immersive apps such as video and e-readers, e.g. Kindle.
9. Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language precisely indicating the problem and solution.
Example: Epicurious explains what content may be available when users are offline.
10. Help and documentation
Help should be focused on the user’s task, list concrete steps to be carried out, and not be too long.
Example: Ocarina provides contextual help upon startup. The Sketches app has new user tutorials that are both playful & helpful.
Last night I gave a short talk at the launch event for Girls in Tech Silicon Valley. It was based on recent iPhone app user research I conducted with Michelle Reamy of Reamy Research & Design and organized into three parts: user profiles, findings, and design advice. Given the the limited amount of time, I only included three user profiles and a handful of examples from the research. I hope to include more of the research in my iPhone design book planned for Spring 2010 publication.
Just received my App Sketchbook from the folks at appsketchbook.com. Nice quality paper (60# Lynx White) with plenty of room for annotations. Plan to use my 0.5 Pentel pencil and a variety of Signo uni-balls from Japan.
From their site:
Now that I have a feel for iPhone sketching tools and templates, I’ve been considering alternate ways to bring my sketches to life. Apple provides iPhone developers with a tool called Interface Builder but I fear it will require more programming than necessary in the early stages of design (Note to self: play around with the builder & test this assumption). Another option is to post my linked Fireworks files online and view them via Safari on my iPhone, but the browser chrome and zooming features get in the way. Here’s where the folks at UNITid design come in–they created a nice little script that hides all of the Safari administrative debris. You won’t be able to test iPhone interactive elements such as transitions and scrolling, but you’ll have a nice click-through prototype on the iPhone and can evaluate visual design choices, such as type size and colors. Get the full tutorial at the UNITiD blog. (One small tip: make sure your index file name is lower case; mine started with a cap which prevented the initial screen from displaying.)
I’ve been experimenting with a variety of tools & templates for creating iPhone app designs. Balsamiq is clearly the most “sketchy” and well-suited to the concept phase. The templates for Omnigraffle, Fireworks, and Illustrator will create higher fidelity sketches. The tool you choose will depend on a number of factors: the type of application, the level of customization needed, and of course, your preference. Template links & example sketches shown below.
(Update: An IXDA peer asked, “Why not pencil?” I *always* start with pencil or pen, but I eventually move into some type of electronic format since it’s easier to share with remote teams. In response, another peer sent me this link to this neat iPhone stencil. Also found this iPhone sketch paper.)
Balsamiq
The web- and desktop-based versions both support iPhone templates and have a wide range of widgets and icons. They recently added the ability to “link” mockups, enabling you to add basic interactivity. I linked my sketches and created a quick video showing how users could interact with the UI–super easy & fast! The link below summarizes Balsamiq’s iPhone specific features.
http://www.balsamiq.com/blog/2009/03/01/iphone-controls-new-icons-and-much-more/
Omnigraffle
Graffletopia has a variety of iPhone templates but my favorite is the “Ultimate iPhone Stencil.” The collection has excellent coverage, plus text can be edited and buttons resized. You can also link your Omnigraffle sketches to add basic interactivity.
http://www.graffletopia.com/search/iphone
Fireworks
Blog*spark put together a toolkit for creating iPhone mockups in Fireworks. Aside from the phone background, all elements have been redrawn as vectors for easy editing. Linking supported by Fireworks (TBD what happens with Catalyst!)
http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/
Illustrator & Photoshop
Mercury Intermedia also created vector based templates. Haven’t tried these out but their site visitors seem to like them! They linked to teehan+lax for Photoshop templates.
http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements/
http://www.teehanlax.com/blog/?p=447
Fast & easy ways to incorporate paper prototyping and user testing into the iPhone app design process
User experience review of two similar iPhone apps–Urbanspoon & Yelp–that launched in late 2008. Best viewed in full screen mode.