Mobile First

สวัสดีครับวันนี้เป็นวันอังคารที่ 17 ธันวาคม 2562 ก็เข้าใกล้สู่ปีถัดไปแล้วแล้วนะครับปีหน้าก็ปีชวดและก่อนสิ้นปีผมก็มีงานที่ค่อนข้างเยอะทั้งเรื่องของการทำกราฟิคยูเซอร์อินเตอร์เฟสให้บริษัทต่างๆวันนี้ผมเลยคิดว่าเราน่าจะมารีวิวหนังสือชื่อ Mobile First หนังสือเล่มนี้ผมได้มาจากอาจารย์ท่านหนึ่งท่านให้ผมมายืมเป็นหนังสือเล่มเล็กและเก่าพอควรเพราะเขียนตั้งแต่ปี 2011 แต่ก็ยังมีบางอย่างน่าสนใจในเรื่องของแนวคิดผู้เขียนแม้ว่าเทคโนโลยีจะเลปี่ยนไป  หนังสือเล่มนี้แต่งโดย Luke Wroblewski เป็นหนังสือเกี่ยวกับการออกแบบ User Interface และ User experience หนังสือเล่มนี้เขียนเพื่อที่จะให้คนอ่านเข้าสู่ยุคโทรศัพท์มือถือ โฟกัสและจัดลำดับของสิ่งที่สำคัญ และเพื่อให้คุณสร้างนวัตกรรมของผู้ใช้โดยสร้างความสามารถการออกแบบให้โทรศัพท์มือถือและเข้าใจโหมดของการใช้งาน หนังสือเล่มนี้จะโฟกัสตรง Mobile Web Experience นะครับ คือ สิ่งที่ออกแบบในเว๊ปไซด์เอามาเล่นบนมือถือ จะต่างยังไงกับบนคอมพิวเตอร์

ช่วงแรกผู้เขียนพูดย้อนหลังในปี 2006 ตอนนั้นก็มี Motorola Z3 ซึ่งมีหน้าจอขนาดเล็กมาก จนกระทั่งปี 2009 iPhone ตัวแรกออกมา ทำให้คนที่ไม่สามารถมีคอมพิวเตอร์ได้สามารถเข้าถึงข้อมูลออนไลน์ได้ทางเว๊ปไซด์ ในปี 2010 เครือข่ายโทรศัพท์มือถือมีความเร็วเป็น 2 เท่า ตอนนั้นก็มีโทรศัพท์ iPhone 3Gs ส่วนผสมระหว่างการใช้มือถือกับคอมพิวเตอร์ เช่น การเล่น Facebook ผ่านมือถือและเว๊ปทำให้ผู้เล่นมีส่วนร่วมมากขึ้น

Constraints

ปัจจัยที่ทำให้การออกแบบหน้าจอโทรศัพท์มือถือยากคือขนาดหน้าจอ เพราะขนาดสัดส่วนของเว๊ปบนคอมพิวเตอร์ คือ 1024×768 pixels นั่นหมายความว่าถ้าหน้าจอมือถือมีขนาด 320×480 pixel 80% ของพื้นที่จะหายไป ยกตัวอย่างเช่นเว๊ปไซด์สายการบินของ Southwest Airline ซึ่งมีทั้งโฆษณาและลดแลกแจกแถมต่างๆ จะไม่สามารถนำไปใส่ในมือถือได้ทั้งหมด เพราะฉะนั้นผู้เขียนบอกว่าเราต้องใส่สิ่งที่จำเป็นที่ใช้บนมือถือ เช่น ถ้าผู้ใช้บริกาสสายการบิน function ที่เขาต้องใช้จริงๆ คือ การจองตั๋ว การเช็คอิน การเช็คสถานะเครื่องบิน การเช็คไมค์ และการแจ้งเตือน 

ในหนังสือเล่มนี้ก็พูดถึงสถิติการใช้โทรศัทพ์มือถือ จะพบว่า 84% ของผู้ใช้ได้ใช้โทรศัพท์มือถือที่บ้าน  74% ใช้ระหว่างตอนเข้าแถวหรือรอนัดหมาย 69% ใช้สำหรับช๊อปปิ้ง 62% ใช้ระหว่างดูทีวี 47% ใช้ระหว่างการเดินทาง สถิติที่ว่าใช้มือถือที่บ้านมากที่สุดอาจจะบอกอะไรได้บ้าง ในช่วงนั้นที่อีเมลล์กำลังดังอาจจะเป็นไปได้ว่าผู้ใช้เช็คอีเมลล์ที่บ้าน ผู้เขียนได้พูดถึงพฤติกรรมอันหนึ่งที่น่าสนใจ คือ One eye ball and one thumb ซึ่งแปลว่ามือข้างหนึ่งอยู่กับมือถือ อีกข้างใช้นิ้วในการควบคุม ซึ่งก็คือคนส่วนมากจะใช้งานมือถือในหลายๆสถานที่และเราก็ใช้ความตั้งใจบางส่วนในการมองมัน อันนี้ก็จริงนะครับ เวลาเราออกแบบ app แล้วเราต้องมองว่า ผู้ใช้อาจจะไม่ได้ใช้อยู่ที่เดียว เขาอาจจะทำกิจกรรมอื่นๆ อยู่ก็ได้ เช่น เดินไปเดินมา นั่งรอ เขาอาจจะไม่ได้มีสมาธินั่งเล่นมือถือเลยทีเดียว อันนี้นักออกแบบก็ต้องมาคำนึงถึง

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

