Mobile InterfaceBy Yaowaluck Promdee, Sumonta Kasemvilas

322131 Human Computer Interaction Computer Science Khon Kaen University

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

Mobile UI vs Desktop UITiny screen Battery powered Spotty connection Small pipe

Expensive data Limited storage Distracted user Touch vs mouse

Mobile MindsetBe focused: เนน้ที&จะนาํเสนออะไร?

Be unique: จะไมซ่ ้าํกนั ทาํใหแ้อปดูแตกต่าง มอีะไรที:ทาํใหค้นอื#นเลอืกใช ้

Be charming: คาํนึงถงึการใชง้านของผูใ้ช ้

Be considerate: สรา้งประสบการณข์องผูใ้ข ้ที3คดิถงึออกแบบตามความคดิของผูอ้ื.น

Mobile Contexts

Mobile Contexts

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

Global Guidelines

Responsiveness Polish Thumbs Targets

Content Controls Contrast Scrolling

Navigation Models

iOSWindow MobileAndroid

Statistics of mobile os usage 2015

Mobile OS market share as of February 2015 Net Applications

Android

The version history of the Android mobile operating system

Android UI

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

iOs UI

Window Phone

Window Phone

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

Gestures

Communications Provide feedback Modal alerts Confirmations

Lunching

First ImpressionsExample Calendar Applications

First Impressions

iBeer Fit Google

Any Do Transplant Hero

Icons

Size

Assignmentให้ศึกษา mobile app ที่ตัวเองคิดว่าออกแบบดีที่สุดมา 1 แอปพลิเคชัน อธิบายด้วยว่าทำไมถึงดี ดีอย่างไร และหาที่คิดว่าออกแบบไม่ดีมา 1 แอปพลิเคชัน โดยให้ออกแบบใหม่ แก้ไขว่าทำไมที่เลือกมาถึงไม่ดี และควรจะออกแบบแก้ยังไงให้ดีขึ้น ส่งในชั่วโมง

***Upload files .jpeg and zip all to LMS LAB#9_ID_SEC.zip