ความตายสู่โครงลวด ตรงสู่ความเที่ยงตรงสูง!

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

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

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

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

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

ปัญหาเกี่ยวกับ Wireframes

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

ลองดูขั้นตอนการออกแบบเพื่อดูตัวอย่างเมื่อการออกแบบโครงลวดอาจเป็นคอขวดได้:

เหตุผลที่ 1: ลูกค้าไม่เข้าใจสิ่งที่พวกเขากำลังมองหา

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

เมื่อแนวคิดมีความสมบูรณ์มากขึ้น ทีมออกแบบมักจะแบ่งปันชุดโครงร่างโครงร่างกับลูกค้าระหว่างช่วงการทบทวน

ปัญหาคือโครงลวดเป็นนามธรรมมาก

พวกเขาอธิบายบางสิ่งที่ คล้าย กับสิ่งของ แต่ไม่ใช่ของ จริง ที่จะสร้าง ในขั้นตอนนี้ โครงลวดจะมีรูปภาพตัวยึดตำแหน่งและ TK ทุกประเภท (ที่จะมาถึง) FPO (สำหรับการจัดวางเท่านั้น) และ TBD (ที่จะตัดสินใจ) เช่นตัวอย่างด้านล่าง

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

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

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

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

เหตุผลที่ 2: ไม่เหมาะสำหรับการทดสอบของผู้ใช้เสมอไป

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

วิธีหนึ่งทั่วไปในการทดสอบสิ่งเหล่านี้คือการสร้างต้นแบบ

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

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

บางครั้ง การทดสอบสิ่งเหล่านี้ร่วมกันแบบองค์รวมจะได้ผลมากกว่า

กรณีตรงประเด็น: ผลิตภัณฑ์หรือบริการหลายภาษา ภาษาอาจมีไวยากรณ์ ตัวอักษร และความกว้างของอักขระต่างกัน ซึ่งอาจส่งผลต่อการออกแบบโดยรวม

นอกจากนี้ เนื่องจากเนื้อหาที่คัดลอกส่งผลต่อ UX การแปลจึงอาจส่งผลต่อ UX

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

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

ประเด็นสำคัญ: ควรเตรียม UI ที่มีความเที่ยงตรงสูงตั้งแต่เริ่มต้น โดยเฉพาะอย่างยิ่งสำหรับโครงการหลายภาษา

เหตุผลที่ 3: พวกเขาสร้างนรกให้กับนักพัฒนาและ QA

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

นี่เป็นส่วนปกติของกระบวนการออกแบบภาพ เป็นเรื่องปกติที่การเปลี่ยนแปลงใด ๆ ที่เกิดขึ้นในการออกแบบภาพจะไม่สะท้อนให้เห็นในโครงลวดเนื่องจากโครงร่างเส้นลวดได้รับการ "ลงนามแล้ว"

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

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

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

วิธีแก้ปัญหา: ข้าม Wireframes

เห็นได้ชัดว่ามีบางครั้งที่จำเป็นต้องมีเฟสโครงร่างแบบเต็มและมีบางครั้งที่ไม่มีความจำเป็น มีบางครั้งที่การมุ่งตรงไปยังความเที่ยงตรงสูงสำคัญกว่าเฟสโครงร่างทั้งหมด

คุณอาจลองข้ามเฟสของโครงลวดถ้าสิ่งเหล่านี้เป็นจริง:

มีวัสดุอ้างอิงที่เป็นของแข็งอยู่ในสถานที่

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

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

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

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

คุณได้กำหนดเวลาการสร้างต้นแบบและการทดสอบซ้ำๆ มากมายไปพร้อมกัน

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

ข้อดีอีกอย่างคือ คุณสามารถฆ่านกสองตัวด้วยหินก้อนเดียว คุณสามารถรับคำติชมด้วยภาพและ UI ควบคู่ไปกับคำติชม UX ของคุณ และทำการเปลี่ยนแปลงทั้งหมดนี้ได้ในคราวเดียว

ผู้เข้าร่วมการทดสอบของคุณมีความจริงใจมาก

เช่นเดียวกับที่บางครั้งลูกค้าและเพื่อนร่วมงานของคุณอาจต้องการตัวอย่างที่เป็นรูปธรรม ผู้ชมเป้าหมายของโครงการก็เช่นกัน

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

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

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

ลูกค้าของคุณมีเวลาและ/หรืองบประมาณจำกัด

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

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

วิธีฆ่า Wireframe Phase

ส่วนนี้ค่อนข้างเป็นอัตนัย เนื่องจากจะขึ้นอยู่กับขั้นตอนการทำงานส่วนบุคคลของคุณและความต้องการเฉพาะของลูกค้าของคุณ

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

ขั้นตอนที่ 1: เริ่มต้นด้วยกระบวนการวิจัยและค้นพบตามปกติของคุณ

การสัมภาษณ์ การสังเกตการณ์ภาคสนาม การวิจัยบนโต๊ะ การวิเคราะห์การแข่งขัน—สิ่งที่คุณทำตามปกติ (หรือกำหนดเวลาที่ต้องทำ) ให้เสร็จสิ้นขั้นตอนนี้ตามปกติ

ขั้นตอนที่ 2: ร่างเล็กน้อยระหว่างทาง

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

ขั้นตอนที่ 3: เตรียมเอกสารที่มีความเที่ยงตรงสูง

เปิดเครื่องมือออกแบบที่คุณเลือกและตั้งค่าเอกสารของคุณอย่างเหมาะสม เลือกขนาดอาร์ตบอร์ดแล้วเริ่มสร้างรูปร่าง กลุ่ม และสัญลักษณ์ที่ทำซ้ำได้

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

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

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

ขั้นตอนที่ 4: เริ่มออกแบบ

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

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

ในทำนองเดียวกัน อย่าสร้างรายชื่อที่ทุกคนพูดว่า John Smith ด้วยหมายเลขโทรศัพท์ 555-1212 ใช้ตัวสร้างรายการสุ่มหรือปลั๊กอินเพื่อสร้างชื่อและหมายเลขต่างๆ หรือสร้างชุดข้อมูลที่คุณต้องการแสดง นี่อาจดูเหมือนใช้ยากเกินไป แต่ช่วยให้คุณแก้ปัญหาเกี่ยวกับเลย์เอาต์และความกว้างของอักขระได้ และช่วยให้ผู้ดูของคุณเข้าใจว่าห้ารายการนั้นแตกต่างกันทั้งหมด

ขั้นตอนที่ 5: รู้ว่าเมื่อใดควรหยุดการออกแบบ

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

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

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

ขั้นตอนที่ 6: เพลิดเพลินกับความคิดเห็นและผลการทดสอบคุณภาพสูง

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

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

ห่อ

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

อย่างไรก็ตาม ในกรณีที่ถูกต้อง การมุ่งตรงไปยังความเที่ยงตรงสูงสามารถปรับปรุงกระบวนการของคุณได้:

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

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

• • •

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

• eCommerce UX – ภาพรวมของแนวทางปฏิบัติที่ดีที่สุด (พร้อมอินโฟกราฟิก)
• ความสำคัญของการออกแบบที่เน้นมนุษย์เป็นศูนย์กลางในการออกแบบผลิตภัณฑ์
• ผลงานออกแบบ UX ที่ดีที่สุด – กรณีศึกษาและตัวอย่างที่สร้างแรงบันดาลใจ
• หลักการฮิวริสติกสำหรับอินเทอร์เฟซมือถือ
• การออกแบบที่คาดหวัง: วิธีสร้างประสบการณ์ผู้ใช้ที่มีมนต์ขลัง