รูปแบบ Navigation ของ mobile app

Navigation หรือการชี้นำทางบอกถึงจุดหมายต่างๆ ในด้านแอพลิเคชั่นบนมือถือนั้น เนวิเกชั่นถือเป็นส่วนสำคัญสำหรับผู้ใช้ (User) ในการใช้แอพลิเคชั่นย่างมีประสิทธิภาพ 

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

รูปแบบเนวิเกชั่นสามารถแบ่งออกได้เป็น Primary และ Secondary

 

Primary Navigation Patterns (รูปแบบเนวิเกชั่นหลัก)

ซึ่งเป็นรูปแบบพื้นฐานของเนวิเกชั่นที่เราจะพูดถึงมีทั้งหมด 7 รูปแบบ ด้วยกัน ที่นิยมใช้กันใน Mobile application 

 

Springboard

springboard-design

Springboard เป็นรูปแบบเนวิเกชั่นรูปแบบแรกๆที่ถูกใช้อย่างแพร่หลายในแอพลิเคชั่นบนมือถือ ความนิยมของ Springboard เกิดขึ้นจากความง่ายต่อการใช้ และการออกแบบที่เหมาะสมต่อมือถือในทุกๆรุ่น และ Operating Systems เราสามารถพบเจอเนวิเกชั่นแบบนี้ได้ในชีวิตประจำ เช่น บนหน้าจอมือถือ iOS หรือ Android ทั่วไป ที่นำมาใช้ในการนำเสนอแอพลิเคชั่นต่างๆที่ผู้ใช้มี หน้าตาของ Springboard อาจจะแตกต่างออกไปในแต่ละแอพลิเคชั่น ในบางกรณีผู้ใช้สามารถปรับเปลี่ยนหน้าตา รูปลักษณ์ของ Springboard ได้ตามต้องการ Springboard ถือเป็นรูปแบบเนวิเกชั่นที่คลาสสิก และถูกใช้น้อยลงมากในปัจจุบัน 

โดยทั่วไปนั้น Springboard จะถูกจัดวางไว้ที่ 3x3, 2x3, 2x2 หรือ 1x2 แต่บางครั้งการใส่ลูกเล่นเล็กๆเพื่อเน้นความสำคัญของเมนูต่างๆก็ถูกนำมาใช้ดัดแปลงในบางแอพลิเคชั่น เช่นการกำหนดความเล็กใหญ่ของเมนูต่างๆ หรือ การจัดวางที่มีจำนวนเมนูไม่เท่ากันต่อแถวในหนึ่งหน้า

2. List Menu

listview-app

List menu เป็นหนึ่งในรูปแบบเนวิเกชั้่นที่เป็นที่นิยมตลอดกาลของตลาดแอพลิเคชั่นมือถือ ด้วยความเรียบง่ายของรูปแบบการนำเสนอเมนูหัวข้อต่างๆ รวมทั้งการใส่ลักษณะเครื่องมือพิเศษ เช่นการค้นหาเมนู ก็สามารถทำได้โดยง่าน รูปแบบนี้จึงถูกใช้โดยทั่วไป ไม่ว่าจะเป็นหน้าเมนูหลัก หรือหน้าเมนูย่อย ตัวอย่างรูปแบบนี้คือหน้า Contact list หรือ Setting บนมือถือ พูดได้เลยว่าทุกแอพจะต้องมี List menu อย่างแน่นอน

3. Tabs

tab-menu

