top of page

מונחון יואיקסית מדוברת

מונחים נפוצים מעולם ה-UX מוסברים בהקשר של כתיבת מיקרו-קופי

A     B     C     D     E     F     G     H     I     J     K     L     M     N     O     P     Q     R     S     T     U     V     W     X     Y     Z

A

a/b testing לכפתור הרשמה

ab-testing.png

a/b Testing 

ניסוי שנועד לבדוק ולשפר את האפקטיביות של אלמנט מסוים במסך (כל ניסוי בודק את ההשפעה של משתנה אחד בלבד בכל פעם). כל גרסה בטסט נחשבת משתנה (a, b, c וכו') והמשתמשים מקבלים באופן אקראי גרסה שונה כדי לבדוק איזו היתה הכי מוצלחת. איי בי טסטינג במיקרו-קופי יכול לבדוק את ההשפעה של ניסוח שונה לאותו האלמנט (למשל: 'כניסה' או 'התחברות') או אפילו החלפה של מילה ספציפית באותו המשפט (למשל: 'היי רעות או 'שלום רעות'). טסטים נפוצים אחרים יבדקו את ההשפעה של צבע, גודל, צורה, פונט ועוד.

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

החיפוש באמזון עובד בשיטת Autocomplete

autocomplete.png

Autocomplete - השלמה אוטומטית

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

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

שרטוט בסיסי (מאוד) באקשור

axure.png

Axure - אקשור

תוכנה שמאפייני חוויית משתמש ואנשי UX משתמשים בה כדי לשרטט מסכים (Wireframes) וליצור מוקאפים (Mockups).  

A

B

שורות הקוד יושבות ב-Backend

Back End

backend.png

'מאחורי הקלעים' של הממשק: השרת, התוכנה והנתונים שמרכיבים אותו - בעצם כל מה שהמשתמשים לא רואים כשהם משתמשים בממשק. 

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

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

למשל: שמות ערים ורחובות, שמות מוצרים ועוד. 

פירורי לחם באתר איקאה

Breadcrumbs - פירורי לחם

breadcrumbs.png

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

Breadcrumbs נמצאים בדרך כלל באתרים שמכילים קטגוריות ותתי קטגוריות, כמו באתרים של חנויות או אתרי תוכן. 

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

B

E

אמפטי סטייט מתוך אתר Harvest

Empty State - מצב אפס

emptystate.png

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

1) המשתמש חדש בממשק ועוד לא צבר מידע או תוכן שאפשר להציג לו. במקרה כזה המיקרו-קופי יכול להסביר מה אפשר לעשות בממשק.

2) המשתמשת סיימה בהצלחה פעולה כלשהי ו’ניקתה’ את המידע שהוצג לה לפני כן במסך. למשל, בג'מייל, כשמוחקים את כל ההודעות בתיבת הספאם.  

3) המשתמשים חיפשו משהו וקיבלו אפס תוצאות רלוונטיות.

עמוד ה-404 של אתר IMDB

Error 404 - עמוד 404, מסך 404 

404-imdb.png

מספר השגיאה שדפדפן מציג כאשר כתובת האתר לא נמצאה.

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

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

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

E

F

תרשים בסיסי של פלואו

5432269858_09a8e9504f_b.jpg

 Flow, User Flow

מיפוי השלבים והמסכים שהמשתמשים עוברים כשהם משתמשים בממשק, ואת הדרך שהם עושים כשהם הולכים מנקודה א’ לנקודה ב’.

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

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

סימון הפולד באתר הארץ

fold.png

Fold

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

החלק העליון של המסך (above the fold) הוא כל מה שרואים לפני שמתחילים לגלול מטה ושם אמורים להופיע האלמנטים החשובים ביותר,כשנגלול למטה להמשך המסך נהיה below the fold. 

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

אתר Hipmunk לחיפוש דירות 

frontend.png

Front End - קצה

החלק 'הקדמי' של הממשק - כל מה המשתמשים יכולים לראות ולהפעיל בזמן שימוש בממשק.

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

