I share, therefore I am

UX Secrets at Apple

noreply@blogger.com (Apirak) — Tue, 09 Jun 2020 01:24:00 +0000

7 ปีที่แล้วได้อ่านบทความจาก

อดีตพนักงาน Apple ทำให้ความมั่นใจในแนวทางของ UX Academy มากขึ้น

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

1. Persona ก็เหมือนกับ Market Research 🙅

2. User Journey ก็ไม่ต่างจาก Workflow 🙅‍♂️

3. Empathy User ก็พอ ไม่ต้องเรียน Empathy Stakeholder 🙅‍♀️

4. Design Thinking ก็คือ Product Discovery 🙅‍♂️

5. Start with Feature ก็ได้ผลเหมือน Start with Solution 🙅

ถ้าเราวิเคราะห์ความผิดของ 5 ข้อนี้ได้ การทำงานด้าน UX ก็จะสนุกมากขึ้นครับ ลองเอามาคุยกันได้นะครับ

[Link บทความ]

https://www.fastcompany.com/3030923/4-myths-about-apple-design-from-an-ex-apple-designer

(บทความพูดถึงข้อความในรูป ไม่ได้พูดถึง 5 ข้อนี้นะครับ)

Move my blog to Medium

noreply@blogger.com (Apirak) — Sun, 10 Jan 2016 22:01:00 +0000

Thank you, Blogger. You are the best blogging platform for a long time.

Today, I will continue my journey on Medium

https://medium.com/@apirak

ทดลองเขียน Java Script สำหรับเปลี่ยน Background ตาม Flickr Interesting List

noreply@blogger.com (Apirak) — Sun, 16 Feb 2014 17:25:00 +0000

หลังจากไม่ได้ทำ Project ของตัวเองมานานมาก วันนี้ขอเริ่มนิดๆ หน่อยๆ ก่อนจะจัดโครงการใหญ่ โดยหยิบโจทย์ว่า "ไม่อยากให้หน้า Login มันน่าเบื่อ" ขึ้นมา จากนั้นก็วางแผนแก้ปัญหาโดยจะหาภาพสวยๆ จาก Flickr แล้วก็ไปพบว่า การหาภาพที่น่าสนใจบน Flickr แบบสุม แล้วจะออกมาสวยมันยากมาก

โชคดีที่ Flickr มันทำ Interesting List รายวัน ไว้ให้ http://www.flickr.com/explore/interesting/

จากนั้นก็หาทางอ่าน feed ออกมา แต่มันดันไม่ทำเป็น feed แต่ต้องใช้ API ในการเรียก เลยต้องมาอ่าน API ของ Flickr อีกหน่อย โชคดีอันที่สองคือมันมีคำสั่งสำหรับอ่าน interesting list มาให้เลย แต่โชคร้ายที่มัน return เป็น xml ไม่ใช่ json

แต่ด้วยความบังเอิญเราดันไปขอ json จากฟังก์ชั่นนั้น แล้วมันดันมีส่งกลับมา >_< ก็ดีใจไป แต่ก็เจ็บใจที่โดนหลอก ไปตามหา xml lib บน Java Script อยู่ตั้งนาน

ขั้นตอนต่อมาก็ไปหาท่าสำหรับแสดง background บนเว็บ แบบ Responsive เพราะเราไม่รู้ว่าหน้าจอผู้ใช้ใหญ่แค่ไหน

จบบน jsfiddle

ตอนแรกกะจะใช้ image-background ใน <body> แต่กลายเป็นว่าควบคุมได้ยาก สุดท้ายเลยกลายเป็น <image> แทน

ถ้าสนใจ code ลองดูที่ http://jsfiddle.net/apirak/u4dbb/2/ ครับ

แสดง Library ใน Lion

noreply@blogger.com (Apirak) — Fri, 30 Sep 2011 02:56:00 +0000

ใน Lion ทาง Apple ตัดสินใจที่จะซ่อน Folder Library ไปซะ เข้าใจว่าผู้ใช้ส่วนใหญ่จะรู้สึกดี เพราะไม่มีมันมารบกวน แต่ผู้ใช้ส่วนน้อยอย่างเรากลับมีปัญหา ต้องคอยเปิด terminal เป็นประจำ

ทางแก้ที่หนึ่งในกรณีที่ไม่ได้ใช้ Library เป็นประจำ ให้เราไปที่โปรแกรม Finder แล้วเลือก Menu Go พร้อมกดปุ่ม option หรือปุ่ม alt ค้างไว้ จะทำให้ Library โผล่ออกมา

ภาพแสดง Menu Go เมื่อกด option ค้างไว้

แต่ถ้าใครใช้ Library เป็นชีวิตประจำวัน ให้ไปที่โปรแกรม Terminal แล้วพิมพ์ดังนี้

chflags nohidden ~/Library/

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

chflags hidden ~/Library/

เท่านี้เราก็เข้าถึง Library ได้สบายใจเฉิบเหมือนเดิมแล้วครับ

แสดง branch name ใน terminal

noreply@blogger.com (Apirak) — Sat, 03 Sep 2011 11:02:00 +0000

ปัญหาหนึ่งเวลาที่เราใช้ Git คือ เราไม่แน่ใจว่าตัวเองอยู่ใน branch ไหน ปกติแล้วเราจะพึ่ง

git status หรือ git branch

พอต้องทำทุกครั้งก็จะเริ่มหน่าย วันนี้ไปเจอหน้าจอ termianl ของน้องเก้า @neokain เลยได้ script สำหรับแสดง ชื่อ branch บน terminal มา

หลังจากปรับเล็กน้อย ก็ได้ script แบบนี้ครับ

function parse_git_branch {
  git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
}

GREEN="\[\033[0;32m\]"
YELLOW="\[\033[0;33m\]"
GRAY="\[\033[1;30m\]" 

PS1="$GREEN\w$YELLOW \$(parse_git_branch)$GRAY \n\$ "

เอา script ชุดนี้ใส่ไว้ใน file ~/.bash_profile ตอนที่เปิด termianl ขึ้นมาใหม่ ก็มีจะชื่อ branch ขึ้นมาให้เราดูครับ

เปิด Sub lime text จาก terminal

noreply@blogger.com (Apirak) — Wed, 08 Jun 2011 02:15:00 +0000

