Bar

Status bar, navigation bar, tab bar และ tool bar คือส่วนประกอบบังคับที่ต้องมีในแอปพลิเคชัน แถบต่างๆนี้ไม่จำเป็นต้องมีอยู่ในทุกๆแอปพลิเคชัน บางแอปจะไม่แสดงบางอัน แต่ถ้ามันถูกแสดง คุณควรจะต้องใช้ให้ถูกต้องนะคะ

Status bar (แถบแสดงสถานะ)

มีไว้เพื่อแสดงข้อมูลสำคัญเกี่ยวกับตัวเครื่องและสภาวะแวดล้อมปัจจุบัน

status bar

http://developer.apple.com/library/safari/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html

Appearance and Behavior

แถบแสดงสถานะจะปรากฏอยู่ตรงส่วนบนสุดของหน้าจอไม่ว่าเครื่องจะอยู่ในทิศทางใดก็ตาม และจะแสดงข้อมูลต่างๆเช่นการเชื่อมต่ออินเตอร์เนต เวลา และปริมาณคงเหลือของแบตเตอรี่

” สำหรับไอโฟน แถบแสดงสถานะจะเป็นสีอะไรก็ได้ แต่ไอแพดจะต้องเป็นสีดำเท่านั้น ”

Guidelines

1.การซ่อนstatus bar( แถบแสดงสถานะ ) คุณไม่ควรทำถ้าแอปพลิเคชันของคุณไม่ใช่เกมส์หรือต้องแสดงผลการดูแบบเต็มจอเพราะมันจะกระทบต่อการใช้งานของผู้ใช้ เช่นสมมุติว่าเค้าต้องการจะชาตแบตเตอรี่เครื่อง ก็จะต้องออกจากแอปของคุณก่อนซึ่งก็จะทำให้เค้าใช้งานยากขึ้น

*ในกรณีของไอแพด ยิ่งไม่จำเป็นเลยที่จะต้องซ่อนมัน เพราะ status bar ใช้พื้นที่หน้าจอน้อยมาก หน้าตาของมันก็ไม่ได้กระทบกับผู้ใช้มากด้วยเนื่องจากมันเป็นสีดำ ดูกลมกลืนเป็นส่วนเดียวกันไปกับตัวเครื่อง

2. การซ่อนstatus bar และUI ต่างๆ ขณะที่คนกำลังใช้โหมดเต็มจอ คุณต้องออกแบบให้ผู้ใช้สามารถเรียกสิ่งนั้นๆกลับมาด้วยการเคาะครั้งเดียว อย่างน้อยที่สุด ถ้าคุณมีเหตุผลที่ต้องซ่อนจริงๆ ควรหลีกเลี่ยงการให้ผู้ใช้หาทางนำ status bar กลับมาเองเพราะผู้ใช้จะไม่ชอบที่จะหาวิธีหรือจดจำมัน

3.เครื่องบ่งชี้เครือข่ายอินเตอร์เนต (network indicator) จะปรากฏอยู่ในแถบนี้ด้วย เพื่อแสดงให้ผู้ใช้รู้ถึงระดับสัญญาณของอินเตอร์เนตในช่วงนั้นๆ

4. สีของ status bar สำหรับไอโฟน ควรใช้สีเทา สีดำทึบ หรือสีดำโปร่งใส (ค่าอัลฟ่า 0.5) เวลาใช้ควรเลือกใช้สีของ status bar ที่เหมาะกับส่วนอื่นๆในแอป เช่น หลีกเลี่ยงการใช้ status bar โปร่งใส ในขณะที่ navigation bar เป็นสีทึบ

การเปลี่ยนสีของ status bar บนไอโฟนควรจะเป็นแบบเคลื่อนไหว แถบเก่าจะค่อยๆเคลื่อนที่ออกพอดีกับที่แถบใหม่เคลื่อนเข้ามาแทนที่

http://developer.apple.com/library/safari/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html

Navigation Bar

