หน่วยที่ 1 ความหมายของการออกแบบส่วนติดต่อผู้ใช้ (บทนำ)

บ  ทท 1: บทน 1 บทท 1 บทน ค ธบ ย วนตดต ผ ชง น ปน งท คญม ก นร บบค มพว ต รทกปร ภท วนตดต ผ ชง น ปน พยง วน นงข งค มพว ต ร น งข ง Software ทมนษยจ ม รถรบรผ นก รม ง น ก ร ดยน ก ร มผ ก รพดคย ร ว ธก ร ด ทท มนษย ล ค ม พว ต ร ม รถ รกน ดทงท งตรง ล ท ง ม น บทนจ กล วถงก ร น น คว ม ม ย คว ม คญรวมถงปร ว ต ดยย ข ง วนตดต ผ ช วตถปร งค 1. รบทร บถงคว ม ม ยข งก ร ก บบข ง วนตดต ผ ช 2. รบทร บถงคว ม คญข ง วนตดต ผ ช 3. รบทร บถงปร ว ต ดยย ข งก ร ก บบ วนตดต ผ ช 1. User Interface ค ? User Interface (UI) ค วนตดต ผ ชง น ซง ปน งท คญม ก นร บบค มพว ต รทกปร ภท ปนศ ตร นงท ปน subset ข ง Human-Computer Interactive (HCI) ซง ปนก รศกษ ก รว ง ผน ล ก ร ก บบวธก ร ทมนษย ล ค มพว ต ร ม รถท ง นรวมกน ด ย งม ปร ทธภ พ ง ด นก ก บบ HCI จ ต งค นงถ งป จจย ล ย ย ง ด ก มมม ง ล งท มนษยต งก ร ข จ กด ชง คว ม ม รถ ล ชงก ยภ พข งมนษย กร บวนก รจดก รข มลข งร บบ ล วธก รทดงดด มนษย ม รถ ชง นร บบ ด ย งด ซง นน นว HCI จ ค นงถงข จ กด ล คณลกษณ ข งทง Software ล Hardware วนตดต ผ ชง น ปน พยง วน นงข งค มพว ต ร น งข ง Software ทมนษยจ ม รถรบร ผ นก รม ง น ก ร ดยน ก ร มผ ก รพดคย ร ว ธก ร ด ทท มนษย ล ค มพว ต ร ม รถ รกน ดทงท งตรง ล ท ง ม ดย วนตดต ผ ชง นจ ปนตวกล งร ว งค มพว ต ร ล มนษย (ดงภ พท 1.1) ซง วนตดต ผ ชง นจ ปร ก บดวยข มล 2 วน ลก ค ข มลน ข ล ข มลน ก

บทท 1: บทน 2   ภ พท 1.1 ต นงข ง วนตดต ผ ชง น 1.1 Input ค ? Input ร ข มลน ข ปนข มลทค มพว ต ร จ ต งน ปปร มวลผล ซงค มพว ต รจ รบข มลผ นวธก รทมนษยจ ต ดต ร ดยก ร ดงคว มต งก รข งตน ง ปยงค มพว ต ร ตว ย ง คร งม นก รรบข มลน ข ชน Keyboard, Mouse, Trackball, นว ล ยง 1.2 Output ค ? Output ร ข มลน ก ปนข มลท ดจ กก รปร มวลผลข งค มพว ต ร ซง ดงผล ผ นวธก รทค มพว ต รจ ดงผลลพธ นก รปร มวลผล กม ซงข มลด งกล วค งทมนษยต งก ร ปจจบนวธก ร ดงผลข มลน ก ดยทว ป ค น จ ร Display Screen ซง ปนวธก รทมปร ยชน กมนษยทบกพร งด นก รฟง ภ พท 1.2 ทศท งข งข มลน ข ล ข ม ลน ก ก ร ก บบ วนตดต ผ ชง นทดจ ต งมก รผ มผ นกล ก นก รรบข ม ลน ข ล ข มลน ก ทร งรบคว ม ม รถ ล ข จ กดข งผ ชง น ดม กท ด ท ทจ ท ด ล ตรงต มคว ม ต งก ร ข งผ ชง น ดยข มลน ขข ล ข มลน กจ มทศท งก ร ลดงภ พท 1.2

