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

header
sidebar
/navi
content
footer
websites

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 list
2.view-appealing
3.easily understood
m-travelogue

typical list
1.a lot of data list
2.needs to have a scrollbar/total number
of list
goopymart

complex navi
1.combination of 4 way scrolling
2.needs a good visualization to help
/indicate user
vienna travel guide

grid /numerical keypress
1.direct press on the numerical numbers
2.easy hint of numbers/touchfeel
3.cluttered, but effective - see all option
mobiexplore croatia

demo of the navigation

Usability
• Retaining indicators
• Status bar, battery remaining, network
strength
• Scrollbars, early instructions

Last but not least
Always test the navigation
on various devices/condition
Count the clicks/hardness/usability

Wallpaper demo/Flash lite examples
by Ellem, Meobi

Bluetooth session after my talk
Suria KLCC Unofficial Guide
Eid ul-Adha Mobile Magazine
Thanks for attending BarCamp JB :)
Ikhwan Nazri/tekong - http://flavert.com
Ellem - http://meobi.net