מוחות גדולים מדברים על עיצוב לרשת

מוחות גדולים מדברים על עיצוב ברשת

מעמוד לבמה - עיצוב עם dHTML טיפוגרפיה ברשת עיצוב למען הגולש ממשקי העתיד

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

מעמוד לבמה - עיצוב עם dHTML
בואו נבחן קודם כל את הנושא החם של הרשת: HTML דינמי (dynamic HTML).
פיטר מרהולץ, מעצב האינטראקציה של Studio Archetype, הכריז בכנס שהוא אוהב HTML
דינמי - אבל בערך. "אני מחשיב את ה- dHTML כמעבר שיטתי מעמוד לבמה," הוא אמר. "עכשיו,
פתאום, HTML דינמי הופך את הרשת לאינטראקטיבית כמו המקינטוש ה- IIc הישן שלי."
הספקנות שלו תהיה מוצדקת, אם הלך הרוח בסייבולד הוא איזושהיא אינדיקציה. עימות של
מעצבים עם ניסיון מציאותי (והרבה תסכולים) עם נציגים מחברות הדפדפנים הגדולות ביותר,
הוכיח שטכנולוגיית הרשת האחרונה הזו יכולה לגרום לויכוחים סוערים.
מרהולץ הציג את המסגרת הרעיונית עליה הוא מבסס את טענתו כי HTML דינמי הוא מעבר
שיטתי. מטקסט סטטי ותמונות של הדפדפנים הראשונים, דרך מסגרות, ג'אוה סקריפט ו-
plug-inים של דפדפני 3.0, ועד ליכולות הדינמיות של דפדפני ה- 4.0, דפי הרשת התפתחו
במהירות ממבנה של דף מודפס לכזה של מולטימדיה.
עכשיו, כשהדפים הופכים לדינמיים לגמרי בעזרת סקריפט מתקדם, מודל ביצוע והעלאה גמיש,
ומגוון של תוספות להצגה והגשה של חומר, המעצבים חייבים להתחיל לחשוב על עבודתם פחות
כאומנות גרפית ויותר כפיתוח תוכנה. "זהו עיצוב ממשק, לא עיצוב דף", לטענת מרהולץ.
ג'ונאס הוגלנד הסכים איתו כשהראה את העבודה שמעבדות Icon Media עשו על גרסת האתר
האחרונה של IDG.net . "זוהי אפליקציה, לא בידור," הוא הסביר. "בנינו חלונות משתנים ותיבות
דיאלוג של העדפות."
באופן דומה, מערכת הניווט של עמוד הבית של נטסקייפ משאירה מאחור את הדפים הסטטים
הישנים, לפי המעצב אלאן ספאר מ- Spar-tek. תוך כדי הדגמת הממשק רב הפונקציות, הוא
הדגים איך שימוש אפקטיבי בתפריטים נופלים או מתרחבים מאפשר למעצבים לשבור חלק
מהמגבלות של עיצוב דפי HTML מסורתיים. "זה מאפשר לגולשים לגלוש ולנווט ישר לעמודים
פופולריים על אתר הנטסקייפ וחוסך הרבה זמן מסך יקר ערך," הוא הסביר.
ועדיין, העיניינים לא בדיוק מושלמים. מעצב ההנדסה של Wired, טיילור, התלונן שבזמן
שהשפעות dHTML יכולות להיות מבדרות ומתוחכמות ויזואלית, הן עדיין קשות מאוד לבנייה
בתהליך עריכה רגיל. "ערוץ Netcaster של נטסקייפ אפשר לנו ליצור אנימציות קלות משקל,
מבוססות על HTML, שיכולות למלא מסך שלם. זה היה מצוין. אבל נדרשה המון עבודה כדי
לתחזק את התוכן ולהפיק אותו באופן שוטף."
מזל, הוסיף טיילור, שהכלים משתפרים וציפיות המעצבים למה שאפשר להשיג הופכות לריאליות
ומציאותיות יותר. "סרגל הכלים של dHTML ב- Webmonkey הוא דוגמה לדרך בה הטכנולוגיה
עוברת מהצד הפרזנטטיבי הפשוט לצד המעשי" הוא אמר.
שניים מהתומכים הגדולים ביותר של HTML דינמי, בנג'מין פיינמן מתשלובת נטסקייפ ושרה
ויליאמס ממיקרוסופט, המשיכו עם ערימת הבטחות שגם מעצבים וגם מפתחים יאהבו. נציגי שתי
החברות הבטיחו לנו שהגרסאות הבאות של הדפדפנים שלהם יתמקדו ב"להוריד את זה נכון"
במקום להוסיף אינספור אלמנטים חדשים, כמו שהיה עד היום בהיסטוריה של השקות דפדפנים.
ויליאמס המשיכה ואמרה שמיקרוסופט מבינה את הקשיים של יצירת פרזנטציות אינטראקטיביות
עשירות. "אנחנו מובילים את התכנות למקום בו הוא לא היה מעולם," היא אמרה, והתייחסה
לתסכולים של טיילור שמנסה לבנות את התוכן של דור ההמשך. "זו הסיבה שאנחנו מנסים להפוך
את ה- dHTML לקל ופשוט ככל האפשר כך שגם לא מתכנתים יוכלו להכניס אינטראקטיביות
ופרזנטציות דינמיות לאתרים שלהם."
פיינמן מנטסקייפ הוסיף ש- dHTML מאפשר לספקי התוכן של הרשת דרכים נוספות להפוך את
התוכן שלהם לא רק אינטראקטיבי, מלהיב ומרגש, אלא גם לרלוונטי ביותר. "היכולות לספק תוכן
אישי, מותאם אישית, לכל גולש בנפרד היא דרך נפלאה לבנות נאמנות בקרב קהל הגולשים," הוא
אמר.
הדיון הפך לויכוח כאשר שאלות מהקהל התמקדו בחוסר ההתאמות בין הדפדפנים, וחוסר האמון
בטכנולוגיה החדשה. "למה לא להשתמש פשוט בג'אוה או ב- Shockwave," שאל מפתח אחד, לא
מוכר. (טיילור ענה - "בגלל שג'אוה מסריחה").
האנליסט דן שייפר דיבר על כך שהיישומים החדשים בטכנולוגיות הרשת עובדים היטב, והם
עובדים עכשיו. מדוע, הוא תהה, שנרצה להמתין עד שאיחוד חברות הרשת הבין לאומית (Word
Wide Web Consortium), ההולך והופך ללא יעיל מיום ליום, יחליט על סטנדרט מוסכם?
פיינמן, שגם ייצג את האינטרסים של נטסקייפ בנושא הסטנדרטים במספר קבוצות עבודה של
C3W, הגיב ואמר שאיחוד החברות הוא בעצם מהיר יותר מאשר רוב האירגונים הסטנדרטים,
ומפרסם המלצות על פרקטיקות נוכחיות בזמן סביר.

