การเขียนโปรแกรมติดต่อผู้ใช้แบบกราฟิก

การเขียนโปรแกรมตดิ ตอ่ ผู้ใช้แบบกราฟิ ก ส่วนตอ่ ประสานผู้ใช้แบบกราฟิ ก • ซอฟตแ์ วรท์ ่ไี ดร้ บั ความนยิ มมีสว่ นต่อประสานผใู้ ชแ้ บบกราฟิก (GUI) • โซลชู ่นั ท่ีเหมาะสมในการเขียนโปรแกรมท่ีขบั เคลือ่ นดว้ ยเหตกุ ารณ์ ภาษาแบบวิชวลในการเขียนโปรแกรม กระบวนการออกแบบซอฟตแ์ วร์

แนวทางปฏบิ ตั ทิ ดี่ ใี นการออกแบบอนิ เตอรเ์ ฟซ • อนิ เตอรเ์ ฟซท่ีเรยี บงา่ ย มขี อ้ ความและภาษาท่ีความชดั เจน • ความสอดคลอ้ งและใชอ้ งคป์ ระกอบไดค้ รบ • เลือกเคา้ โครงรา่ งท่เี หมาะสม • การใชต้ วั อกั ษรเพ่ือสรา้ งลาดบั ชนั้ ท่ีชดั เจน • สือ่ สารส่งิ ท่ีเกิดขนึ้ ได้

• กาหนดคา่ เรม่ิ ตน้ และสามารถคาดการณไ์ ด้ UX vs UI • UX จะสร้างส่งิ ทใี่ ช้ประโยชน์ / UI จะสร้างสิง่ ทส่ี วยงาม UI คอื อะไร User interface (UI) คืออะไรก็ไดท้ ่ผี ใู้ ชโ้ ตต้ อบกบั การใชผ้ ลิตภณั ฑห์ รอื บรกิ าร ดจิ ิทลั ซง่ึ รวมถงึ ทกุ อยา่ งตงั้ แต่หนา้ จอและ touchscreens แปน้ พมิ พ์ เสยี งและแมแ้ ต่ แสงไฟ อยา่ งไรก็ตามเพ่ือใหเ้ ขา้ ใจถึงวิวฒั นาการของ UI การเรยี นรูเ้ พ่มิ เตมิ เก่ียวกบั ประวตั ิความเป็นมาและวธิ ีการพฒั นาแนวทางปฏิบตั ิและอาชีพเป็นอย่างไรนนั้ ช่วยได้ มาก

ประวัตโิ ดยย่อของ User interface ยอ้ นกลบั ไปในปี 1970 ถา้ คณุ ตอ้ งการใชค้ อมพิวเตอร์ คณุ ตอ้ งใชส้ ว่ นตอ่ ประสานราย คาส่งั (command-line interface) อนิ เทอรเ์ ฟซกราฟิ กท่ีใชก้ นั อยใู่ นปัจจบุ นั ยงั ไมม่ ีอยู่ ในเชงิ พาณิชย์ เพ่ือใหค้ อมพวิ เตอรท์ างานได้ ผใู้ ชจ้ าเป็นตอ้ งส่อื สารผา่ นภาษาเขียน โปรแกรมโดยใชโ้ คด้ หลายบรรทดั เพ่อื ส่งั ใหท้ างานง่าย ๆ ในปี 1980 ไดม้ ีการพฒั นาสว่ นติดตอ่ ผใู้ ชแ้ บบกราฟิก (GUI) เป็นครงั้ แรกโดย นกั วทิ ยาศาสตรค์ อมพวิ เตอรท์ ่ี บรษิ ัท Xerox PARC ดว้ ยนวตั กรรมท่กี า้ วลา้ นี้ ผใู้ ช้ สามารถโตต้ อบกบั คอมพวิ เตอรส์ ว่ นบคุ คลไดโ้ ดยการสง่ คาส่งั ผ่านไอคอนป่มุ เมนแู ละ ชอ่ งทาเคร่อื งหมาย