เพราะคุ้นเคยกับ "mate ." และ "mvim" ทำให้เคยตัว และรู้สึกว่า Sub lime text มันควรจะทำได้สิ

หน้าตา sub lime text 2

ลองค้นดูพบวิธีง่ายๆ โดยการแก้ไฟล์ ~/.bash_profile แล้วเพิ่มบรรทัดนี้ลงไป

alias subl='open -a "Sublime Text 2"'

หลังจากนี้ถ้าต้องการเปิดไฟล์ ก็ให้สั่ง

subl application.rb

หรือต้องการเปิด Folder ปัจจุบันก็ให้สั่ง

subl .

เท่านี้ก็ได้ slt แบบ mate แล้ว

edit: แก้ comment เป็น subl ให้ตรงกับ command ใน Sublim Text 2.app

เปิด Terminal ใหม่บน Folder เดิม

noreply@blogger.com (Apirak) — Wed, 08 Jun 2011 02:09:00 +0000

บน Mac เวลาทีเปิดหน้าต่างบน Terminal ใหม่ มันจะกลับมาที่ Home ทุกครั้ง ตอนแรกๆ ก็คิดว่าพอรับได้ หลังๆ พบว่าสำหรับ Developer หรือ Admin เราต้องการเปิด Terminal ใหม่ใน Folder เดิม มากกว่า Folder Home แต่ก็ไม่รู้จะแก้ยังไง จะใช้ท่ายากก็ขี้เกียจ

ล่าสุดผมเปลี่ยนมาใช้ iTerm 2 แทน Terminal เพราะมันแบ่งหน้าจอได้เหมือน Terminator

แบ่งหน้าจอบน iterm 2

ทำให้พบว่าปัญหาที่ค้างมาสี่ห้าปี มีทางออกง่ายๆ แล้วโดยตัว Preference ของ iTerm 2 นั่นเอง

หน้า preference ของ iterm 2

ขั้นตอนมีดังนี้

เปิด Preference ของ iTerm 2
แล้วกด Profile แล้วเลือก Tab General
เลือก Reuse previous tab's directory ใน Work Directory

เสร็จแล้วครับ หลังจากนี้ไม่ว่าจะเป็นการเปิด Tab ใหม่ หรือ split หน้าจอ มันจะอยู่ใน Folder เดิมตลอด

วิธีแก้ปัญหา Photoshop สั่ง Save for web แล้วทำให้สีเพี้ยน

noreply@blogger.com (Apirak) — Thu, 19 May 2011 06:58:00 +0000

ปัญหาของสีเพี้ยนตอนที่ save รูปจาก Photoshop ไปเป็น Png หรือ Jpeg เป็นเพราะว่า เราตั้ง Profile ของสีที่จะใช้กับสีที่แสดงบนหน้าจอเป็นคนละ Profile กัน ทำให้ได้ผลดังรูป

ภาพแสดงความแตกต่างของ original กับ save for web

ภาพล่างคือภาพที่ได้จากการ save for web ส่วนภาพบนเป็นต้นฉบับ จะสังเกตุว่าภาพล่างสีซีดกว่าภาพบน ทางแก้คือต้องปรับ Color Profile โดยเข้าไปที่ Edit > Color Settings จากนั้นเลือก Monitor Color ตามรูป

ภาพแสดงการตั้งค่า Color profile

จากนั้นตอนแสดงผลให้เราปรับ Proof Setup ให้เป็น Monitor RGB โดยเลือกที่เมนูตามภาพ

ภาพแสดงการเลือก Monitor RGB

จากนั้นตอนที่เราสั่ง save for web ให้เราระวัง อย่าไปสั่ง convert to sRGB เพื่อให้แน่ใจว่าภาพที่ออกมาจะเหมือนกับที่เราออกแบบไว้

ภาพแสดงว่าไม่ต้องเลือก Convert to sRGB

ที่ค่าเริ่มต้นของ Photoshop ไม่ได้เป็น RGB แต่เป็น CMYK คาดว่าเป็นเพราะบน Mac ผู้ใช้มักจะทำงานสิ่งพิมพ์มากกว่างานที่ออกหน้าจอทำให้เราต้องมาปรับค่า view กันทุกเครื่องไป

ดูรายละเอียดเพิ่มเติมได้ที่ embedded JPEG profiles

ออกแบบ Action Bar ให้ Android Honeycomb

noreply@blogger.com (Apirak) — Thu, 19 May 2011 03:03:00 +0000

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

วันนี้ดูวีดีโอ "Designing and Implementing Android UIs for Phones and Tablets" ของงาน Google IO แล้วไปเจอ Pattern เท่ๆ ของ Honeycomb เข้า ในวีดีโอเล่าว่าเราควรใช้ Action bar ในการตอบคำถามพื้นฐานให้กับผู้ใช้ โดยเรียงเป็นลำดับว่า

ฉันอยู่ที่ไหน?
ฉันเห็นอะไรได้บ้าง?
ฉันทำอะไรได้บ้าง?

ลองมาดูหน้าตาของ Action bar ที่ Google วาง Pattern ไว้ เพื่อตอบโจทย์ข้างต้น

หน้าจอ wireframe ของ Action Bar

จะเห็นว่าทั้ง Mobile และ Tablet ต่างก็มี Action Bar ทั้งคู่ ถ้าเป็น Mobile ตัว Action bar จะถูกวางเอาไว้ทั้งด้านบน และด้านล่าง ส่วนของ Tablet จะวางไว้ด้านบนสุดวาดยาวจากซ้ายไปขวา แบบออกได้เป็นสามส่วนเพื่อตอบโจทย์ตามลำดับ

1. ฉันอยู่ที่ไหน หรือ ฉันอยู่ในโปรแกรมไหน

หน้าจอแสดงตัวอย่างตำแหน่ง Logo ของโปรแกรม

Google เลือกตอบคำถามโดยวาง Logo ของโปรแกรมไว้ที่ด้านซ้ายสุดของ Action bar โดยคาดว่าผู้ใช้น่าจะเคยชินกับการอ่านหนังสือจากซ้ายไปขวา ดังนั้นคำถามแรกจึงวางไว้ด้านซ้ายสุด

2. ฉันเห็นอะไรได้บ้าง

