ניצוצות ברשת

מה הבעיה לעצב אתרים למובייל?

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

שתפו כתבה במיילשליחת הכתבה באימייל
יונית רושו

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

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

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

איפה אתה נמצא כשאתה גולש במובייל?

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

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

אתר גאפ במובייל ובדסקטופ

גלישה פוליכרונית

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

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

אפשר לנצל את יכולת הסיבוב במובייל, שאינה קיימת במחשב

השפעות הסביבה: מה קורה מסביב?

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

טכנולוגיה: על איזה מכשיר אני גולש?

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

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

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

האתר של מק'גארי בראון

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

אשמח לראות דוגמאות שהמרתם או תכנתתם בעצמכם. באנרים, משחקים תנועה באתרי אינטרנט שמבוססת על טהרת ה- html5, jquery, css3, canvas יקבלו במה בהארץ: yonit.haaretz@gmail.com.

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

תגובות

הזינו שם שיוצג כמחבר התגובה
בשליחת תגובה זו הנני מצהיר שהינני מסכים/ה עם תנאי השימוש של אתר הארץ