ท่มี า: Jason Scott คดี Amber การเปล่ยี นเทคโนโลยีนีห้ มายความวา่ ทกุ คนสามารถใชค้ อมพวิ เตอรไ์ มจ่ าเป็นตอ้ งใช้ การเขียนโคด้ และการปฏวิ ตั ิคอมพวิ เตอรส์ ว่ นบคุ คลก็เร่มิ ขนึ้ โดยปี1984 บรษิ ัทแอปเปิ้ลคอมพวิ เตอรเ์ ปิดตวั คอมพิวเตอรส์ ว่ นบคุ คล แมคอินทอช (Macintosh) ซง่ึ รวมจดุ และคลกิ เมา้ ส์ Macintosh เป็นเครอ่ื งคอมพวิ เตอรใ์ นบา้ นท่ี ประสบความสาเรจ็ ในเชิงพาณิชยแ์ ห่งแรกท่ีใชอ้ ินเทอรเ์ ฟซประเภทนี้ การเขา้ ถงึ และความแพรห่ ลายของคอมพวิ เตอรส์ ว่ นบคุ คลและสานกั งาน หมายความ วา่ การเช่ือมตอ่ ท่ีจาเป็นตอ้ งไดร้ บั การออกแบบโดยคานงึ ถงึ ผใู้ ช้ หากผใู้ ชไ้ มส่ ามารถ โตต้ อบกบั คอมพวิ เตอรไ์ ด้ คงไมม่ กี ารขายคอมพวิ เตอร์ เป็นผลใหน้ กั ออกแบบ UI ถือ กาเนดิ ขนึ้ มา เช่นเดียวกบั เทคโนโลยตี า่ ง ๆท่ีกาลงั เตบิ โต บทบาทของนกั ออกแบบ UI ไดพ้ ฒั นาขนึ้ เน่ืองจากระบบตา่ ง ๆ การตงั้ คา่ ความคาดหวงั และการเขา้ ถงึ เป็นสว่ นท่ีมคี วามจา เป็นมากขนึ้ ในอปุ กรณ์ ขณะนีน้ กั ออกแบบ UI ไมเ่ พียง ตอ้ งทางานบนอินเทอรเ์ ฟซ คอมพิวเตอรเ์ ทา่ นนั้ แตย่ งั คงทาบนโทรศพั ทม์ ือถือ augmented reality (AR) และ virtual reality (VR) อีกดว้ ย และแมก้ ระท่งั อินเทอรเ์ ฟซ \"มองไมเ่ หน็ \" หรอื แบบไมม่ ี หนา้ จอ (หรอื เรยี กวา่ Zero UI) เช่น เสยี ง ท่าทางและแสง นกั ออกแบบ UI ในปัจจบุ นั มโี อกาสเกือบจะไรข้ ีดจากดั ในการทางานบนเวบ็ ไซต์ โม บายแอพ เทคโนโลยีอปุ การณส์ าหรบั สวมใส่ (wearable technology) และอปุ กรณ์ สมารท์ โฮมตา่ ง ๆ ท่กี ลา่ วมานนั้ เป็นเพียงสว่ นนอ้ ย ตราบใดท่ีคอมพิวเตอรย์ งั คงเป็น สว่ นหน่งึ ของชีวิตประจาวนั จะมคี วามจาเป็นท่จี ะตอ้ งทาใหอ้ นิ เทอรเ์ ฟซท่ชี ่วยใหผ้ ใู้ ช้ ทกุ วยั ทกุ เบอื้ งหลงั และประสบการณท์ างเทคนคิ สามารถใชง้ านไดอ้ ย่างมี ประสิทธิภาพ

UX คืออะไร? User experience หรอื UX มกี ารพฒั นามาจากผลของการปรบั ปรุง UI เม่อื มี บางอยา่ งใหผ้ ใู้ ชไ้ ดโ้ ตต้ อบกบั ประสบการณข์ องพวกเขา ไมว่ า่ จะเป็นแง่บวก ลบหรอื เป็นกลาง สามารถเปลีย่ นวธิ ีท่ผี ใู้ ชร้ ูส้ กึ เก่ียวกบั การโตต้ อบเหลา่ นนั้ แหลง่ : User Experience Rocks นกั วิทยาศาสตรด์ า้ นวทิ ยาการความรู้ Don Norman นิยามคาวา่ \"ประสบการณข์ อง ผใู้ ช\"้ ในตน้ ปี 1990 สมยั ท่ีเขาทางานท่ีบรษิ ัทแอปเปิ้ลและนิยามมนั ดงั นี้ \"ประสบการณผ์ ใู้ ช'้ ครอบคลมุ ทกุ ดา้ นของการปฏิสมั พนั ธข์ องผใู้ ชป้ ลายทางกบั บรษิ ัท ทงั้ บรกิ ารและผลติ ภณั ฑข์ องบรษิ ัท\" น่นั เป็นคาจากดั ความกวา้ ง ๆ ท่อี าจครอบคลมุ ทกุ การปฏิสมั พนั ธท์ ่เี ป็นไปไดท้ ่บี คุ คล สามารถมกี บั ผลิตภณั ฑห์ รอื บรกิ าร ไมใ่ ช่เพียงแค่ประสบการณด์ จิ ิทลั

