แนวคิดแบบฟอร์มล็อกอิน / ลงทะเบียนและตัวอย่างที่สวยงาม

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

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

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

พิจารณาหลายอินพุต

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

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

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

กล่องเข้าสู่ระบบ jQuery

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

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

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

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

การลงทะเบียนแบบหน้าเดียวอย่างง่าย

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

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

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

แน่นอนการแลกเปลี่ยนที่นี่ขาดการควบคุมในตอนท้ายของผู้ใช้ในการสร้างรหัสผ่านของตัวเองซึ่งหลาย ๆ คนคุ้นเคยกับ.

สร้างผลกระทบที่ฉูดฉาด

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

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

มีข้อบกพร่องบางอย่างกับระบบนี้ ที่สะดุดตาที่สุดภายใน IE6 / IE7 ไม่สนับสนุนคุณสมบัติ CSS ใหม่เหล่านี้ นอกจากนี้ยังใช้ในหน้าแรกเป็นระบบสำหรับการเพิ่มองค์ประกอบฉลากเป็นค่าป้อนข้อมูลในรูปแบบ - โดยทั่วไปแทนที่ “ค่าเริ่มต้น” อักขระที่ใช้สำหรับกล่องอีเมล / รหัสผ่าน.

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

ตัวอย่างของการออกแบบรูปแบบที่สวยงาม

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

ข่าวการเปลี่ยนแปลง