חזרה

שיטות עבודה מומלצות לעיצוב כרטיסים

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

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

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

1. שמרו על עיקרון: "כרטיס אחד, רעיון אחד"

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

כרטיס = בלוק אחד של תוכן או פעולה.

2. הפכו את כל הכרטיס לאזור לחיץ

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

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

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

3. השקיעו בעיצוב ויזואלי

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

קרדיט: פייפר לוסון

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

תמונות

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

קרדיט: דייב גאמאש

צללים ומעברי צבע

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

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

טיפוגרפיה

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

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

קרדיט: maconprinting

4. הגבילו את כמות התוכן בכרטיס

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

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

קרדיט: Piotr Adam Kwiatkowski

5. נצלו אנימציות ותנועה חכמה

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

רמזים ויזואליים

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

רמז להצגת פונקציונליות ניווט.
קרדיט: Barthelemy Chalvet

משוב ויזואלי

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

החילו אנימציות ריחוף על הכרטיסים.
קרדיט: uxpin

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

קרדיט: Roman Shkolny

זום פנימה

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

אנימציה מסייעת לקשר בין תצוגת התמונה המוקטנת לתצוגה המפורטת שלה.
קרדיט: Charles Patterson