เทา่ นนั้ ผเู้ ช่ียวชาญดา้ น UX บางรายเลือกท่ีจะเรยี กประสบการณข์ องลกู คา้ ตามสาย งานนนั้ ๆ และบางรายไดก้ า้ วไปไกลกวา่ เรยี กสายงานนีง้ า่ ยๆวา่ เป็นการออกแบบ ประสบการณ์ ไมว่ า่ จะเรยี กวา่ อะไรก็ตาม คาจากดั ความดงั้ เดิมของนอรแ์ มนเก่ียวกบั UX ถือเป็น หวั ใจสาคญั ของการออกแบบประสบการณท์ กุ อยา่ ง - มนั ครอบคลมุ ทกุ อย่างและอยู่ ตรงกลางของมนษุ ยแ์ ละส่ิงท่ตี อ้ งปฏสิ มั พนั ธอ์ ยเู่ สมอ เพ่ือทาความเขา้ ใจวา่ สิง่ ใดท่ที าใหเ้ กิดประสบการณท์ ่ดี ี Peter Moreville ไดพ้ ฒั นา ภาพท่ีเนน้ วา่ มีส่ิงท่ีทาใหเ้ กิดการออกแบบ UX ท่มี ปี ระสทิ ธิภาพ ท่มี า: Peter Moreville

การใชป้ ระโยชนจ์ ากภาพ “Usability honeycomb” ไดก้ ลายเป็นพืน้ ฐานสาหรบั แนวทางปฏบิ ตั ิท่ีดีท่สี ดุ สาหรบั ผเู้ ช่ียวชาญดา้ น UX เพ่ือชว่ ยชีแ้ นะแนวทางในการ ติดตอ่ กบั ผใู้ ช้ รวมไปถงึ : • พวกเขาจะคน้ พบผลิตภณั ฑบ์ รษิ ัทของคณุ ไดอ้ ยา่ งไร • ลาดบั ของการกระทาท่ีพวกเขาใชใ้ นการโตต้ อบกบั อินเทอรเ์ ฟซ • ความคดิ และความรูส้ กึ ท่ีเกิดขนึ้ ในตอนท่ีพวกเขาพยายามท่ีจะงานชิน้ นนั้ ให้ เสรจ็ • การแสดงผลท่พี วกเขานาออกมาจากการปฏสิ มั พนั ธใ์ นภาพรวม นกั ออกแบบ UX มีหนา้ ท่ีรบั ผดิ ชอบในการสรา้ งความม่นั ใจวา่ บรษิ ัทจะจดั หา ผลิตภณั ฑห์ รอื บรกิ ารท่ตี อบสนองความตอ้ งการของลกู คา้ และช่วยใหพ้ วกเขา บรรลผุ ลตามท่ตี อ้ งการ นกั ออกแบบ UX ทางานอยา่ งใกลช้ ิดกบั นกั ออกแบบ UI นกั วิจยั UX นกั การตลาด และทีมผลิตภณั ฑเ์ พ่ือทาความเขา้ ใจผใู้ ชง้ านผา่ นการวิจยั และการทดลอง พวกเขาใช้ ขอ้ มลู เชิงลกึ ท่ีไดร้ บั เพ่ือยา้ และปรบั ปรุงประสบการณอ์ ยา่ งตอ่ เน่ืองทงั้ จากการวิจยั เชิง ปรมิ าณและเชงิ คณุ ภาพ ความแตกตา่ งระหวา่ ง UI กับ UX คืออะไร? ในขนั้ พืน้ ฐาน UI ประกอบขนึ้ จากองคป์ ระกอบทงั้ หมดท่ีทาใหบ้ คุ คลสามารถโตต้ อบ กบั ผลติ ภณั ฑห์ รอื บรกิ ารได้ UX ตรงกนั ขา้ มคือสง่ิ ท่ีแต่ละคนมีปฏิสมั พนั ธก์ บั ผลิตภณั ฑห์ รอื บรกิ ารนนั้ ๆ ไดร้ บั กลบั ไปจากประสบการณท์ งั้ หมด Don Norman และ Jakob Nielsen สรุปไวอ้ ย่างชดั เจนวา่ :

