How to make perfectly clear that a user can interact with an avatar image?

Question

I'am developing an Android Application for tablet sized devices. The goal of the application is to create an infographic resume. Therefore the user has to deal with some form-like views to achieve a proper result.

There is a section where the user has to pick an avatar image, which is later displayed in the inforgraphic image. But take a look for yourself:

As you can see, the avatar picture itself is placed in a circular image view. To highlight that the user can interact with the image, i'am drawing an icon in front of it. Due to the roundish form, its hard to find an optimal position for the icon. Furthermore, since there are already two "Floating-Action"-Button displayed on the page I would like to avoid to add another one. In my opinion the image container should also be circular to achieve an overall clean and coherent look and feel.

My question is the following: Is this design sufficient and is it obvious to the user, that he can pick a new avatar image by clickling on the circular imageview? Do I have to add an additonal button?

Or in general, why do I have the feeling that the design of the example below is simply better than mine?

Answer 1

Your current design may be lacking in a few areas. Generally, using icons alone leave a lot up to user interpretation and personal experience, even if it is as globally recognizable as the photo icon, or the pencil icon.

Here is an excerpt from the NN Group on Icon Usability;

Icons Need a Text Label

To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning in that particular context. (And even if you’re using a standard icon, it’s often safer to include a label, especially if you slightly altered the icon to match your aesthetic preferences or constraints.) ... Icon labels should be visible at all times, without any interaction from the user. For navigation icons, labels are particularly critical. Don’t rely on hover to reveal text labels: not only does it increase the interaction cost, but it also fails to translate well on touch devices.

From your example of other applications using the pencil icon, here is my concern with it: It may be the ideal icon to represent editing text, but not images. If we break down the icon to it's common meaning and use, a pencil is an instrument for writing or drawing, but is mainly associated with text, which makes it appropriate for text fields and areas, but when it concerns images, it's misplaced, in a common meaning that you wouldn't write/draw an image (in this case), so inexperienced users may end up finding it confusing.

So what would be the ideal icon to represent user input in this case?

The camera icon may be your best bet. Here is some reasons why;

1. It matches the expected input. — Consider the information the user is inputting, it's a picture of themselves, which was more than likely taken by a camera, either an actual one, or the one from a smartphone.
2. It conforms to the new input use case — Also consider where the user is progression wise in your application. If they are just starting out, and are filling out the form for the first time, they wouldn't be "editing" anything as what a pencil icon might suggest.
3. It is attached to the input source — One final consideration, since this is a mobile application, you may allow the user to opt to take a new photo right there using the camera on their device, which would add more meaning to the icon as it would also represent the action would take them to the camera application of their device, or in adding a photo, it would take them to their camera roll.

Application Use Cases

Facebook and Twitter seem to use this method in their profile photo inputs as well, but I can't comment for sure, or as to why they did what they did, but they are there nonetheless, and are great examples of what I'm going for.

---

Here is the design with the modified change

You may note that I've also included a semi-transparent background with the same color of the floating buttons. This is a matter of not only making the text and icon stand out more, but also color coding the element by following the Law of Similarity in Gestalt's principles of form perception, so it is associated with the other buttons. Although it does not have the same shape, it's color insinuates that it has similar functionality, in that, it is clickable, or in this case, tappable, giving more visual meaning, apart from the text.