บทท 1: บทน 3   2. ท ม วนตดต ผ ชง นจงมคว ม คญ ? วนตดต ผ ชง นม คว ม คญ พร ร บบ ค มพว ต รนน ปนก รปร มวลผลข งชดค ง (Source Codes) จ นวนม ก ผ ชง นทว ปจง ม ม รถ ข ถง ร งก ร ด ดงนน วนตดต ผ ชง นจง ปน วนทชวย ผ ชง น ม รถตดต (ผ นก รม ง น ก ร ด ยน ร ก ร ง-รบข มล) กบร บบ ค มพว ต ร ด นก รพฒน วนตดต ผ ชง นจ ปนต ง ศย ลกก ร ก บบ ดยพนฐ นข งก ร ก บบ วนตดต ผ ชง นนนต งท วนตดต ผ ชง น ม รถต บค ถ ม ด 3 ข ค 1) จ ม น ต ร รบร ย ง ร นนทด นก รม ง น 2) วนตดต ผ ชง นจ ม รถท ผ ชง น ข จว ตล วนทปร กฏ น วนตดต ผ ชง นค ร ล ว ย งร 3) วนตดต ผ ชง นจ ม รถท ผ ชง นมปฏ มพนธกบมน ด ย ง ร ถ วนตดต ผ ชง นนน มผ นก ร ก บบทดจ กดปญ ชน · ร บบ ม ม รถ ดงข ม ลทถกต ง ล / ร ครบถวน · ผ ชง น บ น ม ม รถ ข ชง นร บบ ด · ผ ชง น กดคว มร ก ม ย ก ชง นร บบ ก 3. ปร วต ดยย ล คว ม ปนม ข ง วนตดต ผ ชง น วนต ดต ผ ชง น ม รถ บ ง ปนยค ด 3 ปร ภท ลก ด ก 1) ยคข งร บบ ค มพว ต ร (System) 2) ยคข ง วลดว ย วบ (WWW) ล 3) ยคข ง ปกรณ คล นท (Mobile) ดงดงภ พท 1.3 ภ พท 1.3 ยคข งก รพฒน วนตดต ผ ชง น

บ  ทท 1: บทน 4 ยค รมตนข งก ร ก บบ วนตดต ผ ชง นจ รมตนจ กก ร ก บบ วนตดต ผ ชง นร ว ง มนษย ล ร บบค มพว ต รทว ป ดยค ว ร บบค มพว ต รจ ม ยถงซ ฟต วรทตดต งบนค มพว ต ร ดย รมตน นป ค.ศ. 1962 Steve Russell (ภ พท 1.5 (A)) ด พฒน กม ค มพว ต ร (1st Computer Game Spacewar) ซง ปนจด รมตนข งก ร ก บบ วนตดต ผ ชง น (ภ พท 1.5 (B)) ซงจ พบว นย ค น วนตดต ผ ชง นจ นนคว ม รยบง ย ม งคปร ก บ น น จ น ย ล ปน วนตดต ผ ชง นทถก ก บบม พ ต บ น งต ก รท ง น พยง ร ง ดยว งผล ย กต ก รท คว ม ข จข งผ ชง น (A) (B) ภ พท 1.5 1st Computer Game Spacewar ป ค.ศ. 1964 Douglas Engelbart (ภ พท 1.6 (A)) ดพฒน ม ชน รกข ง ลก (ภ พท 1.6 (B)) ซง ม ปน นง นปร ภทข ง ปกรณ รบรบข มลน ข ทชวย นวยคว ม ดวก กมนษย นก ร ชง น วนตดต ผ ชง น ดม ก (A) (B) ภ พท 1.6 ม ชน รกข ง ลก ยค 1970 ปนยค รมตนทมก ร ชง น น จ ดย Bob Frankston ล Dan Bricklin (ภ พท 1.7 (A)) ดพฒน VisiCalc (ภ พท 1.7 (B)) ค ผนต ร งท ก รท ช น ปร กรมด นก รค นวณ น รกข ง ลก ดยทง งคน ดรบขน นน มว ปนบด ง ผนต ร งท ก ร (The Father of the Spreadsheet) ดย ปร กรมดงกล วถ ว ปน วนตดต ผ ชง น บบ ชค ง (Command Line Interface)

