Mobile forms - 10 DOs and DONTs

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)