טיפוגרפיה ברשת
אנחנו נדע שהרשת נהיתה מדיה בוגרת ומרכזית כשאנשיה הרציניים ביותר של תעשיית ההוצאה
לאור יתחילו לעבוד בה. זה כבר מתחיל לקרות: אחד ממעצבי הדפוס הטובים ביותר במאה הזו,
מת'יו קרטר, יוצר אותיות דפוס יפהפיות במיוחד לשימוש ברשת.
קרטר, שדיבר במושב הטיפוגרפיה של הכנס, הצביע על המעבר שעברה הטיפוגרפיה על המסך
מ"צורה של הצגה ניסיונית ומוקדמת לצורה של הצגה מבוססת וסופית". כמו בצורות האחרות של
עיצוב ממוחשב, גם גופנים על המסך נחשבו תמיד להקדמה למה שבסופו של דבר יהיה הדפסה
ברזולוציה גבוהה. בכל אופן, היום כאשר אנחנו מעצבים למסך ולרשת, הדפוס שאנחנו רואים
לפנינו הוא התוצר המוגמר.
בכדי להמחיש את הנקודה שלו, קרטר הדגים את מתודולוגית העיצוב שלו לשני גופני מסך
פופולרים ביותר שהוא עיצב לאחרונה: Verdana ו- Georgia. שני הגופנים נוצרו "בסדר הפוך" -
עוצבו כמפות ביטים במספר גדלים שונים עד שהם קיבלו את המראה הרצוי על המסך, ואז הונדסו
לאחור לקווי מתאר בכדי לתת את הגמישות של דפוס משתנה בממדיו.
בהשוואה בין הגופנים-על-מסך האלו לבין MS Sans ו- Times New Roman, היתרונות של
עיצוב למסך ברורים למדי. תשומת לב קפדנית לריווח ולצורת האות מגדילים את יכולת הקריאה,
כפי שהראו מחקרים שבוצעו לאחר סיום תכנון הגופנים.
כאשר עברנו לדיון יותר טכני, סיימון אירנשוו מקבוצת הטיפוגרפיה של מיקרוסופט, דיבר על כך
שהוטל עליו ב- 1995 "להבין מהו הדפוס ברשת". אחרי שהפליאה וההתלהבות הראשונית מהרשת
שככה, התברר שיש כמה בעיות רציניות עם הדפדפנים וניהול הטיפוגרפיה ע"י ה-HTML.
לפני הצגת תווית ה- <font> לא הייתה שום שליטה בגופנים. כשתווית ה- <font> הפכה
לפופולרית, הייתה בעיה משמעותית. "עדיין לא הייתה לנו שום דרך לדעת אילו גופנים התקינו
הגולשים על המחשבים שלהם". שיטות ה- Cascading Stylesheets שנתנו שליטה טיפוגרפית
גדולה עוד יותר, התחרו זו בזו על חבילות דפוס מסורתיות לשולחן העבודה, אבל לא פתרו את
בעיית הגופנים המותקנים.
הפתרון? לשלוח גופנים יחד עם הדף להתקנה זמנית, בדיוק כמו שאנחנו שולחים היום תמונות
וצלילים על גבי דפי האתר. הפתרון של מיקרוסופט משתמש בכלי שנקרא WEFT לבדיקת דפי
HTML ויצירת גופני דפוס פתוחים שישלחו עם הדפים. חברת Bitstream, מצד שני, משתמשת
בתהליך של "הקלטת" הגופנים לתוך טכנולוגיית ה- TrueDoc שלה ואז מעלה את ההקלטות על
מסך הגולש, לפי מה שאמר בראד צ'ייס מביטסטרים.
צ'ייס חזר על ההתלהבות של אירנשוו בקשר לטיפוגרפיה מתקדמת ברשת, ונתן מספר סיבות מדוע
טקסט עשיר בתבניות טוב יותר מקידוד מילים לגרפיקות, כפי שנעשה כיום. "הטקסט נשאר
טקסט," הוא הסביר, "מה שאומר שהוא עדיין מסודר באינדקס, אפשר לחפש אותו, אפשר להעתיק
ולגזור אותו, והוא שומר על נגישות לדפדפנים לא ויזואלים."
כריס לילי, שמפתח גופנים וסטנדרטי CSS לאיחוד החברות של הרשת הבין לאומית, הדגים את
כוחן של הטכנולוגיות האלו. "שימוש ב-CSS יחד עם גופנים המושרשים בו הוא למעשה מהיר
יותר מכל דף עמוס גרפיקה" הוא הסביר. "אנחנו רואים מהירות הרבה יותר גבוהה כתוצאה
משינויים קטנים כמו שהזכרנולעומת שינויים כמו הפיכת הHTTP ליעיל יותר או יצירת שיפורי
מהירות אחרים."
לרוע המזל, המעצבים והמפתחים הרבים לא היו אופטימיים כמו מטיפי טכנולוגיית הרשת
שהשתתפו בדיון. עם התקנות מתחרות וזכויות גופנים מבלבלות, רוב המשתתפים בקהל הסכימו
שהם מתכוונים לחכות ולראות איך התחרות על פורמט סטנדרטי תסתיים, לפני שהם יאמצו את
הטכנולוגיה החדשה הזו.

