מהו דפוס ממשק משתמש?

מבט על היבט חדש בעיצוב ממשק המשתמש

עוד מאותו הדבר

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

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

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

אז לחשוב צעד אחד קדימה, האם יש משאבים שתוכלו להשתמש בהם בעת תכנון ממשק משתמש בעצמכם? אולי אוסף של דוגמאות שמעצבים אחרים כבר זיהו ופורמל? ובכן, לא הייתי שואל את השאלה הזו אם כבר לא תהיה לי את התשובה! הגיע הזמן לפרק ב '!

פרק שני (זה שהוכרז)

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

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

לחפש

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

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

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

דיאלוג

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

מדינות ריקות

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

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

רק התחלה

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