Zooming in: improving the experience of the iPhone Camera app

“Effective interfaces are visually apparent and forgiving, instilling in their users a sense of control.” First Principles of Interaction Design. Bruce Tognazzini

I love my iPhone camera. So handy for those quick on-the-go snaps; and when I don’t need anything fancy it saves the effort of getting out my DSLR.

Recently, however, I had to help out a frustrated friend with the zoom UI. At first I couldn’t understand how she could be having difficulties. Pinch to zoom. Simple.

Her misinterpretation of the UI cues, however, led her down a path to a less-than-stellar user experience. It got me thinking of Bruce Tognazzini’s quote: users should leave your app feeling a sense of agency and control. Not frustration and annoyance.

It is an excellent reminder of how UI can trip users up in ways you never would expect. I started by asking her to show me what her usual process was, and it quickly revealed how a user journey can go astray.

UI RESOURCES:

There are a number of excellent resources out there to help predict problems with user interfaces before user testing reveals them. Jakob Neilsen proposed 10 heuristics – or general guidelines – for user interface design. Bruce “Tog” Tognazzini has a detailed analysis of principles of interaction design, and how to implement them.

OpenApp

SystemOpens

pinch

DisplaysZoom

At this point the user flow starts to go wrong. There’s a visual indicator of the zoom function. It’s meant to show how far the user has zoomed in or out. So far so good. All sound usability principles: give the user a visual indication of a change in state.

Except, it looks exactly like a scrollbar. In other places in the OS a scrollbar is draggable, and moves things around.

It’s not too extreme a conclusion that the user should to drag this scrollbar to zoom the view.  And this actually works. You can drag the scroll bar to zoom the image.

Heuristic problem | Consistency and standards

The app should follow system standards and conventions, and not use the scrollbar in this context.
Severity rating: 2: minor issue, low priority to fix at some point, as it does not prevent the user zooming. (Neilsen)

So, the scrollbar appears, the user stops pinching to zoom, and swipes the scrollbar to continue.

swipe

This works. Almost.

Until we discover our next heuristic problem with this UI element. The problem arises from the proximity of the zoom scrollbar/visual indicator to the camera mode picker.

ZoomPicker

The zoom scrollbar/visual indicator is tiny, and if the user swipes too low, the app zooms and changes the camera mode picker at the same time. The user could now record a video instead of capturing a photo.

Heuristic problem | Error prevention.

Where possible, UI design should prevent problems from occurring.
Severity rating: 3. This happens frequently and is hard to spot when it does.

So now the user may accidentally hit the video record button, thinking it’s the photo shutter button. The system does not adequately warn the user that they are now shooting video, instead of taking a photo.

Heuristic problem | Visibility of system status.

The app should clearly indicate to users when something has changed.
Severity rating: 3. This is a major problem and needs fixing.

OK, the shutter button changes color from white in photo mode to red when you are in video mode. And the tool bar becomes transparent. Surely this is an indication?

Well, firstly that record button is red, which is a problem for users who have color blindness. That’s 11% of users.

Usability principle | Accessibility issues.

Some users  with color blindness will not see this change. Whenever color is used there should be another, independent set of indicators.
Severity: 4. Needs changing urgently.

That’s not the only problem with this subtle visual alteration. When this change occurs, the user’s attention is elsewhere.

Heuristic problem | Error prevention.

 It’s very easy to accidentally trigger a link when you are not looking at it, and user focus should be taken into account. The user is concentrating on the photo they are about to take and the tiny scrollbar they are using to zoom. Not the shutter button.
Severity rating: 3. Needs changing urgently.

Even when the user taps the shutter button, the likelihood is that they are looking at the photo, not the UI. And accidentally take a video.

When the user realizes they are in video mode, they can swipe the camera mode picker to return to photo mode.

Which reveals our final user interface problem.

Returning to photo mode wipes out their zoom.

Usability principle | Protect user’s work.

User’s work should be protected from loss, even if they have made an error.
Severity: 4. Urgently needs fixing. Wiping out user’s zoom while they are recovering from a frustrating error caused by the UI, compounds the issue. They have to start over.

At which point their cat or child, or partying friend, or …  has long ago stopped doing whatever it was they wanted to capture and the point of taking the photo is gone.

This UI element removes the sense of control from the user, and encourages errors. When the user attempts to correct that error, the interface punishes them by destroying their work.

Recommendations and UI options for testing

1. Remove the confusing and unnecessary zoom scrollbar from the UI from the Camera App.

Heuristic problem | Aesthetic and minimalist design.

Do not include any unnecessary design elements in the app UI. Such elements get in the way of necessary elements and impede user flow.
Severity: 4. Needs changing urgently.

The user receives visual feedback when they pinch to zoom in and out, and the image increases or decreases in size on the screen. Any other visual reinforcements are distracting, particularly if they look and act like something they are not.

2. Option 2: Provide the user with an additional indication that they have changed camera modes. This should be located where they are most likely to be looking at the time. That is: as an overlay on top of the photo preview area.

Option2a

These are just a couple of options to improve the user experience of the camera app on iOS8. I’ll add more as I think of them

FocusSquareZoom

These are just a couple of options to improve the user experience of the camera app on iOS8. I’ll add more as I think of them.

What do you think? I love feedback, so drop me a comment with your thoughts and ideas!

Leave a Reply