24 เมษายน 2555

Internship, DAY 5

วันนี้เราได้เจอกับงาน Database แล้ว พี่ต้องให้ไฟล์ SQL เอาไปยัดไว้ใน Database ของเรา ข้อมูลที่ได้มีแค่ table เดียว แต่ record เป็นล้าน การ query ก็ง่านแสนง่าย เพราะโจทย์คือ "ค้นหารหัสไปรษณีย์" แต่ดันไปติดบั๊กโง่เง่าอยู่ 2 เรื่อง คือ


  • โค้ด SQL ที่ได้มานั้น support InnoDB engine ซึ่งใน phpMyAdmin ของเรามัน disable หน้าตาเฉย ตอนที่เกิดปัญหานี้แรกๆก็พยายามลง Appserv ใหม่แต่ก็ยังไม่ได้เรื่อง สุดท้ายก็ไปใช้ google ให้เกิดประโยชน์และเจอวิธีแก้ไขแบบไม่ต้องลง Appserv ใหม่ มันสุดยอดมากเลยล่ะตัวเธอว์
  • พิมพ์ผิด ... อันนี้ความโก๊ะส่วนตัว แต่ใช้เวลานานมากกว่าจะแก้ได้ ต้องตั้งสติก่อนสตาร์ทนิดนึง

หลังจากจัดการปัญหา Database เรียบร้อย ทดสอบ query ผ่านเป็นที่น่าพอใจ ก็มาทบทวนโจทย์ที่พี่ต้องให้อย่างกว้างๆว่า ให้ใช้งานง่ายๆ ผู้สูงอายุก็ใช้ได้ (แต่ไปๆมาๆ requirement change ไม่ต้องทำเผื่อผู้สูงอายุก็ได้ แต่ concept ยังเหมือนเดิมคือเรียบง่าย) โดยพี่ต้องแนะนำ Auto-complete Suggestion ยกตัวอย่างง่ายสุดๆคือ เข้า google ตั้งแต่ google มีเจ้านี่มาชีวิตมันช่างสะดวกสบายซะเหลือเกิน แต่เราจำไม่ได้แฮะว่า google มีตั้งแต่เมื่อไหร่ เหมือนเราอยู่กับน้องจนโตไม่เห็นความเปลี่ยนแปลงทั้งที่จริงก็เปลี่ยนไปมากยังไงยังงั้น

คุยเสร็จก็กลับมานั่งคิดว่าจะเอาไงดีหว่า ก็เลยไปคุ้ยหาการออกแบบเว็บสำหรับผู้สูงอายุ เจอเว็บที่ scope เนื้อหาดูเข้าที เว็บที่ใช้งานง่ายมีอีกชื่อเก๋ๆว่า Web Accessibility แต่เว็บที่เราเจอนั้นยังมีเสริมท้ายอีกว่า for older users (คลิกเลย แค่เห็นชื่อเว็บก็เชื่อถือได้แล้ว 555) สรุปก็คือ 

  • คนแก่ชอบอะไรสะดวกๆ ไม่ชอบของลูกเล่นเยอะ เช่นพวก pull-down menus, scrolling-list แม้กระทั่ง scrolling page ก็ยังไม่เหมาะ ยิ่งไอประเภทเอา cursor วางบนตัวอักษรแล้วมี Effects นี่ยิ่งไม่เหมาะเข้าไปใหญ่ เม้าส์ควรมีไว้คลิกโง่ๆเท่านั้น
  • Link และ Text ต่างๆ ควรชัดเจน เข้าใจง่าย ตัวใหญ่ๆ พวก headings, menu items ไรงี้สำคัญ ควรจัดลำดับความสำคัญของข้อมูลด้วย (information hierachy) และไม่ควรมีอะไรซ้ำซ้อน
  • ไม่ควรมี Link หรือ page อะไรที่มันทำให้คนแก่สับสน ยกตัวอย่างง่ายๆเช่น เข้าเว็บจะไปโหลดอะไรซักอย่าง แล้วเจอพวกโฆษณาแฝง ทำให้เพจนั้นมีคำว่า 'Download' อยู่สี่ห้าอัน อย่าว่าแต่คนแก่เลย วัยรุ่นอย่างเรายังมึน
  • Content เองก็สำคัญ ควรจะมีเนื้อหาสอดคล้องกับหัวข้อของ page นั้น หรือวัตถุประสงค์ของเพจด้วย


