mobile forms - 10 dos and donts
DESCRIPTION
10 tips for creating mobile forms.TRANSCRIPT
10 Mobile Forms DOs and Don’ts
Tomer RosenthalWeb & Mobile product manager 888.com
"There is NO MOBILE WEB people. That is a f#$%ing
bunch of hype. It is merely the Web."
Molly E. Holzschlag
1. Labeling
INLINE LABELS ARE ALSO A VALID
MOBILE OPTION.
(KEEP IN MIND TO HAVE THE INLINE TEXT REMAIN IN THE FIELD
UNTIL FIRST KEYSTROKE)
2. Combining
COMBINE AND LABEL.
(CAN ALSO HAVE ONE
LABEL FOR TWO
FIELDS)
3. Divide
DIVIDE FORMS INTO CHUNKS
4. Right Controls
RADIO BUTTONS ARE IMPOSSIBLE TO PRESS
SMALL BUTTONS ARE IMPOSSIBLE FOR “FAT FINGER SYNDROME”
BUT WHY NOT USE THE BUILT-IN DATE
FUNCTIONALITY OF HTML 5?
BUTTONS LOOK DIFFERENT IN
DIFFERENT MOBILE DEVICES. DON’T JUST
STRETCH THEM TO 100%
ENLARGE THE BUTTONS WITH A HIDDEN CLICKABLE
AREA TO HELP USERS AIM
5. Error Handling
CONNECT ERROR TO ERRORENOUS FIELD
6. Keyboard Area
REMEMBER THE KEYBOARD LOCATION
& SIZE
ANOTHER GREAT EXAMPLE OF
“REMEMBERING THE KEYBOARD”
THERE IS MORE THAN
ONE KEYBOARD IN
HTML 5
7. Wizarding
INDICATE WHERE WE ARE IN THE WIZARD
TRAIL
USUALLY CIRCLES MARK THE SPOT
CAREFUL!CIRCLES ALSO
INDICATE FLICK AFFORDANCE
8. Drag
DRAG AFFORDANCE IS INDICATED BY 3
HORIZONTAL LINES
9. Loading…
THE RETURN OF THE SPLASH SCREEN
MOST USERS HATE THE
SPLASH. IF YOU MUST
– PUT TIPS/BONUSES
ON SPLASH
DON’T GET STUCK, ALWAYS SHOW
PROGRESS
10.Don’ts
USELESS POPUPS AND CONFIRMATIONS
IRRELEVANT CRAP
DUPLICATE LABELS
DUPLICATE NAVIGATIONS /
BUTTONS
WRONG CONTROLS
THE MANY FACES OF LINKEDIN
BAD USE OF REAL
ESTATE
“FAT FINGER SYNDROME”
I’M BLIND!!!
Appendix:
Registration & Cashier Patterns
“Mobile Design Pattern Gallery / Theresa Neil” (www.theresaneil.com)