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...
Drawing Sitemap/
        Flowchart

• List all your pages
• Just like a website, have structure, sitemap
• Forsee the loop...
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




                           but...
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 unde...
typical list


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

...
complex navi


                      1.combination of 4 way scrolling
                      2.needs a good visualization t...
grid /numerical keypress


                      1.direct press on the numerical numbers
                      2.easy hint...
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 attendin...
Designing User Interface for Mobile Content in Flash lite
Designing User Interface for Mobile Content in Flash lite
Designing User Interface for Mobile Content in Flash lite
Upcoming SlideShare
Loading in...5
×

Designing User Interface for Mobile Content in Flash lite

2,852

Published on

1 Comment
6 Likes
Statistics
Notes
  • As a management instructor I enjoy viewing the work of others. This is probably the best presentation on planning I have viewed.
    Sharika
    http://winkhealth.com http://financewink.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,852
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
70
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Designing User Interface for Mobile Content in Flash lite

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

    Clipping is a handy way to collect important slides you want to go back to later.

×