מה זה עיצוב רספונסיבי?

מה משתנה בין מסכים

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

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

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

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

דוגמה ממוסך שמקבל פניות מהנייד

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

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

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

המסך הראשון וסדר המידע

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

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

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

בדיקת פעולות ולא רק מראה

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

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

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

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

תקלות נפוצות אחרי עדכון תוכן

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

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

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

תחזוקה ומתי לא להשקיע מעבר

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

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

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