Monthly Archives: September 2011

User Experience

User Experience

User Experience

หมายถึง การรวมประสบการณ์ในทุกด้านของยูเซอร์ ที่มีการโต้ตอบ ในสินค้าและบริการของบริษัท

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

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

 

นิยามของการออกแบบ
Design is the process of finding the most elegant answer to the question of ‘how do I…?’ (Scrivs)
การออกแบบคือ กระบวนการหาคำตอบที่สวยงามที่สุดสำหรับคำถามที่ว่า ฉันจะทำมันอย่างไร

Design is a set of decisions about a product. It’s not an interface or an aesthetic, it’s not a brand or a color. Design is the actual decisions.! (Rebekah Cox)
การออกแบบคือ ชุดของความตัดสินใจซึ่งเกี่ยวกับผลิตภัณฑ์ มันไม่ใช่แค่รูปร่างหน้าตาหรือความงาม มันไม่ใช่เครื่องหมายการค้าหรือสี แต่การออกแบบคือ การตัดสินใจอย่างแท้จริง!

 

Why is user experience design important?

  1. เพื่อปรับปรุงจุดประสงค์
  2. เพื่อความรวดเร็วและตรงกลุ่มเป้าหมาย
  3. เพื่อเพิ่มมูลค่าผู้ใช้
  4. เพื่อยืดเวลาให้ผู้ใช้ใช้งานนานขึ้น

 

The elements of user experience (องค์ประกอบของ UX)

องค์ประกอบของ UX

User experience research

  • ลงสนามพบวัฒนธรรมผู้ใช้จริง
  • คิด Concept ของแบบทดสอบ
  • ออกแบบโดยให้หลายฝ่ายมีส่วนร่วม
  • สำรวจความคิดเห็น
  • ตำแหน่งที่ตามอง Eye Tracking
  • เรียงลำดับข้อมูล
  • ทดสอบในห้องปฏิบัติการก่อน

Eye Tracking ของ Form
ตำแหน่งของ Text อยู่บนกล่อง ถูกมองเห็นได้มากที่สุด

ตำแหน่งการมองที่ดีที่สุด ของแบบฟอร์ม

Content Strategy (กลยุทธ์ในการเขียนเนื้อเรื่อง)

กล่าวได้ว่า Content Strategy is Design!

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

กลยุทธ์ในการเขียนเนื้อเรื่อง

Interaction Design

Interaction design จะเป็นตัวกำหนดโครงสร้างและพฤติกรรมของผู้ใช้ ที่ใช้สินค้าหรือผลิตภัณฑ์แบบที่ต้องมีปฏิกริยาตอบโต้

Interaction design เป็นพื้นฐานในการทำความเข้าใจผู้ใช้ที่แท้จริง (ทั้งในแง่ เป้าหมาย ภารกิจ ประสบการณ์ ความต้องการ) กับความสมดุลย์ ระหว่าง ความต้องการ เป้าหมาย และความสามารถทางเทคโนโลยีของธุรกิจ

 

10 heuristics for user interface design (10 หลักการทั่วไปสำหรับการออกแบบ User Interface Design)

http://www.useit.com/papers/heuristic/heuristic_list.html

1. Visibility of system status
การแสดงผล ของสถานะของระบบ (ระบบควรแจ้งให้ผู้ใช้ทราบเกี่ยวกับสิ่งที่กำลังทำ ผ่าน text, graphic ในช่วงเวลาที่เหมาะสมเพื่อเสริมความเข้าใจ)

2. Match between system and the real world
ปรับให้ระบบเหมือนกับโลกแห่งความจริง (ส่วนที่เกี่ยวกับระบบควรจะปรับให้เป็นภาษาพูด ให้ผู้ใช้เข้าใจง่ายไม่ใช้ภาษาคอมพิวเตอร์มากเกินไป)

3. User control and freedom
การควบคุมการใช้งานของผู้ใช้ และอิสระของผู้ใช้ (ผู้ใช้งานมักจะเลือกหรือคลิกทำงานบางอย่างแบบไม่ตั้งใจ เราต้องมีการระบุไว้อย่างชัดเจนว่า เมื่อคลิกพลาดหรือทำพลาดแล้ว จะแก้ไขหรือออกจากการทำงานอันไม่พึงประสงค์นี้อย่างไร เพื่อที่จะได้ไม่มีการมาทำผิดซ้ำ)

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

5. Error prevention
การตรวจเช็คจะป้องกันปัญหาที่ยูสเซอร์อาจคลิกหรือทำ Action อะไรผิดได้

