© 2008 - 2CENTS.co.il

עיצוב ומוטיבציית הגולשיםYNET – 3/2009

2

מי אנחנו

2CENTS הוקמה , ייעוץ עסקי לאינטרנטחברתהפועלים, י שניים מהוותיקים בתעשיית האינטרנט"ע

1995ומקדמים אותה מאז

– הגורויים הם אלו שמייעציםבחברה אין שכירים ,,שנים-15 עם ידע וניסיון מעשיים של למעלה מ

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

בתחום האינטרנט

בין הלקוחות עימם עבדנו חברותארגונים גדולים , הייטק

וסטארטאפים

3

בעז רוסנו תואר ראשון בעיצוב גרפי).B.Des (מבצלאל

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

בצלאל ושנקר(מרצה באקדמיה 1996, מאז(

בשנקר2007) עד (2002 ייסד וניהל המסלול לעיצוב למדיה אינטראקטיביתאת

קהילת המעצביםעזר לייסד וכיהן כסגן נשיא 2007)עד (הישראלית

נטיקה: ביניהן(ייסד וניהל מספר חברות מיתוג ואינטרנט,Imply Simulators ,Tribal DDB ,ועוד(

2-כיום שותף בCENTS , בנושאי מודל עסקיאסטרטג/ ויועץ ,'וכדו, טכנולוגית אינטרנט, מיתוג, חוויית משתמש

4 1:שער מבוא להמרת מבקרים ללקוחות

5: מודל השיווק הכללי

פעולה> שקילת ההצעה שלנו > מודעות להצעתנו

המשתמשים הופכים להיות לכך שאנו מציעיםמודעים

פתרון לסוג מסוים של בעיה

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

ההצעה שלנו לבעיה הספציפית שלהם

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

שלהם

מודעות

שיקול

פעולה

* July 17, 2008, Brian Massey, Conversion Sciences - brian@conversci.com

6: מודל השיווק האינטרנטי

Traffic < פעולה> תוכן

המשתמשים הופכים להיות לכך שאנו מציעיםמודעים

פתרון לסוג מסוים של בעיה

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

ההצעה שלנו לבעיה הספציפית שלהם

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

שלהם

Traffic

תוכן

הצעות

* July 17, 2008, Brian Massey, Conversion Sciences - brian@conversci.com

7

?איך עוברים מפירמידה למשפך

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

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

הם מגיעים למה שאני רוצה שיגיעו

8

הדרך אל האושר

עם צרכים ורצונות, אנשיםהקליקים באתר הםבמקום לשאול את עצמנו מה אנו רוצים לומר על, לכן

?רוציםהם אנו צריכים לשאול מה , עצמנו רק במההאנשים המגיעים לאתר שלנו מתעניינים

לקנות או באיך לספק את הצורך שלהםשהם רוציםולהפכם(כדי להשיג את היעדים שלנו , לכן

עלינו קודם), למשתמשים רשומים או לקוחות חוזריםלהשיג את היעד שלהםכל לסייע להם

9

)Clustering(זיהוי קבוצות

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

)תוכן(איך שהם צורכים את

* FutureNow, Inc. 2008

10

איך בודקים יחסי המרה של משתמשים

איזו פעולה חשובה לנו: יעדי ההמרההגדר את??איך אנו מגדירים הצלחה? באיזה עמוד היא נמצאת

מאיזה סוג? כמה פרופילים יש לנו: פרופיליםהגדר??היכן מתרחש תהליך ההמרה

הגדר את נקודות ההנעה: הקריאטיביהמסרצור את)PPC ,וכו, באנרים, הפניות מעמוד הבית, דואל.('

האם המסר הקריאטיבי תואם את המוטיבציה?סוג ותהליך ההמרה, שנדרשת מהגולש

11

?איפה לבדוק קודם

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

12 2:שער ?במה עיצוב יכול לעזור

13

היררכית תשומת הלב שלנו

י מספר"תשומת הלב שלנו יכולה להיות מושפעת עההישרדותאשר נשענים על מערכת , מרכיבים):לפי סדר עולה של חשיבות( שלנו הטבעית

)קומפוזיציה(מיקום 1.

גודל2.

צורה3.

צבע4.

תנועה5.

צליל6.

14

התייחסות לממשק והמשתמשים כבר למדויש מספיק מחקרים כיום

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

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

שהמשתמשיםדוגמאות למוסכמותלהלן מספר ):באתרים באנגלית(מכירים ורגילים אליהם

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

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

15

(1/2)פסיכולוגית הצבע

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

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

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

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

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

שמרנות ועושרלא לחינם רוב המוניות( נתפס כמעביר מסר של מהירות צהוב

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

16

(2/2)פסיכולוגית הצבע

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

כמלאכותימאיץ נשימה ודופק( בגוונים מסוימים הוא צבע מלחיץ אדום,(

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

ההמרהקבוצות מסוימות צובעות את( הוא צבע רומנטי ומרגיע ורוד

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

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

')מרזה'צבע הינו מרכיב חשוב גם בבחירה של מוצרי צריכה .

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

17

צבע ונגישות

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

ולא מסוגלים ( רק צבעים מאד רווים)לזהות הבדלי צבעים עדינים

1.5% כ: עיוורון צבעים -מהאוכלוסייה לא רואה כלל צבעים

7-10% עיוורון צבעים חלקי :) בעיקר גברים(מהאוכלוסייה

אינה מזהה את ההבדל בין ירוק לאדוםמומלץ לדאוג להבדלים מהותיים גם בכהות של, לכן

ולא רק בגוון) 30% לפחות(התוכן ביחס לרקע

18 :3שער טיפים לשדרוג יחסי ההמרה5

19 1:טיפ התמונות מספרות את הסיפור

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

1

2

34

20

תקן את הכותרות 2:טיפ

צריכים להבין אותך –וללא מחשבהבמבט אחד כדי להוכיח את) או אחוזים(שברים : לדוגמא

טענותיך ל"צ' ארבעה מתוך חמישה רופאי שיניים'במקום

'מרופאי השיניים ממליצים80% 'וענה עליה מייד בפסקה( בכותרת שאל שאלה

)שלאחר מכן האם אתה'ל "צ' עשה הבדל בחייו של ילדך'במקום

'?עושה הבדל בחייו של ילדך

21

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

את המשתמש

להשקטת פחדי הנרשםעצב את הטפסים

22 4:טיפ 'הצטרפות'הנעה לפעולה – גרום להם להקליק על

23

אל תיתן להם לחכות 5:טיפ

תכנן את העמודים כך שיוכלו להשתמש באותם)Cache-מהשיעלו בפעם השניה (רכיבים

עם, גודל התמונות בעמודים יכול לרדת דרמטיתPhotoshop- באופטימיזציהקצת

24 4:שער YNET-דוגמאות לטעויות עיצוב ב

25

פורמט העיצוב

כש-Ynet 800הוקם עיצוב לרזולוצית מסךX600 המכנה המשותף(היה הסטנדרט 4:3) פורמט (

)הרחבכיום עם הלפטופים החדשים הסטנדרט הוא

1280X800 16:9)פורמט (לפחות ובקרוב – הסלולרים כמוiPhone המאפשרים גלישה

3:4 פורמט (320X480סלולרית סבירה ברזולוצית )אורכי

800X600 1280X800 320X480

26

X800-1280לא מנוצלות בצדדים ב' אוזני חמור'

27

כמות וסוג הפרסום

'כמות אדירה של פרסום- התוכן והמותג' הזנית)וברמת רעש גבוהה, משטח דף הבית- 25% מעבר ל( פרסום שאינו בקונטקסט)Run-of-site (אינו

)CTR- 2% כ למטה מ"בד(כ " בדאפקטיבי אתמאיט ומתסכל) בדרך אל התוכן(פרסום חוצץ

)כדי לסגור אותו X-המחפש את ה(המשתמש פרסום מהבהב)Flash (וביכולת שלפוגע בריכוז

– ומוביל אותו לשימושהצרכן לצרוך את התוכן )ובגרסאות הדפסה, feeds-ב, RSS-ב(באלטרנטיבות

בפרסומות המעורבביםממשקי ניווט )Lenovo(

28

הוא אבוד מראש' הרשמה לאתר'כמות הפרסום מהממת וכל סיכוי לזהות משימות כמו

29

חלוקת התוכן 5למעלה מפי גלילה של (פריסה של תכנים אינסופית

)של שטח המסך הסטנדרטי – לכמות מצומצמתהאמבטיות תוכננו שעטנז ניווטי

תכנים שלא תוכננו, של תכנים שמאז גדלה דרמטיתונוספו לממשק הראשי) אנציקלופדיה(להיכנס נכנסו

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

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

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

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

31

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

32

?איפה ההפניה לערוץ הכלכלה? איך אני מזהה איפה אני

33 מה כדאי לעשות 5: שער כשחושבים על עיצוב ערוץ תוכן חדש

34

(1/2)טיפים לתכנון ערוץ חדש

הוא פשטות ובחירה' האושר'? איזה ערוץ קיים מיותר לכמות המידע שיכול משתמש לצרוךיש גבול- קלה

וכמות המידע בדרך להחלטה באופןמהם הנושאים שיענינו את הגולשים בערוץ

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

חסות/ פ "שת, למשל? לפוצץ את המסך בפרסומות)כבר מהיום הראשון(לערוץ

איך נדגיש את התכנים הנוספים של הערוץ שלנוואיך נוביל את(מאמר ספציפיים בערוץ /לקוראי כתבה

) הערוץלשערהקוראים

35

(2/2)טיפים לתכנון ערוץ חדש

איך נייצרCommitment אישי של הקורא לערוץאיך? מה עוד. הוא התחלה טובה Talkback(? החדש

ואיך נוכל לחלוק לו, בתוכן, במבנה, הוא יכול לתרום לנו?)קרדיט על עזרתו

מה הוא ? אל היומיום שלולקחת איתומה הוא יכול...ועוד, להדפיס, לשמור, לשתף, יוכל להוריד

איך עוקבים אחרי ? את הפעילות בערוץאיך נמדודמי? מהן השאלות שאנו צריכים לשאול? המשתמש

? אחראי על המדידה על את החווייה של המשתמשנמשיך לשפראיך

מה התהליך? מי אחראי על השיפור? בסיס קבועבאמצעותו נשפר ואיך נוודא שמדובר בשיפור ולא

?פגיעה

36 דוגמאות למה אפשר וכדאי YNET-למדוד ב

מה המינון( ביחס לאפקטיביות שלהן כמות הפרסוםומהי אפקטיביות הפרסום בקונטקסט) המומלץ

ממשק ואלטרנטיבות עיצובבחינת -layout לחיזוקהקשר בין התוכן לערוץ שלו

בחינתCost Effectiveness של תכנים עשירים)טקסט ותמונה(מול תכנים דלים ) אודיו ווידאו( במידה והםהערוץהאם המשתמשים לוחצים על

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

?ביחס למקור ההפניה לכתבה? הערוץ עליו נחתוועוד

37 6:שער שינויי גישה מומלצים? מה צריך לקרות

38

שינוי גישה עיצובי וניווטי

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

?)העדכני לאחרונה ומצב המחשוב של(בהתייחס לטכנולוגיה

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

כפי שמיקרוסופט נאלצה לעדכן את(במשהו טוב יותר -100לאחר שעברה במהלך עשור מ Wordממשק

)features-1,000 לבמטרה לייצר , בחינת מטפורות ממשק חדשות

אלא את מכלול , לא רק את התוכן הטוב ביותר הטובה ביותרחוויית המשתמש

39

שינוי גישה תכני במקום מודלשינוי תפיסה מבחינה תכנית –

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

והוא זה שבעצם הורג את, מסתפקים רק בו(90% כעמודילהדגיש ולהציע את ערוצי התוכן), הערוצים

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

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

,הבריטי Guardian Open Platform-ה, – לדוגמא,חינםהמאפשר התממשקות והפצת התוכן שלהם י גורמים"כחלק מאפליקציות תוכן חדשניות שיווצרו ע

כל זמן שלא משנים את התוכן או מסירים את(אחרים )הלוגו

40

פרסומי/ שינוי גישה שיווקי

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

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

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

ורווחי יותרבחינה מתמדת של פורמטים ופלטפורמות הפצה–

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

)Ynetלדוגמא שירות המיועד לסלולר הממותג (

41

42

שינוי גישה עריכתי פלטפורמתYnet כמעט באופן בלעדיחד כיווניתכיום הינה

)היו הצלחה מסחררת Talkbacks-למרות שה(My Ynet - י הגולשים"אפשור פילטור ופרסונליזצית התוכן ע,

כולל האפשרות שלהם, הינה המדרגה הבאה המתבקשת)ועוד, YouTube ,Google Readerוהסיבה להצלחת ( להתבטא

יכול לפתוח הזדמנויות לחיזוק הקשר בין שיתוף הגולשים Ynet :ללקוחותיו

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

הפיכת בעריכת התכנים – My Ynet) של כל אחדשמשתמשים, לערוץ אלטרנטיבי לעמוד הבית) מהמשתמשים

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

TheMarker המודפסהמציג תכני גולשים גם בעיתון (

43

לסיכום

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

ל-Ynet חוויית משתמש ייחודית ומותג חזק כיוםיש,עם למעלה ממליון גולשים ביום

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

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

)Yahoo vs. Googleראו מקרה (האינטרנט

.עכשיוהשינוי חייב להתחיל , לכן

44

תודה!

בעז רוסנוBoaz.cafe.themarker.com

www.2CENTS.co.il

?שאלות