อะไรทำให้การออกแบบ POS นี้ดูเก่า

ฉันพยายามเข้าใจว่าอะไรทำให้การออกแบบหน้าจอ ณจุดขาย (POS) นี้ดูล้าสมัย

มันคือปุ่ม 3D, สี, เลย์เอาต์, แบบอักษรหรือไม่? และคุณจะทำอย่างไรเพื่อให้ดูเป็นปัจจุบัน?

ไม่ได้เป็นนักออกแบบมืออาชีพฉันเห็นว่ามันเป็นวันที่ แต่ฉันไม่แน่ใจว่าทำไมและวิธีการเปลี่ยนแปลงที่

คำตอบอื่น ๆ ให้ความสำคัญกับการปรับปรุงการออกแบบ แต่เนื่องจากคุณถามว่าทำไมการออกแบบจึงดูเก่า:

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

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

ไม่มีภาพ

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

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

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

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

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

ต้องบอกว่าฉันเห็นการตัดสินใจเชิงโครงสร้างที่ดี แต่ไม่มากนักกับการตัดสินใจการออกแบบ นี่คือสิ่งที่ฉันจะดู:

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

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

• สี : การจัดกลุ่มทำงานเพื่อทำให้ชัดเจนปุ่มต่าง ๆ ทำสิ่งต่าง ๆ แต่ฉันไม่เห็นเหตุผลที่อยู่เบื้องหลังจานสี พยายามคิดในทิศทางของ: ฉันสามารถใช้สีเพื่อผลักดันข้อความของฉันต่อไปได้หรือไม่? ฉันสามารถใช้สีเพื่ออำนวยความสะดวกในการค้นหาปุ่มได้หรือไม่ คุณกำลังทำเช่นนั้นโดยให้ "ส่ง" เสียงที่แตกต่าง นี่คือการตัดสินใจที่ดี แต่ฉันเห็นสีที่คุณเลือกแตกต่างกันไปขึ้นอยู่กับว่าอยู่ในคอลัมน์ด้านขวาหรือสีกลาง ทำไม?. คิดแล้วคุณจะใช้สีแบบไหนกัน ดูวัสดุของ Googleพวกเขาอาจสร้างแรงบันดาลใจให้คุณลองคอมโบใหม่

• เงาและเอฟเฟกต์ : เอฟเฟกต์ 3 มิติมีประโยชน์อย่างมากในบริบทนี้และฉันคิดว่าคุณสามารถผลักดันให้ดียิ่งขึ้นไปอีก นี่คือตัวอย่างของ 3D POSนอกจากนี้คุณเคยลองใช้ไอคอนไหม? พวกเขาสามารถช่วยให้มองเห็นได้ดี

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

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

ฉันไม่สามารถบอกได้อย่างรวดเร็วว่าอะไรคืออะไร (และฉันมีประสบการณ์กับระบบ POS ของร้านอาหาร) สำหรับฉันแล้วรายการที่เป็นสีเทาทางด้านขวาของ UI ดูเหมือนจะไม่ได้อยู่ด้วยกัน รายการสีเหลืองที่อยู่ตรงกลางของหน้าจอดูเหมือนจะเป็น 3 ส่วน แต่นี่ไม่ชัดเจนหรือ

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

ฉันไม่ได้มีเวลาสำหรับคำตอบรายละเอียดเพิ่มเติม แต่สิ่งที่ฉันจะพูดคือดูตัวอย่างของการออกแบบ UI (ส่วนต่อประสานผู้ใช้) ปัจจุบัน ตัวอย่างเช่นการค้นหาอย่างรวดเร็วสำหรับ 'POS UI Design' จะให้ภาพเช่น:

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

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

เอฟเฟกต์ 3D มีประโยชน์จริง ๆ ในกรณีนี้เพราะมันบอกผู้ใช้อย่างรวดเร็วว่านี่เป็นปุ่มคลิกได้และฉันจินตนาการว่าในช่วงเวลาแลกเปลี่ยนร้านอาหารมีความสำคัญอย่างยิ่ง

ฉันไม่ใช่มืออาชีพด้านการออกแบบ แต่เนื่องจากฉันต้องพิจารณาสิ่งนี้เมื่อสร้างแอพมือถือ ....

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

2. ใช้เส้นขอบ (ไม่ใช่สี) เพื่อจัดกลุ่มรายการที่เกี่ยวข้องหากรายการเหล่านั้นมีระยะห่างระหว่างกัน หากไม่มีระยะห่างระหว่างพวกเขาให้ใช้สีเพื่อให้พื้นที่ที่เกี่ยวข้องทั้งหมดดูเหมือนว่ามีสีพื้นหลังทึบหนึ่งสี

