ทำไมสตาร์ทอัพต้องมี Styleguide

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

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

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

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

ห้าเหตุผลหลักว่าทำไม Styleguide จึงเป็นแนวคิดที่ดี

1. Styleguide ทำให้การออกแบบที่เป็นรูปธรรมและการสร้างแบรนด์ชัดเจน

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

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

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

2. Styleguide ทำให้การออกแบบของคุณมีความสอดคล้องกันมากขึ้น

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

1. "ฝนตก; ฉันต้องการร่มของฉัน”
2. “ฝนตก ฉันต้องการร่ม”
3. “ฝนตก ฉันต้องการร่มของฉัน”

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

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

3. การใช้ส่วนประกอบระบบเดิมซ้ำทำให้แอปของคุณใช้งานง่ายขึ้น

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

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

4. Styleguide ทำให้แอปของคุณพัฒนาได้เร็วยิ่งขึ้นในระยะยาว

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

5. สไตล์ไกด์ช่วยอำนวยความสะดวกในการผลิตและนวัตกรรม

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

ความท้าทายของสตาร์ทอัพ สไตล์ไกด์ใน Flux

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

เมื่อพูดถึงการสร้าง styleguide นี่อาจเป็นปัญหาได้

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

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

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

เริ่มต้นด้วยแรงบันดาลใจ UI บางอย่าง

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

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

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

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

ออกแบบส่วนประกอบ UI ที่เป็นของแข็ง

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

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

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

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

คู่มือสไตล์เป็นเอกสารที่มีชีวิต

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

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

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

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

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

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

บทสรุป

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

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

• • •

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

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