วิธีสร้าง Guide Style: เริ่มต้นด้วย UI Framework

คำถามและคำตอบกับผู้ออกแบบ UX ของ AdRoll เกี่ยวกับสาเหตุที่เราทำและสิ่งที่เราเรียนรู้

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

Hi! ฉัน Arya Srinivasan นักวิจัย UX ของ AdRoll ฉันนั่งลงกับ Mason Lee นักออกแบบ UX ที่ทำงานเกี่ยวกับผลิตภัณฑ์ API โฆษณาเนทีฟของ AdRoll เพื่อพูดคุยเกี่ยวกับงานของเขาในการพัฒนาคู่มือสไตล์ของ AdRoll

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

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

ปุ่มมีลักษณะแตกต่างกันไปในแต่ละ mocks ของนักออกแบบและแอปพลิเคชันของเรา

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

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

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

อารียา: คุณพูดถึงว่าคุณต้องการให้ AdRoll เป็น บริษัท ที่เน้นการออกแบบ - คุณหมายถึงอะไร?

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

อารี: อะไรคือเป้าหมายในทันทีของคุณสำหรับไกด์นำเที่ยว? คุณมีวิสัยทัศน์ที่ยาวขึ้นสำหรับโครงการนี้หรือไม่?

Mason: เป้าหมายระยะสั้นของฉันคือการมีความสอดคล้องในการออกแบบระหว่างผู้ออกแบบโดยสร้างมาตรฐาน UI ของเรา ฉันต้องการให้นักออกแบบพูดภาษาเดียวกันเมื่อพูดถึงการออกแบบ ตัวอย่างเช่นใน modal หรือ dropdown วิศวกรจะสร้างตามวิธีที่ผู้ออกแบบแนะนำ หากองค์ประกอบการออกแบบแตกต่างกันระหว่างนักออกแบบวิศวกรจะทำให้องค์ประกอบเดียวกันมีความแตกต่างกัน

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

อารี: คุณประสบปัญหาใด ๆ ในขณะสร้างคู่มือนำเที่ยวหรือไม่? คุณแก้ปัญหาพวกเขาอย่างไร

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

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

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

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

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

วิธีที่เราใช้ Wake เพื่อหารือเกี่ยวกับความไม่สอดคล้องของ UI และทำงานร่วมกับกฎขององค์ประกอบ

อารียา: มีอะไรพิเศษเกี่ยวกับ UI ของ AdRoll ที่คุณต้องพิจารณาเมื่อสร้างคู่มือสไตล์?

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

อารี: มีบางสิ่งที่คุณอยากให้คุณรู้เมื่อคุณเริ่มสร้างไกด์สไตล์?

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

อารี: ดังนั้นวิธีที่ดีที่สุดในการบรรลุความเข้าใจร่วมกันของกระบวนการของนักออกแบบและผลิตภัณฑ์ของพวกเขาคืออะไร

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

อารียา: มีทรัพยากรใดบ้างที่คุณอ้างถึงในขณะที่ทำงานกับโครงการนี้หรือไม่?

Mason: ฉันอ่าน Atomic Design โดยแบรดฟรอสต์ค้นคว้าออนไลน์และคุยกับนักออกแบบ UX คนอื่นที่ MeetUps หากคุณคิดว่า บริษัท ใด บริษัท หนึ่งมีแนวทางการออกแบบที่ดีก็มีแนวโน้มว่าพวกเขาจะพูดคุยเกี่ยวกับแนวทางสไตล์ของพวกเขาทางออนไลน์

อารี: สถานะของไกด์สไตล์ของเราคืออะไร?

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

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

ขอบคุณที่อ่าน!

ระวังหัวข้อที่จะเกิดขึ้นเหล่านี้เมื่อเราพัฒนาแนวทางสไตล์ของเรา:

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