ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับ UX Sketching

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

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

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

ในโพสต์นี้ ฉันตั้งใจที่จะครอบคลุมทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับการร่าง UX รวมถึงประเด็นต่อไปนี้:

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

UX Sketching เป็นกระบวนการสองขั้นตอน

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

• การสร้างไอเดีย

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

• การเพิ่มรายละเอียดและการปรับแต่ง

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

UX Sketches และ Wireframes: บทนำและการจัดประเภท

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

ฉันแยกแยะประเภทสเก็ตช์ต่อไปนี้:

• ร่าง: การสร้างไอเดีย

เหล่านี้เป็นภาพร่างเบื้องต้น รายละเอียดระดับล่างจะสังเกตได้ง่าย ใช้สีจำนวนจำกัด

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

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

• โครงลวด: ข้อมูลจำเพาะ, เฟสโดยละเอียด

ฉันมักจะเลือกภาพสเก็ตช์ที่น่าสนใจและดูรายละเอียด จากนั้นจึงเลือกรูปแบบที่ดีที่สุดและลงรายละเอียดให้มากขึ้น

อย่างไรก็ตาม นี่ไม่ ได้หมายความว่าทุกรายละเอียด สิ่งที่ชัดเจนสามารถสังเกตได้ นอกจากนี้ บางแง่มุมอาจอธิบายได้ยากบนกระดาษ

ในขั้นตอนนี้ ฉันวาด รายละเอียดที่สำคัญทั้งหมด แต่ฉันยังไม่ได้วาดโครงร่างใน Balsamiq หลังจากทำทุกอย่างบนกระดาษเสร็จแล้ว ฉันก็เริ่มวาดใน Sketch

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

• ร่างการออกแบบภาพ

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

• ส่วนประกอบ/ส่วนประกอบแยกย่อย

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

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

เริ่มต้นใช้งานพื้นฐาน

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

ตอนนี้คุณพร้อมแล้วและเริ่มต้นได้:

• วาดขอบ วาดเฟรม หน้าต่างเบราว์เซอร์หรือโทรศัพท์ ส่วนหนึ่งของอินเทอร์เฟซ และอื่นๆ

• เพิ่มองค์ประกอบที่ใหญ่ที่สุดหรือพื้นฐาน: เมนู ส่วนท้าย เนื้อหาหลัก

• เพิ่มรายละเอียด เพิ่มรายละเอียดที่เกี่ยวข้อง แต่ให้เรียบง่ายในขั้นตอนนี้

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

• ร่างทางเลือก ร่างทางเลือกด่วนสำหรับโซลูชันของคุณ

• เลือกทางออกที่ดีที่สุด เลือกตัวเลือกที่ดีที่สุด

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

• บันทึกภาพร่าง ถ่ายภาพหรือใส่ไว้ในโฟลเดอร์ ฉันมีถาดกระดาษสองสามถาดวางอยู่บนโต๊ะเพื่อสเก็ตช์ภาพ

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

ภาพร่างที่ชัดเจนด้วยองค์ประกอบเพิ่มเติม

ค้นหาหรือวาดภาพร่างที่เหมาะสม แล้วเพิ่มรายละเอียดต่อไปนี้ลงไป:

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

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

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

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

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

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

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

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

เคล็ดลับและลูกเล่นที่เฉพาะเจาะจงมากขึ้น

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

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

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

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

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

6. ถาดกระดาษ. คิดว่าการวางถาดกระดาษไว้บนโต๊ะทำงานของคุณ ตัวอย่างเช่น ฉันมีสามงาน: สำหรับงานที่เข้ามา สำหรับงานสเก็ตช์ และกระดาษเปล่า

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

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

วิธีเพิ่มเติมเล็กๆ น้อยๆ เพื่อปรับปรุงภาพสเก็ตช์ของคุณ

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

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

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

   

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

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

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

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

Wireflow: โครงร่างการไหลของระบบและการแยกสาขา

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

Wireflow หรือสิ่งที่คุณกำลังวาดและวิธีการเชื่อมต่อ สามารถจัดระเบียบได้ตามแนวทางต่อไปนี้:

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

ฉันมักจะพยายามกำหนดประเภท wireflow ต่อไปนี้ ขึ้นอยู่กับองค์กรและการใช้งานจริง:

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

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

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

4. สถานะหน้าจอ วาดหน้าจอหรือสถานะขององค์ประกอบ (ตัวอย่างอาจเป็นกล่องโต้ตอบการอัปโหลดไฟล์) ในกรณีนี้ ตัวอย่างเช่น หน้าจอจะมีสถานะดังต่อไปนี้:

   • ว่างเปล่า
   • ผู้ใช้ดึงไฟล์ในพื้นที่ใช้งาน
   • กำลังอัปโหลดไฟล์
   • ไฟล์ถูกอัพโหลด
   • มีข้อผิดพลาด

Sketching UX Flow: คู่มือวิธีใช้ฉบับย่อ

กระบวนการออกแบบ wireflow นั้นคล้ายกับ wireframe หนึ่ง หลายขั้นตอนคล้ายกันหรือเหมือนกัน แต่มีข้อแตกต่างที่สำคัญบางประการ:

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

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

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

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

• ขั้นตอนนี้จะนำผู้ใช้ไปทางไหน?
• คุณต้องการให้พวกเขาไปทางไหน?
• พวกเขาต้องทำอะไรเพื่อไปที่นั่น?

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

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

คิดเกี่ยวกับกระแสทางเลือก วิเคราะห์ประวัติ ออกแบบโฟลว์ทางเลือก และร่าง

เพิ่มคำอธิบายประกอบ บันทึกย่อ รายละเอียด เพิ่มองค์ประกอบคำอธิบายที่จะชี้แจงรายละเอียดที่ไม่ชัดเจน

บันทึก. ทำสำเนาดิจิทัลของภาพร่าง

แบ่งปัน. แบ่งปันภาพร่าง (เช่น ผ่าน Evernote หรือ InVision)

เคล็ดลับและเทคนิคในการร่าง UX Flow ที่จำเป็น

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

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

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

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

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

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

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

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

• เส้นที่วิ่งตามทิศทางแสง อาจดูไม่สวยงามเสมอไป แต่คุณสามารถใช้การสำเร็จการศึกษาและเลือกวัตถุที่มี "ความสูง" ต่างกันได้
• ร่างบางส่วนออกด้วยสีเข้มกว่า (เฉพาะด้านล่างหรือด้านล่างและด้านขวา)
• การใช้ Pro-marker (หรือเทียบเท่าในแอพที่คุณใช้สำหรับการวาดภาพ)

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

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

สรุป

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

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

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

• • •

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

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