כנראה שהיית שם בעבר. איך בוחרים בין הצגת מודאל למשתמשים, ומתי מנווטים אותם לדף נפרד וחדש? והאם זה משנה בכלל? למעשה, זה כן. ההחלטה משפיעה על זרימת המשתמשים, ההקשר שלהם, יכולתם לחפש פרטים, ואיתה תדירות השגיאות והשלמת המשימה. שתי האפשרויות יכולות להפריע ומתסכלות - בזמן הלא נכון ובמקום הלא נכון. אז עדיף שנעשה את זה נכון. ובכן, בוא נראה איך עושים בדיוק את זה. מודלים לעומת דיאלוגים מול שכבות על לעומת Lightbox למרות שאנו מדברים לעתים קרובות על רכיב ממשק משתמש מודאלי יחיד, לעתים קרובות אנו מתעלמים מניואנסים עדינים ומורכבים בין כל סוגי המודלים השונים. למעשה, לא כל מודל זהה. מודלים, דיאלוגים, שכבות-על ותיבות אור - כולם נשמעים דומים, אבל הם למעשה שונים לגמרי:
Dialog מונח כללי ל"שיחה" (מערכת ↔ משתמש). Overlay חלונית תוכן קטנה המוצגת על גבי דף. ModalUser חייב לקיים אינטראקציה עם שכבת-על + רקע מושבתת. NonmodalUser חייב לקיים אינטראקציה עם שכבת-על + רקע מופעלת. Lightbox מעומעם רקע כדי למקד את תשומת הלב במודאלי.
כפי שמדגישה אנה קיילי, רוב שכבות העל מופיעות בזמן הלא נכון, מפריעות למשתמשים במהלך משימות קריטיות, משתמשות בשפה גרועה ושוברות את זרימת המשתמשים. הם מפריעים מטבעם, ובדרך כלל עם רמת חומרה גבוהה ללא צורך עז בכך.
אין ספק שחייבים להאט את הקצב ולהפריע למשתמשים אם להשלכות הפעולה שלהם יש השפעה גבוהה, אבל ברוב התרחישים הלא-מודלים הם הרבה יותר עדינים ואפשרות ידידותית יותר להביא משהו לידיעת המשתמש. אם כבר, אני תמיד מציע שזה יהיה ברירת מחדל. מודלים ← למשימות בודדות, עצמאיות כמעצבים, לעתים קרובות אנו פוסלים את המודלים כבלתי רלוונטיים ומעצבנים - ולעתים קרובות הם כן! - ובכל זאת יש להם גם את הערך שלהם. הם יכולים להועיל מאוד כדי להזהיר את המשתמשים מפני טעויות אפשריות או לעזור להם להימנע מאובדן נתונים. הם יכולים גם לסייע בביצוע פעולות קשורות או להתעמק בפרטים מבלי להפריע למצב הנוכחי של הדף. אבל היתרון הגדול ביותר של מודלים הוא שהם עוזרים למשתמשים לשמור על ההקשר של המסך הנוכחי. זה לא אומר רק ממשק המשתמש, אלא גם קלט ערוך, מיקום גלילה, מצב האקורדיונים, בחירת פילטרים, מיון וכו'.
לפעמים, משתמשים צריכים לאשר בחירה במהירות (למשל, מסננים כפי שמוצג לעיל) ולאחר מכן להמשיך מיד משם. שמירה אוטומטית יכולה להשיג את אותו הדבר, כמובן, אבל זה לא תמיד נחוץ או רצוי. וחסימת ממשק המשתמש היא לרוב לא רעיון טוב. עם זאת, מודלים אינם משמשים עבור כל משימות. בדרך כלל, אנו משתמשים בהם עבור משימות בודדות, עצמאיות שבהן המשתמשים צריכים לקפוץ, להשלים משימה ואז לחזור למקום שבו הם היו. באופן לא מפתיע, הם אכן עובדים היטב עבור אינטראקציות קצרות בעדיפות גבוהה (למשל, התראות, פעולות הרסניות, אישורים מהירים). כאשר מודלים עוזרים: 🚫 מודלים הם לרוב משבשים, פולשניים ומבלבלים.🚫 הם מקשים על השוואה והעתק-הדבק.✅ עם זאת, מודלים מאפשרים למשתמשים לשמור על הקשרים מרובים.✅ שימושי למניעת שגיאות בלתי הפיכות ואובדן נתונים.✅ שימושי אם שליחת משתמשים לדף חדש תהיה משבשת. ✅ הצג מודאל רק אם המשתמשים יעריכו את ההפרעה.✅ כברירת מחדל, העדיפו דיאלוגים לא חוסמים ("לא מודלים").✅ אפשר למשתמשים למזער, להסתיר או לשחזר את תיבת הדו-שיח מאוחר יותר.✅ השתמש במודאל כדי להאט את קצב המשתמשים, למשל, אימות קלט מורכב. ✅ תן מוצא מחוץ לתיבה, או לחץ על ESC. דפים ← עבור זרימות עבודה מורכבות ורב-שלביות קוסמים או ניווט עם כרטיסיות בתוך מודלים לא עובדים טוב מדי, אפילו במוצרים מורכבים של ארגונים - שם, לוחות צד או מגירות בדרך כלל עובדים טוב יותר. הבעיות מתחילות כאשר משתמשים צריכים להשוות או להתייחס לנקודות נתונים - ובכל זאת מודלים חוסמים את ההתנהגות הזו, ולכן הם פותחים מחדש את אותו דף בכמה כרטיסיות במקום זאת.
עבור זרימות מורכבות יותר ותהליכים מרובי-שלבים, דפים עצמאיים עובדים בצורה הטובה ביותר. דפים עובדים טוב יותר גם כשהם דורשים את מלוא תשומת הלב של המשתמש, והפניה למסך הקודם אינה מועילה במיוחד. ומגירות עובדות עבור משימות משנה מורכבות מדי עבור מודל פשוט, אך אינן זקוקות לניווט עמוד מלא. מתי להימנע ממודלים: 🚫 הימנע ממודלים עבור הודעות שגיאה.🚫 הימנע ממודלים עבור התראות תכונה.🚫 הימנע ממודלים עבור חווית הצטרפות.🚫 הימנע ממודלים עבור משימות מורכבות וארוכות מרובות-שלבים.🚫 הימנע ממספר מודלים מקוננים והשתמש במקום זאת ב-Prev/Next.🚫 הימנע ממודלים אוטומטיים. הימנע משניהםלמשימות חוזרות ונשנות בהרבה מוצרים מורכבים ועתירי משימות, המשתמשים ימצאו את עצמם מבצעים את אותן המשימות שוב ושוב, שוב ושוב. שם, גם מודלים וגם ניווטים בעמודים חדשים מוסיפים חיכוך מכיוון שהם קוטעים את הזרימה או מאלצים משתמשים לאסוף נתונים חסרים בין כל הכרטיסיות או התצוגות השונות. לעתים קרובות מדי, משתמשים בסופו של דבר עם חוויה שבורה, מלאה באישורים בלתי נגמרים, אזהרות מוגזמות, הוראות מפורטות או סתם חסרות נקודות התייחסות. כפי שסייל סאוליוס סטבוליס, בתרחישים אלה, חלקים הניתנים להרחבה או עריכה במקום פועלים לעתים קרובות יותר - הם שומרים את המשימה מעוגנת למסך הנוכחי. בפועל, בתרחישים רבים, המשתמשים אינם משלימים את המשימות שלהם במנותק. הם צריכים לחפש נתונים, להעתיק ולהדביק ערכים, לחדד ערכים במקומות שונים, או פשוט לסקור רשומות דומות בזמן שהם עובדים במשימות שלהם. שכבות ומגירות מועילות יותר בשמירה על גישה לנתוני רקע במהלך המשימה. כתוצאה מכך, ההקשר תמיד נשאר במקומו, זמין לעיון או העתק-הדבק. שמור מודלים וניווט בדף לרגעים שבהם ההפרעה באמת מוסיפה ערך - במיוחד כדי למנוע טעויות קריטיות. מודלים מול דפים: עץ החלטות לפני זמן מה, ריאן נויפלד הרכיב מדריך מועיל מאוד שיעזור למעצבים לבחור בין מודלים ודפים. זה מגיע עם גיליון רמאות שימושי PNG ותבנית Google Doc עם שאלות מחולקות על פני 7 חלקים. זה ארוך, יסודי מאוד, אבל קל מאוד לעקוב אחריו:
זה אולי נראה מרתיע, אבל זה תהליך די פשוט בן 4 שלבים:
ההקשר של המסך. ראשית, אנו בודקים אם המשתמשים צריכים לשמור על ההקשר של המסך הבסיסי. מורכבות ומשך המשימות. משימות פשוטות יותר, ממוקדות, לא מסיחות את הדעת יכולות להשתמש במודאלי, אבל זרימות ארוכות ומורכבות זקוקות לדף. הפניה לדף הבסיסי. לאחר מכן, אנו בודקים אם משתמשים צריכים לעתים קרובות להתייחס לנתונים ברקע או שהמשימה היא אישור או בחירה פשוטה. בחירת שכבת-על נכונה. לבסוף, אם שכבת-על היא אכן אפשרות טובה, היא מנחה אותנו לבחור בין מודאלי או לא-מודאלי (נוטה לכיוון לא-מודאלי).
מסכם במידת האפשר, הימנע מחסימת ממשק המשתמש כולו. קיים דו-שיח צף, המכסה חלקית את ממשק המשתמש, אך מאפשר ניווט, גלילה והעתק-הדבק. או הצג את תוכן המודאל כמגירה צדדית. או השתמשו באקורדיון אנכי במקום זאת. או הביאו משתמשים לדף נפרד אם אתם צריכים להציג הרבה פרטים. אבל אם אתה רוצה להגביר את היעילות והמהירות של המשתמשים, הימנע ממודלים בכל מחיר. השתמש בהם כדי להאט את המהירות של המשתמשים, כדי לאגד את תשומת הלב שלהם, כדי למנוע טעויות. כפי שציינה תרז פסנדן, אף אחד לא אוהב להפריע לו, אבל אם אתה חייב, ודא שזה שווה את העלות. הכירו את "דפוסי עיצוב ממשק חכם" אתה יכול למצוא חלק שלם על מודלים וחלופות ב-Smart Interface Design Patterns, קורס הווידאו שלנו בן 15 שעות עם 100 דוגמאות מעשיות מפרויקטים מהחיים האמיתיים - עם אימון UX חי בהמשך השנה. הכל ממגה נפתחות ועד טבלאות ארגוניות מורכבות - עם 5 פלחים חדשים שנוספו מדי שנה. קפוץ לתצוגה מקדימה בחינם. השתמש בקוד BIRDIE כדי לחסוך 15% הנחה. הכירו את דפוסי עיצוב ממשקים חכמים, קורס הווידאו שלנו בנושא עיצוב ממשקים ו-UX.
Video + UX TrainingVideo onlyVideo + UX Training$ 495.00 $ 699.00 $
קבל הדרכה בווידאו + UX25 שיעורי וידאו (15 שעות) + אימון UX בשידור חי. אחריות להחזר כספי של 100 ימים. סרטון בלבד 300.00$ 395.00$
קבל את קורס הווידאו40 שיעורי וידאו (15 שעות). מתעדכן מדי שנה. זמין גם כצרור UX עם 2 קורסי וידאו.
משאבים שימושיים
סוגים שונים של חלונות קופצים, מאת אנה קיילי שיטות עבודה מומלצות לעיצוב מודלים של ממשק משתמש, מאת Uxcel We Use Too Many Damn Modals: UX Guidelines, מאת אדריאן איגר דיאלוגים מודאליים ולא מודאליים, מאת תרז פסנדן עיצוב ממשק משתמש ארגוני מודרני: דיאלוגים מודאליים, מאת ג'יימס ג'ייקובס מודלים במערכות עיצוב
