UX คืออะไร ( รีวิวจากการไปเรียนที่สิงคโปร 2 - 3 Nov 2015) Part 1

UX คืออะไร ( รีวิวจากการไปเรียนที่สิงคโปร 2 - 3 Nov 2015)

UX ย่อมาจาก User Experience หรือ ประสบการณ์การใช้งานของผู้ใช้ (แล้วแต่จะแปลนะ)

ภาพรวมๆ ก็ประสบกาณ์ใช้งานของ USER นั่นแหละครับ

UX มันดียังไง มันช่วยอะไรเรา

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

ไม่ว่าจะเวปไซต์ หรือห้างสรรพสินค้า หรือไปต่างจังหวัด แม้แต่การ Design ทัพพี ถ้ามี UX ที่ดีเราก็สะดวกสบายในการใช้งานและยังทำให้เราอยากกลับไปใช้งานอีก

UX มันต้องคำนึงถึงอะไร 

“ไม่มี Design ไหนดีที่สุด และไม่มี Design ไหนแย่ที่สุด”

อ่าว พูดงี้ แล้วมันยังไงกันล่ะ เดี๋ยวผมจะค่อยมาอธิบายเรื่อง Design ดีและแย่ มันคืออะไร มาเริ่มที่เรื่อง UX คำนึงอะไรดีกว่า UX นั้นต้องคำนึงถึง Users หรือคนที่จะมาใช้งานของที่เรา Design  เป็นคนเพศไหน ช่วงอายุเท่าไหร่ คนในแทบประเทศอะไร วัฒนธรรมยังไง ทำอาชีพอะไร เป็นต้น อันที่จริงก็หลายๆ อย่างประกอบกัน ยิ่งเรามีข้อมูลมากเท่าไหร่ เราจะ Design ให้เหมาะสมกับคนเหล่านั้นมากเท่านั้น

อย่างที่กล่าวไว้ข้างต้นว่าไม่มีอะไรดีที่สุด มีแต่เหมาะสมที่กับคนใช้งานมากที่สุดครับ

Know Thy Users  -

ติดตามต่อ Part 2 นะครับ

อยากเปลี่ยนแปลงตัวเองหรอ ทำงี้ซิ

หลายๆ คนอยากเปลี่ยนแปลงตัวเอง แต่ไม่รู้จะเริ่มยังไง อยากให้คนอื่นสนใจ ทำไมเขาไม่ใส่ใจเราเลย แต่ไม่รู้จะเริ่มยังไง ถ้าเป็นแนวทางผมล่ะก็ไม่ยากครับลองฝึกตามนี้ดู

1. พูด “ขอบคุณ” ให้บ่อยขึ้น
2. พูด “ขอโทษ” ให้บ่อยขึ้น

สองอย่างนี้แหละครับ

พูดขอบคุณในทุกๆ โอกาสที่มีคนทำอะไรให้ ยกตัวอย่าง พนักงานเซเว่นหยิบของใส่ถุงแล้วยื่นให้เรา ไปจนถึงมีคนมอบของขวัญให้

หลายๆ คนมักจะพูดว่า เห้ย ก็มันเป็นหน้าที่เขา ขอบคุณเขาทำไม มองกลับกันถ้ามีคนขอบคุณเรา เราก็จะดีใจไหมครับ มันเป็นกำลังใจให้เราใช่ไหมล่ะ ทำไมเราไม่มอบกำลังใจให้เขาบ้างล่ะ :D  

เห้ย! แบบนี้คำขอบคุณของเรามันไม่มีค่าอะไรเลยซิ นึกจะพูดก็พูด   

ขนาดคำขอบคุณเรา เรายังหวงแหนเลยแล้วอย่างอื่นละ เราหวงแม้แต่คำพูดดีๆ เราหวงแม้กระทั่งความรู้สึกดีๆ ของเราที่จะส่งต่อให้กับคนอื่น แบบนี้จะทำให้ใครเขาจะอยากทำอะไรเพื่อเรา

พูดขอโทษในทุกๆ ครั้งที่เราทำให้เขารู้สึกไม่ดี ยกตัวอย่าง พูดทำให้เขารู้สึกไม่ดี ไปจนถึงเราทำให้เขาเสียหายโดยไม่ได้ตั้งใจ

