Author Archives: Panjan

Mobile first ตอนที่ 3 CAPABILITIES

Mobile first ตอนที่ 3 CAPABILITIES

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

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 first ตอนที่ 2 CONSTRAINTS (ข้อจำกัด)

Mobile first ตอนที่ 2 CONSTRAINTS (ข้อจำกัด)

ในขณะที่ 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 Experience

User Experience

User Experience

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

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

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

 

นิยามของการออกแบบ
Design is the process of finding the most elegant answer to the question of ‘how do I…?’ (Scrivs)
การออกแบบคือ กระบวนการหาคำตอบที่สวยงามที่สุดสำหรับคำถามที่ว่า ฉันจะทำมันอย่างไร

Design is a set of decisions about a product. It’s not an interface or an aesthetic, it’s not a brand or a color. Design is the actual decisions.! (Rebekah Cox)
การออกแบบคือ ชุดของความตัดสินใจซึ่งเกี่ยวกับผลิตภัณฑ์ มันไม่ใช่แค่รูปร่างหน้าตาหรือความงาม มันไม่ใช่เครื่องหมายการค้าหรือสี แต่การออกแบบคือ การตัดสินใจอย่างแท้จริง!

 

Why is user experience design important?

  1. เพื่อปรับปรุงจุดประสงค์
  2. เพื่อความรวดเร็วและตรงกลุ่มเป้าหมาย
  3. เพื่อเพิ่มมูลค่าผู้ใช้
  4. เพื่อยืดเวลาให้ผู้ใช้ใช้งานนานขึ้น

 

The elements of user experience (องค์ประกอบของ UX)

องค์ประกอบของ UX

User experience research

  • ลงสนามพบวัฒนธรรมผู้ใช้จริง
  • คิด Concept ของแบบทดสอบ
  • ออกแบบโดยให้หลายฝ่ายมีส่วนร่วม
  • สำรวจความคิดเห็น
  • ตำแหน่งที่ตามอง Eye Tracking
  • เรียงลำดับข้อมูล
  • ทดสอบในห้องปฏิบัติการก่อน

Eye Tracking ของ Form
ตำแหน่งของ Text อยู่บนกล่อง ถูกมองเห็นได้มากที่สุด

ตำแหน่งการมองที่ดีที่สุด ของแบบฟอร์ม

Content Strategy (กลยุทธ์ในการเขียนเนื้อเรื่อง)

กล่าวได้ว่า Content Strategy is Design!

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

กลยุทธ์ในการเขียนเนื้อเรื่อง

Interaction Design

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

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

 

10 heuristics for user interface design (10 หลักการทั่วไปสำหรับการออกแบบ User Interface Design)

http://www.useit.com/papers/heuristic/heuristic_list.html

1. Visibility of system status
การแสดงผล ของสถานะของระบบ (ระบบควรแจ้งให้ผู้ใช้ทราบเกี่ยวกับสิ่งที่กำลังทำ ผ่าน text, graphic ในช่วงเวลาที่เหมาะสมเพื่อเสริมความเข้าใจ)

2. Match between system and the real world
ปรับให้ระบบเหมือนกับโลกแห่งความจริง (ส่วนที่เกี่ยวกับระบบควรจะปรับให้เป็นภาษาพูด ให้ผู้ใช้เข้าใจง่ายไม่ใช้ภาษาคอมพิวเตอร์มากเกินไป)

3. User control and freedom
การควบคุมการใช้งานของผู้ใช้ และอิสระของผู้ใช้ (ผู้ใช้งานมักจะเลือกหรือคลิกทำงานบางอย่างแบบไม่ตั้งใจ เราต้องมีการระบุไว้อย่างชัดเจนว่า เมื่อคลิกพลาดหรือทำพลาดแล้ว จะแก้ไขหรือออกจากการทำงานอันไม่พึงประสงค์นี้อย่างไร เพื่อที่จะได้ไม่มีการมาทำผิดซ้ำ)

