Best way to provide add/remove functions for a matrix's rows and columns in a smartphone app

Question

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

Answer 1

I don't fully understand all of the functionality you're trying to accomplish/deliver, but I do know that you're going to be hard pressed to fit it all on a small screen in such a way that all options are always visible. There are a number of ways to add components/functionality to your app, but where and how you add them is heavily dependent on:

• How often each component needs to be used
• Whether it provides context/info that should always be visible
• Which components make sense to logically group
• Actions that require more than one point of input to function

While considering those points for each of your components, you have the following options for adding more components to the screen:

Slide out panes

Slide out panes are fairly common. Most users are familiar with them as a way to navigate the application, but they are also useful for components/settings.

Different "states" where UI is transformed for current "state"

For example, a user taps "Add Row", and then the grid is called out with a modal overlay covering the rest of the components. The next row tapped in the called out grid has a row added above it. The state is then dismissed, and the modal overlay disappears. (This can also be used for toggling the grouped controls in the control bar)

Scroll-able Control Panel

The bottom 10% "Control Panel" portion of your screen. If you have a few more components than can fit, make it horizontally scroll-able. Android already does this natively with it's on/off settings.

Example Slide Pane

^{download bmml source – Wireframes created with Balsamiq Mockups}

I realize I haven't answered your question exactly, but hopefully this provides enough information to get your noodle churning. If you need me to expand on anything, or need additional clarification, please let me know!

Example of "States"

^{download bmml source}

Answer 2

A SUITABLE ICON FOR YOU...

This is from the spreadsheet program i use...

at left are actual size.
Combining them into one i get something like...

and here it is in blue

Just an idea you could use for a floating 'action' button and tray buttons if you go that way.
Good luck.