บ  ทท 1: บทน 5 (A) (B) ภ พท 1.7 วนตดต ผ ชง น บบ ชค ง ต ม บรษท IBM ดน น วนต ดต ผ ชง นท ปนต ว นง (Text-based UI) ท ชง น น นกง น ล งคกร ฉพ จ กภ พท 1.8 จ นว ก ร ก บบ นยคนม พยงตว นง ท ปน วน น น ก ร ชง น ท นน ล วผ ชง นจ ต งจดจ ล กร กข มล ง ล ก ร ช วน ญจ ปนก ร ช ทน ดยว (Monochrome) ชน ด ข ว ปนตน ภ พท 1.8 วนตดต ผ ชง นยค 1970 ยค 1980 ยงคง ปน วนตดต ผ ชง นท ปนตว นง ต รมมก ร ก บบตว กษร ล ค พดท ต ก ร ชง นข งผ ชง นม กยงขน ชน มก รจดกลมข ม ล ล รมมก ร ชง นปม Function ม กขน ดงภ พท 1.9

บ  ทท 1: บทน 6 ภ พท 1.9 วนตดต ผ ชง นยค 1980 ต ม ดมก รพฒน วนตดต ผ ช บบ ช กร ฟกขน ปนครง ร ก ร รยกว Graphic User Interface (GUI) ดยร บบค มพว ต รทมก ร ชง นกร ฟก นก ร ก บบ วนตดต ผ ช ปน คร ง รก ค Xerox Star computer (ดงภ พท 1.10(A)) ผลต ดยบรษท Xerox ตทว วนตดต ผ ช บบ ช กร ฟก ล ปร บค ว ม รจม ก ค Lisa จ กบรษท Apple Inc. (ภ พท 1.10 (B)) พฒน ดย Steve Jobs (ภ พท 1.10 (C)) ซงปจจยทท วนตดต ผ ช บบ ชกร ฟก ข ง Lisa ปร บคว ม รจม ก น งจ กก ร ช ลกก รข ง WIMP (Windows , Icons, Menus, Pointer) ซง ปนก ร ร ง น ต ง (Windows) ทปร ก บดวยภ พ ญลกษณ ค น (Icons) มน (Menus) ล ตวช (Pointer) ทชวย ผ ช ม รถ ชง น วนตดต ผ ช ดง ยขนม ก (A)

บ  ทท 1: บทน 7 (B) (C) ภ พท 1.10 Graphic User Interface ยค 1990 รมมก รพฒน ก ร ก บบ วนตดต ผ ชง นม กขนดงภ พท 1.11 มว ลก ลว ยงม คว ม ม นยคก น น ตมก ร ช น พ จดกลมชดข มลม กขน งผล ผ ช ม รถ น ล ช ม ยงข มล นกลม ดยวกน ดดขน มก ร ชปม (Buttons) มน (Menus) ล กล งข คว ม (Text Box) พ นวยคว ม ดวก กผ ชง น นก รกร กข มลม กยงขน รวมถงมก ร ชขน ด ล รป บบข ง ฟ นตตว กษรท ตกต งกน ภ พท 1.11 วนตดต ผ ชง นยค 1990

