So here’s the scenario. You have a desktop notes application. It’s got it’s own set of unique features and quirks. How do you turn that into a mobile app.
Well there’s a few parts to that question. But the part that this is going to focus on is around form. The interactions a user has on a desktop vs the interactions on a phone.
Mobile UI - It’s different. This is the breakdown:
Plan of features to make:
First Design - A basic Wireframe
While this is very basic, it allocated space for a very large chunk of the required features. The detail of how these are addressed is the next step of the design
A screenshot of the desktop app resized to a mobile size. Done to indicate a rough idea of brand.
Screenshot with note element taken out.
Redesign note element from scratch.
Desktop Application Text Editor Toolbar:
The important thing to note here, is that each block can be Text (P, H1, H2, H3), A List (Bullet point, numbered, checkbox), Quote/Callout and Code. It cannot be multiple things, I.E. a H1 List. With this in mind, we can automatically extend the options for each thing you’ve selected.
With mobile having something like a floating toolbar is not ideal. It creates an experience of chasing toolbars around your screen. Fortunately there is a very handy place for a toolbar:
The last part for this view was to add a top level navigation for the space you’re in. Showing you the stacks and a way to navigate to the space options.
Next bit, same approach:
This addresses this area of the tree view
There is more small interaction to work out. But this is the result:
It’s important to always remember that a mobile app and a desktop app are fundamentally different. It’s not just that the form is different, the entire use case and purpose can completely change.
For example in a notes application, the desktop application could be described as a place to focus on the experience of creating and a mobile application could be around discovery. Do you pull out a phone to write a lot of notes? Or do you just need the ability to quickly jot something down and find something you’ve written.
With this in mind the next step (after fleshing out a rough idea of the minor interactions) will be to create a prototype that can give a strong reputation of the fully created app.