4. Consistency and standards
การออกแบบที่สอดคล้องต่อเนื่องกัน และมาตราฐานเดียวกัน (รวมทั้งผู้ใช้ไม่ควรต้องสงสัยในคำที่เขียนต่างกัน ในแต่ละจุด ถ้ามันหมายถึงสิ่งเดียวกัน ควรใช้คำ คำเดียวให้เป็นมาตราฐาน

5. Error prevention
การตรวจเช็คจะป้องกันปัญหาที่ยูสเซอร์อาจคลิกหรือทำ Action อะไรผิดได้

6. Recognition rather than recall
เห็นแล้วจำได้เลยดีกว่าต้องนึกคิดก่อน เช่น การตั้งชื่อปุ่ม ควรชัดเจนไม่ต้องให้นิ่งคิดตีความ เช่น ปุ่ม Save กับ OK ปุ่ม Save ชัดเจนกว่า หรือ คำว่าคลิกที่นี่ ควรเปลี่ยนเป็น คลิกดูทั้งหมด เป็นต้น

7. Flexibility and efficiency of use
เว็บควรจะหยืดหยุ่น และใช้งานได้เต็มประสิทธภาพที่ควรจะเป็น ตอบสนองความต้องการได้ทั้งผู้ใช้มือใหม่และมือเก่า

8. Aesthetic and minimalist design
การออกแบบที่สวยงาม และเรียบง่าย

9. Help users recognize and recover from errors
เมื่อเกิดการ errors ทั้งหลายจากระบบหรือจากการกรอก ควรมี pop upเตือนและแจ้งให้เข้าใจว่าผิดพลาดอะไรอย่างชัดเจน พร้อมวิธีแก้ไข

10. Help and documentation
เป็นการดีที่สุดถ้าออกแบบแล้วผู้ใช้เข้าใจได้ทันที แต่การทำหน้า Help, Tool Tip และ file.doc ให้ดาวน์โหลดไปอ่านก็เป็นตัวช่วยให้ผู้ใช้สามารถแก้ปัญหาต่างๆ ได้ด้วยตัวเอง

 

Visual Design
The principles of design หลักการออกแบบ

  1. Balance ความสมดุลย์
  2. Proximity ความใกล้ชิด เชื่อมโยง
  3. Alignment การจัดวาง
  4. Consistency ความกลมกลืน
  5. Contrast ความขัดแย้ง
  6. White space พื้นที่ว่างสีขาว

 

ตัวอย่าง Proximity ที่ดี (มีการจัดหมวดหมู่)

ตัวอย่าง การจัดหมวดหมู่ของเมนู

 

 

ตัวอย่าง Proximity ที่ดี (การจัดวางและตั้งชื่อปุ่ม)ตัวอย่าง การเชื่อมโยงที่ดี ของปุ่มกับแบบฟอร์ม

 

 

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

ตัวอย่างการวาง Alignment ที่ดี ต้องคำนึงถึงทิศทางของภาพ และความคิดแง่บวกต่อธุรกิจ

 

 

การดีไซน์ White Space จะให้ความรู้สึกแตกต่างกันโดยสิ้นเชิง ตามลักษณะงาน ดีไซน์เนอร์ควรเลือกใช้ให้เหมาะสม

ตัวอย่างการใช้ White Space และความรู้สึกที่แตกต่าง

 

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

ตัวหนังสือแบบพิมพ์ใหญ่จะอ่านง่ายกว่า ดังตัวอย่าง

ตัวอย่าง ความแตกต่างในด้านรูปทรงตัวอักษร

 

The Rule of Visual Design

 

ขั้นตอนการวางแผนและเตรียมงานนั้นเต็มไปด้วยความยุ่งยาก แต่จบลงด้วยความสบายของทุกฝ่ายขั้นตอนการวางแผนนั้นยุ่งยาก แต่จบลงด้วยความสบายของทุกฝ่าย