UI / UX - หน้า 4

เว็บไซต์แอพพลิเคชั่นซอฟต์แวร์ผลิตภัณฑ์ใด ๆ ที่มีเมนูจำเป็นต้องมีวิธีการแก้ไข ในขณะที่การนำทางของคุณอาจสนุกสร้างสรรค์หรือในบางครั้งการนอกรีตมันก็จำเป็นต้องใช้งานได้ก่อนเสมอ เมื่อพูดถึงการทดสอบการใช้งานสำหรับสถาปัตยกรรมข้อมูลคุณมักจะได้ยินเกี่ยวกับการทดสอบที่มีประสิทธิภาพมากที่สุดสองวิธี: การเรียงลำดับการ์ดและการทดสอบต้นไม้. การทดสอบทั้งสองนั้นง่ายและสะดวกในการทดสอบและการทดสอบทั้งสองแบบ ให้ข้อมูลที่สำคัญเพื่อเพิ่มประสิทธิภาพสูงสุดของไซต์ของคุณ. การเรียงลำดับบัตรมาก่อนที่คุณจะสร้างโครงสร้างของคุณเพื่อให้คุณสามารถเข้าใจว่าผู้ใช้ของคุณจัดระเบียบเว็บไซต์ของคุณอย่างไร การทดสอบต้นไม้มาหลังจากนั้นเป็นวิธีการตรวจสอบความสำเร็จของคุณหรือชี้ให้เห็นห้องสำหรับการปรับปรุง. เพิ่มเติมเกี่ยวกับ Hongkiat: การทดสอบการใช้งาน: สิ่งที่คุณต้องรู้? 7 ขั้นตอนในการติชมเว็บไซต์ที่ดีขึ้น ผลการทดสอบ A / B และกรณีศึกษาสำหรับการออกแบบประสบการณ์ผู้ใช้ การเรียงลำดับการ์ด ความงามของการเรียงลำดับการ์ดคือความเรียบง่าย สิ่งที่คุณทำคือ เขียนองค์ประกอบต่าง ๆ ของผลิตภัณฑ์ของคุณลงบนการ์ดบันทึกย่อหรือบันทึกโพสต์อิท, จากนั้นให้ผู้เข้าร่วมจัดระเบียบพวกเขาด้วยวิธีที่เหมาะสมกับพวกเขามากที่สุด. หากคุณจัดการได้มากเกินไปคุณสามารถใช้เครื่องมือทดสอบการใช้งานเช่น OptimalSort...

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

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

คุณไม่สามารถควบคุมและจัดการสิ่งที่คุณไม่สามารถวัดได้. โชคดีที่รายงานของ Google Analytics เป็นกลไกความรู้ที่สมบูรณ์แบบสำหรับคุณ การวัดการวางแผนและการจัดการแคมเปญเว็บ. เป็นเวลานานที่คุณสามารถทำการวิเคราะห์หมู่บน Google Analytics ผ่านทาง การแบ่งส่วน ซึ่งเป็นอะไรที่มากกว่าแฮ็คเว็บที่เผยแพร่. แต่ด้วยความพร้อมใช้งานของแท็บการวิเคราะห์กลุ่มโดยเฉพาะตอนนี้คุณสามารถทำการวิเคราะห์ข้อสรุปที่ให้คุณด้วย ข้อมูลพฤติกรรมที่จำเป็นซึ่งคุณสามารถใช้ประโยชน์ได้ เพื่อปรับเนื้อหาคำหลักและกลยุทธ์การตลาดผ่านเว็บของคุณ คุณสามารถ รวมรายงานกลุ่มคนทั้งหมดของคุณทั้งหมด และรวมไว้ใน PDF ที่เหมาะสมเพื่อนำเสนอข้อมูลในลักษณะที่ช่วยในการเพิ่มประสิทธิภาพของแคมเปญ. ในโพสต์ล่าสุดของฉัน - A Look in: Cohort Analysis ใน Google Analytics...

