4

i've made a research about my app today, and i've found some unexpected results. The default/opening screen of my app(iOS) is :

enter image description here

The user can create a live photo from video or a photo. The "Video | Photo" indicated that the current selected screen is "Photo". I've marked the text with the theme color, as well made a point to this option.

Still,most the users thought that "LIVE PHOTO TO STILL" is the selected options, and got confused. I can't understand why, because i've made two different things to mark the current choice. Any resolutions/suggestions? Much appreciate it!

| improve this question | | | | |
  • I agree with the feedback you've got. Looking at your screenshot I was confused as well. Can you clarify the process (i.e. the steps a user would take to use the app) ? – Monomeeth Apr 26 '16 at 0:38
  • @Monomeeth Hey. Thank you for your response! I would break it down for you just for the first part. Eventually the user can do two things. 1)Create live photo(like a gif), from a video, or from a photo,as the open/default screen. 2)Can convert live photo to still(pick a frame),which in this case the " photo | live" segment "closes down",because it's not needed. What you see is the open screen, which for some reason, is unclear to people. I'm trying to under,in what way i can make them understand what option is selected,more clearly(when the first open the app) – Roi Mulia Apr 26 '16 at 5:15
1

I think Abhishek Sharma is on the right track. However, I also think the following isn't clear:

enter image description here

When I look at the above, it's now clear to me that I've selected Create a live photo, but it's not clear to me what the Video | Photo option is for? I guess it wouldn't take long to figure out, especially if you're using it, but I do feel it's missing something.

Maybe it'd be better to step the user through it. You could have a prompt like "Choose your action" or "What would you like to do" or something similar. Then your next step would be "Choose your original" or something similar.

This approach doesn't necessarily have to be split between screens (although you could certainly do it that way - Step 1..., Step 2..., and so on).

Also, the actual user selection between Video or Photo isn't clear - that is, it's not clear which one has been selected by the user. Your best bet would be to clearly change the appearance of the selected option. For example:

enter image description here

In the above mockup it's clearer to the user they have selected 'Photo' because the text PHOTO is now a distinct color away from the black and white theme, and it's also in bold and larger point size.

You don't have to use yellow, or even change the appearance of your text, but you probably should do something to differentiate what the user has selected. If you go with Abhishek Sharma's 'triangle' you could also use that instead to show the selected option.

Either way, I think we've been able to help you make your app clearer for users. Good luck with it! :)

| improve this answer | | | | |
  • Thank you so much! A few consideration of i may : 1. Does decreasing the opacity in the unselected option, is a familiar use-case? Wouldn't it make it a little hard to read? Compare to different highlighted color? – Roi Mulia Apr 26 '16 at 6:20
  • As well. There is another approach you suggest taking to make the selection clearer? In terms of UI/UX? I just really know how important first impression is – Roi Mulia Apr 26 '16 at 6:49
  • Yes, I have updated my answer - hopefully it addresses both your comments. – Monomeeth Apr 26 '16 at 6:55
  • Alright, What do you think about that : 1. Selected options with 100% opacity, Unselected Option with 70% opacity. Take the triangle from my original image(next to the icon, and place it like this ⌵ , above the selected option, and to be consist, make the unselected option with the same alpha as well? – Roi Mulia Apr 26 '16 at 6:58
  • Yes, that could work. Why not give it a go and see how it looks when all the changes appear together. – Monomeeth Apr 26 '16 at 7:00
1

I think the cause of the confusion is your colour choice : the use of black and white is so mixed such that it is unclear to the user "including myself" which one is the highlight colour and which is the background colour. So, my advice : change highlight color, it should be unique and obvious .

| improve this answer | | | | |
  • Unfortunately it's the app theme color, You have an idea about how to make it look more "selectedable"? Would you consider the second answer as a good option? – Roi Mulia Apr 26 '16 at 5:17
  • If you are not permitted to use a third color for highlighting selected item , then you will need – DrWael Apr 26 '16 at 6:44
  • to drop the idea of color marker, use other means , like some sort of icon (like the arrow you used before) or even play with the selected item's font: underline, italic ,bold or size. – DrWael Apr 26 '16 at 6:49
  • And yes, I find Monomeeth's answer a good option. – DrWael Apr 26 '16 at 6:50
  • Basically i have sort of three colors,white,this pink, and the app as a continious "dark blur" , which suppose to provide the contrast. I "hate" the idea of using gray color, to dis-highlight the second options. I think it break the rest of the app color scheme as well, because the rest of app screens are +- look the same. Would using opacity instead of gray is an option IYO? – Roi Mulia Apr 26 '16 at 6:53
1

See the color: At very first look to this image, I can't able to see "Create A live Photo" as it is in dark color over the dark BG.

Read more about Colors

You have logo in pink color you can use grey color for inactive links.

enter image description here

if you want to remove this small triangle you can remove it, it will look good without this also.

Hope you understood the important of colors in Design.

| improve this answer | | | | |
  • I did. Thank you! Great article BTW. Would you recommend changing the theme color, in general? I mean, i use the same color at the rest of my app(like you saw in my last question, about the buttons). Does it fits, in terms of contrast? + Should i do the same "opacity",between the bottom segment as well? (Where there is Photo | Video)? – Roi Mulia Apr 26 '16 at 5:28
  • App here and App in Previous question are same? if Yes, than using the same color is good. Yes, if you want you can use Pink color in Photo | Video. It looks good this way also. – Abhishek Sharma Apr 26 '16 at 6:14
  • Yes, they are the same app. Btw, making the not selected option with opacity, dosent it make the text a bit unreadable/unnoticeable? – Roi Mulia Apr 26 '16 at 6:16
  • It is not done by Opacity, use Light Grey Color, It will be readable and looks inactive also. – Abhishek Sharma Apr 26 '16 at 6:21
  • Great, I'll apply it and update with an image, im thinking about removing the arrow to make it look more clean as well – Roi Mulia Apr 26 '16 at 6:23

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.