This document discusses designing user interfaces for mobile content created with Flash Lite. It covers key aspects of interfaces such as being intuitive, easy to navigate, and using less elements. It also discusses planning the application structure, supporting different screen resolutions, and common layout elements. Different navigation methods like carousels, lists, and grids are presented. The importance of usability testing on different devices is also highlighted.

1. Designing User Interface for
Mobile Content in Flash Lite
Flash your apps correctly yo!

2. Sorry!
• No scripting
• No programming
• This is BarCamp! Participate!
• Disturb me and I’m happy :)

3. User Interface
• The interface that connects the user and the
application
• Have to be very intuitive, easy to navigate
• Less is more

6. Drawing Sitemap/
Flowchart
• List all your pages
• Just like a website, have structure, sitemap
• Forsee the loops of action of user
• Planning the application

8. Your resolution
• 176x208 - flash lite 1.1, early phones
• 320x240 - flash lite 2.1, newer phone/with
chip

9. Arranging your layouts
• icon/visual
• button/softkey
• content/interactive

10. header
sidebar
/navi
content
footer
websites

11. status indicators / marks / timer
content/interactivity
button labels / main menu
wapsite / mobile apps

12. Just like website
see the similarities

13. Navigation Methods
• Carousel/List
• Typical/List
• Complex Navi
• Grid, 9 box

14. carousel/list
1.combination of icon and list
2.view-appealing
3.easily understood
m-travelogue

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

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

17. 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

18. demo of the navigation

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

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

21. Wallpaper demo/Flash lite examples
by Ellem, Meobi

22. 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