6. Recognition rather than recall
เห็นแล้วจำได้เลยดีกว่าต้องนึกคิดก่อน เช่น การตั้งชื่อปุ่ม ควรชัดเจนไม่ต้องให้นิ่งคิดตีความ เช่น ปุ่ม Save กับ OK ปุ่ม Save ชัดเจนกว่า หรือ คำว่าคลิกที่นี่ ควรเปลี่ยนเป็น คลิกดูทั้งหมด เป็นต้น

7. Flexibility and efficiency of use
เว็บควรจะหยืดหยุ่น และใช้งานได้เต็มประสิทธภาพที่ควรจะเป็น ตอบสนองความต้องการได้ทั้งผู้ใช้มือใหม่และมือเก่า

8. Aesthetic and minimalist design
การออกแบบที่สวยงาม และเรียบง่าย

9. Help users recognize and recover from errors
เมื่อเกิดการ errors ทั้งหลายจากระบบหรือจากการกรอก ควรมี pop upเตือนและแจ้งให้เข้าใจว่าผิดพลาดอะไรอย่างชัดเจน พร้อมวิธีแก้ไข

10. Help and documentation
เป็นการดีที่สุดถ้าออกแบบแล้วผู้ใช้เข้าใจได้ทันที แต่การทำหน้า Help, Tool Tip และ file.doc ให้ดาวน์โหลดไปอ่านก็เป็นตัวช่วยให้ผู้ใช้สามารถแก้ปัญหาต่างๆ ได้ด้วยตัวเอง

 

Visual Design
The principles of design หลักการออกแบบ

  1. Balance ความสมดุลย์
  2. Proximity ความใกล้ชิด เชื่อมโยง
  3. Alignment การจัดวาง
  4. Consistency ความกลมกลืน
  5. Contrast ความขัดแย้ง
  6. White space พื้นที่ว่างสีขาว

 

ตัวอย่าง Proximity ที่ดี (มีการจัดหมวดหมู่)

ตัวอย่าง การจัดหมวดหมู่ของเมนู

 

 

ตัวอย่าง Proximity ที่ดี (การจัดวางและตั้งชื่อปุ่ม)ตัวอย่าง การเชื่อมโยงที่ดี ของปุ่มกับแบบฟอร์ม

 

 

Alignment ที่ดี ยังต้องคำนึงถึงทิศทางของภาพประกอบ จุดนำสายตา รวมทั้งภาพที่สื่อความหมายไปในแง่บวกต่อธุรกิจ

ตัวอย่างการวาง Alignment ที่ดี ต้องคำนึงถึงทิศทางของภาพ และความคิดแง่บวกต่อธุรกิจ

 

 

การดีไซน์ White Space จะให้ความรู้สึกแตกต่างกันโดยสิ้นเชิง ตามลักษณะงาน ดีไซน์เนอร์ควรเลือกใช้ให้เหมาะสม

ตัวอย่างการใช้ White Space และความรู้สึกที่แตกต่าง

 

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

ตัวหนังสือแบบพิมพ์ใหญ่จะอ่านง่ายกว่า ดังตัวอย่าง

ตัวอย่าง ความแตกต่างในด้านรูปทรงตัวอักษร

 

The Rule of Visual Design

 

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

Update วิเคราะห์ OS,Browser พฤติกรรมคนดู ล่าสุด 05/09/2554

Update วิเคราะห์ OS,Browser พฤติกรรมคนดู ล่าสุด 05/09/2554

ตัวเลขอ้างจากการใช้งานหน้าแรก sanook.com ซึ่งปัจจุบันจํานวนผู้ใช้งานเฉลี่ยต่อวัน 13,593,058 (Page Views) ข้อมูลตัวเลขทั้งหมดจาก การเก็บ Stat ของ http://truehits.net

Mobile Devices จากจำนวนทั้งหมด 186 อันดับ [ดาวน์โหลด Excel]

