Mobile forms - 10 DOs and DONTs

10 Mobile FormsDOs and Don’tsTomer 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. Holzschlag2

1. Labeling3

INLINE LABELS ARE ALSO A VALID MOBILE OPTION. (KEEP IN MIND TO HAVE THE INLINE TEXT REMAIN IN THE FIELD UNTIL FIRST KEYSTROKE)6

2. Combining7

3. Divide10

DIVIDE FORMS INTO CHUNKS13

4. Right Controls14

RADIO BUTTONS ARE IMPOSSIBLE TO PRESS15

SMALL BUTTONS ARE IMPOSSIBLE FOR “FAT FINGER SYNDROME”17

BUT WHY NOT USE THE BUILT-IN DATE FUNCTIONALITY OF HTML 5?18

BUTTONS LOOK DIFFERENT IN DIFFERENT MOBILE DEVICES. DON’T JUST STRETCH THEM TO 100%19

5. Error Handling21

CONNECT ERROR TO ERRORENOUS FIELD22

REMEMBER THE KEYBOARD LOCATION & SIZE24

ANOTHER GREAT EXAMPLE OF “REMEMBERING THE KEYBOARD”25

7. Wizarding27

INDICATE WHERE WE ARE IN THE WIZARD TRAIL28

USUALLY CIRCLES MARK THE SPOT29

CAREFUL! CIRCLES ALSO INDICATE FLICK AFFORDANCE30

8. Drag31

DRAG AFFORDANCE IS INDICATED BY 3 HORIZONTAL LINES32

9. Loading…33

THE RETURN OF THE SPLASH SCREEN34

DON’T GET STUCK, ALWAYS SHOW PROGRESS36

10.Don’ts37

USELESS POPUPS AND CONFIRMATIONS38

DUPLICATE NAVIGATIONS / BUTTONS41

WRONG CONTROLS42

THE MANY FACES OF LINKEDIN43

“FAT FINGER SYNDROME”45

I’M BLIND!!!46

Appendix: Registration & Cashier Patterns48

http://www.iphone-entreprise.com	1302
http://a0.twimg.com	4
http://www.onlydoo.com	4
https://twitter.com	1

by Tomer Rosenthal on Dec 28, 2011