ภาพแสดงตัวอย่างเมนูของโปรแกรม

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

3. ฉันทำอะไรได้บ้าง

ภาพแสดงตัวอย่าง Action Button ทางด้านขวา

ส่วนสุดท้ายจะวางชิดขวาสุด ทำหน้าที่บอกว่าเราสามารถทำอะไรกับโปรแกรมนี้ได้บ้าง เช่น ส่งจดหมาย ลบจดหมาย เป็นต้น หากไม่สามารถแสดงชุดคำสั่งทั้งหมดได้ใน Action bar ทาง Google ได้กำหนดให้ใช้ Icon รูปเมนู วางไว้ด้านขวาสุดของ icon ทั้งหมด

พอได้เห็นแบบนี้ก็ทำให้คาดหวังได้ว่าผู้ใช้จะสามารถใช้งานโปรแกรมบน Android Honeycomb ได้ง่ายขึ้นเพราะโปรแกรมดีๆ น่าจะทำตาม Guide line ของ Platform

ถ้ามาดู iOS จะพบว่าไม่มี concept ของ Action Bar แบบ Android แต่จะมีตัว Navigation bar ให้ใช้ ซึ่งวิธีการใช้งานก็ไม่ได้กำหนดไว้อย่างชัดเจนใน Human Interface Guideline แต่ถ้าสังเกตุก็จะพบแนวทางการใช้คร่าวๆ

ภาพแสดง Navigation bar ของ iOS

ด้าน ซ้ายมือจะใช้วางคำสั่งในการไปยังเนื้อหาที่ต้องการ เทียบได้กับ View Detail ของ Android ตรงกลางจะเอาไว้บอกว่าเราอยู่ที่ไหน ส่วนด้านซ้ายมือจะเหมือนกัน คือเอาไว้ใส่คำสั่งที่สามารถทำกับเนื้อหาที่เลือกอยู่ ส่วนการตอบคำถามว่าเราอยู่ในโปรแกรมไหนจะไม่มีใน iOS ส่วนเหตุผลลองเดากันดูนะครับ

โดยส่วนตัวผมชอบแนวคิดของ Pattern นี้บน Android นะครับ แต่ยังติดอยู่สองที่

แนวคิดนี้บน Mobile อาจจะไม่เหมาะ เพราะพื้นที่แสดงผลบนมือถือมีน้อยมาก การมากำหนดตำแหน่งแบบนี้ทำให้หลายคนปรับวิธีประหยัดพื้นที่ได้ลำบาก เช่นการที่ต้องแสดง Logo ไว้ด้านบนซ้ายเสมอ จะไม่คุ้มเท่าไหรในหลายโปรแกรม หรือการที่ให้ชุดคำสั่งที่เหลือขึ้นมาเป็น popup ด้านล่าง ทำให้ไม่สามารถใส่ คำสั่งที่เหลือได้มากนัก ถ้าขึ้นมาเป็น Table View น่าจะง่ายกว่า
แนวคิดนี้ยังกำกวมอยู่ เช่น ปุ่ม search ของ map ถูกตัดสินใจให้อยู่ที่ View Detail ส่วน search ของ youtube จะอยู่ที่ Action button เป็นต้น ทาง Google อาจจะต้องสร้างโปรแกรมตัวอย่างที่ล้อตามแนวคิดของตัวเองมากกว่านี้ เพื่อให้นักพัฒนาสามารถเข้าใจ แนะนำมาประยุกต์ใช้กับโปรแกรมของตัวเองได้ง่ายขึ้น

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

Land Meter

noreply@blogger.com (Apirak) — Thu, 16 Dec 2010 02:40:00 +0000

Price: free

Description
Land Meter is simple car pitching and rolling monitor for your iPad

Screen short

iPad version

iPhone version

Feature

Monitor Pitching and Rolling for your car
Show Pitching and Rolling degree
Warning by color when danger
Reset button for automatic calibration

Waiting feature

Warning by sound
Map
Recoder
Support iPhone

Note
iphone version is waiting for approve ;) It's universal application. You can use one for two device.

Any suggestion or comment is welcome

Working on new iPad applicaiton

noreply@blogger.com (Apirak) — Wed, 08 Dec 2010 13:45:00 +0000

กำลังทดลองทำโปรแกรม Land Meter สำหรับคนที่ขับรถวิบาก

ความยากอยู่ตรงที่ iPad มันไม่ได้ส่งค่าองศามาให้เราตรงๆ แต่ให้มาเป็นค่าที่แต่ละแกนของ iPhone ถูกแรงโน้มถ่วงกระทำ

ถ้าเราเอียง iPhone แกน X, Y, Z จะถูกแรงโน้มถ่วงกระทำไม่เท่ากัน เมื่อเกิดความเปลี่ยนแปลงเจ้า Accelerometer จะส่งค่าของทั้งสามแกนมาให้ เราก็จับเข้า atan2(y,x) สำหรับหา degree รูปหลังรถ และ atan2(x,z) สำหรับรูปด้านข้าง เมื่อได้ค่า degree เราก็เอามาแปลงเป็นองศาด้วย

radians = degrees * Pi / 180;

เมื่อได้องศา เราก็เอามาใช้หมุนรูปรถทั้งสองแกนอีกทีนึง เป็นอันเสร็จ สำหรับโปรแกรม Land Meter ตอนนี้ส่งขึ้น App Store ไปแล้วรอการอนุมัติอยู่ คาดว่าวันอังคารหน้า น่าจะได้ลอง Download กัน

ตัวทำมาทดลอง iPad ก่อนสำหรับ version iPhone น่าจะตามมาในอีกหนึ่งอาทิตย์เพราะต้องรอให้ Version นี้อนุมัติก่อน ถึงจะส่งอีก Version ขึ้นไปได้

Paper Calculator

noreply@blogger.com (Apirak) — Tue, 23 Nov 2010 09:53:00 +0000

Price: free

Description
Paper Calculator is simple calculator that show and share what you calculated.

Screen short

General interface

Send result to mail

Zoom your result

Screencast

Feature

Copy: You can copy calculated result to clipboard and paste it any where you want.
Email: It's short cut to copy result and open your send mail page.
Zoom: You can show calculated result to friend that sit on another side of table.

Waiting feature

