Designing an array of buttons

Question

Now I’m designing a single-view mobile application for iOS. The view contains a text area at the top, and an array of buttons for users to input characters. I’m deciding the layout of the buttons so that the following conditions are satisfied:

1. Each button refers to a sequence of characters (can be restricted to ASCII for simplicity). When the user presses the button, the sequence is appended to the text area, just like a keyboard.

2. The button array must contain buttons representing all English alphabets (A-z, a-z), digits (0-9), and a few symbols (e.g. dollar sign, comma, brackets etc), respectively, except that there could be a “Shift” button for turning alphabet buttons to uppercase. The uppercase alphabets are rarely used.

3. Some buttons refer to more than one character (hence I said “sequence”). For example, there might be a button labelled “apple”. When the app continues to be developed, the number of such kind of buttons will increase.

I have some options in mind, but none of them appears to be good enough:

1. Just use the system keyboard and let users type normally. So when users want to input “apple” then just ask them to press 5 keys. However, since users will probably enter a sequence of mixed character types (a short string containing both alphabets, digits and symbols), this design will be quite inconvenient.

2. Create a scroll pane (perhaps horizontal) and put the buttons inside. The final product will be similar to an emoji keyboard (separated into different types and users can scroll the keyboard for less-used emoji). However, I’m not sure if this design will be strange and inefficient. Also, I need to reimplement an English keyboard, which is not optimal.

3. Let users switch between the traditional keyboard and the one I described in (2). This is also quite inconvenient. (Why bother to switch and find out the “apple” button if I can type it directly? Not a lot of keystrokes are saved!)

Since this project is my first one targeting mobile users, I need some more advice. Thank you.

Answer 1

There should be 2 types of controls in your expression builder.

1. Direct buttons: When you click on the button, the button name appears directly on the text area. (If button name is '%', when user clicks on it, then a '%' comes in the text area where the cursor currently is)
2. Phrase selectors: Button names would be 'Operations', 'Fruits' or likewise, a general name. When it is clicked, a Select 2 dropdown appears in the text area. User is required to search+/select from this categorised dropdown. (I.e, when button Fruits is clicked, dropdown appears in the text area. From which user can select apple or related)

Allowing keyboard always, is not a good idea as:-

1. It brings up lots of cases to consider, while developing and testing as parsing it is not easy. By restricting the user to onscreen keyboard, we know all the possible variations that could possibly come up in the text area.
2. You could allow the keyboard for selecting a phrase from the select 2 dropdown, as said earlier.