UI Elements for iOS

For work, I'm sometimes required to put together iPad apps as a user-friendly means of controlling and receiving data from our wireless telemetry devices.

Over time I've had to create a lot of useful custom UI elements, so I decided to start doing most of my UI work off the clock. That way I can use them in my own side-projects and publish them here!

A while ago, Bret Victor wrote an extremely insightful (as is all of his published work) article titled "Magic Ink." In it he described that often the clearest way to describe settings to the user is through a simple sentence.

A typical design would use a preference dialog or form that the user would manipulate to tell the software what to do. However, an information design approach starts with the converse—the software must explain to the user what it will do. It must graphically express the current configuration. 

For presenting abstract, non-comparative information such as this, an excellent graphical element is simply a concise sentence. 

enter image description here 

The user always sees the software presenting information, instead of herself instructing the software. If the information presented is wrong, the user corrects it in place. There is no “OK” or confirmation button—the sentence always represents the current configuration.

Understandably, he never made an implementation publicly available. I went ahead and rolled my own. It's published here. Colors can be customized. More types of options can be added.

enter image description here
An "option string" showing a
number of settings which can be
changed directly by the user.


enter image description here

User changing the sentence by picking from a set
of applicable words.

enter image description here
User entering updating an arbitrary number field
(keypad included).

Each modifiable part of the sentence is a subclass of OptionString, and is required to provide an object which will allow modification whenever it is tapped. More subclasses can be made providing dates, filenames, etc.

The other control I'm publishing today is simply a clone of android's in-app "toast" notification.

Removing project-specific dependencies is work, so there are only two controls available right now. More to come. Everything will be extracted into a single static library. Header files included. If you need help linking to a static library, call upon the infinite wisdom of Stack Overflow.

enter image description here

No comments:

Post a Comment