1. ตอนที่ 1: Data and UI Design (ไฟล์เสียง 6.1 MB และไฟล์ PDF UI_6_21_1.pdf)
   6.21 UI class 1: Data and UI Design
   brought to you by Livescribe
   

2. ตอนที่ 2: Metadata (ไฟล์เสียง 4.4 MB และไฟล์ PDF UI_6_21_2.pdf) เป็นเรื่อง surprise ผมมากพอสมควรเลยนะ ที่น้องๆ ปีสาม ไม่รู้จัก Metadata กัน หลายคนไม่เคยได้ยิน ไม่เป็นไร ก็สอนซะหน่อย เพราะว่านี่เป็นเรื่องสำคัญที่ทำให้เราเล่นกับข้อมูลได้หลากหลายและสนุกเลย
   6.21 UI class 2: Metadata
   brought to you by Livescribe
   

3. ตอนที่ 3: Applications and Data (ไฟล์เสียง 5.6 MB และไฟล์ PDF UI_6_21_3.pdf)
   6.21 UI class 3: Applications and Data
   brought to you by Livescribe
   

4. ตอนที่ 4: Application and Data (QA) (ไฟล์เสียง 2.9 MB และไฟล์ PDF UI_6_21_4.pdf) พอดีมีน้องคนนึงถามว่า “แล้วการเปลี่ยนจาก Application แบบเปล่าๆ เป็น Application+Data ต้องทำไงบ้าง” คิดว่ามีประเด็นดีะน ก็เลยพูดยาวหน่อย
   6.21 UI class 4: Applications and Data (QA)
   brought to you by Livescribe
   

น้องๆ ที่ลงวิชานี้อย่าลืมการบ้านนะครับ keyword ในการตั้ง subject ของ e-mail คือ app+data ครับ และช่วยๆ รบกวนทำการบ้านให้เหมือนกับว่าอยากจะผ่านวิชาหน่อยนะครับ

เนื้อหาคร่าวๆ ในวิชานี้ ผมไม่ได้ต้องการเพียงแค่ว่าหลักการในการออกแบบ User Interface เท่านั้น แต่จะรวมถึงการพัฒนาซอฟต์แวร์ ระบบ ตั้งแต่ขั้นตอนการเก็บ requirement เพื่อให้ได้มาซึ่ง User Experience (UX​) ที่ดี และการนำความรู้เรื่องอื่นๆ ไม่ว่าจะเป็นหลักการ 80:20 หลักการทำงานของสมองเพื่อให้ได้มาซึ่ง creativity การสร้าง innovation การศึกษาและระบุตลาดของซอฟต์แวร์ และความสร้างความสามารถในการแข่งขันโดยให้ User Interface, User Experience ที่เหนือกว่า เรื่องต่างๆ จาก Game Theory (เช่น Prisoner’s Dilemma) เป็นต้น

เนื้อหาด้านล่างนี้ แบ่งเป็น 3 ส่วน ตามที่ผม lecture ซึ่งในส่วนที่ 2 เป็นส่วนที่ผมนึกออกระหว่างสอน ว่าน่าจะพูดถึง น.ศ. จะได้ทราบบ้าง ว่าสมองทำงานอย่างไร ไอเดียต่างๆ ซึ่งเป็นนวัตกรรมได้ มันจะมาจากไหน ก็เลยสอนสดๆ เลย โดยแต่ละส่วนนั้น ขั้นด้วย discussion ที่ไม่ได้บันทึกไว้ ซึ่ง น.ศ. ที่ไม่ได้มาเรียน ก็น่าเสียดายแทนด้วย แต่ไม่มีอะไรมากหรอกครับ เพราะว่าส่วนมากก็เป็นเกร็ดเล็กน้อยเสียมากกว่า

ป.ล. เสียงอาจจะมาช้านะครับ อาจจะต้องรอมัน stream เสียงนิดนึง ส่วนภาพคงไม่มีปัญหา เพราะจากที่สังเกต ทาง Livescribe ใช้วิธีการสร้างจาก coordinate data (x, y, t) ส่วนเสียงนี่เป็น audio streaming ธรรมดา

หมายเหตุ มีการแจ้งว่า กด play บนนี้แล้วเล่นไม่ได้ ไปเล่นบนหน้าเว็บของ livescribe เองก็ไม่มีเสียง …​ ผมเข้าใจว่าพอกด play ไปแล้ว มันจะเริ่ม download ไฟล์เสียงครับ ซึ่งจะใช้เวลาหน่อย ในกรณีที่ไฟล์เสียงมันใหญ่ การ streaming ของเสียงอาจจะไม่ดีพอครับ คิดว่าใช้การ download ทั้งไฟล์ ขออภัยในความไม่สะดวกครับ จะติดต่อกับทาง livescribe เพื่อบอกปัญหานี้ต่อไปครับ …. กด play แล้วรบกวน “อดทนรอ” หน่อยนะครับ

