Sitemap
Pimwipha Ch.

Pimwipha Ch.

Freelance UX/UI Designer. Your friend. Focus on Art, Design, Tech, Productivity and etc. Cheers!

CU CAS Log-in Redesign

2 min readJun 14, 2018

จากนิสิตคนหนึ่งที่รู้สึกขัดๆจากการใช้เว็ปจุฬาตลอด

พอดีช่วงนี้เป็นช่วงที่นิสิตจุฬา ต้องประเมินให้คะแนนอาจารย์แต่ละรายวิชา
เรารู้สึกขัดใจตรงหน้าเว็ป CU CAS มาก เราใช้เวลาสักพักใหญ่ ว่าเราจะกรอกรหัส ใส่พาสเวิร์ดได้ตรงไหน ไม่ใช่แค่เราคนเดียวที่เจอปัญหานี้ เราเลยเกิดไอเดียที่อยากจะทำเว็ป CU CAS ในอุดมคติของเรา ที่ทำให้รู้สึกว่าการประเมินไม่ใช่เรื่องที่ยุ่งยากอีกต่อไป

Press enter or click to view image in full size
CU CAS เวอร์ชั่นปัจจุบัน

เว็ป CU-CAS ปัจจุบัน : https://www.cas.chula.ac.th/cas/
.
CU CAS คือ ระบบประเมินการเรียนการสอนออนไลน์ของจุฬาลงกรณ์มหาวิทยาลัย
.

ทุกคนอาจจะเป็นเหมือนเรา ไม่ได้เข้ามาเว็ปนี้บ่อย บางทีจำไม่ได้ว่า Username มันควรจะมีกี่หลัก เพราะเว็ปไซต์ของจุฬาจะมีการใช้รหัส 10 หลักบ้าง หรือ 8 หลักบ้าง เราเลยใส่ตัวอักษรตามหลักของรหัสที่ต้องกรอกในช่อง Username เพื่อไม่ให้นิสิตที่เข้ามาใช้งาน ต้องมานั่งถามตัวเองว่าต้องกรอกรหัสกี่หลักสำหรับเว็บไซต์นี้ (แต่เราไม่มั่นใจว่า Username ของอาจารย์กับนิสิตมีความคล้ายกันหรือเปล่า ค่อยว่ากันอีกที)

Press enter or click to view image in full size

เราออกแบบหน้าตาใหม่ สร้างความ Priority ให้อาจารย์ นิสิต และบุคลากรของจุฬาสามารถกรอกรหัสได้โดยตรง โดยที่พวกเขาไม่ต้องไปกดปุ่ม “Connect with SSO” ที่สร้างความสับสนให้เราว่า อะไรคือ SSO? นิสิตอาจารย์ส่วนใหญ่ก็รู้จักแค่ CU CAS เท่านั้น นอกจากนี้ยังมีถึงสองปุ่มที่หน้าตาเหมือนกัน ทำให้ยิ่งงงเข้าไปใหญ่ จากเว็ปเวอร์ชั่นล่าสุด นิสิตส่วนหนึ่งที่ไม่มาประเมินก็อาจจะมีเหตุผลเรื่อง Log in ตั้งแต่แรกเลยก็ได้

.
เพิ่มเติม: ขอบคุณ คุณ Mouse ที่ได้อธิบายเพิ่มเติมเรื่อง SSO นะคะ
หาข้อมูลเกี่ยวกับเรื่องนี้ในเน็ตยากมาก
อะไรคือ SSO? มันสำคัญอย่างไร? อ่านต่อได้ที่: https://medium.com/@bu…/ออกแบบ-ui-ได้สวยมากครับ-b86b71461149

ส่วนบุคคลภายนอกที่ต้องการเข้าระบบ CU CAS กลุ่มพวกนี้อาจจะเยอะไม่เท่าอาจารย์นิสิตจุฬามากนัก ก็สร้างปุ่มข้างล่างเพิ่มเติม
User ก็ได้มี Leaning มาบ้างแล้วว่า ถ้าพวกเขาไม่มี Account ของระบบ
พวกเขาก็ต้องมองดูข้างล่างเพิ่มเติม ว่ามี Option สำหรับคนเหล่านี้บ้างไหม

