I'm building a matrix calculator for Android and am having some difficulty designing an intuitive Graphical User Interface due to the limited space I have on a smartphone screen.
The top 30% of the screen is taken by a preview bar and the bottom 10% is occupied by a control panel (Undo, Redo, Export, etc.), leaving me with the middle 60% of the screen for data input. I have made the region swipeable. The user only has to interact with one matrix grid at a time; afterwards they can swipe left to add data into the next one (they can always come back to make changes).
The problem I'm facing is providing an elegant way to add/remove rows and columns of the current matrix. The matrices in scope are rectangular and don't require controls for each row and column.
- I have considered a button system, situated at top(Add Row), bottom(Remove Row), left(Add Column) and right(Remove Column) of the matrix.
- A swipeable region, whereby the user swipes up, down, left or right to add/remove rows and columns in a similar fashion as the button system. But I'm already relying on swipes to navigate between matrices (I can isolate the swipe listeners though)
- And a control panel to matrix's left, right or bottom with all the add/remove buttons in it. The problem with this one seems that it won't be 'natural' and may cause accidental taps.
One of the requirements from the controls are that they need to be unique to every matrix. So components like a navigation drawer are out of the question.
The space to fit the components is quite limited, especially since other components will also be present around the matrix, such as
- Matrix's sign - A button which alternates between + and - upon taps
- Scalar multiplier - A simple text box
- Operator between matrices - A button which alternates between +,-,*,/ signs
- Dropdown list providing one-tap functions (Inverse, Transpose, etc.)
- And possibly a button to add more matrices to the equation
I'm not sure if this is the right place for this question, but it's the best I could find. Any help/advice will be highly appreciated.
EDIT - A Sample User Story to add more context
The user wants to find the result of the equation
- The user adds rows/columns as required into the grid, to get the size they want for their matrices
- The user inputs the first matrix and adds a scalar multiplier 3
- The user swipes left and add the second matrix
- The user taps the sign button to make the matrix negative
- The user taps the dropdown list and selects Transpose to immediately transpose the matrix
- Finally, they tap the Calculate button and receive the result