כשמשתמש מוחק משהו, לרוב הוא מתכוון לזה, הוא באופן אקטיבי לחץ על כפתור שהייעוד שלו זה מחיקה. אבל: Sometimes, cats walk on keyboards ולכן קיימות אפשרויות שונות למנוע מחיקה פזיזה ושיחזור הנמחק.

 

במאמר זה אני אעלה בפניכם את האפשרויות הקיימות לאפיון פעולת המחיקה בממשקים, כי מכל מיני סיבות (גם חתולים) המשתמש עשה פעולה אליה לא התכוון. כאן אנחנו נכנסים לתמונה ונותנים את התמיכה הטכנית והנפשית להציל אותו מטעותו. לקינוח – השראה של מחיקה מהאתר דריבל.

אפשרויות המחיקה הקיימות הן:

חלון קופץ לאישור הפעולה

בר נוטיפיקצייה של undo (או בשמו Snackbar, Toast)

כפתור 'חזור' בממשק עצמו (UNDO)

פח אשפה/היסטורית פעולות/החייאת גירסאות

מודל דיאלוג בו המשתמש מקליד משהו בכדי לאשר את המחיקה

שחרור נעילה של פעולת מחיקה לפני המחיקה עצמה

Drag to trash- גרירה לאשפה

מחיקה החלטית

 

לאפשרויות יש יתרונת וחסרונות, חלקן משתמשים ביחד, חלקן לחוד.

חלון קופץ

חלון קופץ הוא הוספת שלב לפני השלמת הפעולה, בו ניתן להתחרט. זה שלב נפוץ מאוד בו קופץ חלון של "האם אתה בטוח?". הרבה פעמים התשובה לדיאלוג הזה זה 'אישור/ביטול' – “Are you sure you want to quit?” והכפתורי בחירה- OK/Cancel. בממשקים שדיאלוגים כאלה קופצים, לא בהכרח רק בגלל שהמשתמש מחק משהו, חשוב מאוד להבין שהמשתמש יפתח הרגל התנהגותי- הוא יגיב אוטומטית לחלון.

היווצרות הרגלים זה למעשה דבר טוב, ממשק שהוא נוח זה ממשק שמלמד הרגלים למשתמש ובכך מקנה לו שימוש מהיר ונוח ללא מחשבה מיותרת. במקרה של הדיאלוג שקופץ בו המשתמש  צריך לענות על שאלה בכדי להשלים את הפעולה, הוא לא באמת רוצה לחשוב על השאלה, הוא רק רוצה להשלים את הפעולה אותה ביצע.

מעגל של הרגל התנהגותי חוזר:

  • Reminder -הטריגר שמפעיל את ההתנהגות (מוחק)
  • Routine  – ההתנהגות עצמה, הפעולה (לוחץ לאשר את המחיקה)
  • Reward – תוצאת הפעולה (פעולה הושלמה-יאיי)

לצערנו, ההרגלים עלולים גם להפיל אותנו, ואנו עלולים להבין בטעותינו רק לאחר השלמת הפעולה.

בפעולת מחיקה אנחנו לא רוצים שהוא באופן אוטומטי ילחץ על ok למקרה שהוא לא באמת רוצה לבצע את הפעולה לסופה.

לאחר הבנה שזה משהו שקרה וקורה לכולנו, האינסטינקט הארור שגורם לנו ללחוץ על 'אישור' ואז למשוך בשיערות, יש כמה שיטות שאנחנו יכולים להשתמש בהן בכדי לתמוך במשתמש.

פתרון ראשון- מיקרו קופי. להחליף את OK/Cancel ב- Discard/Keep למשל. הכפתור מדגיש וחוזר על אופי הפעולה שוב ולא על האישור שלה.

 

פתרון שני- עיצוב. אם יש לכם בממשק מגוון של חלונות קופצים שעלולים ליצור את ההרגל ההתנהגותי, תתנו לחלון הקופץ של המחיקה עיצוב מעט שונה, אם זה אייקון בולט, צבעוניות, בכדי להדגיש למשתמש שהשלמת הפעולה הספציפית הזאת היא בעלת השלכות.

פתרון שלישי- לאחר הטעות המרה, למשתמש יש לאן לפנות: מיחזור/פח אשפה/ארכיון/היסטורית פעולות/גירסאות, בעצם מקום ממנו ניתן להקים לתחייה את הדבר אותו הוא מחק.

