Mobile interface, principle of mobile user interface and example

1. Mobile Interface
By Yaowaluck Promdee, Sumonta Kasemvilas
322131 Human Computer Interaction
Computer Science Khon Kaen University

2. Principle of Mobile Interface Design
• The user interface of mobile, or mobile UI, of a device is the look and feel of the
on-screen menu mobile system.
• Mobile and Desktop screen
• Mobile Mindset
• Mobile Contexts
• Global Guideline
• Navigation Model
• User Inputs
• Gestures / Lunching
• Communications

3. Mobile UI vs Desktop UI
Tiny screen
Battery powered
Spotty connection
Small pipe
Expensive data
Limited storage
Distracted user
Touch vs mouse

4. Mobile Mindset
Be focused:
เน้นที&จะนําเสนออะไร?
Be unique:
จะไม่ซ้ํากัน ทําให้แอปดูแตกต่าง มีอะไรที:ทําให้คน
อื#นเลือกใช้
Be charming:
คํานึงถึงการใช้งานของผู้ใช้
Be considerate:
สร้างประสบการณ์ของผู้ใข้ที3คิดถึงออกแบบตาม
ความคิดของผู้อื.น

5. Mobile Contexts

6. Mobile Contexts
http://www.bethkanter.org/wp-content/uploads/186055028326289200_TzudgPVn_f.jpg

7. Global Guidelines
Responsiveness Polish Thumbs Targets
Content Controls Contrast Scrolling

8. Navigation Models
iOSWindow MobileAndroid

9. Statistics of mobile os usage 2015
Mobile OS market share as of February 2015 Net Applications

10. Android
The version history of the Android mobile operating system

11. Android UI

12. iOS
iOS (originally iPhone OS) is a mobile operating system developed by Apple Inc.
and distributed exclusively for Apple hardware.

13. iOs UI

14. Window Phone

15. Window Phone

16. User InputsA sample of the various keyboards available on iOS , Android

17. Gestures

18. Communications
Provide feedback
Modal alerts
Confirmations

19. Lunching

20. First Impressions
Example Calendar Applications

21. First Impressions
iBeer Fit Google
Any Do Transplant Hero

22. Icons

23. Size

24. Assignment
ให้ศึกษา mobile app ที่ตัวเองคิดว่าออกแบบดีที่สุดมา 1 แอปพลิเคชัน
อธิบายด้วยว่าทำไมถึงดี ดีอย่างไร
และหาที่คิดว่าออกแบบไม่ดีมา 1 แอปพลิเคชัน
โดยให้ออกแบบใหม่ แก้ไขว่าทำไมที่เลือกมาถึงไม่ดี
และควรจะออกแบบแก้ยังไงให้ดีขึ้น ส่งในชั่วโมง
***Upload files .jpeg and zip all to LMS
LAB#9_ID_SEC.zip