Support Facebook & Twitter
Change themes
Sound enable
Delete Taskbar and Title from Zoom screen
Add classic calculated style

Note
~~Now available version on App Store is 1.0 and 1.1 is waiting for Apple to approve.~~ Now version 1.1 is available on App Store. Version 1.1 will fix bug of 1.0 and enable some feature.
Version 1.0 is available for iOS 4.2 only but version 1.1 will support from iOS 3.0 to current version.

Any suggestion or comment is welcome

Flash killer จากค่าย Sencha

noreply@blogger.com (Apirak) — Wed, 27 Oct 2010 01:29:00 +0000

สิ่งที่ทำให้ Flash ได้รับความนิยมอย่างสูง และ ยืนอย่างมั่นคงในกระแส HTML5 คงไม่ได้เป็นเพราะ Action Script หรือ Flash Player เท่านั้น เพราะทั้งสองอย่างมีตัวแทนที่สมน้ำสมเนื้อเกิดขึ้นมาแล้ว เช่น Java Script ที่เร็วขึ้น, SVG และ HTML5 เป็นต้น ผมคิดว่าที่ที่ Flash ยังได้รับความนิยมอยู่เป็นเพราะ Flash Developer ที่แม้แต่คนเขียนโปรแกรมไม่เป็นก็สามารถสร้างงาน Animation ออกมาได้ง่ายๆ

เพื่อเติมเต็มช่องว่างในการแข่งขัน วันนี้เริ่มมีตัวแทน Flash Developer ให้เห็นแล้วครับ

หน้าตา Sencha Animator

โปรแกรม Sencha Animator พัฒนาบนพื้นฐานของ HTML5, CSS3 และ Java Script โดยเบื้องต้นยังทำอะไรอลังการแบบ Flash ไม่ได้ ดังนั้นจุดขายจึงเป็นโปรแกรมสำหรับสร้างโฆษณาเป็นหลัก ซึ่งตอบโจทย์มากกว่า Flash เพราะ HTML5, CSS3 สามารถแสดงผลบน iPhone, iPad, MBA และ WP7 ได้ทันทีโดยไม่ต้องลงโปรแกรมเพิ่ม

ดูตัวอย่างโฆษณาได้ที่ animator demo

เท่าที่ทดลองใช้ผมรู้สึกเหมือนกลับไปเขียน Flash ตัวแรกๆ Sencha Animator คงต้องพัฒนาอีกนาน โดยเฉพาะเรื่องความเข้ากันได้ของแต่ละ Browser ปัจจุบันยังรองรับเฉพาะ Webkit ครับ แต่ทีมงานสัญญาว่าจะพัฒนาให้รองรับกับ Engine ตัวอื่นต่อไป ผมคาดว่าที่ให้รองรับ Webkit ก่อน เพราะจุดขายหลักคือ Mobile แต่ก็ทิ้งตัวอื่นไม่ได้ถ้าอยากเข้ามาแทน Flash ในตลาดโฆษณา ส่วนตลาดเกมส์คงต้องรอไปก่อน

ที่มา sencha.com

ปล. สำหรับค่าย SVG คงตั้งความหวังไว้กับ Inkscape ซึ่งพูดถึงเรื่อง Animation มานานมากแล้ว แต่ยังไม่มีหน้าตาให้เห็นซักที

อ่าน Document EXTJS 3.2 แบบ Offline

noreply@blogger.com (Apirak) — Tue, 07 Sep 2010 02:43:00 +0000

เนื่องจาก net บ้านเราไม่เสถียรเอามากๆ การอ่าน API Document แบบ Offline เลยเป็นทางเลือกที่ดีกว่า แต่เจ้า API Document ของ EXTJS ดันมีแต่แบบ Online วันนี้มาเจอตัว Offline เข้า เลยมาจดเอาไว้ก่อน

http://www.diloc.de/blog/extdocsuite/

ทำงานบน Adobe Air โดยโปรแกรมจะมี API ตัวล่าสุดเพราะมีระบบ update ให้ แถมมี ExtUX พ่วงมาด้วย ไม่ได้ออกไปเปิดอีกตัว ปัญหาใหญ่มากๆ คือ search เป็นแบบ online :'(

เอามาจากเว็บ http://www.diloc.de

ข้อมูลตัดสินใจเลือกตั้ง สก สข เขตทวีวัฒนา จากคนพุทธมณฑลสาย 3

noreply@blogger.com (Apirak) — Sun, 22 Aug 2010 01:04:00 +0000

ปีนี้ได้เลือกตั้ง สก สข ในเขตทวีวัฒนาเป็นครั้งแรก เลยต้องศึกษาผู้สมัครเอาไว้หน่อย

ในปีนี้มีผู้สมัครสองคน
1. พ.ต.ท.หญิง อรุณศรี โสขุมา : ใน internet ไม่มีการพูดถึงผลงานหรือความสามารถ
2. นายสุไหง แสวงสุข : มีผลงานอยู่ในเว็บบ้านมือสอง วรสารหยดน้ำ

พัฒนาครองทวีวัฒนา
สวนสาธารณะ สาย 2
เคยเป็นสมาชิดสภากรุงเทพ ดูเรื่องขนส่งและการระบายน้ำ
เคยเสนอเรื่องแก้ปัญหาน้ำท่วมอย่างยั่งยืน
อยากวางมือไปทำไร่ปลูกผัก ให้ลูกทำงานแทน

ผลการเลือกตั้งที่ผ่านมา 2553
นายสุไหง แสวงสุข พรรคประชาธิปัตย์ 13,191 คะแนน
พ.ต.ท.หญิงอรุณศรี โสขุมา พรรคไทยรักไทย 5,815 คะแนน

วิเคราะห์จากเว็บ bloggang
ส.ก.เก่า 2 สมัย อย่าง สุไหง แสวงสุข แห่งประชาธิปัตย์ ต้องเจอกับ ตำรวจหญิง พ.ต.ท.หญิงอรุณศรี โสขุมา จากไทยรักไทย แต่ความที่เขตนี้ชาวบ้านอยากเห็นรถไฟฟ้ากทม. ที่จะต่อขยายมาถึงเพชรเกษม ทำให้คะแนนเสียงของ ส.ก.สุไหง มีภาษีดีกว่า

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

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

ออกแบบ alert box