Capabilities

มาถึงเรื่องความสามารถของสมาร์ทโฟน ก็จะพบว่าเราสามารถที่จะใช้ GPS WiFi เสาตั้งสัญญาณแบบสามเหลี่ยม เสาตั้งสัญญาณแบบเดี่ยว และ IP ความเที่ยงตรงของ GPS ประมาณ 10 เมตร ส่วน WiFi ประมาณ 50 เมตร ผมเคยมีประสบการณ์เรื่อง iPhone หายและใช้ Find my iPhone ค้นหา แต่ท้ายสุดเราก็ไม่สามารถรู้ได้ว่าโทรศัพท์อยู่ในมือใครเพราะมันไม่สามารถบอกตำแหน่งแบบละเอียดได้  อีกอันก็คือการใช้ข้อมูลจาก IP หรือ Internet Protocol  เหมาะกับการสืบค้นว่าคนนั้นอยู่ประเทศไหนถึง 99% ส่วนเมืองไหนก็ประมาณ 46%  

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

Organization

มาถึงเรื่องการจัดการ Google ได้แบ่งพฤติกรรมผู้บริโภคออกเป็นสามกลุ่ม คือ เร่งด่วนเดี๋ยวนี้ ซ้ำ และน่าเบื่อ เช่น 

• Lookup/Find พฤติกรรมที่เกี่ยวกับมองหาก็คือพฤติกรรมที่ผู้ใช้ต้องการคำตอบของสิ่งบางอย่างเดี๋ยวนี้ ซึ่งอาจจะเกี่ยวข้องกับสถานที่ของผู้ใช้ ณ ปัจจุบัน อันนี้ก็คือเรื่องความเร่งด่วน ยกตัวอย่างเช่น การจองตั๋วเครื่องบิน
• Explore/Play พฤติกรรมที่ผู้ใช้แสวงหาหรือเล่น ผู้ใช้ใช้มือถือฆ่าเวลาขณะรอ เช่น รอรถไฟฟ้า รอทานอาหาร เราจะสังเกตได้ว่าคนจะขวักมือถือออกมาขณะรอ อันนี้สืบเนื่องมาจากความน่าเบื่อ เช่น  การดู YouTube 
• Check In/Status พฤติกรรม Check in หรือเช็คสถานะ มีบางสิ่งสำคัญที่เปลี่ยนตลอดหรือต้องคอยปรับ ผู้ใช้ต้องการที่จะอยู่เป็นแนวหน้าของสิ่งนั้น เช่น ช่อง ESPN ข่าวกีฬา
• Edit/Create พฤติกรรมที่ต้องทำให้สำเร็จไม่สามารถรอได้ อันนี้ก็เป็นส่วนผสมของ ความเร่งด่วนและงานเล็กๆ เช่น การตอบอีเมลล์ อันนี้สะท้อนว่าถ้าทิ้งไว้ก็จะลืม 

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

ในเรื่องของ Navigation กับ Content ตรงนี้ก็อาจจะต้องมาชั่งตวงกัน ผมเคยเห็นบาง app ที่มีจำนวน Menu ประมาณ 3 เมนูอยู่ในหน้าเดียวกัน  บางทีเราก็อาจจะเจอ Tab อยู่ด้านบนจำนวนเยอะทำให้ผู้ใช้อาจจะงงเพราะแต่ละเมนูก็จะแยกทางเดินไปคนละทิศทาง เพราะฉะนั้นเราต้องรู้ว่า user มาใช้ app นี้เพื่ออะไรและพยายามทำให้เขาถึงเป้าหมายเร็วที่สุด ดังนั้นการเน้นที่เนื้อหาที่ตรงประเด็นเสมอก่อน (Content) ก่อนการนำทาง (Navigation) จะทำให้ผู้ใช้เข้าถึงสิ่งที่ต้องการ แล้วท่านอาจจะมีคำถามว่าถ้าเรามีเนื้อหาเยอะจะเอาเมนูไปซ่อนไว้ที่ไหน คำตอบก็คือ เราอาจจะวางเมนูไว้ด้านบน เมื่อกดลงมาก็จะขยายส่วนเมนู ในเรื่องของ Navigation เราก็จะเห็นว่าโทรศัพท์ส่วนใหญ่วางเมนูหลักไว้ด้านล่าง เช่น Facebook ก็จะมี Home Profile Groups Notifcation ในบางมือถือของ Android ใส่ Physical menu หรือ ที่เป็นเมนูแบบตายตัวไว้ด้านล่าง ทำให้อาจจะสับสนกับเมนูที่มีอยู่ในจอ  หลังๆพวกที่เป็น Physical menu ก็จะหายไปแล้วถ้าท่านสังเกต

