Design Exciteเรื่องเด๊นเด่น

10 Design Details, So in Details (10 ดีไซน์เจ๋ง เก่งรายละเอียด)

1

การออกแบบ UI ผมมองว่า เราอาจสามารถแบ่งได้ออกเป็น 2 ช่วงเวลาหลักๆ คือ

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

การออกแบบในช่วงที่ 2 นี่แหละครับที่มีความสนุกอย่าบอกใคร เพราะเราไม่ต้องไปกังวลเรื่องฟังก์ชันหลักที่จะทำงานไม่ได้ แต่เรากำลังออกแบบงานดีไซน์ที่เน้นเรื่องอารมณ์หรือประสบการณ์สุดเซอร์ไพส์ให้ยูสเซอร์ได้ตื่นตาตื่นใจ (Emotional Design) และสัมผัสกับสุนทรียภาพด้าน UI อย่างเต็มที่

ผมได้รวบรวมประสบการณ์สุดยอดของหลายเว็บไซต์ที่เข้าสู่ช่วงที่ 2 แล้วก็มีหยิบยืมมาจากเว็บ Little Big Details (เว็บแชร์ประสบการณ์ WOW เกี่ยวกับ UX) เพื่อให้เราได้เห็นและเอาเยี่ยงอย่าง 10 design สุดเจ๋งกู๊ดไอเดียเหล่านี้

 

1. Amazon.com – เมนูฉลาดสุดๆ

amazon-01

เมนูประเภทสินค้าที่มีการหน่วงการเลือกเมนูเมื่อเลื่อนเมาส์ไปทางด้านขวาล่างแล้วไปโดนเมนูที่อยู่ข้างล่าง

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

 

2. Windows – มหัศจรรย์ปุ่ม Show Desktop

show-desktop-all

ปุ่ม Show Desktop ที่ไปปะปนกับปุ่มอื่นๆ บน Windows รุ่นก่อนๆ

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

show-on-desktop-win7

ปุ่ม Show Desktop ที่มีการปรับตำแหน่งไปไว้ที่มุมขวาล่าง ทำให้เลือกง่ายขึ้นมากๆ

แต่พอเข้าสู่ยุคของ Windows 7 ปุ่มนี้ได้อยู่ในตำแหน่งที่สมบูรณ์แบบและถูกต้องตามกฎของฟิตส์ (Fitts’s Law) โดยจัดวางไว้ที่ตรงบริเวณด้านขวาล่างของหน้าจอ นับได้ว่ากว่าหลายทศวรรษที่มวลมนุษยชาติจะได้เห็น UI ที่สวยงามและมหัศจรรย์เช่นนี้

 

3. Agoda.com – แค่เปลี่ยนสีชีวิตก็เปลี่ยน

agoda-01

ตารางตัวเลือกห้องพักที่มีการทำกรอบแนะนำห้องที่ขายดี

ที่ตารางการเลือกห้องในหน้ารายละเอียดโรงแรมของเว็บ Agoda.com เราจะเห็นกรอบสีเหลืองส้มซึ่งเป็นตัวแนะนำว่า ห้องประเภทนี้ “ขายดี (Best seller -limited supply!)” แต่ก่อนหน้านั้นทราบไหมครับว่า มันเคยเป็นสีม่วงมาก่อน

แต่หลังจากมีการทำ A/B Testing โดยเปลี่ยนจากสีม่วง มาเป็น สีเหลือง ทำให้ได้ Conversion Rate ของหน้านี้เพิ่มขึ้น 50% ทีเดียว!!! (มีคนกดปุ่มจองมากขึ้น 50% ไม่ใช่รายได้เพิ่ม 50% นะครับ) ถ้าให้ผมวิเคราะห์ตามทฏษฎีสี สันนิษฐานได้ว่า สีม่วงสื่อถึงความหรูหรา ความไม่เหมือนใคร ความน่าพิศวง ในขณะที่สีเหลืองให้ความรู้สึกเป็นกันเอง ดูเป็นมิตร เป็นสีแห่งความสุข ทำให้ห้องที่ใช้แท็คสีเหลืองดูราคาเข้าถึงได้กับคนทุกระดับ เลือกแล้วแฮปปี้

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

 

