Mobile User Interface Design
11 likes1,476 views
This document discusses considerations for mobile UI design. It outlines the design process, including defining goals, creating a framework and feature list, prototyping with wireframes, and testing. Some key considerations mentioned are screen sizes and resolutions varying across devices, soft keys and hardware differences, and providing the most important information in a simple, fast way for mobile. Challenges in implementation can include limited memory, media playback, concurrent events, and call control features. The document provides sources on mobile design patterns, guidelines for major platforms, and examples of mobile app analyses.
Mobile User Interface Design
- 1. Mobile User Interface Design A Brief Introduction of Mobile UI design -20111228
- 2. Considerations – What we think Ideas – How to get inspirations Design Process – What we did Difficulty– When we have difficulties in implementing Outline
- 3. Considerations – What we think 1 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 User see this when they go to the full website with QVGA screen QVGA 320 x 240
- 7. Considerations – What we think User see this when they go to the full website with HVGA screen (iPhone) HVGA 480 x 360
- 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 • 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 site Tips for considering design on small screen: Mobile Web Design: Getting to the Point - Part I
- 12. Considerations – What we think 2 The screen size and pixels density are on mobile devices.
- 13. Diversity of mobile device display resolution Considerations – What we think Display resolution
- 14. Considerations – What we think Effective Design for Multiple Screen Sizes • Define device groups • Create a default reference design • Define rules for content and design adaptation • Opt for web standards and a flexible layout Strategies for considering effective design for multiple screen sizes
- 15. 3 Influences by configurations of hardware key and Software key Considerations – What we think
- 16. Soft key and hardware key definition may give different behaviors and principles – What we think 1. back 2. home(end) 3. option 4. search 5. Power 6. volume + 7. volume - 8. camera 5 6 7 8 Considerations
- 17. – What we thinkConsiderations
- 18. – What we thinkConsiderations
- 19. – What we thinkConsiderations • 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. Before starting mobile UI design, we better do survey and prepare for the following information:
- 20. – What we thinkConsiderations Gesture Swipe to delete Touch Event on status bar Grouping Design Screen Size Design Goal and Purpose
- 21. Gesture Swipe to delete Touch Event on status bar For more mobile UI design sharing, see you next week – What we thinkConsiderations consider how people use iOS-based devices
- 22. – What we thinkConsiderations Gesture Swipe to delete Touch Event on status bar Grouping Design Screen Size Design Goal and Purpose UXG of Platforms
- 23. Buildup or Apply design patterns Human-interface Guideline (Windows Phone/ iPhone) – What we thinkConsiderations http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html#//apple_ref /doc/uid/TP40006556-CH1-SW1 http://itunes.tugraz.at/media/items/iphone_application_development/1268123124-10_Usability.pdf
- 24. Buildup or Apply design patterns Android Patterns / Mobile Patterns http://mobile-patterns.com/ http://www.androidpatterns.com/ – What we thinkConsiderations
- 25. Explore the domain knowledge and applications Ideas – How to get inspirations Augmented Reality Cinema G-sensor GPS multi-touchAugmented Reality Voice Assistance Under development
- 26. Familiar With User Needs see, hear, think, feel, do and Their Contexts who, where, when, how, why Ideas – How to get inspirations http://sachendra.wordpress.com/2011/08/24/usability-issues-in-pulse- iphone-app/
- 27. Step 1: Build Framework start from the top view Design Process – What we did SCREENLOCK MAIN MENU IDLE DESKTOP WIDGET
- 28. Design Process – What we did iOS5 DESKTOP WIDGET SCREENLOCK NOTIFICATION QUICK SETTINGS OTHER ADVANCED FEATURES SEARCH IDLE SOCIAL SHARE TWEET
- 29. Design Process – What we did LIVE TAILS SCREENLOCK SEARCH PEOPLE HUB OFFICE/GAME/MEDIA HUB MAIN MENU SEARCH STARTSCREEN http://www.microsoft.com/windowsphone/en-us/features/default.aspx#Email featuring Outlook Mobile Windows Phone
- 31. Design Process MAIN MENU FAVORITES / DOWNLOADED / SORT IDLE PAGES DESKTOP WIDGET SHORTCUT SOCIAL HUB SCREENLOCK QUICK LAUNCH SEARCH QUICK SETTINGS NOTIFICATIONS Sense UI (Android) – What we did
- 32. Design Process – What we did MAIN MENU FAVORITES / DOWNLOADED / SORT IDLE PAGES DESKTOP WIDGET SHORTCUT SOCIAL HUB SCREENLOCK QUICK LAUNCH SEARCH QUICK SETTINGS NOTIFICATIONS Sense UI (Android)
- 33. Based on the goals, define the scopes and universal functions Design Process – What we did MAIN MENU Categorize/ Sort/Search IDLE PAGES Desktop widget Contact shortcut CONTACT CENTER Info/ History/ Messages/ Mail/ Photo/ Event SCREENLOCK Quick Launch SEARCH Global/ Local QUICK SETTINGS Network/GPS/Sound/Wireless/Alarm
- 34. Step 2: Make Feature List Design Process – What we did
- 35. Step 3 Menu Tree Organize all of the functions and identify the consistency Design Process – What we did
- 36. Design Process – What we did Step 4 Design prototype Wireframe 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 did Quick turning page Shortcut edit Idle
- 40. Design Process – What we did Contact Center Dialer Contact Call History Favorite
- 41. Design Process – What we did
- 42. Design Process – What we did
- 43. Design Process – What we did Info Call History Message E-mail Event Photo
- 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 did Sort by • Category • Sort from A to Z • Sort from Z to A • Search Main menu
- 49. Design Process – What we did Flow chart Layout definitions Video demo
- 50. Design Process – What we did Flow chart Layout definitions Video demo Phonebook Message box call log camcorder shortcut sketch note unit convertorcamera mail FM Radio voice memo king movie player video player Games world clock Bluetooth alarm tv notepad timerStopwatch To-do listmusic player calculator Screen lock WAP map event center Photo viewer BMI ATV Webkit browser DTV Widget File manager Calendar
- 51. Design Process – What we did Step 5 QA Test Usability questions Wording Consistency
- 52. Limited Memory Usage Media player use Concurrent Cases Edit accessing files Events occur at the same time When interrupted by calls or event Screen lock/ Screen saver Limited Text Display Difficulty – When we have difficulties in implementing
- 53. Difficulty – When we have difficulties in implementing Call Control Voice Record, Distorted Effect, Background Sound, Multi- party Phonebook Import/Export between SIMs or storages Schedule FM Play/Record Multi-SIMs Multi-SD cards
- 54. Thank you