noreply@blogger.com (Apirak) — Fri, 09 Jul 2010 07:41:00 +0000

alert box เป็นทางออกของนักออกแบบ ในการซ่อนความซับซ้อนของโปรแกรม แล้วแสดงออกมาเฉพาะเวลาที่ผู้ใช้ต้องตัดสินใจ แต่หลายครั้ง alert box ถูกนำมาใช้โดยไม่ผ่านการคิดให้รอบด้าน แทนที่มันจะทำให้ผู้ใช้รู้สึกดีกับโปรแกรม กับทำให้เกิดผลตรงกันข้าม

ยกตัวอย่างเช่น alert box ของโปรแกรม Thunderbird

รูปแสดง alert box ตอนกด offline

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

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

เช่นในกรณีของผม เมื่อผมทราบว่ามีการ download อยู่ค้างอยู่ผมจะไม่สั่ง offline เพื่อให้ web ทำงานเร็วขึ้น แต่จะตัดสินใจไปเล่นกับหมาแทนแล้วเปิดคอมพิวเตอร์ทิ้งไว้

ดังนั้นเราควรให้โอกาสผู้ใช้ในการยกเลิกสิ่งที่กำลังทำอยู่ด้วย

สำหรับการออกแบบในกรณีของ alert box กล่องนี้ อาจจะใช้วิธีเพิ่มปุ่ม cancel เข้าไป เช่น

รูปแสดงการใส่ cancel เข้าไปใน alert box

ดูตัวอย่างจาก dialog ของโปรแกรม textedit

มี alert box เกิดขึ้นเมื่อปิดโปรแกรมโดยไม่ได้ save

ปัญหาต่อมาคือ Cancel มันไม่เข้ากับ Yes, No เพราะเป็นตัวเดียวที่เป็นกริยา และที่สำคัญคือคำว่า Yes, No เป็นคำที่ต้องอ่านคำถามให้ดี ไม่เช่นนั้นจะตอบผิด ลองนึกถึงคำถามที่อยู่ในรูปปฏิเสธ ผู้ใช้ต้องใช้สมองในการคิดว่า Yes แปลว่าทำหรือไม่ทำ เช่น

"คุณตัดสินใจไม่บันทึกใช่หรือไม่" แล้วให้เลือก "ใช่" หรือ "ไม่ใช่" เราต้องใช้ความคิดนิดหน่อย

แต่ถ้าเป็น

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

ดังนั้นเราลองเปลี่ยนปุ่มเป็นกริยาดู

เปลี่ยนปุ่มเป็นคำกริยา

ตาม HIG ของ Apple บอกว่าข้อความใน alert box ควรมีให้น้อยที่สุดเท่าที่จะทำได้เพราะกลัวว่าคนจะไม่อ่าน ผมมีหลักการง่ายๆ ที่เคยไปฟังจาก WWDC 2005 เค้าบอกว่าสิ่งที่ต้องมีใน alert box คือ

"ปัญหาหรือสิ่งที่เกิดขึ้น + ผลลัพทธ์ของปัญหา + ทางแก้ปัญหา"

ถ้ามีสองบรรทัด บรรทัดแรกให้เป็นข้อความที่ต้องการบอก (Message text) ส่วนบรรทัดที่สองเป็นคำขยาย (Informative text) หลังจากอ่าน HIG แล้วผมลองเปลี่ยนตาม HIG ของ Apple ดู

รูปหลังจากเปลี่ยนคำถาม

อันดับแรกผมตัดข้อความ "Download Message" ซึ่งไม่จำเป็นออก สองคือเพิ่มคำขยายผลของคำถามเข้าไป และ สุดท้ายคือเพิ่ม icon ของโปรแกรมเข้าไปใน icon ของ alert ด้วย ก็ได้แต่หวังว่า version ต่อไปของ Thunderbird จะเพิ่ม Cancel เข้าไป :)

สำหรับ OSX จะประมาณนี้ หากสนใจเรื่องการเขียนข้อความใน Dialog ให้ลองอ่านใน HIG ของ Apple เพิ่มเติม แต่สำหรับ OS อื่นอาจจะมีวิธีการแบบของตัวเอง เราก็ควรจะเขียนโปรแกรมตามประสบการณ์ของ OS นั้นๆ ครับ ผู้ใช้จะได้ไม่รู้สึกแปลก

แนะนำให้ลองอ่าน HIG ของ Gnome, KDE และ Windows ดูครับ

เพิ่มเติม 1

อีกหนึ่งตัวอย่างจาก chrome ที่ใช้วิธีใส่ข้อความยาวๆ บนปุ่ม และลดเหลือทางเลือกแค่สองทาง

ติดตั้ง Parkplace Amazon S3 Clone บน Snow Leopard

noreply@blogger.com (Apirak) — Fri, 21 May 2010 04:50:00 +0000

มีปัญหากับการติดตั้ง Parkplace บน Snow Leopard นิดหน่อย แต่ไหนๆ ติดตั้งได้แล้ว ขอจดขั้นตอนไว้ที่นี่ละกัน

อันดับแรกให้ทำตามที่ Readme บอก

$ gem install camping mongrel --include-dependencies
$ gem install sendfile

จากนั้นติดตั้ง SQLite3 ruby plugin (ตัว SQLite ไม่ต้องติดตั้งเพราะ Snow leopard มีอยู่แล้ว)

$ gem install sqlite3-ruby

หลังจากทดลอง run bin/parkplace มันจะถามหา activesupport 2.2.0 ถ้าเราไม่มีก็ให้ลงซะ

$ gem install rails -s http://gems.rubyonrails.org -v 2.2.0

ผมลง rails ทั้งยวงเลยเผื่อมันอยากได้อย่างอื่นด้วย เช่น activerecord จะได้มีพร้อม มาดูใน code ตอนหลังพบว่ามันต้องการสองตัวนี้

gem 'activesupport', '~> 2.2.0'

gem 'activerecord', '~> 2.2.0'

หลังจากนั้นมันจะมีปัญหากับการเชื่อมต่อ SQLite อีก แต่ไม่ได้เป็นเพราะ activerecord ครับ แต่เป็นเพราะ package camping มันทันสมัยไปหน่อย ให้ลบ version 2.0 ออก แล้วให้ลง 1.5.180 แทน

