מסמך הנחיות לבונת האתרים · LOOK + BEHAVIOR

UX INTELLIGENCE

מערכת הנחיות חוויית משתמש - משולשת מקורות, מאורגנת לפי אזורי האתר

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

שמישות · טל שילון + מחקר אמפירי · טל שילון + פסיכולוגיה · טל שילון = חזית הידע בחוויית משתמש
THE 3 LAYERS

שלוש שכבות ידע, נקודת מבט אחת שלמה

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

NORMATIVE
הרובד הנורמטיבי
טל שילון · 10 שנות ניסיון באיקומרס

כללי האצבע המוכרים והעקביים בעולם ה-UX - הבסיס שמבטיח ממשק צפוי, ברור ואמין.

מה זה נותן ⌄
✓מניעת שגיאות
✓התמצאות קלה
✓הפחתת עומס
✓יצירת אמון
✓ממשק צפוי וברור
TACTICAL · EMPIRICAL
הרובד הטקטי-אמפירי
טל שילון · מדידה בשטח על 60+ חנויות

מפרטים טקטיים מדויקים שנבחנו במחקרי שטח על אלפי משתמשים - לא דעות, נתונים.

מה זה נותן ⌄
✓טפסים בטור יחיד
✓הימנעות מכרטיסיות אופקיות במקומות בעייתיים
✓מבנה נכון של קטגוריות
✓אופטימיזציה של ניווט ורכישה
✓התאמה להתנהגות אמיתית של משתמשים
COGNITIVE · EMOTIONAL
הרובד הקוגניטיבי-רגשי
טל שילון · הפסיכולוגיה של הקונה

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

מה זה נותן ⌄
✓מגבלות זיכרון העבודה
✓התנהגות "כשהמוח בלחץ"
✓קשב, משיכה ותחושת זרימה
✓תזמון ותנועה - "ריקוד האנימציה"
✓מנגנוני חיבור והתאהבות במוצר
HOW THE DOCUMENT WORKS

כל אזור באתר מקבל שני רבדים

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

LOOK
איך זה נראה

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

BEHAVIOR
איך זה מתנהג

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

01
PART 1 · FOUNDATIONS

מבוא ועקרונות יסוד

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

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

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

ממשק רגוע ממשק עמוס
← בטווח הקיבולת (עד ~7 פריטים)עומס יתר →
{{ loadMsg }}
המטרה: ממשק שהמשתמש לא צריך ללמוד - הוא פשוט מבין אותו.
02
PART 2 · HOMEPAGE & IA

דף הבית וארכיטקטורת המידע

ויזואלי לפני טקסטואלי

"דוגמאות מייצגות" - תמונות, אייקונים, מוצרים מובילים וקיצורי דרך - במקום רשימות טקסט ארוכות ויבשות.

חיפוש בהבלטה דרמטית

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

קטגוריות בלי כפילויות

מבנה ברור והיררכי, ללא קטגוריות חופפות. המלצה: עד ~10 תתי-קטגוריות ברמה אחת.

הדגמה · אותו דף בית, שתי גישות
האתר שלנו - כל הקטגוריות:
» שירותים» השירותים שלנו» מוצרים» כל המוצרים» פתרונות» מה אנחנו מציעים» אודות» מי אנחנו» בלוג» מאמרים» עדכונים» צור קשר חיפוש (למטה, באותיות קטנות)
✗ 12 שורות טקסט זהות ✗ כפילויות: "שירותים" וגם "השירותים שלנו" ✗ החיפוש קבור בתחתית
מה תרצו למצוא?
שירותים
מוצרים
מדריכים
בלוג
אודות
יצירת קשר
✓ חיפוש ראשון ובולט ✓ 6 קטגוריות ויזואליות, בלי כפילויות ✓ עד 10 תתי-קטגוריות בכל רמה
03
PART 3 · NAVIGATION

ניווט גלובלי והתמצאות

בכל רגע המשתמש צריך לדעת: איפה אני? איפה הייתי? ולאן אני יכול להגיע מכאן?
הדגמה חיה · לחצו על קטגוריה בתפריט

שימו לב איך ההבלטה (Scope Highlighting) ופירורי הלחם מתעדכנים יחד.

דף הבית‹ {{ crumbCat }}‹ {{ crumbSub }}
אתם נמצאים כעת בקטגוריה:
{{ crumbCat }}
הבלטת מיקום נוכחי

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

