เวอร์ชัน 3.0: คิดใหม่ว่าเครื่องมือสร้างหน้าเว็บควรทำงานอย่างไร

เขียนโดย

ใน

,

version-3-0-rethinking-how-a-page-builder-should-workเป็นเวลา 10 เดือนแล้วนับตั้งแต่ที่เราเปิดตัว Page Builder Sandwich สู่สาธารณะ ปัจจุบันเรามียอดการติดตั้งใช้งานอยู่ประมาณ 6,000 ครั้ง ซึ่งถือเป็นความสำเร็จอย่างยิ่งสำหรับเรา เราได้รับคำติชมมากมายจากสิ่งนี้เช่นกัน ทั้งข้อดีและข้อเสีย อย่างไรก็ตาม ความเห็นส่วนใหญ่เป็นเอกฉันท์ว่าผู้คนชื่นชอบความง่ายในการสร้างเลย์เอาต์และสร้างเนื้อหาเมื่อเทียบกับตัวสร้างหน้าเว็บอื่น ๆ ที่มีอยู่

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

อินเทอร์เฟซเดิมที่ยกเลิกไป

ในเวอร์ชันก่อนหน้าของ PBS เราต้องการให้ทุกอย่างอยู่ในรูปแบบของปุ่ม ทำไมล่ะ? เพราะปุ่มใช้งานง่าย คุณแค่… คลิกมัน บนตัวตรวจสอบ (inspector) เวอร์ชันเก่า (แถบด้านข้างในภาพด้านบน) การคลิกปุ่มจะเป็นการเพิ่มค่า จากนั้นกด shift+คลิกปุ่มจะเป็นการลดค่า ฟังดูง่ายเพียงพอ แต่ด้วยการเพิ่ม carousel, แถบแท็บ, แผนที่ และองค์ประกอบกับฟีเจอร์ใหม่ ๆ อื่น ๆ ปุ่มทั้งหมดเหล่านั้นจึงกลายเป็นไอคอนที่ผสมปนเปกันหลากหลายดีไซน์ และเริ่มดูเหมือนอักษรอียิปต์โบราณมากกว่าอินเทอร์เฟซเจ๋ง ๆ นี่ไม่ใช่ปัญหาสำหรับผู้ใช้ที่ช่ำชอง แต่ค่อนข้างดูน่าเกรงขามเลยทีเดียวหากคุณเพิ่งเริ่มใช้งาน PBS

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

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

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

การกำหนดว่าตัวสร้างหน้าเว็บควรทำงานอย่างไรในอุดมคติ

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

แนวคิดสำคัญข้อที่ 1: พิมพ์ลงในเนื้อหาของคุณโดยตรงเพื่อแก้ไขสิ่งต่าง ๆ

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

* มีปลั๊กอินที่ผู้อื่นสร้างขึ้นเพื่อแก้ไขปัญหานี้ เช่น Shortcake UI แต่นั่นไม่ใช่ประเด็น

นั่นคือที่มาของตัวสร้างหน้าเว็บส่วนหน้าบ้าน (front-end) พวกมันนำประสบการณ์การแก้ไขออกจากส่วนหลังบ้านมาสู่ส่วนหน้าบ้าน โดยที่คุณแก้ไขเว็บไซต์ของคุณในแบบที่ผู้เข้าชมจะมองเห็นจริง ๆ. ดังที่ Pippin ได้กล่าวไว้: สิ่งที่คุณเห็นคือสิ่งที่คุณได้ (WYSIWYG)

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

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

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

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

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

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

แนวคิดสำคัญข้อที่ 3: ข้อความควรจัดแต่งสไตล์ได้ง่าย

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

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

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

แนวคิดสำคัญข้อที่ 4: ตัวเลือกการจัดแต่งสไตล์ขั้นสูงควรมีความยืดหยุ่นแต่เข้าใจง่าย

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

แนวคิดสำคัญข้อที่ 5: การรองรับชอร์ตโค้ด

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

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

บทสรุป

เราได้นำคุณสมบัติสำคัญทั้งหมดข้างต้นมาผสานเข้ากับ Page Builder Sandwich เวอร์ชัน 3 มันเป็นตัวสร้างหน้าเว็บที่ดีที่สุดที่เราเคยสร้างมาสำหรับ WordPress มันใช้งานง่ายและเป็นธรรมชาติมากขึ้น ทำงานได้เร็วขึ้น ใช้งานง่ายขึ้น และเป็นมิตรต่อผู้ใช้มากกว่าที่เคย

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