Home » Design » Currently Reading:

9 Web Design Trend ปี 2013 โดย rgb72/design team ตอนที่ 1

March 4, 2013 Design Comments

หลังจากที่มีการคุย และ training กันภายในของ rgb72 ทำให้รู้สึกว่าความรู้บางอย่างก็น่าจะแชร์ออกมาผ่านทาง blog72 บ้าง ซึ่งหนึ่งในเรื่องที่เรา discuss กันเมื่อไม่นานมานี้คือเรื่อง เทรนด์การออกแบบเว็บไซต์ในปี 2013

เราได้สรุปเทรนด์การออกแบบเว็บไซต์มาได้ 9 ข้อ โดยมีพื้นฐานมาจากสองส่วนใหญ่ๆคือ

1. User behavior หรือพฤติกรรมใช้งานของ user ต่อเว็บไซต์ได้เปลี่ยนไป ซึ่งมีผลมาจากหลายส่วนเช่น ความคุ้นเคยกับการใช้ interface ของ app ในมือถือที่มีลักษณะที่แตกต่าง หรือ การใช้อุปกรณ์เคลื่อนที่ mobile device ซึ่งไม่ support วิธีการใช้งานในแบบเดิมๆ – ส่วนนี้มีผลต่อ User Interface (UI) และ User Experience (UX) ของการออกแบบเว็บไซต์

2. Reference จากเว็บไซต์ต่างประเทศ สไตล์ภาพ และแนวกราฟฟิคใหม่ๆ ที่พยายามหลีกหนีความจำเจน่าเบื่อของดีไซน์เดิมๆที่เราใช้มาในอดีต – ส่วนนี้มีผลต่อความสวยงาม

ดังนั้นเรามาดูกันว่า 9 เทรนด์ที่ว่านั้น มีอะไรบ้าง

1. Responsive Layout

ภาพ: Capture จากเว็บไซต์ www.ge.com

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

2. Retina Support

เทคโนโลยีหนึ่งที่ Apple นำออกมาใช้ในตลาดคือ จอภาพที่เรียกว่า Retina Display จอลักษณะนี้จะมีความละเอียดมาก ขนาดที่ตาเราไม่สามารถแยกแยะ ไม่สามารถมองเห็น จุด pixel ได้เลย ซึ่งจอลักษณะนี้มีใช้กับอุปกรณ์หลายตัว เช่น iPad, Macbook, iPhone และเชื่อว่าจะขยายออกไปใช้กับสินค้าอีกหลายตัวของ Apple

(ข้อมูลเพิ่มเติม: ความละเอียดของจอ Retina Display จะแตกต่างสำหรับอุปกรณ์ที่แตกต่างกัน เช่น ความละเอียดที่ 326ppi สำหรับ iPhone/ iPod, 264 ppi สำหรับ ipad, 220ppi สำหรับ Macbook Pro 15นิ้ว เป็นต้น)

ภาพ: http://madmacman.com/2012/06/27/macbook-pro-retina-display-settings-explained-with-support-apples-faq/

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

ดังนั้นการออกแบบ ภาพ หรือ ภาพตัวอักษร สำหรับจอ Retina Display แม้ว่าจะเป็นรายละเอียดที่ปลีกย่อย แต่ถือเป็นอีกหนึ่ง requirement ที่เราควรทำให้กับลูกค้าเพื่อรองรับเทคโนโลยีที่กำลังขยายตัว

3. Fixed Header Bars

การทำเมนู bar หรือ header ให้ติดอยู่ด้านบนตลอดเวลา โดยไม่โดนเลื่อนหายขึ้นไปด้านบนเมื่อ user ทำการ scroll เลื่อนขึ้น (หากนึกภาพไม่ออกให้คิดถึงเว็บ facebook.com)

จึงมีเหตุผลใหญ่ๆอยู่สองประการที่ควรทำ Fixed Header Bar คือ

1. ด้วยพฤติกรรมของ user ที่ต้องการความเร็วในการใช้งาน เมื่อ user อ่านข้อมูล และ scroll เลื่อนลงมาด้านล่าง การไม่ใช้ fixed header จะทำให้ menu bar ด้านบนหายไป และนั่นจะทำให้ user รู้สึกเสียเวลา ถ้าต้องเลื่อนกลับขึ้นมาด้านบนเมื่อต้องการเปลี่ยนหน้า

2. ปัจจุบันนี้ เมนู bar หรือ header ด้านบนไม่ได้ทำหน้าที่แค่เป็น เมนู หรือที่สำหรับใส่โลโก้อย่างเดียว แต่หากเป็นที่สำหรับสิ่งสำคัญหลายอย่างเช่น Notification แจ้งเตือน หรือแม้แต่ เบอร์โทรศัพท์ Call Center ที่เป็นประโยชน์มากสำหรับลูกค้า การทิ้งสิ่งเหล่านี้ไว้อยู่ตรงหน้า คือหน้าที่ที่สำคัญอย่างหนึ่งของการเป็น icon แจ้งเตือน หรือ เบอร์โทรศัพท์ฉุกเฉิน

