4

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).

General GUI framework

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 Sample Matrix    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
  • Compared to a flash game layout, decorating the add/remove buttons around the matrix seems clumsy. maybe your layout "borrow" from the design of android game-devs, 'cause kick, punch, slash, and nuke belong together – Jedi Commymullah Oct 14 '15 at 0:24
  • @JediCommymullah Its just an idea and as you said a clumsy one at that. I still haven't been able to find the relatively better UI for this feature. the current idea is a floating 'action' button which expands into a tray with the said buttons in it. Thoughts? – Paras Oct 14 '15 at 0:46
  • that's a right way. what's the label on 'action' button? – Jedi Commymullah Oct 14 '15 at 1:18
  • The label will be an icon, probably a gear or perhaps something custom indicating "modifying the matrix". Though since I'm not an expert I'd like if you could post some 'best advice' for this conundrum as an answer. – Paras Oct 14 '15 at 1:55
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

mockup

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"

mockup

download bmml source

  • Interesting proposal! I was considering a design for power users with everything in front of them; regardless, If I do implement the slide-in panel, wouldn't it take away of the visibility of the matrix grid. Visibility might be important for something as extensive as a grid of data while the user adds/removes rows and columns from it. Also, can you please elaborate on the different "states" concepts. Thanks – Paras Oct 8 '15 at 21:03
  • Driving home -- I'll add a quick mock-up before tomorrow morning. – Daniel Brown Oct 8 '15 at 21:18
  • Cheers! In the meantime, I think a slide-in would be a bad idea because the app already relies on swipes to navigate between matrices. A separate swipe feature will confuse the user. Note: I've added a sample user story in the question to help you better understand the system. Do lemme know, if I can explain something else as well. – Paras Oct 8 '15 at 23:23
  • 1
    @ParasDPain, I was not advocating for another swipe behavior. In general, I hazard against "swiping" being the only way to perform a function unless the function is more of a shortcut, and/or it is incredibly obvious that the user should/can swipe. I added an additional mock-up that should explain "states". You could also have a "state" that swaps out the bottom control bar entirely – Daniel Brown Oct 9 '15 at 12:59
  • Yep I understand now; the states feature will be very useful. And I'm considering a floating action button which expands into a tray from the bottom right corner to provide row/column control functionality. Unless you have a better idea on implementing the slide-in panel while the matrix navigation swipes persists – Paras Oct 9 '15 at 19:24
1

enter image description here

A SUITABLE ICON FOR YOU...

This is from the spreadsheet program i use...
enter image description here enter image description here
at left are actual size.
Combining them into one i get something like...enter image description here

and here it is in blue
enter image description here

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

  • Thank you! The icon looks very appropriate. I'll post more updates as things progress. – Paras Oct 14 '15 at 3:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.