4. Airbnb.com – ราคาเด่นเห็นแต่ไกล

airbnb-01

ราคาในหน้าค้นหาบ้านเช่าที่แสดงให้เห็นบนแผนที่ และมีเครื่องมือกรองราคาที่มีกราฟบอกจำนวนบ้านอยู่ด้านล่าง

ในหน้าค้นหาบ้านของเว็บ Airbnb.com จะเห็นว่า designer เลือกที่จะใช้หมุดให้เป็นตัวแสดงราคาด้วย แทนไอคอนหมุดธรรมดาที่ดูมีค่าแค่แสดงตำแหน่งของบ้านเฉยๆ

มองไปที่ทางด้านซ้ายของแผนที่ จะมีเครื่องมือเลือกช่วงราคา (Price Range) พร้อมกับกราฟ (Histogram Graph) แสดงให้เห็นซ้อนด้านหลัง เพื่อให้เราทราบภาพรวมว่า ราคาส่วนใหญ่ของพื้นที่นี้เป็นเท่าไร ทำให้ลดโอกาสไปเลือกช่วงราคาที่มีบ้านให้เลือกน้อยหรือไม่มีเลย ดีจริงแท้

 

5. Mangareader.net – เข้าใจคอการ์ตูนด้วยปุ่มชอร์ตคัท

mangafox-01

การเปลี่ยนหน้าสามารถเลือกที่ dropdown ด้านบน หรือกดปุ่มลูกศรซ้ายขวาเพื่อเปลี่ยนหน้าได้ด้วยเช่นกัน 

MangaReader.net เว็บดูการ์ตูนออนไลน์ฉบับแปลอังกฤษ เวลาผมดูการ์ตูนที่เว็บนี้ ผมจะไม่ไปเสียเวลาเลือกเปลี่ยนหน้าตรง Dropdown list ที่อยู่ด้านบน แต่ผมจะใช้ปุ่มลูกศร ขวา/ซ้าย บนคีย์บอร์ด เพื่อเปลี่ยนหน้า ถัดไป/ก่อนหน้า เพราะเวลาเลื่อนหน้าลงผมก็ใช้ปุ่มลูกศร ขึ้น/ลง ทำให้ไม่เสียจังหวะต้องยกมือไปจับเมาส์เพื่อไปกดเปลี่ยนหน้า ไม่งั้นงุงิแย่

box-manga

เว็บ Box Manga มีตัวเลือกที่ให้สามารถอ่านการ์ตูนทั้งตอนได้หมดภายในหน้าเดียว

ในแวดวงเดียวกัน เว็บ Box-Manga.com มีฟังก์ชันตั้งค่ารูปแบบการอ่านว่า ในตอนหนึ่งๆ เราจะอ่านแบบ ทีละหน้า หรือ โหลดมาทุกหน้าในคราวเดียวเลย สะดวกและโดนใจจริงๆ กดไลค์เลย

 

6. Google Translate – อ่านรอบสอง คมชัดลึก

tumblr_nv8ktuLJ3a1qea4hso1_1280

เสียงอ่านจะช้าลง เมื่อกดฟังครั้งที่ 2

ถ้าเราลองกดปุ่มฟังเสียงอ่านของคำที่เรากรอกใส่ในช่องแปลภาษาของเว็บ Google Translate ในรอบแรกระบบจะอ่านด้วยความเร็วปกติ แต่ถ้าเรากดฟังซ้ำในรอบที่สอง ความเร็วการอ่านจะช้าลง ให้เราฟังได้อย่างถนัดหู  เพราะคนที่กดซ้ำรอบสอง เค้าต้องประสบปัญหาเรื่องฟังไม่ชัด ฟังไม่ทันแน่ๆ ใส่ใจในรายละเอียดขนาดนี้ เอาไปเลย 10 เต็ม ชัดเจนเปลี่ยน 😉

 