สงิ่ สาคญั คือตอ้ งแยกประสบการณก์ ารใชง้ านทงั้ หมดออกจาก User interface (UI) แมว้ า่ UI จะเหน็ ไดช้ ดั วา่ เป็นสว่ นสาคญั อยา่ งย่งิ ของการออกแบบ ตวั อยา่ งเช่น เม่อื พิจารณาเว็บไซตท์ ่มี บี ทวจิ ารณภ์ าพยนตร์ แมว้ า่ UI สาหรบั การคน้ หาภาพยนตรจ์ ะ สมบรู ณแ์ บบ แต่ UX อาจไมด่ สี าหรบั ผใู้ ชท้ ่ตี อ้ งการขอ้ มลู เก่ียวกบั การฉายของ ภาพยนตรอ์ ิสระขนาดเลก็ หากฐานขอ้ มลู ท่จี าเป็นมเี ฉพาะภาพยนตรจ์ ากสตดู ิโอราย ใหญ่เทา่ นนั้ ตวั อยา่ งเชน่ Google อนิ เทอรเ์ ฟซท่ี มชี ่ือเสียงของ Spartan ชีป้ ระเด็นวา่ ประสบการณท์ ่ยี อดเย่ียมไมจ่ าเป็นตอ้ งใชร้ ะฆงั และนกหวดี เม่อื มงุ่ เนน้ ไปท่ผี ใู้ ช้ Google รูด้ ีวา่ เม่ือพวกเขามาท่ีเว็บไซต์ พวกเขามองหาเพียงสิง่ เดยี ว น่นั คือ ขอ้ มลู และพวกเขาตอ้ งการไดม้ นั มาอย่างรวดเรว็ ขอ้ เทจ็ จรงิ ท่ีวา่ ' google ' เป็นคากรยิ าท่ไี ดร้ บั การยอมรบั อยา่ งกวา้ งขวางแสดงให้ เห็นวา่ บรษิ ัท ใหป้ ระสบการณแ์ ละความคาดหวงั ดงั กลา่ วไดด้ เี พียงใด เกือบทกุ ส่งิ ท่ี คนอยากรูส้ ามารถเขา้ ถงึ ไดใ้ นพรบิ ตาและมเี พยี ง search engine อีกไมก่ ่ีตวั เทา่ นนั้ ท่ี รอดมาไดใ้ นปัจจบุ นั ลองจินตนาการวา่ ทกุ ครงั้ ท่ีคณุ คน้ หาใน Google ใชเ้ วลา 15 วินาทีในการไดผ้ ลลพั ธ์ - คณุ ไมส่ ามารถรบั คาตอบของคณุ ไดท้ นั ที แมว้ า่ อินเทอรเ์ ฟซจะยงั คงเหมือนเดิม แต่ ประสบการณข์ องคณุ กบั Google จะแตกต่างกนั อยา่ งมาก ผู้เชี่ยวชาญดา้ น UI / UX ร่วมแสดงความคดิ เหน็ ไมแ่ ปลกใจท่ีแตล่ ะคนมีความเหน็ แตกต่างกนั ในหวั ขอ้ นี้ ดงั นนั้ เราจงึ ไปตามหาบคุ คล ท่มี ีความสามารถจากวงการเทคโนโลยีเพ่ือสอบถามความคิดเห็นของพวกเขา น่ีคอื ส่งิ ท่ีพวกเขาพดู เก่ียวกบั ความแตกตา่ งระหวา่ ง UI กบั UX:

1. UX มุ่งเน้นไปทก่ี ารใช้งานของผู้ใช้เพอื่ แก้ปัญหา ส่วน UI มุ่งเน้นทห่ี น้าตา และการทางานของผลติ ภณั ฑ์ Ken Norton, Google Ventures Ken Norton - Partner บรษิ ัท Google Ventures อดีตผจู้ ดั การผลิตภณั ฑท์ ่ี Google \"เรม่ิ ตน้ ดว้ ยปัญหาท่เี ราตอ้ งการแก้ การออกแบบ UX มงุ่ เนน้ ไปท่ที กุ อย่างท่ีสง่ ผลตอ่ การใชง้ านของผใู้ ชเ้ พ่ือแกป้ ัญหาดงั กลา่ ว ทงั้ ดา้ นบวกหรอื ดา้ นลบ ทงั้ บนหนา้ จอและ ดา้ นนอก สว่ นการออกแบบ UI มงุ่ เนน้ ท่ีจะทาใหห้ นา้ ตาของผลิตภณั ฑแ์ ละการ ทางานออกมาอยา่ งไร User interface คือชิน้ สว่ นเดียวของการเดินทางนนั้ ผมชอบ ความคลา้ ยคลงึ กนั ของรา้ นอาหารท่ีผมเคยไดย้ ินคนอ่นื กลา่ ววา่ UI คอื โตะ๊ เกา้ อี้ แผน่ แกว้ และชอ้ นสอ้ ม UX คือทกุ สิ่งทกุ อย่างจากอาหาร การบรกิ าร ท่ีจอดรถ แสงและ ดนตร”ี 2. นักออกแบบ UX สนใจเกย่ี วกับแนวคดิ ดา้ นกระบวนการออกแบบ โดย ผู้ออกแบบ UI จะมุ่งเน้นองคป์ ระกอบทเ่ี ป็ นรูปธรรมมากขึน้

