Skip to content

בעיות UI ב-wordpress.com ודרכי התמודדות – חלק 1

30/06/2009

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

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

אגב, אני מדגיש שמדובר ב-wordpress.com (השירות ליצירת אינסטנט בלוג בדומה ל-blogger) ולא wordpress.org (המוצר שמהווה פלטפורמה ליצירת בלוג עצמאי).
אז בלי הקדמות נוספות, להלן רשימת הנושאים:

תמיכה בעברית

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

הבעיה:
אם התבנית אינה מתאימה לעברית, הטקסט יהיה מיושר לשמאל והתוצאה מסורבלת וקשה לקריאה.

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

בלוג בעברית בתבנית שאינה תומכת right-to-left

בלוג בעברית בתבנית שאינה תומכת right-to-left

אנגלית, עברית ומספרים

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

תצוגה משובשת בגלל השילוב בין אנגלית, עברית ומספרים

תצוגה משובשת בגלל השילוב בין אנגלית, עברית ומספרים

הבעיה: השילוב בין 2 השפות השונות לבין מספרים עשוי ליצור שיבוש באופן תצוגת הטקסט, דבר המקשה על הקריאה וגם נראה מאד לא מקצועי.
הדבר משתנה מתבנית עיצוב (theme) אחת לשנייה ולכן רצוי ליצור מספר פוסטים פיקטיביים כדי לבחון את תצוגת הטקסט, לפני בחירת תבנית סופית. חשוב לציין כי השיבוש נראה רק ב-7 Internet Explorer וב-Firefox. ב-Chrome הטקסט היה תקין.

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

אנגלית בשילוב עם עברית תקין

תצוגה תקינה לאחר שימוש בעברית בלבד

הדבר היחיד שלא הצלחתי לתקן (כי לא ניתן לערוך שורה זו) הוא שורת הקרדיטים
וה-RSS למטה:

תצוגה משובשת של ה-RSS

בולטים מעוצבים (bullets)

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

הבעיה:
הבולטים אינם נראים ב-7 Internet Explorer אך תקינים ב-Firefox ו-Chrome. נכון שזה עובד גם בלי הבולטים ויכול להיות שלא מדובר בבעיית UI לכשעצמה, אבל לדעתי השימוש בבולטים מאד עוזר לסדר ויזואלית את הרשימה:

רשימה

רשימה עם בולטים לעומת רשימה ללא בולטים

הבולטים עוזרים למשתמש להבין מהר יותר שמדובר ברשימה של פריטים.

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

שינויים בתבנית העיצוב

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

התבנית שבחרתי טומנת בחובה 2 בעיות:

  • פונט קטן מדי – גודל הפונט, המוגדר כברירת מחדל עבור הטקסט, קטן מדי ומקשה על הקריאה. רוב המשתמשים אינם יודעים להגדיל את גודל הטקסט באמצעות הדפדפן. לכן ההנחיה של נילסן היא שגודל הפונט הבסיסי יהיה גדול מספיק (גודל 10 לפחות).
    הפתרון: מכיוון שבתבנית העיצוב שבחרתי אין אפשרות לשנות את גודל הפונט, נאלצתי לעשות זאת ידנית (!) בכל פוסט, ע"י הוספת span style="font-size:14px;" בכל שורה. דרך די סיזיפית להשיג מטרה פשוטה.
  • קישורים לא בולטים – יוצר התבנית בחר צבעים מאד קרובים לטקסט ולקישורים, וכתוצאה מכך הקישורים בתוך הטקסט אינם בולטים לעין. זה בעייתי משום שהמשתמש אינו יודע במבט מהיר על מה ניתן ללחוץ. החיווי עבור אלמנטים "לחיצים" חייב להיות מאד ברור.
    הפתרון: כאמור, דרך אחת להבליט את הקישור היא באמצעות צבע. דרך נוספת היא צורה, בין אם באמצעות כפתור או קו תחתון מתחת לטקסט (בנוסף לצבע, לא במקום). מכיוון שהתבנית לא מאפשרת שינוי צבעים, אני צריך להוסיף ידנית (שוב) קו תחתון מתחת לכל קישור.
    שוב, קצת סיזיפי אבל עושה את העבודה.
פונטים

גודל פונט ברירת מחדל (ימין) לעומת שינוי ידני של גודל הפונט

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

זהו להפעם, המשך בשבוע הבא.

מודעות פרסומת
4 תגובות
  1. ופה כמובן נשאלת השאלה למה בכלל בחרת בוורדפרס.קום כאשר יש לפחות שני שירותי אירוח על בסיס וורדפרס בעברית* שבהם גם אם היו בעיות לפחות היתה יכולת לתת להן עדיפות גבוהה יותר (מאחר שהיו משותפות יחסית ליותר משתמשים) ?

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

    *(כן, אני מפעיל אחד מהם)

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

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

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

    המנצח האולטימטיבי בשירותי האחסון מבוססי וורדפרס בארץ הוא בלוגלי blogli.co.il והאתר שלי mywebspace.co.il נמצא ממש מאחור 😦 – ככה זה כשלא משקיעים בקידום האתר…

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

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

להשאיר תגובה

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

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s

%d בלוגרים אהבו את זה: