אני לא אשכח את הפעם ההיא שעבדתי עם לקוח על אפיון האתר שלו, העברתי את האפיון למעצבת והיא הציגה לנו בפגישה עיצוב אתר משגע. אני והלקוח מסתכלים על העיצוב ומבינים שהוא מדהים, אבל אין שום סיכוי לממש אותו במובייל. אפשר לראות שהיום מספר השימושים באתרי אינטרנט מהטלפון עולה. דרך נתוני אנליטיקס באתרים נגלה שהכניסות מהמובייל הן בין 60-90% מהכניסות לאתר. לכן נהיה חייבים לעשות אפיון אתרים רספונסיביים, ואפילו לעצב בגישת mobile first.

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

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

למה כדאי שיהיה לנו אתר רספונסיבי?

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

איך עושים אפיון לאתרים רספונסיביים

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

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

אופן השימוש באתר רספונסיבי

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

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

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

עיצוב אתרים רספונסיביים

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

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

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

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

מהירות אתר מהנייד

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

אפשרויות ניווט מגוונות

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

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

איך נוכל לבדוק שהאתר שלנו רספונסיבי?

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

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

מה לקחת מהמאמר הזה? אני אשמח לשמוע 🙂