• UI class 6.14 1: Changes and Revolution of Industry
  brought to you by Livescribe
  
• UI class 6.14 2: How we think and process information?
  brought to you by Livescribe
  
• UI class 6.14 3: Work on things that matter
  brought to you by Livescribe
  

ส่วนนี่คือ PDF ที่ export มาจากที่เขียนครับครับ

• ส่วนที่ 1: Changes and Revolution of Industry
• ส่วนที่ 2: How we think and process information?
• ส่วนที่ 3: Work on things that matter

หวังว่าคงเป็นประโยชน์นะครับ ฟังเล่นเพลินๆ ละกันนะครับ

แต่ว่าพอดีเร็วๆ นี้ผมได้ของเล่นใหม่มา คือ Pulse Smartpen ของ Livescribe ซึ่งทำ “Pencast” ได้่ คิดว่าเจ๋งดี เลยลองซะหน่อย ถ้าเป็นไงก็บอกด้วยนะครับ จะได้ทำต่อไปครับ

อันนี้เป็น Embedded Video (Flash) นะครับ แล้วก็ดู Full-screen ได้ (ถ้าไม่ดู คงจะอ่านไม่ออก) และจะเป็นการ trace การเขียนคู่ไปกับการพูดเรื่อยๆ ส่วนไฟล์จริง upload ไว้ที่ Livescribe.com ครับ … อ่อ และขออภัยเรื่องเสียงนะครับ ยังตะกุกตะกักอยู่บ้าง เขินๆ น่ะ (และอดนอนด้วย ฮาๆ กันไป)

ป.ล. มัน fully-interactive นะครับ คือ คลิกตรงไหน มันจะเริ่มพูดที่ตรงนั้น

ป.ล.2 อีกอย่าง ผมลายมือห่วยครับ –’

ไฟล์ PDF ตามที่เขียนครับ
80-20-and-IT-1.pdf

แต่ว่าดูนี่ซะก่อน

อ่านได้ชัดเจน สวยงามมาก … ตอนที่ผมพิมพ์ตอนแรก อึ้งไปสามสิบวินาที ก่อนจะร้อง “เฮ้ย จะบ้าเรอะ!” แบบไม่เกรงใจคนรอบข้าง .. ไม่ทราบว่าท่านไปจ้างโปรแกรมเมอร์ที่ไหน ทำในงบประมาณหลักกี่ล้านครับท่าน? ยังไม่พอนะครับ ข้างล่าง ผมยังพบสิ่งนี้

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

