13 · HCI & Graphics
13 · ปฏิสัมพันธ์มนุษย์–คอมพิวเตอร์ และกราฟิกส์
This chapter is the top floor — the only surface in the tower a person actually touches, and the one that has to hide every floor beneath it from someone who never asked for a tower.
บทนี้คือชั้นบนสุด — ผิว (surface) เดียวในหอคอยที่คนได้สัมผัสจริง และเป็นชั้นที่ต้องซ่อนทุกชั้นข้างใต้ไว้ให้พ้นสายตาคนที่ไม่เคยขอหอคอยนี้เลยสักครั้ง
Where should the machine end and the person begin?
เครื่องควรจบตรงไหน คนควรเริ่มตรงไหน?
On 9 December 1968, in Brooks Hall in San Francisco's Civic Auditorium complex, Douglas Engelbart sat down in front of roughly a thousand computing professionals with a screen, a keyboard and a wooden box on wheels, and spent ninety minutes doing things none of them had seen (Doug Engelbart Institute). He moved a pointer with the box. He edited a document and it changed as he typed. He worked on the same file, live, with a colleague thirty miles away whose face was on the screen beside the text. Mouse, hypertext, real-time collaborative editing, video conferencing — in one sitting, in a decade when the normal way to use a computer was to hand over a deck of punched cards and come back tomorrow.
วันที่ 9 ธันวาคม 1968 Douglas Engelbart นั่งลงต่อหน้าคนทำงานคอมพิวเตอร์ราวพันคนที่ Brooks Hall ในกลุ่มอาคาร Civic Auditorium ของซานฟรานซิสโก มีแค่จอภาพ คีย์บอร์ด และกล่องไม้มีล้อหนึ่งใบ เก้าสิบนาทีจากนั้นเขาทำสิ่งที่ไม่มีใครในห้องเคยเห็นมาก่อน (Doug Engelbart Institute) เขาขยับตัวชี้ตำแหน่งด้วยกล่องใบนั้น เขาแก้เอกสารและตัวหนังสือเปลี่ยนตามนิ้วที่พิมพ์ เขาทำงานบนไฟล์เดียวกันสดๆ กับเพื่อนร่วมงานที่อยู่ห่างออกไปสามสิบไมล์ โดยมีหน้าของอีกฝ่ายอยู่บนจอข้างๆ ข้อความ เมาส์ ไฮเปอร์เท็กซ์ (hypertext) การแก้ไขร่วมกันแบบเรียลไทม์ การประชุมทางวิดีโอ — ครบในการนั่งครั้งเดียว ในยุคที่วิธีใช้คอมพิวเตอร์ตามปกติคือยื่นตั้งบัตรเจาะรู (punched cards) ให้เจ้าหน้าที่ แล้วพรุ่งนี้ค่อยกลับมาเอาผล
The demonstration is remembered for the inventions. The argument underneath it was more radical, and Engelbart had published it six years earlier: the point of a computer is not to automate human work but to augment human intellect, which requires machine and person to be inside the same continuous loop rather than taking turns (SRI, October 1962).
คนจดจำการสาธิตครั้งนั้นที่สิ่งประดิษฐ์ แต่ข้อโต้แย้งที่รองอยู่ข้างใต้สุดโต่งกว่ามาก และ Engelbart พิมพ์มันออกมาตั้งแต่หกปีก่อนหน้า — คอมพิวเตอร์ไม่ได้มีไว้ทำงานของมนุษย์ให้เป็นอัตโนมัติ แต่มีไว้ เสริม สติปัญญาของมนุษย์ และงานแบบนั้นบังคับให้เครื่องกับคนอยู่ในลูปต่อเนื่องเดียวกัน ไม่ใช่ผลัดกันทำทีละฝ่าย (SRI, October 1962)
An interface is shared state between two minds. The machine holds a model of the task. The person holds a model of the machine. An interface is the narrow channel keeping those two models in agreement, and essentially every interface failure is a divergence between them: the file the user believes was saved, the setting they believe is off, the button they believe did nothing. This is why feedback is not politeness. A system that acts without visibly acknowledging it has let the two models drift, and the person will keep operating on the stale one.
อินเทอร์เฟซ (interface) คือสถานะ (state) ที่สองความคิดใช้ร่วมกัน เครื่องถือแบบจำลองในหัว (mental model) ของงานไว้ฝั่งหนึ่ง คนถือ mental model ของเครื่องไว้อีกฝั่งหนึ่ง หน้าที่ของอินเทอร์เฟซคือช่องแคบๆ ที่รักษา mental model สองอันนั้นให้ตรงกัน ความล้มเหลวของอินเทอร์เฟซแทบทุกครั้งจึงเป็นเรื่องเดียวกันหมด คือจุดที่ mental model สองอันเบี่ยงออกจากกัน — ไฟล์ที่ผู้ใช้ (user) เชื่อว่าบันทึกไปแล้ว การตั้งค่าที่เขาเชื่อว่าปิดอยู่ ปุ่มที่เขาเชื่อว่ากดไปแล้วไม่เกิดอะไรขึ้น ด้วยเหตุนี้การตอบสนอง (feedback) จึงไม่ใช่มารยาท ระบบที่ลงมือทำโดยไม่แสดงให้เห็นว่ามันรับรู้ ปล่อยให้ mental model สองอันห่างกันไปเงียบๆ และคนจะทำงานต่อบน mental model อันเก่าที่ล้าไปแล้ว
Show the object; act on it directly. Ivan Sutherland's Sketchpad, an MIT doctoral thesis submitted in 1963, let a user draw with a light pen on a screen and have the drawing answer back — constraints maintained, shapes copied and scaled (Cambridge reissue). Xerox PARC's Alto put the idea into a research machine in 1973; the Xerox Star of April 1981 shipped it commercially, with files as icons on a desktop (Star). Ben Shneiderman named the principle in 1983 and gave it three properties still worth reciting: continuous visual representation of the object of interest; physical actions or labeled button presses in place of complex command syntax; and rapid, incremental, reversible operations whose effect is immediately visible (IEEE Computer 16(8)). The third is the quietly humane one. Reversibility converts a machine from an examination into a place to think, because it makes exploring cost nothing.
แสดงวัตถุ แล้วลงมือกับมันตรงๆ — นี่คือหลักการควบคุมโดยตรง (direct manipulation) Sketchpad ของ Ivan Sutherland วิทยานิพนธ์ปริญญาเอกที่ยื่นต่อ MIT ในปี 1963 ให้ผู้ใช้วาดด้วยปากกาแสง (light pen) บนจอ แล้วภาพวาดตอบกลับ — คงเงื่อนไขไว้ได้ คัดลอกและปรับขนาดรูปทรงได้ (Cambridge reissue) Alto ของ Xerox PARC ย้ายไอเดียนี้ลงเครื่องวิจัยจริงในปี 1973 ส่วน Xerox Star เดือนเมษายน 1981 ขายมันเชิงพาณิชย์ โดยวางไฟล์เป็นไอคอนบนเดสก์ท็อป (Star) Ben Shneiderman ตั้งชื่อหลักการนี้ในปี 1983 พร้อมคุณสมบัติสามข้อที่ยังคุ้มจะท่องจนถึงวันนี้ — แสดงวัตถุที่สนใจด้วยภาพอย่างต่อเนื่อง ใช้การกระทำทางกายภาพหรือกดปุ่มที่มีป้ายกำกับแทนไวยากรณ์คำสั่งอันซับซ้อน และทำงานได้เร็ว ทีละขั้น ย้อนกลับได้ โดยเห็นผลทันที (IEEE Computer 16(8)) ข้อที่สามคือข้อที่มีมนุษยธรรมอยู่เงียบๆ การย้อนกลับได้เปลี่ยนเครื่องจากสนามสอบเป็นที่สำหรับคิด เพราะมันทำให้การลองผิดลองถูกไม่มีต้นทุน
Affordance is a relationship; most of what you see is a signifier. J.J. Gibson introduced affordance in 1966 and developed it in his 1979 ecological theory: what an environment offers a particular creature — a chair-height surface affords sitting to an adult and not to an infant (affordance). Don Norman brought the word into design in 1988 in The Psychology of Everyday Things, later retitled The Design of Everyday Things, then spent twenty-five years watching designers misuse it to mean "visual hint" — so the 2013 revision introduced signifier for the perceptible mark advertising where an action is possible (Norman). The distinction is load-bearing on a touchscreen, because a sheet of glass affords almost nothing physically. Every apparent edge, shadow and handle on it is a signifier someone drew — which is why this discipline can be practiced badly with no immediate penalty: remove the signifiers and the affordances technically remain, invisible.
Affordance คือความสัมพันธ์ ส่วนสิ่งที่ตาเห็นเกือบทั้งหมดคือ signifier J.J. Gibson เสนอคำว่า affordance ในปี 1966 และขยายมันในทฤษฎีเชิงนิเวศปี 1979 — คือสิ่งที่สภาพแวดล้อมมอบให้สิ่งมีชีวิตชนิดหนึ่งโดยเฉพาะ พื้นผิวสูงระดับเก้าอี้เอื้อให้ผู้ใหญ่นั่ง แต่ไม่เอื้อให้ทารกนั่ง (affordance) Don Norman พาคำนี้เข้าวงการออกแบบในปี 1988 ใน The Psychology of Everyday Things ที่ภายหลังเปลี่ยนชื่อเป็น The Design of Everyday Things จากนั้นเขาเฝ้าดูนักออกแบบใช้คำนี้ผิดเป็น "คำใบ้ทางสายตา" อยู่ยี่สิบห้าปี ฉบับปรับปรุงปี 2013 จึงเสนอคำว่า signifier ไว้เรียกร่องรอยที่รับรู้ได้ซึ่งประกาศว่าตรงไหนทำอะไรได้ (Norman) ความต่างข้อนี้รับน้ำหนักทั้งหมดบนทัชสกรีน เพราะแผ่นกระจกแทบไม่ afford อะไรในเชิงกายภาพเลย ขอบ เงา และมือจับที่ดูเหมือนมีอยู่บนจอ ล้วนเป็น signifier ที่มีคนวาดขึ้นมา นี่เองคือเหตุผลที่ศาสตร์นี้ทำแย่ได้โดยไม่ถูกลงโทษทันที ถอด signifier ออก affordance ในทางเทคนิคก็ยังอยู่ แค่มองไม่เห็น
The human is a component with published specifications. Robert Miller measured the response times at which a conversation with a machine stops feeling like one, and Jakob Nielsen restated the same three thresholds decades later: about 0.1 second for an action to feel instantaneous, about one second to keep a person's flow of thought unbroken, about ten seconds before attention leaves altogether (Miller 1968 / Nielsen). Paul Fitts had already quantified pointing in 1954 — the time to reach a target grows with the logarithm of the ratio between distance and target width (Fitts's law), which is why the corners and edges of a screen are its most valuable real estate: they are targets of effectively infinite width, because the pointer stops there. These are the only constants in this book that describe the user rather than the machine, and unlike Moore's law they have not moved in seventy years.
มนุษย์คือส่วนประกอบที่มีสเปกตีพิมพ์ไว้ให้อ่าน Robert Miller วัดเวลาตอบสนองที่บทสนทนากับเครื่องจักรเลิกรู้สึกเหมือนบทสนทนา และ Jakob Nielsen ย้ำเกณฑ์สามค่าเดิมอีกครั้งหลายสิบปีให้หลัง — ราว 0.1 วินาทีเพื่อให้การกระทำรู้สึกเกิดขึ้นทันที ราวหนึ่งวินาทีเพื่อไม่ให้ความคิดของคนขาดตอน ราวสิบวินาทีก่อนความสนใจจะหลุดไปทั้งหมด (Miller 1968 / Nielsen) Paul Fitts วัดการชี้ตำแหน่งออกมาเป็นตัวเลขไว้ก่อนแล้วในปี 1954 — เวลาที่ใช้ไปถึงเป้าหมายโตตามลอการิทึมของอัตราส่วนระหว่างระยะทางกับความกว้างของเป้าหมาย (Fitts's law) มุมและขอบของหน้าจอจึงเป็นทำเลที่แพงที่สุด — มันคือเป้าหมายที่กว้างเป็นอนันต์โดยพฤตินัย เพราะตัวชี้วิ่งไปหยุดตายอยู่ตรงนั้น ค่าคงที่กลุ่มนี้คือกลุ่มเดียวในเล่มที่บรรยายผู้ใช้ ไม่ใช่เครื่องจักร และต่างจากกฎของมัวร์ตรงที่เจ็ดสิบปีมาแล้วมันไม่เคยขยับ
Rendering is one integral you cannot solve, approached from two directions. Rasterization asks, for each triangle, which pixels does it cover — fast, local, and the reason real-time graphics existed at all for thirty years. Ray tracing asks the opposite question, for each pixel, which light arrived here, and follows rays backwards into the scene; Arthur Appel cast the first such rays in 1968 and Turner Whitted made them recursive in 1980, so surfaces could reflect and refract each other (CACM 23(6)). Jim Kajiya then wrote down what both were approximating: the rendering equation of 1986, stating that the light leaving any point is what it emits plus everything it reflects from everywhere else — recursive, with no closed-form solution (SIGGRAPH '86). All of photorealistic rendering is sampling that integral cheaply enough. It took until 2018 for the first GPUs with dedicated ray-tracing units to run the honest method at frame rate (NVIDIA Turing).
การเรนเดอร์ (rendering) คืออินทิกรัลตัวเดียวที่แก้ไม่ได้ และมีทางเข้าหามันสองทาง rasterization ถามว่าสามเหลี่ยมแต่ละรูปคลุมพิกเซล (pixel) ไหนบ้าง — เร็ว เฉพาะที่ และเป็นเหตุผลเดียวที่กราฟิกส์เรียลไทม์มีอยู่ได้ตลอดสามสิบปี ray tracing ถามกลับด้าน สำหรับแต่ละพิกเซล แสงไหนมาถึงตรงนี้ แล้วไล่รังสีย้อนกลับเข้าไปในฉาก Arthur Appel ยิงรังสีแบบนี้เป็นคนแรกในปี 1968 และ Turner Whitted ทำให้มันเป็น recursive ในปี 1980 พื้นผิวจึงสะท้อนและหักเหกันเองได้ (CACM 23(6)) Jim Kajiya เขียนสิ่งที่ทั้งสองวิธีกำลังประมาณค่าอยู่ออกมาเป็นสูตร — สมการเรนเดอร์ (rendering equation) ปี 1986 บอกว่าแสงที่ออกจากจุดใดๆ คือแสงที่จุดนั้นเปล่งเอง บวกทุกอย่างที่มันสะท้อนมาจากที่อื่นทั้งหมด เป็น recursive และไม่มีคำตอบแบบปิด (SIGGRAPH '86) การเรนเดอร์แบบสมจริงทั้งหมดคือการสุ่มตัวอย่างอินทิกรัลตัวนั้นให้ถูกพอ กว่า GPU ตัวแรกที่มีหน่วยประมวลผล ray tracing เฉพาะทางจะรันวิธีที่ซื่อตรงนี้ได้ที่เฟรมเรต (frame rate) จริง ก็ต้องรอถึงปี 2018 (NVIDIA Turing)
Accessibility is the floor, not a ramp bolted on afterwards. The World Health Organization estimates that 1.3 billion people — about one in six — live with significant disability (WHO, 7 March 2023). The web's standard, WCAG 2.2, became a W3C Recommendation on 5 October 2023 and rests on four principles: content must be perceivable, operable, understandable and robust (W3C); its successor remains a working draft (WCAG 3, March 2026). The argument for treating this as foundation rather than compliance chore has a name. Disabled activists in Berkeley took sledgehammers to curbs in the early 1970s, and the first official curb cut followed on Telegraph Avenue in 1972; the ramps turned out to serve parents with strollers, travelers with suitcases and delivery workers with carts — the curb-cut effect, named by Angela Glover Blackwell in 2017 (SSIR). Designing for the constrained case reliably produces a better general case: the rare argument in this book that is both ethical and cheap.
การเข้าถึงได้ (accessibility) คือพื้น ไม่ใช่ทางลาดที่ขันน็อตติดทีหลัง องค์การอนามัยโลกประมาณว่าคน 1.3 พันล้านคน — ราวหนึ่งในหก — อยู่กับความพิการอย่างมีนัยสำคัญ (WHO, 7 March 2023) มาตรฐานของเว็บอย่าง WCAG 2.2 ขึ้นเป็น W3C Recommendation เมื่อวันที่ 5 ตุลาคม 2023 และวางอยู่บนหลักสี่ข้อ — เนื้อหาต้องรับรู้ได้ ใช้งานได้ เข้าใจได้ และแข็งแรงพอ (W3C) รุ่นถัดไปยังเป็นแค่ working draft (WCAG 3, March 2026) เหตุผลที่ควรมองเรื่องนี้เป็นรากฐาน ไม่ใช่งานทำตามกฎ มีชื่อเรียกของมันเอง นักเคลื่อนไหวเพื่อคนพิการใน Berkeley เอาค้อนปอนด์ทุบขอบถนนช่วงต้นทศวรรษ 1970 ทางลาดขอบถนนอย่างเป็นทางการจุดแรกตามมาที่ Telegraph Avenue ในปี 1972 ปรากฏว่าทางลาดพวกนั้นเป็นประโยชน์กับพ่อแม่ที่เข็นรถเข็นเด็ก นักเดินทางที่ลากกระเป๋า และคนส่งของที่เข็นรถสัมภาระ — คือ curb-cut effect ที่ Angela Glover Blackwell ตั้งชื่อไว้ในปี 2017 (SSIR) ออกแบบเพื่อกรณีที่ถูกจำกัดเงื่อนไข แล้วกรณีทั่วไปดีขึ้นตามอย่างสม่ำเสมอ — เป็นข้อโต้แย้งเดียวในเล่มนี้ที่ถูกต้องเชิงจริยธรรมและมีต้นทุนต่ำไปพร้อมกัน
Sutherland received the Turing Award for 1988, Engelbart for 1997, and Ed Catmull and Pat Hanrahan for 2019 (ACM).
Sutherland ได้รางวัล Turing Award ประจำปี 1988 Engelbart ได้ของปี 1997 ส่วน Ed Catmull กับ Pat Hanrahan ได้ของปี 2019 (ACM)
Connections
เชื่อมโยง
Below: chapter 04, because every principle here is rationed by hardware — the frame budget, the specialized processors that made both interfaces and rendering possible. Chapter 05 owns the multiplexing that keeps an interface responsive while the machine does everything else, and chapter 09 is where an interface's delays come from once the other mind is remote. Sideways: chapter 07, since usability must survive years of change by many hands, and chapter 11, whose 1975 list of security principles ended with psychological acceptability — the one this floor is responsible for and the one security most often sacrifices. Above: nothing. This is the top of the tower, and the reason all the hiding below it was worth doing.
ชั้นล่าง: บทที่ 04 เพราะฮาร์ดแวร์เป็นตัวปันส่วนหลักการทุกข้อในบทนี้ — งบเฟรม (frame budget) และตัวประมวลผลเฉพาะทางที่ทำให้ทั้งอินเทอร์เฟซและการเรนเดอร์เกิดขึ้นได้ บทที่ 05 เป็นเจ้าของการสลับใช้งาน (multiplexing) ที่ทำให้อินเทอร์เฟซยังตอบสนองอยู่ขณะเครื่องทำงานอื่นทั้งหมด และบทที่ 09 คือที่มาของความล่าช้าในอินเทอร์เฟซเมื่อความคิดอีกฝ่ายอยู่ไกลออกไป ด้านข้าง: บทที่ 07 เพราะความใช้ง่าย (usability) ต้องรอดผ่านการเปลี่ยนแปลงหลายปีจากมือหลายคน และบทที่ 11 ที่รายการหลักความปลอดภัยปี 1975 ปิดท้ายด้วย psychological acceptability — ข้อที่ชั้นนี้รับผิดชอบ และเป็นข้อที่ความปลอดภัยยอมสละบ่อยที่สุด ด้านบน: ไม่มีอะไรอีก นี่คือยอดหอคอย และเป็นเหตุผลที่การซ่อนทุกอย่างข้างใต้คุ้มค่าที่จะทำ
Open questions
คำถามที่ยังเปิดอยู่
If natural language becomes the interface, what happens to direct manipulation — do Shneiderman's three properties survive when the object of interest is no longer continuously visible and actions are no longer obviously reversible? Interfaces that adapt to a person must first model that person; who holds that model, and what else it serves, is a question the field has largely left to other disciplines. And the oldest one, unanswered since 1968: Engelbart wanted augmentation, not automation. Sixty years on, most of what shipped was automation. Was that a technical inevitability or a commercial one?
ถ้าภาษาธรรมชาติกลายเป็นอินเทอร์เฟซ direct manipulation จะเหลืออะไร — คุณสมบัติสามข้อของ Shneiderman จะรอดไหม เมื่อวัตถุที่สนใจไม่ปรากฏต่อเนื่องอีกต่อไป และการกระทำก็ไม่ได้ย้อนกลับได้อย่างชัดเจนอีกแล้ว อินเทอร์เฟซที่ปรับตัวเข้าหาคนต้องสร้างแบบจำลองของคนคนนั้นขึ้นมาก่อน ใครถือแบบจำลองนั้นไว้ และมันรับใช้อะไรอีกบ้าง เป็นคำถามที่วงการนี้โยนให้สาขาอื่นไปเกือบหมด และคำถามที่เก่าที่สุด ค้างมาตั้งแต่ปี 1968 — Engelbart ต้องการการเสริม (augmentation) ไม่ใช่การทำให้เป็นอัตโนมัติ (automation) หกสิบปีผ่านไป ของที่ส่งออกมาใช้จริงส่วนใหญ่กลับเป็นการทำให้เป็นอัตโนมัติ นั่นเป็นความหลีกเลี่ยงไม่ได้เชิงเทคนิค หรือเชิงพาณิชย์
Go deeper
อ่านต่อ
- Don Norman, The Design of Everyday Things, revised and expanded edition, Basic Books, 2013 — the discipline's one indispensable general-reader book; the author's note on the revision is at jnd.org.
- Matt Pharr, Wenzel Jakob & Greg Humphreys, Physically Based Rendering: From Theory to Implementation — the full text of the 3rd and 4th editions, free, at pbr-book.org.
- Douglas Engelbart, "Augmenting Human Intellect: A Conceptual Framework," SRI Summary Report AFOSR-3223, 1962 — dougengelbart.org.
- Don Norman, The Design of Everyday Things, revised and expanded edition, Basic Books, 2013 — หนังสือเล่มเดียวของศาสตร์นี้ที่ผู้อ่านทั่วไปขาดไม่ได้ บันทึกของผู้เขียนเกี่ยวกับฉบับปรับปรุงอยู่ที่ jnd.org
- Matt Pharr, Wenzel Jakob & Greg Humphreys, Physically Based Rendering: From Theory to Implementation — อ่านฉบับเต็มของรุ่นที่ 3 และ 4 ได้ฟรีที่ pbr-book.org
- Douglas Engelbart, "Augmenting Human Intellect: A Conceptual Framework," SRI Summary Report AFOSR-3223, 1962 — dougengelbart.org