SwimTimer App an exercise in UI-design Bay Area Mobile Meetup - - - PowerPoint PPT Presentation

SwimTimer App

an exercise in UI-design

“Bay Area Mobile” Meetup - Hacker Dojo - Thu Jul 7, 2011 Frank Siebenlist FrankS@CreativeApptitude.com

Monday, July 11, 2011

What?

• SwimTimer App Demo
• High-level App Implementation Features
• Conclusions

Monday, July 11, 2011

Get your stopwatch-apps out and get ready... set... go...

Monday, July 11, 2011

SwimTimer Demo - Example Screens

Monday, July 11, 2011

Standard iPhone Stopwatch App

Monday, July 11, 2011

What’s wrong with “other” timer apps?

• Buttons are too small
• easy to press outside of button
• More than one button
• easy to press the wrong button
• Mistakes are made
• unforgiven - too bad...
• No saving or sharing of results
• reset is forget

Monday, July 11, 2011

What’s right with “this” SwimTimer app?

• One huge button
• impossible to miss - pay attention to race
• One single button for start/lap/finish
• impossible to press the wrong button
• Manage timed entries when you have the time
• during/after race - no hurries... relax
• Timed entries can be discarded
• with a swipe - does the right thing
• Tweet/email results
• uses internet memory

Monday, July 11, 2011

SwimTimer App

• Much improved stopwatch-app
• unique features among dozens of “similar” apps
• Tested by real swim-coaches and timer-challenged parents
• close to feature freeze
• Started out as just an exercise in UI-widget use
• became an exercise in UI-design
• About 2 dozen beta-testers
• maybe... probably... app will get published... soon

(which was never the original intention)

Monday, July 11, 2011

SwimTimer App Implementation

• Toolkit/Language: ANSCA’s Corona/Lua
• Why?
• Contemplating to use Corona for

real-world apps

• Corona’s ui.lua was far too “primitive”
• See if we could improve...
• Not much left of original ui.lua...

Monday, July 11, 2011

Implementation Features (1)

• Description of ui-elements fully declarative
• Objects and Handlers referred to by name
• Geometry managers to dynamically align groups
• f objects
• Object display properties, groups, alignment,

handlers... all (optionally)described in json-files

• Object cloning and persistence (almost) for free

Monday, July 11, 2011

Implementation Features (2)

• Button defined by image, rectangles, or any

instantiated display object or sprite

• All event-driven - propagate thru standard

Corona event registration/handling mechanism

• Listview enhanced with geometry manager
• Swipe left/right for duplicate/delete
• Easily configure button-state in xor/and-groups
• Much easier to keep app modular and MVC-like

Monday, July 11, 2011

Corona UI Futures (?)

• ANSCA working on new extended widget support
• widget.lua (beta - work in progress)
• still “primitive” in many ways...

as far as visible (source unavailable so far)

• Waiting to see if my “enhancements” would be easily portable to

new library

• if not too much work...

will port relevant parts as open-source

• Corona is a great game development toolkit...
• ...but basic ui-widget support is lagging behind substantially

compared to other SDKs (LiveCode, IOS, Appcelerator, ...)

• This SwimTimer app shows what you “could” do with Corona for a

UI... not necessarily what you “can” do out-of-the-box...

Monday, July 11, 2011

Post-Mortum...

• The day after this presentation, ANSCA communicated that Corona’s widget/coronaui-

library will NOT be open-source after all...

• change of previous promises... too bad... guess they have their reasons...
• Consequences
• Impossible to port my UI-extension to Corona’s widget-library
• Makes no sense to publish my UI-extension as open-source
• Corona’s widget-library: non-declarative, no json-config, no named-objects/handlers, no

geometry-groups&mgr, no swipes, no object persistence, no MVC modularity, ... so 1980’s ;-) ... ANSCA’s loss ...Corona’s community’s loss

• Corona good for physics-games as a box2d-shim... but rather primitive for business apps
• In process to re-render SwimTimer App on LiveCode (RunRev.com)
• ...as well as to use LiveCode for our “real” business apps (personalized medicine)
• No need to write any UI-extensions, true IDE with GUI-designer, HyperCard on

steroids, real debugger, plus easy call-outs to native IOS: LiveCode is a very impressive environment!!! (...and it’s difficult to impress me anymore...)

• Maybe next meeting I should give a presentation about my LiveCode experience (...and

compare it to Corona...)

Monday, July 11, 2011

Thanks!

??? Questions/Comments/Suggestions ????

Ability to create innovative apps for on-the-go and on-the-couch.

Monday, July 11, 2011