Andy Budd - ผรู้ ว่ มก่อตงั้ Clearleft ผกู้ อ่ ตงั้ UX London \"ตรรกะท่วั ไปจะแนะนาวา่ ถา้ คณุ ออกแบบ UI และบคุ คลท่ีไดส้ มั ผสั สินคา้ นนั้ ผา่ นทาง UI จงึ ทาใหค้ ณุ เป็น User Experience Designer อยา่ งไรก็ตามน่ีก็หมายความวา่ การ ออกแบบบา้ นของคณุ เองทาใหค้ ณุ เป็นสถาปนิกและการซอ่ มทอ่ ประปาทาใหค้ ณุ เป็น ช่างประปา บอ่ ยครงั้ ท่ีคาเหลา่ นีใ้ ชใ้ นการอธิบายถงึ สาขานนั้ แตต่ ีความไดผ้ ดิ เพีย้ นไปจาก ความหมายดงั้ เดิม ตวั อยา่ งเชน่ สถาปนิกแปลตามความหมายจรงิ วา่ \"หวั หนา้ ชา่ งก่อ อฐิ \" และช่างประปาหมายความวา่ \"หวั หนา้ พนกั งาน\" ชดั เจนแลว้ วา่ สองคานีไ้ มไ่ ดส้ ่ือ หรอื อธิบายวา่ อาชีพนนั้ ทาอะไรอีกตอ่ ไป ในบรบิ ทระดบั มืออาชีพ \"User Experience Designer\" มคี วามหมายและชดุ ทกั ษะท่ี เฉพาะเจาะจงขนึ้ อยกู่ บั ชมุ ชนท่ีปฏิบตั ิกนั มานานกวา่ 20 ปี ในโลกนีผ้ อู้ อกแบบ ประสบการณผ์ ใู้ ช้ (User Experience Designer) มสี ว่ นเก่ียวขอ้ งกบั แนวคิด กระบวนการออกแบบโดยผอู้ อกแบบ UI จะมงุ่ เนน้ องคป์ ระกอบท่ีเป็นรูปธรรมมากขนึ้ Jason Mesut อธิบายถึงความแตกตา่ ง (และซอ้ นทบั กนั ) ระหวา่ ง UX และ UI ใน รูปแบบ \"เพชรค\"ู่ ในรูปแบบนีน้ กั ออกแบบ UX มคี วามเช่ียวชาญดา้ นกลยทุ ธ์ การวิจยั สถาปัตยกรรมขอ้ มลู และการออกแบบปฏิสมั พนั ธ์

นกั ออกแบบ UI (ปัจจบุ นั เปลยี่ นช่ือใหท้ นั สมยั เป็นผอู้ อกแบบผลิตภณั ฑด์ จิ ิทลั ใน Silicon Valley) ยงั มีทกั ษะในการออกแบบการโตต้ อบ อยา่ งไรก็ตามการมงุ่ เนน้ ไป สว่ นตา่ ง ๆ เชน่ การออกแบบขอ้ มลู การออกแบบการเคลือ่ นไหวและแบรนด์ ในขณะท่บี างคนอา้ งวา่ มคี วามเช่ียวชาญเชิงลกึ ในทกุ สว่ นเหลา่ นี้ ซง่ึ หาไดค้ อ่ นขา้ งหา ยาก อย่างไรก็ตามหากคณุ เป็นผเู้ ช่ียวชาญในทกุ สง่ิ คณุ อาจไมไ่ ดเ้ ป็นผเู้ ช่ียวชาญใน เร่อื งใด ๆเลย \" 3. ไมม่ ีความแตกต่างระหวา่ งการออกแบบ UX และ UI เนื่องจากเป็ นสองสง่ิ ทไ่ี ม่สามารถเปรียบเทยี บกนั ได้ Craig Morrison - หวั หนา้ ผลิตภณั ฑท์ ่ี RecordSetter ผกู้ อ่ ตงั้ Usability Hour \"ผมไดย้ นิ คาถามนีอ้ ยตู่ ลอดเวลาและผมไดต้ อบคาถามนีห้ ลายครงั้ ในท่ีสดุ ผมได้ ขอ้ สรุปดงั นี้ ... ไมม่ คี วามแตกตา่ งระหวา่ งการออกแบบ UX และ UI เน่ืองจากเป็นสองสิ่งท่ีไม่ สามารถเปรยี บเทียบกนั ได้

