When I started researching iPhone app transitions, I had a hard time finding information targeted towards user interface designers. The iPhone Dev Center was too technical and the iPhone Human Interface Guidelines (known as “the HIG”) hardly mentions transitions. This blog post attempts to fill that void by describing some common transitions and including short video examples.
To provide a little bit more background, transitions typically refer to the visual feedback provided when users move between related views within an app. As you’ll see in the videos, transitions can help users understand where things reside within an app and how the app works. They can also make adding and removing views less jarring.
The three view transitions exposed in the public API are Slide in/out, Flip left/right and Cross-dissolve. Other familiar transitions are Curl and Zoom. Although they are used by the built-in apps—Map and Home screen respectively—Curl and Zoom are not exposed in the public API. However, they can be recreated via the Core Animation API.
Whether you use the transitions exposed in the iPhone’s public API or create your own, try to keep them consistent with those used in the built-in apps. Keeping the transitions consistent will make it easier to learn and use your app. This recommendation applies mostly to Utility and Productivity style apps; consistency is less important when it comes to Immersive style apps like games. (Note: read the HIG if you’re not familiar with the three different application styles.)
The section that follows contains additional information on the Slide, Flip, Cross-Dissolve, Curl, and Zoom transitions.
Slide in/out: The Slide transition is primarily used when drilling up and down lists. It makes the user feel like they are moving forward or stepping back within your app. (Pardon my large thumb–this is my first stab at these videos. No pun intended.)
Flip left/right: The Flip transition makes it seem like the view is turning over to reveal content on the back. This transition is typically used when accessing settings for Utility style applications (e.g., Weather or Stocks apps) or switching between related views (e.g., list view to map view). When used for switching views, the control tends to be accessed via the navigation bar since this position implies that the entire view will change. The flip direction should be right-to-left from the current view and left-to-right from the new view; the change in direction helps orient users within your app. Yelp’s flip transition, as shown below, behaves more like a revolving door.
Cross-dissolve: The Cross-dissolve transition is typically used when entering the “viewing” mode for a slideshow or video. When the slideshow or video is dismissed, the cross-fade is used to return to the original screen. Another appropriate time to show a cross-dissolve is when changing scenes within a gaming app.
Curl up/down: The Curl transition is used to access related content that seems to live “under” the current view. Perhaps the most well-known example of a curl transition is within the Maps app, which uses this transition to show map related tasks such as Drop Pin and Show Traffic. Although I think the Curl is strong conceptually, the Maps implementation may have discoverability issues since the UI control is small and it’s unclear what lives “under” the view.
Zoom: in/out: The Zoom transition is used to maximize/minimize the selected item. It’s used when selecting an app on the iPhone Home screen but also within some apps. For example, the Facebook home screen zooms in/out when users navigate to/from one of the grid menu options. And TweetDeck uses it when zooming in/out of the column section of their app.
This is just a subset of the many transition possibilities out there. Remember, if you don’t see a built-in transition that meets your needs, you can create a custom one with the Core Animation API.
Posted: March 14th, 2010 | Author:suzanne | Filed under:app reviews | Comments Off
Art Beat Inc offers art event listings for New York City (http://www.nyartbeat.com ) and Tokyo (http://www.tokyoartbeat.com). A dedicated team of art experts and enthusiasts update the content daily, covering a variety of mediums—painting, photography, drawing, sculpture, video, and much more. Art Beat also offers rich personalization and community features such as favorites, reviews, and recommendations.
Although the Art Beat web sites have been tremendously successful, like most web sites, they do not translate well when viewed on mobile phones. As an interim solution, Art Beat created mobile-friendly versions of their sites. These were effective but they didn’t take advantage of one of the key mobile benefits—knowing the user’s location
In an effort to improve the mobile user experience, Art Beat recently launched two native iPhone apps—NY Art Beat and Tokyo Art Beat. Ginsburg Design was part of the team that launched the apps which included the following key features:
· Maps and directions to nearby art events.
· Ability to browse events via a variety of rich metadata, e.g., location, media type, and “smart” lists.
· Quick access to the most popular events in the app’s area.
Event list view.
iPhone apps seem simple on the surface but creating an app is a significant undertaking. If you plan to develop an iPhone app for your service or organization, consider some of the lessons our team learned along the way.
Try to limit the scope of version 1.0.
Although it’s always tempting to have your app do more than less at the beginning, fewer features means a more timely release and an opportunity to listen to user feedback before developing the next version of your app.
Sort out API issues first.
If your app requires access to an API (Application Programming Interface), make sure the API requirements are fully defined before design and development begins. If you don’t take the time to do this, you’ll slow down your software developer.
Don’t skimp on specifications.
Although iPhone apps often have less functionality than web or desktop apps, they still require detailed documentation. Documenting the user interface and backend requirements will keep everyone on the same page and save time down the road.
Mobilize don’t miniaturize.
Don’t attempt to cram every possible bit of info onto the small screen. Choose which pieces of information are most important for the mobile user and prioritize them accordingly.
Allocate ample time for field testing.
If you have a location-based app, it’s critical to test it in the field before launch. You may uncover user experience issues that are difficult to find in a usability lab environment.
Develop a marketing plan.
Having a great app is meaningless if no one can find it. Art Beat was fortunate to have a built-in user base and loyal Twitter following but even that’s not enough. Be creative and adapt your strategy as you discover what works and doesn’t work.
Visit the links below to learn more about the apps:
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 Sketchesapp has new user tutorials that are both playful & helpful.
Posted: September 11th, 2009 | Author:suzanne | Filed under:user research | Comments Off
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.
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.
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.
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!)