Actions

ตอนนี้ก็มาพูดถึงเรื่องการสัมผัส iOS Human Interface Guidlines ของ Apple ได้แนะนำว่าขนาดของนิ้วมือที่สัมผัสคือ 44×44 points สาเหตุที่ใช้ points มากกว่า pixel เพราะว่าแต่ละหน้าจอจะมีความแตกต่างของความละเอียดไม่เท่ากัน Microsoft Windows Phone โดยมีขนาดของ icon ประมาณ 9 มิลลิเมตร และช่องว่งระหว่าง icon คือ 2 มิลลิเมตร ถ้าเราไม่เว้นระยะห่างให้มากก็อาจจะเกิดปัญหาของการกดผิด แล้วท่านอาจจะมีคำถามว่าส่วนไหนของหน้าจอที่นิ้วมือเราสัมผัสมากที่สุด คำตอบก็คือ ด้านซ้าย เพราะว่าปกติคนถนัดขวาซึ่งมีประมาณ 70-90% ใช้นิ้วมือขณะสัมผัสมือถือด้วยมือเดียว เพราะฉะนั้นคนส่วนใหญ่ก็จะใช้นิ้วโป้งในการควบคุม

คราวนี้มาถึง gesture ก็คือ ท่าทางของนิ้วในการสัมผัส ผู้เขียนตอนแรกก็ยังกังวลว่าแต่ละเครื่องมือจะมีท่าทางต่างกัน แต่ท้ายสุดก็พบว่าส่วนใหญ่จะมีความคล้ายกันมากกว่าแตกต่าง ตัวอย่าง gesture ได้ แก่ Tap การแต๊ะอย่างเร็ว โดยใช้นิ้ว  Double tap คือ การสัมผัสเร็วๆสองครั้ง Drag คือ การลาก Flick คือลากแบบเร็วๆ Pinch คือการใช้สองนิ้วเข้ามาใกล้กัน อันนี้ใช้กับการซูม Spread จะตรงกันข้ามกับ Pinch ก็คือการกางออก Press ก็คือการกดแช่นานๆ 

ท่าต่อไปนี้เป็นท่ายากครับ ผมไม่เคยเหมือนกัน เช่น การใช้ Press and tap ใช้นิ้วหนึ่งกดอีกนิ้วหนึ่ง tap    Press and drag คือ กดแล้วลาก และRotate คือ ใช้สองมือแล้วหมุนเป็นวงกลม 

NUI หรือที่เรียกว่า Natural User Interface ก็คือผู้ใช้ Intuitive action อย่างธรรมชาติ เช่น Speech recognition การแปลงเสียงเป็นข้อความ หรือ Gesture recognition การจับท่าทางการเคลื่อนไหวของผู้ใช้เพื่อสั่งการ Brain machine interface การสั่งการโดยใช้สมอง อันนี้เหมาะกับกลุ่มคนพิการ 

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

Inputs

การป้อนข้อมูลลงบนมือถือ ผู้เขียนได้กล่าวว่า กฎโดยทั่วไปคือพยายามจำกัดการป้อนข้อมูลบนมือถือ แต่เทคโนโลยีปัจจุบันสามารถป้อนข้อมูลได้หลากหลาย ผ่านการสัมผัส ไมโครโฟน กล้องวีดีโอ เราไม่ควรประมาทว่าคนส่วนใหญ่ไม่กรอกข้อมูลบนมือถือเพราะมีขนาดเล็ก ยังมีตัวอย่างที่มีคนสั่งซื้อเครื่องบินราคา $265,000 โดยใช้ eBay app 

