พรอมต์ของ JavaScript ยืนยันและแจ้งเตือนว่า“ ล้าสมัย” [ปิด]


21

เมื่อเร็ว ๆ นี้ฉันได้พัฒนาระบบการจัดการผ่านเว็บสำหรับยิม แอพก่อนหน้าของพวกเขาได้รับการพัฒนาใน Visual Basic สำหรับแอพใหม่สคริปต์ส่วนหน้าทั้งหมดใช้ jQuery เซิร์ฟเวอร์กำลังเรียกใช้ PHP และ MySQL ... คุณรู้ไหมว่าสแต็ค el-cheapo linux ทั่วไป

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

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


7
"El cheapo?" จริงๆ? นั่นไม่ใช่คำดูถูกเล็กน้อยใช่ไหม
asthasr

1
ฉันสับสน ก่อนอื่นคุณบอกว่าแอพได้รับการพัฒนาใน Visual Basic จากนั้นคุณบอกว่าเซิร์ฟเวอร์กำลังใช้งาน PHP ฮะ?
jhocking

@ jhocking: ดูเหมือนว่าเขากำลังบอกว่าระบบเก่าเป็นแอปเดสก์ท็อปที่เขียนด้วย VB และอันใหม่ (อันที่เขาเขียน) เขียนด้วย LAMP stack
จอร์แดน

ดูเหมือนแอปก่อนหน้านี้ของพวกเขาจะถูกเขียนด้วย vb เขากำลังสร้างส่วนหน้าเว็บให้กับมัน
GrandmasterB

คำตอบ:


56

1. UX: กล่องข้อความส่วนใหญ่ชั่วร้าย

กล่องการแจ้งเตือนจะไม่ดีในทุกกรณีจากมุมมอง UX ในแอพเดสก์ทอป ในเว็บแอปเป็นการแจ้งเตือนหรือข้อความ JavaScript แบบอินไลน์ ทุกที่.

คุณสามารถอ่าน About Face 3 โดย Alan Cooper¹หากคุณต้องการทราบเหตุผล; มันอธิบายได้ดีมากว่าวิธีนี้ขัดจังหวะเวิร์กโฟลว์และสร้างความรำคาญให้ผู้ใช้อย่างไรและกล่องเตือนเกือบทุกอันที่มีอยู่ในซอฟต์แวร์ปัจจุบันนั้นผิดอย่างมาก ในหน้า 542 "กล่องโต้ตอบที่ร้องว่า" Wolf! "อธิบายว่ากล่องแจ้งเตือนจะถูกยกเลิกเป็นประจำดังนั้นโมเดลของพวกเขาจึงเสียอย่างสมบูรณ์ ในหน้า 543 ของหนังสือมีการระบุสามหลักการออกแบบที่สำคัญ:

  • ทำไม่ต้องถาม
  • ทำให้การกระทำทั้งหมดย้อนกลับได้
  • ให้ข้อเสนอแนะที่ไม่มีการแก้ไขเพื่อช่วยผู้ใช้หลีกเลี่ยงข้อผิดพลาด

จากนั้นผู้เขียนบอกเราถึงวิธีการเปลี่ยนกล่องแจ้งเตือนด้วยวิธีการออกแบบที่ถูกต้อง

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

ในหน้าเว็บทั้งกล่องเตือนและข้อความแจ้งเตือนนั้นน่ารำคาญที่สุด ตัวอย่างบางส่วน:

  1. ฟอรัมบางแห่งช่วยให้คุณสร้างรายการได้โดยการป้อนข้อมูลในรายการ หมายความว่าในขณะที่สร้างรายการคุณไม่สามารถใช้หน้านั้นรวมถึงการคัดลอกวาง คุณมีสนามเล็ก ๆ อยู่ด้วย สิ่งที่เกี่ยวกับข้อความยาว แล้วตัวหนาและตัวเอียงล่ะ?

  2. "ถ้าคุณดำเนินการต่อรูปถ่ายจะถูกลบอย่างแน่นอนจากโปรไฟล์ของคุณคุณแน่ใจหรือไม่" . แน่นอนฉันแน่ใจ! ฉันจะคลิก "ลบภาพออกจากโปรไฟล์ของฉัน" เป็นอย่างอื่นได้ไหม ทำไมเว็บแอปของคุณถึงคิดว่าฉันโง่เหลือเกิน จริงๆแล้วแอปพลิเคชันของ Google ในฐานะ GMail แสดงวิธีการที่ถูกต้อง คุณสามารถลบลบทำลายสิ่งที่คุณต้องการและเมื่อคุณทำเช่นนั้นแอปจะแสดงลิงค์ "เลิกทำ" ขนาดเล็ก

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

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