Google Images ใช้งาน UI ที่ไม่เหมือนใครด้วย แสดงตัวอย่างภาพขนาดย่อจากเว็บไซต์ต่างๆ. การคลิกภาพขนาดย่อใด ๆ เหล่านี้จะขยายหน้าจอด้วยรายละเอียดเพิ่มเติมและรูปภาพขนาดใหญ่ขึ้น. มันเป็นหนึ่งในคุณสมบัติแกลเลอรี่ภาพที่ดีที่สุดที่ฉันเคยใช้และตอนนี้, คุณสามารถโคลนด้วย Gridder.js. ปลั๊กอิน jQuery ฟรีดังต่อไปนี้ตามรอยเท้าของ UX ที่เหลือเชื่อของ Google โดยการสร้างปลั๊กอินที่ตรงกับเอฟเฟกต์นี้ คุณสามารถ เปลี่ยนแกลเลอรี่รูปภาพให้เป็นแกลเลอรีสไตล์ของ Google Images ด้วยภาพเคลื่อนไหวและคุณสมบัติการแสดงผลเดียวกันทั้งหมด. ฉันประหลาดใจด้วยความเร็วและความสะดวกในการใช้งานที่มาพร้อมกับปลั๊กอินนี้ เพียงคลิกรูปขนาดย่อ แสดงภาพขนาดใหญ่ทันที และอนิเมชั่นนั้นสะอาดมาก. ทั้งรูปภาพ รวมส่วนสำหรับข้อความอธิบาย...

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

เบอร์โทรศัพท์, นอกเหนือจากชื่อและอีเมลเป็นข้อมูลติดต่อที่ใช้บ่อยที่สุดในรูปแบบออนไลน์ โดยปกติแล้วฟิลด์หมายเลขโทรศัพท์จะออกแบบในลักษณะที่ต้องการให้ผู้ใช้พิมพ์ตัวเลขในการใช้แป้นพิมพ์ วิธีนี้ส่งผลให้เกิดการป้อนข้อมูลที่ไม่ถูกต้องบ่อยครั้ง. ไปยัง ลดข้อผิดพลาดการป้อนข้อมูลของผู้ใช้ และปรับปรุงประสบการณ์ผู้ใช้ในเว็บไซต์ของคุณคุณสามารถสร้าง GUI ที่ช่วยให้ผู้ใช้สามารถป้อนหมายเลขโทรศัพท์ได้อย่างรวดเร็วในลักษณะที่คล้ายคลึงกับเครื่องมือเลือกวันที่. ในบทช่วยสอนนี้คุณจะเห็นวิธีการ เพิ่มตัวเลือกหมายเลขโทรศัพท์แบบง่ายไปยังช่องใส่. เราจะใช้ HTML5, CSS3 และ JavaScript เพื่อไปยัง GUI ที่คุณสามารถดูและทดสอบในตัวอย่างด้านล่าง นอกจากนี้เราจะใช้การแสดงผลปกติเพื่อให้แน่ใจว่าผู้ใช้ป้อนหมายเลขโทรศัพท์ที่ถูกต้องจริงๆ. ดูปากกา°Å¸”ž ฟิลด์หมายเลขโทรศัพท์ที่มีหน้าจอหมุนหมายเลขโดย Preethi (@rpsthecoder) บน CodePen. 1. สร้างฟิลด์หมายเลขโทรศัพท์ เป็นครั้งแรก, สร้างฟิลด์อินพุต...

คุณเคยต้องการที่จะเพิ่มข้อมูลที่กำหนดเองไปยังองค์ประกอบ HTML ที่เฉพาะเจาะจงเพื่อที่จะสามารถเข้าถึงได้ในภายหลังด้วย JavaScript หรือไม่? ก่อนที่ HTML5 จะปรากฏในตลาดการจัดเก็บข้อมูลที่กำหนดเองที่เกี่ยวข้องกับ DOM นั้นเป็นเรื่องยุ่งยากและนักพัฒนาต้องใช้แฮ็กที่น่ารังเกียจทุกชนิดเช่นการแนะนำแอตทริบิวต์ที่ไม่ได้มาตรฐานหรือใช้วิธี setUserData ที่ล้าสมัยเพื่อแก้ไขปัญหา. โชคดีที่คุณไม่ต้องทำอะไรอีกเนื่องจาก HTML5 ได้เปิดตัวทั่วโลกใหม่ ข้อมูล-* แอตทริบิวต์ที่ทำให้สามารถฝังข้อมูลเพิ่มเติมในองค์ประกอบ HTML ใด ๆ ใหม่ ข้อมูล-* แอตทริบิวต์ ทำให้ HTML สามารถขยายได้มากขึ้น, ดังนั้น ช่วยให้คุณสร้างแอพที่ซับซ้อนมากขึ้น, และสร้างประสบการณ์ผู้ใช้ที่ซับซ้อนยิ่งขึ้นโดยไม่ต้องใช้เทคนิคที่ใช้ทรัพยากรมากเช่นการโทรอาแจ็กซ์หรือการสืบค้นฐานข้อมูลฝั่งเซิร์ฟเวอร์. การสนับสนุนเบราว์เซอร์ของคุณสมบัติใหม่ระดับโลกนั้นค่อนข้างดีเนื่องจากเบราว์เซอร์สมัยใหม่รองรับ...