ผลภัพธ์ที่เจ็บปวดจากการไม่ทำ UX Testing

วันนี้ผมมีประสบการณ์จริงจากการทำงาน ที่ทำให้ผมและคนในทีมได้ตระหนักถึงความสำคัญของการทำ Testing ทั้ง UX testing, User journey ของผู้ใช้งานจริง มากกว่าการคำนึงถึงความคิดของตัวเอง หรือคนในทีมเป็นหลัก   เริ่มจากการรับโจทย์ เมื่อถึงเวลาเริ่มต้นโปรเจค AE ผู้ได้รับสารจากลูกค้า ก็เริ่มบรรยายสิ่งถึงสิ่งที่ลูกค้าต้องการ บลา บลา บลา… โดยสรุปแล้วโปรเจคนี้สิ่งที่ต้องทำคือ   “แคมเปญขายสินค้าชิ้นหนึ่ง โดยให้คนมาลงทะเบียนข้อมูลส่วนตัว พร้อมอัพโหลดหน้าตัวเองมาด้วย รับฟรี! ส่วนลด 30%”   เมื่อได้รับโจทย์หรือสิ่งที่เราจะทำ สิ่งที่แรกที่คนในทีมจะต้องสงสัยเลยคือ แคมเปญที่จะทำนี้มันเวิคหรือไม่ จะมีคนเข้ามาเล่นสักกี่คน เพราะถ้าทำแล้วไม่เวิคจะทำไปทำไม เสียเงิน เสียเวลาปล่าวๆ คำตอบจากคนในทีม นาย ก : เฮ่ยเล่นดิ ลดตั้ง 30%  เยอะนะเว้ยไม่เล่นได้ไง นาง ข : ไม่มีใครเล่นหรอก ให้อัพโหลดหน้าตัวเองด้วย แล้วจะเอาหน้าไปทำอะไร เป็นสิ่งที่ดีเมื่อมีการโต้เถียงกันด้วยเหตุผล เพื่อนำมาวิเคราะห์ปรับปรุง แต่ผลสุดท้ายก็ต้องจบการประชุมด้วยการต้องทำเมื่อ AE บอกว่า…

การใช้คำนาม เอกพจน์ พหูพจน์ และการใช้คำบอกจำนวน

การเปลี่ยนคำนามจากเอกพจน์ เป็น พหูพจน์ มีหลายหลักเกณฑ์ดังนี้ เอกพจน์ พหูพจน์ นามเอกพนจน์ที่ลงท้ายด้วย s,ss,ch,x,z buses ตัวท้ายเป็น y แต่ก่อนตัวท้ายไม่ใช่สระ เช่น baby babies ตัวท้ายเป็น y แต่ก่อนตัวท้ายเป็นสระ เช่น boy boys ลงท้ายด้วย o บางคำเช่น hero heroes ลงท้ายด้วย f/fe เช่น life, leaf lives, leaves   each, every ใช้เหมือนกันคล้ายๆกัน เป็น เอกพจน์ เพราะเจาะจงไปทีละคน all เป็น พหูพจน์ no เป็น พหูพจน์ none of the เป็น พหูพจน์   การใช้คำบอกจำนวน Quantify a…

สอนสร้างเว็บ แก้ปัญหาระดับชาติ ใช้ display inline-block แล้วเกิดช่องว่าง

display:inline-block คืออะไร? คำสั่งความหมายดูแปลกๆ ไม่คุ้นตา คุ้นหู เหมือนพวก font-size,color,… สมรศรีเห็นผมนั่งพิมพ์ คงดูเหมือนคนบ้านั่งพิมพ์ภาษาต่างดาว ผมจะปล่อยให้น้องสมรผู้น่ารัก มองผมเป็นมนุษย์ต่างดาวบ้าบอไม่ได้ อืม… เอาไงดี…คิดคิดคิด เอาล่ะ…งั้นล้างสมองจัดการให้น้องสมรมาเป็นมนุษย์ต่างดาวเหมือนกรูแล้วกันวะ ฮ่าๆ display:inline-block เนี่ยะเป็นคำสั่ง CSS ไว้จัดเลย์เอาท์ หรือ อิลิเม้นท์ ให้อยู่บรรทัดเดียวกัน โดยสามารถกำหนดให้จัด ชิดซ้าย กึ่งกลาง ชิดขวา ได้อย่างง้ายดาย ตามรูป สมรศรี : แล้วไงคะพี่ แล้วชาติมันล่มจมตรงไหน ถึงต้องมาแก้ปัญหา ปัญหามันอยู่ตรงนี้ครับ เวลาเราสั่ง inline-block มันจะเกิดช่องว่างของแต่ละอิลิเมนท์ ทำให้ดีไซน์ที่วางไว้ไม่สวยงาม เราจึงต้องมาคืนความสุขให้กับประชาชน วิธีการก็แค่ใส่คอมเมนท์ไว้ตามช่องว่างแต่ละอิลิเมนท์ตามนี้ <ul> <li>content</li><!– –><li>content</li><!– –><li>content</li> </ul> สมรศรี : แค่นี้หรอคะ ผม : ครับ สมรศรี : ชาติเจริญขึ้นเยอะเลยเน๊อะ ผม…

CSS3 Transition

สอนสร้างเว็บ Animation effect ด้วย CSS3 Transitions

หลังจากที่สมรศรีเข้าใจที่มาที่ไปของวิธีสร้างเว็บ Animation แล้ว เธอจึงตัดสินใจที่จะเริ่มต้นด้วยการใช้ CSS3 เนื่องจากคำสั่งที่ง่าย สั้น กระชับ เร้าใจ นี่แหล่ะ!! เหมาะกับเด็ก GEN Y อย่างน้องสมรศรีเป็นอย่างยิ่ง   “ลุยเลยค่าพี่ CSS3 นี่แหล่ะที่หนูต้องการ” เมื่อรู้ข้อดี ข้อเสีย สมรศรีจึงไม่ลังเลที่จะตัดสินใจ   “ได้เลยครับ ยังไงในระหว่างเรียนผมจะชี้ให้เห็นชัดๆอีกที” ผมย้ำอีกครั้งเพื่อความเข้าใจที่ชัดเจน   คุณสมบัติแรกของ CSS3 ในการทำ Animation ก็คือ “Transition” แปลเป็นไทยแบบลูกทุ่งคือ “การเปลี่ยนแปลง” เจ้า transition นี่แหล่ะพระเอกของเราที่จะทำให้คุณสมบัติธรรมดาอื่นๆ เช่น width, height, top, left,… สามารถที่จะเคลื่อนไหวได้   ตัวอย่างการใช้ transition .test{transition:width 2s;} ความหมายคือ การเปลี่ยนแปลงค่าความกว้าง ให้มีระยะเวลา 2 วิ เช่นเรากำนหดความกว้างให้ขยายจาก 100px…