ตวั อยา่ งเชน่ คาถามประเภท \"อะไรคือความแตกตา่ งระหวา่ งสแี ดงและสารเคมสี ที ่ีถกู สรา้ งขนึ้ \" ซง่ึ ไมม่ ีความแตกตา่ งกนั สีแดงประกอบดว้ ยสารเคมีท่ีแตกต่างกนั ทกุ ประเภทเม่อื รวมกนั ก็เป็นสแี ดง เช่นเดียวกบั User experience ท่สี รา้ งขนึ้ จากพวงขององคป์ ระกอบท่ีแตกตา่ งกนั ซง่ึ การออกแบบ User interface เป็นเพียงสว่ นหนง่ึ เม่อื รวมเขา้ ดว้ ยกนั ทาใหเ้ กิด ประสบการณก์ ารใชง้ าน ตอ่ ไปนีเ้ ป็นคาถามอ่ืน ๆ เพ่ือแสดงมมุ มองของผม: • ความแตกตา่ งระหวา่ ง MacBook และรูปรา่ งของคียบ์ อรด์ คืออะไร • ความแตกตา่ งระหวา่ งชาและวสั ดปุ ระเภทใดท่ีทาจากถงุ ชา • ความแตกตา่ งระหวา่ งรถกบั สีท่ีทารถคืออะไร ถา้ เรากาลงั พดู ถงึ เคก้ แสนอรอ่ ย (และทาไมเราถงึ ไมพ่ ดู ถึงมนั ละ่ ) UI คือไอซ่งิ จาน รสชาติ ชอ้ นสอ้ มและการนาเสนอ สว่ น UX เป็นเหตผุ ลท่ีเราใหบ้ รกิ ารเคก้ และ ทาไมคนถงึ อยากกินเคก้ มากกวา่ แฮมเบอรเ์ กอร์ 4. UI เป็ นสะพานทท่ี าใหเ้ ราไปถงึ ทที่ เ่ี ราตอ้ งการไป UX คอื ความรู้สกึ ทเ่ี รา ได้รับเมื่อเราไปถงึ

Jason Ogle – ผจู้ ดั รายการและผผู้ ลิต User Defenders podcast นกั ออกแบบท่ี NCM \"ผมคดิ วา่ หนึ่งในสง่ิ ท่สี าคญั ท่ีสดุ ท่ีตอ้ งคานงึ ถงึ ในโลกแห่งความคิดสรา้ งสรรคข์ องเรา ท่เี รากาลงั โบยบนิ คอื UI ไมใ่ ชช่ ดุ ของป่มุ ท่ีอยบู่ นมมุ ทงั้ ส่ขี องหนา้ จอและ UX ก็ไมไ่ ด้ เป็นแคต่ น้ แบบบนหนา้ จอเพียงเพ่ือการเพ่มิ Conversion บนหนา้ Landing Page เท่านนั้ ขณะนีย้ งั สามารถพจิ ารณาเสยี งและเจตนาของเราท่ขี บั เคล่อื นโดยส่งิ ท่รี ะบบคิดวา่ เรากาลงั พดู หรอื ตอ้ งการในบรบิ ทใดก็ตาม UI เป็นสะพานท่ีทาใหเ้ ราไปอกี ดา้ นหนง่ึ ของท่ีท่เี ราตอ้ งการจะไป UX คอื ความรูส้ กึ ท่ีเราไดร้ บั เม่ือเราไปถงึ ท่นี ่นั เม่ือสะพานถกู สรา้ งขนึ้ อยา่ งดหี รอื ด่งิ สู่ ความตายของเรา (พดู ถงึ UX ท่แี ย!่ ) มนั ยงั เป็นไปไดท้ ่จี ะมปี ระสบการณข์ องผใู้ ชท้ ่ดี โี ดยไมต่ อ้ งมี user interface ในความ เป็นจรงิ นนั้ ถา้ มนั ดีจรงิ ๆบางทีผใู้ ชข้ องคณุ อาจไมท่ นั สงั เกตวา่ มมี นั อยทู่ ่นี ่นั (มีน็อตก่ี ตวั ท่ีคณุ สงั เกตเห็นในขณะท่ีกาลงั ขา้ มสะพาน) อยา่ ลมื วา่ เรามกั จะสรา้ ง UX อยตู่ ลอดเวลาไมว่ า่ จะเป็นท่ีหลงั แปน้ พิมพ์ ในรา้ นขาย ของชา ในท่ีทางานของเราหรอื บนทางดว่ น เพ่ือสรุปเร่อื งนีต้ ามท่ผี มพดู เสมอกบั ผฟู้ ังท่ีน่ารกั ในช่วงทา้ ยของทกุ ตอน User Defenders podcast : จงตอ่ สตู้ อ่ ไปในการสรา้ ง UX ท่ดี สี าหรบั คนอ่ืน! ไมว่ า่ จะตอ้ งใช้ UI หรอื ไม่ \" 5. UI ใหค้ วามสาคัญไปทผ่ี ลติ ภณั ฑ์ ชุดของภาพรวมในช่วงเวลาหน่ึงUX มุ่งเน้นไปทผ่ี ู้ใช้และการใช้งานผลิตภณั ฑ์

