ต้นแบบที่ซับซ้อน – ทำไมต้องใช้ Axure

“การออกแบบไม่ใช่แค่รูปลักษณ์และความรู้สึกเท่านั้น การออกแบบคือวิธีการทำงาน” - สตีฟจ็อบส์

ต้นแบบได้รับการพิสูจน์แล้วว่าทรงคุณค่าสำหรับการตัดสินใจออกแบบที่ดีขึ้น ในฐานะสิ่งประดิษฐ์ ต้นแบบเป็นหนึ่งในผลงานหลักในการออกแบบ UX และการสร้างต้นแบบ และในฐานะกิจกรรมที่เป็นหัวใจของกระบวนการออกแบบที่เน้นผู้ใช้เป็นศูนย์กลาง ต้นแบบคือการผสมผสานระหว่างงานออกแบบ UX ก่อนหน้านี้ทั้งหมดรวมกันเป็นผลิตภัณฑ์เดียวที่ใช้งานได้จริงซึ่งใช้ตรวจสอบสมมติฐานและการออกแบบทดสอบ

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

เพื่อทำให้เรื่องยุ่งยากขึ้น ผู้มาใหม่จำนวนมากเพิ่งบุกเข้ามาในที่เกิดเหตุ มีเครื่องมือออนไลน์เท่านั้น เช่น Figma, InVision, UXPin, Framer, Marvel, Principle, Origami และบางตัวเป็นซอฟต์แวร์เดสก์ท็อปแบบดั้งเดิม เช่น Sketch และ Adobe XD ที่มีการสร้างต้นแบบเป็นส่วนขยายของฟังก์ชันการทำงาน พวกเขาทั้งหมดมีข้อดีและข้อเสีย คุณลักษณะ และการผสานรวม

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

ทำไมต้องใช้ Axure?

ทุกวันนี้ นักออกแบบส่วนใหญ่ใช้เครื่องมือสร้างต้นแบบแบบ hotspot-based ซึ่งพวกเขาเชื่อมโยงหน้าจอ และอาจเพิ่มการเปลี่ยนหน้าจอบางส่วน ปัญหาคือ วิธีนี้ไม่ได้รวมการโต้ตอบเล็กๆ น้อยๆ ที่ทำให้ประสบการณ์ผู้ใช้โดยรวมสมบูรณ์ระหว่างการทดสอบ ในทางตรงกันข้าม Axure สามารถจัดการรายละเอียดปลีกย่อยและการโต้ตอบขนาดเล็กที่ทำให้ต้นแบบมีชีวิตได้อย่างง่ายดาย

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

การต้องข้ามไปรอบๆ แอปพลิเคชันการออกแบบที่ยังไม่ได้รวมจำนวนมากเกินไปทำให้เกิดปัญหาด้านความไร้ประสิทธิภาพเช่นกัน เวิร์กโฟลว์การออกแบบโดยทั่วไปเกี่ยวข้องกับนักออกแบบที่สร้าง UI ใน Sketch และการสร้างต้นแบบในเครื่องมืออื่น เช่น InVision หรือ Marvel หลังจากนั้น การออกแบบจะถูกส่งไปยังนักพัฒนาโดยใช้เครื่องมืออื่น เช่น Zeplin

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

อุปสรรคที่ใหญ่ที่สุดในการนำเสนอผลิตภัณฑ์และบริการที่ออกแบบมาอย่างดีคือการขาดความเข้าใจเกี่ยวกับผู้ใช้ของเรา Jared Spool, UIE (วิศวกรรมอินเทอร์เฟซผู้ใช้)

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

ตัวอย่างการสร้างต้นแบบ Axure ในชีวิตจริง

นักออกแบบมักไม่ตรงต่อเวลาและจำเป็นต้องแสดงให้เห็นว่าโฟลว์ของผู้ใช้ที่เฉพาะเจาะจงทำงานอย่างไรในการรีวิวและทดสอบการออกแบบผลิตภัณฑ์กับผู้ใช้ตั้งแต่เนิ่นๆ ความสามารถพื้นฐานของ Axure สามารถโดดเด่นในสถานการณ์เหล่านี้ได้ เนื่องจากนักออกแบบสามารถเปลี่ยนรูปภาพจากเครื่องมือการออกแบบอื่นๆ ให้กลายเป็นต้นแบบแบบโต้ตอบได้อย่างรวดเร็ว

