โลกคืออินเทอร์เฟซของเรา – วิวัฒนาการของการออกแบบ UI

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

วิวัฒนาการของการออกแบบ UI สามารถแบ่งออกเป็นสี่ช่วงเวลา: อายุของเครื่องมือ อายุของเครื่องจักร อายุของซอฟต์แวร์ และอายุของตนเอง ด้วยการเติบโตอย่างรวดเร็วนี้ การสำรวจปฏิสัมพันธ์ของมนุษย์กับวัตถุ สิ่งแวดล้อม และเทคโนโลยีจึงกลายเป็นสิ่งจำเป็น

ยุคแห่งเครื่องมือ

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

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

ยุคแห่งเครื่องจักร

การปฏิวัติอุตสาหกรรมเน้นผลิตภาพ ในช่วง "ยุคของเครื่องจักร" เราสร้างวัตถุตามขนาดเพื่อช่วยให้ชีวิตของเราง่ายขึ้น เป็นเวลาที่ฮาร์ดแวร์ยังคงเป็น "ส่วนต่อประสานผู้ใช้" หลัก

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

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

ยุคของซอฟต์แวร์

ซอฟต์แวร์ต้องการ "อินเทอร์เฟซผู้ใช้" และการค้นหาโมเดลที่ผู้ใช้จะนำไปใช้ได้ง่าย นักออกแบบ UI หันไปใช้พฤติกรรมของผู้คนและการออกแบบฮาร์ดแวร์รุ่นก่อนๆ เพื่อหาแรงบันดาลใจ

ผู้คนมีรูปแบบแป้นพิมพ์ของเครื่องพิมพ์ดีดอยู่แล้ว พวกเขารู้วิธีพิมพ์อยู่แล้ว ดังนั้นความก้าวหน้าตามธรรมชาติคือการเริ่มโต้ตอบกับข้อความบนหน้าจอดิจิทัลในลักษณะเดียวกัน

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

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

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

Apple เป็นผู้นำเทรนด์นี้อย่างมีชื่อเสียงภายใต้การกำกับดูแลของ Steve Jobs จนกระทั่ง Jonathan Ive มีอิทธิพลมากขึ้นใน Apple ที่การออกแบบ skeuomorphic ค่อย ๆ พัฒนาเป็นสไตล์ "ประจบ" ซึ่งทำเครื่องหมายโดยการเปิดตัว iOS7 ในปี 2013 โลกพร้อมที่จะก้าวกระโดดไปสู่ความหมายที่แท้จริงน้อยลงและตอนนี้ก็สามารถชื่นชม ความเรียบง่ายของอินเทอร์เฟซที่เรียบง่าย

iOS Human Interface Guidelines ของ Apple สนับสนุนให้นักออกแบบเปลี่ยนกรอบความคิดจาก “ กรอบ การไล่ระดับสี และเงาตก ” (ซึ่งอาจนำไปสู่องค์ประกอบ UI ที่ดูหนักกว่า) และมุ่งเน้นที่เนื้อหามากขึ้นและอนุญาตให้ UI มีบทบาทสนับสนุน

การออกแบบวัสดุของ Google ยังเปลี่ยนไปสู่การนำเสนอมิติที่ 3 ที่แตกต่างกันด้วยการให้ความลึกของผืนผ้าใบดิจิทัลทั้งหมดด้วยเลเยอร์ที่ละเอียดอ่อนและเงาตกกระทบ ตรงข้ามกับองค์ประกอบ UI แต่ละรายการที่แสดงในรูปแบบ skeuomorphism

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

สัมผัสคือมนุษย์เป็นศูนย์กลาง

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

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

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

UI แบบสัมผัสมาในราคา

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

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

กล่าวอีกนัยหนึ่ง UI แบบสัมผัสมาในราคา ตามเทรนด์ นักออกแบบ UI บางคนได้ซ่อนฟังก์ชันที่จำเป็นมากมายและการโต้ตอบที่พร้อมใช้งานเบื้องหลังส่วนหน้าที่ทันสมัย เมนูแฮมเบอร์เกอร์ที่แพร่หลายเป็นตัวอย่างหนึ่ง มันมีปัญหาการใช้งานเพราะถือว่าเป็นการนำทางที่ซ่อนอยู่ พวกมันมีการค้นพบได้ต่ำ ดังนั้นจึงมีประสิทธิภาพน้อยลง

