Improvement: Composer UX
The composer is on the center stage of the content creation and there are a couple basic UX inconsistencies that together can increase it's easiness of use impacting on user retention and the content creation process itself.
-
Default to the Text composer when pressing on the BottomTab (+) -
Default to the Camera composer when pressing on the Story (+) pressable circle -
Remove the duality of the Photo/Video tabs by merging them into one -
Use a darkened rounded frame on both dark and light themes -
Show Post/Story independently from which action the user is coming from -
Add a label text to the composer story button on the list for increased UI consistency -
Invert the position of the cog and submit actions -
Change the ChevronBack icon with a back action to a unified close (X) one
This was added as a single issue for it being linked together and having reduced implementation complexity.
Reasonign
Duality on the tabs Video/Photo
Since the introduction of the Story feature by Snapchat the common user expectation is to have the video activated by long shutter press. On the development side it unnecessarily increases the complexity of the composer navigation/structure and maintenance.
Darkened rounded frame
Immersiveness is on the core of the Story/Reels way of publishing/viewing content. The darkened frame increases it by giving focus to what's shown on the camera. Instagram/Facebook/Linkedin/TikTok apply the rounded corners on iOS and just TikTok on Android. We could maintain the rounded corners for throughout both for consistency.
Show Post/Story independently from the action origin
Currently we're hiding the text option when coming from the story (+) itself. As this is not being done by other social platforms and it's an extra step for development/maintenance the behavior can be removed.
Label text to the composer story button
This one is for visual consistency and increased usability. Instagram is using Your Story
as label, but also Add Story
/Create Story
can be considered. It's occuring a
![](/-/project/10171280/uploads/c9c911f699ce9db9ea88cb72b64eb4ac/IMG_9993.jpg)
![](/-/project/10171280/uploads/b143af9ec167262d5b77e2db99577cc5/IMG_9994.jpg)
Unifying the close action
Independently of the OS being used, the user doesn't expect a back action for changing tabs. We can replace it with a single closing action that closes the component. Currently if you are on Text and hit back you would open the camera view.
Inverting settings and submit actions
This is mainly due for it being positioned closer to the user's finger while typing. It also could have an active color for increased visibility.