Scott Jenson - นกั วางกลยทุ ธผ์ ลติ ภณั ฑท์ ่ี Google \"ผมไมไ่ ดส้ นใจมากนกั กบั เร่อื งความแตกต่างนี้ เน่ืองจากพวกมนั มกั จะใชแ้ ทนกนั ได้ อย่างไรก็ตาม ผมเห็น UI ใหค้ วามสาคญั ไปท่ีผลิตภณั ฑ์ ชดุ ของภาพรวมใน ช่วงเวลาหน่งึ UX มงุ่ เนน้ ไปท่ผี ใู้ ชแ้ ละใชง้ านผลิตภณั ฑ์ UI มแี นวโนม้ ท่ีจะเป็นขอ้ มลู เฉพาะของ หนา้ จอโดยมงุ่ เนน้ ท่ปี า้ ยช่ือสไตลภ์ าพ แนวทางและโครงสรา้ ง UX คอื เสน้ ทางการใชง้ านผลิตภณั ฑ์ หลกี เลีย่ งหนา้ จอและส่อื ถึงการใชง้ านผใู้ ช้ และ แรงจงู ใจเพ่ือหาเหตผุ ลวา่ ทาไมบางสิ่งใน UI จงึ สาคญั ทาไมบางสิ่งถกู ละเลยไป UI จดั การกบั ขอ้ จากดั ตา่ งๆ แต่ UX ทา้ ทายมนั \" 6. UX ครอบคลุมทุกประสบการณท์ บ่ี ุคคลมีกับผลิตภณั ฑห์ รือบริการ ในขณะ ที่ UI มคี วามเฉพาะเจาะจงกับวิธีการทผ่ี ู้คนโตต้ อบกับผลติ ภณั ฑห์ รือบริการ

Chinwe Obi - นกั วจิ ยั UX ท่ี User Testing User experience (UX) เป็นปฏสิ มั พนั ธแ์ ละประสบการณท์ ่ผี ใู้ ชม้ ีกบั ผลิตภณั ฑแ์ ละ บรกิ ารของบรษิ ัท เพ่ือใหไ้ ดข้ อ้ มลู เชิงลกึ ของ UX สิง่ นีอ้ าจรวมถึงการทาวิจยั เพ่ือเรยี นรู้ เก่ียวกบั ประสบการณเ์ ชงิ บวกและเชิงลบและนาการเรยี นรูเ้ หล่านนั้ ไปปรบั ปรุงส่งิ ท่ี สง่ ผลดตี อ่ ประสบการณข์ องผใู้ ช้ ลองนกึ ถึงการส่งั อาหารออนไลนส์ าหรบั การจดั สง่ ถงึ ท่ี UX ประกอบดว้ ยปฏิสมั พนั ธ์ ของผใู้ ชต้ งั้ แตก่ ารส่งั ซือ้ ในเวบ็ ไซตข์ องบรษิ ัท ประสบการณใ์ นการเลอื กซือ้ ของบน รายการและความพงึ พอใจตอ่ อาหารท่สี ่งั ซอื้ User interface (UI) คอื สว่ นเฉพาะท่ผี ใู้ ชโ้ ตต้ อบดว้ ย ตวั อย่างเช่น UI สามารถจดั การ กบั แนวคิดดงั้ เดิมเชน่ องคป์ ระกอบของการออกแบบภาพ เช่น สแี ละการออกแบบ อกั ษร นอกจากนีย้ งั สามารถดฟู ังกช์ นั การทางานของหนา้ จอหรอื ระบบพเิ ศษอ่ืน ๆได้ เช่น ระบบใชง้ านเสียงเป็นหลกั จากตวั อยา่ งการส่งั ซือ้ อาหารทางออนไลน์ UI จะมงุ่ เนน้ ไปท่กี ารออกแบบภาพบน หนา้ จอท่ีผใู้ ชโ้ ตต้ อบดว้ ย เช่น สีของป่มุ คาส่งั ซอื้ และตาแหน่งท่จี ะวางลงบน หนา้ นอกจากนีย้ งั สามารถรวมอนิ เทอรเ์ ฟซใด ๆ ก็ตามท่ผี ใู้ ชอ้ าจตดิ ตอ่ กบั ในรา้ นคา้ ไดอ้ ีกดว้ ย \" แลว้ คุณคดิ อย่างไร UX กลายเป็นคาท่ีรูจ้ กั กนั แพรห่ ลายมากขนึ้ อยา่ งนอ้ ยก็ในระดบั องคก์ ร เราจะไมไ่ ด้ ยนิ คนใชค้ าเหลา่ นีป้ นกนั หรอื ใชแ้ ทนกนั แมว้ า่ ไมเ่ ป็นท่ตี อ้ งสงสยั เลยวา่ สายงานของ การออกแบบ user experience จะพฒั นาต่อไป แต่ยงั เป็นเรอ่ื งสาคญั ท่ีจะตอ้ งเขา้ ใจ หนา้ ท่ีหลกั ของแต่อาชีพในมมุ กวา้ งของการออกแบบท่ีอิงตามผใู้ ชเ้ ป็นหลกั