ชื่อก็บอกว่าเป็นแถบนำทางนะคะ มันก็คือสิ่งที่จะนำเราเข้าไปสู่ข้อมูลเป็นลำดับ เป็นขั้นๆไป อีกทั้งยังช่วยในการจัดการกับเนื้อหาบนหน้าจอด้วยค่ะ

http://developer.apple.com/library/safari/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html

Appearance and Behavior

Navigation Barจะปรากฏอยู่ตรงส่วนบนของหน้าจอ ต่อลงมาจากแถบแสดงสถานะ แถบนี้จะแสดงหัวข้อของหน้านั้นๆ ซึ่งจะอยู่ตำแหน่งตรงกลางของแถบ เมื่อเข้าไปในส่วนของข้อมูลที่ลึกเข้าไปเรื่อยๆ ผู้ใช้สามารถกลับสู่หน้าก่อนหน้าด้วยการกดที่ปุ่ม back

ทุกๆปุ่มใน navigation bar จะเป็นแบบมีขอบ ถ้าคุณวางปุ่มแบบไม่มีกรอบลงไป ระบบก็จะเปลี่ยนเป็นแบบมีกรอบให้อัตโนมัติ

ข้อจำกัดที่ต่างกันระหว่างไอโฟนกับไอแพดมีอยู่ 2 อย่างคือ

1.บนไอโฟน การเปลี่ยนทิศทางจากแนวตั้งเป็นแนวนอน ระบบจะเปลี่ยนความสูงของแถบนี้ให้อัตโนมัติ แต่สำหรับไอแพด ความสูงและความโปร่งใสของแถบนำทางจะไม่เปลี่ยนแปลงตามการหมุนเปลี่ยนทิศทางนะคะ

2.บนไอโฟน จะแสดงตามขวางด้านกว้างของจอ แต่บนไอแพดจะแสดงตามมุมมอง เช่น แสดงแค่ส่วนนึงของจอที่ถูกแบ่ง ไม่ได้ยืดตามด้านขวางตลอดแนวจอค่ะ

Guidelines

คุณสามารถใช้สิ่งนี้จัดการกับข้อมูลในแต่ละมุมมองได้ หรือเพิ่มปุ่มควบคุมเพื่อจัดการสิ่งต่างๆในมุมมองนั้นๆได้

1.หัวข้อของหน้าปัจจุบันจะเป็นหัวข้อของnavigation bar เมื่อผู้ใช้เข้าไปในส่วนหน้าใหม่ จะต้องมีสองอย่างเพิ่มเข้ามา คือ

1) แถบหัวข้อควรเปลี่ยนไปเป็นชื่อหัวข้อใหม่

2)ปุ่มback จะต้องปรากฏขึ้นมาที่ฝั่งซ้ายของหัวข้อ และมันควรจะแสดงไปกับหัวข้อของหน้าก่อนหน้า

2.ข้อความใน navigation bar ต้องอ่านง่าย ตัวอักษรของระบบจะเป็นแบบที่อ่านได้ชัดเจนอยู่แล้ว แต่คุณสามารถเปลี่ยนไปใช้ตัวอักษรอื่นที่เหมาะสมกับดีไซน์ได้นะคะ

3.ควรใช้ tool bar แทน navigation bar ถ้าคุณต้องการจะแสดงปุ่มควบคุมจำนวนมากขึ้น

4. การใช้ segment control ในnavigation bar มีประโยชน์มากในการช่วยจัดการกับข้อมูลที่มีการแบ่งลำดับชั้น ทำให้ง่ายต่อผู้ใช้ในการหา แต่การใช้segment control ในนี้ คุณต้องเลือกใช้ปุ่มback อย่างถูกต้องด้วยนะคะ

5.หลีกเลี่ยงการเพิ่มปุ่มต่างๆเข้าไปใน navigation bar นอกจากจะมีพื้นที่เพียงพอ โดยปกติ navigation bar ควรจะมีแค่หัวข้อของหน้าปัจจุบัน ปุ่ม back และอีกหนึ่งปุ่มเพื่อจัดการกับการดูข้อมูล หรืออีกกรณีคือถ้าใช้ segment control ก็ควรแสดงแค่ segment control อย่างเดียวเท่านั้น ไม่ควรแสดงหัวข้อหรือปุ่มอื่นๆอีกค่ะ