เนวิเกชั่นแบบแท็บนั่นจะแตกต่างจากเนวิเกชั่นที่กล่าวถึงข้างต้น เนื่องจากแต่ละ Operating Systems จะมีข้อกำหนดของการใช้แท็บที่ต่างกัน สำหรับ iOS, WebOS และ Blackberry แท็บควรจะถูกจะวางไว้ข้างล่าง ในขณะที่ Android, Symbian และ Windows มักจะนำแท็บมาวางไว้ด้านบน เพราะหลักการใช้ที่แตกต่างกัน การออกแบบเนวิเกชั่นรูปแบบจึงถูกออกแบบให้เหมาะสมกับการใช้งานปกติ ถ้านำแท็บไปวางไว้ด้านล่างเมื่อใช้ Android อาจจะเกิดความยุ่งยากสับสน เนื่องจากปุ่มย้อนกลับและ Home ก็อยู่ด้านล่าง ในหลายๆแอพิเคชั่นก็นำแท็บมาดัดแปลงโดยสามารถเลื่อนซ้ายขวาได้เพื่อให้ใส่เมนูได้มากขึ้น แทนที่จะต้องสร้าง more เมนูเพื่อหน้าสำหรับเมนูที่ไม่มีพื้นที่เพียงพอ หลักการสำคัญของการใช้แท็บคือการบ่งบอกถึงแท็บที่ผู้ใช้กำลังใช้งานอยู่ และการใช้ไอคอนที่เข้าใจได้โดยง่าย แท็บมักถูกใช้ในแอพลิเคชั่นที่มีเมนูหลักๆเพียงไม่กี่เมนู และในยุคปัจจุบันก็มีการนำมาใช้เพิ่มขึ้น เนื่องจากว่า Mobile app ในสมัยใหม่นั้นหน้าจอจะใหญ่ขึ้นเรื่อยๆ

4. Gallery/ Grid View

galleryview

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

5. Dashboard

dashboard

Dashboard เปรียบเสมือนกับการนำข้อมูลสำคัญทั้งหมดมาสรุปไว้ในหน้าเดียว เนวิเกชั่นเหล่านี้มักจะถูกใช้ในแอพลิเคชั่นจำพวก การวิเคราะห์, การเงิน และ การตลาด ข้อสำคัญของการใช้เนวิเกชั่นประเภทนี้ คือการใส่ข้อมูลที่สำคัญเท่านั้น ไม่มากเกินไป โดยจำหลักสำคัญที่ว่ามันเป็นเพียงสรุปสาระสำคัญเท่านั้น 

  

6. Metaphor

metaphor

เนวิเกชั่นรูปแบบนี้จะถูกออกแบบมาให้เข้ากับการใช้งานในแอพลิเคชั่นนั้นๆ รูปแบบของเนวิเกชั่นประเภทนี้จะนำเอารูปภาพ, สัญลักษณ์ หรือวิธีการใช้งานจริงในชีวิตประจำวันมาประยุกต์ให้เข้ากับการใช้บนมือถือ เนวิเกชั่นประเภทนี้มักจะนำมาถูกใช้กับแอพลิเคชั่นที่มีการจัดข้อมูลให้เป็นหมวดหมู่ เช่น  โน๊ตที่อาจจะถูกใช้เก็บไปในเนวิเกชั่นที่หน้าตาคล้ายแฟ้มเก็บเอกสาร, หนังสือวางบนชั้นวางหนังสือ หรือ ไวน์ 

7. Mega Menu

megamenu

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

 

Secondary Navigation Patterns (รูปแบบเนวิเกชั่นเสริม)

การ design app

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

1. Page Carousel

Carousel

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

2. Image Carousel  

imagecarousel

Image carousel แตกต่างจาก Page Carousel ตรงที่ Page Carousel มีหน้าตาแบบกรอบข่าวสาร ในขณะที่ Image carousel มีหน้าตาเหมือนการ์ดภาพ มักจะถูกใช้ในการนำเสนอสินค้า ตัวอย่าง Image Carousel ที่ชัดเจนคือ การแสดงสินค้าบนหน้า iTunes 

3. Expanding List

expandlist

Expanding เหมือนการจัดเก็บข้อมูลประเภทเดียวกัน หรือ ข้อมูลเกี่ยวกับหัวข้อหลักไว้ภายใต้  List หลัก เมื่อถูกกดก็จะโชว์ข้อมูลออกมา ตัวอย่างของเนวิกเกชั่นนี้คือ Call log ของ Android แต่เนวิกเกชั่นประเภทนี้ก็ยังไม่เป็นที่นิยมมากนักกับ native application และจะถูกใช้มากกว่าในเว็บแอพ

วันนี้เราก็มาเรียนรู้กันการออกแบบ application พื้นฐานที่ผู้พัฒนาทั่วไปใช้กันนะครับ เพราะเราจะได้เรียนรู้ trend  การออกแบบ เพื่อไม่ให้ application ของเรานั้นตกยุคครับ ครั้งหน้าเรามาดูกันการออกแบบยังไงไม่ให้คนเข้าใจผิด หรือการออกแบบต้องห้ามกัน