UX ו-UI · שלב 8
וויירפריים: השלד של המסך
וויירפריים (Wireframe) הוא שרטוט פשוט של מסך: מה יש בו, איפה כל דבר ומה הכי חשוב. בלי צבע, בלי גופנים ובלי תמונות, כדי שכולם יתמקדו במבנה.
מה זה וויירפריים
ה-Interaction Design Foundation מגדירה וויירפריים כמדריך חזותי פשוט שמראה את המבנה והפריסה של עמוד אינטרנט או של אפליקציה. מעצבים משתמשים בו כדי לתכנן את האלמנטים ואת הזרימה לפני שמוסיפים פרטים ויזואליים.
וויירפריים טיפוסי כולל:
- פריסה ומיקום של כותרות, תמונות, גושי טקסט וכפתורים
- ניווט: תפריטים ולשוניות
- היררכיה של התוכן: מה הכי חשוב ומה משני
- רכיבים אינטראקטיביים כמו שדות, טפסים וכפתורים, בלי עיצוב
- הערות שמסבירות התנהגות או את הסיבה להחלטה
ההערות הן החלק שאנשים שוכחים. וויירפריים בלי הערות מראה איפה הכפתור, אבל לא מה קורה כשלוחצים עליו או מה מופיע כשאין תוצאות. בפרויקט שיש בו אפיון, ההערות האלה הן לא פעם חלק מהאפיון עצמו.
וויירפריים, מוקאפ ואב טיפוס
| מה הוא מראה | מה אין בו | למה הוא טוב | |
|---|---|---|---|
| וויירפריים | מבנה ותפקוד | צבע, תמונות, מיתוג | להחליט מה יש במסך ובאיזה סדר |
| מוקאפ (Mockup) | העיצוב הוויזואלי: צבעים, גופנים, תמונות | אינטראקציה, הוא סטטי | לראות איך המסך ייראה בפועל |
| אב טיפוס (Prototype) | סימולציה של אינטראקציה | לרוב, קוד אמיתי | לבדוק שמישות עם אנשים |
NN/g מגדירים אב טיפוס כהשערה שאפשר לבדוק: פתרון מועמד לבעיה. הדרך הישירה ביותר לבדוק אותו היא לצפות באנשים משתמשים בו. בפיגמה עושים את זה בעזרת Prototype, שמחבר מסכים לזרימה לחיצה.
רמת נאמנות: נמוכה או גבוהה
נאמנות (fidelity) היא עד כמה השרטוט דומה למוצר הסופי. NN/g מודדים אותה בשלושה צירים: אינטראקטיביות (קישורים שעובדים ותגובות אוטומטיות), ויזואליות (פריסה, היררכיה, גודל מסך) ותוכן וניווט (תוכן אמיתי מול תוכן ממלא מקום).
| נאמנות נמוכה | נאמנות גבוהה | |
|---|---|---|
| איך זה נראה | סקיצה אפורה, טקסט ממלא מקום, לפעמים על נייר | גדלים מדויקים, תוכן אמיתי, לפעמים לחיץ |
| זמן הכנה | מהיר, משאיר יותר זמן לעיצוב | ארוך יותר |
| שינויים | אפשר לשרטט מחדש אפילו באמצע בדיקה | לוקח יותר זמן |
| תגובת המשתתפים | פחות לחץ, ביקורת כנה יותר | התנהגות קרובה יותר לשימוש אמיתי |
| מה אפשר לבדוק | מבנה, סדר, הבנה כללית | זרימות, רכיבים, קריאוּת, האם ברור מה לחיץ |
NN/g מוסיפים יתרון של הנמוכה שקשה לראות מבחוץ: מעצבים ומנהלים פחות קשורים רגשית לשרטוט גס, ולכן קל להם יותר לזרוק אותו ולנסות כיוון אחר. בבחירה ביניהן שוקלים את מטרת הבדיקה, כמה העיצוב גמור, אילו כלים יש ואילו משאבים.
איך משרטטים וויירפריים
ה-Interaction Design Foundation מציעה שישה שלבים. הנה הם, עם מה שהם אומרים בפועל:
- מבינים את המשתמשים והמטרות מה האדם צריך ממסך הזה ומה העסק צריך ממנו. כאן נכנסות הפרסונות.
- מגדירים דרישות יחד עם בעלי העניין: אילו פיצ׳רים חייבים להיות, ובאיזה סדר עדיפות.
- ממפים את הזרימה הדרך מהכניסה ועד הסיום, למשל מדף הבית ועד אישור ההזמנה. ראו תרשימי זרימה.
- משרטטים פריסה גריד, גושי תוכן כלליים, ובדרך כלל קודם למובייל. ממקמים ניווט, תוכן ורכיבים, ובוחרים רמת נאמנות.
- מוסיפים הערות מה כל רכיב עושה ולמה הוא שם, כך שכל אחד בצוות יוכל לקרוא את השרטוט.
- בודקים ומשפרים משוב מבעלי עניין וממשתמשים, ובדיקה מוקדמת לפני שעוברים למוקאפ או לאב טיפוס.
טעויות נפוצות
- לעצב מוקדם מדי: ברגע שיש צבעים ותמונות, הדיון עובר למראה. ה-Interaction Design Foundation מגדירה וויירפריים כמבנה ותפקוד, בלי צבע ומיתוג, בדיוק כדי למנוע את זה
- רק המסך המושלם: לשרטט רק את המצב שבו הכול עובד. חסרים מצב ריק, טעינה, שגיאה ותוצאה אחת מול אלף
- טקסט ממלא מקום בכל מקום: כותרת אמיתית יכולה להיות כפולה באורכה ולשבור את הפריסה. כדאי לכתוב טקסט אמיתי לפחות בכותרות ובכפתורים. ראו UX writing
- בלי הערות: המפתח רואה את הכפתור אבל לא יודע מה הוא עושה
- להתאהב בשרטוט: NN/g מזכירים שהיתרון של שרטוט גס הוא שקל לזרוק אותו. אם כבר השקעתם בו שעות, חזרתם לבעיה שהוא אמור לפתור
באיזה כלי
עט ונייר עדיין עובדים מצוין לשלב הראשון, וזו דרך מהירה לנסות כמה כיוונים בעשר דקות. בשלב הבא רוב הצוותים עוברים לפיגמה: Frames למסכים, Auto layout לפריסה שמתאימה את עצמה לתוכן, ו-FigJam לסקיצות משותפות. רשימה רחבה יותר של כלים נמצאת בעמוד כלים.
- UX ו-UI · שלב 9
בדיקת שמישות: לצפות באנשים משתמשים
איך מתכננים ומריצים בדיקת שמישות, וכמה משתתפים צריך.
שאלות נפוצות
מה ההבדל בין וויירפריים לאב טיפוס?
וויירפריים מראה מבנה ומיקום של רכיבים. אב טיפוס מדמה אינטראקציה, כך שאפשר לתת לאדם לבצע משימה ולצפות בו.
האם חייבים וויירפריים לפני עיצוב?
לא חובה, אבל הוא חוסך זמן. קל הרבה יותר לשנות מבנה בשרטוט אפור מאשר במסך מעוצב, ואנשים מבקרים שרטוט גס בחופשיות רבה יותר.
מה מכניסים להערות של וויירפריים?
מה קורה כשלוחצים על כל רכיב, מה מופיע כשאין תוכן או תוצאות, מה ההודעה כשיש שגיאה, ולמה התקבלה החלטה מסוימת.
אפשר לבדוק וויירפריים עם משתמשים?
כן. NN/g מתארים בדיקה עם אב טיפוס מנייר, שבו אדם משחק את תפקיד המחשב ומחליף דפים לפי מה שהמשתתף עושה.
מקורות
- Wireframing · Interaction Design Foundation
- UX Prototypes: Low Fidelity vs. High Fidelity · Nielsen Norman Group
נבדק מול המקורות לאחרונה ב־10 בנובמבר 2026. מצאתם טעות? כתבו לנו.