49
Mobile UI/UX User Interface and Experience Sunday, July 21, 13

Mobile UI - Google Developers Group Cebu

Embed Size (px)

DESCRIPTION

My presentation during the Transit Hackathome http://philippine-transit.hackathome.com/

Citation preview

Page 1: Mobile UI - Google Developers Group Cebu

Mobile UI/UXUser Interface and Experience

Sunday, July 21, 13

Page 2: Mobile UI - Google Developers Group Cebu

Keith Levi LumanogMobile and Web Developer

Sunday, July 21, 13

Page 3: Mobile UI - Google Developers Group Cebu

Keith Levi LumanogMobile and Web Developer

Sunday, July 21, 13

Page 4: Mobile UI - Google Developers Group Cebu

Keith Levi LumanogMobile and Web Developer

www.micab.co

Sunday, July 21, 13

Page 5: Mobile UI - Google Developers Group Cebu

AndroidUser Interface and Experience

Sunday, July 21, 13

Page 6: Mobile UI - Google Developers Group Cebu

Android Devices and Displays

Sunday, July 21, 13

Page 7: Mobile UI - Google Developers Group Cebu

Android Devices and Displays

Sunday, July 21, 13

Page 8: Mobile UI - Google Developers Group Cebu

Android Devices and Displays

Sunday, July 21, 13

Page 9: Mobile UI - Google Developers Group Cebu

Android Devices and Displays

Sunday, July 21, 13

Page 10: Mobile UI - Google Developers Group Cebu

Android Devices and Displays

Sunday, July 21, 13

Page 11: Mobile UI - Google Developers Group Cebu

Android Devices and Displays

Sunday, July 21, 13

Page 12: Mobile UI - Google Developers Group Cebu

Android Devices and Displays

ldpimdpitvdpihdpixhdpixxhdpi

Sunday, July 21, 13

Page 13: Mobile UI - Google Developers Group Cebu

Android Devices and Displays

11% ldpimdpitvdpihdpixhdpixxhdpi

Sunday, July 21, 13

Page 14: Mobile UI - Google Developers Group Cebu

Android Devices and Displays

11%

23%

ldpimdpitvdpihdpixhdpixxhdpi

Sunday, July 21, 13

Page 15: Mobile UI - Google Developers Group Cebu

Android Devices and Displays

11%

23%

1%

ldpimdpitvdpihdpixhdpixxhdpi

Sunday, July 21, 13

Page 16: Mobile UI - Google Developers Group Cebu

Android Devices and Displays

11%

23%

1%

36%

ldpimdpitvdpihdpixhdpixxhdpi

Sunday, July 21, 13

Page 17: Mobile UI - Google Developers Group Cebu

Android Devices and Displays

11%

23%

1%

36%

25%

ldpimdpitvdpihdpixhdpixxhdpi

Sunday, July 21, 13

Page 18: Mobile UI - Google Developers Group Cebu

Android Devices and Displays

11%

23%

1%

36%

25%

5% ldpimdpitvdpihdpixhdpixxhdpi

Sunday, July 21, 13

Page 19: Mobile UI - Google Developers Group Cebu

ios Devices and Displays

Sunday, July 21, 13

Page 20: Mobile UI - Google Developers Group Cebu

ios Devices and Displays

Non- Retina

Sunday, July 21, 13

Page 21: Mobile UI - Google Developers Group Cebu

ios Devices and Displays

Non- RetinaRetina - @2x

Sunday, July 21, 13

Page 22: Mobile UI - Google Developers Group Cebu

Mobile Multiple Views Into One

Sunday, July 21, 13

Page 23: Mobile UI - Google Developers Group Cebu

Mobile Multiple Views Into One

Sunday, July 21, 13

Page 24: Mobile UI - Google Developers Group Cebu

Mobile Orientation Changes

Sunday, July 21, 13

Page 25: Mobile UI - Google Developers Group Cebu

ios Orientation Changes

Sunday, July 21, 13

Page 26: Mobile UI - Google Developers Group Cebu

Mobile Don’t Mimic!

Android, iOS and Windows Phone 7.

Sunday, July 21, 13

Page 27: Mobile UI - Google Developers Group Cebu

Mobile Don’t Mimic!

Android, iOS and Windows Phone 7.

Sunday, July 21, 13

Page 28: Mobile UI - Google Developers Group Cebu

Mobile Don’t Mimic!

Sunday, July 21, 13

Page 29: Mobile UI - Google Developers Group Cebu

Mobile Don’t Mimic!

Sunday, July 21, 13

Page 30: Mobile UI - Google Developers Group Cebu

Make Targets Fingertip-Size

target area of about 44 x 44 points.

Mobile

Sunday, July 21, 13

Page 31: Mobile UI - Google Developers Group Cebu

Make Targets Fingertip-Size

target area of about 44 x 44 points.

Mobile

Sunday, July 21, 13

Page 32: Mobile UI - Google Developers Group Cebu

Notify UsersMobile

Sunday, July 21, 13

Page 33: Mobile UI - Google Developers Group Cebu

7-second ruleMobile

Sunday, July 21, 13

Page 34: Mobile UI - Google Developers Group Cebu

7-second ruleMobile

Sunday, July 21, 13

Page 35: Mobile UI - Google Developers Group Cebu

7-second ruleMobile

Sunday, July 21, 13

Page 36: Mobile UI - Google Developers Group Cebu

7-second ruleMobile

Sunday, July 21, 13

Page 37: Mobile UI - Google Developers Group Cebu

Pop Overs and SidebarsMobile

Sunday, July 21, 13

Page 38: Mobile UI - Google Developers Group Cebu

Mobile Pop Overs and Sidebars

Sunday, July 21, 13

Page 39: Mobile UI - Google Developers Group Cebu

Mobile Pop Overs and Sidebars

Sunday, July 21, 13

Page 40: Mobile UI - Google Developers Group Cebu

MobileLists and Tables

Sunday, July 21, 13

Page 41: Mobile UI - Google Developers Group Cebu

MobileLists and Tables

Sunday, July 21, 13

Page 42: Mobile UI - Google Developers Group Cebu

Mobile Search Styles

Sunday, July 21, 13

Page 43: Mobile UI - Google Developers Group Cebu

Colors and Typography

Sunday, July 21, 13

Page 44: Mobile UI - Google Developers Group Cebu

Colors and Typography

Sunday, July 21, 13

Page 45: Mobile UI - Google Developers Group Cebu

Don’t be afraid to go out of the

box

Sunday, July 21, 13

Page 46: Mobile UI - Google Developers Group Cebu

Mobile Out of the Box

Sunday, July 21, 13

Page 47: Mobile UI - Google Developers Group Cebu

Mobile Out of the Box

Sunday, July 21, 13

Page 48: Mobile UI - Google Developers Group Cebu

Thank You!

@keithics or [email protected]

Sunday, July 21, 13

Page 49: Mobile UI - Google Developers Group Cebu

Thank You!

@keithics or [email protected]

Sunday, July 21, 13