עיצוב ממשק בעברית: 15 כללים שאתרים מתורגמים שוברים

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

למה אתרים בעברית נראים ״כמעט נכון״?

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

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

כיוון ופריסה: היסודות שמונעים חצי מהתקלות

כלל 1: מגדירים כיוון למסמך, לא מיישרים טקסט לימין

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

• שבור: מסמך בכיוון שמאל לימין, עם יישור לימין לכל פסקה בנפרד.
• תקין: הגדרת שפה עברית וכיוון ימין לשמאל על תגית ה־html עצמה (lang="he" ו־dir="rtl"). כך הדפדפן, מנוע החיפוש וקורא המסך יודעים מההתחלה באיזו שפה ובאיזה כיוון מדובר.

כלל 2: עובדים עם ״התחלה״ ו״סוף״, לא עם ״ימין״ ו״שמאל״

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

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

כלל 3: הזרימה הוויזואלית מתחילה מימין

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

• שבור: קרוסלה שבה החלקה שמאלה מחזירה אחורה, ונקודות ההתקדמות מתמלאות משמאל.
• תקין: ״הבא״ משמאל, ״הקודם״ מימין, והחלקה באצבע לכיוון ההתחלה מחזירה אחורה.

אייקונים וחצים: מה הופכים ומה אסור להפוך

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

כלל 4: חץ ״הבא״ בעברית מצביע שמאלה

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

• שבור: ״לפרטים נוספים →״
• תקין: ״לפרטים נוספים ←״

כלל 5: לא הופכים שעון, נגן, וי, רענון ולוגו

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

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

מספרים, טלפונים ומחירים בתוך טקסט עברי

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

כלל 6: מבודדים טלפונים בינלאומיים, מיילים וקודים

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

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

כלל 7: מחיר הוא יחידה אחת שלא נשברת

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

כלל 8: לא מתקנים סוגריים ידנית

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

כלל 9: תאריכים, שעות ושבוע ישראלי

גולש ישראלי קורא ״03/04״ כשלושה באפריל, לא כארבעה במרץ. בוחרי תאריכים שמגיעים מספריות לועזיות מתחילים את השבוע ביום שני או ביום ראשון לפי הגדרה, ומציגים לעיתים שעה בפורמט של 12 שעות. בממשק לקביעת תורים זו לא שאלה של אסתטיקה: זו הדרך הבטוחה ביותר לקבל לקוח שמגיע ביום הלא נכון.

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

גופנים וטיפוגרפיה עברית

כלל 10: בוחרים גופן עברי קודם, ולועזי שמתאים לו

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

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

כלל 11: אין נטוי ואין אותיות גדולות בעברית

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

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

כלל 12: אנימציות טקסט מפצלים לפי מילים

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

טפסים, מקלדות ולשון פנייה

כלל 13: שדות של מייל, טלפון ואתר נכתבים משמאל לימין

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

• שדה מייל: כיוון שמאל לימין, סוג שדה מייל, השלמה אוטומטית מוגדרת.
• שדה טלפון: מקלדת טלפון, בלי לכפות פורמט עם מקפים.
• שדות שם וכתובת: כיוון ימין לשמאל, עם השלמה אוטומטית.
• הודעות שגיאה בעברית, ליד השדה, שמסבירות מה לתקן ולא רק ״שדה לא תקין״.

כלל 14: פונים בלשון רבים, ובוחרים פועל ולא שם תואר

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

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

כלל 15: מעבר שפה בשם השפה עצמה, בלי דגלים

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

מה לגבי נגישות?

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

איך בודקים אתר בעברית בעשר דקות?

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

1. פתחו את העמוד במובייל. האם הלוגו והכותרת מתחילים מימין, והאם תפריט ההמבורגר נפתח בצורה טבעית?
2. חפשו כל חץ בעמוד. האם ״הבא״ ו״המשך״ מצביעים שמאלה?
3. חפשו כפתור ניגון, שעון, וי ולוגואים של רשתות. האם הם במצב המקורי ולא כתמונת מראה?
4. חפשו מספר טלפון, מחיר ומייל בתוך פסקה. האם הסדר נכון והמחיר לא נשבר בין שורות?
5. הקלידו כתובת מייל בטופס. האם הסימן @ והנקודות נשארים במקום?
6. פתחו את בוחר התאריכים, אם יש. האם השבוע מתחיל ביום ראשון והתאריך בפורמט ישראלי?
7. חפשו נטוי בעברית ומרווח רחב בין אותיות. אם יש, החליפו בהדגשה אחרת.
8. קראו את הכפתורים והודעות השגיאה בקול. האם הפנייה ברבים ועקבית בכל האתר?
9. עברו לגרסה האנגלית, אם יש. האם הגעתם לאותו עמוד, והאם הכיוון התהפך בלי שבירות?

איך מונעים את כל זה מראש?

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

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