בר נוטיפיקצייה של Undo

בר נוטיפיקצייה (או בשמו Snackbar, Toast) מופיע לאחר השלמת הפעולה באיזור הנראה לעין אך לא מפריע למשטח העבודה או האיזור העיקרי של הממשק.

חלון קופץ שדיברנו עליו למעלה, מוסיף שלב בו ניתן להתחרט על הפעולה, הוא בנראותו overlay על המסך, ולכן חסרונו הוא הסתרת ביצוע הפעולה וניתוק המשתמש ממשטח העבודה (זה גם יתרון אם רוצים לתת במה לפעולה- הכל תלוי-החלטות בהתאם למוצר/ממשק). בר הנוטיפקצייה חוסך ונמנע מכל זה.

הבר נותן השלמה מיידית לפעולה של המשתמש (מחיקה) ובכך לא מוסיף למשתמש שלב בו הוא צריך לחשוב מחדש ולהקליק. בנוסף, הבר נותן לו את המענה של התחרטות על מעשיו לאחר מכן מעצם נוכחותו.

גוגל במוצריהם השונים משתמשים בו, לדוגמה בג'י-מייל וגוגל NOTE :



בגלל שהבר נוטיפיקצייה הוא זמני ונעלם לאחר פעולות נוספות, הוא בדרך כלל לא יהיה המענה היחיד למשתמש. תמיד יהיו משתמשים שמחקו משהו ויזכרו או יתחרטו לאחר אפילו ימים מביצוע הפעולה. לכן זה תמיד יתלווה עם סל מיחזור/פח אשפה שקיימים בממשק.

 

כפתור 'חזור' בממשק עצמו (UNDO)