พอได้เนื้อหามาดังนี้แล้วก็คิดว่า การทำช่อง search ไม่ควรซับซ้อน ให้คนแก่มานั่งติ๊กว่าจะ search อะไร ขอแค่รู้ keyword ก็พอแล้วดีกว่า พอคิดแบบนี้แล้วไอเดีย Auto-complete Suggestion ก็สำคัญขึ้นมาทันที ก็ไล่ Search กันมันมือ ไปเจอ jQuery plugin สำหรับงานนี้ ในใจคิดว่าหวานหมู แต่มันบอกว่าเลิกใช้ไปแล้ว ย้ายไปอยู่กับ jQuery UI แทน ณ ขณะนั้นเริ่มอับจนหนทาง ลองเข้า w3school ไปอ่านเพิ่มเติมก็ไม่รู้เรื่อง คงเป็นเพราะพื้นเดิมไม่แน่นพอ จนสุดท้ายหนุ่มโรงงานจากอยุธยาผู้ว่างงาน (แบบนี้มันน่าจะตกงานแล้วมากกว่านะ = =") ก็ได้แนะนำ UI สำหรับงานนี้ ทำให้ใจชื้นขึ้นมาหน่อย นั่งเลือก UI กันสนุกสนาน แต่พออ่าน code ก็ม่องเท่งเหมือนเดิม มี Ajax เพิ่มมาอีกอย่างที่ไม่รู้เรื่องหนักกว่า jQuery อีก

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

รูปบน: ขณะ search มี suggestion ตำบล, เมือง, จังหวัด ให้
รูปล่าง: แสดงผลลัพธ์เป็นตาราง

ก็ได้ suggestion เพิ่มอีกว่า แถบด้านขวาควรจะมีลิ้งแบบที่ไม่ต้องกด search ด้วย เราก็เสนอไปว่าควรเป็นจังหวัดเรียงตามตัวอักษร พี่แกก็คุยไปๆมาๆประมาณว่า หรือจะแยกตามภาค หรือจะเอาแผนที่ประเทศไทยมาจิ้มเลือกจังหวัดเอาเลย สุดท้ายก็กลับเข้าฝั่ง 5555 พอออกแบบไปตาม requirement ใช้ 960 grid ให้เกิดประโยชน์ด้วย และแถม Header กับ Footer พอเป็นพิธี สุดท้ายก็พอว่า แม่ง scroll เยอะไปป่าววะ มันชักจะขัดกับที่พิมพ์ไว้ข้างต้นซะแล้วสิ แต่พี่ต้องมาเห็นก็ไม่ว่าอะไร แค่บอกว่าโทนสีควรจะเรียบๆ โทนสีเทาประมาณนั้น แล้วก็ควรมีข้อความกับ Logo อะไรบ้างตรง Header เราก็แค่จับไล่เฉดสี เทา-ขาว ตรง Header ใส่สิ่งที่ควรจะเป็น Logo ไว้มุมขวาบนแล้วก็เพิ่มข้อความอีกนิดหน่อย ใส่ไปมั่วๆเท่านั้น



ก็มันยังไม่ใช่ของจริงนี่นา :P


ปล.ลิ้งเหล่านี้มีประโยชน์



3 ความคิดเห็น:

  1. เท่จังงงง เราง่อยมากอะ ไม่ค่อยได้ทำไรเท่าไร = ='

    ตอบลบ
  2. ไม่หรอกปัน จริงๆเราชิวสุดในสามโลกแล้ว

    ตอบลบ
  3. อย่างน้อยก็ยังได้ทำอะไรเป็นชิ้นเป็นอันนะ เราไม่ค่อยได้ทำไรง่ะ

    ตอบลบ