designing user interface for mobile content in flash lite
DESCRIPTION
TRANSCRIPT
![Page 1: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/1.jpg)
Designing User Interface for Mobile Content in Flash Lite
Flash your apps correctly yo!
![Page 2: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/2.jpg)
Sorry!
• No scripting
• No programming
• This is BarCamp! Participate!
• Disturb me and I’m happy :)
![Page 3: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/3.jpg)
User Interface
• The interface that connects the user and the application
• Have to be very intuitive, easy to navigate
• Less is more
![Page 4: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/4.jpg)
![Page 5: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/5.jpg)
![Page 6: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/6.jpg)
Drawing Sitemap/Flowchart
• List all your pages
• Just like a website, have structure, sitemap
• Forsee the loops of action of user
• Planning the application
![Page 7: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/7.jpg)
![Page 8: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/8.jpg)
Your resolution
• 176x208 - flash lite 1.1, early phones
• 320x240 - flash lite 2.1, newer phone/with chip
![Page 9: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/9.jpg)
Arranging your layouts
• icon/visual
• button/softkey
• content/interactive
![Page 10: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/10.jpg)
websites
header
footer
sidebar/navi
content
![Page 11: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/11.jpg)
status indicators / marks / timer
content/interactivity
button labels / main menu
wapsite / mobile apps
![Page 12: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/12.jpg)
Just like website
see the similarities
![Page 13: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/13.jpg)
Navigation Methods
• Carousel/List
• Typical/List
• Complex Navi
• Grid, 9 box
![Page 14: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/14.jpg)
carousel/list
1.combination of icon and list2.view-appealing3.easily understood
m-travelogue
![Page 15: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/15.jpg)
typical list
1.a lot of data list2.needs to have a scrollbar/total numberof list
goopymart
![Page 16: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/16.jpg)
complex navi
1.combination of 4 way scrolling2.needs a good visualization to help/indicate user
vienna travel guide
![Page 17: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/17.jpg)
grid /numerical keypress
1.direct press on the numerical numbers2.easy hint of numbers/touchfeel3.cluttered, but effective - see all option
mobiexplore croatia
![Page 18: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/18.jpg)
demo of the navigation
![Page 19: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/19.jpg)
Usability
• Retaining indicators
• Status bar, battery remaining, network strength
• Scrollbars, early instructions
![Page 20: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/20.jpg)
Always test the navigation on various devices/condition
Count the clicks/hardness/usability
Last but not least
![Page 21: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/21.jpg)
Wallpaper demo/Flash lite examples
by Ellem, Meobi
![Page 22: Designing User Interface for Mobile Content in Flash lite](https://reader036.vdocuments.net/reader036/viewer/2022070300/53fc4d218d7f72384b8b45ba/html5/thumbnails/22.jpg)
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