6.เลือกใช้ปุ่มที่ระบบมีไว้ให้ ตามความหมายของข้อมูลที่ต้องการจะสื่อ

7.การกำหนดสีหรือความโปร่งใสของ navigation bar คุณสามารถเปลี่ยนสีได้ตามความต้องการของคุณเพื่อให้มันดูเข้ากันกับส่วนอื่นๆของแอปพลิเคชัน หรือคุณจะทำให้เป็นแบบโปร่งใสก็ได้ถ้าต้องการจะเน้นตรงส่วนของเนื้อหามากกว่า แต่อย่างไรก็ตามถ้าคุณเปลี่ยนตามใจชอบ คุณต้องมั่นใจว่ามันเข้ากันกับส่วนอื่น ตัวอย่างเช่น ไม่ควรเอาแถบนำทางโปร่งใส ไปรวมกับแถบเครื่องมือสีทึบ และอีกอย่างก็คือไม่ควรเปลี่ยนสีหรือความโปร่งใสของ navigation bar ในแต่ละหน้าที่ดูในมุมมองเดียวกันให้ต่างกันค่ะ

8.ไม่ควรเปลี่ยนรูปแบบของปุ่มback เพราะผู้ใช้เคยชินกับการใช้ปุ่มbackแบบสแตนดาร์ด ในการย้อนกลับอยู่แล้วค่ะ

9.ไม่ควรสร้างหลายๆส่วนในปุ่มback

http://developer.apple.com/library/safari/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html

การสร้างหลายๆส่วนของปุ่มแบคหรือที่เรียกว่า multisegment back button จะสร้างปัญหามากมายเลยค่ะ

การยืดความกว้างของ multisegment back button ทำให้มันไปอยู่ติดกับส่วนของหัวข้อมากเกินไป
ยิ่งมีหลายๆส่วนมากเท่าไหร่ พื้นที่ของแต่ละส่วนก็จะยิ่งเล็กลงๆ ซึ่งทำให้ผู้ใช้ใช้งานยากในการเลือกอันใดอันหนึ่ง
ไม่มีทางที่จะสร้าง multisegment button เพื่อบ่งชี้ถึงส่วนที่เลือกของส่วนย่อยๆแต่ละอันได้

ถ้าคุณคิดว่าผู้ใช้จะพลาดถ้าไม่มี multisegment back button ซึ่งแสดงแบบเดียวกับ breadcrumb มันหมายความว่า ผู้ใช้อาจลงไปในข้อมูลลึกหรือซับซ้อนเกินไป สิ่งที่คุณต้องทำคือการจัดเรียงข้อมูลให้ง่ายขึ้น

บนไอโฟน ความสูงของ navigation bar จะเปลี่ยนโดยอัตโนมัติ คุณต้องระวังเรื่องขนาดของมันที่คุณสร้างขึ้นมาด้วยนะคะ ว่าจะเหมาะ และสวยพอดีเมื่อมันแคบลงตอนแสดงผลบนหน้าจอแบบแนวนอนหรือไม่

การที่ดึงเอาหลักการทำงานของ interface iPhone มาใช้ทำให้ผู้ใช้งาน App ไม่จำเป็นต้องเรียนรู้วิธีการใช้ใหม่ ทำให้ประหยัดเวลาและพลังงาน

ตัวอย่าง App ที่ออกแบบการใช้งานตามแบบ interface iPhone :

Facebook

ใน Facebook 3.0 คุณจะเห็นได้ว่า layout ถูกจัดไว้เป็นตาราง (grid) ซึ่งผู้ใช้สามารถเลื่อนซ้าย-ขวาเพื่อดู categories อ่ืนๆได้ การที่ Facebook App ใช้การเลื่อนหน้าซ้าย-ขวา ซึ่งเป็น UI (User Interface) ของ iPhone อยู่แล้วทำให้ผู้ใช้ไม่ต้องเรียนรู้วิธีการใช้ใหม่ มันก็เหมือนกับการออกแบบเว็บไซต์ที่ผู้ใช้เว็บไซต์มักจะคาดหวังว่าจะได้เห็นโลโก้อยู่ที่มุมซ้ายบน, และเมนูเว็บ (navigation) จะทอดยาวอยู่บ้านบน เป็นต้น