สรุป: จากมุมมองประสบการณ์ผู้ใช้แอปพลิเคชันใช้กล่องข้อความผิดเวลาส่วนใหญ่

แต่เดี๋ยวก่อน! เว็บไซต์คุณภาพต่ำหลายแห่งแทนที่กล่องแจ้งเตือนที่น่ารำคาญโดยข้อความ JQuery ที่น่ารำคาญด้วยพื้นหลังกึ่งโปร่งใสซึ่งครอบคลุมทุกหน้า ดังนั้นข้อเสียยังคงอยู่

มีเหตุผลอื่นที่จะไม่ใช้กล่องข้อความในเว็บแอปพลิเคชัน:

2. การออกแบบ: กล่องเตือนมีการออกแบบของตัวเอง

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

สำหรับนักออกแบบข้อความ JavaScript มีประสิทธิภาพมากกว่ากล่องเตือน

พวกเขายังกว้างขวางมากขึ้น คุณสามารถเพิ่มตัวหนาและตัวเอียงคุณสามารถเลือกปุ่มของคุณเอง (เกี่ยวกับ: "เราขออภัย แต่รหัสผ่านที่คุณป้อนไม่ถูกต้อง [รีเซ็ตรหัสผ่านของฉัน] [ลองอีกอัน] [ยกเลิก]"?) ²

3. JavaScript: การไหลของแอปพลิเคชันหยุด

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

4. Sandbox: อย่าบังคับให้ผู้ใช้รีบูทคอมพิวเตอร์

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

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

สกรีนช็อตแสดงกล่องเตือนพร้อมกล่องกาเครื่องหมาย "ป้องกันหน้านี้จากการสร้างกล่องโต้ตอบเพิ่มเติม"

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

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

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


¹ เกี่ยวกับ Face 3, Essentials of Interaction Design , Alan Cooper, Robert Reimann และ David Cronin, ไอ 978-0-470-08411-3; บทที่ 25: ข้อผิดพลาดการแจ้งเตือนและการยืนยัน

²นี่เป็นเพียงตัวอย่าง กรุณาอย่าทำมันในเว็บแอปพลิเคชันของคุณเพราะมันเป็นตัวเลือกการออกแบบที่แย่จริงๆ

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


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

สิ่งนี้ไม่ตอบคำถาม
CaffGeek

1
"เมื่อแสดงกล่องเตือน JavaScript หยุดการทำงานจนกว่าผู้ใช้จะคลิก" - นี่เป็นจริงสำหรับ a confirm()และprompt(); ด้วยalert()ลักษณะการทำงานนั้นขึ้นอยู่กับเบราว์เซอร์ (การดำเนินการอาจดำเนินต่อไปแม้ว่าจะมีการแจ้งเตือน () ปรากฏขึ้นเหตุผลก็คือ "มีเพียงทางออกเดียวเท่านั้น")
Piskvor

1
@ Graham: คุณถูกต้องสำหรับป๊อปอัปที่ไม่มีที่สิ้นสุด; ฉันถูกปิดหัวข้อในประเด็นนี้ ฉันพยายามทำให้ดีขึ้น สำหรับการแจ้งเตือนสิ่งสำคัญดูคำตอบที่สี่ของฉัน: ใช่คุณอาจต้องการหยุดทุกอย่างก่อนที่ผู้ใช้จะยืนยันการกระทำ แต่ไม่อนุญาตให้คุณบล็อกทุกแท็บของเบราว์เซอร์เพราะแท็บอื่นไม่ทำงาน เป็นของเว็บแอปพลิเคชันของคุณ
Arseni Mourzenko

1
@BornToCode: ไม่มีทางเลือกอื่น ทันทีที่คุณแสดงรูปถ่ายบนหน้าจอของผู้ใช้จะไม่มีวิธีป้องกันการคัดลอก สำหรับคำถามที่สองคุณต้องเจาะจงมากขึ้น ลองux.se
Arseni Mourzenko

3

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


2

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

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


1

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

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

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

เหตุผลสรุปบางประการ:

  • นี่คือ API มาตรฐานและนักพัฒนาสามารถทราบว่าคุณกำลังพยายามทำอะไร
  • เป็นมิตรกับผู้ใช้มากขึ้นและดูดีขึ้น
  • การสนับสนุนแพลตฟอร์มไซต์มือถืออาจต้องใช้ API ดั้งเดิม
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.