UX improvement (visual effect) on all buttons

[sebastiangaertner]

Can we explore a graphically more prominent button action? We have had users being stuck in the tutorial cause they dont know where to click.

@sidsharma2002 you had some ideas around already right?

[sidsharma2002]

Thanks for opening this issue. According to my experience, the buttons which requires to be look like they are clickable elements in reality does seems so. The current elements just like from top to bottom in container which gives a shadow like effect. The issue over here is that all this is in a single direction.

Here's an example from Indian app "cred".

As you can see from the edges, it gives an effect that the element is elevated towards both X and Y Axis i.e in 2D.

NOTE: the arrows here represents the direction of elevation

Comparing with the element's edges in our app, its gives an effect like its elevated to in only Y Axis i.e in one dimension which is totally unintuitive to a human eye.

As a result, the former looks like a real button which can be clicked inside or effectively in Z axis. whereas our buttons like a joystick kindof element which can be toggled up and down.

[sidsharma2002]

Here's a working example :

WhatsApp.Video.2022-10-04.at.09.54.28.mp4

[sidsharma2002]

Can we also try to stick to more uniform and pleasant theme colors. This magenta-ish dark color with black text "messages" looks very unpleasant to me. This might lead to some other topic but the app's overall journey and ux is still very unintuitive to me as a new user.

For example, the whole message screen is not understandable as In the beginning almost all users have no messages, that whole journey of a new user where he has no trees uploaded and has no messages is very unclear.

Secondly almost all the buttons on homescreen are very large. Maybe we can follow one big button pr screen.

Thanks for reading my whole message :)

[sidsharma2002]

Hi @sebastiangaertner , is anyone from design team iterating on this issue?

[Elforama]

I think the animation of the button can be improved to get a better feel. The darker part should not show on top or bottom when pressed

[vishalrao8]

Along with visual enhancements, I would also suggest adding floating animation to buttons to grab user attention. Since the primary user base can't read and understand, We need to communicate with them visually through illustrations and animations to guide them.

[vishalrao8]

Screen_Recording_20221118_125715.mp4

This is an example from one of my projects.