นอกจากนี้ Facebook ยังออกแบบให้ปุ่มมีขนาดใหญ่เพื่อให้เห็นรายละเอียดและสัมผัสได้ง่าย

facebook iPhone App Design Trends (ภาค1)

2. ออกแบบให้เรียบง่ายมากย่ิงขึ้น

การออกแบบ interface ให้ใช้งานง่าย ส่ิงที่สำคัญที่สุดคืออะไร? คำตอบง่ายนิดเดียว นั่นก็คือ ผู้ใช้ หรือ user นั่นเอง และส่ิงที่เราต้องรู้ก็คือ ‘อะไรคือส่ิงที่ผู้ใช้ต้องการ’ และ ‘เราจะนำเสนอส่ิงที่พวกเค้าต้องการได้อย่างไร ในเมื่อพวกเค้าไม่ได้แจ้งเราให้ทราบล่วงหน้าว่าเค้ามักจะบริโภคข้อมูลอะไรจาก App ของเรา’

ตัวอย่างในกรณีของ Flickr (Flickr เป็นเว็บไซต์ social network ที่รวบรวมรูปภาพจากทั่วทุกมุมโลก www.flickr.com)

Flickr เป็น app ที่ถือได้ว่าออกแบบได้อย่างลงตัวทั้งในด้านดีไซน์และฟังก์ชั่นการใช้งาน เราลองมาคิดดูกันว่าข้อมูลหลักของ Flickr คืออะไร? คำตอบคือ รูปภาพ ดังนั้นผู้ใช้คงไม่อยากจะเห็นเมนู (navigation) หรือ องค์ประกอบอ่ืนๆ ใหญ่ๆ แน่นอน เพราะส่ิงที่พวกเค้าอยากเห็นก็คือรูปภาพ Flickr ออกแบบให้ฟังก์ชั่นหลักๆที่ต้องใช้สามารถทำได้ภายในรูปภาพเอง โดยแทบจะไม่ต้องใช้ navigation มาเป็นตัวจัดการเลย เรียบง่ายและฉลาดมากๆค่ะ

flickr iPhone App Design Trends (ภาค1)

3. ดูดีแบบฮาร์ดแวร์

มี utilities หลายตัวที่เร่ิมฉีกรูปแบบเดิมๆของ iPhone เพื่อจะได้ใช้ข้อดีของการสัมผัสด้วยนิ้ว ให้เป็นประโยชน์ โดย interface ก็เป็นแบบที่ผู้ใช้คุ้นเคย แต่ยังคงให้ความรู้สึกใหม่ต่อผู้ใช้อยู่เสมอ พวกฟังก์ชั่นกดแล้วเด้งๆ ก็ยังให้ความรู้สึกใหม่กับผู้ใช้ตั้งแต่คลิกแรกจนถึงคลิกที่พัน แล้วก็สร้างหน้าตา interface ให้ออกมาดูเป็นฮาร์ดแวร์ เน้นความเงาวิ๊ง เพื่อให้เหมือนของจริง

Little Snapper

‘Little Snapper’ ล้อเลียนการเลือกโหมดถ่ายรูปแบบกล้อง DSLR

littleSnapper iPhone App Design Trends (ภาค1)

4. list รายการแบบดูดีมีชาติตระกูล

เมื่อผู้ใช้เจอ list รายการส่ิงที่พวกเค้าจะทำคือดูผ่านๆ ไม่เก็บรายละเอียด ส่ิงที่ดีไซน์เนอร์ต้องทำก็คือจะดึงดูดความสนใจของผู้ใช้ได้อย่างไร? คำตอบก็คือ พยายามทำให้สื่อออกมาเป็นภาพ

