mobile forms - 10 dos and donts

53
10 Mobile Forms DOs and Don’ts Tomer Rosenthal Web & Mobile product manager 888.com

Upload: tomer-rosenthal

Post on 18-Dec-2014

4.331 views

Category:

Design


2 download

DESCRIPTION

10 tips for creating mobile forms.

TRANSCRIPT

Page 1: Mobile forms - 10 DOs and DONTs

10 Mobile Forms DOs and Don’ts

Tomer RosenthalWeb & Mobile product manager 888.com

Page 2: Mobile forms - 10 DOs and DONTs

"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

1. Labeling

Page 4: Mobile forms - 10 DOs and DONTs
Page 5: Mobile forms - 10 DOs and DONTs
Page 6: Mobile forms - 10 DOs and DONTs

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

2. Combining

Page 8: Mobile forms - 10 DOs and DONTs
Page 9: Mobile forms - 10 DOs and DONTs

COMBINE AND LABEL.

(CAN ALSO HAVE ONE

LABEL FOR TWO

FIELDS)

Page 10: Mobile forms - 10 DOs and DONTs

3. Divide

Page 11: Mobile forms - 10 DOs and DONTs
Page 12: Mobile forms - 10 DOs and DONTs
Page 13: Mobile forms - 10 DOs and DONTs

DIVIDE FORMS INTO CHUNKS

Page 14: Mobile forms - 10 DOs and DONTs

4. Right Controls

Page 15: Mobile forms - 10 DOs and DONTs

RADIO BUTTONS ARE IMPOSSIBLE TO PRESS

Page 16: Mobile forms - 10 DOs and DONTs
Page 17: Mobile forms - 10 DOs and DONTs

SMALL BUTTONS ARE IMPOSSIBLE FOR “FAT FINGER SYNDROME”

Page 18: Mobile forms - 10 DOs and DONTs

BUT WHY NOT USE THE BUILT-IN DATE

FUNCTIONALITY OF HTML 5?

Page 19: Mobile forms - 10 DOs and DONTs

BUTTONS LOOK DIFFERENT IN

DIFFERENT MOBILE DEVICES. DON’T JUST

STRETCH THEM TO 100%

Page 20: Mobile forms - 10 DOs and DONTs

ENLARGE THE BUTTONS WITH A HIDDEN CLICKABLE

AREA TO HELP USERS AIM

Page 21: Mobile forms - 10 DOs and DONTs

5. Error Handling

Page 22: Mobile forms - 10 DOs and DONTs

CONNECT ERROR TO ERRORENOUS FIELD

Page 23: Mobile forms - 10 DOs and DONTs

6. Keyboard Area

Page 24: Mobile forms - 10 DOs and DONTs

REMEMBER THE KEYBOARD LOCATION

& SIZE

Page 25: Mobile forms - 10 DOs and DONTs

ANOTHER GREAT EXAMPLE OF

“REMEMBERING THE KEYBOARD”

Page 26: Mobile forms - 10 DOs and DONTs

THERE IS MORE THAN

ONE KEYBOARD IN

HTML 5

Page 27: Mobile forms - 10 DOs and DONTs

7. Wizarding

Page 28: Mobile forms - 10 DOs and DONTs

INDICATE WHERE WE ARE IN THE WIZARD

TRAIL

Page 29: Mobile forms - 10 DOs and DONTs

USUALLY CIRCLES MARK THE SPOT

Page 30: Mobile forms - 10 DOs and DONTs

CAREFUL!CIRCLES ALSO

INDICATE FLICK AFFORDANCE

Page 31: Mobile forms - 10 DOs and DONTs

8. Drag

Page 32: Mobile forms - 10 DOs and DONTs

DRAG AFFORDANCE IS INDICATED BY 3

HORIZONTAL LINES

Page 33: Mobile forms - 10 DOs and DONTs

9. Loading…

Page 34: Mobile forms - 10 DOs and DONTs

THE RETURN OF THE SPLASH SCREEN

Page 35: Mobile forms - 10 DOs and DONTs

MOST USERS HATE THE

SPLASH. IF YOU MUST

– PUT TIPS/BONUSES

ON SPLASH

Page 36: Mobile forms - 10 DOs and DONTs

DON’T GET STUCK, ALWAYS SHOW

PROGRESS

Page 37: Mobile forms - 10 DOs and DONTs

10.Don’ts

Page 38: Mobile forms - 10 DOs and DONTs

USELESS POPUPS AND CONFIRMATIONS

Page 39: Mobile forms - 10 DOs and DONTs

IRRELEVANT CRAP

Page 40: Mobile forms - 10 DOs and DONTs

DUPLICATE LABELS

Page 41: Mobile forms - 10 DOs and DONTs

DUPLICATE NAVIGATIONS /

BUTTONS

Page 42: Mobile forms - 10 DOs and DONTs

WRONG CONTROLS

Page 44: Mobile forms - 10 DOs and DONTs

BAD USE OF REAL

ESTATE

Page 45: Mobile forms - 10 DOs and DONTs

“FAT FINGER SYNDROME”

Page 46: Mobile forms - 10 DOs and DONTs

I’M BLIND!!!

Page 47: Mobile forms - 10 DOs and DONTs
Page 48: Mobile forms - 10 DOs and DONTs

Appendix:

Registration & Cashier Patterns

“Mobile Design Pattern Gallery / Theresa Neil” (www.theresaneil.com)

Page 49: Mobile forms - 10 DOs and DONTs
Page 50: Mobile forms - 10 DOs and DONTs
Page 51: Mobile forms - 10 DOs and DONTs
Page 52: Mobile forms - 10 DOs and DONTs
Page 53: Mobile forms - 10 DOs and DONTs