NAME Pageview Percent
iPad 25,575 59.09
iPhone 11,358 26.24
iPod 811 1.87
BlackBerry 9780 328 0.76
NokiaBrowser 327 0.76
NokiaC5-03 306 0.71
Nokia5800d-1 242 0.56
NokiaE63-1 214 0.49
Nokia5233 213 0.49
BlackBerry8520 193 0.45
LG Android-MMS-V1.0 172 0.40
Nokia5230 157 0.36
Nokia5530c-2 155 0.36
BlackBerry 9800 141 0.33
Nokia5250 135 0.31
NokiaE72-1 125 0.29
NokiaE5-00 118 0.27
BlackBerry 9700 112 0.26
BlackBerry9700 110 0.25
NokiaC7-00 110 0.25
NokiaC6-00 93 0.21
NokiaC3-00 90 0.21
SAMSUNG-GT-S8530 89 0.21
HTC_DesireS_S510b 83 0.19
BlackBerry 9300 82 0.19
NokiaN8-00 75 0.17
NokiaX6-00 69 0.16
NokiaC5-00 64 0.15
SAMSUNG-GT-S7233E 62 0.14
SAMSUNG-GT-S5253 62 0.14
HTC_DesireHD_A9191 60 0.14
HTC 52 0.12
BlackBerry9000 49 0.11
HTC_Wildfire_A3333 43 0.10
SAMSUNG-GT-S8500 41 0.09
Sony EricssonLT15i 40 0.09
BlackBerry9300 36 0.08
HTC_DesireS_S510e 35 0.08
NokiaX5-01 35 0.08
NokiaE71-1 31 0.07
NokiaC2-03 29 0.07
NokiaN95_8GB 28 0.06
HTC_IncredibleS_S710e 28 0.06
SAMSUNG 27 0.06
Sony EricssonX10i 26 0.06
Nokia6700s 26 0.06
i-mobile i691 26 0.06
Nokia6760s-1 26 0.06
NokiaE52-1 25 0.06
NokiaC6-01 24 0.06
i-mobile I-Note 23 0.05
i-mobile i810 23 0.05
NokiaN95 23 0.05
NokiaN81-3 22 0.05
Sony EricssonJ108i 22 0.05
NokiaX3-02 22 0.05
HTC_DesireZ_A7272 21 0.05
NokiaE90-1 21 0.05
Nokia6300 20 0.05
HTC Tattoo 20 0.05

TOP Operating Systems for Mobile จากจำนวนทั้งหมด 24 อันดับ [ดาวน์โหลด Excel]

NAME Pageview Percent
Mac OS (iPhone) 12,201 53.76
Android 2.2 2,311 10.18
Android 2.2.1 2,164 9.54
Symbian OS 1,972 8.69
Android 2.3.3 1,546 6.81
RIM (BlackBerry) 1,069 4.71
Android 3.1 387 1.71
Android 2.2.2 332 1.46
Android 2.1-update1 272 1.20
Android 2.3.4 163 0.72
Android 1.6 74 0.33
Android 3.2 71 0.31
Android 46 0.20
Android 3.0.1 29 0.13
Android 1.6.2890 12 0.05
Android 1.5 9 0.04
Android 2.3.2 8 0.04
Android 1.9.88.v03 8 0.04
Windows Mobile 5 0.02
Android 2.1 5 0.02
Android 2.2.1.1832 4 0.02
Android GINGERBREAD 3 0.01
Android 2.3.5 2 0.01
Android Eclair 2 0.01

TOP Operating Systems จากจำนวนทั้งหมด 62 อันดับ [ดาวน์โหลด Excel]

NAME Pageview Percent
Windows XP 796,965 57.25
Windows 7 452,106 32.48
Windows Vista 53,504 3.84
Mac OS X 37,929 2.72
Mac OS X 10_6_8 13,662 0.98
Mac OS X 10.6 4,711 0.34
Mac OS X 10_5_8 4,688 0.34
Mac OS X 10_7_1 3,745 0.27
Mac OS X 10_6_7 2,951 0.21
Android 2.2 2,311 0.17
Android 2.2.1 2,164 0.16
Symbian OS 1,972 0.14
Linux i686 1,812 0.13
Mac OS X 10.5 1,603 0.12
Android 2.3.3 1,546 0.11
Mac OS X 10_6_6 1,486 0.11
Linux x86_64 855 0.06
Mac OS X 10_7 825 0.06
Windows 2000 809 0.06
Mac OS X 10.7 734 0.05
Mac OS X 10_4_11 721 0.05
Mac OS X 10_6_4 705 0.05
Mac OS X 10_6_3 514 0.04
Mac OS X 10_6_5 446 0.03
Android 3.1 387 0.03
Mac OS X 10.4 358 0.03
Android 2.2.2 332 0.02
Android 2.1-update1 272 0.02
Mac OS X 10_6_2 268 0.02
Mac OS X 10_5_7 249 0.02
Mac OS X 10_5_6 186 0.01
Mac OS X 10_7_0 180 0.01
Linux armv7l 178 0.01
Android 2.3.4 163 0.01
Mac OS X 10_6_1 109 0.01
Windows 98 95 0.01
Mac OS X 10_6 82 0.01
Windows Phone OS 75 0.01
Android 1.6 74 0.01
Android 3.2 71 0.01
Windows NT 55 0.00
Mac OS X 10_7_2 34 0.00
Mac OS X 10_5_4 30 0.00
Android 3.0.1 29 0.00
Mac OS X 10_5_5 20 0.00
Android 1.6.2890 12 0.00
Windows 95 10 0.00
Android 1.5 9 0.00
Android 2.3.2 8 0.00
Android 1.9.88.v03 8 0.00
Windows NT 6.2 7 0.00
Windows CE 5 0.00
Android 2.1 5 0.00
Android 2.2.1.1832 4 0.00
Android GINGERBREAD 3 0.00
Win 9x 4.90 3 0.00
Mac OS X Mach-O 2 0.00
Mac OS X 10_5_2 2 0.00
Linux mips 2 0.00
Android Eclair 2 0.00

