เริ่มพัฒนาการออกแบบของคุณ (ตามความหมายจริง)

เหตุใดจึงถึงเวลาที่นักออกแบบต้องเรียนรู้การเขียนโค้ด

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

ทักษะที่ดีที่สุดอย่างหนึ่งที่เราสามารถเพิ่มลงในชุดเครื่องมือเพื่อทำสิ่งนี้ได้ก็คือ การเขียนโค้ด

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

ในขณะเดียวกัน การตัดสินใจออกแบบไม่ควรจำกัดอยู่ในกฎเกณฑ์หรือคู่มือที่เข้มงวดที่กำหนดโดยผู้ที่ขาดความเข้าใจในเรื่องต่อไปนี้:

• ปฏิสัมพันธ์,
• เทคโนโลยี หรือ
• การเข้ารหัส

ในระหว่างกระบวนการนี้ การออกแบบ (ทางด้านขวา) และการใช้งานจริง (ทางด้านซ้าย) มักจะมีลักษณะดังนี้:

และคุณ (นักออกแบบ) เป็นเพียงผู้เดียวที่สามารถแก้ไขปัญหานี้ได้ ฉันขอเสนอโค้ดให้กับคุณ ซึ่งเป็นยาวิเศษที่ช่วยให้คุณสร้าง UI ออกมาได้ดังที่คุณฝันเอาไว้

ท้ายที่สุดแล้ว มีการกล่าวอย่างถูกต้องว่า การออกแบบไม่ใช่บุคคล แต่มันคือฟังก์ชั่น

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

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

• เข้าใจ พฤติกรรมของมนุษย์ -

• สามารถทำงานร่วมกันระหว่างทีมได้

• และมีส่วนสนับสนุนมากกว่าแค่การสร้างภาพ

  
  

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

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

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

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

แอนิเมชั่นสำหรับ แอป Veggie Grower บน iOS สำหรับชาวสวนชาวเยอรมัน เป็นไปได้เนื่องจากฉันได้เรียนรู้วิธีการเขียนโค้ด

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

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

การเขียนโค้ดช่วยให้มองเห็นมุมมองของนักพัฒนา

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

ฉันจะอธิบายเพิ่มเติมเกี่ยวกับแอป Veggie Grower กับ "ลูก" ของฉัน ข้อผิดพลาดที่ใหญ่ที่สุดของฉันคือการทำให้ UI มีความซับซ้อนมากเกินไปเพราะลูกค้ายืนกรานว่าต้องมี "ปัจจัยที่น่าตื่นตาตื่นใจ" เราต้องการสร้างความประทับใจแต่พลาดเป้าไป UI จริงของแอปใน App Store ออกมาไม่ดีนัก (ดูหน้าปกของเรื่องนี้ด้านบน)

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

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

เข้าใจถึงปัญหาของนักพัฒนาเทียบกับรู้ว่าเมื่อใดควรยืนหยัด

การเขียนโค้ดทำให้ฉันมีความเห็นอกเห็นใจต่อด้านการพัฒนาของกระบวนการ

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

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

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

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

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

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

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

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

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

การเขียนโค้ดช่วยให้เราเห็นถึงความมหัศจรรย์เบื้องหลัง 'Wow Factor'

"Avocado guy" ที่ด้านล่างแสดงการโหลดรายการเพิ่มเติม ซึ่งถือเป็นเรื่องยุ่งยากสำหรับนักพัฒนา ฉันจึงใช้ Lottie เพื่อแปลงเป็น JSON ซึ่งทำให้การบูรณาการราบรื่นและใช้เวลาเพียง 15 นาทีแทนที่จะเป็นหลายวัน

เมื่อเรามุ่งเน้นไปที่การทำให้สิ่งต่างๆ ใช้งานได้จริง เราก็ไม่สามารถลืม “ปัจจัยว้าว” ได้

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

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

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

การเขียนโค้ดช่วยให้เราเข้าใจถึงสิ่งที่เป็นไปได้

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

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

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

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

การออกแบบที่ดีที่สุดสร้างแรงบันดาลใจ ทั้งผู้ใช้และนักพัฒนา โดยไม่ผลักดันเกินกว่าสิ่งที่สามารถสร้างได้ในทางปฏิบัติ

ร่วมมือกันเพื่อการออกแบบที่สร้างผลกระทบ

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

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

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

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