Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Checkbox presentation cs5

283 views

Published on

UI design pattern presentation
in collaboration with Kobi Pimat

Published in: Design
  • My brother found Custom Writing Service ⇒ www.WritePaper.info ⇐ and ordered a couple of works. Their customer service is outstanding, never left a query unanswered.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Checkbox presentation cs5

  1. 1. Checkbox Radio Button Toggle Button
  2. 2. ?‫בכלל‬ ‫זה‬ ‫מה‬ )GUI( ‫משתמש‬ ‫ממשק‬ ‫של‬ ‫גרפיים‬ ‫אלמנטים‬ .‫שונות‬ ‫אופציות‬ ‫בין‬ ‫לבחור‬ ‫לנו‬ ‫מאפשרים‬ ‫אשר‬ Checkboxes/Tickboxes Radio Buttons Toggle Buttons
  3. 3. ?‫בכלל‬ ‫זה‬ ‫מה‬ )GUI( ‫משתמש‬ ‫ממשק‬ ‫של‬ ‫גרפיים‬ ‫אלמנטים‬ .‫שונות‬ ‫אופציות‬ ‫בין‬ ‫לבחור‬ ‫לנו‬ ‫מאפשרים‬ ‫אשר‬ ‫המבדילים‬ ‫שונים‬ ‫מעט‬ ‫מאפיינים‬ ‫אלמנט‬ ‫לכל‬ .‫מהאחרים‬ ‫אותו‬ Checkboxes/Tickboxes Radio Buttons Toggle Buttons
  4. 4. ?‫בכלל‬ ‫זה‬ ‫מה‬ )GUI( ‫משתמש‬ ‫ממשק‬ ‫של‬ ‫גרפיים‬ ‫אלמנטים‬ .‫שונות‬ ‫אופציות‬ ‫בין‬ ‫לבחור‬ ‫לנו‬ ‫מאפשרים‬ ‫אשר‬ ‫המבדילים‬ ‫שונים‬ ‫מעט‬ ‫מאפיינים‬ ‫אלמנט‬ ‫לכל‬ .‫מהאחרים‬ ‫אותו‬ ‫כל‬ ‫ליד/על‬ ‫הסבר‬ ‫טקסט‬ ‫יכללו‬ ‫כולם‬ ‫בדר"כ‬ .‫אופציה‬ Checkboxes/Tickboxes Radio Buttons Toggle Buttons
  5. 5. ?‫בכלל‬ ‫זה‬ ‫מה‬ ‫אופציות‬ ‫של‬ ‫מרובה‬ ‫בחירה‬ ‫מאפשר‬ .‫כלל‬ ‫בחירה‬ ‫אי‬ ‫או‬ )TRUE( ‫חיובי‬ ‫מצב‬ ‫מסמלת‬ ‫מסומנת‬ ‫תיבה‬ )FALSE( ‫שקרי‬ ‫מצב‬ ‫מסמלת‬ ‫ריקה‬ ‫תיבה‬ Checkboxes/Tickboxes Radio Buttons Toggle Buttons
  6. 6. ?‫בכלל‬ ‫זה‬ ‫מה‬ ‫אופציות‬ ‫של‬ ‫מרובה‬ ‫בחירה‬ ‫מאפשר‬ .‫כלל‬ ‫בחירה‬ ‫אי‬ ‫או‬ )TRUE( ‫חיובי‬ ‫מצב‬ ‫מסמלת‬ ‫מסומנת‬ ‫תיבה‬ )FALSE( ‫שקרי‬ ‫מצב‬ ‫מסמלת‬ ‫ריקה‬ ‫תיבה‬ .‫בלבד‬ ‫אחת‬ ‫אופציה‬ ‫בחירת‬ ‫מחייב‬ .‫בחירה‬ ‫אי‬ ‫מאפשר‬ ‫אינו‬ Checkboxes/Tickboxes Radio Buttons Toggle Buttons
  7. 7. ?‫בכלל‬ ‫זה‬ ‫מה‬ ‫אופציות‬ ‫של‬ ‫מרובה‬ ‫בחירה‬ ‫מאפשר‬ .‫כלל‬ ‫בחירה‬ ‫אי‬ ‫או‬ )TRUE( ‫חיובי‬ ‫מצב‬ ‫מסמלת‬ ‫מסומנת‬ ‫תיבה‬ )FALSE( ‫שקרי‬ ‫מצב‬ ‫מסמלת‬ ‫ריקה‬ ‫תיבה‬ .‫בלבד‬ ‫אחת‬ ‫אופציה‬ ‫בחירת‬ ‫מחייב‬ .‫בחירה‬ ‫אי‬ ‫מאפשר‬ ‫אינו‬ - ‫משתנה‬ ‫חוקיות‬ .‫לרדיו‬ ‫וגם‬ ‫לצ'קבוקס‬ ‫גם‬ ‫כתחליף‬ ‫לשמש‬ ‫יכול‬ Checkboxes/Tickboxes Radio Buttons Toggle Buttons
  8. 8. ‫מהמשתמש‬ ‫לקלוט‬ ‫מהצורך‬ ‫נבע‬ ‫האלמנט‬ ‫החדרת‬ .‫אפשרויות‬ ‫של‬ ‫ממערך‬ ‫בלבד‬ ‫אחת‬ ‫בחירה‬ ‫של‬ ‫חיקוי‬ ‫נעשה‬ ‫ביותר‬ ‫האינטואיטיבית‬ ‫בחשיבה‬ ‫יכל‬ ‫המשתמש‬ ‫בהם‬ ‫ישנים‬ ‫מכשירים‬ ‫פי‬ ‫על‬ ,‫רדיו‬ ‫לחצני‬ .‫המכשיר‬ ‫זכרון‬ ‫בתוך‬ ‫תחנות‬ ‫של‬ ‫סגור‬ ‫מסט‬ ‫לבחור‬ ‫הוא‬ ‫כן‬ ‫כשמו‬ - ‫רדיו‬ ‫כפתור‬
  9. 9. ‫בחירות‬ ‫טפסי‬ ‫אמריקאי‬ ‫מבחן‬ ‫אפשריים‬ ‫מקורות‬ - ‫צ'קבוקס‬
  10. 10. ‫בחירות‬ ‫טפסי‬ ‫אמריקאי‬ ‫מבחן‬ ‫לבחירה‬ ‫מהרצון‬ ‫כתוצאה‬ ‫נוצר‬ ‫הצ'קבוקס‬ ‫היד‬ ‫בכתב‬ ‫התשובה‬ ‫את‬ ‫לכתוב‬ ‫במקום‬ .‫אנונימית‬ .‫המתאים‬ ‫במקום‬ ‫לסמנה‬ ‫רק‬ ‫נותר‬ - ‫האישי‬ ‫בחירות‬ ‫טפסי‬ ‫הן‬ ‫לכך‬ ‫מובהקות‬ ‫דוגמאות‬ 2 .‫בחירה‬ ‫מרובי‬ ‫ומבחני‬ ‫אפשריים‬ ‫מקורות‬ - ‫צ'קבוקס‬
  11. 11. ,‫ורטיקלית‬ ‫ברשימה‬ ‫יבואו‬ ‫הכפתורים‬ ‫בדר"כ‬ ‫של‬ ‫שורה‬ ‫באותו‬ ‫כשהכפתור‬ ,‫כלשהו‬ ‫לצד‬ ‫מיושרים‬ :‫לו‬ ‫השייך‬ ‫הטקסט‬ ‫ותפקוד‬ ‫חוקיות‬  
  12. 12. ,‫פעולה‬ ‫ככפתורי‬ ‫משמשים‬ ‫לא‬ ‫הכפתורים‬ ‫בדר"כ‬ .‫הגדרה‬ ‫ככפתורי‬ ‫אלא‬ ‫ותפקוד‬ ‫חוקיות‬  
  13. 13. ‫לשוני‬ ‫בלבול‬ ‫לבלבל‬ ‫יכולה‬ )‫/נקודה‬/ ‫ב‬ ‫(שימוש‬ ‫משתנה‬ ‫חוקיות‬ .‫המשתמש‬ ‫את‬ ‫לסמן‬ ‫יכול‬ , - ‫הוי‬ ‫סימן‬ ,‫אנגלית‬ ‫דוברות‬ ‫לא‬ ‫בארצות‬ ."‫מ"כן‬ ‫הגמור‬ ‫ההיפך‬ ‫את‬ R ‫ואילו‬ ‫נכונה‬ ‫לא‬ ‫תשובה‬ ‫מסמן‬  ,‫למשל‬ ‫בשוודיה‬ .‫נכונה‬ ‫תשובה‬ ‫מסמנת‬ )rätt -"‫"נכון‬ ‫(מהמילה‬ Yes = No = ???  
  14. 14. Case Study - ‫קוגניטיבית‬ ‫הטיה‬ ‫אנושי‬ ‫פגם‬ ‫היא‬ ‫מחדל‬ ‫ברירת‬ ‫ע"י‬ ‫קוגניטיבית‬ ‫הטיה‬ ‫של‬ ‫הנוחות‬ ‫אי‬ ‫את‬ ‫למנוע‬ ‫כדי‬ ‫כי‬ ‫נראה‬ .‫משותף‬ ‫בוחרים‬ ‫כלל‬ ‫בדרך‬ ‫אדם‬ ‫בני‬ ,‫אנו‬ ,‫מורכבות‬ ‫אפשרויות‬ .‫לנו‬ ‫המסופקת‬ ‫המחדל‬ ‫בברירת‬ ‫בחירות‬ ‫את‬ ‫לעצב‬ ‫יכולה‬ ‫בצ'קבוקס‬ ‫מחדל‬ ‫ברירת‬ .‫היוצר‬ ‫לראות‬ ‫בהתאם‬ ‫המשתמשים‬
  15. 15. Case Study - ‫קוגניטיבית‬ ‫הטיה‬ ‫אנושי‬ ‫פגם‬ ‫היא‬ ‫מחדל‬ ‫ברירת‬ ‫ע"י‬ ‫קוגניטיבית‬ ‫הטיה‬ ‫של‬ ‫הנוחות‬ ‫אי‬ ‫את‬ ‫למנוע‬ ‫כדי‬ ‫כי‬ ‫נראה‬ .‫משותף‬ ‫בוחרים‬ ‫כלל‬ ‫בדרך‬ ‫אדם‬ ‫בני‬ ,‫אנו‬ ,‫מורכבות‬ ‫אפשרויות‬ .‫לנו‬ ‫המסופקת‬ ‫המחדל‬ ‫בברירת‬ ‫בחירות‬ ‫את‬ ‫לעצב‬ ‫יכולה‬ ‫בצ'קבוקס‬ ‫מחדל‬ ‫ברירת‬ .‫היוצר‬ ‫לראות‬ ‫בהתאם‬ ‫המשתמשים‬ ‫יחסית‬ ‫דומות‬ ‫ארצות‬ ‫בין‬ ‫מוסברת‬ ‫ולא‬ ‫גדולה‬ ‫שונות‬ ‫יש‬ .‫וגרמניה‬ ‫אוסטריה‬ ‫או‬ ,‫ושוודיה‬ ‫דנמרק‬ ‫כמו‬ ‫בתרבויות‬ !‫הנהיגה‬ ‫רישיון‬ ‫ברישום‬ ‫הצ'קבוקס‬ ‫ניסוח‬ :‫התשובה‬ DK NL UK GR AU BL FR HU PL PT SE ‫ארצות‬ ‫לפי‬ ‫נהגים‬ ‫של‬ ‫איברים‬ ‫תרומת‬ % 100 28 17 12 100 98 100 100 100 100 86 4 60 20 80 40 0
  16. 16. = ‫ריקה‬ ‫תיבה‬ !‫גאה‬ ‫איברים‬ ‫תורם‬ ‫אני‬ = ‫ריקה‬ ‫תיבה‬ !‫באמ'שלכם‬ ‫אותי‬ ‫עזבו‬ Case Study - ‫קוגניטיבית‬ ‫הטיה‬
  17. 17. ‫גרפית‬ ‫התפתחות‬
  18. 18. ‫הלחיצה‬ ‫שטח‬ ‫הטקסט‬ ‫על‬ ‫גם‬ ‫אלא‬ ,‫הכפתור‬ ‫על‬ ‫רק‬ ‫לא‬ ‫ללחוץ‬ ‫היכולת‬ ‫אותו‬ ‫שמלווה‬ UX ‫התפתחות‬  cat  dog  hamster  lizard
  19. 19. ‫הובר‬ ‫מצבי‬ ‫ביניים‬ ‫מצב‬ ‫סטנדרט‬ ‫אין‬ - ‫מקלדת‬ ‫קיצורי‬ UX ‫התפתחות‬
  20. 20. ‫והן‬ ‫מרובה‬ ‫בבחירה‬ ‫הן‬ ‫לשמש‬ ‫יכולים‬ toggle ‫כפתורי‬ .‫יחידנית‬ ‫כבחירה‬ .‫מהרגיל‬ ‫יותר‬ ‫גדול‬ ‫לחיצה‬ ‫שטח‬ - ‫יתרון‬ ‫נכונות‬ ‫התשובות‬ ‫כל‬ - ‫טוגל‬ ‫כן/לא‬‫מרובה‬ ‫בחירה‬ 1 221 3 ‫יחידה‬ ‫בחירה‬ onoff
  21. 21. ‫מרובה‬ ‫כבחירה‬ ‫הן‬ ‫לשמש‬ ‫יכולים‬ toggle ‫כפתורי‬ .‫יחידנית‬ ‫כבחירה‬ ‫והן‬ .‫מהרגיל‬ ‫יותר‬ ‫גדול‬ ‫לחיצה‬ ‫שטח‬ :‫יתרונות‬ .‫מאוחד‬ ‫והכפתור‬ ‫במידה‬ ‫ותזוזות‬ ‫לחיצות‬ ‫פחות‬ ‫נכונות‬ ‫התשובות‬ ‫כל‬ - Toggle ‫כן/לא‬‫מרובה‬ ‫בחירה‬ 1 221 3 ‫יחידה‬ ‫בחירה‬ off on
  22. 22. Select box -‫ל‬ ‫הכפתורים‬ ‫הפיכת‬ :‫אבולוציה‬ ‫אחד‬ ‫לבחור‬ ‫ניתן‬ ‫בה‬ ,select box‫ל‬ ‫הופכת‬ ‫ארוכה‬ ‫רשימה‬ .‫מהשורות‬ ‫יותר‬ ‫או‬
  23. 23. ‫בוקס‬ ‫לסלקט‬ ‫לדרופ-דאון‬ ‫רדיו‬ ‫מכפתורי‬
  24. 24. ‫תלויות‬ ‫בלתי‬ ‫לשורות‬ ‫טוגל‬ :‫אבולוציה‬ ‫כן/לא‬ ‫בצורת‬ ‫שורה‬ ‫לכל‬ ‫סימון‬
  25. 25. ‫תלויות‬ ‫ובלתי‬ ‫תלויות‬ ‫לשורות‬ ‫טוגל‬ Present Future?

×