บทช่วยสอนเวิร์กโฟลว์การออกแบบสำหรับนักพัฒนา: ส่งมอบ UI/UX ตรงเวลาที่ดีขึ้น

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

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

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

คำตอบของฉัน: ให้นักออกแบบของคุณมีส่วนร่วม ตั้งแต่วัน แรก และให้พวกเขามีส่วนร่วมตลอดกระบวนการพัฒนา UI/UX ทั้งหมด ตรวจสอบให้แน่ใจว่าได้สร้างบรรทัดการสื่อสารที่ชัดเจนและการส่งข้อความที่สอดคล้องกันระหว่างนักพัฒนาและนักออกแบบ

คุณมีทุกสิ่งที่คุณต้องการหรือไม่?

สิ่งที่เลวร้ายที่สุดที่อาจเกิดขึ้นได้ระหว่างการใช้งาน UI คือ __ขาดการสื่อสารระหว่างผู้ออกแบบและนักพัฒนา __(เว้นแต่พวกเขาจะเป็นคนเดียวกัน) นักออกแบบบางคนคิดว่างานของพวกเขาเสร็จสิ้นเมื่อส่ง PSD ไปแล้ว แต่นั่นมันผิด! คุณต้องสร้างเวิร์กโฟลว์การสื่อสารตลอดเวลาที่อยู่เหนือการส่งมอบ PSD

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

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

หากนักพัฒนามีทุกสิ่งที่ต้องการอยู่ข้างหน้า ผู้พัฒนาจะเร่งกระบวนการให้เร็วขึ้น PSD ที่สะอาดไม่เพียงพอ

คุณต้องการอะไรเพื่อให้งานสำเร็จลุล่วงอย่างมีประสิทธิภาพและประสิทธิผล?

นี่คือทรัพย์สินที่นักพัฒนาควรคาดหวังจากนักออกแบบเพื่อนำการออกแบบ UI/UX ไปใช้งาน:

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

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

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

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

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

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

อยู่ระหว่างดำเนินการ

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

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

การจัดการโครงการออกแบบ UI/UX

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

ไม่ว่าคุณจะใช้โซลูชันใด อย่าลืม เลือกกระบวนการเวิร์กโฟลว์เดียวที่ทั้งทีมจะนำไปใช้และใช้อย่างสม่ำเสมอ ในทีมของเรา ฉันพยายามผลักดัน Basecamp เพราะนั่นคือสิ่งที่ฉันกำลังใช้อยู่ แต่นักพัฒนาส่วนหน้าของเราคิดว่ามันมีฟีเจอร์ที่จำกัด พวกเขาใช้ซอฟต์แวร์การจัดการโครงการอื่นอยู่แล้วเพื่อติดตามจุดบกพร่อง ความคืบหน้า ฯลฯ เช่น JIRA, GitHub และแม้แต่ Evernote ฉันเข้าใจว่าการติดตามและการจัดการโครงการควรรักษาความเรียบง่ายที่สุด ดังนั้นฉันจึงย้ายเวิร์กโฟลว์การออกแบบ UI ไปยัง JIRA ฉันต้องการให้แน่ใจว่าพวกเขาเข้าใจขั้นตอนการทำงานและความคืบหน้าของฉัน แต่ฉันไม่ต้องการให้พวกเขารู้สึกว่าการออกแบบเป็นอีกสิ่งหนึ่งที่ต้องจัดการ

คำแนะนำบางประการสำหรับเครื่องมือการจัดการโครงการมีดังนี้

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

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

การออกแบบและพัฒนา UX มาด้วยกัน

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

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

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

วงข้อเสนอแนะ

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

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

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

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

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

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

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

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

นี่คือเครื่องมือที่ยอดเยี่ยมบางส่วน:

คำอธิบายประกอบความคิดเห็น:

• https://redpen.io/
• http://collabshot.com/
• http://www.designdrop.io/

เครื่องมือในการทำงานร่วมกัน:

• http://www.invisionapp.com/
• https://basecamp.com/

บทสรุป

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

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