כפתור מובנה בממשק עצמו בו ניתן לחזור אחורה וקדימה בפעולות חוסך את החלון קופץ לאישור והבר נוטיפיקצייה. הוא לא בהכרח חייב לבוא לבד, הרבה פעמים יהיה בממשק גם פח אשפה/היסטוריה/גירסאות אחורה לכל המשתמשים שנזכרים לאחר כמה ימים שהם צריכים משהו מבית הקברות (;

 

יש פח אשפה/היסטורית פעולות/החייאת גירסאות

האפשרות של פח אשפה/ סל מיחזור בעצם מאפשרת וויתור על כל שאר האפשרויות- חלון קופץ/בר נוטיפיקצייה, תמיד יש את המקום אליו ניתן לחזור ולהוציא אלמנטים מחוקים. זה נותן אפשרות לחוויה חלקה ללא הפרעות למשתמש. ולא משנה מתי הוא מתחרט, זה שם, באותו הרגע שהושלמה הפעולה ולאחר כמה ימים.

לא בכל מוצר או ממשק יש פח אשפה בגלל מהות המוצר, ולכן קיימות האלטרנטיבות, למשל, אם המוצר זה איזשהו אדיטור שבו המשתמש יכול למחוק מלא אלמנטים שהם גם שטותיים כמו טקסט, רקעים וצורות למינהן, לעשות פח אשפה יכול להיות עמוס עד בכדי שלא מוצאים את הידיים והרגליים (באדיטורים בהרבה מקרים תהייה היסטוריה/גירסאות וכפתור UNDO).

דוגמא להיסטוריה של גירסאות מוויקס, אדיטור לבניית אתרים:

 

מודל דיאלוג בו המשתמש מקליד משהו בכדי לאשר את המחיקה

מודל זה הוא למקרים קיצוניים של מחיקות שההשלכות שלהן מאוד קריטיות. זה חלון קופץ שדורש מהמשתמש לבצע פעולת הקלדה לפני מתן האישור. זה בודק ערנות ומודעות למעשיו של המשתמש, חתול לא היה מצליח לעבור את החלון הזה (:

 

שחרור נעילה של פעולת מחיקה לפני המחיקה עצמה

זה בעצם ההפך מהחלון הקופץ, בשביל שהמשתמש יוכל לבצע את פעולת המחיקה הוא צריך לשחרר מצב נעילה.

כמה מהחסרונות הם:

  • תסכול על אי יכולת מחיקה ורק לאחר מכן הבנה שזה מצב נעול שצריך לשחרר
  • ביצוע משימה בשביל לבצע משימה, זה שונה פסיכולוגית מלבצע את המשימה ואז לאשר אותה כמו בחלון קופץ, זה מרגיש יותר אתגרי.

נתקלתי ברעיון הזה בפורום כפתרון שאחד מהמאפיינים הביא למוצר שלו. אני לא נתקלתי בזה ואשמח שאם מישהו פה בקהל הקוראים כן נתקל, לשים בתגובות דוגמאות. קיימת אפשרות במק למשל, שאתה יכול לנעול תקיות מסויימות שאתה יודע שהן חשובות לך ואתה לא תרצה למחוק אותן בטעות. יש אנשים שמסתבכים אחרי זה בלשחרר את הנעילה כי הם בכל זאת רוצים למחוק אותן.

 

Drag to trash- גרירה לפח אשפה

שיטה מעט טרחנית, אבל החתול לא יהיה מסוגל לעשות זאת, המשתמש יהיה צריך להיות די בפוקוס בכדי לבצע את הפעולה, ולכן זאת אפשרות נחמדה למניעת טעויות. שיטה זאת צריך להראות וללמד את המשתמש במעוד מועד, הפח אשפה צריך להיות בקרבת מקום ובולט מספיק בשביל לא לחפש אותו יותר מידי זמן.

ד"א- כל הגרירה בכדי למחוק ברשימות במובייל, כמו הרבה מהדוגמאות דריבל שיהיו בסוף המאמר, זו אבולוציה של הגרירה לאשפה.

 

מחיקה החלטית

זה כמעט לא קיים, אולי בכלל לא? מי שמכיר, אשמח בתגובות.

מסקנות

לאחר שיודעים את כל האפוציות המונחות על השולחן, ניתן לקבל החלטות המתאימות למוצר ובמינימום הפרעה למשתמש. תוך מודעות להרגלי התנהגות, חתולים על מקלדות והשלמה המהירה ביותר של פעולה, אנחנו נרכיב את החוויה הטובה ביותר למשתמש שלנו. בהצלחה (:

השראה של DELETE מדריבל

*אני רק מדגישה שהשוטים הבאים זה להשראה אנימטיבית ועיצובית ולא בהכרח איפיונית.

tear paper delete
tear paper delete
Swipe & Delete interaction by Divan Raj
Swipe & Delete interaction by Divan Raj
Delete email by Vitaly Silkin
Delete email by Vitaly Silkin
Material Design——Delete by Xer.Lee
Material Design——Delete by Xer.Lee
Drag by Here180
Drag by Here180
Animation For Voice Memos--delete by Xer.Lee
Animation For Voice Memos–delete by Xer.Lee
Boom by Zee Young
Boom by Zee Young
Delete Message? by Malin Elisabeth Lindberg
Delete Message? by Malin Elisabeth Lindberg
Destroy Files Cards by Ricardo Llanes Jr
Destroy Files Cards by Ricardo Llanes Jr
Delete confirmation by Lewis Spearman
Delete confirmation by Lewis Spearman
Delete animation by gee130
Delete animation by gee130

קרדיט לתמונה הראשית בלינק

_________________________________________________________________________

על גיפים, דריבל, השראה ועוד, תוכלו למצוא גם בפוסטים הבאים:

לטטוריאל לייצוא גיף איכותי

השראה לגיפים

טרנדים וטיפים להצגת העיצוב שלכם בדריבל

אנימציות בחווית משתמש: מאין באת ולאן תשוב

אנימציות וחווית משתמש: יד ביד

השראה לעיצובים של דירוג ופידבאק על מוצר

השראה ומאמרים מומלצים בנושא של עיצוב טפסי תשלום

השראה של אנימציות טעינה מדריבל

Share

קצת על המחבר:

תמצאו את Pixel Perfect ב:

מאמרים שעשויים לעניין אותך

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

הצטרפו לניוזלטר שלנו!

הרשמו לניוזלטר של פיקסל פרפקט וקבלו למייל רשימת קריאה חשובה לתחום מדי שבוע




    What is 6 + 8 ?

    אשמח לשלוח לך פרטים!

    אנא מלא/י את פרטי הקשר שלך כאן ואשלח לך אימייל עם כל הפרטים אודות ההכשרה
    ;