הנדסת אנוש ותכנון אתרים ברשת האינטרנט/אינטראנט 

מבוא

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

שלב ראשון - שלב התכנון

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

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

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

שלב שני - תכנון המבנה הפונקציונלי וממשק המשתמש

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

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

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

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

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

שלב שלישי - שלב הפיתוח

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

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

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

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

קול ווידאו
   יצירת אלמנטים הקשורים בקול ובווידאו טומנת בחובה מספר בעיות:
1) הפורמט שבו יישמר התוצר: אין כיום הסכמה מלאה על פורמט שמירה אחד, ולפיכך יש לשקול באיזה פורמט רוצים לשמור את התוצר. לרוב, מומלץ לשמור את התוצר בשני פורמטים ויותר (WAV ו- RealAudio), וזאת כדי להפוך אותו לזמין בעבור מגוון רחב של משתמשים, בעלי תצורות מערכת שונות.
2) גודל התוצר ואופןהעברתו למשתמש: חשוב להקפיד על גדלים סבירים שיאפשרו הורדה של המידע בזמן סביר. פתרון לבעיית הגודל מספקת טכנולוגיית ה- Stream, הנתמכת כיום על-ידי מספר יצרנים, אלא שחסרונה הוא שהיא מוגבלת במספר המשתמשים היכולים להוריד בו-זמנית את הקובץ מהאתר.
3) איכות הדגימה: כלים לדגימה ולעיבוד קול ווידאו יקרים יותר מיתר הכלים הנדרשים להקמת אתר. חשוב להקפיד על איכות דגימה גבוהה ביותר של המקור ולהמירו למדיה דיגיטלית באיכות גבוהה ובלא רעשים. מומלץ לבצע את ההמרה לפורמט דיגיטלי במעבדה מקצועית. 

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

הערות בקוד המסמך

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

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

שלב רביעי - שלב האינטגרציה

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

שלב חמישי - תפעול שוטף

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

   חברות גדולות טורחות להחליף את תמונת הפתיחה של האתר מדי חודש, או שהן מעצבות כבר בהתחלה מספר מסכי פתיחה שונים המוצגים בצורה אקראית. בכך מעוררות החברות עניין ומשרות דינמיות על האתר שלהן (ראה לדוגמא את האתר של חברת HP בכתובת  http://www.hp.com/).

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

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

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

ביבליוגרפיה

1) http://webreview.com/resources/ - אתר ובו הפניות רבות למידע על תכנון והקמת אתרים, כולל מידע רב על הצדדים הטכניים של הנושא.

2) http://dialspace.dial.pipex.com/town/parade/np17/wpdesign/wpdres.htm - אתר המלמד על צדדים רבים בהקמת אתרים ובבנייתם. מומלץ לכל העוסקים בנושא.

3) Designing the User Interface , third edition, Ben Shneiderman (ISBN 0-201-69497-2); published by Addison Wesley Longman, Inc.
 
4) http://info.med.yale.edu/caim/manual/
5) http://www.wpdfd.com/wpdhome.htm