ถ้าเราสังเกตพื้นที่มือถือขนาดเล็กก็พบว่ามันไม่เหมือนบนหน้าจอคอมพิวเตอร์ที่มีการจัดกั้นหน้าของข้อความ หรือมี column หลายๆ อันคล้ายหนังสือพิมพ์ ส่วนที่จะเปลืองเนื้อที่ต่อมาคือ คียบอร์ด ดังนั้นตัว input form ต่างๆ ก็พยายามให้ชิดด้านบนเพราะเมื่อเวลาพิมพ์ตัวคียบอร์ดจะไม่บดบังฟอร์ม ตัวอย่างของ input ได้แก่การ Sign in ซึ่งปกติเราก็จะเขียน Label อยู่ด้านบนและช่องกรอกด้านล่าง เช่นให้กรอก user name และ password บางครั้งแล้วก็จะมีการประหยัดพื้นที่โดยการตัด Label ด้านบนออกไปแล้วใช้ตัวอักษรสีเทาเขียนไว้ในช่อง input แทน

มาตรฐานของตัว Input ที่ผู้เขียนเล่าก็มี checkbox คือ ปุ่มให้ติ๊ก radio button คือ ปุ่มวิทยุ  Password field คือ ช่องใส่รหัสผ่าน Dropdown list คือ รายการที่เลื่อนลงมาได้  ตัวอย่างการใส่ input อย่างเช่น ปฏิทิน ซึ่งถ้าเราดูในมือถือของ iPhone ก็จะคล้ายกับวงล้อหมุน spinner ซึ่งใน Android ก็เป็นรูปปฏิทินเลย ในความคิดของผมสองอันนี้มีวิธีการต่างกัน คือ ถ้าเป็น spinner หมุนจะสามารถใส่ข้อมูลได้ไว แต่อาจจะไม่สามารถมองเห็นภาพรวมได้เหมือน Android ที่เอาปฏิทิน  เราสามารถรู้ได้ว่าวันที่เราเลือกติดเสาร์หรืออาทิตย์หรือเปล่า แต่ข้อเสียของปฏิทินก็คือมีขนาดเล็กและใช้เวลาในการเลือกที่นานกว่า

นอกจากการกรอกข้อมูลโดยวิธีปกติแล้ว เรายังมีการกรอกข้อมูลด้วยการใช้ NFC หรือ Near Field Communication ก็คือเมื่อเอามือถือเข้าใกล้กับเครื่องส่งก็สามารถดึงข้อมูลได้ นอกจากนี้ Google ได้พัฒนาการกรอกข้อมูลโดยใช้กล้อง เช่น Google photo สามารถถ่ายภาพแล้วแปลงตัวอักษรบน magazine มาเป็นตัวอักษรได้

Layouts

ส่วนของ Layout ซึ่งถ้าพูดถึง app เดี๋ยวนี้ก็จะพบว่าตัวโทรศัพท์มือถือถ้าทำจากเว๊ปก็จะมีประเด็นเรื่องของขนาดสำหรับ Mobile web เพราะขนาดจะแตกต่างระหว่างเว๊ปไซด์และมือถือ เพราะโทรศัพท์มือถือขนาดหน้าจอเล็ก และยังสามารถปรับแนวเป็นทั้งตั้งและนอน ตรงจุดนี้จึงมี Concept ของ Fluidy, flexibity และ Responsive เกิดขึ้น ถ้าต้องการทำเว๊ปมือถือ อาจจะต้องใช้ CSS3 เข้ามาช่วย เช่น ถ้าหน้าจอเล็กมันก็จะยืดหรือหดตามตัว  ในขณะที่ app ปัจจุบันถ้าเราลองสังเกตดู บาง app ก็ไม่ได้ตั้งให้เราปรับได้ เช่น Facebook app เราก็จะเล่นได้แค่แนวตั้งแนวเดียว ในขณะที่ YouTube app เราสามารถดูได้ทั้งแนวตั้งและนอนตอนดูหนัง มิฉะนั้นท่านก็จะดูหนังด้วยจอที่แคบ  ส่วนเรื่องของ Fluid ปัจจุบันก็มี app ที่ช่วยให้เอาเครื่องมือถืออื่นมาเป็น monitor เสริมได้ด้วย เช่น Duet app อันนี้เราก็สามารถทำงานบนมือถือได้เผื่อถ้าเราอยากจะเล่นกับ app พวก paint brush ที่ไม่อยากจะสลับหน้าจอไปมา 

สรุปหนังสือเล่มนี้นะครับ

1. พยายามใช้ประโยชน์จากการโตของตลาดมือถือให้มากที่สุด ซึ่งต้องพยายามเน้นประสบการณ์ของผู้ใช้
2. ให้เรารู้ถึงข้อจำกัดของมือถือ ทั้งในเรื่องของขนาด การใช้งานสถานที่ต่างๆ
3. ให้พยายามคิดถึงการออกแบบในเรื่องส่วนต่อประสานหรืออินเตอร์เฟสที่มีอยู่ในปัจจุบันและอนาคต เช่น NUI, Inputs และ Layouts