• Like
  • Save

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Mobile User Interface Design

  • 1,449 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,449
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mobile User Interface DesignA Brief Introduction of Mobile UI design -20111228
  • 2. OutlineConsiderations – What we thinkIdeas – How to get inspirationsDesign Process – What we didDifficulty– When we have difficulties in implementing
  • 3. Considerations – What we think1 People do things in a small screen.
  • 4. Considerations – What we think Desktop v.s. Mobile screen sizes
  • 5. Considerations – What we think Take PChome shopping website as the example…
  • 6. Considerations – What we think QVGA 320 x 240 User see this when they go to the full website with QVGA screen
  • 7. Considerations – What we think HVGA 480 x 360 User see this when they go to the full website with HVGA screen (iPhone)
  • 8. Considerations – What we think Full size websites with crowded information and functions may be difficult and also less attractive for users 
  • 9. Considerations – What we think People use mobile phone any time, everywhere
  • 10. Considerations – What we think Provide the most important information user need in a very fast and simple way is the goal
  • 11. Considerations – What we think Tips for considering design on small screen: • Decide on the most important aspect of your service • If you have a large feature set, cut it down to the minimum • Don’t skimp on the amount of information on pages • Provide a way to access the full version of the siteMobile Web Design: Getting to the Point - Part I
  • 12. Considerations – What we think2 The screen size and pixels density are on mobile devices.
  • 13. Considerations – What we think Diversity of mobile device display resolutionDisplay resolution
  • 14. Considerations – What we think Strategies for considering • Define device groups effective design for multiple • Create a default reference design screen sizes • Define rules for content and design adaptation • Opt for web standards and a flexible layoutEffective Design for Multiple Screen Sizes
  • 15. Considerations – What we think3 Influences by configurations of hardware key and Software key
  • 16. Considerations – What we think 51. back2. home(end) 63. option 74. search5. Power6. volume + 87. volume -8. camera Soft key and hardware key definition may give different behaviors and principles
  • 17. Considerations – What we think
  • 18. Considerations – What we think
  • 19. Considerations – What we thinkBefore starting mobile UI design, we better dosurvey and prepare for the following information:• Define the goals and the main tasks we will provide.• Under the scope of project, outline the mobile devices and their screen sizes for the following design development process.• Experience and explore the platforms which will design for and study the guidelines to provide consistent user experiences.
  • 20. Considerations – What we think Design Goal and PurposeGrouping Design Screen Size Gesture Swipe to delete Touch Event on status bar
  • 21. Considerations – What we thinkFor more mobile UI design sharing, see you next week consider how people use iOS-based devices Gesture Swipe to delete Touch Event on status bar
  • 22. Considerations – What we think Design Goal and PurposeGrouping Design Screen Size UXG of Platforms Gesture Swipe to delete Touch Event on status bar
  • 23. Considerations – What we think Buildup or Apply design patterns Human-interface Guideline (Windows Phone/ iPhone)http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html#//apple_ref/doc/uid/TP40006556-CH1-SW1http://itunes.tugraz.at/media/items/iphone_application_development/1268123124-10_Usability.pdf
  • 24. Considerations – What we think Buildup or Apply design patterns Android Patterns / Mobile Patternshttp://mobile-patterns.com/http://www.androidpatterns.com/
  • 25. Ideas – How to get inspirations Explore the domain knowledge and applications Under development Voice Assistance G-sensor GPS Augmented Reality multi-touchAugmented Reality Cinema
  • 26. Ideas – How to get inspirations Familiar With User Needs see, hear, think, feel, do and Their Contexts who, where, when, how, whyhttp://sachendra.wordpress.com/2011/08/24/usability-issues-in-pulse-iphone-app/
  • 27. Design Process – What we did Step 1: IDLE Build Framework MAIN MENU start from the top view DESKTOP WIDGET SCREENLOCK
  • 28. Design Process – What we didiOS5 SOCIAL SHAREOTHER ADVANCED FEATURES TWEETDESKTOP WIDGET QUICK SETTINGS SEARCH IDLE SCREENLOCK NOTIFICATION
  • 29. Design Process – What we did Windows Phone PEOPLE HUB OFFICE/GAME/MEDIA HUB LIVE TAILS SEARCH MAIN MENU STARTSCREEN SEARCH SCREENLOCKhttp://www.microsoft.com/windowsphone/en-us/features/default.aspx#Email featuring Outlook Mobile
  • 30. Design Process – What we didhttp://setiabud.blogspot.com/2011/09/windows-phone-75-mango-review-people-me.htmlhttp://www.winrumors.com/windows-phone-mango-secret-features-demo-video/
  • 31. Design Process – What we didSense UI (Android)QUICK SETTINGS NOTIFICATIONS SOCIAL HUB SEARCH MAIN MENU IDLE PAGES FAVORITES / DESKTOP WIDGET DOWNLOADED / SHORTCUT SORT SCREENLOCK QUICK LAUNCH
  • 32. Design Process – What we didSense UI (Android)QUICK SETTINGS NOTIFICATIONS SOCIAL HUB SEARCH MAIN MENU IDLE PAGES FAVORITES / DESKTOP WIDGET DOWNLOADED / SHORTCUT SORT SCREENLOCK QUICK LAUNCH
  • 33. Design Process – What we did QUICK SETTINGS Network/GPS/Sound/Wireless/Alarm CONTACT CENTER SEARCH Info/ History/ Messages/ Mail/ Photo/ Event Global/ Local IDLE PAGES MAIN MENU Desktop widget Categorize/ Sort/Search Contact shortcut SCREENLOCK Quick Launch Based on the goals, define the scopes and universal functions
  • 34. Design Process – What we didStep 2: Make Feature List
  • 35. Design Process – What we did Step 3 Menu Tree Organize all of the functions and identify the consistency
  • 36. Design Process – What we didStep 4Design prototypeWireframe Screen Lock Incoming voice call Incoming video call
  • 37. Design Process – What we did
  • 38. Design Process – What we did
  • 39. Design Process – What we didIdle Quick turning page Shortcut edit
  • 40. Design Process – What we didContact CenterDialer Contact Call Favorite History
  • 41. Design Process – What we did
  • 42. Design Process – What we did
  • 43. Design Process – What we did Message Photo Info Call E-mail Event History
  • 44. Design Process – What we did
  • 45. Design Process – What we did
  • 46. Design Process – What we did
  • 47. Design Process – What we did
  • 48. Design Process – What we didMain menu Sort by • Category • Sort from A to Z • Sort from Z to A • Search
  • 49. Design Process – What we did Flow chart Layout definitions Video demo
  • 50. Design Process – What we did Flow chart Layout definitions Video demoFile manager video player BMI camcorder Calendar timer Bluetooth mail Message box Stopwatch alarm Screen lockPhonebook FM Radio Photo viewer call log notepad WAP sketch note DTV camera unit convertor world clock voice memo Webkit browser map Widget tvmusic player To-do list calculator shortcut ATV king movie player Games event center
  • 51. Design Process – What we didStep 5QA TestUsability questionsWordingConsistency
  • 52. Difficulty – When we have difficulties in implementingLimited Memory UsageMedia player useConcurrent CasesEdit accessing filesEvents occur at the same timeWhen interrupted by calls or eventScreen lock/ Screen saverLimited Text Display
  • 53. Difficulty – When we have difficulties in implementingCall ControlVoice Record, Distorted Effect, Background Sound, Multi-partyPhonebookImport/Export between SIMs or storagesSchedule FM Play/RecordMulti-SIMsMulti-SD cards
  • 54. Thank you 