Designing User Interface for Mobile Content in Flash Lite

Flash your apps correctly yo!

Sorry!

• No scripting

• No programming

• This is BarCamp! Participate!

• Disturb me and I’m happy :)

User Interface

• The interface that connects the user and the application

• Have to be very intuitive, easy to navigate

• Less is more

Drawing Sitemap/Flowchart

• List all your pages

• Just like a website, have structure, sitemap

• Forsee the loops of action of user

• Planning the application

Your resolution

• 176x208 - flash lite 1.1, early phones

• 320x240 - flash lite 2.1, newer phone/with chip

Arranging your layouts

• icon/visual

• button/softkey

• content/interactive

websites

header

footer

sidebar/navi

content

status indicators / marks / timer

content/interactivity

button labels / main menu

wapsite / mobile apps

Just like website

see the similarities

Navigation Methods

• Carousel/List

• Typical/List

• Complex Navi

• Grid, 9 box

carousel/list

1.combination of icon and list2.view-appealing3.easily understood

m-travelogue

typical list

1.a lot of data list2.needs to have a scrollbar/total numberof list

goopymart

complex navi

1.combination of 4 way scrolling2.needs a good visualization to help/indicate user

vienna travel guide

grid /numerical keypress

1.direct press on the numerical numbers2.easy hint of numbers/touchfeel3.cluttered, but effective - see all option

mobiexplore croatia

demo of the navigation

Usability

• Retaining indicators

• Status bar, battery remaining, network strength

• Scrollbars, early instructions

Always test the navigation on various devices/condition

Count the clicks/hardness/usability

Last but not least

Wallpaper demo/Flash lite examples

by Ellem, Meobi

Bluetooth session after my talkSuria KLCC Unofficial GuideEid ul-Adha Mobile Magazine

Thanks for attending BarCamp JB :)

Ikhwan Nazri/tekong - http://flavert.comEllem - http://meobi.net