Do You Really Need to Reinvent the Wheel?

When developing a mobile app, one common requirement is enabling users to capture photos using their phone’s camera. With several approaches available, how do you decide which one to use? Let’s break down the options.

‍

1. Leverage the Default Camera App

The quickest and simplest approach is to use the phone’s default camera app. This method allows users to take photos and return to your app with the captured image. For many applications, this solution is sufficient. However, if you’re aiming for a more customized user experience tailored to a specific need, you may need to explore other options.

2. Select Images from the Gallery

Another option is to allow users to choose from photos they’ve already taken and stored in their gallery. While this approach works well for desktop apps, it can be frustrating on mobile devices where users expect the ability to capture photos directly. That said, this option serves as a valuable complement to camera functionalities.

3. Use a Library for Custom Photo Capture

Depending on your technology stack, there may be libraries available that offer enhanced camera functionalities. These libraries vary in configurability and features. It’s worth exploring to find one that fits your specific use case. However, keep in mind the maintenance required—libraries often need updates when operating systems change. If you still haven’t found what you need, there’s one last option.

4. Implement a Custom Photo Capture Feature

If none of the existing solutions meet your needs, you can develop your own photo capture functionality. This approach gives you complete control, whether it’s setting the number of photos, reacting to each shot, adding filters, or overlaying custom views on the photo preview. While this will offer the most personalized experience for your users, it requires significant development time, potentially spanning several weeks. For example, Instagram customizes their photo capture to add filters and effects seamlessly. Similarly, Adobe Scan tailors the capture experience based on what you're capturing, whether it’s a document, card, book, or something else.

In this article, we’ll dive into how to provide an excellent user experience (UX) by implementing a custom camera solution, and in a second article, we’ll explore how to do this on Android specifically.

Best Practices for a Camera-Based App

To implement your camera-based app, it's crucial to adhere to common UX principles, particularly Jakob's Law, which states that users prefer your camera to behave similarly to other camera apps they are already familiar with.

Display a Preview of What Will Be Captured

This might seem obvious, but it’s crucial to show users a preview of what they’re about to capture. This visual confirmation ensures they’re taking the photo they intend.

Show Thumbnails of Captured Photos

Users want to verify that their photos are satisfactory. Displaying a preview of each photo taken helps them quickly assess and decide if they need to retake any shots. You can stack each photo with the most recent on top, similar to the default Android and iOS camera apps, or arrange them in a carousel format, as seen in Vinted.

Allow Users to Delete Photos

Since users can review their photos, they’ll appreciate the ability to delete any that didn’t turn out well. This feature enhances the overall user experience by giving them more control.

Ask for Camera Permission When Needed

Your app will need permission to access the camera, but timing is everything. Ask for this permission only when the user is about to take a photo. Requesting access at app launch can feel intrusive and lead to refusal.

Handle Device Orientation

Ensuring the correct orientation of captured photos is essential. Your app should detect how the user was holding their phone at the time of capture to avoid displaying photos upside down or sideways.

Enable Quick Successive Photos

In many scenarios—such as posting a classified ad—users benefit from taking multiple photos quickly. Allow them to capture several shots in succession without unnecessary interruptions.On iOS, for example, Leboncoin uses the default system camera, which limits users to taking one picture at a time, a restriction that can be quite frustrating.

Support Adding Photos from the Gallery

Sometimes users already have the photo they need on their device. Providing an option to upload images from the gallery ensures your app is versatile and user-friendly. A practical way to implement this is by displaying a thumbnail of the most recent photo from the gallery on the camera screen, typically at the bottom. This approach is effectively used by apps like Instagram.

Enable Photo Capture with Volume Buttons

This feature, common in most camera apps, enhances usability by allowing users to capture photos with the phone’s volume buttons. It’s a nostalgic nod to traditional cameras and can prevent frustration, especially for users like myself.

This is a good example of the Jakob’s law.

Provide Immediate Feedback After a Photo Is Taken

Users expect instant feedback when they take a photo, whether through a visual cue, a short vibration, or a sound. This feedback reassures them that the action was successful. However, consider the environment—audio feedback might not always be appropriate. A brief blink on the camera preview, a ripple effect on the camera button, and a slight vibration are common forms of feedback in camera apps.

Although it might seem that showing the photo preview is enough, there’s often a delay before the preview is displayed. Providing immediate feedback avoids any perception of lag.

Additional Camera Features to Consider

With these essential features in place, your app should cater to most use cases. However, depending on your audience, you might want to consider adding a few more advanced options. The list is not exhaustive, as the camera is a very complete sensor, and other parameters might come into play.

Flash

A flash is indispensable in low-light conditions and is relatively simple to implement.

You’ll need to design three flash icons to represent the different modes: off, auto, and on. The flash mode and its corresponding icon should update each time the user clicks the flash button.

Zoom

While less commonly used, zoom functionality can be critical for certain situations, such as taking distant photos or focusing on specific objects.

Users typically expect to use a pinch gesture for zooming, but you can also consider adding an alternative gesture to facilitate one-handed use.

Focus

Auto-focus is crucial for ensuring that captured photos are sharp and clear. Additionally, consider offering a manual focus option, though this can be more complex to develop and is less commonly required.

Video Capture

If your app supports photo capture, it’s worth considering whether video capture could also be beneficial. Keep in mind the technical implications—videos require more storage and bandwidth, which can impact both server load and user experience.

Conclusion: Choose the Best Solution for Your Needs

By evaluating your budget, business requirements, user needs, and the various elements of a good user experience, you can determine which solution best fits your app. If you choose to develop your own custom camera functionality, consider a phased approach—start with the core features that cover the majority of use cases and then add the more specialized options. This way, you can gather user feedback early, reducing the cost and effort of refining your solution down the line. And don’t forget to build your minimum valuable product with “love”.

Resources

UX laws: https://lawsofux.com/

Minimum Lovable Product: https://www.bam.tech/article/comment-concevoir-un-minimum-lovable-product

‍