3. เลือกสีที่นุ่มนวล (คิดว่าสีพาสเทล) และเป็นส่วนหนึ่งของชุดสีฟรี ตรวจสอบให้แน่ใจว่ามีสีอ่อนและเข้มในแต่ละสีในจานสีของคุณ ฉันหวังว่าคุณจะยังไม่ได้จัดการกับระบบที่สามารถแสดงได้จากจานสี CGA / VGA 16 เก่าเท่านั้น

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

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

6. เมื่อใช้พื้นที่ชื่อเรื่องในหน้าต่าง:

   รายการการดำเนินการทั้งหมดในพื้นที่นั้นควรอยู่ในพื้นที่ชื่อเรื่อง

   ข รายการการดำเนินการทั้งหมดในพื้นที่นั้นควรเป็นแอปพลิเคชันระดับโลก (เช่นการเข้าสู่ระบบการตั้งค่า ฯลฯ )

   ค ไม่ควรซ้อนทับสิ่งอื่นใดนอกเหนือจากโลโก้

ฉันหวังว่านี่จะช่วยได้.

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

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

บางทีปุ่ม FOOD สีม่วงทำหน้าที่เป็นแท็บดังกล่าวอยู่แล้วและ DRINKS ก็เป็นอีกหนึ่งแท็บดังกล่าว พวกเขาไม่ควรอยู่ทางขวา - ภาษาอังกฤษอ่านจากบนลงล่างซ้ายไปขวาและเวิร์กโฟลว์ของคุณควรคัดลอกสิ่งนี้

แถวของแท็บทำงานได้ดีพอสมควร แต่ที่นี่คุณอาจมีลำดับชั้นที่ลึกกว่า ในกรณีดังกล่าวอาจเป็นการดีที่จะแสดงสถานะ UI ปัจจุบันเป็นเส้นทาง: Food > Starters >หนึ่งบรรทัดที่ด้านบนสุดของหน้าเริ่มต้น ทำรายการแรกของเมนู "เริ่ม" ปุ่ม "กลับไปที่อาหาร"; สิ่งนี้ช่วยให้คุณซ่อนการควบคุมได้เล็กน้อย

ก่อนอื่นฉันจะถามว่าจุดประสงค์คืออะไร

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

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

ปัญหาเกี่ยวกับ GUI ปัจจุบันคือ:

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

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

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

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

เนื่องจากดูเหมือนว่าวิธี "ไทล์" ไม่ได้รับการออกแบบมาสำหรับอุปกรณ์พกพา Android หรือ Windows OS โดยเฉพาะอย่างยิ่งมันจึงไม่เหมือนแอพพลิเคชั่นอย่างสิ้นเชิง - ซึ่งทำให้เกิดความขัดแย้งเพราะพวกเขาสั่งสิ่งที่มองเห็น ค่อนข้างทุกอย่างเกี่ยวกับมันคือ "ผิด" ดังนั้นฉันจะข้ามเฉพาะ

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

https://itunes.apple.com/us/app/square-register-point-sale/id335393788?mt=8

สิ่งที่ใหญ่ที่สุดที่ฉันคิดว่าคุณสามารถทำได้เพื่อปรับปรุงสิ่งที่มีอยู่ (และทำไมมันดูล้าสมัย) คือ UI ที่ทันสมัยมีแนวโน้มที่จะชอบพื้นที่สีขาวมากมาย - และเพื่อทำให้พื้นที่สีขาวเป็นสีขาว การออกแบบจำนวนมากในทุกวันนี้ใช้การพิมพ์แบบย้อนกลับ (ตัวอักษรสีขาวบนพื้นหลังสีดำหรือตัวอักษรสีขาวบนสีเข้ม ๆ ) อย่าง จำกัด ชอบเว็บไซต์นี้: https://developer.wordpress.com/calypso/

ควรจัดระเบียบปุ่มตามฟังก์ชันลำดับชั้นและปุ่มควรสอดคล้องกับวิธีการจัดวาง

ในแง่ของคนธรรมดา:

1) วางปุ่มที่ใช้งานบ่อยที่สุดไว้ในที่ที่สามารถหาได้

2) ปุ่มภายในควร "ควบคุม" โดยเปลือกนอก (หน้าต่างภายในหน้าต่างภายในหน้าต่าง);

3) หากคุณมีปุ่ม Enter (หรือปุ่มอื่น ๆ สำหรับเรื่องนั้นให้เก็บไว้ในที่เดียวกันแม้ว่าหน้าจออาจเปลี่ยนไป

ระบบ POS หลายคนได้พยายามที่จะเพิ่มประสิทธิภาพการออกแบบการทำงาน แต่อย่างหนึ่ง POS ผมคิดว่าเป็น AA บิตก่อนเกมคือRezku POS