UXUI 1 - วิเคราะห์ UX/UI
Website: https://www.codecademy.com/
UX
Interactive design
- วางเมาส์ที่ course catalog ต่างๆ แล้วมี hover ทำให้เด้งขึ้นมาให้รู้ว่ากำลังจะเลือกอันนี้, ที่ what’s your goal? วางเมาส์แล้วจะขยายตัวอักษรให้เด่นขึ้นอีก
- ช่อง search (เด้งออกมาเมื่อกดรูปแว่นขยาย) ไม่มี auto complete แต่ใช้ระบบโชว์ popular searches ไว้ด้านล่างแทน
- มีช่องเล็กๆให้ลองกด run code ได้ ได้ทดลองระบบของเว็บไซต์เล็กน้อย
- ช่อง Navbar แสดงเมนูต่างๆ มี Affix navbar ทำให้ช่องติดอยู่ข้างบนเวลาเลื่อนขึ้นๆ ลงๆได้
Information architecture
- เรียงโลโก้ไว้มุมบนซ้าย และมีแถบแสดงเมนู และข้อมูลต่างๆเลื่อนลงมาเป็น dropdown menu ทุกแถบแบ่งหมวดหมู่ไว้ชัดเจน เข้าใจง่าย เพราะมีลูกศรลงเป็นตัวบอกว่ามีข้อมูลให้ดูเพิ่ม และเป็นระเบียบ
- เมนู dropdown แสดงหัวข้อที่ชัดเจน และมีคำอธิบายเพิ่มในบางตัวที่อาจจะไม่เข้าใจถ้าเห็นแค่ชื่อหัวข้อ
- ถ้าเข้าเว็บไซต์มาแล้วไม่รู้จะเริ่มตรงไหน ทางเว็บไซต์จะแอบใส่คำว่า “Not sure to begin? Take our quiz.” เผื่อสำหรับคนที่ไม่รู้จะเริ่มที่ตรงไหน
- เหนือช่องกรอก password มีไอคอนเพื่อให้แสดงข้อมูลว่า password ต้องการ format แบบไหน
Scenarios
- สนใจเรื่องการเรียนเขียนโปรแกรมสำหรับมือใหม่ แล้วเข้ามาดู – ค้นหาแล้วเจอเว็บไซต์ได้ง่ายด้วยเพราะใช้ คีย์เวิร์ด code และ academy เมื่อเข้ามาแล้วเจอระบบแนะนำสำหรับมือใหม่ หรือไม่รู้จะเริ่มจากตรงไหนก็สามารถเริ่มต้นได้ง่าย
- สนใจศึกษาบางหัวข้อเพิ่มเติม เข้ามาค้นหาได้ง่าย โดยมีเมนูเลือกหัวข้ออยู่บนสุด และระหว่างตัวเว็บก็มีให้เลือกอยู่ตลอด
- Course catalog จัดเรียงไว้แบบเข้าใจง่าย มีคำอธิบายเพิ่มเติมเล็กน้อยให้เข้าใจมากขึ้น มีการจัดคอร์สเป็นแพคเกจ ทำให้น่าสนใจ และมองเห็นภาพมากขึ้นว่าปลายทางจะได้อะไร ไม่ใช่แค่บอกว่าเรียนภาษาเขียนโปรแกรมอะไร
UI
Color
- Background body ใช้สีเบจเป็นสีอ่อน ตัวหนังสือสีดำ เพื่อให้ content ที่ต้องการจะสื่อมองเห็นได้ง่ายขึ้น สีเบจเป็นสีอ่อน แต่ไม่สว่างจนแสบตาทำให้มองแล้วสบายตามากขึ้นกว่าสีขาว
- โซนที่เป็นพื้นที่เข้มจะใช้เป็นสีกรมเข้ม และตัวหนังสือสีขาว และเหลือง ดูตัดกันทำให้อ่านง่าย สบายตา
- ปุ่มสมัครสมาชิก ทำให้เป็นสีเข้ม และสว่างตัดกับสีพื้นหลัง และตัวหนังสือ (ซึ่งเป็นสีดำ หรือขาว) ทำให้เด่นที่สุด เชื้อเชิญให้กดสมัคร
Graphic design
- เว็บไซต์ดีไซน์ออกมาเป็นธีม มินิมอล ไม่มีลวดลายตกแต่งมากใช้โทนสีเบจ โล่งๆดูสบายตา ส่วนที่ตกแต่งหน้าเว็บมีแค่ เส้นตรง กับจุด
- ส่วนที่เป็น banner หรือกรอบรูปมีการใช้เงาพื้นหลัง เพื่อเน้นให้ดูน่าสนใจมากขึ้น
Layout
- แบ่ง layout ตามแนวนอน เป็นแต่ละ section โดยใช้สีเป็นตัวแบ่ง
- ขนาดของแต่ละ section แบ่งให้มีขนาดพอดีๆกับหน้าจอ และส่วนที่ต้องการเน้นก็จะมีขนาด section มากกว่าส่วนอื่นๆ
Font
- Font มี 3 ขนาดหลักๆ แบ่งเป็น หัวข้อเรื่อง เนื้อหาทั่วไป และเนื้อเพิ่มเติม ซึ่งแบ่งให้มีขนาดใหญ่ เรียงมาเล็กตามลำดับ หัวข้อเรื่องทำเป็นตัวหนาเพื่อเน้น ส่วนเนื้อหาเพิ่มเติมทำให้เป็นสีเทาเพื่อให้ไม่เด่นมากเกินไป
- Font ใช้เป็น Apercu และ Roboto เป็น font กลุ่ม San serif เข้ากับธีมของเว็บไซต์ และทำให้อ่านง่าย สบายตา