Responsive Design – ממשקי משתמש בעולם של ריבוי פלטפורמות

מאת: זאב פרוש ועדיאלה גונן, Aman UI & Design, קבוצת אמן

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

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

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

שיטת ה-Responsive design הנפוצה, נותנת מענה טכני בעיקרו לעיצוב, המאפשר התאמה אוטומטית לרזולוציות מסך משתנות. זאת, בעזרת הגדלה או הקטנה פיזית של האלמנטים (Fluid Design), וקביעת נקודות מעבר (Brake Points), שבהן הקטנה (או הגדלה) פיזית לא מתאימים יותר, ונדרש שינוי המסך מבחינת סידור האלמנטים (Layout), או מבחינת כמות וסוגי הנתונים המוצגים.

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

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

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

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

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