TOP Browser Versions จากจำนวนทั้งหมด 425 อันดับ [ดาวน์โหลด Excel]

NAME Pageview Percent
MSIE 8.0 388,513 27.71
MSIE 7.0 279,418 19.93
Chrome 13.0.782.220 208,423 14.87
Firefox 6.0.1 118,101 8.42
MSIE 9.0 70,612 5.04
MSIE 6.0 63,744 4.55
Chrome 13.0.782.218 35,704 2.55
Firefox 3.6.21 35,299 2.52
Safari 6533.18.5 32,103 2.29
Firefox 6.0 11,756 0.84
Firefox 5.0 11,253 0.80
Safari 534.50 10,158 0.72
Firefox 4.0.1 8,064 0.58
Opera 9.80 6,954 0.50
Safari 533.21.1 6,431 0.46
Safari 533.1 6,412 0.46
Chrome 13.0.782.215 5,880 0.42
Firefox 7.0 4,873 0.35
Firefox 3.6.20 4,659 0.33
Mozilla 5.0 4,304 0.31
Firefox 3.0.19 4,029 0.29
Safari 534.48.3 3,838 0.27
Firefox 4.0 3,561 0.25
Firefox 5.0.1 3,019 0.22
Firefox 3.6.13 3,015 0.22
Firefox 3.6.18 2,823 0.20
Chrome 13.0.782.112 2,303 0.16
Chrome 12.0.742.122 2,282 0.16
Chrome 9.0.576.0 2,223 0.16
Safari 533.19.4 2,176 0.16
Safari 533.22.3 2,013 0.14
Safari 6531.22.7 1,949 0.14
Firefox 3.6.3 1,709 0.12
Chrome 10.0.648.204 1,639 0.12
Safari 531.21.10 1,591 0.11
Firefox 3.6.12 1,380 0.10
Chrome 11.0.696.68 1,139 0.08
Firefox 3.6.8 1,125 0.08
Firefox 3.6.17 1,069 0.08
Firefox 3.5.3 1,056 0.08
Safari 533.18.5 1,019 0.07
Firefox 3.6 1,016 0.07
Chrome 6.0.472.25 994 0.07
Firefox 3.6.10 896 0.06
Safari 533.20.27 855 0.06
Chrome 12.0.742.112 830 0.06
Firefox 3.5.7 796 0.06
Chrome 11.0.696.71 769 0.05
Safari 413 752 0.05
Chrome 13.0.782.107 738 0.05
Chrome 7.0.517.41 733 0.05
Chrome 11.0.696.77 713 0.05
Chrome 11.0.696.60 697 0.05
Firefox 3.6.15 690 0.05
Chrome 12.0.742.100 672 0.05
Chrome 8.0.552.215 666 0.05
Firefox 3.0.10 657 0.05
Firefox 3.6.16 656 0.05
Chrome 10.0.648.6 655 0.05
Firefox 3.5.19 621 0.04

TOP Resolution จากจำนวนทั้งหมด 1966 อันดับ [ดาวน์โหลด Excel]

