אנחנו כבר יודעים שהכרטיס ביקור של כל חברה הוא האתר שלה. זה מה שמייצג אותה, מאפשר קשר עם הלקוחות, מעלה מכירות, וכו' וכו'... בשנים האחרונות עם כניסת הסמארטפונים והטאבלטים לעולמנו, בתמיכה עם שלל מחקרים ובמעט התבוננות סביבנו (במידה ואנחנו לא תקועים בתוך המסך של הסמארטפון שלנו) ניתן להבין שכל חברה שמכבדת את עצמה ואת לקוחותיה תבנה או תתאים את האתר שלה כך שיהיה רספונסיבי (תגובתי).
המושג רספונסיבי (תגובתי) נהיה מושג מוכר וברור בעולם בניית האתרים. אבל אם במקרה יש ספק מה זה אומר (ולא היה לך נעים לשאול): אתר רספונסיבי (תגובתי) הוא אתר המתאים את עצמו לגודל המסך של המכשיר ממנו המשתמש צופה בין אם זה לפטופ, מסך גדול של מחשב שולחני (וגם טלוויזיה..), טאבלט או סמארטפון על מבחר סוגיהם.
אחת המטרות העיקריות של אתר רספונסיבי (תגובתי) הוא להבטיח העברת מסרים רצויה בכל מצב צפייה ולכל סוג משתמש ועם קצת יחס ותשומת לב הוא יבטיח חווית משתמש טובה שתחזיר את המשתמש שוב ושוב.
לבנות אתר רספונסיבי (תגובתי) כיום הוא תהליך טכנולוגי יחסית פשוט. אפשר לעשות התאמות מהר מאוד ובצורה פשוטה. אבל האם התייחסות טכנולוגית זה מספיק? האם זה מה שמבטיח את חווית המשתמש? לדעתי לא.
מכיוון שיותר משתמשים צורכים את התוכן דרך מסכים קטנים יותר וצורת הגלישה היא שונה מהגלישה במחשב רגיל, בחירת התוכן המוצג הינה יותר קריטית.
אז מה עושים? איך ניגשים לזה? ואיך זה קשור לעולם ניהול הידע?
לפני זה, חשוב לי להבהיר, למרות שאנחנו לרוב מתעסקים בתוכן פנימי של ארגונים וחברות שכיום עקב סוגיות אבטחה, פלטפורמות וטכנולוגיות עוד לא מתאימות את הפורטלים הארגוניים והמקצועיים שלהם לטבאלטים וסמארטפונים, מומלץ כבר היום לחשוב ולתכנן קדימה ליום שבו זה אכן יקרה (ולא ירחק היום).
אני אתחיל בשורה התחתונה – חווית המשתמש אינה נבנית רק מעיצוב מגניב ו/או עיצוב רספונסיבי (תגובתי) נוח. זה אומנם חלק לא מבוטל בהבאת משתמשים, בהשארתם ובחזרה שלהם אבל גם לתוכן ודרך הגשתו יש חלק נכבד במערכה.
אם בתצוגת דף במחשב ניתן לפרוס סרגל ניווט, כפתורים, תמונות ותוכן וליהנות משטחי נדל"ן, בתצוגת טאבלטים וסמארטפון שטח הנדל"ן מצומצם ויקר יותר.
אז מה מומלץ?
תוכן – מסרים!
- תשאלו את עצמכם: מה המסר המרכזי בפריט / עמוד התוכן? עם החלק הזה כדאי להתחיל.
- אל תוותרו על תוכן (איכותי ולעניין)! הוא יגיע עם הגלילה. אבל עוד לפני הגלילה, בחרו את המסר המרכזי. מומלץ שהמסר המרכזי יהיה כתוב אטרקטיבי ככל הניתן כדי שימשוך את המשתמש להמשיך לקרוא או לחילופין יכלול בתוכו מה ניתן למצוא בהמשך עם הגלילה.
- העריכו מחדש את התוכן (זו הזדמנות להתרענן!) – האם התוכן הקיים הוא בעל ערך מוסף, שימושי וחיוני שיופיע גם במסך קטן יותר?
- אל תפחדו מהגלילה. בצפייה דרך סמארטפון וטאבלט, הגלילה הינה עדיפה מאשר קישורים שיפתחו דפים נוספים והדפים הקודמים יישכחו.
תמונות – בהחלט כן, אבל לא הרבה.
- אם בתצוגת מסך המחשב יש מגוון של תמונות לפריט, מה התמונה הכי חשובה? מה מהתמונות מעבירה את המסר / אוירה / חוויה הכי טובה? תתחילו איתה! היא זו שגם תוצג בתחילת הדף במסך קטן יותר.
- שאלו את עצמכם - האם ניתן ליצור מהתוכן תמונות שיעבירו חלק מהמסרים בצורה שונה מקריאה? נסו להשתמש באינפוגרפיקה או מסרים חשובים בתוך תמונות או ריבועי צבע, זה ייצור עניין וישמור על עירנות. :-)
סרגל ניווט וכפתורים –
- אם יש לכם היום באתר הרגיל סרגל ניווט עליון וצדדי. קחו בחשבון שבתצוגת מסך קטן יותר שניהם, ככל הנראה, לא ייכנסו. לרוב, ייכנס כפתור אחד שיפרוס את התפריט המלא רק אם המשתמש ילחץ עליו. חשוב להחליט, מה יופיע בכפתור זה? איך זה יקל על המשתמש שלכם בחוויית הניווט?
- הקדישו מחשבה לאיזה קישורים חשוב לכם להוסיף מתוך התוכן או בסופו ואיך להציג אותם כדי לעזור ולהציע למשתמש עוד תוכן רלוונטי עבורו? (ואם אנחנו בסוף הדף, תוסיפו תמונות, הן מוסיפות לאווירה!)
שימו לב! דגשים אלה יעבדו טוב גם באתר במחשב. המעבר לאתרים רספונסיביים (תגובתיים) עשויה לשפר את האתר / הפורטל שלכם (גם שהוא במחשב) כבר עכשיו.
ולסיכום:
- האם יש פריטים שעקב המעבר לאתר רספונסיבי (תגובתי) תסכימו לוותר עליהם בתצוגה דרך מסך קטן יותר? האם יכול להיות שבאתר כיום הם שם בגלל סנטימנטים? :-)
- האם הוספתם תמונות באתר? אם כן, האם ניתן ליצור גם תמונות שיכילו מסרים מתוך התוכן ובכך לתת גם עניין וליהנות מעוד דרך של העברת מסרים?
- האם הניווט שלכם עמוס כבר כיום? האם יכול להיות שניתן מתוך התוכן להוסיף קישורים ול"אוורר" את סרגל הניווט?
אתר רספונסיבי (תגובתי) ראוי שגם ייצור תגובה חווייתית טובה. מסתבר כפי שתואר לעיל, שלצורך כך צריך גם להשקיע. אפשרי. כדאי.
מקורות:
http://alistapart.com/column/responsive-design-wont-fix-your-content-problem
http://www.clickthrough-marketing.com/content-and-responsive-design/