mobile forms - 10 dos and donts
DESCRIPTION
10 tips for creating mobile forms.TRANSCRIPT
![Page 1: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/1.jpg)
10 Mobile Forms DOs and Don’ts
Tomer RosenthalWeb & Mobile product manager 888.com
![Page 2: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/2.jpg)
"There is NO MOBILE WEB people. That is a f#$%ing
bunch of hype. It is merely the Web."
Molly E. Holzschlag
![Page 3: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/3.jpg)
1. Labeling
![Page 4: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/4.jpg)
![Page 5: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/5.jpg)
![Page 6: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/6.jpg)
INLINE LABELS ARE ALSO A VALID
MOBILE OPTION.
(KEEP IN MIND TO HAVE THE INLINE TEXT REMAIN IN THE FIELD
UNTIL FIRST KEYSTROKE)
![Page 7: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/7.jpg)
2. Combining
![Page 8: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/8.jpg)
![Page 9: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/9.jpg)
COMBINE AND LABEL.
(CAN ALSO HAVE ONE
LABEL FOR TWO
FIELDS)
![Page 10: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/10.jpg)
3. Divide
![Page 11: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/11.jpg)
![Page 12: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/12.jpg)
![Page 13: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/13.jpg)
DIVIDE FORMS INTO CHUNKS
![Page 14: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/14.jpg)
4. Right Controls
![Page 15: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/15.jpg)
RADIO BUTTONS ARE IMPOSSIBLE TO PRESS
![Page 16: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/16.jpg)
![Page 17: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/17.jpg)
SMALL BUTTONS ARE IMPOSSIBLE FOR “FAT FINGER SYNDROME”
![Page 18: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/18.jpg)
BUT WHY NOT USE THE BUILT-IN DATE
FUNCTIONALITY OF HTML 5?
![Page 19: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/19.jpg)
BUTTONS LOOK DIFFERENT IN
DIFFERENT MOBILE DEVICES. DON’T JUST
STRETCH THEM TO 100%
![Page 20: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/20.jpg)
ENLARGE THE BUTTONS WITH A HIDDEN CLICKABLE
AREA TO HELP USERS AIM
![Page 21: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/21.jpg)
5. Error Handling
![Page 22: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/22.jpg)
CONNECT ERROR TO ERRORENOUS FIELD
![Page 23: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/23.jpg)
6. Keyboard Area
![Page 24: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/24.jpg)
REMEMBER THE KEYBOARD LOCATION
& SIZE
![Page 25: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/25.jpg)
ANOTHER GREAT EXAMPLE OF
“REMEMBERING THE KEYBOARD”
![Page 26: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/26.jpg)
THERE IS MORE THAN
ONE KEYBOARD IN
HTML 5
![Page 27: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/27.jpg)
7. Wizarding
![Page 28: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/28.jpg)
INDICATE WHERE WE ARE IN THE WIZARD
TRAIL
![Page 29: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/29.jpg)
USUALLY CIRCLES MARK THE SPOT
![Page 30: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/30.jpg)
CAREFUL!CIRCLES ALSO
INDICATE FLICK AFFORDANCE
![Page 31: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/31.jpg)
8. Drag
![Page 32: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/32.jpg)
DRAG AFFORDANCE IS INDICATED BY 3
HORIZONTAL LINES
![Page 33: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/33.jpg)
9. Loading…
![Page 34: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/34.jpg)
THE RETURN OF THE SPLASH SCREEN
![Page 35: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/35.jpg)
MOST USERS HATE THE
SPLASH. IF YOU MUST
– PUT TIPS/BONUSES
ON SPLASH
![Page 36: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/36.jpg)
DON’T GET STUCK, ALWAYS SHOW
PROGRESS
![Page 37: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/37.jpg)
10.Don’ts
![Page 38: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/38.jpg)
USELESS POPUPS AND CONFIRMATIONS
![Page 39: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/39.jpg)
IRRELEVANT CRAP
![Page 40: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/40.jpg)
DUPLICATE LABELS
![Page 41: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/41.jpg)
DUPLICATE NAVIGATIONS /
BUTTONS
![Page 42: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/42.jpg)
WRONG CONTROLS
![Page 43: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/43.jpg)
THE MANY FACES OF LINKEDIN
![Page 44: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/44.jpg)
BAD USE OF REAL
ESTATE
![Page 45: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/45.jpg)
“FAT FINGER SYNDROME”
![Page 46: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/46.jpg)
I’M BLIND!!!
![Page 47: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/47.jpg)
![Page 48: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/48.jpg)
Appendix:
Registration & Cashier Patterns
“Mobile Design Pattern Gallery / Theresa Neil” (www.theresaneil.com)
![Page 49: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/49.jpg)
![Page 50: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/50.jpg)
![Page 51: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/51.jpg)
![Page 52: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/52.jpg)
![Page 53: Mobile forms - 10 DOs and DONTs](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492f88eb479595b4d8b4733/html5/thumbnails/53.jpg)