ปัญหาที่ทวีความรุนแรงขึ้นคือการแข่งขันที่รุนแรงระหว่าง Android และ iOS โดยที่ iOS เป็นผู้นำในขั้นต้นและลดแนวทางอินเทอร์เฟซสำหรับมนุษย์ลงอย่างมาก ความเรียบง่ายดูสวยงาม แต่นักออกแบบซ่อนองค์ประกอบที่น่าเกลียดหรือซับซ้อน ซึ่งมักจะทำให้อินเทอร์เฟซใช้งานยากขึ้น Android เลียนแบบสิ่งที่เลวร้ายที่สุดหลายอย่างที่ Apple นำมาใช้ และมันไม่ได้เป็นเช่นนั้นจนกระทั่งมีการเปิดตัวดีไซน์ Material ที่ความสอดคล้องของ UI กลายเป็นมาตรฐานในการออกแบบ Android

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

อินเทอร์เฟซผู้ใช้เป็นเหมือนเรื่องตลก ถ้าจะให้อธิบายมันก็ไม่ดี Martin Leblanc, iconfinder.com

Touch UI ใช้งานได้กับหน้าจอขนาดใหญ่เท่านั้น

ทุกวันนี้ อุปกรณ์สวมใส่ได้มีปฏิสัมพันธ์กับหน้าจอขนาดเล็กเช่นนี้ได้ยาก เป็นการยากที่จะนำทางสิ่งใดที่ซับซ้อนเกินไปโดยใช้คุณสมบัติที่เน้นฮาร์ดแวร์เป็นหลัก เช่น Digital Crown ของ Apple การออกแบบทบทวนพฤติกรรมในโลกแห่งความเป็นจริงของนาฬิกา แต่ใช้ในสถานการณ์นี้ ทุกอย่างจะใช้เวลานานและเที่ยวยุ่งยิ่ง อย่างไรก็ตาม อุปกรณ์อัจฉริยะบางตัวไปในทิศทางที่ถูกต้อง

Internet of Things (IoT) ขยายการใช้อุปกรณ์ประจำวันของเราไปสู่สภาพแวดล้อมแบบโต้ตอบและเป็นตัวอย่างที่ดีของการเลียนแบบฮาร์ดแวร์ในโลกแห่งความเป็นจริงอย่างถูกต้อง ทำให้การทำงานอยู่ในระดับแนวหน้า ต่างจาก Digital Crown หน้าปัดที่ใหญ่ขึ้นนั้นใช้งานได้ดีและสมเหตุสมผล

Nest Learning Thermostat เป็นตัวอย่างของผลิตภัณฑ์ที่แม้จะใช้งานง่ายแต่ก็เข้ากันได้อย่างลงตัวด้วยการใช้ภาพที่มองเห็นจากการออกแบบตัวควบคุมอุณหภูมิแบบเดิมและรูปแบบที่ผู้คนมักใช้หน้าปัด

Force Touch ซึ่งเป็นเทคโนโลยีที่เปิดตัวครั้งแรกในปี 2014 ระหว่างการเปิดตัว Apple Watch ได้ถูกนำไปใช้กับ iPhone รุ่นที่ 6 และได้ขยายไปยังอุปกรณ์ทุกประเภทอย่างรวดเร็ว

UI พัฒนาอีกครั้งเพื่อเลียนแบบแนวทางแบบโบราณ

ระดับถัดไปในวิวัฒนาการของการออกแบบ UI แสดงให้เห็นว่าทุกสิ่งมาเต็มวงกลมได้อย่างไร Apple Pencil เป็นทั้งเทคโนโลยีฮาร์ดแวร์และซอฟต์แวร์ที่ดีที่สุด ช่วยให้ผู้ใช้วาดและเขียนในโลกดิจิทัล ในขณะที่ Apple Pencil ได้ทำให้แนวคิดนี้กลายเป็นกระแสหลัก เมื่อไม่นานมานี้ (2007) ที่จ็อบส์กล่าวอย่างมีชื่อเสียงว่า "ใครต้องการสไตลัส" ก่อนเปิดตัวเทคโนโลยีมัลติทัชของไอโฟน