ผู้ถาม: อาจารย์เว็บแบบไหนที่แตกต่างๆ
ผู้ถาม: ขอคำแนะนำหน่อยนะคะ
ผู้ถาม: พอดีเพื่อนเขียนเว็บให้บริษัทน่ะ
ผม: แล้วทำไมต้องแตกต่าง?
ผู้ถาม: แต่ไม่อยากจำเจอยู่กับรูปแบบเดิมๆๆ
ผม: มาอีกล่ะ พวกทำงานเอารูปแบบเป็นหลัก จะรูปแบบเก่า รูปแบบใหม่ ถ้าไม่ได้วิเคราะห์เรื่อง function และ usage เป็นหลัก มันจะทำได้ไง
ผู้ถาม: แต่คือว่าเขาแค่ตอ้งการดีไซต์และส่วนเรือ่งนั้นเขาคงทำเองอ่ะ
ผู้ถาม: ก้อแค่ออกแบบอะ
ผม: เว็บไซต์ไม่สามารถ design หน้าตาได้ หากไม่ design function ครับ
ผม: มันเหมือนกับคุณอยากจะออกแบบ “หน้าตา” ของรถยนต์ โดยไม่กำหนดว่า รถคันนี้ จะต้องวิ่งในที่แบบไหน บรรทุกอะไร กลุ่มเป้าหมายคืออะไร
ผม: คุณอาจจะคิดว่า หน้าตารถสปอร์ตมันเท่ห์ดี
ผม: แต่รถตู้ที่ออกแบบโดยใช้ concept รถสปอร์ต มีแต่ห่วยกับห่วย
ผม: ว่างั้นเถอะ
ผม: ไม่ได้กวนตีนหรือหลบเลี่ยงในการตอบ แต่ด้วยจรรยาบรรณ ไม่สามารถออกแบบเฉพาะหน้าตาได้ครับ หากคุณเคารพวิชาชีพตัวเอง ในฐานะนักออกแบบเว็บไซต์
ผู้ถาม: แต่มานก้อเปงส่วนหนึ่งหนิ
ผม: ลำดับก่อนหลังมีผลครับ
ผม: เอางี้ ผมให้คุณเลือกชุด จะพาออกงาน คุณจะเลือกชุดอะไร? ยังไง?
ผู้ถาม: ก้อต้องดูงานก่อนค่ะ
ผม: ใช่มั้ย
ผม: คุณต้องทราบว่า “งานอะไร แขกที่จะต้องไปพบ เป็นคนระดับไหน ต้องดู look เป็นยังไง ฯลฯ” ใช่มั้ย
ผม: ก็แบบเดียวกับการออกแบบเว็บไซต์น่ะแหละครับ
ผู้ถาม: แต่งานนี้เปงวัตถุดิบทางอุตสาหกรรม
ผู้ถาม: แต่ลูกค้าบอกว่าไม่อยากให้ธุรกิจมากเกิน
ผม: ถามคนอื่นเถอะครับ
ผม: คนที่ไม่ได้มีมาตรฐานในการทำงาน และมีจรรยาบรรณในการักษามาตรฐาน มีเยอะครับ
ผู้ถาม: ค่ะ
ผม: เหมือนสร้างตึกครับ ถ้าผมเป็นนักออกแบบ สถาปนิก ผมคงไม่สามารถบอกได้ว่า “ตึกนี้สวย ตึกนี้สวย ตึกนี้แปลก เอาแบบนี้ ผสมกับแบบนี้ ผสมกับแบบนี้ ฯลฯ” โดยไม่ดูว่า “แล้วมันเป็นตึกอะไรวะ ใครจะอยู่วะ เอาไปทำอะไรวะ คนเดินเข้าออกเยอะมั้ยวะ ฯลฯ”
ผม: สุดท้าย คุณอาจจะได้ตึกที่สวย แปลก เฉี่ยว แต่ใช้งานไม่ได้จริง
ผม: ตัวอย่างนี้มีให้เห็นตามเว็บไซต์ทั่วไปครับ
ผม: สวย แปลก ดูครั้งแรกแล้ว “ว้าว!” แต่ขอโทษนะครับ ไม่สามารถใช้งานได้จริงตามที่มันควรจะใช้งานได้
ผู้ถาม: ช่ายค่ะ
ผู้ถาม: พอเข้าใจและ
ผม: ขออนุญาตเอาการสนทนานี้ ไปลง blog และสอนหนังสือนะครับ เป็นตัวอย่างแนวคิดและทัศนคติหนึ่ง ที่พบเห็นได้ตามสังคมทั่วไป
ผู้ถาม: ขอบคุงค่ะ
ผู้ถาม: แป่ว
ผู้ถาม: ตามบาายคะ
ผู้ถาม: ก้อคิดไม่ออก
ผู้ถาม: เพราะยึดติดแต่สิ่งที่แตกต่างอ่ะคะ

ตามนั้นเลยครับ อีกอย่างนะครับ ช่วยๆ กันใช้ภาษาไทยให้มันถูกๆ หน่อยดีกว่านะครับ คือ บางครั้งเราพิมพ์ผิดโดยไม่ตั้งใจนี่คงไม่เป็นไร แต่ถ้าใช้แบบ “ก้อ (ก็)” หรือ “เปง (เป็น)” หรือ “มาน (มัน)” จนกลายเป็นเรื่องปกติ ผมว่ามันก็เกินไปครับ

สิ่งที่ผมอยากจะเขียนถึง คือ Camera Usability Factor ที่เจ้าของเว็บได้เขียนไว้อย่างน่าสนใจ

“USABILITY FACTOR: A camera that you can not put down. One that you want to take with you wherever you go. A camera that will not weigh you down and break your back. A camera that will sleep next to you on your nightstand. A camera that produces exquisite image quality while making YOU look good as well as it hangs from your neck! A camera that will improve your skills and one that you just love shooting day in and day out!”

แปลเป็นไทย (แบบมีดัดๆ แปลงๆ นิดหน่อย) คือ