7. Yummly.com – แค่โหลดก็อร่อยแล้ว

tumblr_nmke81cZ221qea4hso1_1280

ใช้การทำเกรเดียนท์สำหรับ Lazy Loading โดยนำเฉดสีจากรูปที่กำลังโหลดมาแสดง

ลองเข้าเว็บ Yummly.com ดูซิครับ ระหว่างที่รูปอาหารยังโหลดไม่เสร็จ เว็บจะแสดงสีเกรเดียนท์ขึ้นมาเป็นออเดิร์ฟทางสายตาให้เราเห็นก่อน แต่ที่ตื่นตายั่วสายตาก็คือสีเกรเดียนท์ (Gradient Color) ที่ไม่เหมือนกันสักรูปเลยครับ เพราะมันดึงเฉดสีจากรูปอาหารที่กำลังโหลด เมนูนี้ต้องลองนะครับ

 

8. Random-password-generator.org – เว็บมีดีที่ชาตินิยม

random-password

สีธงชาติเยอรมันปรากฏเมื่อเอาเมาส์ไปไฮไลท์ที่ข้อความตรง Footer

เว็บ Random Password Generator หากเราเลื่อนไปทีด้านล่างสุดของเว็บ (Footer) แล้วเอาเมาส์ไฮไลท์ข้อความ Made in Munich… ไปจนถึงบรรทัด Respecting… เราจะได้สีธงชาติเยอรมันปรากฏขึ้นมา รู้เลยว่าเว็บนี้สัญชาติอะไร เนอะ ^0^

การทำแถบสีไฮไลท์ เราต้องเขียนโค้ด CSS เพิ่มเองนะครับ โดยใช้ Psedo element ที่ชื่อ “selection” เช่น ที่บรรทัด Made in Munich, Germany ผมก็เขียน HTML เป็น

<div class=”flat-color-1″>Made in Munich, Germany </div>

ในส่วน CSS ผมก็เขียนเป็น

