Experience Design CC เล่นแล้วจึงบอกต่อ
by Hanii
ก่อนอื่นเลยบทความนี้เป็นบทความแรกของผม ผมอยากให้คนที่เข้ามาอ่านได้มีความรู้สึกเหมือนเวลามานั่งฟังผมบ่นถึงเรื่องบางเรื่อง ไม่อยากให้มีความรู้สึกเป็นทางการหรือภาษาเขียนมากเกินไป เพราะมันไม่ใช่สไตล์ผมเท่าไร หวังว่าจะชอบกันนะครับ :]
หลายคนอาจรู้จัก Adobe Experience Design CC (หรือชื่อย่อคือ XD ต่อจากนี้ขอเรียกชื่อโปรแกรมว่า XD) กันได้มาสักพักใหญ่แล้ว ซึ่งเมื่อปีก่อนๆ Adobe เผยว่ามี Project เกี่ยวกับ Program ที่ไว้สร้าง Prototype สำหรับ UX Designer หรือไว้สำหรับสร้าง User interface บน Moblie ซึ่งก่อนหน้านี้มันเคยชื่อว่า Project Comet ซึ่งมันคือตัวเดียวกันครับ แค่โดนเปลี่ยนชื่อ
เรื่องของเรื่องมันมีอยู่ว่า เมื่อไม่กี่เดือนก่อนหลังจากที่มีข่าวใหญ่ประกาศเกี่ยวกับ Plugin Sketch ที่มีชื่อว่า Sliver Flow ว่าถูก Invision ซึ่งเป็นเจ้าใหญ่แห่งวงการ Prototype ซื้อไปร่วมกันกับ Craft ซึ่งเป็น Plugin จากทาง Invision ทำให้ทาง Adobe นั้นไม่นิ่งนอนใจ รีบปล่อย XD ออกมาให้เล่นทันที เพราะคงกลัวกลุ่มผู้ใช้หนีไปลองใช้ตัวอื่น เพราะตัว Sliver Flow นั้นหลักการทำงานเหมือน XD คือการสร้าง Prototype บน Artboard ของตัวโปรแกรมเลย
ความรู้สึกครั้งแรกเมื่อเข้าโปรแกรม
ผมโคตรจะประทับใจกับ Interface ของโปรแกรมมาก ที่มันดูเป็นมิตรกับผมมาก และยังทันสมัย สบายตา เหมือนแผ่นกระดาษ เหมาะกับการวางชิ้นงานลงไป
เข้าโปรแกรมครั้งแรกผมโคตรจะประทับใจกับ Interface ของโปรแกรมมาก ที่มันดูเป็นมิตรกับผมมาก และยังทันสมัย สบายตา เหมือนแผ่นกระดาษ เหมาะกับการวางชิ้นงานลงไป และที่สำคัญ ไม่รู้ว่าจะมีใครบ้ามองลึกขนาดผมหรือเปล่าคือ มุมของ Interface ทั้งสี่ด้านเป็นมุมมน Rounded หลายคนคงสงสัยว่าแล้วมันเกี่ยวกับความประทับใจครั้งแรกยังไง มันสำคัญตรงไหน ผมจึงขอยกบทความของคุณ Pracha Suveeranont Rounded Corners: ประวัติศาสตร์ของมุมมน ที่พูดถึงมุมมน ความเป็นมิตรของมัน ที่เราถูกปลูกฝั่งมาตั้งแต่เด็กโดยที่เราไม่รู้ตัว
ในแง่จิตวิทยา เราเชื่อว่าควรจะรังเกียจมุมแหลม เพราะมันบอกว่า “Go away”, “Don’t touch me” หรือ “I’ll scratch you” ในขณะที่มุมมนบอกว่า “It’s okay to hold me” ซึ่งถูกสั่งสอนมาตั้งแต่เด็กแล้ว นักประสาทวิทยา (Neuroscientists) เรียกมันว่า การตอบสนองต่อการหลีกเลี่ยง (avoidance response) เราจะมีอคติกับสิ่งที่ ใช้สำหรับตัด (used for cutting) และอารมณ์บางอย่างที่ถูกฝึกมา เช่น การถูกคุกคาม, ความเจ็บปวด, ความกลัว ซึ่งเป็นการสื่อความหมายแบบตรรกวิทยา (semantic meaning) แม้ว่าสมองของเราอาจจะมีอายุกว่าพันปี แต่ก็ยังไม่โตพอจะฝืน ความรู้สึกในการตอบสนอง (primordial reaction) อันนี้
เครื่องมือในโปรแกรม
เครื่องมือในโปรแกรมนั้นมีน้อยมาก ถ้าเทียบกับโปรแกรมอื่นจากทางค่าย Adobe ซึ่งเครื่องมือที่ให้มานั้นก็เพียงพอสำหรับจุดประสงค์การทำงานที่ทางโปรแกรมต้องการจะสื่อสาร ไม่ได้ใส่เครื่องมือมามากมายให้เราปวดหัว ถือว่าเป็นการตัดสินใจที่ดีกับโปรแกรมที่เริ่มต้นใหม่ ซึ่งเครื่องมือที่ให้มาก็เป็นเครื่องมือพื้นฐานในการใช้ออกแบบทั่วไป เรียงจากซ้ายไปขวา
1. Select ไว้สำหรับเลือกวัตถุ หรือ เคลื่อนย้าย คลิกเพื่อกระทำสิ่งต่างๆ
2. Rectangle ไว้สร้างวัตถุ สี่เหลี่ยม
โดยปกติแล้วหลายโปรแกรมจะมีเครื่องมือสำหรับสร้างสี่เหลี่ยมขอบมน แต่ XDได้ทำการนำไปรวมกับเครื่องมือ Rectangleโดยการเลือกจุดแล้วลากเพื่อสร้างขอบมน ซึ่งในจุดนี้ออกแบบมาได้ดีมาก
3. Line สร้างเส้นโดยลากจากจุดหนึ่งไปอีกจุดหนึ่งสร้างได้เฉพาะเส้นตรงเท่านั้น
4. Pen สร้างเส้นโดยลากจากจุดหนึ่งไปอีกจุดหนึ่ง สามารถสร้างเส้นโค้งได้โดยการคลิกแล้วลากจะเกิดแขนของแรงตึง (handles) ทำให้เกิดเส้นโค้ง
5. Text สร้างข้อความคลิกเพื่อสร้างข้อความ หรือ คลิกแล้วลากเพื่อสร้างกล่องข้อความ Arena textbox โดยการสร้างแบบนี้จะแตกต่างจากการสร้างแบบธรรมดา
โดยข้อความที่เกินมาจากกรอบจะไม่แสดง
6. Artboard สร้างแผ่นกระดาษไว้ลงชิ้นงาน เมื่อเลือกเครื่องมือนี้ทางด้านขวามือจะโชว์ตัวเลือกของขนาด Device ที่ทางโปรแกรมตั้งค่ามาให้เรา เราสามารถเลือกขนาด Device ที่เราต้องการได้จากหน้าต่างนี้เลย
จะสังเกตได้ว่าขนาดของ Artboard ที่มีให้ เน้นจุดประสงค์ในการใช้ออกแบบเกี่ยวกับ User interface เป็นหลัก
Formatting Option of tool ในด้านขวามือ
ด้านขวามือคือ Option ของเครื่องมือที่เราเลือก โดยจะเปลี่ยนไปตามเครื่องมือที่เราเลือกใช้งาน XD มี Option พื้นฐานทั่วไปมาให้เราเลือกใช้ เช่น Pathfinder เครื่องมือที่ไว้นำวัตถุมาซ้อนมาตัดกัน, Align เครื่องมือจัดเรียงวัตถุหรือหน้ากระดาษไว้ตรงกลาง ชิดซ้าย ชิดขวา หรือ จะเป็น Rotation, Rounded, Border, Fill, Shadow ก็สามารถทำได้ แต่!! ข้อเสียที่ทาง XD พลาดเลยคือ ไม่สามารถใส่ Effect อื่นๆหรือเพิ่ม Layer ของ Effect ได้ เช่น การเพิ่ม Shadow หลายชั้น หรือ การใส่ Fill แบบเกลี่ยสี ซึ่งผมรู้สึกว่า XD พลาดมากในจุดนี้ เพราะทางโปรแกรมอื่นๆ นั้นมีให้ใช้งาน
รูปเปรียบเทียบระหว่าง Photoshop CC ด้านซ้าย และ XD ด้านขวา Photoshop สามารถเพิ่ม Shadow กี่ชั้นก็ได้ ในขนาดที่ XD ไม่สามารถทำได้
จุดผิดพลาดหลักที่ XD ไม่ได้นึกถึง
ก่อนที่เราจะไปดูในส่วนของ Taskbar ด้านบนที่มีฟังก์ชั่นหัวใจหลักของ XD คือ Prototype ผมมาสะดุดกับการทดลองใช้งานโปรแกรมตัวนี้ นั้นคือ XD ไม่มี Layer!!
ผมพยายามหาหน้าต่าง Layer จากโปรแกรมตัวนี้อยู่ป็นเวลานานก็ยังไม่เจอ
มันทำให้เกิดปัญหาเวลาทำงาน เมื่อวัตถุในงานของผมมันเยอะขึ้นเรื่อยๆทำให้เวลาผมอยากจะขยับวัตถุไปไว้ในชั้นล่างนั้นเกิดปัญหาทันที แต่ถ้ามองในมุมกลับกันที่ทาง XD อยากจะให้เป็นโปรแกรมสำหรับ UX designer ไว้ทำ Wireframe Prototype ไว้ทดสอบการทำงาน Layer ก็อาจจะไม่จำเป็นต้องมี แต่ความคิดเห็นส่วนตัวของผมมันก็ควรจะมีเพื่อสะดวกต่อการแก้ไขงานอยู่ดี
แต่สำหรับผู้ที่มีพื้นฐานการใช้งานโปรแกรม Photoshop หรือโปรแกรมจากค่าย Adobe มาก่อน ท่านสามารถแก้ปัญหานี้ชั่วคร่าวโดยการใช้คำสั่งคีย์ลัดในการขยับชั้นของ Layer โดยการกด Cmd+ [ เพื่อขยับลง หรือ Cmd+] เพื่อขยับขึ้น
Prototype หัวใจหลักของ XD
จากที่ผมได้ลองเล่นมาทั้งหมดสิ่งที่ผมประทับใจมากที่สุดก็คงจะหนีไม่พ้น Prototype ที่สามารถเลือกเปลี่ยนโหมด Design หรือ Prototype ได้จากแถบซ้ายบน โดยจะแบ่งฝั่งชัดเจน เมื่อเราเลือกเข้าโหมดนี้วัตถุที่เราเลือกจะมีลูกศรขึ้นมาด้านขวาเล็กๆ เราสามารถคลิกเพื่อลากไปยังหน้าที่เราต้องการจะให้ทำการ Action ไปยังหน้านั้นได้ โดยจะมี Option การ Transition ให้เราสามารถปรับได้ว่าจะให้ Transition อย่างไร เวลาเท่าไร action แบบไหน ซึ่งเรายังสามารถกด ปุ่ม Play เพื่อทำการ Preview Action นั้นดูได้ และ ยังสามารถ Record เป็นไฟล์ .mov หรือ Share Link เป็น Prototype online ส่งให้คนอื่นได้ด้วย โดยการกดปุ่ม Share ด้านขวาบน ชมมาเยอะต่อมาคือ ข้อเสีย!!
ข้อเสีย!! อุตส่าห์ทำระบบ Preview Prototype ไว้ แต่ไม่สามารถเชื่อมต่อเพื่อ Preview บน Device จริงได้ link Online ที่ทำมารองรับก็ยังไม่สามารถรับรองการทดสอบบน Device จริงสักเท่าไร ซึ่งจุดนี้ผมคิดว่าเป็นเรื่องที่สำคัญมากสำหรับการทำงานจริง เพราะการทดสอบ UI/UX มันต้องเกิดมาจากการ Preview บน Device จริง ทดลองเล่นจริง การที่เราได้มองภาพรวมบน Device จริงจะทำให้งานมันสมบูรณ์กว่ามาก ซึ่งทาง XD ให้ฟั่งชั่น Prototype นี้เป็นหัวใจหลักของโปรแกรม ผมคิดว่าการทำงานของฟั่งชั่นนี้ควรสมบูรณ์กว่านี้
สรุปทิ้งท้ายกับการเล่น XD
ข้อดี อย่างแรกที่ผมได้ลองเล่น XD ถูกออกแบบเรียนรู้ได้ง่ายสามารถเรียนรู้ได้จาก Tutorial File ที่ติดมากับโปรแกรม “Get start with a simple flie” จะมีให้เราเลือกตอนหน้า Infomation ก่อนเข้าหน้าหลัก เราก็เหมือนได้รู้จักการทำงานของทั้งโปรแกรมแล้ว อย่างที่สองคือ Prototype ที่สามารถทำได้อย่างรวดเร็ว แก้ไขง่ายเข้า Preview งานได้รวดเร็ว และส่งต่อคนอื่นได้
ข้อเสีย คือเหมือนจะเผาไปหน่อย(รีบปล่อย) ทำให้การทำงานของบางฟังก์ชันยังดูไม่สมประกอบ เช่น Effect ของการสร้างวัตถุ หน้าต่าง Layer ที่ไม่มีให้ หรืออาจจะตั้งใจให้ไม่มีฟังก์ชันที่กล่าวไว้ข้างต้นเพื่อต้องการให้กลุ่มเป้าหมายแรกเข้าใจง่ายที่สุดก่อนการใช้งานในครั้งต่อไป อันนี้ก็ไม่แน่ใจ :]
แม้ว่าตอนนี้จะมี Community และ Resource ของ XD มาบ้างแล้ว แต่ก็ยังไม่ค่อยบูมเท่าไรสำหรับการเปิดตัว XD ครั้งนี้ยังคงต้องรออัพเดทกันต่อไปว่าจะมีอะไรเพิ่มเติมอีกหรือเปล่า
ใครที่อยากได้ Resource ไปศึกษา สามารถเข้าไปหาได้จากเว็บ designmine.io ต้องขอขอบคุณพี่ Sansern Wuttirat ที่แนะนำแหล่ง Community เพื่อศึกษาข้อมูล
สำหรับใครที่อยากทดลองใช้แต่มีเครื่องที่ทำงานด้วยระบบปฏิบัติการ Windows ต้องแสดงความเสียใจด้วยครับ ทาง Adobe ปล่อยมารับรองแค่ Mac OSX เท่านั้น ซึ่งเรื่องนี้ก็เป็นเรื่องที่ทำให้ใครหลายๆคนผิดหวังเช่นกัน สุดท้ายนี้หวังว่าคงจะชอบบทความเกี่ยวกับ XD Experience Design CC ในสไตล์การพรีวิวบนการใช้งานจริงของผมนะครับ ขอบคุณครับ!