แลว้ คณุ คดิ เหน็ อยา่ งไร อะไรคือความแตกตา่ งของ UI และ UX สามารถใชค้ าเหลา่ หนี้ แทนกนั ไดไ้ หมหรอื พวกมนั มคี วามหมายตา่ งกนั มุมมองผู้ใช้งาน • การจดั วางโครงรา่ งและสีสนั • ผใู้ ชม้ องเห็นผา่ นจอภาพ ไดย้ ินเสยี ง ส่งั งานดว้ ยเสียง ดจู ากรายงาน • แอพพลเิ คชนั มหี ลายกิจกรรม ในการโตต้ อบกบั ผใู้ ช้ • การใชไ้ ลบรารสี รา้ งสว่ นตอ่ ประสาน เคร่ืองมือออกแบบโครงร่าง 1.Prototype 2.Pencil Project 2.Cacoo 3.JumpChart 4.FrameBox 5.iPlotz

6.WireframeCC เครื่องมือออกแบบส่วนต่อประสานผู้ใช้ 1.Sketch 2.Adobe XD 3.Zeplin 4.Webflow 5.Hype

องคป์ ระกอบทมี่ ใี นหน้าจอ – การควบคมุ การปอ้ นขอ้ มลู (Input Controls) – สว่ นประกอบการนาทาง (Navigational Components) – สว่ นประกอบท่ีใหข้ อ้ มลู (Informational Components) – สว่ นบรรจคุ อมโพเนนตอ์ ่ืน ๆ (Containers)

UI Component • สว่ นประกอบตา่ งๆ ท่ีใชใ้ นการออกแบบสว่ นประสานงานผใู้ ช้ • Components UI Libraries แนวคิดออกแบบ UI 3 ดา้ น 1) การโตต้ อบของผใู้ ชก้ บั หนา้ จอ

2) การออกแบบภาพของหนา้ จอ 3) วิธีเขา้ ถึงโครงสรา้ งขอ้ มลู ส่วนควบคุมการใชง้ าน • User Control คอื สว่ นประกอบยอ่ ยซง่ึ สามารถวางไวใ้ นการควบคมุ การทางาน และการจดั ทาชิน้ สว่ นขนึ้ เพ่ือใชก้ บั สว่ นหลกั • สามารถนากลบั มาใชซ้ า้ ไดแ้ ละปรบั เปล่ยี นใหเ้ หมาะกบั ส่วนอ่ืน ๆ • การแบง่ User Controls ออกเป็นชดุ และมีฟังกช์ นั ท่ีแตกตา่ งกนั กรอบงานของส่วนตอ่ ประสานงานผู้ใช้ • องคป์ ระกอบรวมของสว่ นตอ่ ประสานผใู้ ช้ • สว่ นตอ่ ประสานของแอพพลเิ คชนั • รายละเอียดการออกแบบท่ีถกู ตอ้ ง เหมาะสม • การนารูปแบบท่มี ีอยมู่ าใชง้ าน • ลดระยะเวลาดาเนนิ การออกแบบ

ประเภทของกรอบงานในแต่ละโปรเจก็ ต์ แพลตฟอรม์ (Platform) User Interface Component สว่ นประกอบในการออกแบบสว่ นตอ่ ประสานผใู้ ช้

Game Engine ตวั ช่วยในการขบั เคล่อื นเพ่ือสรา้ งเกม

คลาสของส่วนต่อประสานผู้ใช้ • แต่ละหนา้ จอเป็นชิน้ สว่ นของโปรแกรม • การออกแบบโครงรา่ งหรอื ตน้ แบบดา้ นกราฟิก • การปรบั ปรุงและพฒั นาแต่ละสว่ น • การนาโครงรา่ งหรอื ตน้ แบบมาใชซ้ า้ • การแบง่ สว่ นตอ่ ประสานตามหนา้ ท่ีและความรบั ผิดชอบ

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

• ความหมายและการส่ือสารใหเ้ ขา้ ใจตรงกนั ออบเจก็ ตค์ ลาส • ออบเจก็ ตท์ าหนา้ ท่ีตา่ งกนั • ส่อื สารและตอบสนองกนั Integrated Development Environment (IDE) • ชดุ เคร่อื งมือในการสรา้ งและนาสว่ นตอ่ ประสานมาใชง้ าน • กลอ่ งเครอ่ื งมือในการออกแบบสว่ นตอ่ ประสาน • การเช่ือมตอ่ ระหวา่ งโคด้ ภาษาและกราฟิก • การพฒั นาโปรแกรมตามกรอบงานท่ตี อ้ งการ