Goals Images - Inconsistency


#1

This may only be graphical, though I consider it a bug.

The images used for goals are annoyingly inconsistent as their placeholders are not square. From screen to screen, you see a different portion of the image you chose as your Goal identifier.

Example:

[IMAGE #01] - No image selected.

[IMAGE #02] - Selection of a perfectly square image.

[IMAGE #03] - Presented a portion of my selected image.

[IMAGE #04] - Presented with a slightly larger portion of my selected image.

[IMAGE #05] - Presented with a minute portion of my selected image.

[IMAGE #06] - PERFECTION! Presented with 100% of my selected image.

If ever you want an “Icon” for your Goal so that it is easily identified in your Transaction and Spending Feed, you will need to select a square image. Currently however, selecting a square image creates inconsistency across the app which need not be.

Not on iOS

It appears as though this is not so much of an issue on iOS.

Images across all social medial platforms are square and are consistent as a result. You wouldn’t want only your nose being displayed instead of your entire face would you? Make images square and avoid this chaos. Cheers :smiley:


#2

I truly truly hate that the images for goals change. I always look for images in a rectangle that would match the rectangle on the goals screen so it can look how I want but it just does what it wants with them.

It’s awful!!

Some people might say there are worse things happening in the world to worry about… But no! THIS is the worst! I hate it!

Why does it have to happen?


#3

I concur. It is a design oversight. This would not occur if it were linked to payees, categories or merchants as the image/logo would be too important. However, the image chosen for a goal is just as important and should therefore be consistent througout the app.

If all images are square, there is no problem.

NOTE: When selecting an image, you are presented with a crop tool. This tool allows you change the aspect ratio of the image which is unnecessary if all images become square.


#4

I actually have the Starling app on Android and iOS and tend to use Android to upload Goal Images/Payee Images and Profile Pictures because the iOS app never seems to crop the images correctly so everything appears wrongly in the app.


#5

Beside this, which I agree with, can we not get some stock images for the goals? I have a number of goals that I just don’t have an image for, and I really can’t be bothered to find one. Some standard ones like a sunny beach, rainy day, etc. wouldn’t hurt.


#6

This is not a design oversight but a necessary constraint. The image needs to be presented in multiple screen layouts but each (screen) differs significantly and has quite diverse requirements.
Thus there is no one-size-fits-all strategy and the pragmatic choice is to choose “AspectFill” for each image container.


#7

Would a circular image potentially present it in a more unified way?

Obviously that has its own challenges with how the photos look, but just an idea.


#8

Not really, we would be having quite a hard time to come up with a diameter value that would lead to a visually pleasing representation. The ASpectFill filling strategy works well because it always fills all the available area (no black bars as a result) while showing the most amount of visual data possible.


#9

I understand that you must use AspectFill to fill the containers you currently have. My point is that the containers that are currently present are perhaps not the best choice. If all the containers were square, all the images could be square also and thus no need to use AspectFill.


#10

If it needs to be rectangles on android , could the rectangles not be more uniform? And, if so, could you not use a crop screen with like a stencil of the correct rectangle outlined and the rest greyed or blurred? Like when you photograph a bank card? You could then just manipulate the image until what you want fits in the rectangle? Then it can always be the right shape.

(I’m not a design type… So that’s the best way I can describe it.)

It’s annoying, after you’ve spent ages picking and shaping the perfect image, for goals to just zoom a bit and chop it up.


#11

On Android, this side effect is more pronounced because it uses a full-length slab which has a ratio of about >25: 9.

If we would use a square everywhere we would eliminate this problem, but it would lead to a suboptimal layout which given the limited real estate of the screen is important to get right.
There are also aesthetical considerations which played a role as well in the final design.

Another limitation is we are using the built-in Apple component/screen to crop the image which has a square rectangle. It would be nice if we had a way to change this to 16:19 or other custom ratio but it’s locked.
I wish I had more time to optimize this but it would require to do a custom implementation. But we only have a finite amount of resources and spend them on strategic goals outlined in our roadmap.

What I can disclose is we are constantly iterating the Goals screen design to see if we can meaningfully improve the UX and functionality and we value all your feedback and it is taken into account.


#12

@kris thanks for the update and appreciate your restrictions and trying to improve the goal images on ios and android.


#13

@Kris Thanks a lot Kris. I appreciate your hard work and planning that goes into making everything as grand as it can be. There are of course more pressing matters that need to be seen to first. Please don’t mistake my persistence as pushing/rushing. I love working on projects like this and so I post quite a lot. I don’t however expect implementation or changes immediately. If however my ideas and the ideas of the rest of the community can help make things easier for yourself and the other developers, I’ll continue to brainstorm on your behalf :slightly_smiling_face:


#14

@Kris, would this not work?

Current Flow

Proposed Flow

The most important area for me is image three (Proposed). In addition to being square, it is almost identical to the iPhone layout which restores some parity between the two versions of the app.

My Current Problem

With my selected image which looks lovely in the Goals section, from screen to screen, a different portion of my selected image is displayed.

What if I use a square image?

When I use a square image, due to the dimensions of the container, the image is stretched to fill, which looks dreadful.

The Proposed Flow

With the proposed flow idea, the user would always see 100% of the image they select. Furthermore, the image they select will be their icon, instead of just the centre section of whichever image they upload.

The End

I mean not to drag this on and so I’ll say no more. Like you say, it’s a small matter in terms of the big picture and so it is not immediately necessary to introduce changes. I appreciate that you take into account our suggestions and ideas and again, I’d like to reiterate how thankful we all are for your hard work. I mean not to cause a fuss with my madness. If anything, I hope I have stirred up the minds of others (in a good way of course).

All the best,
> Dan O’Keefe


#15

Dan, your design proposals are very helpful, don’t worry about causing a fuss. :slightly_smiling_face:

There are a number of areas Starling could improve on design, and this is a good example. I can see no reason why your suggested improvement could not be implemented. Perhaps there aren’t the resources right now, but it could be planned for later.