8

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:

AvatarImage

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?

Whatsapp

  • 2
    Why did you go for the "image" icon instead of the pencil icon? The pencil icon means "edit" and it fits inside the circle, because it doesn't have a rectangular border. – Max de Mooij Jan 2 '16 at 23:12
  • As Cody stated: " It may be the ideal icon to represent editing text, but not images. " I kinda had a similiar feeling, that the "pencil" icon isnt the right choice here. But as you can see neither was the "image" icon. :D – luQ Jan 3 '16 at 10:38
  • Good point on that! Cody nailed the right icon usage in his answer :-) – Max de Mooij Jan 3 '16 at 16:21
  • @luQ you don't draw images with pencils? – Baldrickk Sep 5 '18 at 10:06
17

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.

enter image description here enter image description here


Here is the design with the modified change

enter image description here

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.