ขอแนะนำ Instapage 3.0: ฉลาดขึ้น เร็วขึ้น โดดเด่นขึ้น และดีขึ้นกว่าเดิม

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

Przemek Cholewa หัวหน้าระบบออกแบบของ Instapage กล่าวถึงความคิดของทีมในระหว่างกระบวนการอัปเดตอินเทอร์เฟซผู้ใช้นี้:

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

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

(หมายเหตุ: นี่ไม่ใช่วิวัฒนาการขั้นสุดท้ายของ UI และคุณสามารถคาดหวังการอัปเดตมากมายในอีกไม่กี่สัปดาห์ข้างหน้า)

การลดเสียงรบกวน UI ของ Instapage

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

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

Crystal มุ่งเป้าไปที่การปรับ Material Design ให้เข้ากับความต้องการของ Instapage โดยไม่ต้องเปลี่ยนภาษาการออกแบบมากเกินไป ตอบโจทย์ความท้าทายหลัก — มีองค์ประกอบการออกแบบทั้งหมดที่เราต้องการพร้อมใช้ จัดทำเป็นเอกสาร และมีข้อมูลโค้ดเชิงมุม เราเริ่มทำงานเมื่อกลางปี ​​2019 และเสร็จสิ้นเมื่อปลายปีที่แล้ว เพียงเพื่อเริ่มทำงานในขั้นตอนสุดท้าย – ภาษาภาพของเราเองที่เรียกว่า “ Crystal Clear ”

Crystal Clear เป็นขั้นตอนสุดท้ายของการเปลี่ยนแปลง มันคือ UI ของเราเอง และภาษาภาพของเราเอง ซึ่งปรับให้เหมาะกับความต้องการของ Instapage ซึ่งสร้างขึ้นอย่างพิถีพิถันด้วยรายละเอียดที่เราต้องการ

หัวหน้าเจ้าหน้าที่ออกแบบ Uldis Leiterts อธิบายว่า:

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

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

มีอะไรใหม่ใน UI ของ Instapage

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

สำเนา UX

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

ตัวอย่างเช่น ข้อความว่างเปล่าหนึ่งข้อความระบุว่า "แดชบอร์ดของคุณเหงา" — ในตัวมันเองไม่มีอะไรผิดปกติ แต่อาจไม่ใช่ภาษาที่ดีที่สุดสำหรับซอฟต์แวร์ทางธุรกิจอย่างจริงจังที่เราเห็นเอง ด้วย Crystal Clear ผู้เขียน UX/เนื้อหาของ UX/Content ของ Instapage ทำให้ Mateusz Sochoń สร้างความสอดคล้องมากขึ้นกับน้ำเสียงและข้อความ ตามที่ Mateusz กล่าวไว้:

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

รูปแบบและสีใหม่

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

ที่กล่าวว่าการออกแบบที่ดีนั้นมองไม่เห็น และทีมงานก็ได้รับแรงบันดาลใจจาก Dieter Rams ผู้สร้างกฎเกณฑ์สำหรับการออกแบบที่ดี จากหลักการของ Rams ทีมงานได้อัปเดตอินเทอร์เฟซให้เป็นอมตะมากขึ้น

ก่อนหน้านี้: Crystal

Current: คริสตัล เคลียร์

ลำดับชั้นระดับใหม่ & การลบเงา

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

มีสี่ระดับหลักในใบสมัครของเรา:

• ระดับ 0: ทำหน้าที่เป็นฉากหลังสำหรับเนื้อหาที่เหลือทั้งหมด
• ระดับ 1: ระดับที่แสดงส่วนประกอบส่วนใหญ่
• ระดับ 2: เปิดใช้งานองค์ประกอบจากระดับที่ต่ำกว่าเพื่อเลื่อนด้านล่าง
• ระดับ 3: องค์ประกอบโอเวอร์เลย์แสดงเหนือระดับล่างทั้งหมด

(หมายเหตุ: ระดับกลาง 1.5 คือระดับที่มีส่วนประกอบทั้งหมดที่แสดงเหนือส่วนของระดับ 1, 2 หรือ 3 แต่ยังคงซ่อนอยู่ภายใต้ระดับที่สูงกว่า ส่วนประกอบดังกล่าวรวมถึงคำแนะนำเครื่องมือ ป๊อปโอเวอร์ รายการแบบเลื่อนลง การอัปเดตใหม่ ลบเงาออกจากสถานะตรงกลาง สว่างขึ้น และมองเห็นได้สม่ำเสมอโดยไม่คำนึงถึงระดับที่วาง)

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

ยึดถือเค้าร่างที่สม่ำเสมอ

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

ตารางระยะห่างที่แตกต่างกัน

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

การลบมุมโค้งมน

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

UI ตัวสร้าง

คุณสามารถดูวิธีการนำการอัปเดต Crystal Clear ใหม่ไปใช้ในตัวสร้างได้ สังเกตแถบสีเทา ยกเว้นรูปภาพ ปุ่ม CTA และโลโก้:

สิ่งที่เราได้เรียนรู้

Headukasz Grądzki หัวหน้าฝ่ายพัฒนา UI เน้นว่าทีมและเทคโนโลยีมีการปรับปรุงอย่างไร นอกจากนี้ การลงทุนที่เราทำในปี 2559 ได้รับผลตอบแทนอย่างไรในตอนนี้:

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

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

ตรวจสอบ UI ใหม่สำหรับตัวคุณเอง

ระบบการออกแบบ Crystal Clear ใหม่ทำให้คุณมีความชัดเจนในสิ่งที่สำคัญที่สุด — แก่นแท้ของสาเหตุที่คุณใช้แอปพลิเคชัน Instapage เราต้องการให้คุณมีสมาธิกับงาน ในการใช้งาน Instapage ประจำวันของคุณ

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