F

H

טולטיפ שמופיע במצב hover על כפתור באתר חשבונית ירוקה

hover.png

Hover

מצב שבו אלמנט מגיב לסמן העכבר שעומד עליו.

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

מבחינת מיקרו-קופי - הודעות כמו טולטיפ, למשל, שיכולות להופיע רק במצב hover, בד"כ נותנות אקסטרה מידע על אותו האלמנט בו הן מופיעות.  

H

I

מסך לדוגמה מתוך אתר Invision

invision.png

Invision

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

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

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

I

L

דף נחיתה להרשמה למכללת בצלאל

landingpage.png

Landing Page - דף נחיתה

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

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

 

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

L

M

Wireframes לעומת Mockup

wireframe-vs-mockup.png

Mockup

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

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

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

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

M

O

הודעות OTP שונות

OTP - One Time Password

otpp.png

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

עם סיסמת OTP המשתמשים לא צריכים לזכור שם משתמש וסיסמה קבועים, ובמקום זאת הם מתבקשים להקליד את מספר הנייד שלהם כדי לקבל SMS עם קוד זיהוי. אימות הנתונים נוצר כאשר המשתמשים יכניסו את הקוד שקיבלו והמערכת תזהה אותו (או שלא, במקרה של טעות).

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

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

O

P

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

persona.png

Persona

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

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

 

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

פופאפ מאתר מיקרוקופים

popup.png

Pop Up

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

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

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

כשנלחץ על הכפתור בפרוטוטייפ משמאל נגיע בחזרה לתפריט. בכאילו

wireframe-vs-mockup.png

Prototype - אב-טיפוס

Prototype הוא אב-טיפוס מתפקד והוא השלב האחרון בתהליך אפיון הממשק.

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

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

 

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

P

S

עץ מסכים שיצרתי לצורך הדוגמה

sitemap.png

Site Map - מפת אתר, עץ מסכים

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

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

את המסכים שעיצבתי לדוגמה יצרתי בסקצ'

sketch.png

Sketch

תוכנה שמשמשת אנשי UX לשרטוט ועיצוב מסכים. 

סקצ' עובדת על מחשבי מק בלבד (❤). 

 מסכי הספלאש של waze ו-Etsy

splash-screen.png

Splash

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

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

הם בד"כ מכילים רק לוגו או תמונה ולפעמים גם את מספר הגרסה של הממשק.

S

T

טולטיפ במובייל באפליקציית אליאקספרס (למעלה) ובדסקטופ, באתר יוטיוב (למטה)

tooltip.png

Tool Tip

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

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

מסך לדוגמה מתוך אתר Trello

trello.png

Trello

אל תסתכלו! ההסבר הזה בתיקון! עמכם הסליחה

T

U

דוגמאות שונות למיקרו-קופי שתומך ב-UI

ui.png

UI - User Interface

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

אנשים העוסקים במקצוע נקראים מעצבי UI, מעצבים גרפיים או מעצבי חוויית משתמש.

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

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

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

heatmap.png

Usability Test - מבחן שמישות, מבדק שמישות

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

 

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

 

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

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

-

ux.png

UX - User Experience - עיצוב חוויית המשתמש

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

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

U

V

וולידציות חיוביות ושליליות שהמצאתי

validations.jpg

Validations - הודעות תיקוף

הודעת וולידציה נותנות תיקוף לכך שהמידע שהוכנס לשדה הוא תקין או לא תקין. 

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

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

 

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

VOT.png

Voice & Tone, Tone of Voice - מסמך אפיון שפה

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

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

V

W

מסך שאפיינתי לאתר של ONE DUO

wireframes.png

Wireframe - שרטוט מסך

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

 

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

W

Z

מסך לדוגמה מאתר Zeplin

zeplin-.png

Zeplin

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

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

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

Z

נראה לך שפספסתי משהו?

אפשר לכתוב לי כאן על מונח שחסר לך ואשתדל להוסיף אותו בקרוב:

תודה רבה על העזרה שלך! 

bottom of page