4. Infinite Scrolling

คือการทำให้ user สามารถ scroll เลื่อนลง เพื่อดูเนื้อหาในหน้าหนึ่งได้อย่างไม่มีที่สิ้นสุด หากนึกภาพไม่ออกให้คิดถึง facebook.com หรือ Pinterest.com เมื่อเราอ่าน status ของเพื่อนจนถึงด้านล่างสุด ตัวเว็บจะทำการโหลดข้อมูลขึ้นมาให้อีกเรื่อยๆ ไม่มีที่สิ้นสุด ทั้งนี้เพื่อให้ user ไม่จำเป็นต้องกดปุ่ม “NEXT” เพื่อดูหน้าต่อไปให้เสียเวลา

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

** อย่างไรก็ตาม Infinite Scrolling ไม่เหมาะสำหรับการใช้กับเว็บไซต์ประเภท e-commerce สังเกตได้จากเว็บอย่าง amazon.com เหตุผลก็เนื่องจาก การสั่งให้ข้อมูลไหลเพิ่มเติมเข้ามาเรื่อยๆ จะทำให้ user ดูได้อย่างเพลิดเพลิน จนบางครั้ง หากเค้าต้องการย้อนกลับมาดูสินค้าบางตัวที่เคยผ่านตาไปแล้ว อาจจะกลับมาหาไม่พบ เนื่องจากเว็บไซต์ได้ทำการโหลดข้อมูลสินค้าขึ้นมาเป็นจำนวนมากเกินกว่าจะจำได้ว่าสินค้าที่เคยถูกใจนั้น อยู่ส่วนไหนของหน้า ดังนั้นการแบ่งออกเป็นหน้าหน้า อาจจะทำให้ user สามารถจดจำสินค้าได้ง่ายกว่า เช่น “สินค้าตัวที่ฉันชอบนี้อยู่ในหน้า 3” เป็นต้น

อีก 5 ข้อที่เหลือสำหรับ Web Design Trends มีอะไรบ้าง ขอเก็บไปต่อตอนที่ 2 นะครับ

Search This Site:



rgb72 on Facebook

คำศัพท์ Internet วันละคำ

Air (คำที่เกี่ยวข้อง: Adobe, Flash, HTML, JavaScript)
– หนึ่งใน technology ที่พัฒนาโดย Adobe ซึ่งมีคุณสมบัติที่ช่วยให้นักพัฒนาสามารถสร้างโปรแกรมสำหรับคอมพิวเตอร์ได้ใช้เทคนิคเดียวกันกับการเขียน code สำหรับเว็บ ไม่ว่าจะเป็น HTML, JavaScript หรือ Flash โดยคำว่า AIR นั้นย่อมาจาก Adobe Integrated Runtime

72's Friends

Useful Links

Related Articles:

ทำ Design demo ยังไงให้ผ่าน? กับ 4 ความรู้สึกที่ลูกค้าอยากมี เมื่อฟังเราเสนอ Design demo

March 1, 2015





ทำให้สวยแทบตายแต่ขายยังไงก็ไม่ผ่าน เป็นเหมือนเรื่องซ้ำๆ เดิมๆ ที่เหล่า designer เจอประจำเมื่อต้องนำเสนอ design ให้ลูกค้า ลองมาดู 4 ความรู้สึกที่ลูกค้าอยากมีเมื่อฟังเรานำเสนอ design กันบ้าง

งานออกแบบที่นักออกแบบสมควรจะทำ.. และลูกค้าสมควรจะได้รับ

October 16, 2014





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

5 คู่สี ที่ต้องระวังในการเลือกใช้ เพราะจะทำให้ลูกค้าเข้าใจงานของคุณผิด!

August 4, 2014





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

ฟอนต์ยอดฮิตในเยอรมัน “DIN 1451”

April 27, 2014





Font ตัวหนึ่งที่พบในงานออกแบบหลายชิ้นเมื่อหลายปีก่อน วันนี้เดินอยู่ในเยอรมันแล้วเจอแต่ font “DIN 1451” นี้ เต็มไปหมด จึงจำให้ต้องไปค้นหาดูว่า font นี้มีต้นกำเนิดมาได้อย่างไร แล้วก็ค้นพบว่า font นี้เป็น font ทางการของเยอรมันเลยหรือนี่!?

2014 เทรนด์ไหนจะอยู่ เทรนด์ไหนจะไป? พฤติกรรม user ที่มีผลต่อการออกแบบและการตลาดออนไลน์

January 8, 2014





ฟันธงไปเลยว่า เทรนด์ไหนจะมา เทรนด์ไหนจะร่วง โดยใช้พฤติกรรมผู้ใช้งานเป็นพื้นฐาน และพฤติกรรมที่ว่านี้จะมีผลต่อเทรนด์การออกแบบและการตลาดออนไลน์อย่างไรบ้าง