Get Pimwipha Ch.’s stories in your inbox

Join Medium for free to get updates from this writer.

ส่วนระบบ SCEKEY เดาว่าน่าจะเป็นระบบ Log In ของฝั่ง Programmer/Developer
ทางเราจึงออกแบบเป็นปุ่มต่างหาก ให้ลิ้งค์ไปยังหน้าต่างเฉพาะสำหรับพวกเขา เพื่อเน้นให้กลุ่มอาจารย์นิสิตจุฬา(ที่น่าจะเป็น User หลักของเว็บไซต์นี้) ใช้ได้ง่าย สะดวก และเกิดความสับสนน้อยที่สุด

Press enter or click to view image in full size
CU CAS Mobile GUI Redesign

เนื่องจากระบบนี้เวลาคนเข้าเยอะมันก็ล่ม แถมเป็นหน้าตาเว็ปที่ไม่ได้ใช้บ่อยมากมายนัก เลยออกแบบให้มีความ Simple มีลักษณะของ Material Design มันก็มีผลให้ดาวน์โหลดเว็ปง่ายด้วย นิสิตเข้ามาประเมินไว สะดวก แล้วก็เสร็จ Process การประเมินได้ไวขึ้น

Press enter or click to view image in full size
Press enter or click to view image in full size
ก่อน Log-in User เห็น Notice ปรากฏขึ้นมา

ในเว็ปเวอร์ชั่นปัจจุบันเราจะเห็นว่า มีช่อง Notice ประกาศแจ้งขยายเวลาประเมิน อยู่ด้านล่าง ซึ่งเป็นส่วนที่สำคัญเหมือนกัน แต่การจัดเรียง UI ค่อนข้างรกสายตา มีข้อมูลเยอะมาก User ไม่สามารถแยกแยะได้ว่าส่วนไหนสำคัญ ไม่สำคัญ หนำซ้ำ User อาจจะไม่ทันได้สังเกตว่ามีแจ้งเลื่อนเลยด้ว จึงเพิ่ม Card ที่ป็อปอัพก่อนเข้า Log in แจ้งเลื่อนขยายเวลาประเมินให้ กดปิด แล้วก็ล็อกอินได้เลย ทุกคนที่เข้ามาในเว็ปต้องเห็นว่ามี Notice การแจ้งเลื่อน ทำให้ไม่พลาดข่าวสารที่สำคัญต่างๆ

Press enter or click to view image in full size
CU CAS Mobile GUI Redesign

สี ฟ้อน รูปทรงที่ใช้ ยังคงความเป็นจุฬา เน้นสีชมพูตาม CI เป็นหลัก ฟ้อนต์มีหัวให้ความเป็น Traditional อยู่ และไม่ได้ให้ความ Modern จนเกินไป

ในฐานะที่เราเป็น User คนหนึ่งของเว็ป CU CAS เราก็อยากเห็นเว็ปไซต์ที่มีการออกแบบที่เหมาะสมในจุฬา เรามักได้ยินข่าวทุกปีว่า เว็ปลงทะเบียนต่างๆล่มเพราะระบบภายใน หรืออะไรก็ตาม จึงอยากให้ความสำคัญกับการออกแบบหน้าตาเว็ปด้วย เพราะท้ายที่สุดแล้ว ปัญหามันอาจจะแก้ไขได้ด้วยการเปลี่ยนสีหรือปุ่มเพียงเล็กน้อย แต่กลับได้ผลลัพธ์ที่ดีขึ้นมหาศาล

Special Guest: Supisara (Mam)

Press enter or click to view image in full size
CU CAS Macbook GUI Redesign

--

--

Pimwipha Ch.
Pimwipha Ch.

Written by Pimwipha Ch.

Freelance UX/UI Designer. Your friend. Focus on Art, Design, Tech, Productivity and etc. Cheers!