$ gem uninstall camping
$ gem install camping -v 1.5.180

หลังจากนั้นสามารถเปิด parkplace ได้เลย

$ ./bin/parkplace

เขียนเกมส์บน iPhone ด้วยภาษา Lua

noreply@blogger.com (Apirak) — Tue, 18 May 2010 16:54:00 +0000

หลังจากได้ข่าวว่าสามารถเขียนเกมส์บน iPhone ได้ด้วย script language ก็รีบกระโดดเข้าไปอ่านทันทีครับ

ภาษาที่เค้าใช้คือภาษา Lua ซึ่งเป็นภาษาที่ใช้ในการเขียนเกมส์อยู่แล้ว อย่างเช่น Monkey Island หรือ Grim fandango หรือแม้แต่ Civilization V ก็ใช้ภาษานี้ ดังนั้นมันเลยเหมาะเอามากๆ สำหรับการนำมาเขียนเกมส์ และยิ่งเหมาะมากที่จะเขียนเกมส์บน iPhone เพราะการเขียนด้วย Objective-C เป็นงานที่ยากขึ้นมาทันทีเมื่อเทียบกับ Corona-Lua

(ที่เรียกว่า Corona-Lua เพราะว่ามันขี่อยู่บน Library ของ Corona ครับ ยังมีคนอื่นที่ใช้ Lua เขียนโปรแกรมบน iPhone อีกแต่เป็น Library คนละชุดกัน)

การทดลองเล่นก็ไม่ยาก ให้เอา xcode มาลงก่อน จากนั้น download corona จากเว็บไซต์ เมื่อแตก dmg ดูใน folder จะเห็น folder ชื่อ example อยู่ด้านใน ในนั้นจะมีตัวอย่างง่ายๆ ไว้ให้ทดลอง ให้เราเอา simulator ที่อยู่ใน folder นอกสุดเปิดดู ไม่ต้องห่วงเรื่อง compile หากทดลองแก้ไข code ก็กด refresh (command+r) ได้เลย

จากการทดลองเขียนโปรแกรม "ยานร่อนลงดวงจันทร์" เขียน code ไม่ถึง 100 บรรทัด เจอของง่ายแบบนี้แค่คิดว่าต้องเขียน Objective-C ก็เริ่มท้อซะแล้ว

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

ทาง Anscamobile เค้ายืนยันว่าสามารถอยู่บน app-store ได้แน่นอน เพราะสุดท้ายแล้ว code ถูก compile เป็น native ไม่ได้ทำงานอยู่บน virtual machine และเค้าบอกว่า version สำหรับพัฒนาบน Linux และ Windows กำลังจะออกมาเร็วๆ นี้

ที่สำคัญที่สุดเราสามารถเขียนโปรแกรมทีเดียว ทำงานได้ทั้ง iPhone, iPad, Android เลยครับ น่าเสียดายไม่มี BB

Reference

- เกมส์ที่เขียนด้วย Lua

- Official site ของ Corona

ข้อเสียของ Cloud Computing

noreply@blogger.com (Apirak) — Tue, 27 Apr 2010 22:59:00 +0000

"Dark side of the cloud" แม้ว่าปัจจุบันเราอาจจะยอมรับข้อเสียเหล่านั้นได้ไปแล้ว แต่สำหรับภาคธุรกิจ มันคือสิ่งที่เราต้องคำนึงถึงและหาทางรับมือไว้ล่วงหน้า

ทุกอย่างขึ้นกับ Internet ทั้งโปรแกรมและเอกสาร ทุอย่างอยู่บน cloud หมดนะครับ แค่ Internet ช้าก็ไม่ต้องทำงานกันแล้ว
Feature น้อย เมื่อเทียบกับ Desktop Application เพราะเครื่องมือในการพัฒนาบน Web เมื่อเทียบกับ Desktop แล้วยังถือว่าแย่มาก (ด้วยข้อจำกัดของ Browser) และจะยังไม่ดีขึ้นจนกว่าจะถึงยุคของ HTML5 (ต้องมี Framework ที่ทำให้เราใช้ HTML5 ได้เต็มที่)
Security เรื่องความปลอดภัยเป็นทั้งจุดออนและจุดเข็งในเวลาเดียวกัน เราต้องยอมรับความจริงว่า ข้อมูลของเราฝากไว้กับคนอื่น ต้องแน่ใจว่าคนนั้นไว้ใจได้ถึงจะเลือกใช้ cloud ของเค้า
ที่อยู่ของ Server เนื่องจากเป็น cloud เราเลยบอกที่อยู่แน่ๆ ของข้อมูลไม่ได้ ยิ่งเป็นบริการที่มี server อยู่ในหลายประเทศ การจะบอกว่าข้อมูลอยู่ในประเทศไหนก็ทำได้ยากขึ้น ทำให้เกิดข้อจำกัดขึ้นทันที เพราะรัฐบาลอย่างประเทศไทย หรือแคนาดา ห้ามไม่ให้เก็บข้อมูลของรัฐไว้ในต่างประเทศ เพราะถ้าข้อมูลอยู่ใน server ของสหรัฐ ด้วยกฏหมายของเค้า จะทำให้ US Government สามารถเข้าไปดูข้อมูลได้ทันที
ย้ายผู้ให้บริการได้ยาก ปัจจุบัน ยังไม่มีมาตรฐานในาการทำ cloud หากเราต้องการย้ายไปใช้ cloud ของที่อื่น บางทีอาจจะต้องเขียนโปรแกรมขึ้นมาใหม่เลยทีเดียว

Cloud computing ไม่ได้ทำแค่เรื่อง computing อย่างเดียว ไว้ตอนหน้าเรามาคุยว่าเค้าแบ่งมันเป็นกี่ประเภท

ทำไมต้อง Cloud computing

noreply@blogger.com (Apirak) — Tue, 27 Apr 2010 05:07:00 +0000