สตีฟจ็อบส์มีประเด็นเกี่ยวกับการใช้งานและความยากลำบากในการใช้สไตลัสขนาดเล็กบนหน้าจออุปกรณ์พกพาขนาดเล็ก มันลงเอยไม่ทำงานสำหรับ Microsoft อุปกรณ์ Windows Mobile รุ่นแรกๆ ส่วนใหญ่มาพร้อมกับสไตลัส และเทคโนโลยีป้อนข้อมูลแบบสัมผัสหลักคือหน้าจอสัมผัสแบบต้านทาน ซึ่งมักต้องใช้สไตลัสในการป้อนข้อมูล เครื่องมือเหล่านี้ไม่เหมาะสมในขณะนั้น ทำให้ผู้คนต้องใช้อุปกรณ์ที่เหมือนปากกาเพื่อใช้งาน UI บนมือถือ รู้สึกไม่เป็นธรรมชาติ

เมื่อหน้าจอแบบพกพามีขนาดใหญ่ขึ้น ก็ถึงเวลาที่จะใช้อุปกรณ์แยกต่างหากสำหรับการป้อนข้อมูล (รูปวาดและการเขียนด้วยลายมือ) ที่ให้ความรู้สึกเหมือนปากกา เป็นเหตุผลที่ Apple Pencil เปิดตัวใน iPad Pro ขนาดใหญ่แทนที่จะเป็นรุ่น 9.7 และ 7.85 นิ้วที่เล็กกว่า

Apple Pencil ให้ความสำคัญกับมนุษย์เป็นหลัก เพราะมันใช้สองสิ่งที่คุ้นเคยอยู่แล้ว ได้แก่ ดินสอและแท็บเล็ต ไม่จำเป็นต้องเรียนรู้อะไรใหม่ๆ เพื่อใช้งาน สมองของมนุษย์คุ้นเคยกับการเขียนแบบนี้มาตั้งแต่บรรพบุรุษของเรากดสไตลัสทื่อๆ ลงในแผ่นดินเหนียวเปียกประมาณ 3,000 ปีก่อนคริสตศักราช

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

ก้าวข้ามการสัมผัส – VUIs

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

อินเทอร์เฟซผู้ใช้เสียงช่วยปรับปรุงประสบการณ์ผู้ใช้ทุกประเภท และบางคนเชื่อว่าเสียงจะมีอำนาจ 50% ของการค้นหาทั้งหมดภายในปี 2020

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

อินเทอร์เฟซผู้ใช้กำลังกลายเป็นโลกรอบตัวเรา

เพื่อช่วยให้โลกแวดล้อมกลายเป็นอินเทอร์เฟซผู้ใช้ เทคโนโลยีและโครงการขั้นสูงของ Google (ATAP Lab) ได้พัฒนา Project Soli ซึ่งเป็นเทคโนโลยีการตรวจจับแบบใหม่ที่ใช้เรดาร์ขนาดเล็กในการติดตามการเคลื่อนไหวของมือมนุษย์ การเปิดใช้งานการโต้ตอบด้วยท่าทางสัมผัสแบบไม่ต้องสัมผัส การโต้ตอบให้ความรู้สึกทางกายภาพและตอบสนอง เนื่องจากการตอบสนองนั้นเกิดจากความรู้สึกสัมผัสของนิ้วมือที่สัมผัสกัน

เทคโนโลยีและหน้าจอที่เราใช้ในปัจจุบันกำลังหายไปในสภาพแวดล้อมของเรา IoT (Internet of Things) และ AI พร้อมการช่วยเหลือด้วยเสียงอยู่ที่นี่แล้ว เป็นจุดเริ่มต้นของยุค "ความฉลาดทางสิ่งแวดล้อม" ที่อุปกรณ์จำนวนมากทำงานร่วมกันเพื่อสนับสนุนผู้คนในการดำเนินกิจกรรมในชีวิตประจำวัน ด้วยเหตุนี้ UI บนหน้าจอจึงค่อยๆ หายไป

ดีไซเนอร์จะออกแบบอย่างไรสำหรับโลก “ปัญญารอบข้าง” ที่เปิดใช้งาน AI? อะไรคือความหมายสำหรับวิวัฒนาการในอนาคตของการออกแบบ UI?

ใน "โลกใหม่" นี้จะเน้นที่การออกแบบประสบการณ์ ไม่ใช่ UI

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• การออกแบบ VUI – ส่วนต่อประสานผู้ใช้เสียง
• UI ที่มืด ความดีและความชั่ว สิ่งที่ควรทำและไม่ควรทำ
• หลักการฮิวริสติกสำหรับอินเทอร์เฟซมือถือ
• การออกแบบ UI ในอนาคตโดยไม่มีปุ่ม
• ทบทวนการออกแบบส่วนต่อประสานผู้ใช้สำหรับแพลตฟอร์มทีวี