בניית אתר בית ספרי
עובד ע"י מוטי קרניאל
אם ברצונך להגיב - שלח דואר לפי הכתובת :
motyka@netvision.net.il
על פי ד"ר ג'קוב נילסן,(Jakob Nielsen) ותוספות של מוטי קרניאל
למשל במאמרו : Top Ten Mistakes in Web Design בכתובת: http://www.useit.com/alertbox/9605.html
ותוספת במאמר: Why Frames Suck (Most of the Time בכתובת: http://www.useit.com/alertbox/9612.html
| 1. |
תוכן מעניין, |
| תוכן הוא הסיבה לכניסה לאתר. ראה גם את מה שכתבתי בנושא ב "סוגי אתרים" |
|
| 2. |
ציין בדף הבית מהו האתר ומה מטרתו. |
| ראה הרחבה בנושא כאן | |
| 3. |
שם קליט |
| דאג (אם אפשר) ששם האתר יהיה קל ונוח לזכירה
ולכתיבה, ככל שהשם ארוך יותר ישנה הסתברות
גבוהה יותר לטעויות בזמן הכתיבה. גם אם האתר מאוחסן אצל ספק אחסון חינמי, מצא מקום המאפשר שם קליט דוגמאות ראה בדף קיצורי כתובת |
|
| 4. |
המנע ממסגרות |
| חשוב האם באמת האתר דורש מסגרות (frames), חלוקת הדף עלולה לבלבל את הגולש, קשה לפעמים להדפיס רק את הרצוי, שטח התצוגה קטן ואי אפשר ליצור סימניה (bookmark) לדף מסוים הנמצא בתוך המסגרת. | |
| 5. |
אל תשתמש ברזולוציה לא סטנדרטית, |
| רוב הגולשים עושים זאת ברזולוציה של 600*800 בנה את אתרך בהתאם. | |
| 6. |
שמור שוליים מצדי הדף |
| השוליים נדרשים הן לנוחות צפייה והן לצורכי הדפסה. ישנם אתרים הדואגים לנוחות הצפייה בכך שאת הטקסט הם תוחמים בתוך תא טבלא בודד, שרוחבו 400 פיקסלים (נותן רוחב טקסט דומה לזה הקיים בספר בכריכה רכה) |
|
| 7. |
חסוך במשקל הדף |
| זכור כי למי שמחובר בקו חיוג לוקח הרבה זמן
לטעון תמונות ובייחוד אנימציה, לכן דאג שמשקל
דף הבית כולו כולל כל התמונות לא יעלה על
k30, תמונה צריכה להיות בגודל מכסימלי של k6. רק בדפים פנימיים, אם נדרש אפשר לשים תמונות מפורטות יותר. |
|
| 8. |
אל תכתוב בגודל גופן קטן מדי |
| התאם את גודל הטקסט לעיני הצופה - טקסט קטן מדי מקשה על קריאה וגדול מדי לא נוח. | |
| 9. |
הזהר בשימוש בטכנולוגיות מתקדמות |
| טכנולוגיות מתקדמות דורשות
שלמשתמש יהיו קו מהיר יחסית, מחשב מתקדם
ולעיתים תוספים לדפדפן. חלק מהמשתמשים חוששים להוריד תוספים (plug-in) ולהתקינם, וכל הטכנולוגיות החדשות דורשות הורדת פלג-אינים כאלו, ולעדכנם לעיתים קרובות. בנוסף, לוקח זמן לטעינת והרצת הטכנולוגיה וזה בא על חשבון זמינות המידע, ולמשתמשים רבים אין סבלנות לחכות לטעינת הדף והם עלולים לעבור למקום אחר. |
|
| 10. |
יש להתחשב בגולש הצופה |
| תן למשתמש יכולת לקרוא את הדף בשקט, המעט באנימציות, המנע מטקסט נגלל אוטומטית, ושאל את עצמך האם באמת משתמש תמים שנכנס לאתר כשבני הבית ישנים - אכן צריך מוזיקה שתעיר אותם - מסקנה: המעט בשילוב מוזיקת רקע וצלילים, ואם אתה חושב שזה נדרש - הפעל מנגנון שיאפשר לצופה להחליט האם ברצונו להפסיק את המנגינה, או הזהר אותו מראש ואפשר לו לכבות את הרמקול. | |
| 11. |
כתוב קישורים בצורה חכמה |
| תן שמות קצרים לקבצים מקושרים, אין צורך לתת בשם הקובץ את תוכנו, זכור שלעיתים המשתמש רוצה לרשום לעצמו את הקישור לשימוש עתידי. | |
| 12. |
אחידות עיצובית |
| שמור על אחידות בעיצוב דפי האתר, למשל בתמונות או צבעי רקע. | |
| 13. |
כתוב בכל דף את שם האתר |
| בכל דף זכור לתת זיהוי של האתר, ייתכן ומישהו אחר ייתן קישור לדף הנמצא בתוך האתר, אפשר למי שהגיע לדעת היכן הוא נמצא, ע"י כותרת קבועה, קישור לדף הבית מכל דף, או ציון אחר לגבי השיוך לאתר ביה"ס. | |
| 14. |
הפרד בין פסקאות |
| הכנס קווים מפרידים במקום בו הפסקאות עוסקות בנושאים שונים לחלוטין. | |
| 15. |
המנע מגלילה ארוכה מדי |
| ישנם צופים שלא גוללים להמשך הדף, ולא תמיד שמים לב לכך שיש המשך לדף, בייחוד עם מסתיימת פסקה בתחתית המסך. | |
| 16. |
בנה מפת אתר |
| לכל אדם יש הקשרים אסוציאטיביים אחרים, לכן דרך ארגון האתר שנראית לך הגיונית, אינה כזו עבור כולם, לכן רצויה מפת האתר ואם לא - אז לפחות קישורים רבים ונוחים מכל דף. | |
| 17. |
התאם את צבע הטקסט לצבעי הרקע. |
| המנע ממקוריות בקישורים, משתמשים רגילים לצורה וצבעים
מסוימים ויודעים שקישור צבוע מסמל על כך שכבר ביקרו בו. במידה והקישור מתבצע דרך תמונה, תן גם קישור טקסטואלי כי רוב האנשים רגילים לכך שקישור הוא שורה כחולה המודגשת בקו תחתי. לכל קישור תן הסבר ברור וממצה. זכור כי קישור למקור מידע, מחקר או כל אתר אחר יכול לגרום לכך שהגולש יגלוש לשם, ובכך "תאבד " אותו, לכן כדאי לרכז את כל הקישורים במקום אחד, ולהימנע מקישורים החוצה ללא צורך. |
|
| בגלל שרוב האנשים רגילים לכך שקישור הוא שורה המסומנת בקו
תחתי, המנע מהדגשות ע"י קו תחתי - כי חלק מהגולשים ינסו
להקיש על שורה זו אם ברצונך להבליט דבר מה, עשה זאת ע"י הדגשה או שינוי צבע הכתב. |
|
| 18. |
עדכניות ומידע תקף |
| יש לעבור כל הזמן על האתר ולעדכן אותו, עדיף מידע חסר על מידע לא עדכני או ברכת "ברוכים הבאים" לשנת לימוד שהסתיימה מזמן. | |
| 19. |
המנע מעמוד מקדים גרפי |
| המנע מעמוד מקדים גרפי, שרק לחיצה עליו מביאה את הגולש לדף התוכן, אחרי כמה פעמים שמגיעים לאתר זה הופך להיות מטרד. | |
| 20. |
המנע מעודף באנרים באתר. |
| 21. |
ניקוד ופיסוק |
| עבור על האתר והכנס סימני פיסוק, אם אין אפשרות ניקוד כתוב בכתב מלא ובדוק האם אין סכנה של טעות בהבנה - במקרה זה שקול שימוש במילים נרדפות. | |
| 22. |
כדאי להשתדל שהאתר יאוחסן על גבי שרת מהיר ואיכותי. |
| 23. |
חשוף את מי שאחרי האתר |
| צור קישור ל "מי אנחנו" ושים שם תמונות של הצוות, הגולש מחפש הרבה פעמים את האדם שאחרי האתר. | |
| 24. |
דאג לשים בדף השער את כתובת ביה"ס ואת הטלפון והפקס. |
| 25. |
הוספה למועדפים |
| בקש מהגולשים להוסיף את כתובת האתר למועדפים. ורצוי לשים סקריפט העושה זאת עבורם, או לפחות תן הסבר כיצד עושים זאת. | |
| 26. |
שמור על קשר עם הגולשים |
| השב מהר על כל פניה בדואר אלקטרוני, אם אין באפשרותך לענות מיידית שלח אישור קבלה עם הבטחה לתשובה לכשתהייה. | |
| 27. |
זהירות בעיצוב |
| ישנם מעצבי אתרים הרוצים
להיות ייחודיים, ו"לשבור" את השגרה, אבל,
גימיקים, אטרקציות טכנולוגיות ועיצוב 'עתיר יצירתיות' פוגעים לעיתים בשימושיות של האתר, צריך תמיד לזכור שאתר אינטרנט נועד עבור הצופים בו ולא עבור הכותב אותו, ובנוסף עיצוב "מיוחד" עלול לפגוע במטרות האתר וזאת בגלל: - עלול לפגוע ביכולת התמקדות של הצופה, ולהסיח את דעתו מהתוכן. - ייגזל זמן רב מדי לטעינת כל האפקטים, ובינתיים הגולש כבר יהיה במקום אחר. |
|
| 28 |
דאג שיהיה קשר בין כותרת של דף לבין תוכנו. |
| 29. |
הוסף קישור לאתרים בנושאים בהם עוסק האתר |
| לאתרי בתי ספר אחרים, לאתר משרד החינוך, ולכל אתר רלוונטי אחד. | |
| 30. |
שמור על זכויות יוצרים |
| יוצרו של דף אינטרנט מחזיק באופן
אוטומטי בזכויות היוצרים של התכנים ושאר החומרים הנמצאים בו, ולכן אל תעתיק חומרים ממקום אחר. |
התנהגות הקוראים באינטרנט שונה מהתנהגות הקריאה העיונית
הרגילה שלהם.
במחקרים שערכו נילסן ומורקס John Morkes and Jakob Nielsen,
הסתבר שרוב הקוראים סורקים את דף האינטרנט במקום לקרוא מילה
אחר מילה.
הגולש המחפש מידע באמצעות מנוע חיפוש, מקבל הרבה תוצאות, ועליו
לברור בתוכן את התוצאות הרלוונטיות.
כאשר גולש מגיע לדף, הוא סורק אותו, מרפרף עליו, ומחפש מילת
מפתח או חלקי משפט שיגידו לו האם בדף זה יש מידע רלוונטי או
לא.
אחת מתוצאות הלוואי של אפיון זה הוא חוסר הסבלנות של הגולש
הממוצע להמתין לטעינת דף, ולכן עדיף הרבה דפים קצרים מקושרים
על פני מגילה, ושימוש במידה בגרפיקה.
וזה מתקשר גם לכך שחלק מהגולשים מסתפקים בחלק המסך המוצג
לפניהם ולא גוללים להמשך.
חלק גדול מהגולשים קוראים בכל פסקה רק את המשפט הראשון, ולכן
כדאי שכל פסקה תכיל רעיון אחד, ושהמשפט הראשון יציג את נושא
הפסקה.
רכיבים המסייעים לקריאה מרפרפת: כותרות, אותיות גדולות
ומודגשות, טקסט מואר ומובלט, רשימות, גרפיקה, משפטי נושא ותוכן עניינים
מהימנות: אחד השיקולים של הגולש האם להמשיך ולקרוא או לא,
הוא
מהימנות הכותב, המוניטין שלו, ומכאן מהימנות המידע הכתוב,
לכן עדיף לציין בכל דף מיהו הכותב, ועדיף לכתוב בצורת כתיבה
אובייקטיבית המעלה את תחושת המהימנות (ולא בסגנון קידום מכירות).
http://lulav.huji.ac.il/ia/.index.html
ארכיטקטורת מידע - האוניברסיטה העברית בירושלים
האתר של ג'יקוב נילסן
הנווט של USEIT
-
רשימת מאמרים מקיפה בנושא:
http://www.usabilityviews.com/nng_by_date.html
http://www.alistapart.com/stories/marsvenus/
http://members.evolt.org/foop/blog/archives/000094.shtml
http://www.shirky.com/writings/nielsen.html
http://webword.com/moving/spanking.html
http://www.ordinary-life.net/blog/archives/cat_web_design_usability.php
http://www.cs.niu.edu/~mcintire/490m_580m_downloads/PowerPointLectures/03a-Intro-DESIGN.PPT
http://list.informationdesign.org/pipermail/infodesign-cafe/2000-October/049156.html
http://www.beeth.com/categories/webdesign/
http://www.everything.ch/feedback/index.php
http://www.evolt.org/article/Bad_side_of_Flash_5/4090/3445/