NAME Pageview Percent
1024*768 321,160 22.90
1366*768 269,463 19.21
1280*800 222,010 15.83
1280*1024 87,706 6.25
1440*900 62,410 4.45
1600*900 51,983 3.71
1920*1080 36,939 2.63
1280*768 31,980 2.28
1360*768 31,751 2.26
1152*864 30,846 2.20
1280*720 26,069 1.86
768*1024 25,479 1.82
1024*600 20,357 1.45
1680*1050 19,604 1.40
1093*614 17,630 1.26
800*600 11,766 0.84
1280*960 11,694 0.83
320*480 11,557 0.82
1024*640 7,861 0.56
1311*737 4,951 0.35
1024*819 4,617 0.33
1152*720 3,667 0.26
1249*702 3,311 0.24
1536*864 3,250 0.23
1920*1200 3,152 0.22
1140*641 3,102 0.22
1192*670 2,729 0.19
911*512 2,401 0.17
1441*810 2,143 0.15
819*614 1,884 0.13
1024*576 1,645 0.12
2560*1440 1,494 0.11
983*737 1,340 0.10
1080*810 1,291 0.09
1344*840 1,202 0.09
1058*595 1,182 0.08
320*240 1,109 0.08
1067*600 1,107 0.08
1088*614 1,082 0.08
640*360 1,080 0.08
1229*983 1,021 0.07
1400*1050 1,008 0.07
1024*614 980 0.07
1600*1200 910 0.06
960*600 907 0.06
360*640 885 0.06
1017*572 862 0.06
1170*731 813 0.06
853*533 724 0.05
1229*768 710 0.05
1170*936 709 0.05
320*396 655 0.05
707*530 647 0.05
1143*857 623 0.04
240*320 612 0.04
640*480 596 0.04
1229*691 591 0.04
480*360 587 0.04
1024*1024 571 0.04
819*480 564 0.04

TOP color Depth จากจำนวนทั้งหมด 7 อันดับ

NAME Pageview Percent
32 1,050,343 74.87
24 318,181 22.68
16 31,627 2.25
4 2,645 0.19
8 40 0.00
15 37 0.00
12 2 0.00

Domain Name จากจำนวนทั้งหมด 88 อันดับ

NAME Pageview Percent
US Commercial (.com) 951,176 90.84
Thailand (.th) 91,519 8.74
United Kingdom (.uk) 790 0.08
Germany (.de) 504 0.05
Sweden (.se) 319 0.03
France (.fr) 309 0.03
Australia (.au) 271 0.03
Network (.net) 235 0.02
Switzerland (.ch) 161 0.02
Netherlands (.nl) 144 0.01
Finland (.fi) 126 0.01
Canada (.ca) 121 0.01
Japan (.jp) 118 0.01
Norway (.no) 109 0.01
Italy (.it) 101 0.01
Hong Kong (.hk) 87 0.01
Denmark (.dk) 78 0.01
Singapore (.sg) 77 0.01
Belgium (.be) 66 0.01
Non-Profit Organization (.org) 62 0.01
Korea (South,&nptr) (.kr) 59 0.01
Malaysia (.my) 58 0.01
Austria (.at) 46 0.00
Spain (.es) 43 0.00
Taiwan (.tw) 43 0.00
Laos (.la) 39 0.00
New Zealand (Aotearoa,&nptr) (.nz) 33 0.00
India (.in) 32 0.00
Ireland (.ie) 32 0.00
Samoa (.ws) 27 0.00
United Arab Emirates (.ae) 22 0.00
Russian Federation (.ru) 21 0.00
United States (.us) 20 0.00
Israel (.il) 18 0.00
Portugal (.pt) 18 0.00
Greece (.gr) 17 0.00
Cameroon (.cm) 14 0.00
Egypt (.eg) 14 0.00
Info (.info) 14 0.00
Turkey (.tr) 13 0.00
Philippines (.ph) 11 0.00
Saudi Arabia (.sa) 11 0.00
Sri Lanka (.lk) 10 0.00
Hungary (.hu) 10 0.00
Brazil (.br) 8 0.00
Turks and Caicos Islands (.tc) 8 0.00
South Africa (.za) 7 0.00
Ghana (.gh) 6 0.00
Chile (.cl) 6 0.00
Malta (.mt) 5 0.00
Libya (.ly) 5 0.00
Croatia (Hrvatska,&nptr) (.hr) 5 0.00
Indonesia (.id) 5 0.00
Morocco (.ma) 5 0.00
Argentina (.ar) 5 0.00
Pakistan (.pk) 5 0.00
Qatar (.qa) 5 0.00
China (.cn) 5 0.00
Viet Nam (.vn) 4 0.00
Slovenia (.si) 3 0.00