ในตัวอย่างผลิตภัณฑ์ B2B ด้านล่าง ชุดหน้าจอถูกส่งออกจาก OmniGraffle เป็น PNG รูปภาพถูกครอบตัด มาสก์ และใส่เลเยอร์ใน Axure ถัดไป เพิ่มฮอตสปอตและส่วนประกอบแบบโต้ตอบจากไลบรารีวิดเจ็ต Axure เช่น เมนูดรอปดาวน์และฟิลด์แบบฟอร์ม เพื่อสร้างต้นแบบที่สมบูรณ์และใช้งานได้จริง จากนั้น คุณลักษณะและฟังก์ชันการทำงานของผลิตภัณฑ์ได้รับการทดสอบโดยใช้การทดสอบจากระยะไกลและควบคุมโดยผู้ใช้ ซึ่งนำไปสู่การออกแบบซ้ำอย่างรวดเร็วตามความคิดเห็นของผู้ใช้

ในอีกตัวอย่างหนึ่ง ทีมออกแบบและวิศวกรรมสามารถหาวิธีที่ดีที่สุดในการออกแบบวิดเจ็ตสองชิ้นที่ยุ่งยากโดยเฉพาะสำหรับผลิตภัณฑ์ B2B ที่ซับซ้อน จุดมุ่งหมายคือการออกแบบ ตัวกรองขั้นสูง และ ตัวเลือกคอลัมน์แบบกำหนดเอง สำหรับตารางที่มีข้อมูลจำนวนมาก ซึ่งจะช่วยเพิ่มความสามารถในการใช้งานและเป็นไปได้ในทางเทคนิคด้วย

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

คุณสมบัติและประโยชน์ของ Axure

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

ฉันใช้เวลาไม่ถึงสองวันในการสร้างต้นแบบที่มีรายละเอียดใน Axure ด้วยสถานะต่างๆ และการโต้ตอบขนาดเล็กจำนวนมากที่แสดงให้เห็นว่าผลิตภัณฑ์จะทำงานอย่างไรภายใต้สถานการณ์ต่างๆ ประโยชน์ที่คาดไม่ถึง มีหลายกรณีที่ทีมออกแบบสามารถจัดการได้

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

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

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

การสร้างต้นแบบอย่างรวดเร็ว การทดสอบ และการใช้งานคุณลักษณะผลิตภัณฑ์ใหม่นี้ทำได้เร็วกว่าการพัฒนาคุณลักษณะอื่นๆ ที่พวกเขาเคยทำมาก่อน และมีปัญหาน้อยลงเมื่อมาถึงระยะ QA

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

Axure ช่วยให้เราสามารถทดสอบทุกอย่าง แม้กระทั่งกรณีการใช้งานที่ซับซ้อนที่สุด ต้นแบบของเรามีลักษณะและทำตัวเหมือนของจริง Julie, User Experience Lab

คุณสมบัติและจุดแข็งของ Axure

นักออกแบบไม่จำเป็นต้องรู้วิธีเขียนโค้ดเพื่อสร้างต้นแบบที่ซับซ้อน ไดนามิก และเต็มไปด้วยฟีเจอร์ใน Axure สามารถตั้งค่าการโต้ตอบที่ซับซ้อนและสลับซับซ้อนได้โดยใช้แผง การโต้ตอบ ที่มีคำสั่ง "ถ้าเป็นเช่นนี้" อย่างตรงไปตรงมา ด้านล่างนี้คือรายการคุณสมบัติเพิ่มเติมของ Axure:

การสร้างต้นแบบขั้นพื้นฐานและขั้นสูง

