Input ในมือถือนั้นมีแนวทางในการใช้ดังนี้

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

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

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

ส่วนของคำตอบ
          แบ่งออกเป็น 3 แบบดังนี้

• แบบมาตรฐาน เป็น Input พื้นฐานที่ใช้ใน website ได้แก่ checkbox, radio, password, select, file pick, submit buttons และ plain text
• แบบนอกเหนือจากมาตรฐาน เป็นข้อยกเว้นสำหรับมือถือสำหรับแบบมาตรฐานเนื่องจากมีการแสดงผลที่ต่างไปในแต่ละรุ่นมือถือ จึงควรจะใช้ให้เข้ากับข้อมูล, เหมาะสมกับหน้าจอและการแสดงผล
• แบบมาตรฐานใหม่ เป็น Input ที่มีเพิ่มใน html5 ที่เข้ามาช่วยให้การใส่ Input นั้นถูกต้องตามรูปแบบที่กำหนดไว้ (สามารถดู Input type ใหม่ได้ที่ : http://www.w3schools.com/html/html5_form_input_types.asp) type ของ input นั้นจะบังคับ keyboard ให้สามารถใส่ค่าที่ต้องการได้เท่านั้น (จะเห็นได้ชัดจาก keyboard IOS ดูตัวอย่างได้ที่ : http://mobileinputtypes.com/ ) นอกจากนี้ใน IOS จะปิด auto capitalize และ auto correct เมื่อ Input type email, password, URL และกรณีจำเป็นอื่นๆ แต่ในส่วนของ Input type ใหม่นี้จะมีบาง browser ที่ไมได้ support อยู่ด้วย

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

การจัดวางคำถาม
มีหลัก 3 ส่วนที่ควรพิจารณา ได้แก่

• ลำดับของคำถามที่เกี่ยวข้องกัน ควรจะมีการรวมกลุ่มคำถามที่เกี่ยวข้องกันแล้วตัดคำถามที่ไม่จำเป็นหรือเลือกเฉพาะคำถามที่ต้องการคำตอบเพื่อให้ได้หน้าที่สั้นลง
• การจัดการกับคำตอบแนวตั้ง อาจจะซ่อนคำตอบบางส่วนเอาไว้เพื่อให้สามารถอ่านคำถามได้อย่างต่อเนื่อง
• Input  ที่ตอบสนองทันที มีบางกรณีที่ใส่ input แล้วแสดงผลในทันทีซึ่งส่วนที่ใส่เข้ามาใหม่เหล่านั้นจะต้องปรับให้เหมาะสมกับ layout มือถือ

เมื่อออกการจัดวางคำถามจะต้องคำนึงถึง keyboard ในมือถือด้วย ควรจะให้ผู้ใช้เห็นคำถามและคำตอบเมื่อ keyboard ในมือถือแสดงขึ้นมา

ส่วนที่นอกเหนือกจาก input
          Input ไม่ใช่เป็นเพียงการพิมพ์ข้อมูล และส่วนมากสามารถให้ผู้ใช้มีส่วนโดยไม่รู้ตัวและนอกจากนี้ยังมีเทคโนโลยี Google Goggles ค้นหาจากรูปภาพ (เหมาะกับสิ่งที่อธิบายด้วยคำพูดได้ยาก), เทคโนโลยีไร้สายระยะสั้น NFC ระบบสื่อสารระยะสั้นที่สามารถทำให้มือถือใช้ digital barcodes ได้ และเทคโนโลยีอื่นๆ ที่เราควรจะศึกษาเพื่อให้ได้ Input แบบใหม่ๆ เพิ่มขึ้น

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

FINDING THE TUBE

ยกตัวอย่างของ รถไฟใต้ดินลอนดอน หากเราจะเดินทางโดยรถไฟใต้ดินซึ่งมีมากมายหลายสาย ถ้าเปิดจากคอมพิวเตอร์ ก็คงทำได้แค่เพียงดูจากแผนที่แล้วก็ไปตามทางนั้น แต่เทคโนโลยีของมือถือที่มีตอนนี้ ทำได้ง่ายกว่านั้น โดยการใช้แอพพลิเคชั่น “Nearest Tube” ใช้ความสามารถของโทรศัพท์มือถือ (กล้อง,location,detection, magnetometer, and accelerometer) เทำให้รู้ตำแหน่งของเราในตอนนั้นและตัวแอพพลิเคชั่นก็จะนำทางเราไปได้อย่างถูกต้อง โดยมองจากหน้าจอมือถือแล้วกำหนดทิศทางที่เราจะไปได้เลย
accelerometer เป็นเซ็นแซอร์ที่ใช้วัดว่าอุปกรณ์มีการเครื่อนไหว

Location detection

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

Device orientation/accelerometer

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

Touch

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

EXTENDING YOUR CAPABILITIES

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

• ทิศทาง : จากเข็มทิศดิจิตอล
• หมุน : 360 องศา ของการเคลื่อนไหว
• Audio: input จาก ไมโครโฟน; output ไปยัง ลำโพง
• วิดีโอ และ ภาพ: การถ่ายภาพ และ และกล้อง
• กล้อง คู่ : ด้านหน้าและด้านหลัง
•การเชื่อมต่อ อุปกรณ์: ผ่าน บลูทูธ
• Proximity: device closeness to physical objects
• แสง : การรับรู้ สภาพแวดล้อม ที่มีแสง / มืด
• NFC: Near Field Communications สำหรับอ่าน RFID

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

STARTING MOBILE FIRST

เหตุผลที่จะพัฒนาเวปสำหรับ mobile first คือ

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

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

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

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

1. ขนาดหน้าจอ

หลายปีมานี้ การออกแบบเว็บสำหรับ Desktop จะเริ่มที่หน้าจอ 1024×768 px. แต่วันนี้ มือถือจะทำให้มันเล็กลง

Smartphones ที่ใช้ iOS, Android, WebOS ส่วนใหญ่แสดงผลที่หน้าจอ 320×480 pixel นั่นหมายความว่า 80% ของพื้นที่ว่างบนหน้าจอ Desktop ก็จะหายไป ดังนั้น 80% ของ ลิงค์, ตัวหนังสือ, โฆษณา, รูป และอื่นๆ ต้องหาที่อยู่ใหม่ หรือต้องหายไปเลย

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

เช่น “The Southwest Airlines Website”(ภาพประกอบ) เป็นตัวอย่างของปัญหาจากการรวมทุกสิ่งทุกอย่าง มากมายลงไป ตามความต้องการของบริษัทหรือเจ้าของ ทีมงานออกแบบต้องพยายามรักษาความสมดุลย์ระหว่าง โปรโมชั่นจำนวนมาก, Interactive, เนื้อหา, เมนู และอื่นๆ อีกมากมายเพื่อใส่ลงไปใน Layout 1024×768 px.

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

• การจองตั๋วเดินทาง
• การ เช็คอิน
• การตรวจสอบสถานะการจอง
• การตรวจสอบ คะแนนสะสม
• การแจ้งเตือน

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

• เช็คอิน
• ตรวจดูว่า มีอะไรเกิดขึ้นกับรูปของเขาบ้าง
• ดูรูปใหม่ๆ จากคนที่เขารู้จัก
• ดูรูปใหม่ๆ ที่น่าสนใจของคนอื่น

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

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

2. Performance (ประสิทธิภาพการแสดงผล)

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

การเพิ่มประสิทธิภาพของเว็บบนมือถือ :

• จับกลุ่มรูปหรือภาพ Graphic ไว้ใน ไฟล์เดียว เพื่อให้แน่ใจว่าไฟล์จะไม่ใหญ่เกินไป
• รวมทุกอย่างเข้าด้วยกันและ ลดขนาด CSS กับ Javascript
• จำกัด หรือลบ Javascript ที่หนักๆ ออกไป โดยเฉพาะอย่างยิ่งถ้าถูกใช้งานแค่ 1 หรือ 2 functions
• จำกัดการใช้ CSS Grid Systems
• การตั้ง http header ที่เหมาะสม สามารถกำหนดให้ เบราวเซอร์ แคชไฟล์ได้
• นำความความสามารถในเบาวเซอร์ใหม่ๆ เช่น canvas, app cache มาใช้ตามความเหมาะสม
• ใช้คำสั่งใน CSS3 สำหรับสร้าง มุมมน, การไล่เฉดสี, เงาตัวหนังสือ และเงากล่องแทนชิ้น Graphic แต่บางบราวเซอร์ยังไม่สนับสนุน CSS3 ทั้งหมด เพราะฉะนั้นไม่ควรใช้ Effect CSS3 มากเกินไป เพราะอาจส่งผลให้ประมวลผลช้า และทำหน้าตาเว็บเสียหาย

“ความเร็ว” ไม่เพียงสำคัญแค่ในมือถือ
จากการทดสอบของ Amzon, Yahoo!, Microsoft และอื่นๆ ได้แสดงให้เห็นว่า แม้การล่าช้าเพียงเล็กน้อย (100 มิลลิวินาที)บนเดสท์ท็อป ก็ทำให้ผู้ใช้งานจากไปได้ จากการศึกษาระยะยาวโดย Google พบว่าประสิทธิภาพการประมวลผลเว็บที่ช้า ส่งผลในระยะยาว มันทำให้ผู้ใช้งานลดการทำกิจกรรมบนเว็บต่อเนื่องได้ถึง 5 สัปดาห์ ถึงแม้จะได้รับการซ่อมแซมเรื่องความล่าช้าแล้วก็ตาม

3. เวลาและสถานที่

สถานที่

จากการสำรวจล่าสุดบอกว่า สถานที่ที่ผู้คนใช้สมาร์ทโฟนและพบว่า :

84% ใช้ที่บ้าน
80% ใช้ระหว่างการหยุดทำงานเล็กๆ น้อย ตลอดวัน
74%  ใช้ขณะที่รอสายโทรศัพท์ หรือรอการนัดหมาย
69%  ใช้ขณะช้อปปิ้ง
62%  ใช้ขณะดู ทีวี
47%  ใช้ระหว่างการเดินทาง

รูปแบบของคนใช้มือถือส่วนใหญ่ ตรงกับคำเปรียบเทียบที่ว่า (One eyeball One thumb) “หนึ่งตา หนึ่งหัวแม่มือ”

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

1 หัวแม่มือ คือ พวกเขาชอบที่จะถือมือถือไว้ใน 1 มือ และใช้หัวแม่มือ Control มัน (ในขณะที่อีกมือใช้ทำกิจกรรมอื่นไปพร้อมกัน)

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

เวลา

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

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

ราเชล ฮินแมน จาก โนเกีย กล่าวเปรียบเทียบไว้ถึงพฤติกรรมที่แตกต่างกันระหว่างผู้ใช้มือถือกับเดสท์ท็อป ว่า “เดสท์ท็อปคือการดำน้ำลึก ส่วนมือถือคือการดำน้ำตื้น”
ตัวอย่างที่ดีของการดำน้ำตื้นคือ
การเล่น FB ผ่านมือถือ เติบโตถึง 112% ใน 1 ปี
การเล่น TW ผ่านมือถือ เติบโตถึง 347% แบบก้าวกระโดดใน 1 ปี

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

อ้าแขนรับข้อจำกัดทั้งหลาย

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

หลักพื้นฐานในการออกแบบ User Interface ให้ง่ายต่อการทัช มีดังนี้

- ตรงที่จะให้ User ทัชนั้น (เรียกว่า Touch Target) ควรมีตาแหน่งและขนาดที่เหมาะสม
- เรียนรู้และเข้าใจท่าทางการทัชอย่างเป็นธรรมชาติของมนุษย์เป็น และวิธีการที่มนุษย์จะพาตัวเองไปหาจุดมุ่งหมาย
- ครอบคลุมเรื่องการ hover
- อย่าลืมเรื่องการใช้งานบนโทรศัพท์รุ่นที่ยัง touch ไม่ได้ด้วย

GO SMALL BY GOING BIG
หลักการออกแบบบนหน้าจอเล็กๆ สาหรับ Touch Target คือ ต้องออกแบบ Touch Target ให้มีขนาดอย่างน้อย 44×44 พิกเซล และระหว่าง Touch Target แต่ละอันให้มีระยะห่างประมาณ 2 มิลลิเมตร หรืออย่างน้อย ก็ควรจะให้ Touch Target มีขนาดอย่างน้อยประมาณ 50%-100% ของขนาด 44×44 พิกเซล

WHERE DO WE TOUCH?
จากการสารวจ 70%-90% ของมนุษย์ถนัดมือขวา ถ้ามนุษย์ใช้มือขวาเป็นมือหลักในการ Touch ตาแหน่งบนหน้าจอที่ง่ายต่อการ Touch มากสุดจนถึงยากสุดคือ ซ้ายล่าง (ง่ายสุด)  ซ้ายบน (ยากสุด)

LEARN THE LANGUAGE OF TOUCH
ท่าทางในการ Touch หลักๆ ก็จะมี tap (แตะเบาๆ), double tap (แตะ), drag (ลาก), swipe (ปัด), pinch (หยิก), spread (กระจาย), press (กด), press และ tap (กดและแตะเบา), press และ drag (กดและลาก) และการหมุนในหลากหลายรูปแบบ นักออกแบบ จะนาท่าทางเหล่านี้ มาประกอบการใช้งานบน App หรือ Website ของเขา เช่น tap ปุ่มเปิดปิดเมนูเพื่อเปิดปิดเมนู หรือ ดึงหน้าจอลงมาเพื่อ refresh เป็นต้น

DON’T FEAR THE NUI
อย่ากลัว Natural User Interfaces (NUIs) เนื่องจากมนุษย์มีท่วงท่าการ Touch หน้าจออย่างเป็นธรรมชาติ การเข้าถึงข้อมูลก็จะเป็นไปอย่างเป็นธรรมชาติด้วยเช่นกัน การออกแบบด้วยหลักการของ NUIs คือลดภาพกราฟิกที่ไม่จาเป็น เพื่อให้ User เข้าถึงข้อมูลได้โดยง่ายและเป็นธรรมชาติที่สุด COVER THE HOVER การทดแทน hover เมื่ออยู่ในมือถือ มีดังนี้
1. นาสิ่งที่แสดงตอน hover มาแสดงไว้บนหน้าจอ ไม่ต้องมี action ใดๆ ก็เห็น
2. ใช้วิธีการ tap หรือ swipe แทนการ hover
3. ใช้วิธีการแยกออกมาอีกหน้าจอเมื่อจะ action ใดๆ เช่น tap แล้วเปิดหน้าใหม่
4. ตัดทิ้ง ใช้กรณีที่ hover นั้น ไม่สาคัญ

CANT’T TOUCH THIS
สาหรับมือถือที่ touch ไม่ได้ การใช้ :hover หรือ :focus ก็ยังมีความจาเป็น เพราะว่า มือถือเหล่านี้ใช้ trackball, trackpads, keypads, scrollwheels และ keyboards ซึ่งการ focus ณ จุดใดๆ บนหน้าเว็บควรจะทาให้ User เห็นและเข้าใจให้ง่ายๆ