บทท 1: บทน 8   ดยยค 1990 ปนยคทมจด รมตน ก ร ชง น วลดว ย วบ (World Wide Web: WWW) ร ท ร ม ก รยก น ว Web ร W3 (WWW) ค ค มพว ต ร วน นงบน น ต ร นต ทถก ช ม ต ก น น บ บพ ศษทท ค มพว ต ร ล นน ม รถ ข ถงข มล น ท กบ วภ ย น ข ง ต ล คร ง ด (กล ย ปน ลงข มลขน ด ญ) ดยผ นท ง บร ว ซ ร (Browser) ซง ปน ซ ฟ ต วรปร ภท นงทถก ร งขน พ ช น ล ต บ ตข มลต ง ทม ย น World Wide Web ดย ฉพ บร ว ซ รทพบ น ดม กท ด นปจจบน (ดงภ พท 1.12) ด ก Google Chrome, Mozilla   Firefox, Internet Explorer ล Netscape ปนตน ภ พท 1.12 บร ว ซ ร นปจจบน World Wide Web ถ ก นดขน ปนครง รก ดยม ครงก รท งวช ก ร นก ร ลก ปลยนข มล ข ว รร ว งนกวทย ศ ตร นทวปย รป ดยมศนยกล ง ยท CERN ซง ปนศนยวจยท งนว คลยรฟ ก ทปร ทศ วต ซ ร ลนด ผท ดรบ กยรต ปนบด ข ง วรล วด วบ ด ก Tim Berners-Lee (ภ พท 1.13) ท ดคด ครงก ร ช ม ยงข ม ลข ว รขนม ดย ชร บบ ป ร ทกซ (Hypertext) ล ครงก รข ง ข ก ดรบคว มนยมขน ร ยจน ข กล ย ปนผ ร งปร วตศ ตร ป ปจจบนน Berners-Lee ท ง น ยท World Wide Web Consortium ร ช ย ว W3C ซง ปน งคกรศนยกล งข ง คร ข ย ย มงมมท น ทรบ ร บม ตรฐ นต ง ข งร บบทง มด

บ  ทท 1: บทน 9 ภ พท 1.13 Tim Berners-Lee ดย นก ร ช ง น World Wide Web นยคนยงคง ช วนต ดต ผ ชง นผ น ปกรณค มพว ต ร ดงนน งคปร ก บ ดยทว ปยงคงคล ยคลงกบ วนตดต ผ ชง นข งร บบซ ฟต วร ภ พท 1.14 คร งม รบ ช นก ร ก บบ วนตดต ผ ชง น ดย วนตดต ผ ชง นข ง World Wide Web จ ม ก ร ชง นกร ฟก ล มลตม ดย (Multimedia) นรป บบต ง พ ร บข ม ลน ข ล งข มลน กม กยงขน พ ผ ชง น ม รถท คว ม ข จ ล ตต บกบค มพว ต ร ดง ยม กขน ดงภ พท 1.14

บ  ทท 1: บทน 10 นยค ดยวกบก รถ ก นดข ง World Wide Web รมมก รพฒน ปกรณค มพว ต รรป บบ มขน รยกว ค มพว ต ร บบพกพ ร บบ คล นท (Mobile Device) ดย นป 1991 ดมก รพฒน ปกรณ คล นท คร ง รกข ง ลกท ชก รตดต ผ ชง น บบ มผ (Touch Interface) ดงภ พท 1.15 ภ พท 1.14 Mobile Touch Interface วนตดต ผ ช นยคนจ ชรป บบก ร มผ ท ก ดจ ก ร ช ป กก ตล (Stylus) รบ มผ น จ ข ง ปกรณ ทน ก ร ช ม ปนตวช ด ย วนตดต ผ ชง น บบน ปนตวตน บบท กด ก รพฒน วน ตดต ผ ช ง นบน ปก รณ คล นท ช น ม รท ฟน ท บ ลต ร ค มพว ต รพกพ (Laptop) นยคปจจบน นป 2003 ดมก รพฒน ต ย ด วนตดต บบ มผ ดย ชนวม ข งมนษย (Finger Works) ร Touchscreen Interface (ดงภ พท 1.15) ดยนวม นน ม รถ ช พ ปนตวช ล ยง งก รควบคม ก ร ปลยน ปลง น จ ด (Gesture based Interface) ชน ก รย -ขย ย น จ ก ร ม น ก ร ล น (ดง ภ พท 1.16)

บ  ทท 1: บทน 11 ภ พท 1.15 Touchscreen Interface ภ พท 1.16 Gesture based Interface

