2. Considerations – What we think
Ideas – How to get inspirations
Design Process – What we did
Difficulty– When we have difficulties in implementing
Outline
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
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
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