• วิดเจ็ตในตัวสำหรับการสร้างโครงร่างและการสร้างต้นแบบอย่างรวดเร็ว
• สภาพแวดล้อมแบบลากและวาง
• การสร้างต้นแบบบนเบราว์เซอร์โดยไม่ต้องเข้ารหัส
• การสร้างปฏิสัมพันธ์จากเนื้อหา Sketch
• การจำลองมือถือและการดูอุปกรณ์มือถือ
• ช่องแบบฟอร์มการทำงานที่เปิดใช้งานการป้อนข้อมูลของผู้ใช้
• การเพิ่มตรรกะเงื่อนไข ตัวแปร และนิพจน์
• การทำงานกับเนื้อหาแบบไดนามิกและมุมมองที่ปรับเปลี่ยนได้
• การเพิ่มเอฟเฟกต์แอนิเมชั่น
• การดูต้นแบบออฟไลน์
• ไลบรารีวิดเจ็ตที่กำหนดเอง
• การรวม Adobe XD และปลั๊กอิน
• การแชร์ต้นแบบบน Axure Cloud ที่สามารถดูได้ในเบราว์เซอร์

การเขียนร่วมและการทำงานร่วมกัน

• Axure RP และ Axure Cloud ช่วยให้หลายคนสามารถทำงานในโครงการเดียวกันได้ในเวลาเดียวกัน

ทรัพย์สินที่ใช้ร่วมกัน

• สร้างและแชร์ไลบรารีของส่วนประกอบแบบโต้ตอบ และนำเข้าเนื้อหาจาก Sketch

นักพัฒนา Handoff

• เผยแพร่การออกแบบจาก RP และ Sketch ไปยัง Axure Cloud สำหรับ redlines อัตโนมัติ รวมถึง CSS และการส่งออกรูปภาพ

เอกสารและข้อกำหนด

• สร้างโฟลว์กระบวนการ การแยกส่วนผลิตภัณฑ์ และข้อกำหนดภาพ

กรณีศึกษาขนาดเล็กของ Axure Prototyping

เพื่อแสดงความสามารถของ Axure ที่นอกเหนือไปจากต้นแบบหน้าจอต่อหน้าจอที่เรียบง่าย ฉันได้สร้างหน้าจอสองสามหน้าจอที่มีการโต้ตอบที่ละเอียดอ่อนสำหรับ Zalando ซึ่งเป็นไซต์อีคอมเมิร์ซที่มีอยู่ เมื่อเสร็จแล้ว ลำดับต้นแบบเหล่านี้ทั้งหมดจะถูกส่งออกไปยัง HTML และทุกคนสามารถตรวจสอบได้ในเบราว์เซอร์ ทุกที่โดยใช้ Axure Cloud

อันดับแรก ฉันสร้างการโต้ตอบกับไซต์สองสามรายการเพื่อแสดงเมนูเด่น การค้นหา การเลื่อนดูผลิตภัณฑ์ในแนวนอน รายการโปรด และการสมัครรับจดหมายข่าว

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

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

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

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

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

สรุป

ในการค้นหาเครื่องมือสร้างโครงร่างและการสร้างต้นแบบล่าสุดและยิ่งใหญ่ที่สุด บางครั้งนักออกแบบมองข้ามเครื่องมือที่เป็นที่ยอมรับและมีความสามารถซึ่งผ่านการทดสอบมาอย่างยาวนาน

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

สามารถดาวน์โหลด Axure รุ่นทดลองใช้ฟรี นักออกแบบสามารถส่งออก UI จาก Sketch นำเข้า Axure และสร้างต้นแบบที่ดูสมจริง นอกจากนี้ยังมีบทช่วยสอนมากมายสำหรับโครงการทุกประเภท (บน YouTube และไซต์ของ Axure) และวิดเจ็ต Axure ที่พร้อมใช้งานก็มีให้ดาวน์โหลดอย่างกว้างขวาง (ทั้งแบบฟรีและมีค่าใช้จ่าย)

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• ทำให้กระบวนการออกแบบ UX ของคุณสมบูรณ์แบบ – คู่มือการออกแบบต้นแบบ
• 10 UX ที่นักออกแบบชั้นนำเลือกใช้
• ตำนาน UX – การสร้างต้นแบบ การทดสอบผู้ใช้ และสิ่งที่ส่งมอบ UX
• บทช่วยสอน Framer: วิธีสร้างต้นแบบเชิงโต้ตอบที่น่าทึ่ง
• ฝึกฝนฝีมือของคุณด้วยเครื่องมือ UX ยอดนิยมเหล่านี้