เอ้อการพูดขอโทษนี่มันพร่ำเพรื่อมันจะดีหรอ มันจะดีหรอ ไอ้กรณีเราพูดให้เขารู้สึกไม่ดีเนี่ย จริงๆ เราไม่ได้ความอย่างนั้น จะมาโทษเราว่าเราผิดได้ไง เราจะไปรู้รึไงวะ  งี้มันก็เหมือนเราหงอซิ เรากลายเป็นโดนข่มหรอ  อะไรทำนองนี้มาเลย

เราลองมองกลับกันครับ ถ้าเป็นเรา เราก็รู้สึกไม่ดีเช่นกัน แม้จะรู้ว่าเขาไม่ได้ตั้งใจ 

คำพูดไม่ดีท่ีเราไม่ได้ตั้งใจ เหมือนอิฐก้อนเล็กๆ
ที่มันมาวางกันเขากับเรา นานวันเข้ามันจะกลายเป็นกำแพง

วิธีทำลายกำแพงง่ายๆ “เราขอโทษ เราพูดอะไรทำให้เธอพอใจ เราไม่ได้ตั้งใจนะ ขอโทษจริงๆ” เขากับเราก็จะได้ใจกลับมา

ง่ายมะ

ลองทำดูครับ ไม่ต้องหวังว่าคนอื่นรอบข้างจะเปลี่ยนแปลงนะครับ แต่เราจะเปลี่ยนไป :D

พูดจริงไม่ได้โม้

Legacy CSS

เอาไงดีนะตอนนี้ซื้อ Theme  มาแล้ว แต่ก็อยากจะเปลี่ยนรูปร่างหน้าตาบางอย่างใน Theme เราในมันสวยงามตามที่เราหรือลูกค้าอยากได้จะทำไง

ส่วนใหญ่ที่เจอมาเรามันจะหยิบ Class ใน Css ของ Theme ออกมา Overide มันซะ ฮ่าๆ (หัวเราะดังมาก)

พอทำไปนานๆ มันก็จะบวมๆ บางทีอาจจะไม่เห็นภาพ ยกตัวอย่างเช่น

เรื่องสมมติ

บางคน(บางคนนะ บางคน) ใช้ Bootstrap เป็น Template  เวปไซท์แต่ลูกค้าบอกว่า อยากเปลี่ยน Design ของ popover เราก็จะ overide class popover ลงไปตรงๆ เลย WORK FINE!! มันก็โอเคนะไม่เห็นจะเป็นอะไรเลย พอทำไปนานๆ ลูกค้าบอกว่า ในหน้านี้ขอ popover อีกแบบนึง(เอาด่วน) คราวนี้ทำไงล่ะ ก็เอา id  มาผูกกับ popover นั้น 

#page2 .popover { }

มันก็ใช้นี่ WORK FINE !! (ฮ่าๆๆๆๆๆ) แล้วเราก็จะทำแบบนี้ไปเรื่อยๆ จนอ่าว popover เยอะไปหมดเลย ผูกกับอันนั้นอันนี้ไปหมดเลย บางครั้งลูกค้าก็ต้องปรับแก้ดีไซน์ เราก็ต้องกับไปแก้แต่ละอัน อีกนึงที่เสียไปคือ เราจะเสีย popover ของ template เก่าไปเลย เพราะเรา override ไปแล้ว

ทำไงดี?

อย่า Override ครับใช้การเพิ่ม feature หรือ Modified ของเราเข้าไป ถ้าคิดไม่ออกตั้งชื่อไงก็ไปอ่านเรื่อง BEM นะครับ ในโพสเก่าผมได้ครับ

ปล. พยายามอย่า !important  ใน CSS file ของเรานะครับ

ตั้งชื่อ Class อะไรดี

ตั้งชื่อ Class อะไรดี

เป็นคำถามแรกเมื่อเราสร้าง HTML Element ขึ้นมาแล้วอยากจะเขียน CSS กำกับ Element นั้น แล้วมันจะชื่ออะไรดีน้า ตั้งแบบนั้นก็ไม่สื่อแหะ จะตั้งอีกอย่างก็ เห้ย มันไปใช้กับ Element อื่นไม่ได้ แล้วก็นั่งคิดหลายนาที สุดท้ายลงเอยกับชื่ออะไรก็ไม่รู้ ที่เราบอกว่าโอเคละ ใช้ได้ แต่พอนานไปไอ้สิ่งที่ใช้ได้กับมัน เราก็งงว่ามันคืออะไร

