I am going to revamp UI similar to this, because we are still using proof of concept UI, so I think after this more area available for editing on mobile devices. (Only toolbar related changed will be done no new features). I created this thread for discussion.
3 Likes
Do you mean in terms of switching from a top/left toolbar arrangement to a top/bottom toolbar arrangement?
If so, a few thoughts:
-
On phones: I could see this work well to reclaim some screen space in portrait mode, and the bottom area of the screen is likely easier to reach. How would you do landscape mode, left/right I assume? I would imagine that retaining the toolbars at the top/bottom in landscape would likely be worse in terms of screen space use compared to the current top/left arrangement.
My main concern otherwise would be that this would introduce quite a bit more touch traversal distance if users are frequently performing actions across both toolbars. Perhaps there are some Android/iOS design guidelines that could be helpful to look at for toolbar positioning? It might also be worth revisiting which actions are in which toolbar, to make sure that commonly used actions and those commonly used together are in closer proximity.
-
On tablets: I think I would strongly prefer the current design there and/or moving everything into a single toolbar at the top. If you look at other apps like Notability/GoodNotes, a single toolbar – typically at the top – is the most common choice. A movable toolbar would of course be the most flexible solution (e.g. Notability and Apple Notes have a single draggable toolbar that snaps to screen edges), but making this work well is probably not going to be trivial.
-
On desktop: Would strongly prefer the current design as I think it works best for mouse-based interactions in terms of mouse travel distance, etc.
If you also mean in terms of making the toolbars hover over the base image on phone/tablet: I could see that work well as long as the toolbars are still fairly close to the screen edges.
2 Likes
The @media and .mobile class will be used to check if it one mobile and width smaller than default width so the view will be changed.
1 Like
Currently we have the mobile-specific I/O page, and the desktop-specific I/O-inside-the-editor - how are you picturing these design changes will fit into both? Would it make sense to wait until we get the editor working on mobile platforms before making these changes, so we don’t do extra work?
1 Like
The editor may look similar to this on mobile device. Only side toolbar will be moved to bottom when screen width smaller than some predefined value, otherwise the side toolbar remain in left for bigger screen.
It can be wait until editor is ported to mobile device.
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.