"Cloud Computer" เป็นคำคุ้นหูสำหรับนักพัฒนาในโลก Online ซึ่งใช้เรียกบริการที่เน้นแก้ปัญหาเรื่องปริมาณเป็นหลัก ทั้งปริมาณของผู้ใช้ ปริมาณของข้อมูล หรือปริมาณของการประมวลผล โดยผู้ใช้บริการสามารถเลือกได้ว่าวินาทีนี้ต้องการใช้งานเท่าใด และสิ่งที่พิสูจน์ความเป็น Cloud คือเมื่อผู้ใช้ต้องการใช้งานมากขึ้น หรือน้อยลงต้องสามารถทำได้ทันทีโดยไม่ต้องรอการพัฒนาเพิ่มเติม และผู้ใช้ไม่ต้องคำนึงถึงปัญหาทางเทคนิค และปัญหาเรื่องการบำรุงรักษา

ทำไมต้องใช้ Cloud

สำหรับลูกค้า

ราคาถูก บริการที่อยู่บน cloud ควรถูกมากๆ ยกตัวอย่างเช่น gmail เป็นบริการฟรี ในขณะที่เก็บข้อมูลได้มากกว่า 7G หรือ Google App Premier Edition ราคาเพียง 50$ ต่อคน ต่อปี ซึ่งถือว่าถูกมากเมื่อเทียบกับ การซื้อ และดูแล Microsoft Exchange ในระดับ Enterprise
ใช้ง่าย เพราะจ่ายอย่างเดียวครับ ไม่ต้องติดตั้งระบบ ไม่ต้องจ้างผู้เชียวชาญมาดูแล
ใช้ได้หลาย platform มีแค่ Net book มือถือ หรือเข้าไปใช้ Net cafe ก็สามารถใช้บริการได้แล้วโดยไม่จำกัดว่าใช้ OS อะไร ที่สำคัญบริษัทไม่ต้องเสียเงินซื้อเครื่องใหม่ หรือเครื่องแพงๆ มาใช้ด้วย
ไม่จำกัดสถานที่ เนื่องจาก cloud ไม่ได้เก็บข้อมูลไว้ที่ใดที่หนึ่ง แต่ข้อมูลจะลอยอยู่ตรงกลาง ดังนั้นผู้ใช้สามารถเข้าถึงข้อมูลเดี๋ยวกันได้จากหลายที่
จ่ายเท่าที่ใช้ เพราะไม่ต้องลงทุนอุปกรณ์ไปก่อน จึงไม่มีค่าใช้จ่ายเริ่มต้น เลือกใช้เมื่อไหรก็ได้เหมือนการเช่า และอาจจะดีกว่าเพราะบางครั้งไม่ได้เช่าตามเวลา แต่เช่าตามการใช้งานจริง
ทำงานร่วมกันง่าย เพราะ Internet เปิดอยู่ตลอดเวลา และเอกสารไม่ได้อยู่ในเครื่องของคนใดคนหนึ่งทุกคนเข้าถึงได้พร้อมๆ กัน

สำหรับผู้ประกอบการ

ราคาถูก ในทางธุรกิจ การไม่ต้องจ่ายเงินลงทุนไปก่อนเป็นเรื่องที่ดีมากๆ เพราะทำให้สามารถตั้งใจ ใส่ใจ กับธุรกิจของตนเองได้ทันที (เวลาเป็นต้นทุนที่สูงสุด)
เพิ่มโอกาศทางธุรกิจ ตัว cloud เองไม่ใช่ธุรกิจใหม่ แต่ cloud เปิดโอกาสให้เราสามารถสร้างบริการที่สู้กับบริษัทใหญ่ๆ ได้ โดยไม่ต้องลงทุน หรือลงแรงศึกษา สร้างระบบพื้นฐาน
ปริมาณ เป็นปัญหาของธุรกิจเสมอ ทั้งตอนเริ่มต้นที่ขนาดเล็กเกิดไปลงทุนไม่คุ้ม หรือตอนที่ขนาดใหญ่ขึ้นจนขยายไม่ออก ตัว Cloud แก้ปัญหานี้ไปแล้ว
อัตโนมัติ และปลอดภัย ค่าระบบอัตโนมัติ และค่าความปลอดภัยเป็นของแพงครับ แต่สองสิ่งนี้จะได้มาพร้อมกับ Cloud เพราะ Cloud เป็นของขายดังนั้นมันจึงต้องมี API ให้เราสร้างระบบอัตโนมัติได้

Cloud ไม่ได้มีแต่ข้อดี มันมีข้อเสียที่ร้ายกาจอยู่ด้วย แต่ตอนนี้ยาวแล้วไว้เขียนต่อตอนหน้าละกัน

Apple Land vs Google Empire

noreply@blogger.com (Apirak) — Thu, 25 Mar 2010 10:42:00 +0000

ผมพยายามหาทางใช้ของดีของ Apple และใช้บริการฟรีๆ ของ Google มานาน จนตอนนี้เริ่มไม่ไหวแล้วครับ คงต้องเลือกทางใดทางหนึ่งซะที

Picasa เทียบ iPhoto ไม่ได้เลยครับ ทั้งในด้าน UX Map และ Sync โดยเฉพาะภาษาไทยของ Picasa บนเครื่อง Mac เรียกว่าอ่านไม่ได้เลยทีเดียว ส่วนบริการ Online storage ของ dot mac ก็สวยกว่า picasaweb มากๆ จะมีดีกว่าก็คือตัว gmail ที่ทำให้สามารถทิ้ง mail.app ได้เลย

สำหรับ Mobile device เจ้า iPhone มี Usability ที่เข้มข้นกว่า Android ทั้ง Application ของ Apple เอง และของ Developer ทั่วไป ผมเทียบกับ HTC Magic (Sense) ที่ใช้อยู่ ดังนั้นแม้ว่าจะต้องจ่ายแพงกว่าเท่าตัว ถ้ามีเงินผมคิดว่าคุ้มครับ

แต่เมื่อไม่ค่อยมีตัง ดังนั้นผมจึงเลือก Google ครับ

ความเป็นมืออาชีพ ของคนกวาดพื้น

noreply@blogger.com (Apirak) — Wed, 24 Mar 2010 01:19:00 +0000

ความเป็นมืออาชีพไม่ได้ถูกจำกัดไว้ที่ความยากของงาน แต่ถูกจำกัดด้วยตัวเราเองมากกว่า ถ้าเราเต็มที่กับงาน รับผิดชอบกับงาน เราย่อมเป็นมืออาชีพหรือที่เรียกว่า Professional ได้

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