פירורי לחם (Breadcrumbs)

מציגים את ההיררכיה המלאה: דף הבית ‹ קטגוריה ‹ תת-קטגוריה ‹ מוצר.

כותרות לחיצות

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

04
PART 4 · CONTENT PAGES

דפי תוכן: חוקי הברזל לגלילה ואנימציה

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

✗כרטיסיות אופקיות
{{ tabTitle }}

רק התוכן של הכרטיסייה הפעילה גלוי כרגע.

✗ 3 מתוך 4 חלקי תוכן מוסתרים · המשתמש נדרש לזכור מה היה בכרטיסיות האחרות - עומס ישיר על זיכרון העבודה
✓אקורדיון אנכי
מפרט טכני⌄
כל הנתונים הטכניים גלויים בזרימה הטבעית של העמוד - בלי לקפוץ בין מצבים.
מידות ומשקל⌄
אפשר לפתוח כמה חלקים במקביל ולהשוות ביניהם תוך כדי גלילה.
שאלות נפוצות⌄
שימו לב לתנועת הפתיחה: חלקה, טבעית, בלי קפיצות - "ריקוד האנימציה" בפעולה.
חוות דעת⌄
התוכן נשאר חלק מהעמוד, נגיש לגלילה ולסריקה מהירה.
✓ הכול נגיש בגלילה אנכית אחת · אפס עומס על הזיכרון
ריקוד האנימציה - אנימציה היא התנהגות, לא קישוט
תנועה טבעית מעברים חלקים תזמון עקבי המשכיות בין מצבים תחושת פיזיקה ✗ קפיצות פתאומיות ✗ אנימציות שמפריעות למשימה
שהממשק ירגיש חי - אבל לעולם לא ירגיש שהוא נלחם במשתמש.
05
PART 5 · FORMS

הנדסת טפסים וקלט

אחד האזורים הקריטיים ביותר להמרה. החליפו בין המצבים וראו את אותו טופס - לפני ואחרי ההנדסה:

הדגמה · טופס יצירת קשר
- -
✗ שני טורים ✗ טלפון מפוצל ל-3 שדות ✗ תוויות רק כפלייסהולדר - נעלמות בהקלדה ✗ כל השדות באותו רוחב ✗ כפתור שליחה חסום
✓ טור יחיד ✓ תווית מעל כל שדה ✓ רוחב שדה = סוג הקלט ✓ שדה טלפון אחד ✓ כפתור שליחה תמיד פעיל ובולט
06
PART 6 · FEEDBACK

משוב, שגיאות והמתנות

המשתמש צריך להבין מיד מה קרה. כל פעולה משמעותית מקבלת תגובה מהממשק:

לחצתי← המערכת קיבלה← המערכת מבצעת← התוצאה התקבלה
✗שגיאה גנרית ורחוקה
⚠ Error: Invalid input
✗ באנגלית טכנית · רחוקה מהשדה · לא מסבירה מה לתקן
✓שגיאה אנושית, צמודה לשדה
נא להזין מספר טלפון תקין, למשל 050-1234567
✓ בעברית פשוטה · צמודה לקלט · אומרת בדיוק מה לתקן
✗המתנה עיוורת
Loading...
✗ כמה זמן נשאר? האם זה תקוע? המשתמש מנחש - ונוטש
✓מד התקדמות מפורט
{{ pIco0 }}איסוף נתונים
{{ pIco1 }}עיבוד המידע
{{ pIco2 }}ניתוח התוצאה
{{ pIco3 }}יצירת הדוח
{{ pLabel }}
✓ מעל ~10 שניות המתנה - מציגים שלבים אמיתיים · תחושת התקדמות ושליטה
THE DECISION CHAIN

כל הנחיה במסמך עוברת את השרשרת הזו

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

WHYלמה עושים את זה
↓
PRINCIPLEאיזה עיקרון UX עומד מאחורי ההחלטה
↓
LOOKאיך זה צריך להיראות
↓
BEHAVIORאיך זה צריך להתנהג
↓
PSYCHOLOGYאיך המשתמש צפוי להגיב
↓
CONVERSIONאיך זה משפיע על ההמרה
התוצאה הסופית
"אוסף טיפים ל-UX" ← שכבת UX Intelligence שלמה

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

מבוסס על שלוש שכבות ידע · טל שילון · מומחה איקומרס