“USABILITY FACTOR: กล้องตัวที่คุณวางมันไม่ลง กล้องตัวที่คุณอยากจะหยิบมันติดไปด้วยไม่ว่าจะไปไหนก็ตาม กล้องตัวที่จะไม่ทำให้รู้สึกหนักหรือทำให้คอหัก กล้องตัวที่จะอยู่ที่หัวเตียง (หรือโต๊ะ หรืออะไรก็ตามที่มือคว้าได้ทันทีเมื่อตื่น) กล้องที่ให้ผลลัพธ์ที่เยี่ยมในขณะที่ทำให้คุณดูดี (หล่อ/สวย) ขึ้นที่ถือมัน ห้อยมัน หรือใช้งานมัน และที่สำคัญ เป็นกล้องที่จะทำให้คุณถ่ายรูปเก่งขึ้น และเป็นตัวที่คุณรักที่จะใช้งานมันทั้งวันทั้งคืน!”

เป็นนิยามที่ผมชอบมาก จะเห็นว่าไม่มีเรื่องเกี่ยวกับเชิงเทคนิคเลยสักกะนิด ไม่ได้มีว่า กล้องที่ดีจะต้องมี ฯลฯ (ล้าน scene mode, autofocus ร้อยแปดแบบ, ฯลฯ) ก็เลยอยากจะแชร์กันไว้ครับ

สำหรับตัวผมเอง กล้องตัวนี้เป็นตัวไหน? เมื่อก่อนผมมีกล้องอยู่สอง 2 ตัวหลักๆ นะ คือ Nikon D3 และ Leica M8 ตัวนึงเป็นกล้องที่ผมรักที่จะทำงานด้วย หวังผลได้ คุมได้ดังใจ เชื่อใจได้ที่สุด ไม่ต้องดู LCD เพื่อดูผลลัพธ์หลังจากกดชัตเตอร์เลยก็ได้ … อีกตัวหนึ่งเป็นกล้องตัวที่รักที่จะอยู่ด้วย อยากจะพาไปไหนมาไหนด้วย แต่คุณเธอพยศซะเหลือเกิน

ตอนนี้ผมคิดว่าผมเจอกล้องตัวที่ลงตัวพอดีแล้วล่ะ คือ Panasonic GF1 กับ 20mm/f1.7 (แต่นะ มันยังไม่หล่อเท่า Olympus E-P1 ฮ่าๆ)

ก็เลยลองหักดิบ ซื้อสิ่งที่น่าจะเป็นของเล่นราคาแพงมาเล่นอีกชิ้นหนึ่ง (ซึ่งจริงๆ ซื้อก่อนที่จะเปลี่ยนไปใช้ D300 นะ แต่ว่าเพิ่งจะเอามาเขียน) นั่นก็คือ Apple iPhone Bluetooth Headset ซึ่งแน่นอนว่ายังไม่มีในบ้านเรา มีแต่ของหิ้วเข้ามา ซึ่งราคามันก็จะแพงเวอร์กว่าที่ขายในต่างประเทศแน่นอน ซึ่งอันนี้เป็นเรื่องที่ต้องทำใจ(ว่ะ)

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

เรียกว่า การดีไซน์ได้ถูกออกแบบมาให้เป็นส่วนหนึ่งของชีวิตเราให้เนียนที่สุด put-on-and-forget มากกว่าจะดีไซน์ให้กลายเป็นจุดที่เราต้องสนใจหรือกังวลมากขึ้นกับชีวิต

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

คุณภาพเสียงถือว่าอยู่ในเกณฑ์ที่ดีเอาเรื่อง

การเชื่อมต่อกับ iPhone ทำได้ง่าย ไม่ต้องมา pair ด้วยการกดรหัสใดๆ ทั้งสิ้น แค่ชาร์จไฟคู่กับ iPhone ที่เราต้องการ pair ก็เป็นที่เรียบร้อย (ในกล่องจะมีแท่นชาร์จมาให้ และจะมีสายชาร์จ USB มาให้อีกเส้นด้วย)

ข้อเสียเท่าที่นึกออกตอนนี้ก็คือ มันมีให้เลือกสีเดียว คือสีดำ ถ้าอยากจะได้สีอื่นก็หมดสิทธิ์ (แต่ว่าผมชอบสีดำอยู่แล้ว ดังนั้นไม่ถือเป็นข้อเสียสำหรับผม) แล้วก็อีกอย่างก็คือ แบตฯ หมดเร็วไปหน่อย (ถ้าเทียบกับของ Sony) ผมมีความรู้สึกว่าแบตฯ มันไปเร็วมากพอควร

