עיצוב ואפיון: רעות מלובני  |   2019 

טוב, נגמר העמוד הזה.

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

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

מונחים נפוצים מעולם ה-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 

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

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

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

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

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

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

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

Axure - אקשור

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

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

 

B

Back End

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

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

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

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

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

Breadcrumbs - פירורי לחם

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

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

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

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

 

E

Empty State - מצב אפס

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

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

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

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

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

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

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

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

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

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

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

 

F

 Flow, User Flow

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

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

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

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

Fold

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

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

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

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

Front End - קצה

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

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

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

 

H

Hover

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

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

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

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

 

I

Invision

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

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

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

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

 

L

Landing Page - דף נחיתה

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

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

 

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

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

 

M

Mockup

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

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

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

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

Wireframes לעומת Mockup

 

O

OTP - One Time Password

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

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

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

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

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

 

P

Persona

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

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

 

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

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

Pop Up

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

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

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

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

Prototype - אב-טיפוס

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

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

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

 

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

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

 

S

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

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

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

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

Sketch

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

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

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

Splash

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

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

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

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

 

T

Tool Tip

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

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

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

Trello

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

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

 

U

UI - User Interface

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

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

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

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

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

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

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

 

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

 

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

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

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

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

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

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

-

 

V

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

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

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

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

 

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

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

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

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

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

 

W

Wireframe - שרטוט מסך

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

 

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

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

 

Z

Zeplin

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

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

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

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

 

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

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