RSS לפוסטים RSS לתגובות 228 מאמרים ו- 1,989 תגובות עד כה מאז 2005

דוגמאות לעיצוב יישומי חדשות לאייפד

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

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

Metro

ניווט בין מדורים ב-Metro

Financial Times

(הדגמה של האפליקציה)

ניווט בין מדורים ב-Financial Times

The Daily Telegraph

כתבה ב-Daily Telegraph

ניווט בין כתבות ב-Daily Telegraph

The Evening Standard

ניווט בין מדורים ב-Evening Standard

BBC

ניווט בין מדורים ב-BBC

CNN

ניווט על ידי פסיפס צילומים וכותרות

ניווט על פי כותרות

ניווט על ידי גלריית צילומים

ניווט

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

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

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

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

שימוש בתפריט ניווט בתוך האפליקציה

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

ניווט בין כתבות

ניווט בתוך מדור מתוך כתבה מתבצע לפעמים על לחיצה והזזת האצבע לאחד הכיוונים. המחווה (Gesture) הזאת מדמה דפדוף בין דפי נייר. זאת דרך נחה לעלעל בין כתבות אך אם תנסו לדפדף מעבר לדף האחרון של כתבה ב-Financial Times תגיעו למבוי סתום. ה-Metro וה-Evening Standard מציעים תפריט ניווט צדדי למעבר בין כתבות בנוסף לדפדוף על ידי הזזת הכתבה. היתרון בגישה הזאת הוא שהניווט המשני מאוד ברור ואי אפשר לפספס אותו. הבעיה עם מחוות מגע ומחוות רב-מגע היא שקשה עד בלתי אפשרי ליידע משתמשים מתי צריך להשתמש בהן. אפשר להוסיף טקסט בממשק עצמו כגון Swipe article to see next one אך אז צריך לקוות שהמשתמש ידע מה המשמעות של Swipe. ביישום של Metro ישנו חץ בפינה השמאלית העליונה של הכתבה בשביל לחזור אחורה, אך לא קיים כפתור מקביל בשביל לדפדף קדימה.

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

שינוי מצבי תצוגה

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

לסיכום

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

תוספת: 21.02.2011

USA Today

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

כתבה בודדת – לחיצה על האייקון בפינה השמאלית העליונה מובילה למדור

The New-York Times

ניווט בין מדורים

כתבה בודדת

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

The Times

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

כתבה בודדת

הוראות שימוש


The Sun

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

כתבה בודדת

10 תגובות על “דוגמאות לעיצוב יישומי חדשות לאייפד”

  1. 14/02/2011 בשעה 13:03 יצחק

    תודה רבה

  2. 14/02/2011 בשעה 15:04 ישי כהן

    אבל מה עושים כששואלים 'אפשר את הספורט?' ;)
    וברצינות:
    מאוד מעמיק כהרגלך. פתחתי בשתי לשוניות שונות כדי לקרוא ולראות את התמונה של העיתון שהתכוונת אליו, אבל זו הבעיה בבלוגים.
    עושה רושם שלישראל היום, במאבק התמידי שלה בYNET ובאחרים, היה חשוב יותר להיות ראשונה שם בחוץ. לגיטימי, וראוי לציון העובדה שהם עשו משהו שמיש מאוד בפשטותו שממנו הם תמיד יוכלו להוסיף עוד נדבכים ועדיין להיות 'הראשונים'.
    לגבי הניווט:
    הדרך שציינת שעושה הFT כאשר לוחצים על כתבה, מאפשרת גם הגעה אל הכתבה וגם התחלה של זיכרון גיאוגרפי של הידיעות. כלומר: בכך שלחתצתי והממשק זז (animated to) אל המקום, אני יכול ליצור מודל מנטלי שלפיו 'הספורט תמיד נמצא מימין'. קשה לי לראות האם זה בוצע כהלכה, אבל יש שם יתרון שמאפשר לנו לפרוס את התוכן לא ברבדים אלא על פני מישור אינסופי

  3. 14/02/2011 בשעה 15:18 אמיר דותן

    אפשר לראות כאן הדגמה של האפליקציה של ה-Financial Times
    http://www.youtube.com/watch?v=qz5GHX0-1QI

  4. 14/02/2011 בשעה 15:21 יאיר יונה

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

  5. 14/02/2011 בשעה 15:56 ישי כהן

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

  6. 15/02/2011 בשעה 0:59 מאור בר

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

  7. 15/02/2011 בשעה 9:55 אמיר דותן

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

  8. 15/02/2011 בשעה 12:09 מאור בר

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

  9. 19/02/2011 בשעה 8:31 ויטלי

    אמיר, סקירה מעולה, תודה!

  10. 06/03/2011 בשעה 17:51 אחת שיודעת

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

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

RSS לתגובות לפוסט זה

הוספת תגובה