อ้อ ข้อดีอีกข้อก็คือ UI ของมันที่ถือว่า killer มาก นอกจากจะเรื่องการ pair ที่โคตรจะ no-brainer แล้วก็ยังบอกปริมาณแบตฯ ที่เหลือบนโทรศัพท์ (คู่กับตัวบอกปริมาณแบตฯ ของ iPhone เอง) ซึ่งสำหรับ Bluetooth headset ตัวอื่นๆ เท่าที่รู้จักนั้นจะไม่มีวิธีการบอกปริมาณแบตฯ ที่เหลืออยู่อย่างง่ายๆ ให้เราพอจะรู้ได้เลย มารู้ตัวอีกที อ้าว แบตฯ หมดแล้ว แล้วตอนชาร์จไฟ ก็จะขึ้นปริมาณแบตฯ ควบคู่ไปกับแบตฯ ของ iPhone เองด้วยเช่นกัน

มันน่าเอาไปสอนการออกแบบ product กับการออกแบบ user interface และ usability design จริงๆ ให้ตายเถอะ

ปล. สุดท้ายนะ ผมลืมหูฟังน้อยลง เพราะว่าถอดมันออกมาด้วยความรำคาญน้อยลง

1. เปิด Finder ไปที่ /System/Library/CoreServices 
2. หา Dock.app แล้ว click ขวา เลือก Show Package Contents
3. เข้าไปใน Contents/Resources
4. จากนั้นก็หาไฟล์ชื่อดังนี้ scurve-[l,m,sm,xl].png ซึ่งเป็นไฟล์สำหรับฐานรอง Dock และไฟล์ที่ขึ้นต้นด้วย separator ซึ่งเป็นไฟล์ตัวกั้นลายทางม้าลาย (มี 3 ไฟล์ ชื่อคล้ายๆ กันตามรูปแบบของตัวกั้นที่ใช้งาน สำหรับ 3D Dock แล้วก็ 2D Dock ด้านข้างและด้านล่าง)
5. จากนั้นจะทำอะไรกับไฟล์เหล่านี้ก็ตามสบายครับผม อย่าลืม backup ไว้ก่อนล่ะ
6. จากนั้นก็หาทาง restart Dock ซึ่งง่ายที่สุดก็เปิด Terminal.app แล้วก็พิมพ์ว่า killall Dock กด enter
7. Boom!

ใครที่ถนัดใช้ command line อยู่แล้ว ก็เปิด Terminal.app แล้วก็พิมพ์

cd /System/Library/CoreServices/Dock.app/Contents/Resources

แล้วก็เชิญงัดแงะตามสบายได้เลยรูปด้านล่างนี้เกิดจากการที่ผมย้ายไฟล์ทางม้าลายที่ว่านี่ไปไว้ที่อื่น

[update 1]: เพิ่งจะงัดแงะต่อ กับการแก้ขอบขาวใน 2D Dock พบว่าถ้าย้ายไฟล์ bottom[1-5].png ไปไว้ที่อื่นแทน แล้วก็ทำเป็น 2D Dock อย่างที่เขียนใน post ที่ link ไว้ข้างบน ขอบขาวมันจะหายไป…

Happy Hacking ครับ

(ไอ้กรอบขาวๆ รอบๆ นี่ไม่เกี่ยวนะ อันนั้น HTML table code กับ theme ของ blog นี้ ส่วนที่ ​Leopard เพิ่มเนี่ย เฉพาะตรงเงา)แต่ว่าก็แล้วแต่งานนะ ถ้าต้องการเรียบๆ อาจจะไม่ชอบ ต้องไปหาวิธีทำอย่างอื่น แต่ว่าสำหรับผม OK เพราะว่ามันทำให้เวลาเราเอารูปหน้าต่างลงในบทความ ในหนังสือ หรือว่าใน Web แล้วมันดู distinguishable มากขึ้นเยอะ

จากข่าวล่าสุด สำหรับ build 9A581 (ที่น่าจะเป็น Gold-master) รู้สึกว่า Dock มันจะกลายเป็น 2D เมื่อวางไว้ด้านข้างของจอ (macrumors.com) ก็ลองเทียบกันดูกับ build เก่าๆ ที่ยังเป็น 3D อยู่แล้วกัน ว่ามันดูดีกว่ากันแค่ไหน

defaults write com.apple.dock no-glass -boolean YES

จากนั้นก็ restart Dock ใหม่ (อาจจะ killall Dock ไปเลยก็ได้) แล้วก็จะได้ 2D Dock ที่ “เกือบ” เหมือนเดิม

(ภาพจาก lime.quickshareit.com)

ซึ่งจริงๆ แล้วก็ยัง high-profile อยู่ดี เทียบกับ Dock ตัวปัจจุบัน เพราะว่ามันยังมีขอบ มี texture มีอะไรมากเกินไป แต่ว่าก็ยังน่าจะดีกว่า 3D Dock ล่ะนะ