עיצוב למען הגולש
מה שהופך עיצוב לטוב, במיוחד ברשת, הוא לכל הפחות סובייקטיבי. לכן זה היה די מרשים
לראות קבוצת מומחים מהתעשייה מסכימים פה אחד שכל העיצובים הטובים ברשת הם בעלי
תכונה משותפת אחת:
הגיון פשוט.
גם אם אתה לא עושה שום דבר אחר, לפחות תבנה את האתר שלך כך שהוא יהיה הגיוני לכל גולש.
מארק הרסט, מייסד Creative Good - החברה הראשונה ברשת להקלת השימוש - לא רצה
להוסיף הרבה יותר מעבר לנקודה הזו. כל כך קשה להשתמש ברשת, הוא טוען, שרוב האמריקאים
הממוצעים - "סבתא שלי בקנטאקי עם מחשב חדש שעלה פחות מ- 1000$" - ממש לא מעונינים
לנסות ולהבין את האתר שלך.
"תסתכלו על מה שהם צריכים לדעת," הרסט אמר. "קודם כל הם לומדים את החומרה שלהם, ואז
את מערכת ההפעלה שלהם, ואז הם מצליחים להבין איך לחייג ISP, ואז לומדים את הממשק של
הדפדפן. ועכשיו, סוף סוף, הם מגיעים לעיצוב המבריק שלך. תעשה את זה פשוט."
הפשטות הזו הודגמה שוב ושוב אצל הרסט בכל הממשקים של מנועי החיפוש הגדולים ברשת:
"לוגו, שורת חיפוש, קישורי טקסט," הוא הצביע. "שוב ושוב, האתרים המצליחים - המתחרים
שלכם - אימצו את הפשטות הזו. אם אתה רוצה לעשות כסף ברשת, אתה צריך לקוחות. וככה אתה
משיג אותם ושומר עליהם."
כריס אדוארדס, מנהל העיצוב ל- Art Technology Group, דיבר על שימושיות מנקודת מבט
אחרת. עבור יישומים רבים ברשת אדוארדס השתמש בשיטה שבה משתמש כל שחקן תיאטרון-
הוא הכניס את עצמו לסביבה בה המוצר שלו יופעל. "ההבנה איך הגולשים שלך עובדים ברשת,
ואיך הם משלימים את המשימות הפשוטות והמורכבות המרכיבות את היום שלהם, חייבת
להנחות את תהליך העיצוב ממש מתחילתו. אני קורא לזה 'שימושיות של החלק הקדמי'."
אדוארדס הסביר.
בעוד הטכניקה של אדוארס מתחילה לעבוד בתחילת תהליך העיצוב, הגישה היוריסטית של קית'
אינסטון עוצבה במיוחד לבדיקת מוצרים קיימים. כיועץ שימושיות ומנהל בתחום היצירתי ב-
Usable Web, אינסטון פיתח את מה שהוא קרא לו "מבחן הלחץ" לאתרים. המתודולוגיה שלו
פשוטה: "תבחר כמה עמודים אקראיים באתר שלך. תעלה אותם על הדפדפן שלך ותשאל כמה
שאלות. איפה אני נמצא? מה עוד יש כאן? לאן אני יכול ללכת מפה?" על ידי בחינה מדוקדקת של
התשובות לשאלות האלו, אתה יכול למצוא כמה בעיות שימוש מוחבאות, במאמץ מינימלי.
גבריאלה מרקס, מ- Construct Design, יודעת לא מעט על כמה קל לגולשים ללכת לאיבוד ולא
להבין את הממשק. Construct היו חלוצים בפיתוח חללים תלת מימדיים על ידי שימוש ב-
VRML, ולאחרונה פיתחו דוגמאות מדהימות של עיצוב לרשת על ידי שימוש בHTML דינמי. גם
VRML וגם dHTML מרחיבים את גבולות הציפיות של הגולשים מהמחשבים שלהם ומחווית
הגלישה ברשת. מרקס הדגימה איך חוויה מורכבת תלת מימדית מורכבת יכולה להיות פשוטה
יותר לניהול על ידי שימוש בשכבות של מגבלות על מה שמתאפשר לכל גולש. חלל צ'אט וירטואלי,
לדוגמה, יכול לתסכל את הגולשים. "יש שם תמיד כל כך הרבה חלונות שהם צריכים להתמודד
איתם - אחד להדפסת טקסט, אחד שמשמש כמפה שמראה לך איפה אתה נמצא, ואחר עם מבט
נקודתי." בכדי לפשט את החוויה, Construct פיתחו נקודת מבט אוטומטית - בזמן ההשתתפות
בצ'אט, המצלמה תעבור סביב "שולחן הדמויות", ותתמקד על מי שמדבר כרגע, וכך תעקוב אחר
השיחה וגם תתן לה תחושת מקום. "רמזים לשימושיות יכולים להגיע מכל מה שסובב אותך,"
הסבירה מרקס. "את ההשראה שלנו אנו שאבנו מהקולנוע."