บ  ทท 1: บทน 12 ทรนดก ร ก บบ วนตดต ผ ช 1. Skeuomorphic ค ก รจ ล งข งจรง ซง นก ร ร งค มพว ต ร คนทว ป ช นยค รก ผ ก บบ วนตดต ผ ชพย ย มจ ล ง \" ลกจรง\" ม ลง น คร ง พ คนคน คย ชน มถงขย กบง น ว น ฟม (Folder/Directory) มพน ต (Desktop) วว งข ง คน ลยคน คย ดว จ จดก ร ฟลต ง ย ง ร จ มปฏ มพนธ กบ งข งต ง ย ง ร ( ชน จบ ฟลล ก ป ฟม น จบ ฟลล กลงถงขย ล ) ตทว จ กด นก ร \"ปฏ มพนธ\" กบ งต ง ล นน ชน ถ ร นปม ม นจรง ร กคดว มนควรจ ค \"กด\" ด ย ง ดยว พร ปมจร ง ม ม รถป ดซ ยขว ร ขย ร ยง ล ด ท ร ม ม รถพฒน ก ร ตต บ บบ ม ด ภ พท 1.17 ก ร ก บบต มรป บบ Skeuomorphic ทม : จกรกฤษณ ต วฒน. SeedThemes 2. Flat Design ปน ทรนดก ร ก บบรป บบ ม ทม พร มก ร ป ดตวข ง iOS7 ปน น วคดก ร ก บบทท วบ ซต บบ ด ร ยบ ม นน Effect ม ก ก น น น คนจ ช บ บบ Skeuomorphism ( บบ มจรง ชน ชล ย ม นก ร ก บบ พ น นง ร ชรป ม คร ฟน น ก ร ก บบ พ ด ยง) ร น ทยกช บ บบ Web 2.0 ท นนก ร ง , Gradient ย ซง วบ

บ  ทท 1: บทน 13 ด ซ น ร ทยกยงตด Web 2.0 ยม ก พวก นง น วบด ซน วน ญก ป นวนน มด พ ม ถงยค ข ง Flat Design ปนก รตดร ยล ยด ล ย ย ง พวกก ร ช ง ก ร ล Gradient ก ป ซงจ นนก ร ช / รปทร ง พ ด งว วน น คญ น วบ ซต ม กกว ม ก นทปม น วบต ง ล Gradient ดน พ ปมดนน ล คนม ง น ดง ย ภ พท 1.18 ตว ย งก รด ซน วบ บบ Flat Design – วบ ซต Mediatemple.net ย ง รกต ม บ งคนม งว Flat Design จดธรรมด กน ป ร ด มมคว มลก นง นด ซน จงม บ ง วนทด ซน ปน นว Almost Flat Design ค ม ด รยบ ป มด ตบ ง วนมก ร ช Gradient ม ชวยท ด ดนขน ร ม ก ร ชรปถ ยจรงรวมกบปม บบ Flat ร งคว ม ปลก ม ภ พท 1.19 ตว ย งง นด ซน บบ Long Shadow – รปปร ก บจ ก วบ ซต unlimitedtricks.com 3. Material Design ซง ปน ลกท ชด ซน Product น คร Google ทง มด ดย นนก ร ดงคว มลก ข ง งต ง ดวย ง ง ลยน บบ ง ข งจรง

บ  ทท 1: บทน 14 ก ก ล รยก Material Design ว ปน \" ภ ษ ข งก ร ก บบ\" ร visual language ทรวบรวม \" ลกก ร ก บบทด\" วดวยกน ดย ช ปน นวท งก ร ก บบชด ดยวท ช ดข ม ปกรณ ร งรบก ร ป นข มล ล ย บบ นศกดฐ น ท ท กน · จ มผ · งง นดวย ยง · ม ล คยบ รด ลกก ร ก บบ (design principle) ข ง Material Design มดวยกน 3 ข · ช ลกก ร ลยน บบ \"ว ด\" (material) น ลกคว ม ปนจรง นนก ร ชพนผว (surface) ล ข บ (edge) ช ง ง -ภ พ คล น ว ม นกบ ง ง -ก ร คล น วข งว ตถ ชงก ยภ พ · ปนก ร ก บบท \"ตง จน น \" (intentional) ชวธก รน น บบ ดยวกบ งพมพกร ด ษ ชน ฟ นต ทว ง น ภ พปร ก บ · ดงก ร คล น ว (motion) พ บ กคว ม ม ย (meaning) ข งก รกร ท ภ พท 1.20 ลกก ร ก บบข ง Material Design