โดยพื้นฐานผู้ใช้จะหาว่าใน list มีอะไรบ้าง แล้วจึงเลือกว่าจะเข้าไปดูข้อมูลในส่วนไหนต่อ ซึ่งการที่จะทำให้ผู้ใช้สามารถหาส่ิงต่างๆได้สะดวก ก็คือปุ่มที่ใหญ่และสวยงาม เพราะการทีออกแบบปุ่มให้ใหญ่จะทำให้สามารถใส่ข้อมูล (information) ลงไปได้มาก ข้อมูลที่กล่าวถึงก็คือสีสัน, ไอคอน (icon), และ ตัวหนังสือ

Delivery Status Touch

การเลือกใช้สีที่ลงตัวบนปุ่มขนาดใหญ่ของ ‘Delivery Status’ เพื่อแสดงเอกลักษณ์ของแต่ละปุ่มอย่างชัดเจน แถมยังมีการจัด layout ของตัวหนังสืออย่างลงตัว เน้นในส่วนที่เป็นข้อความสำคัญๆ

ที่มา : thaifreelanceagency.com

1. นำเสนอข้อมูลให้กับผู้ใช้ได้อย่างชัดเจนและกระชับ
ผู้ใช้เว็บไซต์ส่วนใหญ่ไม่นิยมอ่านเนื้อหาเยอะๆ พวกเค้าจะแค่กวาดสายตา (scan) เพื่อหาเฉพาะส่ิงที่เค้าสนใจ หรือ กำลังค้นหาอยู่เท่านั้น ดังนั้นการใส่เนื้อหาที่ไม่ใช่สาระสำคัญลงไปจะทำให้ผู้ใช้สับสน และล้มเลิกความพยายามในการหาส่ิงต่างๆในเว็บคุณ

2. มีตัวเลือก และ ทางเลือกที่ชัดเจนให้กับผู้ใช้
หลังจากที่ผู้ใช้เว็บไซต์ scan เนื้อหา และพบส่ิงที่คิดว่า “น่าจะใช่” ส่ิงที่ตนกำลังค้นหาอยู่ พวกเค้าจะคลิกมัน พวกเค้าจะไม่เสียเวลาในการพิจารณาว่ามันใช่ส่ิงที่ถูกต้องหรือไม่ ถ้าหากมันไม่ใช่ พวกเค้าก็แค่คลิก ‘back’ แต่ก็จะมีข้อแม้อยู่ว่าผู้ใช้ก็มักจะมีควาอดทนต่ำ ถ้าพวกเค้าคลิกไปใน direction ที่ผิดๆ 2-3 ครั้งเค้าก็อาจจะล้มเลิกความตั้งใจในการค้นได้เช่นกัน ดังนั้นถ้าหากเรามีการจัดการกับเนื้อหาที่ดีผู้ใช้ก็จะไม่หลงทางไปกับการคลิกไปดูในส่ิงที่เค้าไม่ได้สนใจอยู่

3. กำจัดความกำกวมเกี่ยวกับ “ผลของการกระทำ”
นักออกแบบไม่ควรให้ผู้ใช้เว็บไซต์ต้องคิดหรือตีความปุ่ม interactive ต่างๆ ว่าถ้ากดไปแล้วจะเป็นอย่างไร เช่น จะมีอะไรเกิดขึ้น หลังการคลิกปุ่ม delete/remove/purchase

4. จัดวางส่ิงที่สำคัญที่สุดได้ถูกที่บนหน้าเว็บไซต์
นักออกแบบรู้อยู่แล้วว่าในเว็บไซต์ที่ออกแบบนั้น อะไรคือส่ิงสำคัญที่ต้องการจะเน้นให้เด่นชัด เพื่อให้ผู้ใช้เว็บไซต์เห็นได้อย่างสะดุดตา

ส่วนหลักการอื่นๆของ Website Usability จะมีอะไรบ้างคอยติดตามต่อไปนะคะ หรือจะ follow twitter ได้ที่ @sasiwimon ก็ได้นะคะ