มาใช้ BEM กัน

BEM คือ อะไร BEM วิธีการอย่างนึ่งในการตั้งชื่อ Class HTML และ CSS ถูกพัฒนาขึ้นโดยทีมที่ Yandex (ผมไม่รู้จักทีมนี้แหะ) จุดประสงค์ก็อยากให้คนอ่าน HTML และ CSS รู้เรื่อง เข้าใจว่า CSS นี้คืออะไรทำให้ใน HTML ได้

มาเริ่ม BEM กัน BEM ย่อมาจาก Block, Element, Modifier 

Block คือ Component นั่นแหละ ยกตัวอย่างเข่า .btn {}, .table{}, .nav{} เป็นต้น

Element คือ เป็น level ต่ำกว่า Block หรือ จักว่าเป็น ลูกก็ได้ เช่น .btn__price{}

<a class=“btn” href=“#”>

 <span class=“btn__price”>1,000</span>

 <span class=“btn__currency”>Bath</span>

</a>

Modifier คือ เป็น level ที่ไว้ปรับเปลี่ยน style ของ Block อีกที เช่นความสูง เปลี่ยนสี เปลี่ยนอนิเมชั่น เช่น .btn--red{}, .btn--big, .btn--bounce

เช่น 

<a class=“btn btn—-red” href=“#”>
 <span class=“btn__price”>1,000</span>
 <span class=“btn__currency”>Bath</span>

</a>

<a class=“btn btn—-blue” href=“#”>
 <span class=“btn__price”>1,000</span>
 <span class=“btn__currency”>Bath</span>

</a>

ถ้าเรามาอ่าน html เราจะเข้าใจได้ทันทีว่า class นี้ทำอะไร มีความสัมพันธุ์แบบไหน แล้วเราก็ใช้กระบวนการคิดน้อยลงอีก

เอาเป็นว่าการตั้งชื่อ Class ไม่มีถูกไม่มีผิด แต่เราต้องรู้ว่าไอ้ Class ที่เราตั้งนั่นน่ะเอาไปใช้ทำอะไร กลับมาอ่านเข้าใจไหม ถ้าใครสนใจวิธีการ BEM นี้ลองดูครับ

จะทนเจ็บกับมันไปทำไม รีบจัดการซิ จะได้หายเร็วๆ

เล็บขบ

ผมเจ็บเล็บนิ้วโป้งมานานมากเกือบจะครบหนึ่งสัปดาห์ ผมไม่ได้ใส่ใจความเจ็บที่มีอยู่ แต่รู้ว่ามันเจ็บ

ผมก็ยังคงทำงานอย่างต่อเนื่องต่อไป ไม่เคยคิดจะไปมองที่นิ้วเท้าเราเลย จนสุดมันก็เจ็บมากขึ้นๆ ผมกลับมาที่บ้าน

นั่งดูที่นิ้วโป้งนั้น ก็ได้เห็นว่านิ้วมันบวมมาก ผมเห็นเล็บมันมุดลงไปในเนื้อนิ้วท้าว จนเป็นแผลและเป็นหนอง

มันเจ็บมากตอนตัดและดึงมันออกมาจากนิ้วเรา ผมคิดว่ามันจะไม่หายในเร็วนี้แน่นอน คงต้องเอายามาทา แอลกอฮอลมาเช็ด

เหตุการณ์นี้มันบอกผมได้อย่างนึง 

“ถ้าเราทนเจ็บ จนถึงที่สุดแล้วค่อยจัดการปัญหานั้น แม้ปัญหานั้นจะหายไปเราเองนี่แหละต้องใช้เวลารักษาเยียวยาตัวเองต่อไป”

ผมว่าถ้าเราทนกับปัญหา เรารู้ว่ามันเจ็บปวด แต่เราทนเพื่อบอกว่า 

“สักวันมันจะดีขึ้น” หรือ “ถ้ามันถึงที่สุดแล้วฉันจะจบมันเอง”

“แต่เราไม่เคยคิดว่าสุดท้ายเราต้องเยียวยาตัวเอง” 

ทั้งเจ็บ และเยียวยาตัวเองด้วยต่อไป

ถ้าเราเจอปัญหา ควรเข้าจัดการกับปัญหาให้เร็วที่สุด ให้เจ็บตัวน้อยที่สุดจะดีกว่าครับ