อะไรคือสิ่งสำคัญในบริบทของผู้ใช้เมื่อออกแบบผลิตภัณฑ์ที่น่าสนใจ?

ผู้เขียนขอพาพวกคุณกลับไปในยุค 1989 ก่อนที่จะมีไอโฟน เกม ออฟ โทรน และเน็ตฟลิกซ์

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

นินเทนโดขายเกมบอย เซก้าขายเกมเกียร์ และอาตาริขายลิงซ์ ซึ่งเกมเกียร์และลิงซ์เป็นจอภาพสี มีทั้งหมด 4,096 สี ในขณะที่เกมบอยเป็นสีเทา 4 เฉดบนจอสีเขียว เกมเกียร์และลิงซ์เล่นง่ายกว่ามาก และมีขนาดใหญ่กว่า

จากข้อมูลที่กล่าวมา คุณคิดว่าเกมคอนโซลอันไหนที่คุณจะซื้อ? คำใบ้ เกมคอนโซลอันหนึ่งขายได้ 180.7 ล้านก๊อปปี้ ในขณะที่อีกสองอันที่เหลือขายได้ 3 และ 10.67 ล้านก็อปปี้

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

ทำไมถึงเป็นอย่างนั้นไปได้....?

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

ทีมของนินเทนโดสร้างเกมบอยด้วยการตัดรายละเอียดที่ไม่จำเป็นทิ้งให้หมด พวกเขาใช้เทคโนโลยีชาร์ป โพรเซสเซอร์ซึ่งมีมาตั้งแต่ยุค 1970 พวกเขาทำให้เครื่องเกมบอยมีขนาดเล็กๆ ไม่มีสี และไม่ค่อยใช้ลูกเล่นทางกราฟิก ทำให้มีราคาถูก คนซื้อหาได้ สนนราคาเพียง 90 ดอลล่าร์สหรัฐ ในขณะที่เกมเกียร์ราคา 150 ดอลล่าร์สหรัฐ และลิงซ์ราคา 180 ดอลล่าร์สหรัฐ ถึงแม้มันจะมีขนาดเล็ก แต่พอเหมาะกับกระเป๋าขนาดใหญ่ และสามารถเล่นได้ถึง 30 ชั่วโมงด้วยถ่านขนาด AA 2 ก้อน ในขณะที่เกมเกียร์ต้องใช้ถ่าน AA 6 ก้อนและเล่นได้เพียง 3-5 ชั่วโมงเท่านั้น

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

สวัสดีครับ ยินดีต้อนรับสู่ Part 2 ครับ

เพื่อเป็นการไม่เสียเวลาเรามาดูกันเลย

Split Screens

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

สำหรับแอพหาคู่นี้ ใช้หน้าจอแยกตามแนวทแยงมุม บวกกับคอนทราสต์ของสี ซึ่งจะสร้างความกลมกลืน เนื่องจากมีการสอดคล้องกับเงา

เว็บไซต์สารานุกรม ใช้หน้าจอแยกสำหรับแบ่งหน้ารายการ

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

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

 

แอป Watering Tracker จะใช้หน้าจอแยกแนวนอน: ส่วนบนที่มีพื้นหลังที่มืดเป็นที่ดีสำหรับการนำเสนอแผนภูมิและภาพ ในขณะที่ส่วนที่ต่ำกว่าใช้พื้นหลังโทนสว่าง เพื่อให้อ่านง่าย

 

Bold Typography

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

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

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

Buttonless UI 

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

แอพสารานุกรมนำเสนออินโฟกราฟิกแบบโต้ตอบ สำหรับข้อมูลช้าง การโต้ตอบทั้งหมดกับข้อมูลเกิดขึ้นโดยปราศจากปุ่มต่าง ๆ แต่จะใช้การเลื่อนเพื่อดูข้อมูลแทน

Vibrant and Bold Colors

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

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

Engaging Interface Animation

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

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

Slumber App มีจุดเด่นเรื่องหน้าจอหลัก ภาพ illustration ที่ทำงานร่วมกับ preloading ช่วยให้การรอไม่น่าเบื่อ และบวกกับการเล่นกับความสุนทรีย์

จบ Part 2 จ้า โปรดติดตามชมตอนต่อไป
Complete Web & App Design Course - UX, UI and Design Thinking With Big Data Bootcamp
เรียนรู้ หัวใจหลักสำคัญของการทำ Product ด้วย UX และ UI
การออกแบบโดยใช้ Concept ของ Design Thinking
นำข้อมูลที่ได้มาพัฒนา Product อย่างสม่ำเสมอ โดยใช้ Concept ของ Big Data
รายละเอียดเพิ่มเติมและสมัครที่นี่
หลักสูตรยาว 12 ครั้ง รวมเวลากว่า 72 ชั่วโมง จบมาทำงานได้จริง
ราคาคุ้มค่าที่สุด ตอนนี้มี promotion มา 2 คนลดเพิ่ม 10% 3 คนลดเพิ่ม 15%
สามารถขอ code ส่วนลดได้ที่ page LEAN upskill

