בית  >  כתבות  > חווית משתמש ועיצוב החדשות ב BBC World Service

חווית משתמש ועיצוב החדשות ב BBC World Service

תמי גור, 1/8/2011. אין תגובות.

פורסם במקור ב- JOHNNY HOLLAND MAGAZINE. תורגם מאנגלית על-ידי יניב שריג

יצירת עיצוב עבור זרם התכנים אשר עובר יום יום באתר חדשות הוא אתגר גדול.  ב- BBC World Service ישנו צוות עיצוב חוויית משתמש המפתח אתרי חדשות לאתרי אינטרנט ולטלפונים ניידים ב 27 שפות שונות. בכתבה זו, אשתף אתכם בחוויות הכרוכות בתהליך זה

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

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

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

דוגמה לעיצוב מותאם תוכן בעיתוני חדשות יומיים. עמוד ראשון של ידיעות אחרונות ב 26, 27 ו-28 ליוני 2011.

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

אתרי חדשות כמגש בנטו

מגש בנטו יפנית מסורתי

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

להבין את התוכן – היררכיה, נפח, סגנון

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

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

להבין את התנהגות המשתמשים ואת הטעם שלהם

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

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

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

עיצוב עבור תוכן והתנהגויות שונות

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

הגריד

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

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

הגריד האוניברסאלי של BBC בשתיים מתוך שלוש התצורות השונות.

קיבוץ של מידע וכותרות

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

היררכיית תוכן וקיבוץ תוכן מאתר BBC Mundo בספרדית הפונה לקהל יעד באמריקה הלטינית.

 

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

דוגמה לתוויות באזור הנושאי באתר Mundo BBC בספרדית ובאתר הסיני BBC Chinese.

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

מבנה האתר – ארכיטקטורת מידע עשירה

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

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

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

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

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

טיפוגרפיה

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

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

קביעה של היררכיה טיפוגרפית עבור השפה הבורמזית.

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

עדכניות

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

יצירת מסלולי ניווט המשכיים

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

עמוד כתבה כמיני-עמוד בית. העמודה הימנית מציפה תוכן מעמוד הבית ומרחבי האתר.

כל זה למען מטרה אחת…

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

תמי תרצה בכנס UXI Live 2011

תמי גור היא ראש צוות העיצוב וחווית המשתמש ב BBC World Service ותהיה אורחת מרכזית בכנס UXI Live 2011 שם תרצה על עבודת העיצוב באתרי ה BBC.

דוגמה לעיצוב מותאם תוכן בעיתוני חדשות יומיים. עמוד ראשון של ידיעות אחרונות ב 26, 27 ו-28 ליוני 2011.

כתבות בנושאים דומים



תגובות

אין תגובות עדיין.

כתיבת תגובה

לא יוצג בשום מקום

לא חובה

רוצים שהתמונה שלכם תופיע עם התגובה? העלו אותה ל-Gravatar.

שלח