วันนี้ไม่ต้องไปยกตัวอย่างไกลๆ ผมนั่งรถมอเตอร์ไซต์เข้าซอย ไปเจอ innovation ของคุณป้ากวาดถนน

ด้านซ้ายเป็นที่ตักผงทั่วไป ด้านขวาเป็นที่ตักผงที่ดัดแปลงแล้ว

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

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

ขอคารวะคุณป้า ท่านเป็น Professional ด้านการกวาดพื้นถนนจริงๆ

ที่มา ซอย ถนนสุขุมวิทย์ 26 (7:30)

ปล. รูปวาดด้วยโปรแกรม omnigraffle ครับ

Dynamic text with style

noreply@blogger.com (Apirak) — Sun, 21 Mar 2010 09:48:00 +0000

วันก่อนพยายาม Hack งานออกแบบของเว็บ getdash.com ไปพบว่าเค้าใส่ effect แปลกๆ เข้าไปในตัวอักษร แถม font ยังไม่ใช่ font มาตรฐาน พอดูด้วย firebug ก็พบว่าเค้าใช้ cufon สำหรับสร้างตัวอักษร

ทดลองใช้ font little star จากเว็บ f0nt.com

บรรทัดแรกทดลองใส่เงาสีขาวบนตัวอักษร บรรทัดที่สองทดลองเรื่องสี และบรรทัดที่สามทดสอบภาษาไทย ส่วนเรื่องสระลอยทดสอบแล้วแต่ไม่ได้ capture มาให้ดู (ทดสอบสระลอย)

ทดลองกับ font supermaket จากเว็บ f0nt.com

การใช้งาน cufon เริ่มจากแปลง font ของเราเป็นไฟล์ java script ก่อน (*.font.js) ก่อน โดยเข้าไปที่เว็บ cufon.shoqolate.com เลือก upload ไฟล์ font ของเรา แล้วเลือก option ตามที่เราต้องการ

ขั้นที่สอง สั่งให้ script cufon แปลงข้อความของเราให้เป็น font ตามที่สร้างเอาไว้

  <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Little_Star_0506_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
Cufon.replace('h2',{hover:true, textShadow:'0 1px 1px #FFF'});
</script>
<style type="text/css">
   a {color:#990907; }
   a:hover { color:red; }
</style>
  </head>
  <body style="background-color:#EEEEEE;">
   <h2>
   This text will be shown in
   <a href="#">Little star</a>.
   </h2>
   <h1 style="color:#999999">This text will be shown in Little Star.</h1>
   <h1>Test thai ทดสอบภาษาไทย ที่ เพี้ยน cufon</h1>
  </body>

cufon ทำออกมาได้ดีมากๆ แม้แต่การแปลงสีด้วย hover ก็สามารถทำได้ด้วย ถ้าสนใจรายละเอียดสามารถเข้าไปดูคู่มือได้ที่ cufon บน github

Principle 5 ข้อ สำหรับนักออกแบบ

noreply@blogger.com (Apirak) — Thu, 11 Mar 2010 15:08:00 +0000

มีคนเขียน Principle ของ User eXperience อยู่หลายบทความแต่ผมคิดว่า Principle ที่มีเกิน 5 ข้อ เมื่อใช้งานจริงคงไม่ไหว วันนี้ผมเจอแบบ 5 ข้อแล้ว

1. เข้าใจที่มาที่ไปของปัญหาก่อนจะเริ่มแก้

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

2. อย่าทำร้ายใคร

หน้าที่ของเราคือปกป้องผู้ใช้ ควรสร้างประสบการณ์ที่ดีให้เค้าดีกว่า

3. ทำทุกอย่างให้เรียบง่าย และเป็นธรรมชาติ

เป้าหมายของการออกแบบคือต้องใช้งานง่าย เรียนรู้ง่าย ประยุกต์ใช้ง่าย อย่าพยายามเปลี่ยนธรรมชาติของผู้ใช้ แต่เน้นให้ชีวิตตามปกติของเค้าง่ายขึ้น ซึ่งทำให้ผู้ใช้รู้สึกมีความสุขมากขึ้นแน่นอน

**ถึงจะรู้ว่าเปลี่ยนแล้วดีกว่า แต่อย่าลืมกฏข้อ 2

4. จำไว้ว่าผู้ใช้ไม่เหมือนเรา

สิ่งที่เราเข้าใจได้ง่าย อาจไม่ง่ายสำหรับคนอื่น กระบวนความคิดถูกหล่อหลอมมานานจาก พันธุกรรม การศึกษา วัฒนธรรม ศาสนา สภาพแวดล้อม และประสบการณ์ ซึ่งไม่เหมือนเราแน่นอน ดังนั้นห้ามคิดว่าตนเองเข้าใจผู้ใช้

5. เอาใจเขามาใส่ใจเรา

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

Inspire by uxmag.com

Update Omnigraffle Stencil for web designer

noreply@blogger.com (Apirak) — Sat, 20 Feb 2010 12:37:00 +0000

ปัญหาในการคุยเรื่อง User interface กับลูกค้า หรือแม้แต่กับทีมงาน คือเราบอกเค้าไม่ได้ว่าส่วนไหนเป็นส่วนของโครงสร้าง ส่วนไหนเป็นส่วนที่ได้รับการแต่งแล้ว ยิ่งเราวาดสวยยิ่งทำให้เข้าใจผิดได้มาก และสร้างความสับสนในการรับฟังคำแนะนำเสมอ

ทางออกคือ การวาดต้นแบบให้เป็นแค่ภาพร่าง แม้ว่าเราจะใช้คอมพิวเตอร์ในการออกแบบ ก็สามารถวาดให้เหมือนภาพร่างได้ สำหรับกรณีของผม ผมสร้าง Stencil ที่เป็นภาพร่างขึ้นมาใช้กับโปรแกรม Omnigraffle

วันนี้ต้องออกแบบ web ใหม่ จึงเอา Stencil เก่ามาปัดฝุ่น และจัดกลุ่มให้ใช้งานง่ายขึ้น ใครต้องทำงานออกแบบ web เหมือนกัน สามารถ Download ได้จาก http://graffletopia.com/stencils/459

ตัวอย่างการใช้งานลองดูใน video นะครับ

สำหรับคนที่ออกแบบ Application ให้ลองดู Stencil นี้ครับ http://graffletopia.com/stencils/446