ในปี 2018 มีการออกแบบหน้าจอผู้ใช้งานหรือ User Interface(UI) เกิดขึ้นอย่างมากมาย เราจึงทำการรวบรวม การออกแบบหน้าจอที่ผู้ใช้งานส่วนใหญ่นิยมชมชอบ มองแล้วมีความสะดวกสบาย น่าค้นหา และตอบโจทย์ผู้ใช้งาน
Full-Screen Background Images

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

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

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

นี่เป็นตัวอย่างของเว็ปไซต์การกุศลเกี่ยวกับการปกป้องมหาสมุทร เว็ปไซต์มีการปฎิสัมพันธ์ โดยนักออกแบบนี้ใช้ภาพ 2 ชั้น เมื่อทำการเลื่อนจอ ภาพจะขยับไปมา โดยทั่วไปแล้ววิธีนี้มักใช้ตัวหนังสือและรูปภาพเป็นเนื้อหาของข้อความ
Custom Digital Illustrations
ใช้ภาพกราฟิก วิธีการนี้ต้องการสื่อความหมายให้ผู้ใช้งานรับรู้อย่างเป็นธรรมชาติ ส่วนใหญ่จะมาในรูปของตัวมาสคอต(Mascots), ไอคอน และภาพประกอบ นอกจากนี้รูปภาพยังช่วยให้ขยายขอบเขตการรับรู้ของผู้ใช้ที่มีปัญหาด้านข้อความ เช่น เด็กก่อนวัยเรียน หรือเด็กที่มีความบกพร่องทางการเรียนรู้ หรือผู้มีความบกพร่องด้านการอ่าน

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

ภาพ Illustration สำหรับบทความ 3C : Color(สี), Contrast(การตัดกัน) และContent(เนื้อหา)

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

หน้าเว็บไซต์ Digital Agency มีการเล่นกับคำว่า "Goals(เป้าหมาย)" จากภาพเราจะเห็นผู้เล่นบาสเก็ตบอลกำลังชู้ตบาสลงห่วง เต็มไปด้วยความมั่นใจและความแข็งแกร่ง ซึ่งจะสื่อถึงความมั่นใจในการใช้บริการเว็บไซต์นี้

แอพ Cuteen

การใช้ภาพกราฟิกขึ้นมาแบ่งหมวดหมู่ และการจัดเรียงเนื้อหา ทำให้แอพนี้มีเสน่ห์ มีการใช้เทคนิคทำให้ไอคอนกราฟิกดูเคลื่อนที่ เพื่อให้ผู้ใช้งานรู้สึกอยากจะปฎิสัมพันธ์กับแอพฯ
Storytelling with Character Design
การนำกราฟิกเพื่อมานำเสนอเรื่องราวของเว็ปไซต์และแอพต่าง ๆ อย่างตัวอย่าง ก็ใช้ตัวละครกราฟิกเพื่อเสนอนิทานเรื่องราว, สร้างบรรยากาศ, ส่งข้อความ หรือนำเสนอประโยชน์ของเนื้อหา ตัวละครที่สร้างขึ้นช่วยให้ เว็บปฎิสัมพันธ์กับผู้ใช้ในแง่ความเป็นมนุษย์มากขึ้น ทำให้เนื้อหาที่เรานำเสนอนั้นมีชีวิตชีวามากยิ่งขึ้น

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

แนวคิดการออกแบบของแอปนี้ คือการบริการช่วยให้ผู้ใช้สามารถหาที่พักริมทะเล ภาพประกอบนำเสนอบรรยายกาศแห่งการพักผ่อน

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

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

จบแล้วครับสำหรับ PT.I (Part1) โปรดติดตามชมตอนต่อไป~
Complete Web & App Design Course - UX, UI and Design Thinking With Big Data Bootcamp
เรียนรู้ หัวใจหลักสำคัญของการทำ Product ด้วย UX และ UI
การออกแบบโดยใช้ Concept ของ Design Thinking
นำข้อมูลที่ได้มาพัฒนา Product อย่างสม่ำเสมอ โดยใช้ Concept ของ Big Data
รายละเอียดเพิ่มเติมและสมัครที่นี่
หลักสูตรยาว 12 ครั้ง รวมเวลากว่า 72 ชั่วโมง จบมาทำงานได้จริง
ราคาคุ้มค่าที่สุด ตอนนี้มี promotion มา 2 คนลดเพิ่ม 10% 3 คนลดเพิ่ม 15%
สามารถขอ code ส่วนลดได้ที่ page LEAN upskill

ระบบสีของ Material Design สารมารถใช้สร้างสรรค์ธีมสีที่สะท้อนถึงสไตล์หรือแบรนด์ของคุณได้

สารบัญ

พาเลทและการใช้สี
การสร้างธีมสี
เครื่องมือในการเลือกสี

พาเลทและการใช้สี
ระบบสี Material Design ใช้วิธีการจัดการอย่างเป็นระบบเพื่อใช้สีกับ UI ของคุณ ในระบบนี้แม่สีหลัก (Primary color) และสีรอง(Secondary color) จะถูกเลือกเพื่อแสดงถึงแบรนด์ของคุณ สีเข้มและสีอ่อนของแต่ละสีสามารถนำไปใช้กับ UI ของคุณได้หลายวิธี

(more…)