.flag-color-1::selection { background-color: #000;}

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

 

9. Google Maps อยากเดินทางไกลต้องเปลี่ยนยูนิฟอร์ม

tumblr_o67enmBsCH1qea4hso1_1280

ไอคอนคนที่เปลี่ยนไปเมื่อเลือกเดินเท้าในระยะทางที่ไกล

App Google Maps ถ้าเราเลือกนำทางด้วยการเดินเท้าและมีระยะทางไกลซึ่งต้องใช้ระยะเวลาเดินนานโข เช่น 8 ชม. ตามตัวอย่าง Google จะเปลี่ยนไอคอนจากคนเดินถนนคนหนึ่ง ให้เป็น ไอคอนนักผจญภัยที่สะพายเป้พร้อมไม้เท้าคู่กาย ให้เข้ากับสถานการณ์ เพื่อให้เรารู้ ถ้าจะเดินจริง งานนี้เหนื่อยแน่ จะเอาจริงเหรอ ^^!

 

10. Booking.com – แหล่งรวม UX สุดติ่ง เวอร์บรรลัย

booking-02

ตัวเลขวันที่จะปรากฏในไอคอนปฏิทินตามวันที่เลือก

designer ที่ทำงานที่ Booking.com เท่าที่ผมได้ฟังมา จะมีอิสระในการออกแบบค่อนข้างสูง ถ้าคิดจะทำอะไร ก็ทำได้เลย ไม่ต้องรอ PO (Product Owner) มาสั่งการ เพียงแค่นำเสนอไอเดีย แล้วนำไปทดสอบผ่าน A/B Testing หากเทสแล้วผ่าน designer คนนั้นก็ได้แต้ม เฮกันข้ามวันข้ามคืน แต่ถ้าเทสแล้วแพ้ ก็มีอายล่ะ แต่เค้าไม่มีการลงโทษนะ เพราะทุกความล้มเหลวคือบทเรียนล้ำค่าทั้งนั้น ด้วยความมีอิสระในความคิด เราจึงได้เห็น design ที่พรั่งพรูบนเว็บนี้ตลอดเวลา

อย่าง design ด้านบน ที่เมื่อเราเลือกวันที่ Check-in หรือ Check-out เรียบร้อยแล้ว ตรงไอคอนปฏิทินจะมีตัวเลขวันที่ที่เราเลือกอยู่ข้างในด้วย อันที่จริงถ้าไม่ทำ ฟังก์ชันหลักก็ทำงานได้ตามปกติ (งานออกแบบช่วงที่ 1) แต่ถ้าทำก็ยิ่งเสริมประสบการณ์การใช้งานให้ดูเมพน่าชาบูๆ (งานออกแบบช่วงที่ 2 สุดแสนมีความสุข ได้ปล่อยแสงเต็มที่)

booking-05

การนำเสนอข้อมูลหน้ารายการผลลัพธ์ของ Booking.com

Booking.com เป็นแหล่งรวมความรู้ด้าน UX/UI ชั้นดีเลยครับ เพราะทุกสิ่งที่ปรากฏอยู่บนเว็บ จะถูกทดสอบด้วยกระบวนการทางวิทยาศาสตร์ทั้งหมด การเปลี่ยนแปลงไหนที่ทำให้ Conversion rate ลดลง design นั้นก็จะถูกเอาออก ทำให้เรามั่นใจได้ระดับเลยว่า design ที่เห็นคือ design ที่ดี และมีประโยชน์กับทั้งยูสเซอร์และบริษัทด้วย

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

  1. ข้อมูลบ่งบอกจำนวนคนที่กำลังดูโรงแรม ยิ่งดูเยอะ ยิ่งน่าสนใจ (Social Proof)
  2. จำนวนที่มีการจองในวันนี้ (Social Proof)
  3. ไอคอนบ่งบอกว่าใกล้ BTS, MRT (เดินทางสะดวกแน่ = Benefit)
  4. บอกว่ายกเลิกฟรี จะยกเลิกเมื่อไรก็ได้ ให้จองไว้ก่อน เรื่องอื่นค่อยว่ากัน (Benefit)
  5. หากเรากดดูรายละเอียดโรงแรมด้านบน แล้วกลับมาดูที่หน้ารายการผลลัพธ์นี้อีกครั้ง จะมีโรงแรมที่แนะนำให้กับเรา2 รายการ
  6. แท็คบอกว่า พึ่งมีคนจอง ทำให้สินค้าดูน่าสนใจขึ้นมาทันตา
  7. จองได้โดยไม่ต้องใส่ข้อมูลเครดิตการ์ด เหมือนบอกอ้อมๆ ว่า เบี้ยวได้นะ ไม่มีข้อผูกมัด
  8. เร่งให้ซื้อ เพราะห้องเหลือน้อยแล้วนะ (สร้างข้อจำกัดด้านทรัพยากรเวลา)

booking-13

เมนู User Account ที่เลือกใช้การเรียงตัวของเมนูที่ต่างเพื่อแยกฟังก์ชันที่ต่าง

หรือถ้ามีความรู้ UI ในทฤษฎีเกสตอลต์ เรื่องความเหมือน (Similarity) ที่มีข้อหนึ่งซึ่งบอกไว้ว่า วัตถุที่เหมือนกันจะมีการวางตัวหรือเรียงตัวที่เหมือนกัน (Orientation)

ที่เมนู User Account ของ Booking.com จะเห็นการเรียงตัวที่ต่างกัน คือ เรียงตัวชิดซ้าย กับ ชิดขวา เพื่อตั้งใจแบ่งแยกฟังก์ชันความต่างให้ชัดเจนว่า เมนูที่ชิดซ้ายจะนำไปสู่หน้าใหม่ ส่วนที่ชิดขวาจะนำยูสเซอร์ออกจากระบบ ซึ่งหากคนทั่วไปมาดู อาจจะงงๆ ว่าทำไม Sign out ถึงปลีกตัวมาอยู่ทางขวาเมนู ดูแล้วไม่ค่อยเรียบร้อย ไม่สวยงามเลย แต่แท้จริงแล้ว มันคือความตั้งใจที่จะออกแบบเช่นนี้อย่างชาญฉลาด

booking-06

การนำเสนอข้อมูลตารางห้องพักของ Booking.com

ถัดมาที่ข้อมูลตารางห้องพัก ก็ละเอียดพิถีพิถันสุโค่ย

  1. บอกให้รู้ว่า เราพักกี่คืน ซึ่งหากไม่มีก็ได้ แต่ถ้ามีจะช่วยให้ยูสเซอร์มีความมั่นใจมากขึ้นว่าวันที่ที่เลือกถูกต้อง
  2. Tooltip บอกว่าวันนี้เราช่างโชคดีเสียเหลือเกินที่ได้ราคาที่ดีที่สุด อวยกันซะขนาดนี้ มันต้องจองแล้ว
  3. มีรูปไอคอนเตียงตามขนาด เห็นแล้วรู้เลยว่านอนได้กี่คน นอนอย่างไร
  4. ข้อมูลบ่งบอก Benefit อีกรอบ (มีเขียนทางซ้ายของช่องแล้ว) ว่าถ้าเลือกห้องนี้แล้ว เราจะได้อะไรบ้าง พร้อมเร่งให้จองด้วยเพราะมีหลายคนจ้องอยู่ด้วย

 

booking-07

การนำเสนอข้อมูลหน้าการชำระเงินของ Booking.com

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

  1. Progress bar ที่เริ่มที่ขั้นตอนที่ 2 ทำให้รู้สึกว่า ประสบความสำเร็จไปแล้วบางส่วน หรือส่วนที่ต้องทำอีกแค่ 2 ขั้นตอนเอง
  2. สร้างภาพความคาดหวังให้ยูสเซอร์ทราบว่ากระบวนการจองนี้ใช้เวลาไม่เยอะ ไม่ต้อง Log-in ด้วย พูดง่ายๆ คือ ไม่เปลืองเวลาทำมาหากิน
  3. ส่วนใบแจ้งหนี้ มีแฝง UI ข้อมูลแบบแซนด์วิช (Sandwich) คือ การทำข้อมูลเป็นชั้นๆ สลับด้วยข้อดีกับข้อเสีย เช่นในตัวอย่าง
    1. ข้อดี: ฟรี WiFi, ยกเลิกฟรี
    2. ข้อเสีย: เงินค่าห้องและ VAT
    3. ข้อดี: วันนี้จ่าย 0 บาท
    4. ข้อเสีย: เงินที่ต้องจ่ายที่โรงแรม
  4. โน้มน้าวด้วยข้อมูลตำแหน่งที่ตั้งและหาเหตุผลมาสนับสนุนให้ดูน่าเชื่อถือด้วยคะแนน Rating
  5. บอกเวลา Check-in และ Check-out ด้วย
  6. มีตัวเร่งการตัดสินใจตามติดเรามาตั้งแต่หน้าผลลัพธ์การค้นหาจนถึงหน้านี้

booking-08

การออกแบบ UI เพื่อขายบริการเสริมโดยอาศัยของที่นำเสนอให้ฟรี

ตัว Checkbox ที่ใช้วิธีการ Opt-Out (ค่า Default คือไม่เลือกให้) ก็มีการวางแนวกลยุทธ์เพื่อล่อให้เรากดตัวเลือกของฟรี 2 ข้อแรก (ฟรี Travel Guide + ฟรี Make changes… ซึ่งถ้าไม่กดเลือก เราก็ได้ฟรีนะ ^^) ถ้าใครเผลอกดติ๊กไปจนถึงอันที่ 3 ก็เสร็จโจรล่ะ เพราะอันที่ 3 เป็นการเช่ารถ อันนี้ไม่ฟรีนะ ฉลาดไหมล่ะ

booking-09

การนำเสนอข้อมูลวันเวลาที่กระจ่างชัดเจน

เรื่องวันเวลาเป็นเรื่องที่อาจทำให้บางคนสงสัยได้ เพื่อเคลียร์ปัญหาคาใจนี้ Booking.com ก็เลยทำ Tooltip บอกเลยว่าวันเวลาอ้างอิงตามโซนเวลาท้องถิ่นของโรงแรมนะ เพราะเดี๋ยวจะมางอแงตอนหลังว่า ยกเลิกแล้ววันที่ 27 แต่ทำไมยังเสียตังค์ เพราะที่จริงวันที่ของประเทศนั้นอาจเป็นวันที่ 28 แล้วก็ได้นะ

booking-16

booking-17

การนำเสนอข้อมูลเกี่ยวกับโรงแรมและบริการที่ครบถ้วน

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

booking-10

Title จะถูกเปลี่ยน หากไปเลือกที่แท็บหน้าอื่น

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

booking-11

Popup แจ้งเตือนเมื่อกลับมาที่หน้าชำระเงินอีกครั้ง

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

 

booking-15

Email-marketing ที่ส่งมาเตือนให้เราทำการจองโรงแรมที่เคยดูให้เสร็จสิ้น

หากเราตัดสินใจไม่จองห้อง ก็ยังมีส่งเมลตามหลอกหลอนโดยพยายามหาเหตุผลในการโน้มน้าวให้เรากลับมาจอง เช่น เราจะได้ราคาพักที่ต่ำสุดในรอบ 40 วัน

ประสบการณ์การจองโรงแรมกับ Booking.com เรียกได้ว่าเราถูกมอมเมาด้วยกลยุทธ์และข้อมูลที่ผ่านการขัดเกลาและทดสอบมาอย่างดี จึงไม่น่าแปลกใจเลยว่า ทำไมเว็บนี้ถึงได้โดนใจผมนัก

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

 

ความสนุกที่ไม่ได้แค่เอามันส์

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

ลองใส่ใจในรายละเอียดดูสักนิด หาจุดที่คิดว่าทำแล้ว ลงแรงไม่ต้องเยอะ  designer สนุกที่จะออกแบบ developer สนุกที่จะโค้ด ยูสเซอร์สนุกที่จะใช้งาน รีบจดไอเดียนั้นไว้ แล้วรีบลงมือทำเลย!

tumblr_nv8x3pLX131qea4hso1_1280

สีของกระดาษทิชชู่แผ่นท้ายๆ ของ Kleenex

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

UIBlogazine ก็แอบใส่ใจในรายละเอียด แฝงกลยุทธ์โฆษณาเข้าไปในตัวอย่างซะหน่อย ถ้าได้ค่านายหน้าจาก Kleenex ก็คงดีไม่น้อยนะ แต่คิดว่าแป้วแน่ๆ <(^_____^)>

 

uiblogaziner
สวัสดีครับ ผมชื่อฟริ้นครับ รักและชอบงาน Graphic Design เอามากๆ เลย พอได้เริ่มทำงานเป็น UI Designer แล้ว ยิ่งสนุกขึ้นอีกแยะ งานออกแบบที่ใช้ความรู้สึกและเหตุผลเป็นอะไรที่สุดยอดจริงๆ ครับ

ทฤษฎีเกสตอลท์สำหรับงานออกแบบ UI (Gestalt Theory for UI Design)

Previous article

รีวิวเว็บ Gogoprint (เว็บโรงพิมพ์ออนไลน์)

Next article

You may also like

1 comment

  1. Love your blog! อ่านสนุก ไม่น่าเบื่อ 🙂

Leave a reply

Your email address will not be published. Required fields are marked *