עיצוב ממשק באינטרנט

תרגום – דביר כפרי | 401, 27, 31 עמודים : איורים ; 24 ס"מ + 1 תקליטור. – ISBN 965-361-274-3

OCR (הסבר)
עיצוב ממשק באינטרנט 9הוח0ו65 צזוווטב53( טס/ !וא טפסאבּנ עורך ראשי: זהר עמיהוד תרגוס: דביר כפרי עריכה לשונית ועיצוב: ענבל אילני עיצוב: רמה שנקלר עיצוב עטיפה: ישראל מצגר קרא על התקליטור המצורף בהקדמה, בנספח ובתקליטור עצמו 7 ספרי מחשבים.--- 5 ץזווו530 ט60/ חַהוח0ו65 ח56!ו6וא סאה 8 תווחה .2 :זסזום= ," !530 ס6/ חַהוחףו5סכ" 60 חס , הסחו60 סהַבטטפחה! חפוופַחם 6ח+ והסז הסו5|3ח3ז 260והסחסטוה 9 6 600005 ,7655 310675 צוסא] עס ססתפוופטוק ץם זס הזזסז עֶח3 הו 60הה5ח8 זס 000660זק6ז 06 עה אססס 8וח+ ]0 +זבּק סא .60ש6567ז סחטוז ווא הסוטהוזסזחו שח ץכ זס פַהוסזס66ז ,8הוץקס06>סחתכ 8חו טוח ,|63ח8 66 זס 6והס6!6607 ,5ה68ח ץחה ז6ח5ו!ס טק 6 ההסז? הסו55וח סכ +טסת>וט , רה6ל5ץ5 |8צ6016 5507806 .0 והח-00 ץם הססתפו!סטק הסחו60 6חַבטפחה! אוסזססרן 0 6 %ח8וזץק60 שמות מסחריים שמות המוצריס והשירותים המוזכריס בספר הינס שמות מסחרייס רשומיס של החברות שלהס. הוצאת הוד-עמי והוצאת ז₪4108 שפאז עשו כמיטב יכולתן למסור מידע אודות השמות המסחריים המוזכריםס בספר זה ולצייו את שמות החברות, המוצרים והשירותיס. שמות מסחריים רשומים (901816760ז 5 )) המוזכריס בספר צוינו בהתאמה. הודעה ספר זה מיועד לתת מידע אודות מוצרים שונים. נעשו מאמציס רבים לגרוס לכך שהספר יהיה שלם ואמין ככל שניתן, אך אין משתמעת מכך כל אחריות שהיא. המידע ניתן ''כמות שהוא'' ("5ו פ8"). הוצאת הוד-עמי והוצאת ז09וח שסא אינן אחראיות כלפי יחיד או ארגון עבור כל אובדן או נזק אשר ייגרס, אם ייגרם, מהמידע שבספר זה, או מהתקליטור שמצורף לו. לשם שטף הקריאה כתוב ספר זה בלשון זכר בלבד. ספר זה מיועד לגברים ונשים כאחד ואין בכוונתנו להפלות או לפגוע בציבור המשתמשים/ות. (6 כל הזכויות שמורות הוצאת הוד-עמי לספרי מחשבים בע''ימ ת.ד. 6108 הרצליה 46160 טלפון: 09-9564716 פקס: 09-9571582 |ו.60. והחהּ-001סח. שש | וו.ס6.וההה0000-3זחו אין להעתיק או לשדר בכל אמצעי שהוא ספר זה או קטעים ממנו בשום צורה ובשום אמצעי אלקטרוני או מכני, לרבות צילום והקלטה, אמצעי אחסון והפצת מידע, ללא אישור בכתב מאת ההוצאה, אלא לשם ציטוט קטעים קצרים בציון שם המקור. הודפס בישראל 2000 0 5זחטום || :ו זווה-ססוז 0 ,151 ,הץ|2ז6ר ,6108 .0.8.ק מסת'יב 965-361-274-3 158% "שם המשחק - פשטות. נילסן מפרק את עקרונות הפשטות למרכיבים של עיצוב הדף, עיצוב התוכן וארכיטקטורת האתר, ומרכיב באמצעותם את תורתו להצלחה בזירת האינטרנט הסבוכה. הוא מתאר גישה מאוד שיטתית, המורכבת מכללים וקווים מנחים, שלעיתים נראים נוקשים מדי, בבואו לנתח את היסודות לפיתוח אתר שימושי. הוא משתמש במושגים של עשה ו- אל תעשה כדי לקבוע איזה אתר יעבוד, איזה לא ולמה ... הבנת שיטות אלו ושילובן בגישות עיצוביות/ אומנותיות תתרום ליצירת אתרי אינטרנט בהירים וברורים למשתמשים ולהצלחתם העסקית." שי גולדשטיין ארט דירקטור, נענע, //.118178.60.ש/שש "נילסן מקבץ וממצה את העקרונות החשובים ביותר בעיצוב ממשק לאינטרנט בספר אחד. הוא מסייע לפקוח את עיניהם של מי שממוקדים במחשב, השוכחים כי הגורם האנושי הוא המניע והמטרה. עיצוב תוכנה ואתרים הוא עבור אנשים, וראוי שהם יהיו גורם מכריע, ואולי "המכריע" במערכת השיקולים בתהליך הפיתוח. המחבר מחנך להנדסת אנוש נכונה, תוך שימוש בדוגמאות צבעוניות ובהומור. זהו ספר בסיסי לכל מפתח תוכנה וראוי שהספר ישמש אותו ככלי עבודה יומיומי." ענת שמיר מנהלת תחום עיצוב ממשק והנדסת אנוש בחברת 796/00/00/65 655// "ספר חובה לכל מִי שעוסק בפיתוח אתרי אינטרנט בכלל ובפיתוח אתרי תוכן בפרט. הספר מאיר את עיני הקורא ומנחה אותו כיצד לבנות אתר שישרת את גולשיו נאמנה. הספר מתאים למפתחים, הבונים את עיצוב הדף וקובעים את עזרי הניווט. ספר זה מראה להם כיצד לעשות את הדברים נכון. הוא גם מתאים עבור מנהלים/לקוחות הרוצים לבנות אתר במסגרת העסק. ספר זה יקנה להם את הידע הדרוש, כדי שיוכלו לדרוש אתר מקצועי שישרת את מטרותיהם העסקיות." נמרוד לוריא מנהל חברת אינטאקטיב-מיינד ומרצה בכיר בתחום האינטרנט ופיתוח בסביבת 050% ספר זה ישפר את יכולות העיצוב שלך ויאפשר לך להפיק מוצר איכותי יותר לשביעות רצון הלקוח הגולש באתר. ספר זה יתן לך נקודת מבט על האינטרנט כפי שמעולם לא חווית - מנקודת המבט של המשתמש הסביר. עוד לפני שהמשתמש מנווט באתר והרבה לפני שהוא מעיין בתכנים שבו, או משקיע זמן וכסף במה שאתה מנסה למכור לו, הוא רואה. הוא רואה איך האתר שלך מעוצב ומנסה לאמוד עד כמה קל ופשוט יהיה לו לנווט בו, ועד כמה האתר רלוונטי לצרכיו. באינטרנט, ולא רק, אבל בעוצמה גדולה יותר - המשתמש הוא המלך. בלחיצת עכבר הוא אצלך ובלחיצת עכבר הוא יכול להימצא הרחק ממך. זכור זאת כשאתה מעצב את האתר. ח6!56וא 0 0א33., הגורו ונושא הדגל של עו|ו0580 פ6/, משתף אותך בניסיון הרב שיש לו בתחום. החל מתכנון תוכן ועיצוב העמוד כדי להתמצא טוב יותר באתר ועד לניווט קל יותר. המחבר מנחה אותך צעד-אחר-צעד איך לעצב אתר המותאם לכל גולש. הלימוד בספר יתן לך כלים כדי לוודא שלאתר שהינך בונה היום תהיה משמעות וערך לאורך זמן. ספר זה מיועד ל: מעצב גרפי באינטרנט (285/0081 60//), מנהל אתר אינטרנט (ז85+6/! 60/), מנהל עסקי (06זפו וח60 80//), מנהל (ז68ווטם 80/)), מנהל רשת (5178107!ח!ר0/ הח6ז5/5 60/)), מתכנת אתר אינטרנט (זפחחוחפזחָסזק ספצש), איש עסקים (ח90ז76 855ח2₪51) ומשקיע (זסופ6עחו). הונן עניינים מקוצר הקדמה 0000000000 0000090 062000 6 פרק 1: מבוא: שימושיות ב-65/ - לשם מה? ל פרק 2: עיצוב דף 17 פרק 3: עיצוב תוכן 0 פרק 4: עיצוב האתר 1 פרק 5: עיצוב עבור האינטראנט כ 26 פרק 6: אפשרויות נגישות למשתמשים בעלי מגבלות 27 פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם ו פרק 8: תחזית: הקבוע היחיד ב- ט6\ הוא השינוי 0 פרק 9: מסקנה: פשטות העיצוב ב- 60/ 7 נספח: התקליטור המצורף 8 אינדקס 0 20 תוכן העניינים ‏ 1 הונן העניינים הקדמה -- ו פרק 1 מבוא: שימושיות ב-60/ו - לשם מה? ה'וצוהה,.ה.או.ורואוצגו.ו.... 9 אמנות מול הנדסה 1 קריאה לפעולה 1 מה אין בספר 13.20.42 מדוע כולם מעצבים אתרי 60/ בצורה לא נכונה? 4 פרק 2: עיצוב ך|'::ווווווווווווווווווווווווווווווווווווווווווווווריייוייי.ת 17 נכסי מסך :2:5 וי:וו. גו 18 עיצוב לפלטפורמות מרובות 2 מהיכן מגיעים המשתמשים? 2 עיצוב שאינו תלוי ברזולוציית מסך 29 שימוש בתוכן לא סטנדרטי 3 ענייני שדרוג 0 מתי בטוח לשדרג? וו 33 הפרדת המשמעות מהתצוגה 36 זמני תגובה בול 42 חיזוי זמני תגובה .4ב הורדות מהירות, חיבורים מהירים 2 צפייה במסך הראשון 0 ניצול תכונת 6ו|4-ק66א של סדד ו קישורים 0 תיאור הקישורים.. 'ייורוווווווויויייייי: כותרות הקישורים... צביעת הקישורים.... ציפיות מקישורים ... קישורי חוץ 0 קישורים נכנסים 0 קישור לאתרי מנויים ורישום משתמשים.. קישורים לפרסומות ל גיליונות סגנון בדיקת גיליונות הסגנון ב מסגרות (פ6וחפּזת) 7 האם מותר תמיד להשתמש ב-65ח8ז ? אמינות י'יווווווווווווווווווווווויוווויווווווווווווווווווווווויוווווויווווווווווווויווווווווו00500500 92 2 עיצוב ממשק באינטרנט פרק 3: עיצוב ([!כ] יייווווווווווווווווווווווווווווווויווווווווווווווויייוו: 99| כתיבה ל-80/ || קצר את הטקסט 0 עריכה 1 סריקה 1 שפה ברורה 7 חלוקת דפים 12.21 כותרות דפים .2-ו 123 כתיבת כותרות 1 קריאות (שוופו60 ]) 2 תיעוד מקוון 2 מולטימדיה 1 זמן תגובה 13 תמונות 3 הקטנת התמונה... 15 הנפשה 13 רצף במעברים 14 ציון מימדים במעברים 45 הדגמת שינוי לאורך זמן 1 ריבוב תצוגה 1 העשרת מצגות גרפיות 0 המחשת מבנים תלת-מימדיים 0 משיכת תשומת לב 1 וידאו 14 שטפי וידאו מול הורדת קבצי וידאו .50 קול 4:11 ואוו03גוו:.ג:ו.4[ סיוע למשתמשים מוגבלים בשימוש בתוכן מולטימדיה ה גרפיקה תלת-מימדית 0 שימוש גרוע בתלת-מימד 16 מתי להשתמש בתלת-מימד ו ואיכויו.. 90[ מסקנה 1 פרק 4: עיצוב האהתך::::::::::::::ווואוווואוווויוייייייי5.:5..::5.:. 163 הדף הראשי ו 166 מה צריך להיות רוחב הדף? ל רוחב הדף הראשי 1 חסל את מסכי הפתיחה 1 הדף הראשי מול דפים פנימיים .178.5 קישור לעומק (פַחואחו] ק6סכ) 2215ב 179 סביבה וירטואלית - דימויים 0 עגלות קנייה כממשק סטנדרטי 5 ב ב 5 5 55 205 ב שמ כ 18 תוכן העניינים ‏ 3 היכן אני נמצא? 1 מהיכן הגעתי? 0 לאן אני יכול להמשיך מכאן? 1 מבנה האתר 1 רוחב מול עומק :203 המשתמש שולט בניווט 260 עזור למשתמשים לטפל בכמות גדולה של מידע 2 הפחתת עומס הניווט 22 אתרי משנה 222 יכולות חיפוש 22 חיפוש מתקדם 22 דף תוצאות החיפוש 2 תיאורי דפים ומילות מפתח 2 עיצוב תוצאות החיפוש 238 עיצוב | 5:16 246 כתובות 81 ארכיוניות 2 פרסום | 20 תמיכה בכתובות ₪1 ישנות . 201 תוכן שהגיע מהמשתמש 2 ניווט בעזרת יישומון 26 פעולות איטיות 2 מסקנה 2 פרק 5: עיצוב עבור האינטראנט ווווווויאו :263.55 הפרדה בין עיצוב אינטרנט לעיצוב אינטראנט 2 עיצוב אקסטראנט 2 השורה התחתונה, העיצוב והעובד :270 פורטל החברה :276 תחזוקת האינטראנט 2 שלושת מרכיבי התשתית הגדולים: מדריך, חיפוש וחדשות 2 תקני עיצוב באינטראנט 2 הנחיות לכתיבת תקנים 20 הפצת עיצוב האינטראנט לגורמים חיצוניים 2 ניהול גישת ה-60/ של העובדים 2 תקני חומרה 2 ברירות המחדל של הדפדפן יהליפוג יוב גג .1 280 ברירות מחדל של מנועי חיפוש .208 בדיקות משתמשים באינטראנט ב עפ 2 מחקרים בתנאי שדה 2 מסקנה 29 4 עיצוב ממשק באינטרנט פרק 6: אפשרויות נגישות למשתמשים בעלי מגבלות ..........0600 297 6 אחז !66655101 סס/צ :4 208 אפשרויות נגישות חזותיות 02 מאפייני זו 0 מגבלות שמיעה .908 מגבלות דיבור 308.3 מגבלות מוטוריקה עדינה ותנועה 0 מגבלות קוגנטיביות 1 מסקנה: גישה פרגמטית בכל מה שקשור לנגישות .בב ךב פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם .........313 בינלאומיות מול מקומיות ל עיצוב בינלאומי :ה בדיקה בינלאומית :ו 310 אתרים מתורגמים ורב לשוניים .320 בחירת שפה 2 חיפוש רב לשוני 931 הבדלים אזוריים 332 בדיקות משתמש בינלאומיות 0 התגברות על מחסום השפה 0 בכמה מדינות עליך לבצע את הבדיקה? 3 הודה למשתתפי הבדיקה 33 שיטות בדיקה 336 בקר במדינה בעצמך 6 ביצוע בדיקות מרחוק 3 מעבדות שימושיות לבדיקות בינלאומיות 338 ביצוע עצמי של בדיקות 4 מסקנה 5 המגמה לטווח רחוק 0 התקני מידע 53 שדס6/ 05 כ ל במ בבל ל ב 2 ביס בינ מ 5 -כ 20 כבום ש סל כ בש 0 וס ל ל 354 מות דפדפני ה-60/ - 1 רוחב הפס גדל לאיטו .963 דימויי ה-65/ 26 סידור מחדש של מרחב המדיה: נפרדים מהעיתונים 2 מסקנה 76 פרק 9: מסקנה: פשטות העיצוב ב- 0..יאאיייםי:.5 ...379.12 5 חש-6וחסו 50 זמנים טובים או זמנים רעים? 3 נספח: התקליטור המצורף יוווצאווויאוו ייוו ...393.5 אינדקס ב ;1 21 תוכן העניינים ‏ 5 הקדמה "היש הגיון לפרסם ספר שעוסק ב-60/ על גבי נייר?" אני בטוח כי רבים מהקוראים ישאלו את השאלה הזו, ולכן אפתח בתשובה. טעויות אחד מחסרונות הוצאת הספרים הפיסיים הוא שאי אפשר להדפיס מחדש ולהפיץ מיידית את הספר במקרה של עדכון טעויות או חידושים טכנולוגיים. ה-65), לעומת זאת, מאפשרת לנו לספק משוב מיידי, ולכן יצרתי אתר בו אפיץ את התיקונים, בכתובת 8 זר 6.60ו56. טטצ 6 עיצוב ממשק באינטרנט אני מומחה לשימושית (שוווט8פ5ט), ולכן שיקולי לבחור במדיוס הוה התבססו על הדרך הטובה ביותר להשגת המטרה ולא על צו האופנה. כמובן שה-60/ היא מדיוס נהדר (ולכן כתבתי עליה), והיא מתאימה למסמכים קצריס שיש ביניהס קישורים רבים (יש לי דפיס רביס כאלה באתר שלי, ה סס.561. /שואו). ה-60/ אינה מומלצת עבור מסמכים ארוכיס במיוחד האמורים להציג נושא מתפתח. אס אתה רוצה באמת ללמוד על נושא מסוים, עדיין מומלץ לעשות ואת על ידי קריאת מאמר המטפל בנושא לעומק, ונכתב מתוך פרספקטיבה יחידה, מאשר לקפוצ בין כמה רעיונות קצרים וגישות שונות. במיליס אחרות, מדיית הספר עדיין טובה יותר מה-60/ עבור המטרה שרציתי להשיג: לתת לקוראיס להבין את חשיבות נושא השימושיות בעיצוב אתר. כדי שאפסיק לכתוב ספרים, צריכיס להתמלא שלושה תנאיס : %%> מסכי המחשב צריכים להשתפר עד לרמה בה הקריאה ממסכים תהיה מהירה ונעימה כמו קריאה מדף. אני בטוח שתנאי זה יתמלא במחשביס היוקרתייס עד לשנת 2002 ובמחשביס נפוצים יותר עד לשנת 2007, משוס שמסכיס כאלה כבר הודגמו במעבדות. 6% ממשקי הדפדוף ב-69/ חייבים להשתפר עד כדי כך שהניווט ב-65/ יחיה קל כמו דפדוף בדפי ספר. בנושא זה אני ספקן משוס שיצרני הדפדפנים נוטיס להשקיע יותר מאמצים במולטימדיה מיותרת וגימיקים פרסומיים, מאשר בהקלה על סידור ספר לספר מודפס יש את יתרון סרגלי הצד (5106081) וסידור דו- מימדי שאינם קיימים בדף 60), דבר המצריך עדיין גלילה חד ממדית - בדיוק כמו שהמצרים הכירו ואהבו. כשמדובר בספר, ניתן להציב בו הדגמות וכותרות בדרכים אשר תומכות בטקסט בצורה טובה יותר ממה שניתן לעשות ב-60/. אינני יכול לקחת לעצמי את הקרדיט על עיצוב הדפים בספר הזה, אך אני מקווה כי הוא יהיה לך לעזר. הניווט. אך אפילו במצב הנוכחי, אנחנו עשוייס לקבל דפדפניס שימושיים עד שנת 2003. 6% הקוראיס והכותבים חייבים להתאים את עצמם למרחבי מידע לא לינארים, כלומר, לכתוב בדרכיס שעושות שימוש בקישור, ולקרוא תוך תחושת ביטחון שההחלטה היחידה שצריכה להתקבל היא תשובה לשאלה האם צריך להפוך את הדף! שינוי וה יקרה רק לאורך זמן ולאחר הקניית הניסיון והחשיפה לחומר קישורי טוב. לרוע המזל, מדובר בשאלת הביצה והתרנגולת משוס שחומר קישורי טוב לא יופיע עד שכותבי קישוריס (6 דופסץ4) יהפכו למיומניס יותר. אני צופה שכתיבת קישוריס טובה תתחיל להופיע בכמויות גדולות יותר ככל שהרשת ייתתבגריי, לקראת שנת 2001, ויהיה מעבר בלתי הפיך מכותביס מבולבליס שאינס בקיאים ברזי ה-60//, לכאלה היודעיסם לספק את צרכי המשתמשים. ייתכן שארבע שניס לאחר מכן, בשנת 2005, רוב המשתמשים יהיו מנוסיס מספיק כדי לטפל בקישורים. אס נסכס את שלוש הפסקאות האחרונות, נגיע למסקנה כי טכנולוגיית החומרה היא הגורס המגביל בעניין ועלינו לחכות עד שנת 2007 בערך כדי לחזות בחיעלמות הספריס ובהחלפתם במידע מקוון. מדריך לספר זה הספר אותו אתה קורא כעת הוא הראשון מבין שני ספרים בנושא שווו0580 ט6/צ. בחרתי לפרסס שני ספריס משתי סיבות. ראשית, אין תועלת בספר אס אף אחד לא יקרא אותו, וכבר ראיתי יותר מדי עותקיס עבים שצובריס אבק על מדפים מכדי שארצה לכתוב בעצמי אחד כזה. ספר עב-כרס המסביר איך לשרטט תרשימי עוגה (6081715 6ק) ב-|₪%66 מרתיע אנשיס מלפתות אותו. ייתכן שהס רוציס לרכוש את הידע, אך הס לא יקראו אותו. הסיכוי לקריאת שני חלקים קטנים יותר גדול מאשר ספר אחד עבה. שנית, ייתכן שלא כל הקוראיס צריכיס לקרוא את שני הספרים, משוס שכל ספר מתמקד בזווית אחרת של השימושיות ב-60/ (שו|ו0580 פ6\). כשהספר מחולק לחלקים, הוא מתאים יותר לסטודנטיס ולאנשיס אחרים שצריכים רק חלק מהמידע. אין טעס לשלס יותר עבור ספר ענק שאינך צריך את כולו. 2 המדקה‎ 8 עיצוב ממשק באינטרנט שני הספריס תוקפיס את בעיית שווופ058 ח0ו065 ט6/צ משתי זוויות. האחד עוסק בשאלה יימה'י יש באתריס טובים, והשני בשאלה ייכיצדיי לעשות אותם. כולס רוצים תמיד למצוא ישר את הפתרון, ועל כך התמקדתי כאן. ספר זה מסביר את מה שידוע על מאפייני אתריס קלים לשימוש. הקדמה קצרה: תהנה מהפשטות, והתמקד במטרות המשתמשים ולא בעיצוב נוצא. הספר הראשון מכסה את הנושאיס הראשייס בנושא חטו65כ ט6ש (עיצוב ב-60/)): עיצוב דף, עיצוב תוכן ועיצוב ארכיטקטורת האתר המקיפה, תוך כיסוי נושאיס מיוחדיס נוספיס הקשוריס באינטראנט 60ח%78ח1), משתמשים בעלי מגבלות (ראייה, שמיעה), ומשתמשים בינלאומיים. לבסוף, ספר זה מציג מבט כלפי עתיד האינטרנט ופיתוחיס חדשים ב-ט6/ש. הספר השני יכסה את השאלה כיצד ליישם את נושא השימושיות ב-60/ ויסביר את השיטות בהן השתמשו להשגת מה שמוצג כאן בספר הראשון, אותו אתה קורא. קורא חסר סבלנות שרוצה רק לדעת את העובדות יוכל לקרוא אותו. אס תעצב אתרים על פי הכלליס שאני מציג כאן, האתריס שלך יהיו ללא ספק הקליס ביותר לשימוש באינטרנט. אך כדי לעצב אתריס טובים באמת עליך להוסיף נקודות ספציפיות לפרויקט שלך, ללקוחות שלך ולצרכיהם. אין מנוס מלאסוף נתוני שימושיות נוספים מהפרויקט שלך. הדרך לעשות את מוסברת בספר השני. ח56|סו פס386 הוחזסזו!68 ,צו6ו/ חובזחטסוו התקליטור המצורף התקליטור המצורף לספר וה מכיל קטלוג |ואז₪, פרקיס לדוגמה ומספר תוכנות עזר שימושיות. הקבציס הרלוונטייס לספר זה מצוייסם תחת התיקיה 5 .)0 :א (החלף את האות א באות הכונן). בקובצ |וחשח./וס שבתיקיה זו נמצא מנגנון בפייה בכל התמונות המופיעות בספר - בצבע. בספר התמונות מופיעות בשחור/לבן ולעיתיס יש לחזות בתמונה הצבעונית כדי להפיק את מלוא התועלת מעצות המחבר. ראה הנחיות מפורטות יותר בנספח התקליטור המצורף. מבוא: ‏ טימוטיות ב-60צ - לעום מה? השימושיות שולטת ב-65/. אם הלקוח לא יצליח למצוא את המוצר, הוא לא יקנה אותו. ה-65/ היא הסביבה האולטימטיבית להענקת תחושת כוח ללקוח. לקוח שיכול ללחוץ על העכבר יכול להחליט הכל. כל כך קל לעבור למקום אחר. כל המתחרים שבעולם נמצאים במרחק לחיצת עכבר אחת. פרק 1: שימושיות ב-60/] לשם מה? ‏ 9 השימושיות תופסת חשיבות רבה יותר בכלכלת האינטרנט מאשר בעבר. 0 עיצוב ממשק באינטרנט עס כעשרה מליון אתרי 60/ בינואר 2000 (והצפי מדבר על 25 מליון עד סוף השנה ו-100 מליון עד שנת 2), לש למשתמשים יותר אפשרויות מבעבר. מדוע שהס יבזבוו את זּמנס על משהו מבלבל, איטי, או שאינו עונה על צרכיהם! כתוצאה מכמות האפשרויות המדהימה ומהיכולת לדלג למקוס אחר בקלות, משתמשי ה-ט6/ נוטיס לחוסר סבלנות ולהתעקשות על הנאה מיידית. אס הס אינס יודעים כיצד להשתמש באתר 80/ אחרי דקה בערך, הם יגיעו למסקנה שלא כדאי להס לבזבז עליו את ומנס ויעזבו. השימושיות (ווו0580) תופסת חשיבות רבה יותר בכלכלת האינטרנט מאשר בעבר. בתהליך פיתוח מוצר פיסי מסורתי, הלקוחות לא יכלו לעבור את חוויית השימושיות של המוצר לפני שהם קנו אותו. נניח, לדוגמה, שאתה קונה מכשיר וידאו ומגלה שקשה לכוון בו את השעון, ומשוס כך אינך מצליח לתכנת את זמן ההקלטה של התוכנית החביבה עליך. העניין אבוד - היצרן כבר צוחק כל הדרך אל הבנק. בתעשיית התוכנה יש קצת יותר מוטיבציה מאשר בתעשיית המוצריס הפיסיים בשיפור השימושיות. כשמדובר בתוכנה, יש למשתמשים לרוב גישה למרכזי תמיכה אליהס הס יכוליסם להתקשר כדי לקבל עזרה בפתרון בעיות. שיחות תמיכה אלו יקרות מאוד (ההערכה נעה בין 530 ל-%100 לשיחה, על פי מורכבות התוכנה), ורוב השיחות מתקבלות כתוצאה מתכנון שימושיות גרוע של התוכנה. לרוע המזל, תקציב הפעלת מרכז התמיכה אינו קשור לתקציב פיתוח השימושיות של התוכנה, ולכן אין למנהלי הפיתוח מוטיבציה לפתח ממשקי משתמש מצוינים. ההטבות שלהס מתקבלות כתוצאה מהשלמת המוצר בזמן, ולא מחסכון בתקציב השנה הבאה של מחלקת התמיכה. 0 משנה את התמונה. כיוס, המשתמשים חוויס את יכולתס להשתמש באתר לפני שהס מתתייבים להשתמש בו ולפני שהוציאו כסף על רכישות פוטנציאליות. המשוואה פשוטת: % כשמדובר בעיצוב מוצרים ותוכנה, הלקוחות משלמיסם קודם, וחוויס את יכולתס להשתמש במוצר אחר כך. התחרות קשה ב-60/), התחרות אינה מוגבלת לחברות בתחום שלך. כשיש מליוני אתרים אחרים, אתה מתחרה על זמנו ותשומת ליבו של המשתמש. רף הציפיות של משתמשי ס6/ נקבע לפי האתרים אשר להם השימושיות הטובה ביותר. הלך המחשבה הוא "אם אני יכול לקבל את השירות המצוין הזה כשאני קונה ספר ב-%5, מדוע אינני יכול לקבל שירות מקוון טוב כשאני מוציא עליכם אלפי דולרים?". זו, דרך אגב, שאלה מצוינת. 6% ב-ט6), המשתמשים חוויס את יכולת השימוש קודס כל ומשלמים אחר כך. לכן ברור מאוד מדוע השימושיות חשובה יותר בעיצוב ב-60/. אמנות מול הנדסה יש שתי גישות בסיסיות לעיצוב: האידיאל האמנותי של הביטוי העצמי והאידיאל ההנדסי של פתרון בעיה עבור לקוח. ספר זה נוגע בצד ההנדסי. אני מודה שיש צורך באמנות, הנאה והרגשה נעימה בזמן הגלישה ב-60/, אך אני מאמין כי המטרה העיקרית של רוב הפרויקטיס ב-60/ היא להקל על לקוחות בביצוע משימות בעלות ערך. אני מתאר גישה שיטתית לעיצוב ס6/ו. כל אחד יכול להשתמש בשיטות המוצגות כדי לגלות את צרכי המשתמשים והקשייס שבהם עשויים להיתקל בעת שימוש באתר. כאשר מתייחסיסם לפרויקט ס6/ כאל פרויקט פיתוח תוכנה, קל יותר לעמוד בלוח הזמניס ולהבטיח את איכות האתר. ספציפית, יישוס שיטות הנדסיות בנושא שימושיות (שווופ058) שיובנה (חטווטם) לתוך פרויקט ה- פ6\ שלך, יביא לשיפור עקבי של האתר, תוך שמירה על העיצוב הראשוני ועל עיצוביםס חדשים שיבואו. בספר זה תמצא כללים רבים, עקרונות, קוויס מנחיס ושיטות. כולס נובעיס מניסיון וידע מה באמת עובד כשמשתמשיס אנושיים מנסיס לבצע משימות אמיתיות ב-60/). מאז תחילת ימי ה-60/, צפיתי במאות משתמשיס שגלשו במאות רבות של אתריס שוניס. ואת בנוסף, כמובן, לאלפי משתמשיסם אחריס בסוגיס רביס של מערכות מידע מקוונות מאז תחילת שנות השמוניס. אינני טוען כי יש ליישס כל אחת מהנחיותי בכל פרויקט. המשתמש המקצועי והמנוסה יודע מתי ללכת על פי הכללים, ומתי לכופף כלל או אפילו להתעלם ממנו. אתה חייב לדעת את החוקים לפני שתוכל להחליט אם כדאי לשפר פרויקט מסויס על ידי סטייה מכמה מהם. בנוסף, ישנו כלל מנחה ליייובצאיס מן הכלליי האומר כי עליך לעשות זאת רק כשיש לך סיבה טובה לכך. פרק 1: שימושיות ב-0/ לשם מה? ‏ 11 אודות הדוגמאות הספר מכיל תצוגות מסך (567660570%5) רבות של עיצובי פ6/ אמיתיים, והדוגמאות וההערות מתייחסות לאתרים כפי שהם נראו ביום בו ביקרתי בהם. אספתי דוגמאות ותצוגות מסך במשך מספר שנים, ולכן רוב האתרים הללו השתנו - בתקווה שהשינוי היה לטובה - בזמן שאתה קורא את הספר. אם תגלוש לאחד האתרים הנזכרים בספר ותמצא שהוא השתנה, אין פירוש הדבר שהדוגמה שלי אינה תקפה יותר. הסיבה לנתינת דוגמאות היא לא כדי למתוח ביקורת או כדי לקטול אתרים מסוימים, חברות או מעצבים. לכל העיצובים יש את הצדדים הטובים והפחות טובים, ולפעמים אני מדגיש חלק טוב של אתר גרוע או חלק גרוע של אתר טוב. הדוגמאות מיועדות להדגים את העקרונות והשיטות לעיצוב ב-60/ו, משום שקשה להבין את התיאוריה ללא דוגמאות ספציפיות. 12 עיצוב ממשק באינטרנט לגישה ההנדסית יש יתרון עיקרי אחד: כשאתה בספק אס לבחור בעיצוב זה או אחר, אתה יכול להציב שאלה ניסיונית שניתן לענות עליה על ידי איסוף נתוניס אמיתייס מהלקוחות שלך. האס הגולשיס יכוליס למצוא מידע מהר יותר בעזרת עיצוב אי או עיצוב בי האס המשתמשים נותנים דרוג גבוה יותר לעיצוב אי או לעיצוב בי כשהס ממלאיס שאלון שביעות רצון: בחר בעיצוב שיקבל את הדירוג הגבוה ביותר ולא את ה שאתה מחבב אישית. כמובן שהשיטה המדעית יכולה להביא אותך עד לנקודה זו בלבד. אתה עדיין צריך את ההשראה והיצירתיות בעיצוב. ישנה שיטת שימושיות הנדסית אחת בה כל אחד יכול להשתמש, המסוגלת להצביע על בעיית משתמשים לנווט באתר, או אס כולס מתעלמיס מלחצן החיפוש בדף הראשי שלך. כשאתה לוקח את התוצאות הללו בחשבון, ומוצא סכמת ניווט טובה יותר, או מציב טוב יותר את לחצן החיפוש - זה אינו רק עניין של ביצוע סדרת צעדיס קלה. צריכה להיות לך גם השראת עיצוב טובה. עס זאת, וכור כי המצאות וחידושיס מורכביס מ-10% של השראה ו-90% של עבודה קשה. הדרך להשגת רעיונות עיצוב מתאימים (ולא רק רעיונות לעיצוביס מדליקיס שאף אחד לא יעשה בהס שימוש) היא לצפות במשתמשים ולראות מה הס אוהבים, מה הס מוצאיס בקלות, והיכן הם מתקשים. הדרך להשיג רעיונות עיצוב טוביס היא לרוב לעקוב אחר שיטות הנדסת שימושיות (ץ8ס|00סר160 בַההחססחופַת= 580 ולהפניס את תגובות המשתמשים. השימושיות ב-60\ משתנה בקצב נמוך מזה של טכנולוגיית ה-60/, ולכן השיטות והתפיסות אותן תלמד בספר זה ישמשו אותך עוד שניס רבות, אפילו אם יישוס העיצוב שלך ישתנה במידה רבה. רביס מהעקרונות אותם אני מציג בספר זה גובשו ממחקר שערכתי בעצמי וכן ממחקריס של אחריס בנושא קישורים (פאחוו) ומערכות תצוגה אינטראקטיביות אחרות. אני, אישית, ביצעתי את פרויקט הקישוריס הראשון שלי ב-1984, אך אחריס היו בתחוס כבר משנות השישים. רבות מהתוצאות הללו עמדו במבחן הזמן. כאשר השיטות של אמצע שנות השמוניס המשיכו להיות טובות גס בסוף שנות התשעים, יש סיבה טובה להאמין כי הן ימשיכו להיות טובות במאה ה-21. קריאה לפעולה אם תקרא את הספר הזה ותניח אותו בצד - נכשלתי. כמובן, אם תניח אותו בצד בלי שאפילו תקרא אותו, הרי שנכשלתי כישלון מוחלט, אך אני בטוח שהספר קור מספיק כדי שתעיף עליו לפחות מבט לפני שתשים אותו על המדף. מטרת ספר זה היא לשנות את דרך הפעולה שלך. אני רוצה שתהיה מסוגל לתת למשתמשים שלך שירות טוב אחרי שתקרא את הספר שלי. ישנס כל כך הרבה דרכי פעולה כדי להקל על חיי משתמשי ה-60/. ספר זה מלא בשיטות בהן ניתן להשתמש בכמעט כל שלב בפרויקט ט6/, כדי לשפר את חוויית המשתמש במידה ניכרת. אין תירוצ לאי שימוש בשיטות אלו משוס שרבות מהן זולות מאוד. אין גס תירוצ לכך שלא תתכנן לכלול כמה שיטות שימושיות בפרויקט עיצוב ה-65/ הבא שלך, מפני שרבות מהשיטות הללו קלות ללמידה. לאחר שתקרא את הספר, אתה מוכן לפעולה. גס בפרויקט עליו אתה עובד כרגע תוכל ליישס שיטות הנסקרות בספר, ורק השימוש בהן יוכל לשפר את האתר שלך. הקריאה בנושא לא תהפוך את האתר שלך לטוב יותר. רק העש*יה תועיל. וכור, אתה יכול לעשות זאת. כל אחד יכול לעשות זאת. אך רוב מעצבי ה-68/ מתעלמים מנושא השימושיות בצורה בוטה, ומעצביס להנאתס האישית (או גרוע מכך, להנאת הבוס), במקוס לנסות ולספק את צרכי המשתמשים. אלו חדשות טובות עבורך משוס שספר זהו הנשק הסודי שלך להפיכת האתר לטוב יותר מ-90% מהאתרים באינטרנט -משוס ש-90% מהמעצבים לא יודעיס על הטכניקות אותן תלמד (או לא טורחים להשתמש בהן). מה אין בספר ספר זה אינו עוסק ב- |וא1 או כיצד לשלב תמונה או בטכנולוגיות ט6) אחרות. ישנס ספריס רביס וטוביס שילמדו אותך כיצד לפתח אתרי טפו, ולכן אני אפילו לא מנסה לכתוב על כך. ככל הנראה, יהיה עליך לרכוש שני ספרים: ספר זה, שילמד אותך מה לעשות עס האתר שלך וספר ביצוע שינחה אותך כיצד לעצב ברשת. אני ממליצ על קריאת שני הספריס בסדר אותו ציינתי. עליך לקרוא פרק 1: שימושיות ב-65// לשם מה? ‏ 13 שימושיות גרועה פירושה מיעוט לקוחות בכלכלת הרשת, האתר הופך לממשק המשתמש הראשי של החברה. ואכן, בחברות מסחר אלקטרוני האתר הוא החברה. ממשק המשתמש הופך לחומר השיווק, חזית החנות, פנים החנות, צוות המכירות, ותמיכה לאחר קנייה, כולם בחבילה אחת. במקרים רבים, האתר הופך אפילו למוצר עצמו. לפיכך, שימושיות גרועה משולה לחנות הממוקמת בקומה ה-17 (כך שאף אחד לא יכול למצוא אותה), שפתוחה רק בין שלוש לארבע אחרי הצהרים (כך שאף אחד לא יכול להיכנס), ואין בה כלום מלבד איש מכירות קודר שלא מדבר עם הלקוחות (כך שהאורחים לא יכולים לקנות יותר מדי מוצרים). 4 עיצוב ממשק באינטרנט קודס כל את הספר שלי, משוס שאתה צריך להתחיל את פרויקט ה-60/ שלך (או לשפר את זה שכבר פיתחת) בידיעה מהו רצון הלקוחות שלך ומהן הדרכיס הטובות לעיצוב אתר שיעשה זאת עבורס. מסוכן לקרוא ספריס העוסקים ב- |וזדו:, 18/55610%, 5, ח35!ם, 38 או !אא לפני ספר זה. רוב האנשיס אינס יכולים לחכות ומעונייניס לבנות דפים כמה שיותר מהר ולכן הס מתחילים בלימוד 11 ולא בקריאת ספר זה. ולרוב, דפיס ואתרים אלו חסרי שימוש אס הס בנוייס מתוך הבנת ‏ 11 או ח85!= בלי הבנה מתאימה של עקרונות השימושיות וצרכי המשתמש. ספר זה אינו עוסק באסטרטגיית עסקים באינטרנט, למרות שישנן כמה החלטות אסטרטגיות המתוארות בו. אין לי דרך לספר לך כיצד להפעיל את העסק שלך באינטרנט. עלי לדעת את הגורמיס הספציפיים הקשוריס בכל תעשיה ובכל חברה כדי לעשות זאת. עס ואת, הספר כן מתמקד ברעיון אסטרטגי הקשור לתמונה הגדולה: הצב את צרכי הלקוחות שלך במרכו אסטרטגיית ה-ט6/ שלך. האסטרטגיות הנותרות ישתנו מחברה לחברה, אך אני יכול להבטיח לך כי לכל חברה הדואגת לאתר קל לשימוש יש יתרון על מתחריה, ולא חשוב באיזו תעשיה מדובר. מדוע כולם מעצבים אתרי ספ\ בצורה לא נכונה? ספר וה מבוסס על סקר בדיקות שימושיות שנערך בקרב 400 משתמשים מרקע שונה, המשתמשים במספר גדול של אתרי פ6ש שוניס במשך שש השנים האחרונות. השתמשתי גס בלקחים שהפקתי מ- 10 השניס בהן עבדתי בנושא השימושיות, מערכות מידע מקוונות וקישוריס בתקופה שלפני ה-ס6/. התחלתי לעצב ב-60/ בשנת 1994, ומאז עשיתי שגיאות רבות. בתחילה חשבתי ששגיאות אלו היו פשוט תוצאה של המגבלות שלי, אך כשהמשכתי לראות את רוב החברות האחרות עושות את אותן השגיאות שעשיתי ב-1994 וב-1995, הגעתי למסקנה שבעיות אלו בלתי נמנעות בפרויקט ס6\ ראשון של חברה אלא אס ננקטיס צעדי מניעה מפורשים. אחת מהמטרות הראשיות של הספר הזה היא לעזור לאחריס להימנע מלעשות את השגיאות הללו שוב ושוב, שהרי אלו שאינס יודעיס את החיסטוריה נדונו לחזור עליה. אס תדע אותה, תוכל לעשות דבריס טובים יותר. השגיאות הנפוצות בכל רמות העיצוב ב-80/: 6% המודל העסקי: התייחסות ל-פ6ש כאל דף פרסומי, במקוס להתייחס אליה כאל שינוי מהותי שישנה את הדרך בה אנו עושיס עסקיס בכלכלה החדשה. > ניהול פרויקט: ניהול פרויקט ס6\ כאילו היה פרויקט מסורתי. דבר זה מוביל לעיצוב המתמקד בפניס האתר ולממשק משתמש לא עקבי. במקוס זּאת, על אתר פ6ש לחיות מנוהל כפרויקט ללקוח אחד עס ממשק משתמש אחיד. > ארכיטקטורת מידע: בניית האתר כך שישקף את המבנה הארגוני של החברה. במקוס זאת, על האתר להיות בנוי כך שישקף את משימות המשתמשיסם ואת זווית מרחב המידע שלהס. > עיצוב דף: יצירת דפים שנראים נהדר וגורמים להרגשה חיובית כשהם מודגמיס בתוך החברה. המצגות הפנימיות במסגרת החברה אינן סובלות מהשהיות זמן התגובה, שהן הבעיה העיקרית של השימושיות ב-ס6/. כמו כן, המצגת אינה חשופה לקשייס שמשתמש חדש עשוי להיתקל בהס במציאת רכיבי הדף השונים ובהבנתם. במקוס וּאת, עצב את האתר עבור המשתמשים, אפילו אס המצגות שלך ייראו פחות יימדליקות'י. *> כתיבת תוכן: כתיבה באותו הסגנון הלינארי בו כתבת תמיד. במקום וּאת, אל את עצמך לכתוב בסגנון החדש המותאם במיוחד עבור הקוראים המקווניסם, שלעיתים קרובות רק סורקים את הטקסט וזקוקים לדפים קצרים מאוד עס מידע משני המקושר לדפים אחרים. 6% אסטרטגיית קישור: התייחסות לאתר שלך כאילו הוא הדבר היחיד שחשוב, ללא קישוריס מתאימיס לאתרים אחרים, וללא נקודות כניסה מעוצבות היטב עבור אתריס אחריס אשר ירצו ליצור קישור אליך. חברות רבות לא משתמשות פרק 1: שימושיות ב-0/ לשם מה? ‏ 15 6 עיצוב ממשק באינטרנט בקישוריס מתאימים אפילו כשהן מזכירות את האתר שלהן עצמן בפרסומות שלהן. במקוס ואת, וכור כי הקישור הוא בסיס ה-ט6\ ואף אתר איננו אי בודד. בכל אחד מהמקריס הללו, מתברר כי הדרך הטבעית בה מעצביס מבצעים פרויקטי פס/, ומסתמכים על ניסיונס האישי שלא קשור ל-ס6\ - שגויה. ה-80/ הוא מדיוס חדש הדורש גישה חדשה, כפי שמוסבר בספר זה. עיצוב דף עיצוב הדף הוא החלק המתגלה באופן המיידי ביותר בעיצוב 60/). בטכנולוגיית הדפדפנים הנוכחית, המשתמשים רואים דף אחד בזמן נתון (או מקסימום שניים-שלושה דפים אם יש להם מסך גדול והם פותחים כמה חלונות). פרק זה נוגע בשימושיות התצוגה של אתר 0 : מה יש בכל דף? פרק 2: עיצוב דף ‏ 17 (בעמוד הבא) כשמבקרים באתר 0655ק3, רוב שטח המסך מוקצה למשהו אחר שאינו שייך לתוכן שבגללו הגיע הגולש לאתר. מתוך 0 פהפיקסלים שבתצוגת 600א800, רק % מוקצים לתוכן שמעניין את המשתמש (תוכן זה מצוין ב- 1 - ירוק במפה התחתונה). בנוסף, % מהפיקסלים מוקצים למערכת ההפעלה ולפקדי הדפדפן (4 - כחול), 23% מוקצים לניווט באתר (3 - צהוב), ו-10% מוקצים לפרסומות (2 - אדום). 16% הנותרים אינם בשימוש (5 - לבן) משום שמבנה דף זה אינו מאפשר סידור מחדש כך שהוא יתאים לחלון. 8 עיצוב ממשק באינטרנט על אף מה הנאמר בפתיחה לפרק, עיצוב האתר חשוב יותר כשמדובר בשימושיות, משוס שהמשתמשיס לא יתקרבו לדפיס הנכוניס, אלא אס כן האתר בנוי לפי צרכיהס, ויש בו סכמת ניווט המסייעת להס למצוא את מה שהס מחפשים. נושאיס אלו, הקשוריס בעיצוב האתר, וכן עיצוב התוכן הממשי בכל דף מתואריס בפרק מתקדם יותר. נכסי מסך התוכן השולט בדפי ט6\ צריך להיות זה שיעניין את המשתמש. לרוע המזל, אנו רואיס אתריס רביס המבזבזיס יותר שטח מסך על ניווט, מאשר על המידע שגרס למשתמש להגיע לאתר. עזרי הניווט הכרחייס אך הם לא יעד בפני עצמו, ולכן עליהס להיות מצומצמיסם עד כמה שניתן. כתרגיל מעניין, נסה לתחוס את האזוריס הראשייס בדף ט6/, ומדוד (בפיקסליס) את % השטתחיס שהוקצו למטרות שונות. הדוגמאות שלי בתמונות הבאות כוללות שטח בו משתמשיס הדפדפן ומערכת ההפעלה. למרות שעל פי רוב מעצבי ה-65/ אינס יכוליס להשפיע על השטח הזה, זה לא מעניין את המשתמשים. כל מה שהם יודעים זה שהסם שילמו (במונחי כסף, ומן) עבור כמות של פיקסליס שמותקניס במסך שלהם, ורק 20% ו- 14% בהתאמה מפיקסליס אלה משמשים להצגת התוכן שהס רוציס לראות. כמו בכל תצוגה, שטח לבן (665560866וח//) אינו בהכרת חסר שימוש, ותהיה זו טעות לעצב דפים דחוסיס מדי. שטח לבן יכול להנחות את העין ולעזור למשתמשים להבין את צורת קיבוץ המידע באתר. אס אתה צריך לבחור בין הפרדת שני מקטעי תוכן שוניס על ידי קו עבה או על ידי שטח לבן, מומלצ (לרוב) להשתמש בשטח הלבן, שגס דורש לרוב פחות זמן להורדת הדף. 6 - 41135 6ו301ז6)ח] !651טו0קבּ א - 46 זס)בסוחטוחוחס 0‏ 0 ושע 56% 6ן] ₪( ₪ 4 > 2 38 3 ₪ | סו | ש56000 | חק | ₪006 56800 | 6תסה] | 46080 000₪00]- 8806 חו/8 1 3ו=600ז4?50חו]. בו חופ-וס/וחסס.651גוסקברח.צשאואי/ / :כזזר | :1615086 4% 8 )א 6[ ופא 1 פטסס 4 ושחופוחן ₪ | - 5 דג 6צד6 אדא - א-6צן40% | ה12% |ההופפמס 602077006 1=40631ווו08חו]. בו | %% א חס )הפוהוססם]| 7 77 | | סז 50 )חומ ו ו301ז6)ח! ]| ו - לד ד דצו 2 / - 651 0;ה א - | 5 | 10109656 01 668מוק | 6660 אצטוטי עס סט 60% = 646₪065מנת 01 186 96160 ו 5 וס . 1.5ז 7 גוו 6 גוג -() גל : 0 4 9 0 ₪ | החמצ 5 מש ה ומת 68 בש 10 60 - - - - - מסוופטגוטק -] - - - - וט -] שנועעסםט א סגסספ מו - ] 60 .8000056 ./ע/ע/ץ פרק 2: עיצוב דף ‏ 19 עסשחו/] 08%85ע8] 60 עוהוע ₪05 שו] 5 פעו187861ח! !1800651 % + 8-68 ₪ 98 9 (| 5 5003166 6הָ" ]3‏ 3%0/1%65] 0645 |ו13] ה 568"0‏ 0000 ת61"65ק ‏ הט 00000 ₪06 צצצצוא טא צא - 5 דגא 6צ/ד6 א דא - א-6צן20% | 12% |ההופחס .6 15 א561!6א ||066 11618 2[10%)-צספונסכן8 ענו ]1פחר 16896 וו |8ש8! וחסס? 3 חס א6]!6% ה6חף 4ח3 066 56|865 1000 //00ה186 (-) -ה1 2000 6ח3 ק13] ₪668 (66 132 6 ה866ה 6 ; 6וח )09 / ש פָפִ % פחסו!קס קאוח 7 זחוס | פוש 2900 0-0 וזכ 5ח0ו801זו וו0ז90 5 עו זפ אסו|₪ - פסחוב] |וגחמופ ,3 זס הסבחס0.] ח! 3007855 ח3 ה 60 שפח חס .םקסזטם ח! 37%5 רה ח3| ₪ 60 שיסת זס | |:06ב 855/0|368ח₪51 6 הסח 801 הס 5975860ח007655/1 4 חסטחס 1 ושוס | ח וט סז /9%368 81 שן2 * 00 | . 503085 0מס(ת/) ל מ!לסמוש 3/30/3808 ץ/חס 06סס/ 25 % 601 .8000056 ./ע/ע/ץ 0 עיצוב ממשק באינטרנט - 5 דג ד 3 דא - א-0צן26% | הצה4 9 |88! וח0ס? 8 0 581665 156 3 ח6 6%]₪ ה06 4ח3 06 + 5 1000 //0ח188 (-7) 1 ה2007 תג ק183 0 9 5 6 6!ח )פטס > פחסווסס קה 6 [ וחזס סחוטוזס עדת אוסושסוכן | 5חסו!60זו זר %סו61 - פסחום |נחסופ ,630303 זס הסשת ] חן 3007855 ח3 ₪0 60 שיפ חס .=קסזטם ח! 3145 הח ח3! בח 60 שפח זס 31| 0|368 /855ה|₪₪5 6 ה60הַת11"ו8 :000 %6758ה4007855/1 יי ישוס סק /95359 01 210 * תס וי (5%!] רחס 60 58|50% ,שפ) 5 ) ל ל 60 .8000056 ./ע/ע/ץ < ז65ש0קה: 056 551865 0 18085 01 1 03180 6זו5ח8 זס) 80 086% 5538 זט אח| 56|66 ] 855ח|5ש5 ,41.5 )0 5חסוסק 1 ת6חִָוזעְק₪0 8353 הטסו בצטא [] שעפטרת טפט ₪ ! 530% [] (3) ₪ בהוחום 1 503 ח רה ה|%843ח5 ה 038 ₪530 [ך] 8 [] 5530 חח 5 ₪ 5 [ ] חס +50 הבּזך 5 שפצ ך] |החספזטס [ שיו | ו וש 60 דסא 00 פוסם עו 0 ₪ 06 עו פָּזם הוגתו פמססספזום הַמוצחם 35 80קו|בחספזפק 55 מב ץסם|פהחספד שופ זט סח כ מב סד 0 ל שיד פצויום ?7 כסם 06ב // 5 סחפוו מססבהחפ!ח1 55טזם פרק 2: עיצוב דף ‏ 21 (בעמודים הקודמים) הצגת 3% על מסך גדול יותר תגרום גם היא לניצול רע של השטח. מתוך שטח פיקסלים של 1024א700, רק 14% מוקצים לתוכן (מצוין ב- 1 - ירוק במפה השמאלית). 16%, שטח, מקובל יותר, אך עדיין גדול מדי, מוקצים למערכת ההפעלה ולפקדי הדפדפן (4 - כחול), השטח הגדול ביותר של 51% מוקצה לניווט באתר (3 - צהוב), ושטח מתקבל על הדעת של 6% מוקצה לפרסומות. השטח הנותר, %, אינו בשימוש (5 - לבן). (בעמוד הבא) תצוגות המסך הקודמות של אתר 180065 נלקחו ב-1997. אחרי שהצגתי את הדפים הללו שנתיים בהרצאות ברחבי העולם, קיוויתי שהאתר יעוצב מחדש. הוא אכן עבר שינוי, אך לא לטובה, אם נתייחס לתוכן המעניין את המשתמש. בשנת 9, רק 15% מהפיקסלים, מתוך 6421014 פיקסלים שהוקצו לעיצוב הנוכחי היו בנושא התוכן. העיצוב החדש מציג סוג חדש של "זיהום פרסומות" בצורת לחצנים מיוחדים המוסיפים רשימות מיפוי של חברות נבחרות. זוהי תוספת שאינה הכרחית לאף אחד המטייל בלונדון לדעת דווקא את מיקומו של ה-5'ץחח6כ הקרוב או חח1 60וזו8=. התכונה החדשה שהיא כן שימושית, היא היכולת להשתמש ב-05ב6)!!3וט0 כדי להגיע למיקום נמל התעופה (למרות שכדאי להפוך את הית'רו לברירת המחדל של שדות התעופה כשמציגים מפת כתובות בלונדון). 2 עיצוב ממשק באינטרנט אינני מתייחס לשטח לבן (650866פוח/) כשטח מבוזבז כשהוא מופיע כחלק מעיצוב התוכן או עיצוב הניווט, אך הדוגמאות המוצגות כאן מראות כי ישנו גס שטח לבן שאינו מוצג כתוצאה משיקול כלשהו הקשור לעיצוב. הוא פשוט נמצא שס משום שהדף אינו מתאיס את עצמו לחלון הזמין. אי אפשר להימנע מכמות מסוימת של שטח לבן ברוב העיצובים, משוס שכמעט בלתי אפשרי ליצור תמיד דף שייראה כריבוע מושלס בתוך דפדפן המשתמש. לרוב, יישארו כמה חורים (לבנים). ככלל, התוכן צריך לתפוס לפחות מחצית מעיצוב הדף, ומומלצ להשתמש אפילו ב-80%. הניווט אמור לתפוס פחות מ-20% מהשטח בדפי היעד, למרות שאפשרויות הניווט עשויות לתפוס חלקים גדוליס יותר מהדף הראשי ובדפי ניווט אמצעיים. מזווית השימושיות, הדבר הטוב ביותר הוא להימנע מפרסומות. אס אתה חייב להציג פרסומות, עליך להחשיב אותן כחלק נלווה לדף, כמו אפשרויות הניווט. משמעות הדבר היא שיהיה עליך להקטין את עיצוב הניווט. עקרון כללי לכל עיצוב ממשק משתמש הוא לעבור על כל רכיבי העיצוב שלך ולהסיר אחד מהס בכל פעם. אס העיצוב טוב ללא רכיב עיצוב מסוים, היפטר מהרכיב. הפשטות (שוסו|סוחו5) תמיד מנצחת את המורכבות (עוא6!סו60), במיוחד ב-60/, שבה כל חיסכון ביימשקליי הדף, פירושו קיצור זמןו ההורדה של הדף (ואפילו עס זה בא לידי ביטוי במספר מילי-שניות בודדות). ב-60/, אין אפשרות לחזות מהו גודל המסך ("15, "17 וכדומה) של המשתמש ואיזה גודל חלון ישמש להצגת הדף (8|5א80001א600, או כל מספר אחר). בעתיד, יתבצע דו-שיח מפורט בין השרתים לדפדפניס כדי להביא לפריסה חכמה יותר של התוכן בהתחשב במאפייני המסך הספציפי עליו העמודים אמוריס להיות מוצגיס. לדוגמה, התמונות יוקטנו אס הן מיועדות להצגה על מסך קטן. בנוסף, ניתן יהיה לשלוח גיליון סגנון (5860 5%/16) עס סידור צפוף יותר כשמדובר במסך קטן, וגיליון סגנוו רחב יותר כששטח התצוגה הזמין גדול יותר. נכון לעכשיו, תחזיות אלו לתוכן מותאם נמצאות עדיין בגדר תקווה לעתיד, ויש להשתמש בעיצוב דף יחיד כדי לעבוד עס כל התקני התצוגה השוניס. 1006 65|סטם" אע אשת 6 | 0-ו ו 0 וסט 508800 | פחס ]1‏ 8065 | קספ -7 קגוו | 6 | |פטהּודך | |פעגּזך | 0631 | בוותי זו 65 ברצין 6נו 8 עו פקהו 4 30 לת פחווהס !שסא צוסקה 1 56816 ₪ ו סז פמפווסטזו סאת וסאם אסאס ו דעצ שסהאת אסדסאו וחטם :55מהססת חסס! ע 36| 67 | חס 2 ₪ זח 60 67 | !הסט > | !]א קה טחואסוו) ח0ו50ופ!ח| / 3001655 פס הסוסה פסתוצסזק/518)6 שו ך₪ חסטחס ]| עזותוס) ₪006 |508ס0 / ק|2 / = [ /[ פוא סז 400 | ₪0 אופאן ?אוו | 4|טוסח5 חסחטם חסוחור 5 6|1606 3 5!ח1 01 קפ 3 עו בי חי 5 . : . :עו 15 ב 50601 0 : הי -אן ך 4 | 0 2 ו 5 | ו80 :עו [החסוזהחזט)ח] חבּ ]5₪|60 ך פסתם!זסתופן | זס|סט שח 26ו5 קבוח 526011 -‏ 26ות0ס51ט:) קבוח 5וחז זחחץ - 1 30 3% סז קב טבּסוחעוסם - | 63!חעס םש קב 5וח1 3 - | |והחו- :)זסקזוה חהּ 58]601 טע חס קצוה 5306 - | פצב תפפורה ] ב (ץ|חס 6קסזט₪/5!) 651 ז6זוז| זס 665הו 1 ]| 01 665ה! א6וווכו 0 . קט/! 0316ק!! חס אסוו0 0ח3 /חִסהָ6ז03 3 58|601 6טסוחפח / 500 10 5חסחפ חס אסווס . קוח 108 חס (5)ח0וז003! 106 טס | 7[ | :מסו סבו = | מצתה הוה > 6016 | ] 15 5 חבט 7] אלע - 6 ו פממום 7] סוק <ן מטובסטטם -] | | 5%שו ו1ם /0א | | כםו) מובנקנו | |פמכב|0 609994 5 שוכ ו 5 0161 ו :1 3 0 אסוזאודפפס 1 = ]- ו סה וה]/1]0 = 5080 -- 8805 ] 03]85 300 0700185 855ח2₪51 -- רפפ | 105 קט | קות5פפוה₪/ 58 | 083|5 |פטבזד | 088 |פטבזד | 088 0 |003] | 5פפ/ פחווחט | 5הסעספחום בהוטחם | חס . סח| , וחסס. 0851 קפ | 5חסווח0:) חב 05ח401108/76! זהמהץ 0 | = | 85 | 05 1301ח0 | 805855 זס1 7 שחוסומו | 7 |[ | 601 .8000056 ./ע/ע/ץ - פרק 2: עיצוב דף 23 הו פא דד | 1 הַחו(,881 הַח286-+05ק ת| פ6טותחה +הסוחפוהי 5 שש |000 %5+8|35 %פאססח פסתסת 815 .0.9 |טאתשטסק 0 יווריב ו בע בנווה ד אסודוס" דאפד ] א הא *אוז =סאו=ודאס 9 ? מל הפפאוו ד חס , , % . זוב .000 [מתספיו6ן .סז חזט)ח! חם שפח 260)|ההספזסכן זטסע זס? פזסח %שו!6 0 שו 007 54 00 אססתפאן / 0 5 תוא | ₪ | אד 5% מק ו סוטטת 5 5 5 5 ו ]] 55שאופטום 8 רסוא חו 5 )גאט 5 )541 באוד פאו ₪ ב 4 סחוזזפקטוס 3 ספ דאשואאוגדח:דא= ₪ | דאפואאוגדהדא= ₪ = וקספ | 5 7" ל "* = סופטא פדו: +זו558 681 ₪1 פד מאנודהס סו | 6 ועו 1 / - אד ב | ברקב 5005 הנה פוא טדפטוא = ₪ואודהאפההק ביבס ו" נרו] [ ו הבח ו | 5 אודם ווטם / ג | קופת / וא 5'זה שו ור 5 - 3072 ו וס חוד = 06 1-7 07 :| ב 4% 97פ' 177 ]16+6! עיצוב פברואר 1997 (למעלה) הימנעות משטח לבן מבוזבז אינה חייבת לגרום לסידור צפוף כמו מהדורת פברואר 1997 של הדף הראשי של זסְסַחוְַחזהּק. עיצוב קלסטרופובי זה נראה כמו מסך הפתיחה של 801 בתוספת סטרואידים. 3-4 יי יי 5 ד5פזא | 030 חן +186] 0+ 00/8|5++0 1/0 ,15861 + "וסט הושס.] חן 60+5ק5ט5 סשד פהַ"ְבּח0 6סווסק | 106007 "+ ע+|3ח6: ה+263 וסטב= 5ביוח ד-סטד | "וס06%ס סחד אסוזוס5 )אאס5ה5ק 5'וסחהזו/ש פיעד 5ז5ס.! טח 5 הבטיוסן "זס+ 65צוו56 ששו מואדד | עו | חס | פהו[ממצפ 06 6וחחס6 סווד 1+ קהצו6 טסוו ס6חד . / 5 506 5 אוד 801 55 | שמ | א > | > זז 05 א ₪ ות וה0ס5!ו/ ]0 61/45 שעחות) | 20601 | ואוו = ץכ 5'ו0ח+3: יוסו ה 07 וגטסץ 26וק'ו6ח5 5%6ש5 קַח!!63 5 סח ח)ו 6 6₪6 סקאס 1 | 6280 |שטווסקווג 3 3 | אשת לס ואבס ₪3 ]הנס זוע םמוי | 028206 סם דופוו+סק 5! אסופפווצה זוסוודווו זה גק או הס 5 וסוושו או אסוז6ופסהקפה ₪50 ה ₪8 .| | אוספוא ופא .שאו פווד 1997 זווטומ 660 6ו+סק צשאעומק מוסאוזוודגק .אוספש ופא .שאו פואוד + אה אואפסגהז ספה דפוספה א 5ו הפסאושודאק הסש .70067 08 ./ש/ש/ע עיצוב יוני 1997 4 עיצוב ממשק באינטרנט * 55הד5] 5הסא הסץ א6ו61 |זסם חה 1:01 997 03 חו +186] ס+ 815ו00++0 1.0 ,150366 + ג'וגאו.* +:אוז שטיט1] הוש6.] חן 60+5ק5ט5 סד פסַ"ב3ח0 שםווסק + חלס ₪8 הדגה אה 0 אז6ףה 1006007 "וס + ע+/3 60 ה+263 יוסטבּ= 5ביוח ד-טטד + 5יוסחרזו/ו פיערד 5ז050.! טח ו ( ס חד ודו |אא0ס5ה6ק ופא וס %6 6 בבצו :ודו בי הבּניוסן 'זס+ 65צוו5+1 סעו] 06 ור ל *וגוסץ 26וק'ו6ח5 575661 קַה!!63ח 5 סח ח+ו/ 6 6 ןאס 6וחחס6 סוחד 1 קהצו6 טסו סוד ופ ורוי בי :ו :| . ז ז 0 5 0 אה 6 ות וקא 5 דפ דג אסודוס5 |אאס5הפפ 5 5 שפאוהק | אוד | סו | שטת | | | אהא | 6הו1הד5 01% | 628 שטוסקווג | 5 ו ₪3 : 1 ה 7 | פווו] ונש | ממ דל וה50!ו/ 01 611+5 ששחות? | 20601 0 ץ3 5"ו3+06: יוס+ 7 -- ו ₪5]) | הטוע שו זם אה גוי] | | ור 0 דופוו+וסהק 5! אסופפוצהשק זווסוודוצ זה גק או ה0 5 וסוושו או אסוז6ופסהקפם 555550 8זו .וג אוספוא צופא .שאו פוז 1997 זווטום וס 6 046 +שאעומם מפסאוהוודק .א וספוא אופא .שאו פואוד + אה אואפס ה ד ספה דפוספה ג ו השסאוי+ודאס הסש .170061 08 ./ש/ע/ע (בעמוד הקודם, למטה) מהדורת יוני 1997 של הדף הראשי נותנת תחושה רגועה יותר, למרות שהיא עדיין מבלבלת במידת מה. הקווים המפרידים את הכותרות אינם נחוצים. ניסיתי להסיר את הקווים ולהעביר את הכותרות קרוב יותר ללוגו המגזין, כדי להדגיש בבירור לאיזה מגזין משויכת כל כתבה. העיצוב המחודש (בעמוד זה, למעלה) משתמש בשטח לבן במקום בקווים, והוא נראה פחות עמוס. הצעת עיצוב מחדש עיצוב לפלטפורמות מרובות בעיצוב 601 מסורתי, אתה שולט בכל פיקסל שעל המסך: בכל פעס שאתה מציב תיבת דו-שיח, אתה יכול להיות בטוח שהיא תיראה בדיוק באותה הצורה על מסך המשתמש. אתה יודע עבור איזו מערכת הפעלה אתה מעצב, אתה יודע איזה גופן מותקן, אתה יודע מהו גודלו הטיפוסי של המסך, ויש לך את מדריך הסגנון של יצרן המערכת, המספק לך את הכלליס לשילוב הלחצניס והסמלים. אתה יכול אפילו לבטל (לצבוע באפור) אפשרויות תפריט שאינן פעילות, ואתה יכול להציג תיבת דו-שיח מודאלית שתשתלט על המחשב עד שהמשתמש ענה על השאלה. ב-60/, לעומת זאת, יש למשתמש שליטה על הניווט שלו בין הדפיס. המשתמשים יכוליס ללכת בדרכים שונות שלא תוכננו על ידי המעצב. הם יכולים, לדוגמה, לקפוצ ישירות אל תוככי האתר מתוך מנוע חיפוש, בלי שיעברו דרך הדף הראשי שלו. המשתמשים יכולים גם לשלוט בתפריט הסימניות (8/071565= /8765ה800%) שלהם, והם יכוליס להשתמש בו כדי ליצור ממשק מותאם אישית באתר. מעצבי 60/ צריכיס להתפשר ולתמוך בניווט הנשלט על ידי המשתמש. לעיתים, אתה יכול לאל את המשתמשים לעבור דרך נתיביס קבועים ולמנוע מהס מלעבור לדפים מסוימים, אך אתריס שעושיס ואת נותניס תחושה שתלטנית וגסה. עדיף לעצב אתר בו פרק 2: עיצוב דף 25 06 ₪ 01 זנ 036 56| *6שחך % 28.15+ 9065.86 [10₪05%3 אס 0 1.82+ 1784.74 606 סא סגא 0 2.14+ 1116.00 0 960 4 210- 290.70 8 900% 4 0.13- 17.02 |ו0 68טז0 66 8 0.00- 5.78 4 685זד זצ 30 5 חפט קסך טסט 810% ,זב ח5 500% 5 זב חטם שי 8 פ>זפטסחזנם ,ח50 1000 ₪ 2500500-- 58 | 04 הפ פה ו ז13ט!| סו חס 1555 (1.51: 0 50א) 502571308 פוסם י |883 הַהובחפם 5 6050 - הסספותט₪55 אפוג ו 8 556 (065:אפוזם) 845 511630 רחב - 43|6 500 ו ( 500860 סו סו 57 036 25%| !ספ וח % 0.30+ 39.18 סא 4 3/8 5- 40.18 גא % 1/2 37.06-2 8 8 1/4-17/8 26 אפ 4% 0.06+ 28.14 ד 5 סמו וו 36 25%| !סט וח % 3/4 3/4+2 23 1 % 1/4+ 31/8 +00 4% 110+ 16.18 8 % 0.06+ 2.14 חן 8 1/4+ 31/4 בד 010.60 ])95 6! 505 5טם) [החסט/4ת (פחו|ח0 קג) 5%0785 8565 מסד שווטפם ו (8ח!|ח0 30) 5607185 85| |3 חבּחות קסד ו ד וחס6.6זסט)./ע/ע/ץ 6 עיצוב ממשק באינטרנט א60.דסור) ד5ם וק 12:33 1998 ,08 חט. 3 4חסא1 /, (20 ו אש ה23 0 סץ כו והסטסום ו 5 חלשי 8רחס-|3 78 ח! טסרה 8%5אז3 רת 50071065 8+ ה3%6 עשי ,,הַח|ר 563 חס 78 .הס קוש 5 5 5%00]56 131 5' ה %6,60סט 10% 8+ חס 60365 8 רח-|3פץ !וח זפ !טספ 1.3551 | חח .5370110018 סהחבם. "65071070 010.0077 השועו 3660 26 5' הח 60 20%8 ?ַָחורהסספ 85565ה|5ם פזב שזפת/ ד 0%ח שזב ה6|חש חב %סח זב 0085 הש!ח 568 טסץ 18% 5חַחואחבּז 350 630 טסל .085 הַחורחזס+ו8ק ק%0 5'ש003+ 5005 ס|8ם 8|פ3+ 8 פחלחסרה א!5 %08 חב ,1998 01 ,1997 24 זס+ 5הַהואחבּז שפוט 8 ,31 חשזבו] ו 25 הטחטמ מממ מטטטם 88 78 25 825 5 0 0082 20 ממט000 800008800 5 נה 8888081 1007601 16890 5‏ המת 88881 88005008 14893 מ ד יו 8 14114 0 חחח ₪88 8081488 1833ם 000085 003 ץזם !הסה רחס זגו | 100ש1001 רהס 3665%] 0+ לטס 0086% ?00% 6זב 5%06%5 6ב תשש 8ט 6%5וק 5506% 25 6וחָבּ) 56חא , פחוקַבהַ13] זס5% 8שח1 03 ,35 פץ א|5 235% 98 זס+ 500 5ק5₪ 6ה+ 6+ ק6טוס .ח3%6 ₪ 0+ 5%165ש8ח1 ₪ח3 עפ 0+ 5%06%5 חס 83005 חר 860 סק /זוטרוס) שפח סאד .₪308 טסץ 3185 קרח 60 698 %נוספב 08%3||5 שזסוח הפטם 8% |%8ח6 31 תט) 58ש-60-ץ₪35 8הוטסזק 3108 137656 החסז) סקפ יח 8 ד .3185 קרח 60 6308₪-ץ!!פטכ +וספ3 חס00ב וחזס+ח1 8 ,5875 80ז15%6חַ8ז || 0+ 8|פב|(בּט3 15 0%ה325ח5 שְחה3 קרח 5 || 35 ,5250675 ||3 ס+ 6|פב!בּט3 15 ספפז 16435 .הזד 88זת עֶ30-0 זטס ח! %5חה כ סוק ואס6.פדסט וו וו ה ו ו ה חח :| ו ה ו ו ו ה בו ו 7 ו חחח ו 85 ו ה ה ה ו 1 ה ו 1 1 5 מסוכן להשתמש בגופנים ספציפיים ב-69/. דף זה משתמש בסוג גופן שאינו זמין במחשב עליו הוא הוצג, ולכן רוב הטקסט לא הוצג כראוי. לרוב, רצוי לא לציין כלל את סוג הגופן, אלא לקבל את גופן ברירת המחדל, משום שידוע כי גופן זה יתאים תמיד. לחילופין, כשאתה רוצה גופן מסוים, ודא כי אתה מציין כמה חלופות כדי להגדיל את הסיכוי שאחד מהגופנים יהיה זמין במחשב המשתמש. אחט? זוב3ּה6 ₪ אחז בצה בספרו של 6אד 6ז8/ו0ם, 3, "ץב]5וכ |1508/ סחדך הסו 8 0+ח1 6ע לס חבט זס" יצא המחבר כנגד גרפיקה עסקית מיופייפת ומנופחת, שתופסת נפח תקשורת גדול, בעוד שכמות הנתונים קטנה. שד הציג את תפיסת "אח1 הַּזְהס", שבה צריך הגרפיקה צריכה להתייחס למספרים שהיא מתארת במקום להתייחס אל המספרים כאל קישוט בלבד. כל השאר הוא אחטנ זזהח6, לדעת 6אטד. למרות שדפי 60/ אינם טבלאות נתונים, הרי שהתפיסות הללו מתאימות. כדי לגרום למשתמשים או לקוראים להתמקד בחלקים העיקריים. הסר כמה שיותר מידע טפל! התנועה חופשית, ולדוגמה, להציב לוגו (שיקשר לדף הראשי) בכל דף, כדי לספק תוכן ואמצעי ניווט למשתמשיסם שהגיעו ישירות אל תוך דף פנימי. הבדל אחרון בין שני הממשקיס הוא עיצוב ארגוני והיסטורי, במקוס עיצוב טכני. ב-601 (|800168 16 5 - ממשק משתמש גרפי), היה לנו יתרון של מחקר ראשוני איטי ופיתוח בחברות מובילות עס מומחי ממשק משתמש כמו החוקריס הרביס ב-228₪6 אסזסא ו-1ה(822ח00 ד 66טזם ב-6!סקה. כתוצאה מכך, הרעיונות הגרועיס נדחו והטוביס הפכו לכללים מנחיס לפני שהממשקים הללו הופצו למשתמשי המחשב הביתי. בניגוד לכך, ה-80/ מתפתחת כל הזמן ואנחנו משמשים בה שפני ניסוי. מהיכן מגיעים המשתמשים? ב-60/), רוב ההנחות שמתאימות לעיצוב 601 בטלות. המשתמשים יכולים לגשת ל-60/ באמצעות מחשביס רגילים, אך הס יכוליס להשתמש גס בהתקן יד מבוסס עט אלקטרוני, טלפון סלולרי, או אפילו במכונית שלהס. בעיצוב מסורתי, ההבדל בשטח המסך בין מחשב נישא לתחנת עבודה הוא בפקטור 6. ב-69/ אנו צריכיס להתאים פקטור של 100 בשטח המסך בין התקניםס נישאיס לבין תחנות עבודה, ופקטור של 1,000 ברוחב פס בין מודמים לבין חיבורי 3ד. רוב דפי ה-65/ פועליס כשורה רק על מסך "17 בהפרדה של לפחות 768א1024% פיקסלים. במסך קטן יותר, המשתמשים ייאלצו לגלול את התצוגה כדי לראות את כל חלקי הדף לו הס וקוקים. זה לא צריך להיות כך. אנו יכולים לקוות שהמשתמשים ישיגו מסכיס טוביס, אך בשניס הקרובות עלינו לעצב דפיס שיתאימו למסכים קטניס. הטבלה הבאה מציגה את התפלגות גדלי המסכים בהס השתמשו לגישה לאינטרנט ב-1997 וב-1999. המסקנה הבולטת היא שבשנתייס שעברו לא התערערה בהרבה שליטת המסכים הקטנים. יש לשיס לב שלמרות המעבר הבולט בשוק למסכי "17 ולכרטיסי מסך התומכיס בתצוגה של 768א1024 פיקסלים ומעלה, עדיין מרבית המשתמשיס בוחריס לראות תצוגה של 600א800. למרות שבשנת 1999 לא היו כל כך הרבה מסכיס קטניס כפי שהיו בשנת 7, מספרס עשוי לגדול בשנת 2000 בשל פרק 2: עיצוב דף 27 הפופולריות של התקני המידע הקטניס טסוו חחפוס, טלפוניס סלולריים). התפלגות גדלי מסכים ב-1997 וב-1999 * גודל מסך 6חה פטזסו] | 06%זב!51310 107 109 קטן מאוד (640%480 22% 1% או פחות) קטן (600א800) 4% 5% בינוני (768א1024) 2% 2% גדול (1280%1024 6% 2% או יותר)** * נתוני 1997 הם ממוצע תוצאות של 5000 משתמשים אשר ניגשו לאתר וחסס.פטזסח.שטאשו ולמעלה מ-11000 תגובות לסקר (/6%. נתוני 1999 הם מאתר ו 66.60 רת8%ל5. אשצשש. ** מסכי 1200א1600% ומסכים גדולים יותר יהפכו לנפוצים יותר משנת 2000. כל עיצוב 60/ נתון ייראה אחרת בכל אחד מהתקניס שוניס אלו. ברור שתפיסת 6ץ//51ץ/ עברה מהעולס. במקוס לנסות ליצור מחדש את אותו המראה החזותי עבור כל המשתמשים, המעצבים חייבים להתייחס לדפים במונחיס של מקרי משתמשים בודדים. תכנון מפרט ממשק משתמש מופשט המותאם במיוחד לכל פלטפורמה קשה הרבה יותר ממה שנראה. העקרונות הבסיסייס של |אזו יכוליס לקרב את המעצב אל האידיאל, אך הס לא ינחו אותו לאורך כל הדרך. מומלצ להפריד משמעות מאופן תצוגה, ולהשתמש בגיליונות סגנון כדי להגדיר מצגות, אך הדבר עובד טוב יותר עבור תוכן אינפורמטיבי מאשר עבור תקשורת אינטראקטיבית. המכונית כדפדפן טפש חברת מרצדס-בנץ תכננה רעיון של מכונית הכוללת חיבוריות מלאה לאינטרנט. אב הטיפוס של דגם 5420 מגיע יחד עם שלוש תצוגות מסך שטוח: אחת לנהג ושתיים לנוסעים. חיבור האינטרנט ברכב חייב להיות אלחוטי, ולכן רוחב הפס מוגבל מאוד, במיוחד אם הוא אמור להתחלק בין שלושה משתמשים. הנוסעים יכולים לגלוש ב-60/ בדרך דומה מאוד למשתמשים מחשב, פרט לכך שהם ישתמשו במסכי מגע (6605ז50 ח6טסד) כהתקני הקלט שלהם במקום במקלדת ועכבר. הנהג חייב להסתכל על הדרך ולא על המסך, ולכן ניתן לגלוש ב-65/ על ידי התקן קלט ופלט קולי. בנוסף, המכונית יכולה להפוך להתקן קלט בעצמה בכך שהיא תשדר את מיקומה לשרת, וניתן יהיה להקרין מידע על החלון הקדמי, ולהפוך אותו לתצוגה קדמית (בדומה לנעשה במטוסי קרב כדוגמת 16-:). 8 עיצוב ממשק באינטרנט עיצוב שאינו תלוי ברזולוציית מסך אין דרך לדעת מהו גודל המסך של המשתמשים, ולכן עליך לעצב עבור כל רמות ההפרדה (חסוזט|0650א). במיליס אחרות, עליך לעצב דפיס שאינס תלוייס ברמת הפרדה והמתאימיס את עצמס לכל סוג מסך עליו הס מוצגים. הכלל הראשון בעיצוב שאינו תלוי ברמת ההפרדה הוא לא להשתמש לעולס ברוחב פיקסל קבוע באף טבלה, מסגרת (6:876), או רכיבי עיצוב אחריסם (פרט, אולי, לפסיס דקיס שלצד הדף). במקוס להשתמש בגדליס קבועים, עליך לציין את הסידור כגודל באחוזיס מהשטח הזמין. זכור גס כי למשתמשים יש העדפות שונות שקשורות לגודל הגופן, ולכן עליך לוודא שהעיצוביס שלך יעבדו טוב הן עס גופניס גדוליס והן עס גופניס קטנים. לגולשיס עשויה להיות העדפה שונה משלך, בשל מגבלה חזותית כלשהי, או שפשוט יש להס מסך ברזולוציה גבוהה שבו לא ניתן לקרוא את הגופניס הקטנים. גם רכיבי גרפיקה צריכים להיות מעוצביס תוך התחשבות ברמות הפרדה שונות. הסמליס (16005) חייביס להמשיך לפעול כשהן מוצגיס ברוולוציה של וק1000 או טובה יותר. ככל שהרזולוציה עולה, כך הגרפיקה נראית קטנה יותר בתצוגה, ולכן הטקסט שבתוך הגרפיקה חייב להשתמש בגופן גדול יחסית כדי שהוא יישאר קריא. עקרונית, מומלצ לא לכלול טקסט בתוך גרפיקה משום ששיטה זו מאטה את התקשורת ומוסיפה עבודה במקרה שרוציס לתרגס את ממשק המשתמש לשפות אחרות. עומק הצבע ממשיך להעמיק בשנת 1997, קצת פחות ממחצית מהמשתמשים הוגבלו ל-256 צבעים טופ 8), וקצת יותר ממחצית המשתמשים היו מסוגלים להציג אלפי או מליוני צבעים. בשנת 1999, רק 11% מהמשתמשים הוגבלו לפלטת צבעים של 256, בעוד ש-89% יכלו לצפות באלפי צבעים טופ 16) או מיליוני צבעים 0ופ 24). בדרך כלל, מערכת ההפעלה עושה שימוש ב-40 צבעים. לפיכך, במערכת של 256 צבעים נותרו רק 216 צבעים לשימוש אחר. 1670504 !- 056806ו] אימצו את אותו לוח של 216 צבעים בו נעשה שימוש בדפדפנים שלהן. ללוח 216 צבעים יש הרבה חסרונות (למשל, הרבה צבעים כחולים וירוקים ופחות צבעים אדומים) אבל זהו הלוח שבשימוש. מעצב שיבחר לוותר על השימוש בו, ולהשתמש בכל צבע שירצה, מגביר את הסיכוי שהאתר שלו לא ייראה כפי שתיכנן. כרגע, המעצבים יכולים להסתמך רק על לוח 216. בעתיד מגבלת העיצוב עבור מספר מוגבל של צבעים עשויה להיעלם. כך גם גידול מספר ההתקנים הניידים בעלי הגישה ל-60ו יוביל לדרישה להתאים את גרפיקת ה-60\ למסכים אפורים. מדוע ראינו שינוי גדול כזה בעומק הצבע בזמן שנעשה שינוי קטן מאוד בגודל המסך? זאת משום שנושא עומק הצבע עוקב מתאים לחוק מור (שזססוז): מחירי כרטיסי הווידאו צונחים ככל שעוצמת המחשוב עולה ומחירי הזיכרון יורדים. לעומת זאת, מסכים הם חלקים פיסיים והם עדיין יקרים מדי אם אתה רוצה אותם גדולים. פרק 2: עיצוב דף 29 דף גרוע של חברת פפסי, התלוי ברזולוציית מסך. לא משנה עד כמה המסך גדול, המשתמש ייאלץ תמיד לגלול את הרשימה משום שהתצוגה לא משנה את גודלה כדי למלא את השטח הזמין. 1ות 111 סזסם[קל 11'5 .1.1 ב.1 1.8 ות סמתו.[ 6מ1 תו 16ו1ז 8 886 5'[וסיסאיקי[1101 )ו אוט] 8 1גוכ) אס .905 08[ט 181051 ות 516181 1 קל ספנגר) . 1ותנוכתקז16ותגו 1'5 18[ פספ [תתגמ) [ותה 86% 511 ופגון ,זכ . 1717 תס +זנופ 605.60 ן./ע/עעע סי עיצוב ממשק באינטרנט , ו =( - פסו/ח55 סו | | = מבחינות רבות ניתן להתייחס למדפסת כאל סוג מיוחד של תצוגה. יש לה רמת הפרדה גבוהה, אך לא רחבה כמו רוב המסכים. בגלל ההבדלים הללו, דפי שאינס בלתי תלוייס ברמת הפרדה (רזולוציה) לא יודפסו טוב במרבית המקרים. הקריאה המקוונת היא השימוש העיקרי בדפי ט6/ש, וכפי שמתואר בסעיף ההדפסה, מומלץ לספק גרסת הדפסה נפרדת לכל מסמך ארוך - למרות שידוע כי לעיתיס קרובות משתמשים עדיין מדפיסים דפי ט6/ ישירות מהדפדפן. דפיס המתוכננים לתצוגה ברוחב קבוע ייראו נורא בהדפסה. הס יצאו כחבילת דפיס מיותריס שעליהס פס דק, או שהם ייחתכו משוס שהס רחביס מדי עבור המדפסת. סידור טיפוסי ברוחב 600 פיקסלים שיעבוד טוב ברוב מסכי המחשב (למרות שלא ב-/דספ\ ובהתקנים בעלי מסך קטן) יהיה ברוחב 8.3 אינצי, כאשר הוא יודפס ברמת הפרדה סטנדרטית של 72 פיקסלים לאינצי. 1 7% 1" ה ; " השג לעצמך מסך גדול כשאתה מעצב דפי 60/, עליך להתחשב במשתמשים בעלי מסכים קטנים, אך אתה, כמעצב, אינך חייב לסבול: השג לעצמך מסך גדול, ההנאה שווה את ההשקעה. בהתחשב בעובדה שאתה בוהה במסך כל היום, השקעת סכום נכבד עבור מסך 21 אינץ' עשויה להיות אחת ההשקעות הטובות ביותר שתעשה. למעשה, אם אתה מועסק בעבודה רווחית, קרוב לוודאי שההשקעה תהיה כדאית במונחים של הגדלת התפוקה. רוב המשימות יבוצעו הרבה יותר מהר כשאתה יכול לקבל יותר מידע במבט יחיד. המסך האידיאלי אמור להיות מסוגל להציג לפחות 16001200 פיקסלים, לפחות בצבעי 6 סיביות, ובקצב רענון של לפחות 10002. ייתכן שיהיה עליך להתפשר על פחות, אך כל משתמש אינטרנט כבד ומקצועי (גלישה ודואר אלקטרוני) שעיקר עבודתו כתיבת מסמכים אמור להשתמש במסך בגודל של 17 אינץ' לפחות. המדפסות זקוקות לשוליים של בין רבע לחצי אינצי, ולכו השטח המודפס בגיליון בגודל 8.5%11 הוא ברוחב של בין 7.5 ל-8.0 אינצי, ומשמעות הדבר היא שלפחות 0.3 אינצי ייחתך מהדף. באותה מידה שהינך בודק איך נראה האתר שלך ברזולוציות שונות, במסכים שוניס ותחת מערכות הפעלה שונות, כדאי שתבדוק מה יוצא בהדפסה במדפסת לייזר ובמדפסת הזרקת דיו בגודל דף סטנדרטי - 44 או קוואטרו. שימוש בתוכן לא סטנדרטי ה-65) משתנה כל הזמן, ואני יכול לצפות בוודאות שבתוך כמה שבועות מזמן קריאת פרק זה, תופיע טכנולוגיית פ6 חדשה, ואתה תתפתה להשתמש בה כדי לשפר את האתר שלך. אל תעשה זאת. בפעס הראשונה שראיתי את דף 808|30ח80 בכתובת (החסס. 3|30!וח6חסם.אושצו) בעזרת זסזס|קאם +6חזססחן, חשבתי ש- 16167050 הכניסה בכוונה קוד שיחסוס קישוריס למתחרים שלה, אך האמת פשוטה יותר ופחות צינית : 0[8!90ח8ח80 ציינו כי על רקע הדף להיות לבן וכי קישורי הטקסט צריכיס להיות לבניס (מדוע הס עשו זאת, אינני יודע). קוד ה- |ואד הספציפי עבור הקישור ל-606806 היה רשוס בצורה לא סטנדרטית. ישנס שני לקחים מכישלון זה: הימנע מקוד לא סטנדרטי במידת האפשר ואס אין ברירה, השתמש לפחות בברירות מחדל מתקבלות על הדעת שיעבדו אפילו אס כתיבת הקוד שלך לא הצליחה. ותמיד, תבדוק איך נראה האתר שלך בדפדפניס השכיחים ביותר בשימוש. פרק 2: עיצוב דף ‏ 31 68 ח תסוז8 66 פח1 הזו 5861005 סו|סוסס פחז 1 פן 5118 5וח1 . 8פחפזחו ץ||63וח3זם 015 הסגורח ‏ זפשפשאיםר] 5 שו|הּהסוסחות ץצ 80 500 15310785 חס .308 זם וסץ 5000951 שופחפזז5 פע ז פיז 115 סב ס!חצויסט ץ 3/8 לחפצבּח גוסעזו 0008 0. זסיוס!קא= 7/8/80.6001ח006 .שש 2 עיצוב ממשק באינטרנט 6 ה 1 ת0וז₪680 הח הזו 5ח0ו58061 סו|סחזסם 18 1 פ!ן 5118 115 . 8פחפזחו ע||63וח זט 5 סרח | זפשפאוסר] 5 שו|התסו6חות ץם 80 0מקט5 18310785 חם .3008 זם 3.0 40150308 סץ 5000851 צופחפזז5 ב זט 5|ח1 3 פוחאשיסט ץ83זו3 לחפבּח גוסעזו 8008 0. 36 (בעמוד הקודם) הדף הראשי של אתר הסס. 0 8|3 !רחש סם. תעש המוצג ב-6056806] זסזהּחָוה (בצד שמאל) וב-3 זסזס|קא= 6%חזס%ח1 (בצד ימין). כנראה שכותב הדף מעולם לא טרח לבדוק את הדף ב-זסזס|קאם 067060ח1 למרות שהוא השתמש ב- |אז לא שגרתי, ההופך את הדרישה לבדיקת פלטפורמות שונות לקריטית יותר מהרגיל. ענייני שדרוג בתחילת ימי ה-60/), המשתמשים שדרגו את גרסאות הדפדפניס שלהס במהירות של 2% לשבוע לערך. במיליס אחרות, כל שבוע, גלשו 2% מהמשתמשיס לאתר יצרן הדפדפן המוביל והורידו את הגירסה העדכנית ביותר. בקצב שדרוג של 2% לשבוע, היה צורך ב-50 שבועות (שנה בקירוב) כדי להעביר את כל המשתמשים לגירסה החדשה, אך גרסאות חדשות התפרסמו בקצב של יותר מפעס בשנה, ולכן המשתמשים נשארו מאחור כל הזמן. אני בופה שמעברי הגרסאות יופיעו בקצב איטי יותר בעתיד. ראשית, משוס שהלתף לשדרג נחלש, בשל העובדה שרביס ממעצבי האתרים מביניסם כיוס את הצורך בתאימות לאחור, ואינס דורשים מהמבקריס באתריס שלהס להשתמש בגרסאות הבטא האחרונות. שנית, משוס שהרצון לשדרג נחלש ככל שהדפדפניס הישניס יותר נחשביס לטוביס יחסית והבדלי השימושיות בין הגרסאות מיטשטשיס (ראה את ההבדלים בין 5.0 15 לבין 5.5 15). בתחילת שנות ה-60/ש, היו יתרונות עצומיס בשדרוג לדפדפן חדש, אך לא נראה כי לשדרוגיס האחרוניס של הדפדפניס יש את אותה כמות היתרונות המשמעותיים. בנוסף, וחשוב מכל, אוכלוסיית המשמשיס השתנתה מקבוצה חלוצית של משוגעיס לדבר, למסה עממית. בתחילת שנות ה-65//, הגולשיס עברו למצב מקוון כדילהיות מקווניס, ואיסוף גרסאות הדפדפניס החדשות הפך למטרה בפני עצמה ולדרך להוכיח לחבריך שאתה מעודכן. כיוס, הגולשיס מתחבריס לאינטרנט בשל התוכן, וכדי לבצע את עבודתם. כל וּמן שהדפדפן ייהישןיי שלהס עובד ללא בעיות, הס לא יטרחו לחפש גירסה חדשה, להוריד אותה ולהתקינה. כפי שמוצג בתרשיסם הבא, מהירות השדרוג היתה בערך 1% בשבוע בשניס 1998 ו-1999. מתי בטוח לשדרג? הפורמט היחיד בו אתה יכול להשתמש בביטחון מלא הוא מפרט 1.0 |ואזח המקורי. כל מה שמעבר לזה עלול להיות מחוץ לתחוס היכולות של המבקריס באתר. אל תתקרב לאף טכנולוגיית 60/ שנמצאת בשלב הבטא שלה אלא אס כן אתה המצאת אותה, או שיש לך סיבות אחרות לרצות לקדס את הטכנולוגיה פרק 2: עיצוב דף 33 היחס בין משתמשי' 6056306 המשתמשים בגרסאות שונות של הדפדפן לאורך זמן. הנתונים התקבלו מהאתרים רה56.60ז6סחו. שצצשצ (1995-1997) 1מ-6%.600א5%8687. וע (1998-1999). המסקנה שהתקבלה מהתרשים היא שהשינוי בין גירסה 1 לגירסה 2 קרה כמעט באותה המהירות שבה קרה המעבר מגירסה 2 לגירסה 3: לשתי העקומות יש שיפוע של 2% לשבוע בקירוב. המעבר לגירסה העדכנית יותר מגירסה 3 לגירסה 4 קרה בחצי מהמהירות הזאת: 1% בלבד בשבוע. המעבר מגירסה 4 לגירסה 5 עשוי להיות איטי אפילו יותר. אתה מוזמן להיכנס לאתר ו 6%.60א ה רת5%8%6. טע ולהתעדכן. 4 עיצוב ממשק באינטרנט 00% 200% 200% 00% 00% 00% 1% 0% 200% 10% 00% 0 99-סט/ 60-99-] 98-|ט(. 98-ח28. 97-חט(. 60-96 96-צ8! 026-95 95-זסה הספציפית. תוכנות בטא נוטות לקרוס, וקריסות מרחיקות את המשתמשים ממטרת האתר, שהיא כנראה משהו בעל ערך אמיתי, אלא אס ברצונך להמס אותס בטכנולוגיה המדחימה שלך. אני ממליצ לחכות עם כל טכנולוגיית 60) חדשה באתר שלך, עד שעברה שנה או שנתייס מרגע הצגתה כגירסה רשמית, ולא כגרסת בטא. יש לחימנע בשנה הראשונה מגרסאות ₪11 חדשות או מפרטיס אחרים, תוספים (105-פָטוק) או מרכיבי תוכנה אחריס, מבני נתוניס חדשים, וכל תכונה הספציפית לדפדפן מסוים. ישנן שלוש סיבות לשמרנות בהטמעת חידושי 0 : % % כאשר קצב השדרוג הוא בערך 1% לשבוע, יש צורך בשנה שלמה עד שרוב המשתמשים יוכלו אפילו לגשת לשימוש המיוחד שלך בטכנולוגיה החדשה - ושנתיים לפני שכולם יוכלו להשתמש בה. אפילו אחרי שטכנולוגיה חדשה עוברת ממצב אלפא, דרך בטא, למצב ₪6 (60800108%6 ₪6!6856), המסתיים במצב ₪6 (6טט1896טח3ּ] סד ₪6|6856) הידוע גס בשס 65 ( חס קוח5 6050006 זפזות - משלוח ראשון ללקוח) רשמי, יש לה לרוב באגיס מסוימיס אותס ינפו בגרסאות משנה עתידיות, המוכרות יותר בשס 8665ק 06ו/567. ההחלטה על השיטה הטובה ביותר לשימוש בטכנולוגיית פ6 לתקשורת עס המשתמשיס מסתמכת על הרבה ניסוי וטעיה. האתריס הראשוניס שהשתמשו בתכונה חדשה פגעו לרוב במשתמשים, יותר מאשר עזרו להס. רק לאחר איסוף ידע המבוסס על בדיקות ניסיון ושימושיות ממגוון עיצוביס המשתמשיס בטכנולוגיה חדשה, יהיה לנו סיכוי להחיל אותה בצורה שתיתן לאתר ערך מוסף. תן לאחריס לעשות את הטעויות, והתרכז במאמציס להביא למשתמשיס שלך תוכן בעל ערך שיעזור להס לעשות את מה שהם צריכים. כשאתה נמנע מהחידושיס האחרונים, אתה מבטיח את עצמך מפני הסיכוי המעשי לכך שלצעקה האחרונה לא יהיה עתיד. יוצאי הדופן העיקרייס של ההמתנה בת השנה כוללים יועצי פ6/ שרוציס להדגיס את מיומנותס בטכנולוגיות מתקדמות ואתריס שרוציס להשיג משהו שניתן לעשות אותו טוב יותר בעזרת תכונה חדשה. בשני המקרים, אני מציע לנקוט במשנה זהירות: על היועציס לוודא שהס לא משתמשיס בדבר שיפעל נגדס באתר שלהס (משוס שהלקוחות הפונציאליס עלוליס למצוא את התכונה החדשה כחסרת ערך עבורס). אתר שייוקוקיי לכלי חדש שיקנה יתרון מסויס למשתמש, עשוי לגלות, לאחר קבלת התגובות הראשונות, שהדרכיס הפשוטות יותר מקנות כמעט את אותס היתרונות למספר רב יותר של משתמשיס. אס אתה מחליט לעקוף את כלל תקופת ההמתנה של שנה מכל סיבה שהיא, עליך לוודא כי אתה מספק את התוכן בפורמט חלופי למעןו המשתמשים שעדיין לא בצעו שדרוג ואינס יכוליס להשתמש בתכונה החדשה. סיוע ממשתמשי על (25615 זסקט5) גולשים רבים משתמשים בדפדפן ה-60/\ שהתקין עבורם מי שמוגדר כ"משתמש על" (ז056 ז6קט5) - חבר, מכר או שכן "ידען". ברוב החברות ובהרבה משפחות יש כמה כאלו שנהנים מעצם הטכנולוגיה החדשה, אפילו שתחום עבודתם אינו נוגע למחשבים. משתמשים פרטיים אלו הופכים לרוב "למשתמשי על" שיודעים את כל פרטי היישומים הכבדים והמודרנים ומתעניינים בהשגת גרסאות חדשות מהר ככל האפשר (פעם ראיינתי "משתמשת על" שהעידה כי היא אוהבת ללמוד יישום חדש כל שבוע, רק כדי להמשיך ולהתעדכן ביכולות המחשב שלה). כאשר "משתמש על" מתקין דפדפן פ6/ עבור משתמש רגיל, המשתמש הרגיל לא יודע כיצד הדפדפן הגיע למחשב שלו או כיצד לשדרגו. לפיכך, הוא ישמח להמשיך ולהשתמש בדפדפן גם תקופה ארוכה אחרי שיצאה גירסה חדשה. גם משתמשים שהתקינו את הדפדפנים שלהם בעצמם יישמו, הרבה פעמים, את האימרה "מה שעובד, לא מחליפים". התוצאה של שתי תופעות אלו היא מצב בו הגולשים ממשיכים להשתמש בגרסת הדפדפן הנוכחית שלהם. לרוב אתרי ה-65/, לדוגמה, מגיעים עדיין גולשים בעלי גירסאות ישנות של 6656806ו1. פרק 2: עיצוב דף | 35 אסוף דפדפנים כדאי לך לאסוף דפדפנים מכל הגרסאות הראשיות של כל הדפדפנים הראשיים שבכל הפלטפורמות העיקריות. היצרנים מעוניינים לקדם רק את הגרסאות האחרונות שלהם, אך רבים מהמשתמשים שלך משתמשים בגרסאות ישנות. עליך לשמור את הגרסאות הישנות זמינות משתי סיבות: ראשית, עליך להמשיך לבדוק את הדפים שלך בדפדפן הישן למשך שנתיים כדי לוודא שהם פועלים בו בצורה סבירה. שנית, עליך לקבל תמיד דיווחי משתמשים המתלוננים שהאתר שלך גורם לבעיות מסוימות בדפדפנים שלהם, ועליך להחזיק אוסף גדול של דפדפנים כדי לגרום לבעיה להופיע. באגים כאלו אמורים להיות מתוקנים במלואם, משום שבוודאי ישנם משתמשים רבים אחרים שנתקלו בבעיה ולא דיווחו לך על כך (כנראה שהם פשוט לא הצליחו להיכנס לאתר שלך והפכו מאז ללקוחות אבודים). 6 עיצוב ממשק באינטרנט אחרי שנה, אין צורך ליצור גרסאות כפולות של הדפיס שלך (עס ובלי התכונה החדשה), מפני שאתה יכול להניח כי רוב הגולשיס כבר ביצעו שדרוג. אך עדיין צריך לקחת בחשבון את ייכלל השנתיים": בשנתייס הראשונות מאו ההשקה הרשמית של הטכנולוגיה החדשה, עליך לבדוק אס שימוש כלשהו בתכונה החדשה ישפיע לרעה במידה ניכרת על גולשיס בעלי דפדפניס ישניס יותר. אם המשתמשיםס בעלי הדפדפניס הישנים לא יוכלו ליהנות מכל היתרונות של התכונות החדשות, הדבר עדיין מקובל. אך לא מקובל לבנות אתרים שלא יפעלו או ייראו מבולבלים בדפדפן ישן. הפרדת המשמעות מהתצוגה עיצוב ה-60/ המקורי ופורמט הנתוניס שלו, |וד₪, התבססו על קידוד משמעות המידע, ולא על התצוגה שלו. לדוגמה, כותרת סעיף אמורה להיות מקודדת ככותרת ברמה 2 (0חו680ח 2-|6/8 |, <2ח>), כלומר שהיא הרמה הגבוהה ביותר של כותרות המשנה מתחת לכותרת ברמה 1 (0ַחו680ח 1-|6/6], <1ח>) שהיא כותרת הדף כולו. סגנון קידוד ה נבחר על ידי 66 |-615חז86 חזוך משוס שהוא רצה שה-ס8/ תהיה מערכת מידע אוניברסלית. לפיכך, הוא לא היה יכול לדעת איזה ציוד מחשב יהיה ברשות המשתמשים השונים (לכמה יהיו מסכים צבעונייס בהפרדה גבוהה, וכמה עשוייס להיות עווריס ולהשתמש בממשק קולי בלבד), והיה הכרתי לשמור את פרטי הצגת המידע מחוצ לקובץ עצמו. הדרך המדויקת להצגת (או השמעת) הדפים למשתמש צריכה להיקבע על ידי הציוד שברשותו. רעיון קידוד משמעות המסמכים, הידוע בשס ו 60 5660136 (קידוד סכמטי), אבד ומנית כשכמה יצרני דפדפניס הציגו תגיות התאמה המקודדות את העברת המידע המדויקת. רביס ממעצבי ה-60//, לדוגמה, אומנו להשתמש בקידודי טקסט מבוססי-תצוגה כגון ''י0|ספ ||8ז 5|פאוס 18 687800'י, במקוס להשתמש בקידוד הסמנטי של כותרת ברמה 2 (<2ח>). יתרון הקידוד מבוסס התצוגה הוא שניתן להציג את הדף בצורה הקרובה מאוד למה שהמעצב תכנן, אס יש למשתמש שילוב של חומרה ותוכנה דומה לגה של המעצב. באופן כזה, סידוריס מתוחכמים יותר יהיו אפשרייס. עס זאת, עיצוביס מבוססי תצוגה עובדים רק כל וצמן שניתן לנבא מהי חומרת המשתמש, הדפדפן וההעדפות. ניבוי וה היה קל יחסית בתחילת ימי ה-ס6/: > בשנת 1991 ו-1992, היתה לרוב המשתמשים גישת טקסט בלבד. > בשנת 1993 ו-1994, רובם השתמשו ב-10586/. %> בשנת 1995 ו-1996, רובס עברו ל-6156806. 6% ומאז ש- 670506 לקחה ברצינות את ה- ס6\, הדפדפן שלה זסזס|קא= 6%חז66ח1 הוא השליט (ראה נתוניס באתר וח66.60אז558608. צושוטו). אך החל משנת 1997, ננטש רעיון הדפדפן האחיד, פרט למערכות אינטראנט 0ס6ח8שח1) שקבעו יצרןו אחד כסטנדרט. באינטרנט, אין יותר פלטפורמת תוכנה יחידה שולטת. זסזס|קא= 6%חזססח1 אכן צבר תנופה והגדיל את פלח השוק שלו בין 1997 ל- 1999, אך אני צופה ש-15 לעולס לא יצליח להשיג לעצמו את שליטת השוק שהיתה ל-105816! ול-6156806 משנת 1991 עד 1996. בעתיד, יהיה מגווןו רחב של כלי מידע שיהפכו לפופולריים, כל אחד ומאפייניו הוא, ולא נראה שדפדפן יחיד יצליח לספק את ממשק המשתמש המיטבי תחת מצבים שונים מאוד - ממסך טלפון קטן ועד למגזין וירטואלי עס מסך שטוח, לדוגמה. מחשבים לא רגילים, כגון צדס6\ וכלי עזר דיגיטליים אישיים, כגון ה-זסווק הח|98, יהפכו לשכיחים הרבה יותר. מעבר פלטפורמה שני המעברים הראשונים בשליטת פלטפורמת ה-60/ קרו מהר מאוד. המעבר מדפדפן שנקרא 006 6ח1] ל-%0586]! בשנת 1993 קרה כמעט מיידית. אין לי נתונים על כך, אך לפי מיטב זכרוני מאותם ימים, מהירות השדרוג היתה קרוב ל-30% בחודש, כלומר 30% מהמשתמשים עברו ל-₪10586! בחודש הראשון. קהילת ה-60/ היתה קטנה ומאוחדת, והחלפנו מידע בינינו לבין עצמנו בעזרת דואר אלקטרוני וקבוצות דיון 60ח56), כך שכולם ידעו כמעט מיידית כשיצא משהו טוב יותר. המעבר מ-10586!] ל-6%050806 בסוף שנת 1994 ובתחילת 1995 היה מהיר גם הוא, כנראה בקצב של 25% בחודש. 656806 השתלטה על 80% מהשוק בקירוב בכמה חודשים בלבד. המעבר ל-זסזס|קאם 1567060 והמעבר המתמיד ל-60/ של כמה פלטפורמות קרו הרבה יותר לאט. דוחות ניתוח שוק הראו כי 6056806 איבדה פלח שוק של כ-1.2% לחודש משנת 7 ועד 1999. שתי הסיבות העיקריות למעברים האיטיים יותר ה|ן שקהילת המשתמשים מפוזרת יותר (ולכן אין נטייה לבצע מעבר קבוצתי) וכן משום ששינויי התוכנה פחות משמעותיים מהשינוי הראשוני שהיה בין טקטס לבין ממשק גרפי. פרק 2: עיצוב דף ‏ 37 (בעמודים הבאים) חַזְבּאו50 זס|אהזד עיצב אתר המציג את ההבדלים בין הדפדפנים השונים. התרשימים מציגים את אותו הדף כשהוא מוצג ב-3.01 46056806, 1 ס0560806), ו-3.01 ז6זס|קאם 6%חזס%ח1. לא זו בלבד שהגרפיקה מסודרת בצורה שונה, אלא שיש גם הבדלים במעברי השורות ובסוג הריווח. כל שלושת הדפדפנים הציגו בחלון ברוחב 618 פיקסלים, אך משום ש-4 6056306ו] משתמש בגבול חלון קרוב יותר, אורך השורה שלו קצר בהרבה. כדוגמה, הסרגלים האופקיים הם ברוחב 574 פיקסלים ב-3 6%56306, 9 פיקסלים ב-4 6156806, |-583 פיקסלים ב-3 זסזס|קאם 6חזסשח1. לבסוף, נראה כי 4 46056806 פחות סלחני בהעברת :|8 ללא סימן הנקודה-פסיק (;) (הדרך המקובלת לקידוד תו ">" ב-|1אז₪ היא באמצעות 6 8 עיצוב ממשק באינטרנט להתקנים אלו יש יכולות תצוגה שונות מאוד מהמחשב הרגיל (לרוב, מדובר במסך קטן בהרבה) ולפיכך הס אינס יכוליס להציג בצורה טובה דפי טפ/ אשר תוכננו לתצוגה במסך סטנדרטי של מחשב אישי. השימוש בקידוד סמנטי מאפשר להתקניס לשפר את התצוגה על פי יכולותיהס. דפדפניס קולייס אמוריס להופיע בקרוב. אחת הסיבות לפיתוח שיטת דפדוף קולית היא עבור משתמשיסם עס מגבלות, בעיקר מוגבלות חזותית. גס משתמשים ללא בעיות ראייה עשוייס למצוא את עצמס במצב בו ידיהס ועיניהס עסוקים (כגון בזמן נהיגה, או פעילות במכון כושר). הס היו יכולים לגשת למידע מבוסס 60/ במצב הזה אס הוא היה נקרא בקול רס. ברור כי ממשקי קריאת ס6\ יהיו טוביס בהרבה אס יהיה שימוש בקידוד סמנטי, כך שהמערכת תוכל להבין את מבנה הדף. אס מערכת קריאה תדע, לדוגמה, איוה חלקיס של הטקסט הס הכותרות, היא תוכל להקריא למשתמש תקציר, בעזרתו הוא יוכל לבחור בקלות איוה סעיפיס להקריא במלואס. סיבה אחרונה למעבר לקידוד סמנטי במקום קידוד עבור תצוגה היא השוני הגובר בין התוכנות בהן משתמשיסם לגישה ל-69//. אם נשווה תצוגות מסך של אותו הדף בכמה דפדפנים (או אפילו בייאותו" הדפדפן אך בגירסה או בפלטפורמה שונות), אנו עשוייס לראות משהו שונה במידה ניכרת. במצב בו כל היצרנים מפרסמים גרסאות נוספות לדפדפנים, יהיו כל כך הרבה גרסאות עד שיהיה כמעט בלתי אפשרי לבדוק דפים עבור כל הגרסאות הללו אס מעצבי הדפים יתעקשו על תצוגה מיוחדת. אינך יכול לדעת מה יבוא לאחר מכן, ומשוס שייהמידע קייס לעולס'י, התקווה היחידה שלך שהדף ישרוד היא ללכת בדרך הסטנדרטית. במקוס להטמיע מפרטי תצוגה בתוכן עצמו, עדיף להפריד את התוכן מהנחיות תצוגה. על הוראות הקשורות לתצוגת המידע להיות בקובצ גיליון סגנון נפרד המקושר לקובץ תוכן שמכיל רק סימון סמנטי. גיליונות סגנון הס פיתוח חדש ב-60/ והס אינס נמצאים עדיין בשימוש רחב, אך הם הפתרון היחיד לקבלת מצגת קריאה בסביבה בה מספר הדפדפנים והתקני התצוגה עולה כל הזמן. לדוגמה, ניתן לקשר ;5ס טאו חן סבו 8ב 5סוחמבּזם החד .55380 סחוססס |בהוסחס פחס אוסת 5 פוחד :צוז +5וות 0ם 5א83זם פחו! עט 58873680 פזב >סוחהמבזם |בטטוצוטחו פחד .|!68 0353 פחם ההוחובסחסס אוסז חסבם טס 835187 0008 608 8אבוח <8,ז2 ]> >1<>[2< 1="6ג 202208=0 21=[ת10פע 103=מדכ1ח "1058/68067/01.0715ב6="6282ת5 1166> 6"=/ג 0=תמכע0ם 21=[ת10אע 103=תדכ1ח "105/68067/62.0715ב56="0282 116> <2<>/75/> <2ך><[> <"21="63 02008=0 21=[ת10פע 103=תדכ1ח "105/68067/03.0715ב0="0282ת5 116> <"21="64 008=0ע20 21=[ת10פע 103=תדכ1ח "105/168061/64.0715ב6="0282ת5 116> <ח'/><פ'/> <ם,זתג/> 4 שש הננ ">< ">< / ' - - 030 צחב סטסרסוא+ קט פחו! פסוחמב'זם +הפסבן0סב סטםט , 5אוסז פר% הספאספם 030 3 5אוסת5 := וחפרס הפפ אוספט טוסץ 35 835 + בחוא . פסוחמבזם להפסבןב הפפאוספם בחב פשוסז פרף הפפאספם 030 3 5אוסח5 :אא . !סח 8 קט 3%8 5035 5בספום חב פסום פחם זם |וב 588 חבס 00₪=0פ/ טחבּ 150205=0 585 סטום פצססב 35 0008 8חב5 :עד 596004 . ההַחבּחס סא . הַהוחססצ .₪303 :אא 4הג3ּ 15 ... 50 .. אזםאו הסוח מ0ס חטו|בּ 500085080 באו 16 :עד וחד .חחח סא . הַהוהססא .₪303 :סז ... 3||87ח5 15 5אוםז ₪8 הפפשוספם מב פרס .. ופצש :אא 5 הסוח פאבד .502065 סחב 65ב ספ , "מס6"=חטוובּ ס+ 5פסחפזפזםז ||ב זטום פאבּד .אס :וד הזיוטס סחב (<דך>) אוסז 53018 פחם צוחס 58גו ||וא 1 . 5א83זט פחו! חב הַחוסבּס5 |ובּ 8סתפז טחב פסושסב וז םעו ססחו הַחהוהסץזפ 8308 580 0ם (<5%>) הַ53 אבפזם 608 58 4 2 6 סוכ 3 ₪ ם1 80אח סבחם ,||8/ |! 50323 :שז הפפ שופ 0030 3 |50 15 פזפחד . פסוחמבּזם +הפסב ןטב הפפאספט הַחוסבם5 פרם זם סח 605 .0% :אא ץע 3|!85%5ח5 בר 5ו סו סטום ... 5אוסז סוס פח 50 ... ז53||8 5אוםז 58 הפפ ופט 030 08 פב "מסד"=חםו|ג החופט ... סו צח סף 605 :עד תות 3008 0008 8 60 "מס ד"=חטו|ם 036% םב |'1 .הפס פהוטוחסס .. )אפח 50 .ץח 35%! 608 סום ( .סח |501 ,פסַחבּחס סא . הַהוהססא .₪303 :שז שבח ד סס אוסח סטום פזוס ץ|חס חבס 1 )ו , איסא . הַחוס3וס סחבּח בחב בַהסטסח5 +ם 5בחגוס5 :אא .... פחו! חס חם החרפ 8סס סס 60/6088 .06070 ./ע/ע/ע 1 16%563060] פרק 2: עיצוב דף | 39 5אוסז סא חו 13080 פזבּ פסוחםבזם פד .55380 הַחוטסס |בהוסחזם פרם שוסח 5 פוחד :צעוז +5יוו= 5 פחו! צֶם 582873580 8זב פסוח הז |בטוםוצוטחו החד .|81ס 0353 פחם הַהוחובפחסס אוסז חסבט ,0 סש 835187 0008 8 38 סט <018ג'₪1%7 <₪1%12<ד₪1% <"21/="61 200208=0 21=[ת0דפא 103=מדע1ח "105/168061/01.711בק8ע6="6ק5 ₪1%116 <"11="62ג 0=תמפתסת 21=[ת10מע 103=תדע1ח "103/868067/02.0711ב82ע50="6 116+₪1% <ת'/><פ'/> <₪1%19<ד₪1% <"211="63 0=תעכת0 21=[ת6דפע 103=מדכ1ח "103/868067/03.0711ת82ע50="6 ₪1%116 <"211="64 0=תמכת0 21=[ת6דפע 103=דע1ח "103/868067/04.0711ת82ע0="6ת5 ₪1+1166 <ת'/><פ'/> <ם,זמגי/> 3 צְחבּ סטסרסשואו מ פחו| פסוחמבּזם להפסבנטב סוט , 5אוסז ₪8 הפפשוספט 030 3 5אופח5 :15 החפר הפפאספט 5 835ח +0 סחו6א . פסורמבּזם 6הפסבן30 הפפשוספם חב >אוסז ₪8 הפפשוספםט כב ב 5שופח5 :אא . פ|סחו 68 קט 8א3 לבח ו 8 סוט 8 + || 588 חבּס ופצ 504050 חב 50205=0 586 סטם 3008 35 0008 538 :עד 5896004 .פהחבּחס סא . הַחורססא .₪303 :אא 4הג3ּ 15 50 .. %זסאו םוח 60 חםו|בּ 500085580 פבּשו סז ו וחד -- 0 6 3 6וח3ו 8 סא . ההוחסס .₪303 := זפ||ב3ח5 15 5אוסז 58 הספשוספם מ3ם פחס .. ופצ :אא 8 סחב 05ב ספ , "מספ"=חטוובּ טס 085ת8ז19פז |וב סום 68בּד .0% :עד הדוטפ סז 530|8 פחם צ|חם 88 |וואו 1 . 365 פזם פחו| חב בַחוסב50 ||3 תפז חב פסוצטב 5'חסוח וס סצוס ספחו מַחהוהסץ8/8 58087353 סס (< 8 בבס 83%זם 008 58גו סחב (< ה|א) .=1 ספא סב ,||8/ |!החבּ2ב3ח5 := חפפשופם 030 3 |50 15 פזפחד . פסוחמבּזם >תפסבּנבּ חפפוספט הַחוסבּם5 8 +ם טח 605 .0% :אא %ץ 3|!855ח5 פרם 5 סו סטם ... 5אוסז סשאוס שח .53/8 5שסז ₪8 הפפשוספט 030 ₪8 308 "מס ד"=חטו!ם סחופטו ... סו צח סז 606 :עד הו . 3008 0008 8 60 "מס ד"=חסו|ם 036% טסב |1'1 . החפרס ההוטחסס .. +אפח 50 .עצש 5 8 סוט 50 0 36 וח 3 יי 0 0 סא . החוחססא .בהא :סז דסא סט אוסח פטום פזטס ץ|חם חבס 1 )ו ,איסא . חומב חב חב בתסטופח5 + 5טחגוס5 :אא .... החו! חס חס ההורסץזפץ הססס סט פצבּת 88% 6007/ל6ח .06070 ./ע/ע/ע 1 חזסיוס!קאם 6%חוס+חד 0 עיצוב ממשק באינטרנט 830 ;5 יז סו חו ספסבּ! זב פסוחםבזם פד .55380 הַהוטסס |בהוטחס פחס אופח 5 פוחד :צ' +15 8ב סט 5א83זם פחו] צֶם 580873680 פזב 5סוחמבזם |בטוםווטחו החד .||פס 0363 פחס הַהוהובסחסס איםז .0 סס 835187 08סס פר >148|5< > <>[0< <"417="01 800058-8 21= דבב 16 183=הד10 "+61 01/ 05/6006 והמסיום"=58 םו2> <"4117="02 800056=8 21= דהבב 45 183=ה ד "+61. 02/ 05/6006 1תקסיום"=50 סות> <10<>/1%/> >] <>10< <"2411="03 80005=8 21= דבב 6 183=ה ד "+61. 03/ 05/6006 1חקסיום"=-50 טות> <"411="04 80005=8 21= זהבב36 183=הדם1 "+04.01/ 65/6006 1חקסיום"=50 םות> <10<>/1%/> >/18815< - חפפשוספט 63 חב סטסרטועל ג פחו| פסוחקבּזם 6+תפסב[0ב3 סטם , 5וסז חש חפפשוספט מַבּחַ 3 5אופח5 :15 תפר וסץ 35 836ח +0 בחן6א . 5סוחטבּזם +הפסבּ[3 הפפשוספם בחב 5אוסז ₪8 הפפאספם מב ב 5אופח5 :אא . פ|סחעל 68 קט 8א3 אבר 5הספום חב פסום פרף +ם |וב 588 חבס 50405=0/ חב 5=0 5020 585 סטם פצסטב 35 08סס 8חב5 :עד 58606 2 103016 6וחק 3 ו / . ההַחבּח0 סא . הַהוהססא .4303 :אא צחהּ 15 ... 50 .. %זסשו 5חטורח מ0סף חסו|בּ הַ555ה0ַ50 5בצו 16 :עיוד אוד 2 163006 6וחכן3ז . ההַחבּחם ס4 . החוהסס . בסבא := ... 5387 15 פאס 58 הספשוססט כבם פחס .. |ופע :אא 5 הסוח 8אבּך ‏ 5040 טחבּ 65ב סש , "מסס"=חסו|בּ 60 5פסתפזם/פז ||ב זטום פ)בד .אס :עיוד הזדוטפס 8 חב (<5ך>) אוםז 53018 פחם ץ|חם 58 |וו 1 5א83זם פחו| טחב הַחהוסבּס5 |ובּ 8סותפז טחב פסושסבּ סז סע ססחו הרע בסבזם 58 סט (<5ם>) הָבס אבפזט פה ,1 פא בח ,!|פ/ [והבּקבח5 :5 8 888 0ב ב 50 15 החד . פסוחמבּזם %חהפסב[30 חפפשוספט הַחוסב503 פס זס טח 605 .0% :אא 6 85%!!בח5 בר 5 סו סטם ... פאז סא 50 ... ז53||8 5אוסז 8 הפשוספט 0350 68 308 "מס ד"=חטו!ם החופט ... סו עצש סז 605 :עיוד = .08ב 0008 68 60 "מס ד"=חםו| 36% םב |1'1 , הפר ההוטוחסס .. +אפח 50 .צח 55| פר6 חום 636 . סח |ו50 ,,המַחב3חס סא . הַהוהססא .₪303 :15 0ף 3 ד0ס4 סם עוסח פטס פיזטח צוחם חבס 1 + , איסא , הַחו3 חב בטחב התסטופח5 ז+ס ₪5חטס5 :אא .... החו! חס חם הַחור6ץז8?9 פטס 60/6088 .6070 ./ע/ע/ע 1 16%56306] פרק 2: עיצוב דף ‏ 41 2 עיצוב ממשק באינטרנט דף לשלושה גיליונות סגנון שוניסם: אחד עבור מחשבים נישאים, השני עבור התקנים בעלי מסך קטן, והשלישי עבור מקלטי טלוויזיה. נכון לעכשיו, אין לדפדפניס את היכולת לבחור אוטומטית בגיליון הסגנון המתאים ביותר, אך תכונה וו אמורה להופיע תוך מספר שניס. אס העיצוב שלך מפריד בין המשמעות לתצוגה, הוא יהיה מוכן יותר לנצל את היתרון בהודמנויות עתידיות אלו להשגת תצוגה מיטבית. זמני תגובה כל מחקר שערכתי מאז שנת 1994 הראה את אותו הדבר: המשתמשיס מתחנניס להאצת זמני ההורדה של הדפיס. בהתחלה, הגבתי בסגנון ייבואו ניתן להס רק עיצוב טוב יותר, והס ישתוקקו להמתין לו'י. מאז חזרתי בי והבנתי כי ומני תגובה מהיריס הס נושא העיצוב החשוב ביותר בדפי טס/ו. מחקר שנערך במערכות קישורים הראה כי המשתמשים זקוקים לומני תגובה של פחות משנייה, כשהם עוברים בין דף אחד למשנהו, אס הס מנווטים בחופשיות בתוך מרחב מידע. מחקרים מסורתיים בנושא הגורס האנושי מראים גס את הצורך בזמני תגובה מהירים יותר משנייה אחת. מחקרים שנערכו ב-18% בשנות ה-70 וה-80 לדוגמה, מצאו כי משתמשי 886 היו יעיליס יותר, כשהזמן בין לחיצה על מקש פונקציה לקבלת המסך הנדרש היה פחות משנייה אחת. לרוע המזל, אנחנו לא נקבל בומן הקרוב זמני תגובה של פחות משנייה ב-ס6\, ולכן אנו יודעיס שהמשתמשים ימשיכו לחיפגע מומני הורדה איטיים. לפיכך, המטרה העכשווית המינימלית לזמני תגובה תהיה כך שהמשתמשיסם לא ימתינו יותר מ-10 שניות להורדת דף, משוס שזהו גבול הריכוז של הגולשיס בומן ההמתנה. העצה הבסיסית הקשורה לזמני תגובה נשארה זהה מאז ש-זס!|וא .8 +וספסח הציג דף קלאסי בוועידת 6 חס זסל טוח 60 +חוסן |ו3-] בשנת 1968 : 6% הגבול בו המשתמש עדיין ירגיש כי המערכת מגיבה מיידית, כלומר אין צורך במשוב כלשהו פרט להצגת התוצאה הוא 0.1 שנייה. וה אמור המידע קיים לנצח לפני ימי ה-65/, היה נהוג לומר כי: % החומרה חיה במשך כמה שנים, ולאחר מכן עליך לשדרג את המחשב למחשב מהיר יותר. % התוכנה חיה במשך עשרות שנים. אפילו אם אתה רוכש מחשב מהיר יותר, תרצה להמשיך ולהריץ את התוכנה הישנה שלך. לפיכך, חברות רבות מסתמכות עדיין על תוכנה שנכתבה לפני 20 שנה או יותר. בנוסף, אפילו כשהתוכנה שודרגה, עדיין הוכנסה כמות גדולה של קוד ישן לגירסה החדשה (משתמשי חזסש עדיין סובלים מהחלטות עיצוב גרועות שנעשו בשנות השמונים לפני שהיתה למיקרוסופט מעבדת שימושיות). % המידע קיים לנצח. לאחר שהקלדת, לדוגמה, כתובת לקוח, אתה רוצה לשמור את המידע, אפילו כשנמאס לך מהחומרה והתוכנה הישנות. אותו הדבר נכון ב-60/. אורך החיים של החומרה הוא ללא ספק קצר. כל אתר מצליח נאלץ לשדרג את השרתים שלו כמה פעמים בשנה, ואנו יודעים מהו מצבם הלא יציב של הדפדפנים ותוכנות אחרות שברשותנו. נתוני פ6\ (לרוב בדמות דפים) צריכים לחיות זמן רב יותר מאשר חומרה ותוכנה של 60/. למרות שרוב המשתמשים מעיינים בדפים חדשים, הדפים הישנים עדיין יעניינו חלק מהמשתמשים. לדוגמה, לחברת חט5 יש עדיין לקוחות המשתמשים כמעט בכל מוצר שנשלח, ולכן המידע אודות מוצרים אלו עדיין מעניין אותם. אפילו דפי המכירות יעניינו לקוחות צד שלישי שעשויים לחשוב על קניית ציוד ישן מחברה שעברה למחשבים חדישים יותר. ל- חַט5 יש אינטרס לתמוך בלקוחות אלו, אפילו אם החברה לא תרוויח אגורה מכך שהם יקנו ציוד יד שנייה. לקוחות אלו יכולים לחתום על חוזה שירות, וללא ספק הם ירכשו את השדרוגים הבאים מאוחר יותר. ניקח, כדוגמה נוספת, לקוח שמעוניין לצפות בסרט 58660 פָום 6חד של האמפרי בוגרט משנת 1946. ברור שהוא יוכל למצוא מאמר מהזמן האחרון במקומות כגון 88חהוחסחו6, אך האם לא יהיה זה מעניין יותר לראות מה כתב 65חחוד א>זסץ ש6 פחד על הסרט בשנת 6 הגיוני שסטודנטים לקולנוע ירצו לדעת כיצד הסרט התקבל בנסיבות בהן הופק. דוגמה זו מראה כי ל-פסוחוד יהיה אתר טוב יותר אם יחזיקו גירסה מקוונת של דפי העיתון שלהם מלפני 50 שנה. המסקנה ברורה: הדפים המעוצבים כיום עשויים להיות בשימוש במשך שנים רבות מהיום, ולכן על המעצבים לסמן את המידע בצורה הסטנדרטית ביותר שניתן לסמן אותו. בנוסף, נסה ליצור מידע בעל ערך מתמיד עד כמה שניתן. תיאורטית, תוכל תמיד לחזור אחורה ולתקן דפים ישנים, אך יהיה זה יקר מאוד, וסביר יותר שהדפים הישנים יימחקו - ויחד איתם תימחק ההזדמנות לספק ללקוחות יתרונות נוספים. פרק 2: עיצוב דף 43 אתה יכול לסייע למשתמשים בניבוי זמן התגובה של הורדת דפים גדולים או קבצי מולטימדיה, על ידי ציון גודל הקובץ ליד הקישור. 4 עיצוב ממשק באינטרנט להיות גבול זּמן התגובה של כל היישומוניס (פ168סק) המאפשריס למשתמשים לעבור, להגדיל או לטפל ברכיבי המסך בצורה אחרת בזמן אמת. 6% שנייה אחת היא גבול הזמן בו שטף המחשבה של המשתמש לא יופרע, אפילו אס המשתמש יבחין בהשהיה. לרוב, אין בורך במשוב מיוחד בזמני השהיה של בין 0.1 לשנייה אחת, אך המשתמש כן מאבד את הרגשת העבודה ישירות מול הנתוניס. כשהדף החדש מגיע תוך שנייה, משמעות הדבר שהמשתמש הגיע לדף ללא השהיה בלתי רצויה. > עשר שניות הוא הגבול בו המשתמש עדיין מרוכז בדו-שיח. בהשהיות ארוכות יותר, המשתמשים נוטיס לעבור למשימות אחרות תוך המתנה לסיום הפעולה על ידי המחשב. כשהדף החדש מגיע תוך 10 שניות, גס אס הדבר מטריד, לפחות המשתמש נשאר מרוכז בניווט באתר. לרוב, זמני התגובה אמוריס להיות מהירים ככל האפשר, אך קח בחשבון כי המחשב מסוגל להגיב כל כך מהר עד שהמשתמש לא יוכל לעקוב אחרי מהלך העניינים. לדוגמה, גלילת רשימה עשויה לקרות כל כך מהר עד שהמשתמש לא יוכל לעצור אותה בזמן כדי להשאיר את הרכיב הרצוי בתחומי החלון הזמין. חיזוי זמני תגובה בנוסף למהירות, גיוון מינימלי בשימושיות ומן התגובה הוא גס כן חשוב. לרוע המזל, זמני התגובה של ה-60/ שוניס מאוד זה מזה, וזוהי אחת מהסיבות שבגללה המשתמשים כה זועמים על איטיותה. שביעות הרצון של המשתמשים תלויה בציפיות שלהם וכן בביצועי ומן התגובה הממשלים. אס אותה הפעולה מתרחשת לעיתיס מהר ולעיתים לאט, המשתמשים לא ידעו למה לצפות, ולפיכך לא יוכלו להתאיס את עצמם לשימוש מיטבי במערכת. אס הגולשים מניחיס שהפעולה תהיה מהירה, הס יתאכזבו כשהם ייווכחו שההיפך הוא הנכון. מצד שני, אס הס מצפים שהיא תהיה איטית, הס יהיו סבלניס יותר ויקבלו בהבנה את אותו זמן התגובה. תופעה זו היא אחת מהסיבות בגללן יש לשמור על אחידות זמן התגובה. אס אותה הפעולה תימשך תמיד אותו ומן, המשתמשים ילמדו מה עליהס לצפות מהמערכת. כל מה שתוכל לעשות כדי לייצב את זמני התגובה של האתר שלך יביא לשיפור בשימושיות. זמני התגובה של השרת הגידול ביישומים מבוססי 0 )), מסחר אלקטרוני, ובהתאמה אישית גורמים לרוב לכך שהדף המוצג חייב לעבור חישוב בזמן אמת. כתוצאה מכך, ההשהיה בטעינת הדף נקבעת לא רק על ידי השהיית ההורדה (עד כמה שהיא גרועה) אלא גם על פי ביצועי השרת. לעיתים, בניית דף מערבת גם קישורים למערכות 35| או לשרתי בסיסי נתונים, דבר המאט אף הוא את התהליך. עם זאת, את המשתמשים לא מעניינת הסיבה לזמני התגובה הארוכים. כל מה שהם יודעים הוא שהאתר לא מציע שרות טוב. זמני תגובה איטיים מתורגמים לרוב ישירות לרמת אמינות נמוכה יותר, והם תמיד גורמים לאיבוד תעבורת משתמשים באתר משום שהמשתמשים מעדיפים לעשות את העסקים שלהם במקום אחר. כדי להימנע מכך, השקע בשרת מהיר, השג לעצמך מומחה ביצועים שיבדוק את ארכיטקטורת המערכת ואיכות הקוד שלך, וישפר את זמני התגובה. לדוגמה, אתה יכול לסייע למשתמשים בניבוי ומן התגובה של הורדת דפים גדוליס או קבצי מולטימדיה על ידי ציון גודל הקובץ ליד הקישור. ככלל מנחה, יש לציין גודל קבציס שזמן ההורדה שלהס הוא מעל 10 שניות ברוחב הפס המתאים הזמין לרוב המשתמשים. אס יש לרוב המשתמשים שלך מודם אנלוגי, עליך להזהיר אותם אם מדובר בקובצ הגדול מ-50. בעתיד, אני בופה שהדפדפנים ישולבו עם שירותי ץאסזק שיעקבו אחרי רוחב הפס ואיכות השירות של אתריס בהס ביקר המשתמש בעבר. על ידי שימוש במידע וּה, הדפדפן יכול לשנות את תצוגת הקישוריס תוך הסתמכות על השירות המצופה. ניתן להציג, לדוגמה, קישור שאינו פועל לרוב או כזה שנותן שירות איטי בצבעים דהויים. מידע זה יסייע למשתמשים לבנות את הציפיות שלהם לפני שהס לוחצים על הקישור, ובכך ישפר את השימושיות המקיפה של ה-ספ6ש. עס זאת, הבעיה היא שזמני התגובה אותס חווה המשתמש נקבעים על ידי החוליה החלשה בשרשרת מהשרת אל הדפדפן: > תפוקת השרת. זו לא אמורה להיות בעיה משוס שעלות החומרה היא החלק הקטן בפיתוח אתר 60 )), אך אתרים פופולריים מופתעים לעיתים קרובות מתעבורת נתוניס המתעצמת וגוברת, והס אינס משדרגיס את המחשביס שלהס בקצב מספיק מחיר. %% חיבור השרת לאינטרנט. אתרים רבים מנסים לחסוך בעלות החיבור ונמנעיס מלשדרג, למשל, חיבור 1ד ל-13 אפילו כשהשירותיס שהס מציעיס רווחיים. > האינטרנט עצמו. למרות שהרשת עוברת תהליך שדרוג בלתי פוסק, יש לה עדיין צווארי בקבוק, במיוחד בחיבורים בין ארצייס ובזמני שימוש שיא. 6% חיבור המשתמש לאינטרנט. כפי שצוין קודס לכן, מהירויות החיבור של רוב המשתמשים נמוכות מאוד והן יישארו כך עוד כמה שנים. % מהירות העיבוד של מחשב המשתמש והדפדפן. בעיה זו נדירה, למרות שהצגת טבלאות מורכבות עלולה לקחת זמן משמעותי במחשבים איטיים יחסית. פרק 2: עיצוב דף 45 האתרים הטובים ביותר מהירים בשנת 1999 מדדתי את זמן ההורדה בדפים הראשיים של 20 אתרי ) מובילים. חצי מהאתרים היו האתרים הפופולריים ביותר באינטרנט, והחצי השני של האתרים היה שייך ל-10 החברות הגדולות ביותר בארה"ב. זמן ההורדה הממוצע להורדת דפי החברות היה איטי להחריד, 19 שניות, ואילו הורדת דפי האתרים הפופולריים לקחה שמונה שניות בממוצע. סקר פשוט זה מוכיח כי האתרים בהם יש את תעבורת המשתמשים הגבוהה ביותר מהירים פי שניים ויותר מהאתרים שנבנו על ידי חברות גדולות ומפורסמות מזמני הכלכלה הישנה. אני טוען שהמסקנה מסקר זה היא: בגלל שהאתרים הטובים הם מהירים - יש בהם תעבורה גבוהה של משתמשים. לכל אחד מהשלבים הללו יש השהיה משלו בזמן העברת דף 60/ מהשרת למשתמש. לרוע המזל, ההשהיות מצטברות, ולפיכך לא נקבל ומני תגובה טוביס פשוט על ידי שיפור חוליה אחת בשרשרת. כשאתה משדרג את המחשב ממודם רגיל לקו א150, אתה מקבל לרוב ביצועי ס6/ כפולים, ולא פי חמישה, כפי שנראה לכאורה ממהירות הקו. הורדות מהירות, חיבורים מהירים אס ניקח בחשבון את העובדות העקרוניות של הגורס האנושי ורשתות המחשב, נגיע למסקנה אחת: נושא המהירות חייב להיכנס לחישובי העיצוב של דפי טס/. למעשה, נושא זה חייב להיות הנושא החשוב ביותר. כדי שגודל הדפים יהיה קטן, הגרפיקה צריכה להיות מינימלית, והשימוש במולטימדיה צריך להיעשות רק כשהיא מוסיפה באמת לכך שהמשתמש יבין את המידע. הסר גרפיקה, הגדל את מהירות התעבורה. אין פשוט מזה. עם זואת, כשקיים הצורך בגרפיקה, נסה להוסיף כמה עותקיס של אותה התמונה במקוס להשתמש בתמונות שונות. עותקים אלו של אותה התמונה יעברו מהר יותר משוס שהתמונה כבר תהיה בזיכרון המטמון המקומי של המשתמש. כשמדובר בדף יחיד, שימוש מחודש בתמונה יהיה טוב עבור תמונות קישוט קטנות כגון לחצנים, חיצים וסמלים. למעשה, אם תעשה שימוש חוזר בערכה של סמנים חזותיים לא רק תאיץ את זמני הורדת הדף, אלא גס תוסיף לאחידות האתר שלך. לעיתים, אתה יכול לעשות שימוש חוזר, בכמה דפים, בתמונות גדולות יותר כגון תמונת מוצר או תרשיס זרימה. כשתמונה גדולה נמצאת בשימוש, היא צריכה להיות בעלת אותה משמעותה מדף לדף, משוס שהמשתמשים יזהו לרוב את התמונה. אם אתה רוצה להעביר שני רעיונות, יהיה עליך להשתמש בשתי תמונות גם אס הדבר יהיה על חשבון ומן ההורדה. (בעמוד הבא) רוב העיצוב באתר זה של ד5א6 נעשה על ידי שילוב תאי טבלה צבעוניים עם גופנים מעניינים. הדף אינו דורש הורדת כמות גדולה של גרפיקה. תיאורטית, הגרפיקה היחידה בדף היא סמל האתר ותמונת כותב הטור. מעשית, גם הכותרת "פסחו1ח50ז6ק" היא גרפיקה בגלל הנקודות הקטנות והמראה המשופע. הכותרת "דא6 ז0ו50660 3 8ַחו₪86" היא טקסט טהור בתוך תא צבעוני, וניתן היה לנהוג כך גם בכותרת "8|865ח50זסס". 6 עיצוב ממשק באינטרנט המשתמשים אוהבים דפים מהירים מעבדות ק₪0 הן מעבדות רפואיות. בין לקוחות ק₪0 נמצאים בתי חולים, פיסיקאים, וחברות המעונינות בבדיקות תעסוקתיות. חספח6וו5 ץזסה, מנהל הרשת של קנוחה, מדווח כי האתר חס30.6!-קטזה שאו תוכנן כך שכמעט אין בו גרפיקה כדי להאיץ את זמני ההורדה. כשהאתר נפתח, הלקוחות הוזמנו לכתוב את הערותיהם על האתר בטופס משוב. מתוך 1 הערות, 45 שיבחו את המהירות הגבוהה ורק לקוח אחד התלונן שהאתר "לא נעים חזותית". אחד מכותבי 45 ההערות על זמני ההורדה היה מנהל בית חולים שכתב "אהבתי את העובדה שהדפים לא נוצצים מדי ולפיכך הם יורדים מהר", ומנהל מעבדה שכתב "האתר מאורגן היטב וקל לשימוש. הוא נטען מהר ללא כמות גרפיקה גדולה". אם נתחשב בכך שטופס המשוב היה חופשי לגמרי ולא עסק ספציפית בכל נושא עיצוב שהוא, הרי שכמות המשתמשים שהעירו על המהירות מרשימה למדי. הגולשים אוהבים שירות מהיר, שלצערנו הוא נדיר ברשת האינטרנט מכדי להיות מורגש. כמובן שטפסי המשוב של הלקוחות נוטים להכיל מידע שאינו מאוזן משום שמרבית המשתמשים אינם טורחים לספק משוב. עם זאת, הניסיון מרוב האתרים מראה כי הגולשים נוטים לכתוב הערות כשמשהו חסר להם או כשהם מוטרדים מעניין כלשהו באתר. נדיר שהם יכתבו על דברים שפשוט עובדים. אם נתחשב ביחס רגיל של 45:1 בין דעות טובות לרעות, נמצא כי אכן המשתמשים העדיפו מאוד אתר מהיר מאתר נוצץ. 690 | / חש 7 צ חס מ 06 |םשח= שפח חופצ טפוא 00₪.פ/שםו ₪ 650 5 5 ]א "6ו660ק5 0 בהואםח (5/12/97) 8 בַחומ08%8|0 סטוסטב צ|חם ףטח 15 טפצל פרם חם בהותפווטטס , ו : , |פמם פ/וסחם בר סטוסםב 3!50 1:5 .>חפסחסס זפו!!וא הטוע 85סו5 טפ הַחהואספ!|-836זט 5 6 + הפס חסס 836 15 בהססם 6בחצצ ,וב 01687 , בסהפהפקאם זפ5 : פשםושפה ?ו סס ₪85 0ס הַחס! ססס ו ו %חססחסס שפח החפצוו8ם ס6 הסחוסטב חו ,657 36 חאו 5סבחד ח! ופט 0ס סחואזסע 3150 8ז'פעצ , 5ופבּם--ץ|טפח חב הפפ זם--צווב03 3 חס סט || 5% .8!טו55ס0 35 ץ|אפוגום 35 הססבּהחס)חו 6ב זבצו|פם 693 ואה-פס הר עמ ַפּהָחָ00 פז'טסץ ו חבסמחו ע||858013 פזב 5בבּפוחאוסט חן 1 6 5 28.8 5ו 485 608 50 הססספהחסס זנוסץ + . 5פטום הסםצוטסחבט בח . 80 0 08- הסט וחבט פרם +0 חס פז'טוסץ חפרם ,זפ /יסו5 זם פמטזאם: זטוםץ |188 8שצ , הבופטווס הוב+ פס ב 58בזחקבּזבּם 60 , דם6₪ פב 7 4 2 , . , 8000 5 הח ז08ופחסס 5צבּאו|ב חב בחווח חו גופץ 688 8 .חובּם ְ ו רשואו 0פזפססטוס 55סו5 טע הסוצ 135080 ע!|בצוחטחסס 8ם סס פאון וא 308 80סבּסו!מחחזסס טחטסזב סווטום זס פסוחבּזם חב ססט ו בוטו זפ זט זטוסץ 35 הַחסוב שו טופץ ספא 035 85ז ססגרס5 ב ץז 7ז3650+ 50880 פר 53%8 8/א . פפַהָבּ0 פר 85וטת558בּ . ]51045 הזו 601 606 .שש פרק 2: עיצוב דף 47 הבנת גודל הדף המונח "גודל דף" מוגדר כסיכום גדלי הקובץ של כל הרכיבים מהם מורכב דף, כולל קובץ ואדה וכן אובייקטים מוטמעים (00[6605) 60060סחם, כגון קבצי תמונה מסוג =61 או 6 אתה זקוק לקו 1ד משלך אם נתחשב בהנחה האופטימית שניתן לסמוך על זמן השהיית אינטרנט של חצי שנייה, יהיה על המשתמש להוריד דף 60/ בחצי שנייה, כדי להשיג את זמן התגובה של שנייה אחת הדרוש לשימושיות מיטבית במערכת קישורים. דפי 60) רבים הם בגודל 10088 וניתן להורידם בחצי שנייה רק אם יש למשתמש גישה מלאה דרך קו 1ד במהירות 1.5!005. חישוב פשוט זה מראה כי כל מה שאיטי יותר מקו 1ד יגרום לבעיות שימושיות בגלישה ב-60/. 8 עיצוב ממשק באינטרנט בנוסף להורדות מהירות, חשוב שיהיה גסם חיבור מהיר לאינטרנט. המודמיס האיטיים במהירות 65 כבר נעלמו מהשוק מאז תחילת שנת 1999, אך יחס (חסטוסקסזט) המשתמשיס המתחבריס במהירויות מודס נשאר והה. הדבר היחיד שקרה משנת 1995 ועד 1999 היה החלפת המודמיס האיטייס במודמיס מהיריס יותר הפועלים במהירות 005א56. הטבלה הבאה מציגה את גודל הדף המקסימלי המותר כדי להשיג זמני תגובה רצויים במגוון מהירויות חיבור. המספריס כולליס השהיה של חצי שנייה, שהיא מהירה יותר מאשר רוב חיבורי ה-60/ כיוס. במקריס אמיתיים רבים, גודל הדפיס יהיה חייב לקטון אפילו יותר ממה שצוין בטבלה. סוג חיבור זמן תגובה של זמן תגובה של שנייה אחת עשר שניות מודם 25 4% אס5פ1 פא 185 קו 1ד 15 25 מגבלת זמן התגובה של שנייה אחת נחוצה כדי לתת למשתמשיס הרגשה שהס עובריס בחופשיות על פני מרחב המידע. יש להישאר במגבלת עשר השניות כדי לשמר את תשומת הלב של המשתמש אל המשימה. למרות שרשתות אינטראנט (80ח078ח1) רבות פועלות בקווי +6חזסוזם, שהס מהירים לפחות פי שבעה מאשר קו 1ד, עדיין עדיף לדאוג לכך שרוב עיצובי האינטראנט יישארו בגדליס של מתחת ל- 10068 לדף, משוס שנדיר שהמשתמשים נהניס מתפוקה מלאה של הרשת. יוצא הדופן היחיד יהיה גישה ליישומיס קריטייס השימושיים באמת לעבודת המשתמש ואין צורך להוריד אותם מחדש בכל פעם, אלא רק כשהמשתמש מתחיל משימה חדשה. הצורך להשאיר את גדלי הדפיס מתחת ל- 348 עבור משתמשי מודס נובע ממחקר בנושא שנערך באתר רח6006.60ה6עסזק. ואצ . חברת .106 086 חסטסזק נותנת שירות לעסקיס קטנים, ולכן ניתן להניח שרוב המשתמשים ניגשיס לאתר באמצעות מודמים אנלוגיים. מנהלת האתר (6085%6/)/), ה656חהטוחה 6זווס, מדווחת כי רק 10%-7% מהמשתמשים שניגשו לדפים בגודל 8 לא המתינו עד לסיוס ההורדה. (/1 סטסס3ּ) סְחבּם-חסור א ((ו1-א100) סח8ם-סוש (28.8-566) הה06ס1 +95 3 (שוס|06 0ח3 14.4) החסססו! שסוס 35 התפלגות משתמשי האינטרנט על פי מהירויות החיבור השונות. מודמים איטיים הם מודמי 4 או איטיים יותר, מודמים מהירים הם במהירות 85, רוחב פס בינוני כולל א150 וקווים חכורים (65ח!| 68560!), ורוחב פס גדול כולל קווי 1ד או קווים מהירים יותר. לצערי, סקר זה מגיע עד שנת 1998, אך אני חושב שניתן לצפות את מערך הקווים בשנים הקרובות ולחזות כי מהירויות המודמים יהיו דומיננטיות בשנים 2000 ו-2001 (המידע נלקח מסקר אודות משתמשי 0 שנערך על ידי 0607088 ץ סח 60 ד +0 0066 1050). 0% 20.0% 100% 0% 0% 0% 20% 20% 200% 1% 0% 55-זס 5 5 6 6 6 6 7 7-זס 7 07 8 8זס 108 8 העיצוב המקורי של אתר ה 6006.60ח6עסזכ. עושעש הגביל את גודל הדף ל- 8א40%, אך באותם דפים שאכן הגיעו למגבלת ה-40%8, 30%-25% מהמשתמשים לא המתינו להורדת הדף במלואו. בלי לדעת אס דבר וה נבע כתוצאה מגודל הדף או ממידע שונה בדפיס השונים, חספ6חוווח הורידה באופן משמעותי את הגרפיקה בדפים היישמניסיי. כעת, גודל הקוב של הגרפיקה היה ההבדל היחידי. אחרי השינוי, כמות המשתמשים שלא חיכו להורדת הדפיס הללו ירדה מ- 30%-25% ל- 10%-7% בלבד. למרות שהגבלת גודל הדף שבטבלה נראית נוקשה מדי, אין ספק שאתריס משלמים את המחיר באיבוד לקוחות כשהס מפרים את כללי ההמלצה. לדוגמה, ב-5006 חסטסזם, כמות הקריאה של הדפים ה'ישמניס'י עלתה בערך ב-25% אחרי שהם עברו תהליך ייהרזיה" ונכנסו למגבלות המומלצות. פרק 2: עיצוב דף 49 1 מהירים יותר טיפ מעשי: הקישורים לתיקיה (ז0!06ס=/ץז660זום) צריכים להכיל לוכסן בסופם, כשה- ]₪ מוכנס לדפי טפ/ (יש להוציא את הלוכסן האחרון כשה-|0₪ מופיע כחלק מחומר קריאה). לדוגמה, הקישור לרשימת טורי אסטזז6|ג שלי צריך להיכתב כך: א00+זס!3 / והס6.+ו56ש.ששצצ/ / :קזח כשמדובר בכתבת עיתון מודפסת, אך הקידוד שלו צריך להיות / אסט+זס!בּ / וחסס6.ו56ש. שצששש/ / :שח עבור הנחיית הקישור בגירסה המקוונת של האתר. הסיבה להכללת הלוכסן בקישורים מקוונים היא כדי למנוע הפניה מחדש (ח6600זו60ָ) כשהשרת מודיע לדפדפן שהקישור מתייחס לתיקיה ולא לקובץ. הוספת הלוכסן לתגיות זח במקומות המתאימים תפחית את ההשהיה בכמות קטנה אך מורגשת, ולכן כדאי לך לעשות זאת. 50 עיצוב ממשק באינטרנט צפייה במסך הראשון הענייו החשוב ביותר, כשמדובר בזמני תגובה, הוא הזמן בו המשתמש רואה מסך מלא במידע שימושי. פחות חשוב לטעון את הדף במלואו יחד עס כל ההדגמות, אס המשתמש יכול להתחיל לבצע במהירות פעולה הקשורה למידע מסויס. הנה כמה הנחיות לטעינה ראשונית מהירה: % % לראש הדף צריכה להיות משמעות אפילו ללא תמונות (כלומר, יותר טקסט ופחות גרפיקה). השתמש בתכונות הטקסט ד41 עבור תמונות שהמשתמשים יוכלו להבין מה הן מכילות לפני שהס יראו אותן. רוב הדפדפנים מציגיס את הטקסט של תגית ד41 במרחב השמור לתמונה כל ומן שהיא לא ירדה (למידע נוסף אודות תכונות ד1ה, פנה לפרק 6). הדפדפן חייב לשרטט במהירות את ראש הדף. עס זאת, הוא יוכל לעשות זאת רק אס יש לו את כל המידע הנוגע לסידור הדף. ודא שישנן תכונות ה דפסז/ש ו- 1516 בכל התמונות ובעמודות הטבלאות. טבלאות מורכבות לוקחות לרוב זמן העברה ממושך יותר, ולכן כדי להפחית את מורכבות הטבלאות, אתה יכול להפריד את המידע לכמה טבלאות. ראש הטבלה צריך להיות פשוט וקל להעברה. (בעמודים הבאים) שים לב כיצד הדף הראשי של הסה בכתובת /רח2006%.60. צוצאו/ /: קת 56 מבצע את עבודתו כראוי בין אם המשתמש ממתין לטעינת הגרפיקה ובין אם לא. כמעט כל הגדרת הדף נמצאת בקובץ !ד קצר יחסית, כך שניתן להציג את הדף מיידית. רכיבי הדף היחידים שלא ייראו בתצוגה הראשונית הם הלחצנים שבעמודה השמאלית, אך זאת בעיקר בשל תכנון לקוי של הדפדפן (הדפדפן אמור להיות חכם מספיק כדי להשתמש בגופן הקטן ביותר להצגת טקסט תגית ד]4 כשהשטח הזמין קטן מדי מלהכיל את הטקסט בגופן ברירת המחדל). ניצול תכונת 6צו|4-ק66 של סדדו הגירסה המקורית של שד1 לא היתה יעילה בהורדת דפים מורכביס המשלביס תמונות ויישומוניס רביס. הפרוטוקול היה מיועד לדפיס פשוטיס בהס השתמשו בשנים הראשונות של ה-89/ש. הבעיה העיקרית בגירסה זו היא ש-₪4117 היה פותח חיבור ק1/ק0ד חדש לשרת לכל ייפגיעהיי טוח), אפילו כשכל הפגיעות היו אובייקטיס המרכיבים דף יחיד. לפיכך, כל סמל נוסף או תמונה בדף יגרמו לבזבוז אמן, בו השרת צריך ליצור קשר עס השרת ולפתוח חיבור חדש. הזמן שנדרש להקמת הקשר עבור קבצי תמונה קטניס היה לרוב ארוך הרבה יותר מהזמן שנדרש להעברת המידע עצמו. גירסה 1.1 של פרוטוקול 9ד₪1 הציגה את רעיון חיבורי 6צו|4 ק66א (השאר פעיל), כלומר כשהשרת והדפדפן משתמשים ב-1.1 פדד (או גירסה חדשה יותר), יישאר חיבור אחד בלבד כל ומן שישנס אובייקטיס להורדה. החסכון בזמן הנדרש להקמת הקשר החדש עבור כל ייפגיעהיי, מוריד את זמן ההשהיה במידה ניכרת. זמן התגובה בטעינת דף יכול לרדת למחצית מאורכו הקודס על ידי שימוש בטכנולוגיית 6עו|4 ק66א. לפיכך, מומלצ מאוד לשדרג את השרת שלך לתוכנה התומכת בטכנולוגיה זו. קישורים הקישוריס הס החלק החשוב ביותר במערכת קישוריות: הס מחבריס בין הדפיס ומאפשריס למשתמשים לעבור למקומות חדשיס ומרתקים ב-65//. הקישורים יכולים להופיע בשלוש צורות : %> קישורי ניווט מבני. קישורים אלה מתאריס את מבנה מרחב המידע, ומאפשריס למשתמשים לעבור לחלקים אחריס במרחב. דוגמאות טיפוסיות הן לחצני וקישורי הדף הראשי, המעביריס לסדרת דפיס הקשורים לדף הנוכחי. % קישורים המשויכים לתוכן הדף. קישורים אלו מופיעים לרוב כמילים בעלות קו תחתון (למרות שהם יכולים להיות גם מפת תמונה - 10806130) והס מקשרים לדפים בעלי מידע רב יותר אודות הטקסט המנחה. ל רשימות התייחסות יפנה ל-..." (50| 566). קישוריס אלו מיועדים לעזור למשתמשיס למצוא את מה שהם מחפשים, אם לא הגיעו לדף פרק 2: עיצוב דף ‏ 51 7 ב :| 5 5 5 5555[ וו דה ות פוטס ץ 5 וק 6 1668 זס] 50066 זטס + וס ו 7 א סו דחם | דפאחםם הויו 6 6חוח59 5ע0 230 פחד ?ו 3 5 זוסחאוסזם 81 תז8זח| 351/88 | 006 204% מפ1 החפז1 510185 קד /ם קט8ז50 131851 108 11/85 חסזוום התפטחגּז ו 108 801107 וח 5 תסוחש,.סח! , פחסטו50 אזסשפצו והות :ססר | [פחזפ!ח| 8ח011 03 |855818 3 40030080 8 8 ך .18 8ח56 אסוטוף-ח08+16 3 01 08 5ב . חוהָּהּ טזסה! סזב 5עָ03 עקכבו] זז ח! 18 10 15ח0וז 8ח1 השס זו 61315 ץח 60 חב 08 10 בח %ח00 ופצ ספ זסז 8010 פהסתס" 8ח)) 03130358 הַהורחבּח הוה וחסט צם 80ח13008 ₪8 10 זס891ויחו 5צ00 30 858ח1 חטז 10 שפח פא : 888 שו (185ו9 0חו8ם 85105ז |הוסחהּחח פחז עסופ |וטם .005 1ס ||3 זסז]ו חוגוז 18 פזסזפם חאוסו 80ז-תוח צֶם 80 0ספז -777777709090 :חסונו ₪10 .908185 או דפטנ פוחד = טסו הסטוו וסור 266 סף בשע +0016865 6חד :ספ 6ח+ חועע ס> אוסרן ב שפח 70117 85 ספ 6 זט סץ 0 5ז60ו5וע סו 8 10 פאתפּחז1 , 8!|חעו 3 פזוגוב | ופ טחוט!וגט-00 173 זגוסץ זט 08 תפז 5פהוטחפ הזה 58 זו 1 8660 רחפ|מסזם זגוסץזס 03 זב ע8ח1 , הסו50 !הזוס אצ ו 100606 הטפ הז 563 זגוסץ חומ שחו 8885ז הסזוות 13 116 חחה. 5 5 5ו0|3א8 508 סח .ספא פוחז שוזסוזם 31 זטוסץ 8ם טוגוסח5 פזפוו 0 ו ל שסופ ||ט= 111851 00 סז איסת 1% .50778 זס1 858|-0 8/8 פא ואוש חה זסז פרחו 5'ז! פע3ו , 7 0 --188 |הּחסוהחזפזחו 6עחם 6ז3ו] 6.40 פס 3 חועצ 0 !וט וז -0זה ח-ערח-תס-ח ססז-8זסחח-סח פחז הַחופַחו5 מסזם שח חושצ 30 518485 פופ שת 0 0 שאופח פחז זטזח= סח ... 507 601 ?980 שסזם |וטת .פצוז הזב 18031|51 6.40 3 :הסוזטו50 801ח8ם זסןחט! ט!| 3 בע חב 0ז03ז8519וו1 5דסטססחהק דסהר זםז 560801018 זופח1 |ופשחגו 5 שש +10] חס +3065.] 6+ +56) ו 5900 פח1 ד=ם וטס פחווופז וו הסט זסז 50878 תז0ות! 202 13517 זהסז81זס51 טפ 3 סג 581 סז וחב זפים 5ה0ו301 1135 030 678011 | שחש זטוס סח סח 0851 85| פזסזספו | 58 פזפעשםיפז 6תו082ו פופ לחפ! ד זטום 48% 8חז | 601801 מס פח1 8חו60!0 ספוחבּח פזפאוסיםז 8082108 כ ופ |וטם .1פץ פווטום הסוח 30 858ח1 חס 081815 .זהפץ חוד 8חז זט זה טב ההות 3 0ח3 [ס00ן 133 פ'ותם! החהוסט|סחו ‏ 5118 מפצ פח311 615טוהסזם זסת צהם פד חס אס6וק זפ [וטם .ה05זח|30 זסז זט הּחג 5118 טפ הסזסח-מסז פז ןוג 036 4 צעחסעצ חס מחו08 הבח 88זסצו ההוחזסצז זגוסץ הוח חב הבסז פחז | סח .מ פצום עְפחבּם מסוס3ּו גוסץ זו הסמח 10 הח %ח9085 3008 5808 פח1 אום!וס .088|85 חס זסזספזום הספד 60 .20066,./עעשע/ץ 2 עיצוב ממשק באינטרנט )| 27 טנ צ סוא טוא הזש זבובה 20 טח חס עד 204 0פז חזפז 9101185 מ[סד ז0ז/80 פאופח :סו פזפ זב עה עקבו] 8 0 שבח 0% גוס" וחוהּקבּ 0 8 10 זס1פשחו חםּ 5 |8|סתהּחח פח1 עם 80-חטוח עֶם 80080ז פחופט :890 10ם .85וח8 וחספ 8 3 ז החס! הסגורח יפר זפופחה ?וז 85וחו1 הסט 8 10 5)חפּח 1‏ פ|וחע 3 פווגוב |3ס0ו8 אספשש וס טאהוחור ,2300085 .ופצש 65זועע-חוו 8 וחב 15נוס-136ם 1 08 זסוצה 8 תהוחגות .508 זס1 855|-0 8 א םר חה זסז הוחו 5'זו טעפוו 0 --/1181 |חסוז3 תז9זחו 18 ז50ח8ס זס |ס0ח60 ]] ז518וחוחח3 8110גון זום עסח ... 51 ]00 ?ע930 זסחזט! 6!)!| 3 )בע 4 30 351070370 זסז 5680018 זופת |ופיחגו 5960 8ח1 , דם זטס פחווופז וח 0 זסז 560808 זפ 1358005 630 018011 הפ לחפ! ד זו 481 פחז שופ |וט= זפץ פזוגוף צבם שחד =0 אס6ום פיז סוהוב// 3036 4 צעחסעש חס בחו8ם הבח פ8זסשל פהותזסצז זגוסץ טחו/יפת חב הבסז פחז 1 סחה .סט פצום עְפחבּם מסוס3ּ! גוסץ זו הבח 10 הח %ח085 30108 5308 פח1 שוסו|ס .088|85 חס זסזספזוס חספד 60 .2006,./עעשש/ 7806 8 5 66. 4 א 0סח6ח 2466 , סק | יכ - שד | ] | דחם. ]ב זדפהםם 8 06חו26 6% 230 פחד +ווסההאטסזום 6 ז6זח! 3 ל 35 זטסחאוסזם 81חז18ח| 391/85 1 צם 5078 31851] פח1 בצ ]| חסזוום הזסחפּז 5 חסוחשצ , סח! , פהסוזט!ס0ם אזסשפון ]זז | 8ה11ס 03 |08ה8558 ח3 030080 8 .88ח56 אסוטף-חסו-+08 3 01 הק 35 5 פזןח| 108 10 15חטוז חן פחאוס | 5רחו6|3 צֶח3 חספ םפש זס 'ץ8610זו = הסתס" 8ח]) 03180358 ההוחחבּת הוההחסט 0085 030 1858 חטז 10 הפ פא : 888 שו (185ו5 סז |וטת .105 ||3 זסז זו חוטז צפחז 8זס81ם חצויסז 16856 או דפטנ פוחד + 0 עְבּ// 65% 00168 שחחד :ט6/ע 06ז חועש 0+ עוסרן 6 זווס 60 5זס)|5ו/ע יוסו שחו!וטום-36ז1 זגוסץ 1 03 + חפזבּ 85חוחח8 5630 זו 1 80 . ההפומסזם זטוסץזס 03 פזבּ 108 הסטטוספ 8|ח8 ה6ז583 זטוסץ סחוה הסנו צחצ פה 8יפז חסו!|וח3ּר] פחהחחה פחו3ּ|סאם 508 סח. .א ספ פוחז שוזסוזס 1+ זטופץ 8ם בוטוסח5 915 סופ |וט: 11851 00 סז איפת ואוש שצחם 36 6.406 66ז= 3 חועצ 851ג!ם 8עוז0-0ז3 ח-ערח-חט- ה ססז-8זסרח-טח פח1 הַהופַחו5 מְסום 8 חואו סח 51885 פיפ הת0מית0 0 שפח פחז זפוח= צזסזם |וות .פשוזם הזב 51ו|803 6.40 3 :הסוזטו0פ 861ח8ם פ5דסטססאהק דסה 5 שש 10%] חס 3%65%.] 06+ 56% ות 1351720 זה ז8זס51 ספ 3 קט 581 סז זחבּ ץחו זטס חח חב 851 5! פזסוספשו | 53 פזפשוסחופז 6תו8082ו 1 ססן 8ח1 8חו010 הפחחבּח פזפעוםויפז 6תו8082 5 8זסוח 30 1858 חם 818115 .זפפץ חוד 18 זסז זט הבוח 3 0ח3 |0ס1 8ש13. פ'ם! בחוסטוסחו ,5118 ספ 31108 5ז6נוססזס זסח 50 |וטת .ה05זחן36 ₪ זסז זטהּחבּרת 5118 מפ/ הסוסח-מסוּ (806וח1) --ז .2 = | וב ת-א = +24 --- | ] = רו וו -ד אכ ] --- וא ] -ן אווושיןך | ור 2 |אם] ---- | | -ו- ו | חוסנ סם 166 ברו רהז | חס 657 || רח= == | זחוסק 06 | פרק 2: עיצוב דף ‏ 53 (.016+81!5 זס] 676 א6ו61) "דד= עצטשרו "םש 0 .6!כןססכן [הוחיוסח צ 12500 .>זסטחופחס עמ זווטם 997 |מעופה שה 1 "שחש 6 8308 +8 1.819 חס 5013 36 0 16 4 פשסח הו 10 00 6116אם ,36 6>וו !|| 288 עֶם דח .ח.3 8 ,1887 ,17 עוטך |₪םת סח חופצ 4 פרוד בחהב (4560) 5חס בסוחטוווח ₪ 48656308] שבבקט | 3661 .251 חו ||88 ₪30 ז הח פסחבו!|ב חב סבסהטסהחב פצבּח (017א) בפופאם ב ו 3 פסטוטסזם [ווא+ חב קהחסס פחוהַחם הסזב 58 ברס חסוח/עצ וסט )הסח 8 310 10 חחח |ב סב החפסחו בחוטויסזם 587108 |בהפסבּםוצבּח שופח 1 פרוד ח8!פסזק 3135356 . הסה הזחו וח סט זז ו חאָ10180 40 8016 ,46150306 , סוסא 0 הבוו 48050358 |בהססבהחפטסחז ספטטטס חורא סל = בה חו עה3 687 חב הבמב זם? הפזטפם פם |וואו סו 0 פ קט ההםההַחוא פפוח/ סחב בסחבז זם? חב זפ ובּטום הזוח ה 10 0 65 הט 3! הס זב ופ 3 506% 8550308 ,זא בּגום הטוס פרט חו פע ספוט 2 5 -- זב 0085006 פרם זס+ ססרוב' הסועאו מוה5זפהאבּם בואה חתופו שו יר שחר החסה חו פצו| לחפאו ₪36 5סו5 3 החהסבּפזס , הסזבו חו !וזא זסחעה 5 פח טוח 8805 6 01 ה300ז8 08 1121 חפט סל חבס 3 15 083 פר , 48650308 זם= 5 ד פ/שם|] 8 | 8סו5 80 8|ט הטוב סו החסז? 85גוח8פז שוש 6% 6/ שח 2 ו 8 חס 8|פ ב 05% בר הַהסוחב--85%356 405 0 150% לוס = = .חהפסחסט הַהוסטסזכ סטסחסוו--886 תפסח1 "וועיי ו | | 30 בחבזם |בטסום פזסוח בּ שוחסספם סף פסחבּחס ב 5ו סו ו ו .5 הפפ הַחו5פ/יסב אופח פסבפזס 0 שק חפטם 5 160 10 3508005 0 חס 1630 טח 8 6‏ , ואפן 5 53 8 שא ₪ו]ם 08ז ה הפס-ם . פופו חס 10% קט 00% !שק > כ חהוחז83 % פחו!0 60014 שו1פזק חט5 > ]10 85 שח 8/8 358 פץ5 |[|וחור ?לט וו 500 וח0ז1 0106זק 3165 6 5 פ5הַחוחז93 , הווחב סז הרט זם+ 8|טו5הס50פז 8ם ||ואו פסופא= 8 )0 53!85 30 טחב ,פהססבּזופםם , הספסטטסזם סט ,81500580 סח 8 זפ 5וחחפ6 |בופחבּחות . בסו 5 516 8וח8ץפז ב ספצ|סצחו סו 530 85סזטום5 , 85 |בסס| זפאם !וו פטוטום |הססבּחזפסחו פחד 8ב !ספ ||וא 15 ,הפוחב חב סחב , הססב תזסזחו 90503085 + הסופזפ |בהססבחחססחו פה .38 300 ח50פס ה חחזם+ |פהחבּחם 3 ססחו 280וחבםזם 8ם |וואו פסוטם הפחד הטטטסחו |וואו צ|ובוחו צְפחד . 5סומסף בהחטסזבּ 580גוסס+ 8 חב 5זבסוםוחסס , הסהבחח חב 55פחופגם 61168 6 / ב .66 אא) "+1 56+ 5 3,600 פזוח 10 50סזסוו : 0-5 ד 4ב פשססוחססצוב ,0385 טחב הט ,שפחזפסח[ ו 5 ,05585| 5)ח וז 5 אוזוום. בוחה , 5אופח , |פצב ,> 50 ,הַחהוםפח5 , הַההסססוח ל את 3 ו מ תרשל כל 63 5605 863 חפן 5 6 ₪ ב 5 שפח 1613160 הפ 601 606 ./ע/שעץ 7 ,20 |וזק פצו| 0985 00148 48503086 ססהגצל * 5 זםשווס 7 ,21 |וזקה עך 0+ חס חזטץ 5פַחוּהַח6 00ז583 %סס.זסאם 7 ,18 131600( |083 516 06ב 16150 ססחביר 0 םוט 4 עיצוב ממשק באינטרנט (בעמוד הקודם) אתר וה0ס6/5.6 מספק רשימת כתבות קשורות בסוף כל כתבה, ומעודד בכך את המשתמשים לקרוא יותר דפים באתר. הקוראים שהתעניינו בסיפור הכתבה הנוכחי - כלומר אלו שעברו לכתבה זו מהדף הראשי - הם המועמדים העיקריים לקריאת הכתבות הקשורות, ולכן הם מקבלים קישורים לכתבות אחרות שייתכן שהחמיצו ו/או ייתכן שהם ימצאו בהם ענין. הטענה העיקרית שלי כנגד העיצוב הזה היא שעדיף להציב את הקישורים הקשורים בחלק העליון של הדף היכן שהם ייראו על ידי משתמשים שלא סיימו לקרוא את הכתבה עד סופה. העמודה "18%65% 5" שימושית פחות בהקשר של דף זה מאשר הכתבות הקשורות. המשתמשים יכולים תמיד להשיג את הכותרות האחרונות מהדף הראשי, וממילא כנראה שהם הגיעו משם. הנכון. אס נתחשב בקושי שבניווט ב-טפ/ץ, הרי שהמשתמשיס מוצאיס את דרכס פעמים רבות על ידי סדרת קישורי ייפנה ל-יי טובים. תיאור הקישורים קישורי הטקסט מעוגניס בטקסט שהמשתמש לוחצ עליו. טקסט מנחה זה אינו צריך להיות ארוך מדי משום שהמשתמשים מחפשים את הקישורים בדפים, כדי לראות מה הס יכוליס לעשות עס כל דף נתון. הקישוריס בדף 69/ דומיס במידת מה להסבריס בכתבות בעיתונים מודפסים: הס נותנים לעיני המשתמש משהו להעצר עליו בוּמן סריקת כתבה. אם יש יותר מדי מילים בקישור, המשתמש אינו יכול להיעזר בו בסריקה. רק המידע החשוב ביותר (מונחיס קשורים) אמור להופיע בקישורי טקסט. הכלל העתיק ביותר בעיצוב פ6/ הוא להימנע משימוש בטקסט ילת כאן'י (6פ4 06ו61) כטקסט מנחה בקישורים. ישנן שתי סיבות לכלל וה: ראשית, רק המבקריס שברשותם עכבר יכולים ללחוצ על הקישור, ואילו משתמשים מוגבלים, או בעלי מסך מגע או התקן חלופי אחר, אינס יכוליס ללחוצ עליו. שנית, המילים יילחציי ו-ייכאןיי לא מכילות מידע שימושי, ולכן אי אפשר להשתמש בהן כרכיב עיצוב המושך את תשומת ליבו של המשתמש. במקוס לכתוב: למידע נוסף אודות דבורת הדבש כחולת האף, לחץ כאן עדיף לכתוב: יש לנו מידע נוסף אודות דבורת הדבש כחולת האף יש להדגיש את המיליס החשובות בקו תחתון, אך כדאי יותר לכלול טקסט שיספק סיכום קצר של סוג המידע הזמין הנוסף. למרות שהטקסט המנחה של הקישור אינו צריך להיות ארוך משתיים עד ארבע מילים, מומלא מאוד לכלול טקסט נוסף שיסביר את הקישור. ה-90) איטית כל כך עד שאי אפשר לצפות מהמשתמשים לעבור לכל קישור כדי לדעת במה מדובר. הדף ממנו הס מגיעיס חייב לכלול מספיק מידע כדי לאפשר להס להחליט מהו הקישור הבא אליו יעברו. אס יש קישוריס דומים, הטקסט המתאר אותם צריך להיות מספיק מפורט כדי שהמשתמשים יוכלו להחליט לאיזה מידע הס וקוקים. פרק 2: עיצוב דף ‏ 55 תק מצד 5107 5פץ|8חג ₪ 5עו46] 6018 אוסצ] זסק8קפאוסצז מז האאדאז 6 ן5+0" 01 6עוח6וה 1997 "!65565 8 5006 09 5 0סח1 0655 6פרהופסר1 . .₪ 5סחחם ב וטספ -7/09/97ם 0% סם וז עפחה ‏ 55בזם בשסב וחסס|ה -7/07/97ם טס טפצ 3 ותסזת ההסבפועש שסו[ו0530 ובס -7/02/97ם 58 הפס סו 35 |ובח-= וד 0000585 ץזשח68 שופ -6/27/97ם ?50 פר פזום ב חצ ; ותפ|טסיזם פרס 588 פצ -6/25/97ם 5חפסח צך זה 0085 וחבזטסזס בג טפצש |בּחסוספם צצ -06/16/97 05 ₪813 08ב םח 10 58300 זסוהוח5 -06/13/97 0-5 חו 5000 2 :פַסַבז00 טפצעש 530 וחסזס -06/11/97 04 0065 !| >3חד הססב6ח58זם פעצפש טפעש אוסוז ה -6/06/97 פסוסש 3 הסוצע סווטטס 85בויסזזום וחטחזס= טפצע סבבּחזוסד -06/04/97 פרהובסח1 6ס4] סטום , 5|וסם 3ו80ו₪ האוסס 65טח5 630303 -06/02/97 %חחזם 60 ב 4 165 5בחות 6085 |בּהופהס-8הווחס -05/30/97ם ?5 0363 60 בסטטו ח 60 בסו5 וטס 5פסס -5/28/97ם 5% 005 ברד זר ₪3 םס סוחד הסז3 58 ששו 85פחפסו | %פ5סס -5/23/97ם הזס10.6ח/60/0רח ./ש/ע/ץ הקישורים לנושאים "דומים באותו עניין" (6ח53 %6 ]0 6זסוח) הם אחת הדרכים הקלות ביותר להגדיל את השימוש באתר שלך. בכל פעם שמשתמש קרא דף ועשה קישור אליו, תהיה לאותו המשתמש גם ההזדמנות לראות דפים אחרים מאותה הסדרה, או כאלה שנכתבו על ידי אותו הכותב במידת האפשר. טור שגרתי, כגו| "!7765565 6חד 5505" של סחסט0 6ע500 או "טזחז>>6וו₪" של 3 סחה3 הם מקור ברור ל"קישורים באותו העניין". לרוע המזל, אין ל-"טזח%*6116%" קישור לכתבות קודמות בסדרה, ולכן המשתמשים נאלצים לצוד אותן בעצמם - דבר שרק המשתמש הנחוש בדעתו יעשה. זו הזדמנות מבוזבזת ליצירת עניין נוסף ללקוח והשארתו באתר. 6 עיצוב ממשק באינטרנט סאו] מממ ]= ד א ₪ א אפסאז |1064 תפהדהפע אסזאזקס =ת1ן ה6שזו50 5ז00ק5 זסן 81 תף וז "1[נסיקו מו[1 10 זיבקתנסכ 8" פעפ/יס00פג 65107062 מננוזנוצננו! קוננוסץי 2 דוס זנפו[1 81611 10 008180188 [118נונ1 ממנסכונטי/ים 5[כן 150816 כועו 1 . 8פמנכסכחן [60618י 1 19811268 לתה כןמנסט מנו-81811 4 .₪3 1 4.7 תה גג מש 8ו[1 תס פפפוננפנו ]116 11/1 צס1 1סכן5 8 תג 08שסן קתנטונמ נמו[1 מנסמו פנ8פהונ 6טונמהונוונסט טנוסינ61501 .5011108 8 ו[110כן 8פנונכןמונסט 551קזמ1 פ' 1נסיאו מו[1 01 1166 ונל 85 177 +0 סז פניך בו הזז תהטבנפו .3 5ו[1 ונג תכ מנפונמק [נפת 5ו[1 126[הנוס6 ]8סדק 5ו[1 85 +מודנ16מ1 "סיו 835 886ו[1 ,1161 ₪ו[1 [1בקו פפמוננפנומ צנפו[1 >תננ[ 10 תנפ51 85ב [סנופ +פכטוד 6[גוקר ז[נרנ1 5868פוננפנוכ [[מוונ5 81ו[1 85מתנמנביקום קנמעוסעק 8 10תג 182 205 998פחו ננפו[1 96נו8ס6טר צמווד [1/שכודק שג פ' 1076 5ו[1 זה 8ו[1 קנ 0600 5 1מודנ16ת1 5ו[1 1מו[1 הת 8פנ3נו51 זדנזפנונותג ,101 מך .18טנוסונכן צנמו[1 10 ומנ 816טנט 10 8פפתננפנומ [[וונ5 10 [פונוצמו[ט קותמשוסנש-1351681 8[ צס1 600601 --- קוננו[פנוכן מז 805 111886 18טנונוכנכן 1מו[/קו צ8פ[ט פזומיו[8 +כת 18 פתמכנ!נוטממנ6 8ו[1 זנום] .61 18 81 קי[ונס 60ו[1135 נה פסקכ[ 16מנסכנסט 18 ,901 605% 1161 8ו[1 01 88808מווז קתנע1עתננו 116 1מו1 [קנוכנ6 [פג[י51 וצ מ16]במאו-[[ עו סז [קנוסונו[1 תו[ 1 פונס סכמז6 [מבננומונטנכן116ת6 צ10 1001 8 8 0ן ונשוסה 11116160 נס/י6 פמו[ קתנענפוקוס 16מנסכךנסט עס/יס דבכנה תפו[ו פמננז 8 41 6 ו1מאו קוננקןסט קי[1תטצננוט 15 "7יו[281)" 0בנ51 טנמנסט מו[1) פסקהכן יתתנ 116 1161 תה ונה צ16נוןמנסט 8 [11קו מנכקיתה 11181 >תנ[1 10 קתו[68קם 11'8 , (פטהטונוס ה[נסישו 8ו[1 10 510161021 8 ת6מס תס תסנזטפונונסט מנט דד 0 5 זי 1תמו169181 8 18 תסנפמתכ] 11811618 פפמונופנום 61 7 צס1 +סכן8 8 ",סז צפממנות* 6|ממ[68נמננו 10 1368 תה תס 8[מוננו61 תמפמנכישו כואו1 :תכ 8ננכןפתנג [הבננופת6נכן116ת6 10 ,85910[ט ממקקטנ 5נו0ג1601וננ מו[ . 6פנטמנהכן [8סגכןסינ1 8 תג קתננתמסנ!8סמ/ר פ[נו[/ו 35968[ק תנופ ץ6]וננוסת6 זופו[1 85 זרנ18 ממנוונסט [הסגפנומוג 1601נ6כן 8 פג " מְאוס11 זי215811) 566 נה2) [** שתף , 5תמכג81סנט צנמו[1 5100 10 16196 סו[ פצמונאוס 81016 זי1ססת5 :05180188 פנוסגנמ/ר פס 1101 . פפפוננפנומ 8כ[0818 0מונ6הוננומנט/יס ת8 גו 61אנמות 651816 [168 פנוספקמנ!נוס . 76 6ו[1 הנ ?קלונהקמנסט הנמנה צומו[1 [טוננון זדפו11 .1618טמנמו[ט מו[1 01 שנס 9878 ",סנפו[תלנס/וס פפמונגפנומ 101 תפס פנפעו עו תסספ** ".ונופ 8ו[1 צ6הוננו מונסקרנט/י6 10 368מ[5 קתו[[56 מנסיקו פע ,11 עומונ[ סו 26108" וסונסקה 83 5" 621 17 81 1תהנפפנכן 6טב/ר פ/ת!נוספא6 ,וננו[1669 טבנ 1פנון" 81ו[1 158112601 1681 סשת ה8סד0 5ו[1 פקד98 עס 16007 01 מספא טבנ -1/10)2 ".8868מונ1פנומ [[מוו1פ 01 8קונ81[6ו[0 טנהונכת 600 5ו[1 01 פונס 8ג 8181160 שגופ גותה 681816 [168 01 00818 115 051 --- 1מ0צ810161 מו[1 פג 076 מו[1 ה מו[ מך 0 6סמ[כן 8 זי[[הנו1טם 11'8 , 6סננוספטע תמכג]מהוננס1תג ת8 תמו[ מנסחנ 8'+1* . 5%5[ס ע16ננוסס .88178 הננו[668 ",8מוננפנוט ₪0 5.6007 ./ש/ע/ץ 1[ 61661 3 3665 כ 6מך 5 טס תס וי וו סג 116 16 [[56 5% זיב תבמ זט 63 פח3 עפ 6 436 63 פע זפטטטם' פד ה 9 41 , [3|סח ₪ הוח 00 |בטו 3 קט הפק >זנופהפחק6תותט 08 פרק 2: עיצוב דף 57 וא כ 2 ו 1 א6!|6 שחזוורזס ב 6חו|ח0 זפוהט5ה0ס0) סח חו ב בד ויו 1 [: | : צֶףס!סהוו86ד :08= 6116 זו 00 30 פעשצסו!5 ,15הפצם 141 10<310] ד | 9 ₪ -. בנ יהצום] מצדונוודהא] חוצינ בד ור .6ח! 6013 6915 1997 ₪ %א6!ו! שספמסקפ 60 -6/05/01ח/חס./ש/ע/ע זהו אחד מקישורי הטקסט ההכי פחות אינפורמטיביים שראיתי. ח08ח0ו56 כותב טור מצוין, אך הקישור "5506 +ח6זזטס" (עניין נוכחי) אינו בר שימוש עבור קוראים רגילים. מהו העניין הנוכחי? האם הוא נושא שכדאי לי לבזבז עליו את זמני? הקישור הקבוע "5506 +ח6זזטס" אינו עונה על אף אחת מהשאלות הללו. עיצוב חדש ופשוט מאוד יכול להמשיך ולהשתמש בלחצנים הגרפיים, אך יתמוך בהם בצורת סיכום טקסטואלי קצר של הטור הנוכחי ותאריך הפרסום שלו (ואולי גם קישור ישיר לטור שלפניו, ובכך למנוע ממשתמשים שהחמיצו טור את הצורך בהורדת רשימה שלמה). 8 עיצוב ממשק באינטרנט צוסו5 << "סקט 6 06 צְהּוח וו חההח+ 5 6 וז חסו+8 וח זס)ה! 8 דוסר|פ 8 00 30058 הד חס 0168 5 0066 ||ואו ח0ו01861ז7 זט 00050 34 8 חס 11 עו 5חַ חופת הוּפָ6פ 5% 8800 ] אב ך 8% חז6+ח1 34 513%6 ח3 ₪ 8!טסטו חס וח 16 6מָז13 31 ח+ 3%65+ 1008 618 35 סח 6 ך .8% חז6+ח! 5687 3/8 ח5130ופ18 ,1056 6+!ח/ 6+ עפ 60601566 8011103 ק5 +סח 5בּח 4 חִמַָטסח!!3 +30 8ח+ 8601580 4 זפ" ג 3% ח+ 5310 110105016 38 אזס"ל 900 01 "ח 3110 ףָ !1851 כ הטפ זפ+טק וח 00 18156 146 6 0+ 86] 35ח 5חָח(91 6 סח 12 +0 ח34 1848010610 שח ח! 8צ[סשח! ]080 8|!6 + 0110 15ז151 31 חָ6וו1 3 0+ הַח|300010 ,5010/0316 | 5810 1070508 .1 80 5 6וטפ 4% .1.85 חן וטפטו3 | 1180 1 +015010 חז6ו35= 6ת1 זס1 השס 6 3105 הָ אס" 146 8 00ח3 3165 ק וח0ס .815 010 56/8 ח1וטש 5 6 וח 56/6 601 606 .ץע 5 /30 032 486 58ב פזסחו םס סחבפח אזם ססקט ץו|850803 , סַהוחזסות ₪15 האס אום|5 זטסה-88זחס בּ 5% והתםז חב 50 ל6פהחסס 60 הַחועש הפסרם זס+ .51005 80// 008355 1 פווד חן ד .רח.ם 4:30 ,11 שוטנ סצס חס 65ט| 6+ 5עְ3וק וה36ו ץֶחַס|סהח50ס ז358] פט|ט 58גו ץ|ספשזסספח ||ואו והסבסורן חב 085-סשס + 0330 0353 פר6 פומחס ס6 .1 חבּפץ פס צם 5ומח-סס הקוח 60 הן דס .רח.ק 12:15 ,11 שוטנ 4 ח3!ק 385 אסם 5 .00| ₪06 זו 60 חףטסזהז 6065 5 חטש % !סז 6חז (5)0 << 6 ן סופעו 478 הנטכחה וח כח עצפ פהסוח 7 וו0ו)3 5 זטעוזס) זוז עז סוסה 19 5! 6 וו ז6זווק60 ןח 106 5א]513 0156326 וסוס 60 5%" פו ו טחודוט5 א 87 חו סעה ו ע10 0 )3 וע : 001 וחב הבחוווס פוהחסס 8 011 6 ז'עטוד ?הסוחוחסם שוח .106 5 שעעפו 1300 > זסוו3 0 30328 6 6 . . . עס ,600001 ע600זק > 5 1 3 60)ןוחוסזנן 35 5 זסוחוחב זןוס זנ 01 5013016 וב6וווז6 ה +)חנו! זסו3! סווועווזסשע 8% 0510055 5 ]8+ , 165ז]0וזסוחז +וס5 8 חסו)ה ז11154 חן זטאוקהזס: 50015 חבּו סד 50 5 5015 רסיז 17 בוו יבג 8 5 זפ ו 6 05 שופ 5 זו .זו 05 וק זם אה 6 זסאם 86 סוס 100 בתחתית הדף הראשי של אתר החסס.5או6א, ישנה רשימה, שנבחרה בקפידה, של הכתבות העכשוויות הטובות ביותר באתרים אחרים. רשימה זו היא אחת מהתכונות בעלות הערך הרב יותר באתר חחסס.ש6א, והיא מהווה את אחת הסיבות העיקריות להשתמש בשירות. שים לב שבדוגמה זו, כמה מתיאורי הקישורים נבחרו בצורה גרועה. איך המשתמשים יכולים להעריך אם הם רוצים לעבור לקישור בשם "605' סז סט פַחוזנו5"? אני חושב ש-וחסס.פשו6! פשוט בחרו בכותרות דף היעד כטקסט עבור הקישורים, אך ניתן להוסיף להם ערך בצורת טקסט שנכתב במיוחד עבור הקישור, דבר שנעשה בדף תשובות חיפוש בכל פורטל. פרק 2: עיצוב דף 59 השתמש בכותרות קישורים ללא דיחוי לרוב, אני ממליץ לא להשתמש בטכנולוגיות 0 חדשות שלא כל המשתמשים יוכלו לצפות בהן. ברוב המקרים, שימוש בכל דבר חדש הוא מקור לצרות ויפלה לרעה משתמשים עם דפדפנים ישנים. כותרות הקישורים הן יוצא דופן בכל הקשור להמתנה. ראשית, משום שהשימוש בהן לא פוגע במשתמשים בעלי דפדפנים שלא מציגים אותן (תוך הנחה שאתה הולך על פי ההנחיה האומרת שעליך לוודא שטקסט ההנחיה של הקישור מובן כשכותרת הקישור לא מוצגת). שנית, דפדפן שאינו מבין כותרות קישורים פשוט ידלג עליהן. הכותרת אינה מופיעה כתגית חדשה או שהיא מיועדת להשפיע בצורה אחרת על סידור הדף. הדף ייראה בדיוק באותה הצורה, בין אם הדפדפן יעשה משהו עם כותרות הקישורים ובין אם לא. החיסרון היחיד הוא שכותרות הקישורים יוסיפו כעשירית שנייה לזמן ההורדה של דף 60/ טיפוסי בחיבור מודם. זהו אכן חיסרון, אך לשיקולי הגדלת השימושיות בניווט עבור משתמשים שכן רואים את כותרות הקישורים, יש משקל רב יותר. 0 עיצוב ממשק באינטרנט כותרות הקישורים 0 זסזס!קאם 6%חז%6ח1 ודפדפניס חדשיס יותר מסוגליס להציג הסבר קצר לקישור, לפני שהמשתמש בוחר בו. הסבריס כאלה יכוליס לתת למשתמשיס תצוגה מוקדמת שתוכל לעזור להס לדעת לאן הקישור מוביל ולהחליט אם הוא יסייע להם בניווט. המשתמשים יעדיפו לעבור לקישורים אס הס יודעיס מה הס יקבלו עוד לפני שהס הגיעו אליהם. אס המשתמש החליט לעבור לקישור לאחר שקרא במה הוא עוסק, הוא יבין את הדף המקושר מהר יותר כשיגיע אליו, ורמת הבלבול שלו תרד. הסבר הקישור נקרא בשס ₪6 אחו1 (כותרת קישור), וקל מאוד לקודד אותו. לדוגמה, קוד ה- !אדו שהופך את השס שלי למנחה (זסח6חה) עשוי להיות: "/18600/ר6.60ו56ט. טאוו :כ ח"=+6זת 8> <ה/> ח16!560 ססאה2<"ץחקהזססוס זסתסטה"=6חםס אם תניח את סמן העכבר על הקישור בדפדפן, המילים "עְחִסְבּזף0ו8 זסוטטג'' יופיעו אחרי כשנייה. כשהכותרת "ץְחַ30ז8108 זסחזטה'' מופיעה בכל פעס שהמשתמשים תוהים מה יתקבל מלחיצה על שמי, הם יקבלו אינדיקציה לגבי סוג המידע שהם יכוליס לצפות לו כתוצאה מלחיצה על הקישור. בין שאר הדברים, מובטח מעל לכל ספק שלא מדובר בקישור מסוג ''0פ!ו8ח'' שיגרוס לפתיחת תוכנת דואר אלקטרוני וליצירת הודעה חדשה. הנחיות כלליות לכותרות קישורים מטרת כותרת הקישור (התגית <8> והמאפייניםס וזח ו-006) היא לסייע למשתמשיס לצפות מה יקרה אס הם יעברו לקישור מסוים. ניתן לשלב בקישור מידע מתאים, כגון: % שס האתר שהקישור יעביר אליו (אם הוא אינו האתר הנוכתי). > שם אתר המשנה שהקישור יעביר אליו (אם הקישור ישאיר את המשתמש באותו האתר אך יעביר אותו לחלק אחר שלו). 6% פרטים נוספים אודות סוג המידע אותו ניתן למצוא בדף היעד, וכן כיצד הוא קשור לטקסט המנחה ולהקשר הדף הנוכתי. 5 60/ 6-20060ט!בצ 01% 6ם 8 ... 7611 ... 18 116261 1126 מ ,₪ מבומ11 מס ][וגוט 15 7760 1126 .1116158785 קמנ 676 ₪0 0+ 26568 04 30 1267 1581 26ג1 6+ [[חקו 91169 1776 ז1680ה 816 11281 63600168 סו .8611זגוסקי 00 10 זוזבער1'ונ00 ווסץ 11031 1065רנ56 16ונבו[ 51165 ינסו011 16108 צס] ב[810מז 611601כן 8 ₪16 0168 160010 7686 6 זט ,11מ6צוגו) .8116 11167ס מב מס 108160 הנגתס] מ9910גו150 8 קממופם 83 18מ6ווב כ 0318 016011 01 06מ8006018 1116 קמוסזגו0פוגוס 8:6 1806 מ 8 1181 6מנקת6 56810 6016281 במ 0+ 1% 8 בקגוס: ₪ 816 0+ 685191 06 14גוסזו 1 )גוס ,85 מנקמ6 56010 ממקום 1160 1181811 81165 6/ר 8680 1126 7י₪19018 0+ 6זגוק סט 06 8141 3[גוסט וגוט 6306115 ב[86810 קט 8 18116מו ד 01 668 סם 18 11616 1 .1801111165 קמ וסט 01116 מה 811618גו00 1168 0+ 8מ60110 15ס11פר 6זיגק 0+ 660 81165 760 816 כסט [81 ,6816 6ב[וס מה 2.5 %מו] 01816ז8 מה קגוסזם1 8116011028 6זינק 1181680 .86271068 קמנמס3 וז מו 5060181026 11161 51165 816 111616 06ב50 5ס8ז משוס 118 מש1691 0+ 5116 זת6זיס 6 20 )מס 8מ818111 8 ע56גו [8גו ונג 1116 נסץ! 6011088 6 26תס1פגוט 18 1דס?כן מ6זו6 8601068 01111656 זימ1/18 .8606 ק מוס קת 16161166 8 0+ 6 מו )גוס ,0מ611191זי80 1685 115 ,ק11ת6זגו?) .818 ₪01 156ת16!וס 4 קיפעו 185776 בג 816 כ 06 8[גוסזו 96706 ₪ מנס קת 126 .8691128110 ₪656 (068מ18פ:גוטצוט 1116 זס? 1816 סזקק8 85 ,8116 :1615 1126 קט זצס +ספגו 6ב עס 818 0) ספ 68060 6עגופמ6 |ב(קגות 1מ6וה קסצסגות 8 6צגוגת 8 5 67 7 .81165 מ8110מ86811 116 קט 12866 111.5 126 661בנקת16776156-6 0+ 8צסב[וגום 6צוגו 16 ק1ו6:נגוט 861058 7/6 קימ8חז 0+ 68בג1 ,8161 מגטעס+מזד 1516168160 06 1גוסב[9 6081168 081מז 6סגט .868 46566 661616 0+ 8 0 המדק סז מו ת6ב11 0+ 11% 0+ 81168 כן זוב ז0? 6891 11 1866 06) .5116 1126 מס 1868מגוכן 15 11281 [1960סינק 3 10 שוזנ1ת 00ב פסמזסו[50 שוננ1וזג1 6[קזוזנ5 56גר 0+ ז6ב!1 6 8זגוסטם6 1 ,16161160 618תס1פגוט 66ב בטוופם טק 6זס זט [!קו 086 בופגופט ,1811 0+ 8671068 8119'8‏ מנ1615 1116 56גופט 8[גוסעו 11281 506 66 08 06 1סם +פגות 501665 מנמו! ב סגופ ,90601860 וד 8078066 6+סז 0+ פגוב!1 8 81168 6766 26 ב16108מ: 0818 1ב161106מ: 6זסו זפ] שוס!31 |[משו .2071 01 86גו 110168866 , 6זגזגת 6ב מך 8 776 ח56/.60 ./ש/עעץ 5שוסשח/עע 5 2 /ע 6-2060ט!בצ ... פן 11611061 8ו[1 גוח ,קתט[וננן תס ]גנוט פג מ76 15 . פפ/[6פהנמו[1 קונטו[1ותנט/י6 כ 10 60 זכ כ קימו[1 1מו[1 26נ[68ד [[באו 1168 מוס/ר 0 10 1תבער 1'ת00 נוסץ 1131 56/1665 16[ותב[ 51165 01116 שת161 צכ] [ט1מוז 01ט1נ6כן 8 נה 8מנקס[כונו[160 111886 .>צסישו1פת 8 ... [[סר 8 שותבופון ותם 18ותפווהדכן הונב !וטנס 1 801828 11/8 קתנטננו0פ)נוס פז8 806[כן תג קיפנה פד 1181 5פ1כןנמטנ6 כואו7 - 689181 6 1[נוסישו 11 ]נוכ! , מוזוקת6 ו[00נ868 נעוכ צנפו[1 [[18פתג 81168מסגו קוצמ[ +פסוו מ 6 זפו1 סוז8 0 1008168 ונתנ ונפי קונ סט 06 [5111 ב[נוסט ]וכ 615כף60 [0נ868 זדכ פוננ1תנמחות פמיקו 1מו[1 תנקת 6 5680 3 6 415055100 חס 16סו+ו3 +6חן0 + חַח1"01ו50+טוס 6ח3) 5קטסיוף פפו 1 . 1301111188 זדתןנסט צפו[01 לאתפ 1619נמנו830פו1 10 פס (6רח53 68 16מנססךנסט [81 ,5[כןוונגסנ6 עמו[1כונה 1.8 תק 1251680 .560089 קתנכןכןפות תג 26נ[מנסטכן 81ו רטק מחדלוט 115 690 10 5116 זהנט/י6 עס 60מו1 סו 18 וו ס1פנוט 6הבויסנכן גנס/י6 068ב/9נ96 111886 01 זלת1/18 . 6טב/י96 וקו 0 8 10 11%[ 16ממנ סנקה תף (קנוסו[1 פונסנ)סטננ ס/י16מ[/קו ונג הונסכן 06 בו[נוכואו 6סב/נ86 קננכןסמחו: ו[ . כנ 368110 69601 שו[1 10 ]וננסכן 202נ1נ818 8 נ6פנו [מנוה/ת בונג מו[1 מנכול1 פתנסנ1סשנוה מו [60טונמו[נ6 סננופת6 ][קנוות 1תממוניהקןכנטנוות 8 זנ מו[1 תג זנוכ יקוננפנ1נט/ים המחנ פנו[1 ,ז11תנסצננו?) ‏ הנהכן ]סק 6פמלרנפו[01 11 ומר (068נ18פהננוטננט 8ו[1 10 16 נכן וזככ 85 ,8116 קונבננ616נ 8ו[1 קימ צס עספנו פו[1 קט בונפן) תסנזמוננ651 5ו[1 זכ 60פנו 5 1131 מו[1 צספתנקתנ6-6פנטיטע 10 פנכט[!נום 6ננווטע זי[!נטצננוט 68טב/ינ96 מ6ל זיתמווג 10 אנ ,16197מתנוונסעת ד ]ו פטונגס . פסקהכן 691101 16מנמונטק 10 פזופקו קנ מהנהונמדקטנכן ונ הנמו[1 10 וננ[ 10 פמנדנהכן הונו[1 10 6857 11 ]חונ 81168 וס1 קרנ6 17 .81168 תת 3660 פסת 56[6 קתה[ת11 0016ת51 56נו 10 מנפו[1 סקמננוספת6 1 ,616200 פנטהונס1פנוט שופת קנ611ק תג 16168160נג 6מ 1[נוכו[8 1168פכס/ר 6ופט ה[נוכוקו 81ו[1 פסוננ6 הפקותמו[ט 06 ]וג 1פנוחוד פפמוזמו[50 קתב[תנ[ ו[טנופ 6011350כן5 6כתכ) .8116 5ו[1 ונכ פו[פנ[מנוכן 15 11181 [1060סכ ב פד תטיש עס [[בשו ומ קננפנומט ,181 10 8619/2068 8116'8 קתרמנס161 1115 פיה מנכמוז 101 פנוו[1 הנה 51168 0610/06 מקותמו[סנ16נג 1818 1תמקו[[16ונג מנכמונ צב1 וכן[8 [[גש .201/1 01 6פגו 60פהטנטתג ‏ סננוזנו 5ו[1 מך .8617/1088 076 8013661-נו[מ/ר 601 .56/1 ./ע/ש/ץ 0+05ה/430] שים לב כיצד אותה כותרת הקישור נראית שונה ב-פאוססחו/ ובמקינטוש. באופן כללי, אין לצאת מנקודת הנחה שכותרת קישור תיראה בצורה מסוימת, או שתהיה לה גלילת שורות (ספּזשש סזס/) כלשהי. רשום טקסט פשוט המתאר את יעד הקישור. פרק 2: עיצוב דף ‏ 61 (בעמוד הבא, למעלה) ה5ו1ז820א משתמש באותם הצבעים עבור כל הקישורים, בין אם המשתמש כבר ביקר בהם ובין אם לא. דבר זה מקשה על המשתמשים לנווט באתר, משום שאין להם מושג באילו אפשרויות הם כבר התנסו ואילו נותרו לחקור. לדוגמה, משתמש שאינו יודע אם ניתן למצוא מידע על חברה אחרת תחת 5 (לקוחות), 5 6356 (מחקרים), או פוסחזוהק (שותפים) עשוי לא לזכור אילו מהאפשרויות הללו הוא כבר ניסה בעבר (בהנחה שהמשתמש מקדיש זמן מה לניווט בשטח שבתוך כל אחת מהאפשרויות הללו לפני שהוא חוזר לדף הראשי). (בעמוד הבא, למטה) אפילו כשנעשה שימוש בצבעים שונים עבור קישורים בהם כבר נעשה שימוש וקישורים חדשים, המשתמשים לא יוכלו לדעת באיזה צבע השתמשו עבור כל סוג קישור. האתר 20% 8106 פחד משתמש לפחות בנגזרות דהויות של צבעי ברירת המחדל של הקישורים (בתמונה הצבעונית שבתקליטור המצורף, הדבר בולט יותר), אך ראיתי כבר אתרים שהשתמשו בקישורים צהובים וירוקים ושם אי אפשר לדעת מה כל צבע מסמל. 2 עיצוב ממשק באינטרנט % אזהרות אודות בעיות אפשריות בקצה השני של הקישור (לדוגמה, יש צורך ברישוס משתמשי). כותרות הקישוריס צריכות להיות קצרות מ-80 תווים, ונדיר שיש צורך ביותר מ-60 תוויס. מומלצ להשתמש בכותרות קישוריס קצרות ככל האפשר. בנוסף, אינך חייב להוסיף כותרות קישורים עבור כל הקישוריס. אם ברור מהטקסט המנחה של הקישור ומהקונטקסט שמסביבו לאן הקישור יוביל, אזי כותרת קישור תפחית את השימושיות (שווופ58ט) בכך שהיא תהיה דבר נוסף, עליו המשתמשים יצטרכו להסתכל. כותרת הקישור תפריע לשטף הענייניס, אס היא פשוט תחזור על אותו הטקסט, כפי שהוא מופיע בטקסט המנחה. אל תניח שכותרת הקישור תיראה באותה הצורה על ידי כל המשתמשים. דפדפנים קוליים יקראו את הטקסט בקול, ולא יציגו אותו חזותית. אם אתה כותב כותרות לקישוריס בעברית כדאי מאוד שתבדוק איך וה נראה בדפדפנים השוניס. דפדפנים שוניס יציגו כותרות קישוריס בצורות שונות מאוד זו מזו, כפי שמתואר בתרשים. ולבסוף, שיסם לב שכותרות הקישורים אינן מונעות את הצורך בהפיכת הטקסט המנחה של הקישור למובן, ללא קשר אם יש או אין כותרת קישור. המשתמשים אינס צריכיס להצביע על קישור כדי להבין את משמעותו. כותרת הקישור שמורה למידע נוסף. בנוסף לכך, בשניס הבאות, יהיו עדיין משתמשיס שברשותם דפדפן שאינו מסוגל להציג את כותרות הקישורים. צביעת הקישורים רוב דפדפני ה-60) משתמשים בשני צבעים שוניס כדי להציג קישורים: קישוריס לדפיס שהמשתמש עדיין לא ביקר בהס צבועיס לרוב בכחול, ואילו קישוריס לדפיס שהמשתמש כבר ראה בעבר מוצגיס בסגול או באדוס (תלוי בדפדפן). חשוב לשמר את קידוד הצבעיס הזה בצבעי הקישוריס שלך, כדי לשמור על רמת השימושיות ב-65/. למרות שאין צורך להשתמש בדיוק באותה הצללת הכחול בה הדפדפן משתמש כברירת מחדל, אתרים שעדיין לא נצפו חייביס להישאר בגוון כחול, ואילו אתריס שכבר נצפו חייבים להופיע בגוון אדוס או סגול כלשהם. וו 0 ו + י ו ך 2 ב 60 0 הו 8 48 תח פנחטסזם הווחו חש שח ף הוח5טק עו+חה ו ו ו | הסם ח15ו320ו19חו ‏ 10015 שַח א'וסט צפח | "0ס[1 570 5+766% החבוף 107 212-966-6915:+ 212-966-5960:+ == = == 188|810----- [ 5ז5וחב 5טסחב/ ] "03 3 זס1 או" ןפי 8 ו ו ו ו דיו ו ב-] ורי ו | [ח5 5חז] "!אב ₪ ופט" ףסכ" ע7זר131 , ה!כוחוו. !חח 6ח1 : [11] ,1 זכ זט "זחטההפוובק שבח" 520800007 ,אטוח 06 : 365 ,!!₪ זזסעע ו ! ס6ופו! הדוס ! 01 , פחחזבו!!וע [ פופתזסחם בוסחבּזבּק5הגהז ] "+65וון) 016 זהט". [ וקהו 6וחב!פ וה ] ")3 ] 300 זי" 6 סע פזב". + טס סח + "!61 ווה זחנן". ה 530 סו‎ . ]30 5 658 5זַחִהָח |!3 . סח , ה320785] 1997 זתטָהעקסס 001 .60/0600 ./ש/ע/ע פרק 2: עיצוב דף 63 כשנעשה שימוש בצבעי קישורים לא סטנדרטיים, המשתמשיס מאבדיס את יכולתס לראות בבירור באיזה חלקיס של האתר הס כבר ביקרו ואיזה חלקים יש עדיין לחקור. כתוצאה מכך נחלשת במידה ניכרת תחושת הבנת המבנה והמיקוס באתר של המשתמש, ושימושיות הניווט נפגעת. חלק מהמשתמשים יבזבזו את זמנס בבחירת אותה האפשרות פעס אחר פעם, אחריס יוותרו לגמרי, ויחשבו שהס כבר חקרו את כל האפשרויות כשלמעשה הם לא עשו זאת, וחלקס לא יצליחו לחזור לסעיף אותו קראו והתעניינו בו, משוס שהוא אינו בולט ברשימה. במחקר שנערך במספר גדול של אתרי ס6/, |ססס5 6ַ6ז8ּ3 ועמיתיו מ- 8ח66חוסח= %671866ח1 ז050) מצאו מיתאס של 0.4=ז בין שימוש בצבעי קישוריס סטנדרטייס והצלחה בביצוע משימות המשתמש (מיתאם של 0.4 פירושו שצבעי קישוריס סטנדרטייס הסבירו כ-16% מהגיוון ביכולת המשתמש לעשות דבריס באתר, וכי כל הפקטוריס האחריס מסבירים את ה- 84% הנותרים. במיליס אחרות, צבעי הקישוריס הס בהחלט לא הנושא החשוב ביותר בשימושיות ב-60/, אך הס חשובים). ציפיות מקישורים השתמש תמיד באותו ה-|₪ כדי להתייחס לדף נתון. אס קישור אחד משתמש ב- ₪1( מסוים וקישור נוסף משתמש ב-|( שונה, הדפדפן לא ידע כי שני הקישוריס מוביליס לאותו הדף, ולכן גס אס המשתמש השתמש בקישור הראשון, השני עדיין יופיע כקישור חדש - דבר המבלבל את המשתמשים, כשצבע הקישור מציין בבירור שהס לא ראו עדיין דף, כשלמעשה הם כן ראו אותו. המשתמשים לא יצליחו ללמוד לעולס את מבנה האתר אס יש בו טעויות עיצוב כאלו. הפיזיולוגיה של הכחול אם היינו מעצבים מחדש את ה-60/ כיום, מעט מאוד מעצבי ממשק משתמש מנוסים היו בוחרים בכחול כצבע המועדף עבור קישורים חדשים. טקסט כחול קשה קצת יותר לקריאה מאשר טקסט בצבעים אחרים כגון אדום או שחור (בהנחה שיש רקע לבן), משום שלעין האנושית יש פחות קולטני (5ז6660%0ז) אורך גל כחול. למרות זאת, אני עדיין ממליץ על שימוש בכחול כצבע ברירת המחדל של הקישור, משום שהמשתמשים כבר התרגלו לצבע קישור כחול, ולכן אין להם השהיה בהבנה כיצד לעבוד עם הדף, אם הוא משתמש בצבע כחול עבור קישורים חדשים. המילישניות שאובדות בקריאת כמה מילים לאט יותר בשל צבען הכחול הן זמן קצר בהרבה מהשניות שנחסכות בהשהיית השימוש בצבעי דף לא סטנדרטיים, ודקות נחסכות משיפור הניווט כשהמשתמשים יודעים באיזה קישורים הם כבר ביקרו. 4 עיצוב ממשק באינטרנט י זהווחיוה) [וה 5חיויו ורוו 7 פחתספ 5 "ְ" 7 7 ההחחוחו וה 8 פצעבבווסםופסחוצ/ ץזס3 60587 סקטב .ג בוחם החד סחב!|ם זס בוט ג ₪5 7 ,3 צֶ₪13 בפחפמס ו -= ...ו 469 ,אחסז ,ח66זב3: [163ח₪0%3 אזסץ טס פד 6031995 אתִפַועָקס6 0 0 3.6 סט סוד - 6+ ווסד 1995 ₪0 תףַועקס> הגוס סק זז 4045 ות פזס.פפ/ח./ש/ש/ש שים לב כיצד השימוש הסטנדרטי בצבעי קישורים גורם לכך שהמשתמשים יראו במבט אחד, כמובן מאליו, באיזה קישורים של דף 6870605 |168ח20%9 אזסץ צוס\ הם כבר ביקרו. באתר זה, המשתמשים עוברים לקישור מסוים רק כשהם באמת רוצים לעשות זאת. פרק 2: עיצוב דף 65 לקישור טקסט יש תמיד שני קצוות - הדף השולת ודף היעד. יש להקפיד על שני עקרונות בקישוריס כדי להגדיל את השימושיות שלהס ביחס לשני הצדדים : % סיבת העויבה - הסבר למשתמשים בבירור מדוע כדאי להס לעזוב את התוכן הנוכחי שלהם, ומה הם ישיגו בקצה השני של הקישור. % סיבת ההגעה - הסבר את התוכן החדש למשתמשיס שהגיעו לדף החדש, ותן להס סיבה שקשורה למקוס ממנו הס הגיעו. קישורי חוץ חלק ממעצבי ה-60/ נמנעים מלקשר את האתר שלהם לאתרים חיצוניים, משוס שהם רוציס להשאיר את המשתמשיס באתר שלהס ולא להציע להס הודמנות לברוח. אינני מחבב את הגישה הזו כלפי הקישורים, משוס שהיא נוגדת את הטבע הבסיסי של ה-65/: המשתמשים שולטיס במעשיהם. בנוסף, אין דרך מעשית ללכוד משתמש באתר משוס שהוא תמיד יכול לברוח על ידי שימוש בסימנייה (6זפּוחאססם) או על ידי הקלדת כתובת 081 חדשה. אתריס מסוימיס משתמשים ברמזי אזהרה המתריעיס בפני המשתמש על כך שהוא עומד לעזוב את האתר, כמו באתר ז60011060ו5 של ספסזסווא, אך אינני ממליץ לעשות זאת. באתר המדובר, יש שלוש בעיות. ראשית, דרך זו אינה סטנדרטית באינטרנט, קישורי אנשים כששמו של אדם מסוים הופך לקישור, אני ממליץ להפוך אותו לקישור לדף ביוגרפי אודות אותו האדם. כדי לשמור על העקרון של הורדה מהירה, הדף האישי צריך להכיל תמונת פורטרט שגרתית קטנה יחסית (שניתן לקשר אותה לתמונה אחת או יותר של האדם במצבים שונים). הדף האישי צריך גם לתאר בקצרה את רקע האדם ולהכיל קישורים מתאימים למידע מפורט נוסף. אם האדם הוא כותב של טור קבוע או שהוא תורם לנושאים הנדונים באתר, מקובל לקשר לרשימה מלאה של דפים באתר שנכתבו על ידו. אפשר לקשר מהדף גם לרשימה של כל הכותבים באתר. אני ממליץ שלא להפוך את שם האדם לקישור לדואר האלקטרוני שלו. קישור זה עובר על כללי הציפייה ב-69/), משום שקישור ייקח אותך לרוב למידע אודות הדבר עליו לחצת, ולא אמור לאפשר לך לתקשר איתו. בנוסף, זה לא טבעי ללחוץ על קישור טקסט רגיל ולהיות מועבר ליישום דואר אלקטרוני. 66 עיצוב ממשק באינטרנט פתיחת חלונות דפדפן חדשים משולה למוכר שואבי אבק שמתחיל את ביקורו בריקון מאפרה על שטיח של הלקוח. אל תזהם את המסך שלי בחלונות נוספים, תודה רבה (במיוחד משום שלמערכות ההפעלה הנוכחיות יש מנהלי חלונות עלובים). אם אני ארצה חלון חדש, אני אפתח אותו בעצמי! המעצבים פותחים חלון דפדפן חדש בטענה שהוא משאיר את המשתמשים באתר שלהם. אך אפילו אם נתעלם מהמסר העוין הטמון בהשתלטות על מחשב המשתמש, האסטרטגיה מנוגדת למטרתה משום שהיא מנטרלת את לחצן ה-886%, המהווה דרך רגילה למשתמשים לחזור לדף/אתר הקודם. לרוב, המשתמשים אינם שמים לב שנפתח חלון חדש, במיוחד אם הם משתמשים במסך קטן בו החלונות מוגדלים למקסימום כך שהם ממלאים את המסך. לכן, משתמש שינסה לחזור לדף ממנו הוא הגיע יתבלבל כשהוא יראה לחצן 886% לא פעיל (אפור). )מ 0-58 זט אסזם טם ה 6טת6מטה] טצ'ט/ .)טקאט שמוקקטגג 18ם) זס] 5 ודא 6 0300//8/2000.0070./ע/ע/ע ולכן המשתמשיס לא תמיד יבינו מה פירוש הדבר. שנית, הקושי בלמידה גדל, משוס שיש צורך להפריד בין שלושה סוגיס של קישוריס במקוס שנייס בלבד. אני סבור שרביס מהמשתמשים לא יבינו מדוע חלק מהקישוריס הפנימייס של 111670506 מסומניס וחלקס לא. בנוסף, הקישוריס החיצונייס נראיס בדרך זו חשוביסם יותר מאשר הקישורים הפנימיים. העין נמשכת לצורות הצבעוניות המסיחות את הדעת מהקריאה. הדבר אותו אני כן אוהב באתר הוא צורת ההתייחסות לרשימה 48ח₪6801 זסחצוט= (קריאה נוספת) שחולקה יפה לכותרות משנה המקלות על הסריקה. שיפור עיצוב האתר קל. הרעיון הראשון הוא פשוט לגרוס לסמן לשנות צבע כאשר הוא נמצא מעל לקישור חיצוני. רעיון זה ניתן להרחבה לשימוש בצבעיס שוניס להבדלה בין אתר חדש לכזה שהמשתמש כבר ביקר בו. ניתן גסם לשנות את צורת הסמן כתלות בדירוג האתר המתקבל משרת דירוג (567/67 ח%800וק₪6) - על ידי הוספת כוכבים מתחת ליד, לדוגמה. פרק 2: עיצוב דף 67 נ ו ו ו | סוו5 | זצו סקט | ווסחת55 | נו יי 4 שו 8 זסווטטסווס א ז 0 א 61 ה 5 זס ססר - 5-5 0 6 וטסצ הַחואב3 ?0567 ₪36 וס) פבו ו 0 וז 6פ/עשסיו ם טנ 37601086 86 סד 9 ( 05586 %ח 8ח+ ח! הַחהורחס6 6300785+ שפח 8ה+ %טספב 5!קספכ האוש הַחוא|3+ +58ערח הח ה8א0 1 קט הַחושז59 זס+ ,זפטז55 ך 5איסבחו/ל רתס 8|פבּ!ובּט3 זס ,זפזס|קא5 8%חז%5ח1 +0 הסופזפט שח שסת 08512860 300 ,6300765 שפח [600 8+ הפר 80 שסח5 פע'1 47 .5הָבּכ ספ/צ שפח 3 שח 0+ 5טסואחב 68% עָ||ט5ט 8|ק0פכ ,80% 006 65/ 3 חו 580ט 58 %ח6ורח .565 חס זופח+ חס 3078 5+ חן 8//5%פח3/₪ 30 5) 4655 020% 5/3005 2578/0026 5'לוס5סץם/1/ צול ,5 +ס !30 + ע/6להתטא0= . קטסץ) %ח 300/00 תוס פוק זב צחסותוקס "?6|םב3]|ב39 ץ|%חה8זזט6 5ז5שסזם 6+ חס אזסש 60 15ח+ 00/1/6566 אפסה" +ס 5ח0500 6% 781080% !5370 6085ת 050% :קט 85חחסס 3]0375 הס ס5פטף 606 הפחד ,568סזפ %תפזושטש 3 חאו 5וח+ 0 6010 טסץ +1 .זב5+3 %ח3!ם 3 הא הפר 3% 00%] 165% 1 ,3 8חס חם , סה 6רח 3265 רחב 55צְבא|3 16 ?6 ה[טסש סח , 6ז 5+ שופ ב 5ם > חטוטפש בס אחוחץ ש08+ 03%+ 8ז63%7+ שְ22וח/ ,| 5080 508 זס+ זסרח63 5זפקס|8ש08 ספא | ₪ממווווווו זופח+ זפ5שסזם שָזפטם חס אזסי 60 6 %חב ₪ 8+ לפץ ,5156 פפ/) זופח+ פטסזק ח! ץ||הפז .החופט 56 60%)רח 30816768 :₪0 וסוט 1 =!כחו5 בח3 5ז98חש|085 5 8// זס+ הח הל5טז? זפטפשוסח , עו|פ 3 קרח 60 3%ה+ ספוסחט! 58 630% 16 .ץ||637860 6075108780 28 60 8805ח 73%+ 15508 3% סקרח! חב 15 ,875 ק0808|0 זס5אסזם 85 זטסץ ח! %חוסק 8רח50 46 .שט|50 %0 רח6!ססזק 0160006 שזפט ,שזט 3 06 3|50 הב6 16 [8ח0%8כ זטסץ + ח0 3+ 8רח50 3]/873%8 %0 סטמ 600168 סח פטבּח |[וו טפץ ,חחַו85ה 50 5566 3 הַח|א3רח עס זס ,568 6306 שְ5ח+ 538 3 הַח|300 צם זפהם ,3016068 פזסחט || "+חם רחהו%8+3ח5" הַחהו588 5ז8+ט5 3% הַחהואסס] 8|קוחו5 + |8שפ] 3%6!קסזקק3 חב 085|טסזק %03% 5|68 0/8 3 078366 0+ 35 [ב873ש55 פזב פזבחד %סס] 3 %3%8 1.505 ,זפ5שסזם 60 וס5ווסזם חב ,וחזס3| 60 החזס13כ החפ 35 קרח ס6 .805 [סזק זטסץ זס+ %8הווקסזקק3 56 || חס 5קבחזפק (85ה6בסזקקב %ה0/4878 680 ב 3% 6וחו5 +53 חנ קדו56 5 36 זכ 3 "860 חור 6-ה סרחרת 00-85% 1.0" %08 חס 06058 5166 פ 3 078308 ו זס ,8%5|קק3 57280080 חס ץ|פז זס , !וד שְח3+ שח 56ש %'00857 566 %06 5ה83וח זל 50 |[פ/ %טם 85870%80זכ ץ!םרח/5 , הסה ההזס+ח! 105% 165 .הַחקו50 5148-₪180% 0 8%87056 6000 שק 3 5 5166 8567%3098ז82 טפ "876ח5ט" 3 הַח530ץש , ץ||בשת 50 ש|פז 54685 עְחבּרח ססף זב" .הסבּרהזס+ה! חב 8ַהַ8553רח זטסץ +0 עו|טם 8ה+ 686% אטח 83|!28ץ %'ח00 5ז783+0 זופה+ 03% 65וח קב ש6ח3+ חב 84805 |3 5050 חס ץ|וטבפפת .וסזק שְ8ח+ הסה רהזס+ח/ [83ז 15| 3% 630 טסץ הפר* ,פִהָבכ זוטסץ +0 חהסופזפט 2.0 !וד חב קט 58% פטבּת טפש פ6חס זו8ח+ +ס 8רחה50 8 פה+ ור יי ,6058 +0 ,0ח3 .פַהָבּק 8ח+ +0 36| 8חה+ 8חש₪08-6 הַחוק|פח זס+ ,%ה8רח8]8 <ם |ם ד> 60077.ח05ח ./ש/עעץ אתר ז06!וט5660 של 050%י6ו] מסווג את הקישורים על פי שלוש קטגוריות, שכל אחת מהן מקבלת טיפול חזותי שונה: הקישורים שבתוך אתר 5106006 מופיעים ללא תוספת, קישורים לחלקים אחרים של 50%סזסו1 מוצגים יחד עם סימול "6חו| סחטסטזטס" (קישור חיצוני), וקישורים לאתרים חיצוניים מוצגים יחד עם סימול "15 9ח1ו/68|" (יציאה מ- 607050%ו1!). 8 עיצוב ממשק באינטרנט נ ו ו ו | סוו5 | זצו סקט | ווסחת55 | נו יי 4 שו 8 זסווטטסווס א ז 0 א 61 ה == - ססרה‎ 5 0 6 וטסצ הַחואב3 ?0567 ₪36 וס) פבו ו 0 וז 6פ/עשסיו ם |טנ 37601088 56 סד 7 ,2 ש 05560 %ח 8ח+ ח! הַחהורחס6 6300785+ שפח 8ה+ %טספב 5!קספכ האוש הַחוא|3+ +58ערח הח ה8א0 1 קט הַחושז59 זס+ ,זפטז55 ך 5איסבחו/ל רתס 8|פבּ!ובּט3 זס ,זפזס|קא5 8%חז%5ח1 +0 הסופזפט שח שסת 08512860 300 ,6300765 שפח [600 8+ הפר 80 שסח5 פע'1 47 .5הָבּכ ספ/צ שפח 3 שח 0+ 5טסואחב 68% עָ||ט5ט 8|ק0פכ ,80% 006 65/ 3 חו 580ט 58 %ח6ורח .565 חס זופח+ חס 3078 5+ חן 8//5%פח3/₪ 30 5) 4655 020% 5/3005 2578/0026 5'לוס5סץם/1/ קט 60085 310325 הס פפטף 606 הפחד צול ,5 +ס !30 + ע/6להתטא0= . קטסץ) %ח 300/00 תוס פוק זב צחסותוקס "?6|םב3]|ב39 ץ|%חה8זזט6 5ז5שסזם 6+ חס אזסש 60 15ח+ 00/1/6566 אפסה" +ס 5ח0500 6% 781080% !5370 6085ת 050% ,568סזפ %תפזושטש 3 חאו 5וח+ 0 6010 טסץ +1 .זב5+3 %ח3!ם 3 הא הפר 3% 00%] 165% 1 ,3 8חס חם , סה 6רח 3265 רחב 55צְבא|3 16 ?6 ה[טסש סח , 6ז 5+ שופ ב 5ם > חטוטפש טפש אחוח+ 8+ 3% 8+ ץ22וחש ,| 5280 508 זס+ זסרח63 875ק0ס|4598 ספ | ]ןוו זופח+ זפ5שסזם שָזפטם חס אזסי 60 6 %חב ₪ 8+ לפץ ,5156 פפ/) זופח+ פטסזק ח! ץ||הפז .החופט 56 60%)רח 30816768 :₪ וסחהזוט- 1 =!כחו5 38 0875שו085 65 / זס+ הַח705%78+ זפ טפ סח , עו | 3 קרח 60 03%+ ב8זסחט! 586 630% 16 .ץ||637860 6075108780 28 60 8805ח 73%+ 15508 3% סקרח! חב 15 ,875 ק0808|0 זס5אסזם 85 זטסץ ח! %חוסק 8רח50 46 .שט|50 %0 רח6!ססזק 0160006 שזפט ,שזט 3 06 3|50 הב6 16 [8ח0%8כ זטסץ + ח0 3+ 8רח50 3]/873%8 %0 סטמ 600168 סח פטבּח |[וו טפץ ,חחַו85ה 50 5566 3 הַח|א3רח עס זס ,568 6306 שְ5ח+ 538 3 הַח|300 צם זפהם ,3016068 פזסחט || "+חם רחהו%8+3ח5" הַחהו588 5ז8+ט5 3% הַחהואסס] 8|קוחו5 + |8שפ] 3%6!קסזקק3 חב 085|טסזק %03% 5|68 0/8 3 078366 0+ 35 [ב873ש55 פזב פזבחד %סס] 3 %3%8 1.505 ,זפ5שסזם 60 וס5ווסזם חב ,וחזס3| 60 החזס13כ החפ 35 קרח ס6 .805 [סזק זטסץ זס+ %8הווקסזקק3 56 || חס 5קבחזפק (85ה6בסזקקב %ה0/4878 680 ב 3% 6וחו5 +53 חנ קר5 8 01505 | 5 .36 סיזקק3 "3% חור סח 0-ה סרחרח 00 -65%ש1.0" 8+ חס 060580 5165 ספ/) ב 0783%8 זס ,8%5|קק3 58580880 חס ץ|פז וס , !ד ש6ח3+ שְח3 56 %'ה0085 566 08 5ה63רח זל 50 |[ %טם 85870%80זכ עץ!קרח/5 , הסה ההזס+ח! 105% 165 .הַחקו50 5148-₪180% 0 8%870586 6000 ש6זק 3 5 5166 8567%3098ז82 טפ "05576" 3 הַח530זץש , ץ||בה 50 ש|פז 54685 עְחבּרח ססף זב" .הסברהזס+ה! חב 8ַהַ8553רח זטסץ +0 עף!|טם 8+ 686% שסח 83|!28ץ %'ח00 5ז53%0 ז|פה+ 3%ר% 65וחקבּ ש6ח3+ חב 84805 |3 5050 חס ץ|וטבפפת .סז שְ8ח+ הססה רחזס+הח/ [|83ז 118 (30108) 491 פסוטצופ -) 900 זספ/טסזם 534% 680 טסץ הפת* ,5פִפָבּק זטסץ +0 הסופזפט 0. / > .68 - / : זופח+ +0 5038 28!||ס ס% 5זפ5איסזם זופשפח שיס!|בּ 1/0010 וטוטה 8 קז 4 5 ה566 5הַחוח+ הלוז חב רה 318 קר 60 3 חן 408 6 ש|[₪35 63 5וחד על[ חס חט+ רחב א 16 6+ חב ,5%%+ 6+ +0 26+368ע% 3 +ס|60 8ח% הַח34660 זס+ ,%ה8רח5|8 <047=> פה+ ,זט 60 +0 ,0ח3 .פַהָבּק 8ח+ +0 36| 8חה+ 8חש₪08-6 הַחוק|פח זס+ ,%ה8ר8]80 <ם ]םג ד> חש 5 שסיום שב4 60077.ח05ח ./ש/עעץ הדוגמה ההיפותטית הזו מציגה שתי דרכים, בהן הדפדפן יכול להודיע למשתמשים שהם עוזבים את האתר, ללא צורך בסימולי ">חו! פחוספ6טס". דרך אחת היא פשוט לשנות את צורת הסמן כשהוא נמצא על קישור חיצוני, או שאתה יכול להציג תפריט מסוג טחסחח קט-קסק ובו מידע נוסף אודות הקישור. פרק 2: עיצוב דף 69 (בעמוד הבא) תיאורים קצרים, כמו אלה שסופקו על ידי אתר פַחוחוא 6חד ץְח8קח 0ס6, יכולים לשפר במידה ניכרת סדרה של קישורים חיצוניים. במקום להגיד "הנה חבילת חומר שתוכלו לבדוק אותה (כאילו שיש לכם זמן לזה...)", הרשימה המוסברת מאפשרת למשתמש להעריך כאן ועכשיו לאיזה קישורים כדאי לו לעבור. סק עיצוב ממשק באינטרנט דרך אחרת לעשות ואת יכולה להיות על ידי הצגת טח6וח קט-קסש (תפריט מוקפצ) המכיל מידע נוסף אודות הקישור. בתמונת הדוגמה שבעמוד 69, אני מציג את כותרת דף היעד (שהתקבלה משרת ה-ץאסזם), וכן את שס האתר החיצוני (שהתקבל כנראה מהגדרת האתר או מכותרת הדף הראשי). הח שמצביע על שס האתר יכול לשנות את צבעו אס המשתמש כבר ביקר בדפיס כלשהס באתר ההוא. לדפדפני ה-60)), כפי שמוצג בשתי דוגמאות אלו, יש עדיין דרך ארוכה בכל הנוגע לתמיכה בהרגלי הניווט של המשתמשים. חבל שהיצרניס הראשייס מבזבוּים במקוס ואת את מאמציהם על תכונות מולטימדיה חסרות תועלת. הסיבה העקרונית ביותר לכלול קישוריס חיצונייס באתר שלך היא שהם יוצריס ערך לתוכן שלך, אליו ניתן להגיע בקלות. בכל נקודה נתונה, מעצב ה-60/ אחראי לתת למשתמשיסם את הקישוריס הטוביס ביותר ליעדיס בעלי הערך הרב ביותר, קישוריס שיהיו שימושייס עבור רוב המשתמשיס. המשתמש יתייחס לכל ערך שיהיה לו מהאתר החיצוני, כאילו הוא הגיע בחלקו מהאתר שלך, משוס שאתה הנחית אותו לעבור לשס. אס המשתמשים ירגישו שהס מקבלים תוצאות טובות מכך שהס מבקריס באתר שלך, הס יחזרו עוד פעמיס רבות. הקישוריס הופכיס לתוכן ולסיבה בפני עצמה לכך שהמשתמשים אוהביס את האתר שלך ומשתמשים בו. אתה יכול לקדס את העבודה שנעשתה על ידי מליוני יוצרי תוכן ברחבי העולם, על ידי בחירה זהירה של קישוריס לאתרים חיצונייס. בעיקרון, כמובן שהמשתמשים יכולים למצוא את היעדים התיצוניים הללו בעצמם, ולהגיע אליהס בלי לעבור באתר שלך, אך באופן מעשי קשה למצוא מידע שימושי באינטרנט, ולכן המשתמשים יאהבו אותך בגלל הקישוריס שלך. יש לבחור בקפדנות את הקישורים התיצוניים. עדיף לקשר למספר קטן של דפים חיצוניים עס זיקה חזקה לאתר שלך, מאשר לתת קישוריס לכל האתריס ב-60/ הקשורים לנושא. כמו בענייני עיצוב אחרים, יותר שווה פחות: ככל שיהיו לך יותר אתריס ברשימה, המשתמשים יוכלו להתרכז פחות, ולהפנות פחות את תשומת הלב שלהס לאתרים בעלי הערך. למשתמשיס יש לרוב זמן לחקור רק כ-10% מהקישוריס בהס הס נתקליס. חלק מהס רוצים שלמות ואת האפשרות לסקור בכל אתר כמות חומר גדולה הקשורה לנושא. פחוח5ווסווק ק06510 - | בי | 50/6066/חוכןוחס6 גד בנ ₪ - 8 ו ₪ קס+ פחוחוו! 6חד ₪ "ץח קוה 60 ו . 6 =פהסו%ט!50 6%הו6זה! = 5055 650ב|פה 7 ,06 ע!ט3 , חפ 06 1015 סזּףועהּח שי ו 1 שהוהפו!מווק קס+א65 6וחס)|סעצ 8 זטסץ 6+ /שסח ₪ | 6|0006/ השס 7 6500066 ])1 ו 1606 1 סוט 6שוטף הוזהיזט סיו חוכ / טחושהיו 8 01 3 חב ,₪358 ,8050 +ם 095000005 פסוח 508 35 פחבּצם צטחת 8 0" צשסת 0 הסה זס!םאם 5וח +ם מ560 56זו 8ר6 חם -- פהחבּוטסזם 0 885 פר) זס? 835% |וח0וו08 ב 15 ססו5 בזסחם פחך .5סותפביום זהפיום 7 5סור0ן3ם 80ב וחב |בפופחוחעצ , חגף +ם 6 וז ה56376 = 500 חס 8805 החהטפסזם ב פצבּח צֶבּ לחכ פצצ עבצו פס חו 5ההַחב3ה6 חו 53 0 35 זפזס סב טוחב זפסחחזם פחם סבחו ₪830 , פזפחשצם 55פחופגוט | סומח ססחםזוסד החסז1 ב|ססזב פוחס ( םפצ 8ח1 יוס] החחזוו?ע ) 6₪הו60ש5 8 ח8פ!פו 23600 |אפפע ץזפעם פחם 615 30 8ז-8ז צ|טב טסזם ב|טוסח5 1 . ם8/ פרם זם?+ ההשחאו זס? 5פחוופטוטום חובוח הפזרם ברס 85טחס5פט זב זס ההותפווטטום טפ זם? |בתפסברח |בּחוטחם פסחעצ טסץ זפרספח/ .5 ₪858 880 , 8// בר 60 5סתפהתגוססם סחחזם מַחהוח9ז5חביס וה 1668 הזס"] 5'ו6ק ה 6וחוזו וט חט זס תסםספו|סס 5וח₪ 58אוסזם , 5 עס!ח 5 60 5חס|פותחפסב שו החסת ,זזה 1883 הס 85מ8|0חפ סחב זפקבּם חו 5ח0ו085 זפחוחג5 6 בוד 5 (ד1%) חס 30ו45500 אזברתפב ד |בחהססבחפסח1 פחםס וחסז 55ו|0פס פוחד + 5%ו| 80280טבחכ|3 חב 5 16 , 5זפתפו|טטם מ60א085% זם+ וטס פ|טבּטובצ בּ צפרס 6 6 הַחואוסר5 5אזב 8סוז5 חב 5אזב רפסב זם 5סהבּפטסחס . ץ00םסס וחפר ||508 60 אוסח בחב צומסבּ 5 8666] 18058 651076 5 הב פבּח צְ30פז|ב ,2707 ₪ 0זום₪81 , שווסט פזב /סו50 שופח 5'טוסזבּ|סס . ססר פטוחע חב 6סב1ט !םס חב פצםזםח! סט אוסח חז83 | .הַחָבּם הסס.60סח/חונח ./ע/ע/ץ פרק 2: עיצוב דף ‏ 11 ההש | 5או 8 5 5 א פזטא 0 8 ז 5 8 זב+ 020080 3 35 0008 פסזטום50 6ספ|םהחסס ₪8 חב פ|סחחב 5וח6 טבּםוחציסס % 2 ז3ס. מ568- 08- עו 508 85ב חן 597 1- פם- א טס שיב שיב 8 210 3 35 0008 פסזטו50 868|םחחסס ₪8 חב הסוב 5וחס סבּםוחאוסם % 58 0/8 5ח13+3883 13350705 וחסז1 אסם 3605%| פרם ההסוחאוסם ₪ /35 םרת סס. 3506 צבן, 5135 : כסס חס הפו וס 50 5הב פםבּצבנ החד % חס 5003 5חפםהבּובך "או6|3500" פחך . |החסר]. 013500 5ב 8ם/ ה 0ס.06 35 שיבן, 5135 : מס 40507 25388305 8 הס זםמ8|0 08 5חב 8ב /צב פר זם+ פסויטב הַחואבּפזם-65ב3. | 9 |החסר!.ס 315 5 רוב סט רחסס. 350 צבן, ה135מ5 : נסס סופ הח 60 זה מ088!0 ב 13 פר החפ הַהוחובּי פהווחס % חוא53!0% .6 בזבחסוח צט 3ב פחותזתזבזםסזם 00 86 7009030 בס ₪ רחסר!. 3000 3 7 כ 560 סם. ססחוב זרוכן. אוצי : כסס רו 5 57860 צעֶם 5180 5טש0וצפוק טחב אזסאופרח3 1 הםבזם 3 ב!וטם 0 83 ]1 -- "5 חפ הסטהוחסט המב ההסספס סם עבצא וטס הבר" 6 .ספת סקהחסט המב החסספגוס 0ף 1086 58 חבס פא אוסח חזבם | -- "מס הפוצ פס פבזרם 60 פע הס" הסםסבּסו|מטבּ חב 8|ב503 " % ,זה עץ3] פב ופ|וח 3 ססחו הסספפוומקב 58/8 ההטזם= זטס אהפצחסס -- "5 רחס 4/7 1560 38 8 ס6 | סרח חפ הססב טפט פרם טחופט :1.1 אסנ סס סחוצסוא" % .5 חפה טסט 01560 368 8זס טוסץ צְבּ/ חר 3055 1.1 אנ סס פצסוח 3 שוסח חח3 18 ,5 הת סט הסט 280ו|508013 08308 סס 5 6 835 וח 1.83 -- "5 הטרס ה 0ס5גום הַח 03" 6 הווחב 88 |בחחססחו הטוא 683 ב םס |8צפן-הססבסוומםב זטפץ 688 סחב , ותפחס 858 58 3 6חפח8|מח! סט אוסת חב ]| -- "2 14ב : הטוס חסן15055 פבפזרם חצצס וטס בסחוש" 6 . בחהוהחטז סחב קט מטסזם ח0סו0150055 הטזס? 3 ₪85 60 [ססספסז 5תםסבסוחטווחסס בסו5 ם8// זנוםץ 8ב 60 ההגס1 3 258 -- "1 וב :0+ ח0ו0150455 בפבבּפזרס חאום וטפץ פסחעש" .8זסוח חב ,5 סממג5 656087 8ם ויסזם , צססב ופטחו פ'זסות 6ה8ותפצחסס 3 רטוש 8סו5 פע זטסץ פסההחחם -- "ומב 3103501 5סו5 3 הסטפזרם סחוםםפספ" 1308 סח |בסוחסזבּזטות 133 0530|8ו8ז פורם חסוצצ פסו5 פע עחב מו 8סום5 -- "פוטב 3 8בחו חב הסטפזורם סַחומסבס5" 8. ו החסס. םס עציב עב [3550702 הח טפש ₪ בסחסס , הַחולַבּהַבּ 5וחם חסואו פוחפ|טסזם פצבּח גוסץ זז |החסח. כ 568- 08-אין/ 997 1- 08- שו !םב זוב [/ החסס. !םאוב וב [. וכסח : וח 7 ,14 וט , צְבּ חס :פוטס 1.355 החסס .0וס/ש 8 8ן./ע/ע/ע בסוף רוב הכתבות, יש ל-6!זס)גּצ38 הפניה למקורות מומלצים לקוראים שיש להם עניין בכתבה. רק הקוראים שיש להם עניין בנושא הכתבה יגיעו אל סופה, ולכן מקום זה אידיאלי להצבת התייחסויות למקורות חיצוניים כבדים. המשתמשים מוצאים לרוב ערך בהתייחסויות אלו ומשתמשים בהן כדרך להשגת מידע מעמיק יותר מזה שניתן לספק בכתבה יחידה. לרוע המזל, עיצוב הדף מוליך את עיני המשתמש ל-0₪1 של המשאבים, משום שה-|₪ הופכים לקישורי טקסט, עם הצבע והקו התחתון המתבקשים מכך. קשה לסרוק את רשימת המשאבים הקומפקטית ולבחור את אלה המעניינים יותר קורא מסוים. 2 עיצוב ממשק באינטרנט הש | 5או 8 5א 5 א פזטא 0 % ]1 5 ב| "והז 0212086 3 35 6008 פס 50 865|מרח60 8 חב טוחב 5ור₪ בבּסוחצוסס % 3+ 08-5%82-[/5+50 /5חַב3 997/10 08-1-שך/!זס ויב טב 8 210 3 35 6008 פסזטוס50 868|מרחסט 8פרם חב הסוב 5ורם₪ בבּסוחצוסס % כוק?,ק08-5+6-ש5+55/1 /085ַ3 997/10 1- 08 -שיך/!זס ויב טיב 1ן/ 53 80 5חב פב עב 55'אְס5בּ/13 חס אסם 555ס3| פרם ו . / 63 /רת 60 .350% ש3[, 521350 //: קת ה חטב בד .> |הח%ר] ,6 ₪ 60/3 5 0 שב 0" ' החד* | החש , 0% ש350 1 /5 חב 56 /רח 60 ,0% ב ח5!35// קת 0507 23308305 פרם הס זה מסופ/פט 1 8 זסז ווה 7 9 | . | החש ,5/9150 חב 5 /רח סש ,350% שב[ 50135 // קת הח 0 בובך כ סיו הַהוחובים - . : ו קת /ו שחת םהוב ח/|חם / חס ' חואם!53 .6 זבחסוח צםט וזב ה הוהתרחבּוטססיום א חמ 8 0 ה . רחש .3000 2/3 6 60 ,חב וחוכ ./ /: סשת 5 סק57860 צֶם 5180 5ש0וצפוק בחב אזסאופוח3 1 הבז 3 בווטם 0 83 ]1 -- "5 חפ טס המב ההסספס םס עבצא זוטוסץ הבר" 6 .5 חח סט הסט הבז ותסספוס 0סף 1086 58 חבס פא אוסח חזבּם | -- "מס הפוצ פס פבזרם 60 פע הס הסםסבּסו|מ טב חב 8|ב503 " * זה ץ3] פב ופ|וח 3 ססחו הסספפוומקב 58/8 וחטזם= זטס אהפצחסס -- "60005 ד 0560 838 60 |פ סרח חפ 09850300 טרס סחופט :1.1 אסנ סם סחוציסו]" 6 .5 חס מ רחס הח1560ו₪ 8ב פס טסץ באו רס 8005ב 1.1 אכ 50 פצסוח 3 אוסח חזבּפ | ,5 הת סט הסט 280ו|508013 08308 סס 5 6 835 וח 1.83 -- "5 הטרס ה 0ס5גום הַח 03" 6 . וחב לפש |בתזפסחו רטוע זפח83!ס םס |פצפ|-הפסבּסוומםב זטוסץ ק88א סחב ,וחפרם 858 8מחו5 3 להפותפ!טרחו סל אוס 83 | -- "2 זב ; החטזס+ מ0ו01504155 בפבבפחרס תצום וטפץ פסחעש" . בחהוהחטז סחב קט מטסזם ח0סו0150055 הטזס? 3 ₪85 60 [ססספסז 5תםסבסוחטווחסס בסו5 ם8// זנוםץ 8ב 60 ההגס1 3 258 -- "1 וב :0+ ח0ו0150455 בפבבּפזרס חאום וטפץ פסחעש" .8ז סח חב ,+ 5000 6155081 8הושסזם , פצחסבּזפסחו פזסות ,%ח8וח8 צחסס 3 הסוא 68סו5 ם 8 זטוסץ בסחב חח -- "ספוטב זס הטבח 8פו5 3 הסטפזרם הַחוממב56" 6 308 סח [בס|חסזב יפות 333 853018 5וחס רסועו בסו5 טפ צחבּ קט פסום5 -- "!מקב בח 8ב חב הפר ַחומ5550" 6 8 ו החסס. בס עציב עב [355002 הח טפש ₪ ב6חסס , הַחולבּהַב 5וחם חסואו פוחפ|טסיזם פצבּח גוסצץ זז |החסח. מ 568- 08-אין/ 1997 - 08- שו !םב זוב [/ החסס. !םאוב וב [. וכסח : וח 7 ,14 וט , צְבּ חס :פוטס 1.355 8/0000 8ן./ע/ע/ע כאן, עשיתי עבודת עיצוב קלה על רשימת המקורות (665ז1ט4650) של סוזס/הּטהּ2. ה- |חט הם החלק הפחות חשוב ברשימה, ולכן הם הוקטנו וקיבלו צבע פחות בולט. קישור מעביר אותך אוטומטית ל-|, ולכן לא תמיד יש לכלול את הכתובת בטקסט. הסיבה בגללה אתה עשוי לרצות לכלול את ה-א היא כשה- | מוסיף אמינות לקישור. לדוגמה, אם אתה מקשר לאתר העוסק בתיקוני רכב, הכתובת ח0ס.0ז0ס? עשויה להיראות מהימנה יותר מאשר הח5106.00יכק1760508. על ידי שימוש בטקסט תיאור בשפה פשוטה בקישורי הטקסט, עיני המשתמש מופנות למידע החשוב ביותר בהחלטה לאיזה קישורים לעבור. יכולת הסריקה משופרת אף יותר בכך שלא כל השורה מודגשת, אלא רק המילים החשובות המתארות את היעד. כפרט קטן אחרון, ההבדל היחסי בין שני הקישורים הראשונים הוא שאותו קוד המקור מופיע פעם אחת בפורמט זפו. ופעם שנייה בפורמט כו2., ולכן נעשה שינוי מתאים נוסף בהסבר הפורמט, כדי לסייע למשתמשים להבין במהירות מדוע ישנם שני קישורים. פרק 2: עיצוב דף ‏ 23 (בעמוד הבא) אתר 6חו|ח0 631%8ח5 כולל בתחתית כל דף, תכונה בעזרתה המשתמש יוכל ליצור קישור תקף לאותו הדף. תכונה זו נחוצה משום שה- ]81 ששימש כדי להגיע לדף עשוי להיווצר על ידי שרת חיפוש ואולי לא יפעל בעתיד. כמובן שעדיף להשתמש ב-₪1ש פשוטים שימשיכו לעבוד ללא הצורך בצעד נוסף זה, אך במצב בו המשתמשים מקשרים ל- | זמניים בחלקים רבים של השירות, יהיה זה מצוין לאפשר למשתמשים לגלות בקלות !אש קבוע. שירותים המכילים מידע רקע צריכים לעודד קישור אליהם על ידי כמה שיותר משתמשים. יצירת קישור לדף תהיה על ידי הקוד הבא: =זח 8> וחסס. חפוח. 8+זה6ח6/ /: קת 9א=6156/061801%.350?/5ח60/ 80 18/0=1 = הח = 783 <03300000 אני מניח שהחלק "97א=5/" גורם להפניה למהדורת 7. אם כך הוא הדבר, זוהי כנראה שגיאה לכלול פרמטר זה בקישור. לרוב, עדיף לקשר לגירסה העדכנית ביותר של הכתבה, במקום להיצמד לנצח למהדורת 1997. 4 עיצוב ממשק באינטרנט כדי לשרת כהלכה את המשתמשים הללו, כדאי לכלול קישור יילאתר עליי טוב הקשור לנושא. "*אתר עליי (50675160) הוא אתר שמטרתו לספק אינדקס של אתרים אחרים בנושא מסוים, לסווג אותס ולהעיר עליהס הערות. קישורים נכנסים הקישורים הנכנסים עשויים להיות אחת הדרכים החשובות ביותר ליצירת תעבורה באתר שלך. כשאתריס אחריס מכיליס קישוריסם לאתר שלך, הס מספקים לך פרסוס (חלקם בחינם) ומעודדיס משתמשיס לעבור לאתר שלך (זכור כי כותב הדף החיצוני התייחס כנראה לעצתי לבחור בקפדנות קישוריס חיצונייס). לפיכך, עליך להיות אסיר תודה לקישורים הנכנסים ולעשות כל שביכולתך כדי לתמוך בהס. לכמה אתרים יש תוכניות שיתוף (8-65ו8/8) רשמיות שממש משלמות עבור קישורים נכנסים. הדרך הקלה ביותר לאפשר קישוריס נכנסים היא להשתמש ב- ]8 קבועיס עבור כל אחד מהדפיס שלך. בכל פעס שהמשתמשים יראו קישור 081 לאחד מהדפיס שלך, הם יוכלו להעתיק אותו לקישור טקסט לדפים שלהס בידיעה שהקישור ימשיך לפעול לנצח. אס יש לך דפיס שאמורים 'ילהיעלסיי בתאריך מסויס, ציין ואת כדי למנוע אי נעימות מאותס בעלי אתריס שבוניס קישור לאתר שלך. לעיתים, קורה שלדף מסוים יש 1אש זמני יחד עם 1 קבוע. לדוגמה, הגירסה ייהנוכחיתיי של טור עשויה להיות 081 וירטואלי המפוענח כל פעס לדף המסויס של הטור הנוכחי עצמו. במקרה כזה, שני ה-0₪1 צריכיס להיות זמיניס לקישורים נכנסיס, משוס שכמה כותבים ירצו לקשר לרעיון של הטור הנוכתי, ואילו כותביס אחרים ירצו לקשר לטור מסויס העוסק בנושא ספציפי. פנה גם לסעיף העוסק בעיצוב ₪1 בפרק , ייעיצוב האתריי. הדרך הטובה ביותר לעידוד קישוריס נכנסיס היא פשוט לספק תוכן מעולה, כך שאחרים ירצו לקשר אל אותו הדף. בנוסף, אס הדפיס שלך מתמקדים בנושאים מסוימיס אז כותבי אתרים אחרים יוכלו להשתמש בהם כהתייחסות למידע מסוים אותו הס מעודדיס את המשתמשים לקרוא. פחות סביר שכותב אחר יבחר בדף שלך כיעד לקישור, אס הוא מערב יותר מדי נושאיס יחד. אחרי הכל, הדף יעבור על כלל ההגעה משוס שקוראי הכותב ההוא לא יבינו מדוע הס הופנו לדף הממוקד שלך. .5" . ₪ הו 605 זטסו 0655 ₪066 ,ב א דח ג את 3 0006156 ₪8637%38 )) . ו הבוו ₪3 8חסד החוחוחחפח !חס 108 5 הּחַחסד .ח63|3 ופ 01 351 ה דסח חב |" 01 50106351 , ח063 30180 וחפחז50 שח1 חו /הזחטסס , מההסד 100 ז65הָחבּ! חב |הזוק03 6ח1 5 ₪ סוב'נטוו! . (ורח 56 290 זוססב) | 5 760 ספה 5| הפב שח3| 1013 ₪85 .עחסחבחסוח ההו5שחץוסק 8 8 חפ 1 סוח3ס!סו 01 5|3005! 012160 חס-||פאו ₪||ח , 5חסוז3 חס |בזסס חב 15|3065 רח63516 שחך .85ח15!3 160 הבתז פזסוח +0/ 00051515 ההַחסד .עזוט!וחטות תמוח חווטו |הסוקכחז 5| 6זאחו!ס 6חד . ז5שטו פחז ח! 6ו! חוהַחס [ח6כת6כ 90 הבּח1 בחכו . 6ח5!3! ז65בַחב! 6ח1 , נכְבּזבּטַחסד חס הַחוטו| 5בחות1-סז זנוספב חזטו , (6זחוז65 1886) 106,800 15 חסוזצ!נוקסק פד 5 , זה6כחשק 100 63 , 316ז 60| 5'בחַחסד . 610001515 פחב 051 ; ההוז5חת) 5| פחסוהפט6 4051/ . 5ח3ו65ח|0 פה 6!קסשק 01108 . 30180 6ח1 חו ז5פַחהָוח 106 הַהסוחבּ דוט 3 חפ עץ וה חס 50568 108 ז3 פאזסעו חסוזה|נוקסק 106 )!הח זוססב טח , החָחסד חן 65וזוזסב סוה סח600 +6וחס 106 פה הַהוח55 שחה בתטפוטוסחט. ץפחסח , הח5הטסז 0 011561 חב 066085 7306 . 5635חפ/וס חוד ס|קרח6 566% 5ח3חַחסד הברח , ח3! 01 שַהַחסח5 3 01 8603856 . 16 .(1996 ;5.91.!) |הטוףפ בּחַחבּ'ּק 27. 1) שח כ 108 15 הפיחס |בחסוזצח שרד .31 חהָופזסו חב , ההסזפה חַהסעו פחהּמַחסד עפ 1ח56 1 630 35 567/85 67ז5!ח!וח פוחחק 6ח1 חב , 51316 01 630ח 6ח1 15/| טוסקטד טסחב'ט3ד הַח0! . עחסתהחסוח |החהסוזזוזפ חס 3 5! בּמַחסד חח ח3 , 65!פסח 33 55'הּהַחסך עס 6|60160 131//85ח56חקפת 6חוח , זחופ 03 זפפוח6וה-1 1 ח3 01 51515ח00 זח6וחב!חבק שח . זהשוהוחפיוסם .63 1086 ]רפע | 35 5ח0ו2601] . 6!קסשק 106 עפ 6|60160/ 13110/65ח5 הקט ץ-130 זזסוק₪ ח5!זח₪ בחה , 51660הר פזפחס|קא6 חסזטם 1616 ח| . סָהּ פזבפוך 3600 זוססב |(" וחסיז טפוחב /י|סהפסחק 5:זההזוסבחח| 851 5'הּהַחסד 16 6160/וחסס חב 18205 108 חו טוחב 65הבחס!55וח ז5ו0סתזש/ . 1777 שח 1773 הששטז6פ 515 שפחת1 306 000% 65וח3!. הו13ק3 ,51316 00160180 9115 3 6וח603כפ בּבַחסד 1900 ח| .1875 חו ע הסהבּחסוח 18 060 חט10 | טסקטד 3606 .עזוה3וז5חת 10 0675ח15|3 18 וחסיז חסוזו5סקקט הַהכת51 13086 , 1992 חן 266וחבּבָחס , זהרחטטכו! /30ססרח06 -טח?] הד . 6ח6ה6ק6טח| בשט6וחסב א 1870 חן חב הש והוחשסף 106 6ח3 ע'תסתהחסוח 8 5ח1 10 אחו| 3 916ח9ט 10 בחפח אסוום 5 00130 10 וס 5 1000506 זופתו ו א 16 זם+ם 66 וס = (6768/18.607 ./ע/ע/ץ פרק 2: עיצוב דף ‏ 25 אתה יכול להיפרד מרעיון השימוש בקישורים נכנסים כמקור למשתמשים חדשים, גם אם אתה דורש הרשמת משתמש (ח60507800) או פתיחת מנוי (חססק 056ט50). 6 עיצוב ממשק באינטרנט קישור לאתרי מנויים ורישום משתמשים אתה יכול להיפרד מרעיון השימוש בקישורים נכנסיס כמקור למשתמשיס חדשים, גם אס אתה דורש הרשמת משתמש (ח₪6015078000) או פתיחת מנוי (ח00ק50250). אין סיכוי שכותבי 65/ יכניסו קישור לדף, אס המשתמשים שלהם ייאלצו להירשס בתשלוס לפני שהס יורשו לקרוא אותו. אפילו רישוס המשתמשים די בו כדי להוריד את כמות המשתמשים שמגיעיס מקישורים נכנסים. משתמש שיעשה את כל הדרך לקישור רק כדי להיורק למסך רישוס במקוס לקבל תוכן דף אינו משתמש שבע רצון. אס האתר שלך דורש דמי מנוי או רישוס משתמשים, אני ממליץ שתיתן אפשרות לקשר, ללא תשלוס 50070 1166), דפיס מסוימיס ב-0₪1 מיוחדים - כלומר, כל משתמש שיגיע לאותס ה-₪1 יוכל לחיכנס בלי להיתקל במסך חוף10. אס אתה בוחר את הדפיס החופשייס שלך, כך שמצד אחד ייצגו את השירות שלך, ומצד שני יועילו לכותבי אתריס אחרים, הרי שהסיכוייס למשוך משתמשים המתענייניס בנושא גבוהים, וכמה מהס יהפכו ללקוחות קבועים. עליך לשמור על סטטוס הייקישוריס החופשייס'י בדפיס הללו, וליצור מנגנון קל עבור הכותביס, בעזרתו הס יוכלו לגלות את ה- 01 בו הס יכוליס להשתמש עבור הקישוריס שלהס. למרות שרישוס מנוייס ומשתמשים אינו טוב לקישוריס נכנסים, אינני מתייחס לתשלומיסם קטניס (פזח6וחץ3ק סזסווא) באותה הצורה. כשתשלומיס קטנים יהפכו לפופולריים יותר בשניס הקרובות, המשתמשים יחויבו במחיר סמלי עבור דפים מסוימים, דרך מנגנון שהוא שקוף כמו מנגנון התיוב הנוכחי של שיחות הטלפון. החיוב מתרחש, והוא מופיע בדוח החודשי שלך, ללא התערבות המשתמש או אישור מיוחד. הכותביס צריכיס לחשוב על מחיר הדף לפני שהס יקשרו אליו, וכל כותב כזה יעדיף לקשר לדף חופשי מאשר לדף עס תשלוס קטן, אס שני הדפים בעלי ערך תוכן והה. אך חיוב של סכוס קטן לא ירתיע אף אחד מלקשר לדף טוב. אס הקישור אינו שווה סכוס סמלי, הרי שלא היה כדאי לכלול אותו מלכתחילה. קישורים לפרסומות פרסומות הן מקרה מיוחד של קישוריס נכנסים משום שאתה שולט בעצמך בקישוריס אס אתה משלס עבור המודעה. אני ממליצ לקשר ישירות לדפים שהס נושא המודעה במקוס לקשר ישירות לדף הראשי שלך. מחקרי פרסוס ב-ס6/ מראיס שבין % ממשתמשלי ה-80/ שלוחצים על כרזות פרסומות (615חח88 0ג), ומגליס כי הס התחברו לדף ראשי של חברה אחרת, לוחציס על הלחצן 886% כמעט מיידית. הדבר היחיד שהופתעתי ממנו היה שאחוז המשתמשים שעשו ואת לא היה אפילו יותר גבוה. אחרי הכל, אם אתה ייזורקיי משתמשים בדף הפתיחה שלך, אתה משאיר אותו לחסדי כישורי ההישרדות ב-68/ שלהם, שבעזרתס הס אמוריס למצוא מידע בעל ערך, המתייחס לסיבה שבגללה הס לחצו על הפרסומת מלכתחילה. אם ניקח בחשבון עד כמה קשה לנווט ברוב אתרי ה-טפ/, זהו רעיון רע. חלק מאנשי השיווק של ה-פ6/ מקשרים את כרזות הפרסומת שלהם לדף הראשי שלהס משוס שהס רוציס שהלקוחות הפוטנציאלים יחוו את האתר מתחילתו. מעשית, זה לא יעזור משוס שהמשתמשים אינס להוטיס להיאבק באתר שלך. הוא איננו מרכז היקוס בשבילם. משתמשי ה-60/ גולשיס במהירות והס רוציס את המידע כאן ועכשיו - ולא חמש לחיצות מכאן. אם, ורק אם, דף היעד יספק מידע מעניין הקשור לפרסומת שמשכה את המשתמש, הוא יעשה לאתר שלך טובה ויבקר בו. ובעניין כרזת הפרסומת עצמה, עליה להיות מעוצבת כקישור טקסט. כלומר, עליה להכיל סיבת עזיבה מצוינת כדי לגרוס למשתמשים לפתח ציפיות לגבי התוכן שאותו יראו בקצה השני, ותגרוס להס להבין מדוע בכלל עליהס לטרוח להשתמש בקישור. יותר מדי פרסומות פשוט צועקות ייהסתכלו עלי!יי בצורת הנפשה מטרידה, והן לא מספקות שום מוטיבציה לשימוש בקישור פרט לפקודה המפורשת יילתצ כאןי'י. פרק 2: עיצוב דף ‏ 217 1 1/0566] ---<:/עשכ)]1כ)/ן-4וצו 5*יקה חן 588700 3685 שס!|פצ הַחווטז36]טחה וז שפצ זס+ 5830080 גוסצ - 339,429 זם 10 - 1 51185 ו | 5 918166 6-4 5זסטחפץ סח-60 5996 5 םשא 8|סחצעע 8ח+ 58370 62 5|655ז 58פח; צָ!וחם הסזב55 ₪ 0 %א6%ח 55 ₪146 | 339,429 0% 10 - 1 51:85 סצס 01 צְ0ַס!פהת66ד החד שר 35 אופו/ 5'זטזססב?טחב₪3 פח0 - להפהחקוטם= 5ו5ץובּחג סצס אופא חב פחססבז0ופחסס , 5סהפרח 0880 אופח 00 50 , פהוס)חגו סצס זם? הססבּסהוסטק5 ... 3% 5 .סהפותטוטוסם 6855 זם? פסהפותפזוגוםפז (5.66 59128) |חלח.508ה/ע0 63%+/96]ט 05+/05+/רת 60 6% חוכ!א .שש // !קת 10096 ט חבוא 5 ץח3 60 ; הסססטטסזוק סשס 5חו880 פטטחוצ טההנססבּזטחבו סשס זפא0 סס :5008 הַחהחוססבּזוחבו סטס 087 60 זפזנססבזוחבו 60 6ההטהפקפסח1 ספות ... 13 .580% ,. בש ,= | ו[ש5ם דדס וחבו0 8זושופאופא חק (4.56 5158) |8/582145.7%0ע1ח6ז3 /8/5ח /רח סם ,3% ₪ 01016316 .שש // !קת 10096 5 ד ו וה 5), , ]טרח 3558 , הסספפוומפז סעיס/ו סא- 56/60 זפאס 85וסם|פההספד וס וה הפרח[ חב תוהזב על ,השרפב הבוח (2,86 58ן5) /רהסס.רהס|3.ששש//!קאת 10096 סש .0566%/ח./ע/ע/ע 1 בס 10105666 !שצם צטם 4!טפח5 טפצ צחצ 5ח₪6850 10 זס] 6פו א6וו6 5ע6ר 9 רחסזת 005 556%00 פזה 2000 33%8030 5% 58180 0+ 1.3%65% סצים 0זחוו +והּו5 % 5חופום ₪ ה|מספס 555 5 5 זב יפב 5 זפ 5% חן 0588%זח1 עצשחה קוח סס חספמחום סהחוססבּזוחבו ו ץב5טחו | .0 סההנססבּ טוחב סחהחנססבזשח₪3 פחטר .4 | טחחנססבזטוחב₪ ד ב ל-0506%+ח1 כדאי להריץ פרסומת ל-סצפ המוצגת בכל פעם שהמשתמש מבצע חיפוש באתר על המחרוזת "פַח860?טחבוז סצפ" (יצרני פצס). משתמשים המחפשים מילות מפתח הקשורות לנושא המודעה ירצו לרוב לעבור לקישור. מודעה זו משכנעת במיוחד משום שהיא מבטיחה תגמול ספציפי (טוב בהרבה מכרזות כלליות בסגנון "לחץ כאן כדי לבקר אותנו"). 8 עיצוב ממשק באינטרנט עא 6 2% פט!6 6ח! 2 סח! זחוסק 6ח! 6זסז5 6חז ,65 1051ב] 106 זס) 950166 6חו|חס 8 ,]חוס] 66ה06זסח60 10 סוחס9|6/ .0 חם 66חסחָזסשהס6 0-1 סו 191016 16 05 5חסו56055/ סחם ,5הסוחוקס - .6 .ו "--₪ ו תו 7 2 . = 24 9 5 ,5הסוהוקס ,0166 זחוס 6חז -1676] 616% 2 7 שה = 6 זסוחס!5 60 רא ,יי 5 8 00 ,65חוסף חס פוחחָטסח! זטסץ 6זםח5 22 6 | סוחס עבר נה | קוו 0 5 !50660 חס 15הט6/560 ,265נזק ע!חס-5זספ וח6// מט[י) סו 00 606006000 חס6./שעעעץ לרוע המזל, יעד הקישור של המודעה הוא דף ראשי כללי של 010% 66ח6706שח0ס6 שאינו מכיל רשימת ".676 685005 10 ?ספ שטט ץח/" כפי שהובטח במודעה. משתמשי האינטרנט הם ציניים למדי, ולאחר שהפרת הבטחה, הם יניחו כי האתר שלך חסר ערך והם לא ימשיכו לחקור אותו, אלא להיענות ללחצן ה-886% שקורץ להם. פרק 2: עיצוב דף 19 טג ו .. ?אא >זו5 א 5'דה חש אסוזה זו6:א 9105 6] שו6] זט 6808 זס] שיסח ז6ו5סָפ 8 פחז חס 5 פסח|5 65|סו8/1 סז סו קוז 15| 0565] 4513 351=-חזטס60 2518 1241- ג!נוס0 5 01 255001105 6ב 04 + למטמד 1 , סש וופיך 2 אמט[ 110 .4[נטקי 021116 סז מס 10066 ,15618 שגפ קנוסתש 126 בו , 5מסנשז1 ות ות 60 ו דח וח 8 !1 חב וטספוח 63 5 ]5 פב 8 סכחק 0 ווח חספ 8+! בחם... 60 5 5 זו 6 ב ב שחוח83 ב 5 ווח טר רחס .111161761 6ו[1 ונה פונ0ג81טנתנונוו16[5001 מותנונמסנ6 88[טנונה 6פפו וס פ 'חספ |1ום 18 | 1997 281 שמגוט דוח 1ב הפה :193 ב ופ 8 !ןו | 1997 215% פמט 897 אססם 181ח9וה! ,8 אסכ ₪ |ערחבם :פט|פש 308= 7 2151 סח 03018 טחבּ 3158 |₪1 | 1997 תו14 פחגוט מּזְחַפְּהָבּ הַהוססטדופ +ח9ט)!!פוה| | 1997 תו14 פחגוט 8 00 פס ופפ הס 8בוההס!ה| | 1997 ת:14 פמט + חכשש זסטחפש 0515 ||בחחפ ב עס | 1997 ת14 פחגוט חצ כו 181 טסו | דד 7 3151 1 !סו בה עשפה ף 'דה זה 7 3151 עמ %החפוה! 818 חס פהספסוו | 1997 1/3156 ווח סכ > סעות פרו פר8 בירוב א ספ כח0 ו 7 חת240 עפ 288טכ 9018 8 וט 5 'חופו חם 7 חת240 עמ 8חספ סה ונת 5090 :008 פ סח חס 7 חז17 עמ ספ 8ב ב חס פד חס פוחפהת 7 תו17 עו .6600775 .ץע 0 עיצוב ממשק באינטרנט | 6תך ב 7 ח251 + וט | 5 ךא5א אש ,+ וק דפ אה גוא + 5 + 27 5|5ה + 5 זט 80 8 יי | 6תך ו 7 4 וט 85 ך,א5אא 6 5 קד אא בו + יוו 27 )5 + 5" 5 דד 5 ]56 בי 5 ד ספזואט 5 פד או5ג +גאסוזהאחתדאו 8 אוהדוחפ 5" 8 65אגאו; 5 ₪ 565865 006 ד (בעמוד הקודם) השווה בין שתי כרזות הפרסומת של אחהטטוס, המופיעות באתר + סח ס6ם 6חד. איזו מודעה מבין השתיים יכולה להסיט אותך מקריאת כתבות מעניינות על כלכלת העולם? הפרסומת הכללית "5 156 0+ 6זסח >6|!6" עוזרת רק למשתמשים שאינם יכולים לנחש כי ל-%ח008ו6 עשוי להיות אתר בשם החסס.אח08ח6.אועשו. הפרסומת בעלת חמשת הלחצנים הצבעוניים מספקת תיאור טוב יותר של כמה מהשירותים אותם המשתמש ימצא. בנוסף, המשתמש יכול גם לעבור לדף הראשי הכללי על ידי לחיצה על סמל %ח₪8טו6 או לעבור ישירות לדף של שירות ספציפי על ידי לחיצה על הלחצן המתאים. גיליונות סגנון גיליונות סגנון (655 - 506665 50/6 8חו685680) הס אחת מהתקוות הגדולות ביותר בנושא הפרדת התצוגה מהתוכן. ה-69/ היא המערכת שבה מספר הפלטפורמות הגבוה ביותר, ומשוס כך התוכן שלך יובג במגווו כה רחב של התקניס, כך שעל הדפים לציין את משמעות המידע ולהשאיר את פרטי התצוגה למזווג (או יידירוגיי) של גיליונות סגנון ספציפיים לכל אתר ולהעדפות המשתמש. אס השימוש ב-/601) גרס לשבירת הדפיס שלך, תעריך את היכולת לספק עיצובי דף חדשים על ידי יצירת קובצ גיליון סגנון יחיד במקוס לשנות אלפי דפי תוכן. השתמש בגיליון סגנון יחיד לכל הדפיס של האתר שלך (או אולי בכמה גיליונות מתואמיס אס יש לך דפים עס צרכים שוניס מאוד: לדוגמה, תיעוד טכני מול דפי שיווק). אחד מהיתרונות העיקרייס של השימוש בגיליונות הסגנון הוא הבטחת המשכיות חזותית בזמן שהמשתמש מנווט באתר שלך. פרסומאים בכלכלה הישנה יודעים מזה זמן רב את הערך שבשימוש סוג גופן יחיד בהדפסת מוצרים: לא משנה היכן שתיתקל במגזין או עיתון, הטקסט והסידור הבסיסי תמיד ייראו אותו הדבר. אתרי 60/ ישיגו אחידות ותפיסה מאותו הסוג אם כל הדפיס באתר יהיו מקושרים לאותו גיליון הסגנון. ישנן שתי דרכים ליישוס גיליונות סגנון: גיליון סגנון מוטמע 50660 56/16 060060חח=) נכלל פשוט כחלק מדף ה-60/ בצורת שורות נוספות של קוד. גיליון סגנון מקושר 50660 50/|6 60אח/)) נשמר בקוב נפרד, וכל דף שרוצה להשתמש בסגנון שלו מכיל קישור טקסט בכותרת שלו, המפנה לגיליון הסגנון. השתמש תמיד בגיליונות סגנון מקושריס במקוס בגיליונות סגנון מוטמעיס. רק כך תוכל ליהנות מיתרונות הניהול בעזרתס ניתן לעדכן את מראה האתר כולו על ידי שינוי יחיד. בנוסף, אס תוציא את הגדרות הסגנון מהדפיס שלך, תהפוך אותס לקטניס יותר וזמן ההורדה שלהס יקטן. אס תשתמש בגיליון סגנון יחיד עבור האתר כולו, קובצ זה ירד פעס אחת ולתמיד. פרק 2: עיצוב דף ‏ 81 אחידות בעיצוב באמצעות גיליונות סגנון גיליונות הסגנון בכל אתר צריכיס להיות מעוצביס על ידי קבוצת עיצוב אחת מרכזית. יש לכך שתי סיבות : ראשית, עיצוב מרכזי מהווה את הדרך היחידה להבטיח סגנון רציף שהוא אחד מהיתרונות העיקרייס של גיליונות הסגנון. שנית, רוב יוצרי התוכן ב-60/ לא מסוגליס לעצב או לכתוב גיליונות סגנון טובים. הניסיון במעבדי תמלילים עס יכולת סגנון (כגון 4 ) מראיסם כי רוב הכותביס אינס יודעיס כיצד לנהל את עיצוב המסמך בעזרת סגנון. בהוצאה לאור רגילה (פַחוחפו|פט 500א265) קל יחסית להבין את השפעת הסגנון משוס שזוהי סביבת 6צ//ו51ץ/ הח 6% טס 88 15 566 טסץ) עס צורת פלט יחידה - מדפסת. אך ה-60/ אינה סביבת 6ץשו5/ץ/ בשל מגוון הפלטפורמות הנתמכות. יתרה מזאת, גיליונות סגנון 68/ ממוזגיס עם גיליון הסגנון של המשתמש ויוצריס את התצוגה הנראית לעין. בשל הבדלים אלו, חשוב להקפיד על כך שגיליונות הסגנון יעוצבו על ידי מומחים המבינים כי ניתן להציג את תוצאת העיצוב שלהס בדרכיס רבות, והיא עשויה להיראות אחרת ממה שהס עצמם רואים על המסך. 6ץ/שז צשצו לפני עידן הממשק הגרפי, נהוג היה ליצור מסמך מעוצב במעבד תמלילים על ידי עירוב קודי עיצוב בטקסט. לדוגמה, טקסט מודגש היה מצוין על ידי הקוד +9. משתמש שערך את הקובץ לא היה רואה את המילה מודגשת, אך הוא היה רואה את הקוד +פ. לפניה ואת הקוד +פח. אחריה. הוא לא היה רואה את תצוגת המסמך הסופית עד שהקובץ הודפס. ממשק משתמש זה גרם להדפסות מבוזבזות רבות משום שהמשתמשים גילו שהם משתמשים בקודי עיצוב שגויים. הממשקים הגרפיים הביאו את בשורת עריכת ה-51///6צ/, שבה מה שאתה רואה הוא מה שתקבל 660 טסצ אהח/ 15 566 נוסצ זהח/)). במילים אחרות, המסמך יופיע באותה הצורה על המסך ובהדפסה על נייר, ולכן המשתמשים לא צריכים להדפיס את המסמך כדי לנפות שגיאות עיצוב. זוהי התקדמות משמעותית מאוד בנושא שימושיות. ב-60/, אנו נאלצים לוותר על שיטת 6צש51צצ משום שהדפים ייראו שונים מאוד כשהם יוצגו על מגוון דפדפנים ו/או התקנים. למסך גדול יש קרוב לפי מאה פיקסלים מאשר התקן נישא, וקו 3ד מעביר מידע בקצב הגבוה פי אלף ממודם. אכן, מראה שונה הוא תכונה, ולא שגיאה, משום שכדי לתת למשתמש חוויה מיטבית יש לבצע כיוונונים על פי מאפייני כל התקן. ככל שההתקן מיוחד יותר, כך יש צורך בתוכן 65\ נוקשה יותר כדי להפוך למשהו שמתאים לתצוגה על אותה הפלטפורמה. הדרך היחידה שהמעצבים יכולים לעשות זאת היא לוותר על שליטה מלאה, ולאפשר שליטה על תצוגת הדפים שלהם על ידי מפרט דף שפועל הדדית על פי העדפות המשתמש ומאפייני ההתקן: גיליון סגנון. 2 עיצוב ממשק באינטרנט דוגמאות גיליונות סגנון עבור אינטראנט באינטראנט, אתה יכול לרוב להימנע מתוספת הסיבוך שבדאגה לנושא מגוון הדפדפנים והפלטפורמות. אם אתה מקובע על פלטפורמה ודפדפן יחידים, מדריך גיליון הסגנון שלך צריך לכלול רק תצוגות מסך של דפים שעבדו בתצורה המומלצת. גם כאן, עדיין יהיה עליך לכלול תמונות של דפים שהועברו בגדלי חלונות שונים (המשתמשים קובעים חלונות דפדפן בגדלים שונים, אלא אם הארגון כולו משתמש בסוג מסך מסוים). עם זאת, האינטראנט עשויה להכיל מגוון גיליונות סגנון בשל הצרכים השונים של סוגי המידע השונים שבמחלקות שונות. מדריך גיליון הסגנון שלך צריך להכיל רשימה ברורה של כל גיליונות הסגנון ולהסביר מתי להשתמש בכל סגנון (בתוספת דוגמאות תוכן). כדי ליישם בהצלחה גיליונות סגנון לארגון שלך, אתה חייב לחשוב על תוכנית הדרכה ליוצרי התוכן שלך כיצד להשתמש בגיליון הסגנון. אל תניח שהעובדיס מביניס את תפיסת הסגנון וכיצד להחיל אותה פשוט מפני שהם מכיריס תוכנת עיבוד תמלילים ועיצוב סגנון. ידוע כי רוב המשתמשים עושים שגיאות נוראיות כשהס משתמשיס במעבד תמלילים ליצירת סגנון, גס בגלל שלמעבדי התמלילים העיקריים יש תמיכה גרועה בעיצוב סגנון, וגם מפני שקשה ליצור סגנון. גיליון הסגנון שלך אמור להגיע יחד עס מדריך קצר המסביר את הסגנונות השונים, וכן כיצד ומתי להשתמש בהם. אתה תודקק להרבה דוגמאות, כולל קוד 311 גולמי ולתמונות מסך של תצוגת הדפיס המקודדיס כפי שהם מוצגיס על ידי הדפדפניס העיקריים בכמה פלטפורמות שונות. תמונות המסך צריכות להיות מפות תמונה (1806/1805) בהן יכוליס המשתמשים ללחו על האפקט אותו הס רוציס להשיג, ולעבור לתיעוד הסגנונות המתאימים. אס יש לגיליונות סגנון תצוגה דומה, תוכל לחימנע מבעיות רבות על ידי הסברת ההבדלים וכן מתי להשתמש בכל סגנון. למרות שאני מעדיף גיליונות סגנון מקושרים ועיצוב מרכצי, יש לאפשר, במידת הצורך, לכותבי דפיס פרטיים ליצור סגנונות מוטמעיס נוספים עבור הדפיס שלהם. יש לעודד ואת רק כשהצורך בכך קיים, כי תמיד יהיו מקרים בהם יידרש סגנון מסוים, שאינו מסופק בגיליון הסגנון המקושר. אס דפיס רביס זקוקיס לאותו האפקט, יש להוסיפו לגיליון הסגנון הגלובלי של האתר, אך אין להציף את גיליון הסגנון המקושר בסגנונות הנדרשיס פעם אחת בלבד. את הסגנונות המופיעים בדף יחיד יש להטמיע ולא לקשר. הדף אמור להמשיך לקשר את גיליון הסגנון הגלובלי ולאחר מכן לעקוף אותו עס סגנונות מוטמעיס מקומיים על פי הצורך. היתרון בשיטה זו הוא שניתן לאפשר שינוייס עתידיים לגיליון הסגנון המרכזי כדי להתאים אותו בצורה הטובה ביותר לדף שעבר שינוי. פרק 2: עיצוב דף 83 הדוו פס גוא | 6566 | 5 למרות שסמל ה-655 של איגוד ה-60/ (ט6/ והטוז50ח0ס6) נחמד, אני ממליץ שתישמר מלהדביק אותו בכל מקום באתר שלך. אל תציב אותו בדף הראשי. למשתמשים לא אכפת כיצד אתה בונה את האתר שלך (אלא אם הם עוברים לקישור "אודות האתר", שם מומלץ מאוד להציב לחצן 055). כלל בעיצוב דפים ראשיים הוא "יותר שווה פחות": ככל שיהיו יותר לחצנים ואפשרויות בדף הראשי, כך יוכלו פחות משתמשים למצוא במהירות את המידע לו הם זקוקים (שימו לב לכמות הגדולה של דפים ראשיים בהם קיימים לחצני הורדה עבור יצרני דפדפנים שונים ו/או תוכנות עזר למיניהן. מדוע להוריד את שימושיות האתר כדי לתת לחברה אחרת פרסומת חינם?). 4 עיצוב ממשק באינטרנט בדיקת גיליונות הסגנון הדפיס חייבים להמשיך לפעול כשגיליונות הסגנון מנוטרליס על ידי משתמש הקצה או הדפדפן שלו. לדוגמה, אל תשתמש בטריק של חזרה על אותן המיליס כמה פעמים עס הסטה קטנה כדי ליצור אפקט הצללה. אס הסגנון הרצוי לא יופעל, הטקסט יהפוך לגיבוב לא מובן של מילים. חשוב לשמור על תצוגה ברורה של הדף גם ללא גיליון סגנון, כדי לתמוך במשתמשיס שברשותם דפדפנים ישנים, משתמשים עס מוגבלות ראייה, וכאלה שנאלציס לחסום את תכונת הסגנון בדפדפן שלהס (בגלל באגיס או משוס שהסגנון שלך מתנגש עם העדפותיהם). למולך, קל לבדוק תאימות לכלל וּה: פשוט חסוס את גיליונות הסגנון בדפדפן שלך וטען את הדף. הנה עוד כמה קוויס מנחיס בהס יש להתחשב בזמן עבודה עם גיליונות סגנון: > אל תשתמש ביותר משני גופנים (ואולי בעוד אחד עבור טקסט מיוחד כגון קוד מחשב). זכור את הלקח מתחילת ימי ההוצאה לאור: שימוש בכמות גדולה של גופניס רק בגלל שאתה יכול להשתמש בהם, תגרוס למראה מבלבל. לרוב, אתה יכול להשתמש בגופן אחד עבור גוף הטקסט ובגופן אחר, מסוג מודגש, עבור הכותרות. שיס לב שאפשר (ואף מומלצ) להשתמש ברשימה ארוכה של גופניס חלופיים במפרט גיליון סגנון עבור סוג מסויס של טקסט. דפדפן המשתמש יבחר את הגופן הזאמין הראשון ברשימה וישתמש בו על פני כל הדפים שלך, כלומר המשתמש יראה גופן יחיד, ויקבל הרגשה שהאתר בנוי בצורה אחידה. חשוב שרשימות שמות הגופנים יכילו את הגופניס באותו הסדר משוס שהדפדפן יבחר בגופן הזגמין הראשון מביניהס. 6% אל תשתמש בגדלי גופניס קבועים, אלא ציין את הגודל יחסית לגודל הגופן הבסיסי המוגדר לפי העדפות המשתמש. לדוגמה, תוכל להגדיר טקסט גדול כ-%*200%'י, כלומר הוא ייקבע כגודל של 24 נקודות אס המשתמש מעדיף את גוף הטקסט בגודל 12 נקודות, אך הוא יהיה בגודל 0 נקודות אס המשתמש ציין גודל גוף טקסט של 10 נקודות. החלטת הגולשיס להעדיף גופניס גדולים או קטניס נובעת ממגוון מניעיס <65וה3ז01> אם אתה מתעקש, חרף המלצתי, להשתמש ב-87065ז=, ספק לפחות גירסה חסרת 65חח3ּז= עבור המשתמשים הרבים שמעדיפים להימנע מהן. ניתן לספק תוכן חלופי בסעיף <65וח8ז1סח> שיוצג למשתמשים שכיבו את יכולת ה-8765ז= או אם הם משתמשים בדפדפנים שאינם תומכים בתכונה זו. לרוע המזל, רוב המעצבים לא טורחים ליצור שתי גרסאות לדפים שלהם, והם שומרים את <865ז)0ח> לקישור "מסייע" לאתר ההורדה של גרסת דפדפן התומכת ב-865=. הדגשתי בכוונה את המילה "מסייע". המשתמשים לא ירצו להוריד דפדפן בגודל 108 רק כדי לראות את הדפים שלך, ולכן הקישור לאתר ההורדה חסר ערך. הכוללים: גודל ורמת ההפרדה של המסכים, כושר הראייה, ואם הס צופיסם בדף בעצמם או מציגיס אותו לאחריס. מטריד לבקר באתר בו הטקסט קטן מדי לקריאה נוחה, אך מטריד אף יותר ללחו על הלחצן 10967 6%%? 66םּ!'י (ב-=1, תפריט ששו > +א6ד או הלחצן 5126) ולא לקבל תגובה משוס שגדלי הגופניס הוגדרו במספר נקודות קבוע. 6% בגיליונות הסגנון ניתן לציין שהגדרות מסוימות צריכות לעקוף את אלו שברמות דירוג אחרות. דבר וה נעשה על ידי הוספת המאפיין סק וחו! למפרט. אל תשתמש בתכונה זו. קשה לתאר מצביס בהס באמת צריך להתעלס מהעדפות המשתמש אם הוא הרגיש צורך חזק מספיק לדרג את העדפותיו כ-+ח3זוסקוחו!, לכן יש לשמור את המאפיין +ח9זוסקוחו! אך ורק עבור גיליונות הסגנון של המשתמשים, ולעולס לא להשתמש בו בגיליון סגנון של אתר ט6/. > אם יש לך כמה גיליונות סגנון, ודא שאתה משתמש באותס שמות 61455 עבור אותו הרעיון בכל הגיליונות. יוצרי תוכן שמשתמשיס בשני גיליונות סגנון או יותר יתבלבלו אס יהיה שימוש ב-45565 61 שוניס עבור אותו הדבר או אס בגיליוו אחד תהיה הגדרת 455 |6, שלא מופיעה בגיליון השני, למרות שהרעיון מופיע בשני הגיליונות. אס, לדוגמה, יש לך 61455 עבור שס מחבר דף, כל גיליונות הסגנון יצטרכו להכיל את הגדרת ה-61455 הזו. ניתן כאמור לבצע אכיפה (106ז06) על 61/55 גלובלי זה על ידי הגדרת 5 דומה בדף ספציפי במידה ונדרש. מסגרות (פ6וחגּזת) המלצתי הטובה ביותר בנוגע ל-865ז= היא לא להשתמש בהן כלל. גולשים שיודעיס באמת מה הס עושיס יכוליס להשתמש לעיתיס ב-8765= למטרות טובות, למרות שמומלץ שאפילו המעצביס המנוסיס ישתמשו בהן כמה שפחות. חלק מהגאוניות בעיצוב ה-60/ המקורי של 6 וחוד היה רעיון האחידות של כמה תפיסות ברעיוןו אחד, הדף: > זווית הראייה של המשתמש על המידע שעל גבי המסך. פרק 2: עיצוב דף 85 5הז-] ב-16%56326] גירסה 2.0 0 6156806 היה הדפדפן הראשון שתמך ב-65חח8זם, אך הוא עשה זאת בצורה גרועה, ופתח את אחת מבעיות השימושיות הגדולות ביותר ב-60\ עד כה: הלחצן 886% בדפדפן פשוט לא פעל באתרים בעלי פ6חּּז=. היכולת לחזור אחורנית מהווה רשת בטחון הכרחית עבור המשתמשים, בעזרתה יש להם אומץ לנווט באתר בחופשיות. תמיד הם יוכלו לחזור אחורנית למקום ידוע. מכמה מחקרים מוקדמים שנערכו על התנהגות הניווט של המשתמשים למדנו שתכונת 886% היא שנייה בחשיבותה בדפדוף 60/ (אחרי הפעולה הפשוטה "לחץ על קישור כדי לעבור אליו"). לפיכך, נטרול הלחצן 886% משול לאסון. למזלנו, אף אחד אינו משתמש יותר ב-2.0 6056306. הוא היה אסון אמיתי מהבחינה הזו. 6 עיצוב ממשק באינטרנט 6% יחידת הניווט, או מה אתה מקבל כשאתה לוח על קישור או מפעיל פעולת ניווט כמו סימניה (%זהוה00). % כתובת טקסט (081) בעזרתה ניתן לקבל מידע ברשת. % אחסון המידע בשרת ויחידת העריכה של הכותב, פרט לשימוש באובייקטים מוטמעים כגון קבצי תמונות שאינס דורשיס מהכותב לנהל כמה קבצים עבור דף מסוים. למעשה, ארבע תפיסות אלו אוחדו כל כך טוב עד שאפילו לא שמת לב שהן נפרדות אחת מהשנייה - הוכחה טובה לכך שהעיצוב המקורי של ה-6/ פועל לפי התכנון. עקרונית, ה-65) מבוססת על כך שהדף הוא היחידה הקטנה ביותר של המידע, ורעיון הדף מנחה את כל הרעיונות ב-פ6/. פשטות ה-60/ המקורית תרמה לקלות השימוש בה ולהפצתה בעבר וגס תתרוס להפצתה בעתיד. המסגרות שוברות את מודל האחידות של ה-60/ ומציגות דרך חדשה לצפייה במידע, דרך שלא שולבה היטב בתפיסות האחרות של ה-65/. המידע הנצפה ב-65ו87ז= על ידי המשתמש נקבע על ידי סדרה של פעולות ניווט במקוס פעולת ניווט אחת. הניווט אינו עובד יחד עס 65ו80] משום שיחידת הניווט שונה מיחידת הצפייה. אס המשתמשים יוצריס סימניה בדפדפן שלהם, הס עשוייסם שלא לקבל את אותה התצוגה כשהם ישתמשו באותה הסימניה בפעס אחרת, משוס שהסימניה לא מכילה ייבוג של מצב ה-1865 בדף (הקישור הוא לדף התוכן המוצג ב-8₪6ז1 מסויס ולא לדף המכיל את הגדרות ה-6%פוח₪ז)). גרוע מכך, ה-81 יפסיקו לפעול. מידע הכתובת המוצג בחלק העליון של הדפדפן לא יהווה יותר מפרט שלס של המידע המוצג בחלון. אס כותב מעתיק את ה-81 במטרה לכלול אותו כקישור טקסט מנחה באחד מהדפים שלו, הקישור המנחה הזה לא יוביל את הקוראיס לתצוגה הרצויה, אלא למצב ההתחלתי של ה-876560= (סדרת מסגרות). בדומה לכך, אס משתמש מחליט לשלוח הודעת דואר אלקטרוני לחבר עס המלצה לבדוק את הדף, העתקת ה- 81 מהדפדפן לא תועיל אם נעשה שימוש 5 ה חסרות גבולות ניתן לשפר את רוב השימושים ב-65ו8= על ידי העלמת גבולותיהן. המשתמשים לא צריכים לדעת כיצד בוצע העיצוב. השימוש ב-65ו80?= ללא תצוגת גבולות מקנה שני יתרונות עיקריים: כמות הפיקסלים הפנויים עבור תוכן גדלה, יש פחות רכיבי ממשק הנראים לעין. ב-65ו87ז=, משוס שה- |₪() מצביע על ה-787856%= ולא על התצוגה הנוכחית (עס המידע בו החבר מעונין). אס נתחשב בעובדה שחיפוש וסינון הס ממנגנוני גילוי המידע התוקיס ביותר באינטרנט, יהיה זה אסון לחסוס את ה- ₪1( כמנגנון איתור. ניתן לקבוע, על פי דרך השימוש של רוב המעצביס ב-65ו8ז=, שלמשתמש יש מחשב סטנדרטי עם תצוגה גדולה יחסית. התרשיס הבא מציג דוגמה טיפוסית לדף עס 787165 שנראה טוב על מסך גדול, אך הוא כמעט חסר תועלת במסך סק קטן. ה-65ו8ז= שומרות לעצמן חלק ממרחב המסך עבור מידע שהמעצב החליט שהוא חשוב. לעיתים, כמובן, המעצב צודק, אך לרוב בלתי אפשרי לצפות את צרכי המשתמשים ולדעת מהי הפשרה הטובה ביותר עבור גודל המסך הספציפי שלהם. לרוב, משתמשיס ב-65ו787= כדי להשאיר את סרגלי הניווט גלוייס על המסך באופן קבוע, אך כפי שהתרשיס מראה, משתמשים בעלי מסכים קטנים יעדיפו להכניס יותר תוכן במרחב המסך שלהם. חלונית נגללת קטנה ללא 5חאז תאפשר גמישות התאמה רבה יותר למשתמשיס השוניס. בנוסף לבעיות עקרוניות אלו, ישנן גם כמה בעיות משניות בשימוש הנוכחי ב-65ח8זח. בעיות אלו ייעלמו בשניס הקרובות, אך נכון לעכשיו הן עדיין מהוות סיבה מספקת להפחתת השימוש ב-8765ז= עד למינימוס. הנה כמה סיבות נוספות להימנעות משימוש ב-פשוחפזת : 6% דפדפנים רבים אינס יכוליס להדפיס נכון דפים עס פ6וח8זח. נכוו שהדפדפניס הנוכחיים אינס מדפיסיס טוב את כל הדפים, אך לפחות הדפיס הרגילים יודפסו במלואס. כשיש פפחח8זח, פקודת ההדפסה תגרוס לרוב להדפסת התוכן של סוחפּז= יחיד. קשה להדפיס את כל הדף שמכיל מספר מסגרות - האס להדפיס את כל הדף או רק את החלק הגלוי על המסך! % הגירסה הראשונה של |ואז₪ היתה פשוטה ללמידה, ורוב הגולשיס למדו אותה מהר. 5 הן סיפור אחר. קבוצות דיון כגון 5065 ץ05)ח1. קה ס6 של |החשח. פַהוהזסתהזט. צטוצעע מלאות בשאלות של כותבי ט6/ הזקוקיס נואשות לדעת מדוע ה-8765ז₪ שלהם אינן פרק 2: עיצוב דף 87 *40+ 5 !ובוח אהוזס!קא6 הס!6%1ה הס|5]|ש8!6+ נבּס!|הא0 פשסה סחוסת פִּ "ן של ודוסוז זגוסץ חס הסחגום פח1 פוש , פעאופצ] החבּ=' זחפ!|68אם פ'צ]1 זז ספ|3 זסח עחצצ , שזפת פז'טוסץ פוומצצ 6% 3 חחסצצ ||פעצ )| 188 עווהם 5 וזה 3 ייר 5 7 ,17 פחנט צְ6503טד זה 61חבוק 5 361 | |ב1חפרתחפזושיחם 5 8טטפו החם גו וצח דפטטה 510308 |08 ז6|83טח 5081 פזסרח 588 וזה 33 :אה קאב 146 ]פיט 1868 0108/10 עצפה זסז 63||5 [פחב3ם ח303 :אה קהב זסזבעש 351 1008 חס 000318 5188 5חסמום :אהאס [ שב 183 שם עצפה חו פוטז זהפההתפוושח6 הפטם 8סופזסצ) :פסצזג וחפו זא 00ו31 08581106 5108 10 ח0ו361 |הספוט פפפזט אש :ץ ואד פ זמ וס 2-3 טחו/13 588 156 וו 0ח!881ח ה8החזס5 :סאג והםהודטוו 3 פחט חנו ח3= 31 015605560 08 10 55085| :פאוסררגא סשדואט 65 17868 60 |18ח הוה פזויח8 זוה 8815!ן פוטחורח-35% | :פצוסודגצו סשדואוט 368 130 305 600803 פ'פסחבּז :מסאאהז בבהון יה ב 7 16 שחט!. עה חס ]86801 35 0 ח5|3ח פוב 6180 חב טטוסזס :ג| וצח דפנוה 3 סחה טח -10 |3|פזפשיס ץוח 60 585סמסזס א מפטוזם ‏ אש .68 3 31-זפ/שס 88ז זפח0 וזה 86161 >וע :א .58 18]|515ח שרחה סז!עח , 0300970005 פט סוטוסט וס מפו= > . !החסה חזפן5פצ חו 12 !וא 5טססח ה335| :הוצמוזסת .601001515 - 318| 100 פוו| ססז חבט דכ 5'ס6פוו! :ששו פחווח והטוחהּז או זט ₪ ו בו|3 וגוה :גן וגח דפנה זו 3 ||51 ור308גו זו 535 הז קוו :סצזג |גש2 ששו !068 חס 51818 עאופח 8ז086|3 361515 98008868 נא 7 ,15 פחוו!. ע3!)חוופ פ-ז ו הז 05 0 8-33 הסקס חבט ₪ בחוה6 :גוס .0 שטם הוח 42 10 סחו5וז מסו3ּ|ומסם 5885 53091 :ואפטס זה 18% |סח3חו= חו חס עצפו 10 פזפחחזבּ - :הסט 8זוז51 ספ זפח3 |וום ז0153510 5ח0ו5 מסוחוו6 :אפט .1865 החז0ז8ז ₪ חו |506685510 ח568 8פופזסצ] :וטו וםם הסח 10 מזס6 פהחפו 30,000 30318 פמטסזט ח8פזס6) 5 :חס מדטספ ח80105|0 3891 301328 0810 085 2300130858 :הפםסג וסוואם 5 ]סח 85זטחטח ,3 || |ובבּזם חן פסחושצצ פחסזום : ווקהחם 503100815 זוי חפ!|3 01 הסופבּעחן 031185 163 5 - וטופ :הסוח זה הזדטספ 0ז06191%.0ח0/3 .עושעש ה-8765= נראות טוב יחסית על מסך גדול. סרגלי הגלילה מפריעים במקצת, אך יש יתרון מסוים ביכולת לגלול את רשימת הכתבות בזמן שלחצני וסרגלי הניווט של האתר נשארים גלויים כל הזמן. 8 עיצוב ממשק באינטרנט - 5 !בו אהוזס!קא6 הס!6%ה3 הס]|5]|ע6!6+ נבס!|השס פשסח 0 | 7 ,17 סחגו צָ03 65 4 אא .5100 361 | |18ח8 רהה פזושחם 00085! החם :גו ואחדםנ וה 5 הזה .10308 [08 6|88וח זח508 פזסוח 588% פוחזת הבמב ו .46 זפעם 1308 סז שח יפה זםז 63115 [פחבּ0 הבמב :צזה הנ 351 00|8ו חס 080318 5138 פחסכם :ן]הווזס = שפח חן פ|טז זהפוההפזושחט הפטק פסופזסצ :פסוזה ושח דשו ה 0 סו 0 ו ו אט |אדו ב חכ 4 זס] זס)₪6₪15 אז +6ווהוק [לדוי ךדי ,| 8061017%.0071/כ ./ע/עעע כשמשתמש עם תצוגת 480320 (כמו בהתקני המידע הניידים) ביקר באתר, התמונה השתנתה בצורה דרמטית ורמת השימושיות שלו צנחה. כעת, רק 25% מהאתר משמשים להצגת רשימת הכתבות, ו-75% הנותרים עברו לקישוטים שכמעט ואינם מעניינים את המשתמש. ככל שהתצוגה קטנה יותר, כך חשוב יותר להגדיל את מספר הפיקסלים המוקצים למידע שימושי. פרק 2: עיצוב דף 89 [<1ם)- | זפזס!קא = 1סחזט)ח! וס א.- ו 6 פת! וו ו ו 2 | 360 1005 פסמסום" אסץ 00ם 5 | -4 ₪ ₪ ₪ | 9 יב )וחק בח והואן וס | 8/0165 = 568100 חס 380688 | סופ מה עס 0% 5.00 ח|1018.אואואו/ / יכות ₪ חן 6 > זסה!0/60 = פ5!זסק םח חס) סחואסס. | ?6607 | שספוקם וק = 1/6 5 ש6ה0)) = 465 = 6הק6ההסון חס 5סווו חן פ|טצוס ₪81 5'הב3 חח 0 חס₪05% פפטוף הַהוחחו הְזחחום זחובָּבּ ץזם%סוט 7-6 הופ רבחה ספ 5535 בזבס-2|ו בסחבם ב 36 500785 אסם 5 בבס או ו ב ו .₪050 רסוא 5 א סאסווהופ צָ|א פע [ו560ה8 :5 בו פח+ 0+ +פאסוד 00ז78ז5 08 סז פחוטם 4 .חח הוה וו 8ח00א [פוא 3 0+ +סח א50 8זוח/ ?חס 3 הַחופט תס (המסגרת המקיפה) ו60/5.00ח/018)./ש/ע/ע (התוכן) 1ח60.ץ581008ש./שעש/ש ‏ 800 ספ עיצוב ממשק באינטרנט 1 דם וק 10:48 4364קנ - 08/28/99 ץ 4 - .5 חו 8165 חורח60 ְחהוח6טוק מטסן 5 12 צָב1ם 03|5ו0370 ,5פעבּזם חו 3-0 פחוצו 13חב|41 8זם1פם 5בַחוחחו .13 5 181651 5 א 65 סופיט . צ הגח-אול %5וח זפט!פהזגום [בפי+חסוז .וזהחחוסחו זפצם חואו 8-6 חו זפוחסת 8% 10 5160 >חו!ובות , ]הפץ-זנוס? 5105 8%%א080 2050 זפחסשוס . הסחם!= חזואו +0סבזלחסש תספוו!וחח %7 סוס 8% הַהוקשוחט!5 פצָבּד פטום +חום 31 5610 החופס! החסה ס+חטזסד 520% אוצו פאה צשאאסוא מווד וו6דה6 40% ו 3 סו סז ב 5 = בי בב נכ ו 568168 116 62 [ 5 6 ספתפאיסם 6 וו! והה6ך * פוחםספום | 6 5 15% 5 נמ 5 הווה 6 + חה16ז6 ו 5 | הו 7 אחשסט | 00000000 |אס80880)קמסטטאמ | (בעמוד הקודם) כשמשתמשים באתר 5ש6א|%8סד, הכתבות עצמן מגיעות מאתרי 60/ אחרים המוצגים בתוך ההז באתר. כאן, המשתמש ביקש חדשות בייסבול, שמגיעות מאתר ץ8סד ה5. אם המשתמשים אינם בקיאים בעיצוב אתרי 0 , הם לא יבינו שחלק מהחלון מגיע מאתר אחר. בנוסף, ₪1 אינם מטופלים כיאות בתוך פוחפזח, ולכן חלון הדפדפן מציין כי המשתמש נמצא באתר 5 |+סד, אפילו כשרוב התוכן המוצג במסך מגיע מאתר עְבססד ה5ש. 5 הז כעבירה על זכויות יוצרים לדעתי, הצגת תוכן אתרים אחרים בתוך ה-65חח3ּז= שלך היא עבירה על זכויות היוצרים. יוצא הדופן היחיד הוא שימוש מוגבל למטרות קריטיות, שיש לאפשר אותן תחת סעיף שימוש הגון. אינני עוסק בעריכת דין וחוק האינטרנט משתנה כל הזמן, ולכן מומלץ ליצור קשר עם עורך דין המתמחה בנושא כדי לקבל ממנו עצה, אם אתה מתכנן לעצב אתר שעושה שימוש קבוע בתוכן אתרים אחרים. אני מאמין שזוהי הפרת זכויות יוצרים, משום שהדפדפן ממשיך להציג את כתובת האתר שלך, וגורם למשתמשים להאמין שהם רואים את התוכן שלך. האמונה הזו מתחזקת כשהם רואים את האתר שלך מסביב לתוכן האתר המרוחק. פועלות כצפוי. כל כך קשה ללמוד את נושא ה-65ח8זח, עד שכותבי דפיס רביס כותביס קוד שגוי כשהס מנסים להשתמש בהן. > למנועי חיפוש יש בעיה עם ₪865 משוס שהס לא יודעים איזה שילוב ₪865 לכלול באינדקס שלהם כיחידות ניווט. 6% חלק מהדפדפנים מקשים על הצבת סימניה (ז רה 0סם) על 65חפת. % אתרי טשש רביס המציעיס למשתמשיסם בחירה בין דפיס המכיליס ₪865 לאלה שאינס מכילים אותן, גילו שרוב המשתמשים מעדיפים את הדפים חסרי ה-65חחפז=. האם מותר תמיד להשתמש ב-3865ז-? הנושא העיקרי בשימוש ב-65ו8₪ז= הוא להבטיח שה- 1ח( ימשיכו לפעול. לשם כך, יש להוסיף לכל קישורי הטקסט את התכונה "סש "=066ז9+ בתגית המנחה שלהם (כלומר: <"00 "=9706%? |החזח.6)=)00זת 8>). הוספת התכונה "0+ "=זסְפָז9+ תגרוס לדפדפן לנקות את כל ה-65ו787= ולהחליף את החלון כולו בתוכן דף חדש שיכול להכיל +8656= חדשה. 86566ז= היעד עשויה להכיל 65וח8ז= רבים, שחלקם או כולס ואהיס לאלה שב-870656%ז= ממנה הגעת. זכור שהדפים, אס כבר הוצגו, יוצגו שוב מזיכרון המחשב, אבל הפעס כתובת ה- 081 תהיה שונה. דבר ה משמעו שניתן יהיה לעשות שימוש בסימניות. במיליס אחרות, האתר שלך מורכב מאוסף דפיס שאין אליהם גישה ישירה אלא אך ורק דרך 656%5וח8ז=. יוצא הדופן היחיד בצורך בשימוש בתכונת "סז "=8706%+ הוא כשה-65וח8ז= מהוות קיצור דרך לגלילה בתוך דף יחיד. לדוגמה, תיקיה ארוכה או רשימה אלפאביתית אחרת יכולות להכיל 6וח8ז= בראשן, שתציג את אותיות האלפבית. לחיצה על אחת מהאותיות הללו תגרוס לגלילת הרשימה בתוך פופו אחרת תוך השארת המשתמש באותו הדף ושמירה על מיקוס הניווט. פרק 2: עיצוב דף ‏ 91 (בעמוד הבא, למעלה) העיצוב חסר הניסיון של הדף הראשי של חברת .6ח1 סֶסאִזְההכ תורם רבות לאיבוד האמינות שלו. הדף אינו גרוע מספיק כדי לחסל את החברה סופית - ברור שזהו אינו דף הבית של איזה נער - אך נראה שלא הושקעה מחשבה רבה מדי בעיצוב האתר. (בעמוד הבא, למטה) ניתן להשיג אמינות גבוהה על ידי כך שתציין מה תעשה עם המידע שתקבל מהמשתמש. לדוגמה, אתר 60ח6 מציין שהוא ימחק את כתובות הדואר האלקטרוני של משתמשים שנרשמו, אך לא זכו בהגרלה. כמובן שיש לך צ'אנס אחד בלבד לעשות זאת כמו שצריך. אם תבטיח דבר אחד ותעשה דבר הפוך, אף אחד לא יבטח בך בעתיד. 2 עיצוב ממשק באינטרנט 5 טובות גס ל-"6%8-08065וח'' בהס הערות הקשורות לדפיס אחרים. לדוגמה, מדריך סגנון עיצוב מ יכול לערב דיוניס בתפיסות עיצוב עס דוגמאות חיות של דפיס שלמים אשר הולכים לפי (או נגד) הכלליס. במקרים כאלה, היחס לדף המוטמע יהחיה כאל תמונה מוטמעת (למרות שהוא דף נפרד) והמידע 'יהראשייי שהמשתמשים ירצו לסמן הוא תוכן ה-86ז= המכיל את ההערה. גירסה 4.0 של תקן !ויז הציגה סוג חדש של 8065 הנקרא 365 6ח11ח1. 65וחפז= אלו הינן חלק מהדף המארח שלהן והן אינןו מפריעות למשתמש בניווט. ככל שהדבר נוגע למשתמש, מודל הדף הבסיסי נשמר כשמשתמשיס ב-87065ז= 6חו|ח1. השינוי היחיד הוא בכך שחלק מהדף מתמלא בתוכן של קוב אחר, שניתן לגלול אותו ללא קשר לתוכן הראשי. 5 6חו!ח1 הן פתרון נהדר להכלת סרגלי או טורי ניווט, משוס שניתן לחסוס את אפשרות גלילת התוכן ומשוס שהדף נטען רק פעס אחת. לפיכך, אס החלטת שאתה זקוק ל-787065= באתר שלך, אני ממליצ בחוס על הפיכת ה-65ו87ז= ל-65חחה= 6חווחז. אמינות כל אחד יכול לבנות אתר (מחסומי הכניסה קטנים מאוד, אס בכלל), ואכן רביס עושיס ואת. כתוצאה מכך, המשתמשים אינם יודעים בדיוק מה לעשות עס המידע שהס קיבלו מה-ס6/. מידע זה עשוי להיות אמיתי, או שהוא עלול להיות בדיה. אין דרך קלה לדעת אס אתר 60/ מהימן. בעולס האמיתי, מקור מהימן הוא העיתון פסחוד אזסץ צוסא 6חך, ואתה יודע שאס תיכנס לחנות של חברת 6ו2ט5, יהיה להס מפרט המכונית החדשה של החברה כפי שפורסם על ידי מטה החברה. אחת מהמטרות החשובות ביותר בעיצוב טוב ב-60) היא לבסס את האמינות שלך כעסק מקצועי בעל אתר מקצועי. אל תמלא את הדפיס שלך בפסולת מיותרת של מתחילים, כגון רקע כבד, או סמלים מונפשיס של תיבות דואר נפתחות בסגנון יישלת לי עוד דואריי. לעיצוב גרפי מלוטש יש השפעה מועטה על השימושיות. המשתמשים יוכלו למצוא את המידע באותה המהירות אפילו אס הגרפיקה לא הכי הכי מבחינת שילוב הצבעים. אך אין ספק שהתצוגה 5 ה 3)10וז ז1)0ת1 ר5636 1!6ו? סה פַחַב+וסוה ,סחב] זס] 66 50 וטופץ... . ההסוזה וחו סו חן 1008180 0181085 "וטס 01 685וה הַחוהטס"יוט5 108 הו 1185הש60 507108 פא פסהיוהּזה0 זה ,698 שוחה ;ְחהּחוחם/1 ,5ח8וח6!9 .1 ;68וום!=] ,16ה הו סטב | .= ;החווסו= ,קוחד .ונ .8חוחווע ,חסוחח6ו₪ הו 8580 פה 5זפִזוהּטהְהַה6ח וטס 6 ;8 676 011677 6עצ 1665ע567 706 376 656חך 8% 5 081817808 +8/ל ם 575188 568708 8]|זוך 80זהומסזטת ם 5 פסההיופוה טסח= קוה5'ופהעס ם 5 פסההיזם וה טסה= 558% ם 5 109985 ם .8181808 הזו/ש 165וחהט1וסקקם "68687 זטס 080% ם נ=-] ,5961/1666 חסוזבּוחוס)ח 1 23111166 ווגח-= .10 שֶחַבּ2רח60 5611665 הסטברדוס+ח1 366י23+30 1996-97 6החדועק 60 08197806.60 ./ש/ש/ץ 5 ון03ח8 זנוסץ 8597 0|5358 , צְפצזט5 זטס חו חסבּמוסוסזבּם זסז גופץ אהבחד א0). 5 א + פחם ססח פזב טוסץ א :בססח) 5זהחהחוש אהוח5-5 טחב ססוום זגום 058סחס חבס פצצ 50 (3007855 |ובחחם זטסץ 55078 זם 58 ס'חסאו פאו 5זפהחושל ץאסט! פחם :3007855 |ובחם זסס זהסז1 5/!שא פ1 הזטז 8 60 חח פר₪ בַחו36> זטוסץ בסבוספזקב פשצ , חובּחָה .08ן/587 ]טסט ב 60₪. 5שששא 60 5ח50פטף [631 ,80עז85ז %5חשוז || שח , דפ 1997 ₪ >חם ,רחס 601 606 .ץע פרק 2: עיצוב דף ‏ 93 4 עיצוב ממשק באינטרנט החזותית היא הדבר הראשון בו המשתמש נתקל כשהוא נכנס לאתר, וחזות נאה היא ההזדמנות העיקרית למיסוד האמינות. אני צופה שהאמינות תיבנה בעתיד בחלקה על ידי מנהל מוניטין (זסחַ88ח8וא הסטפזטק56), שהוא שירות אינטרנט אשר אוסף דירוג ממשתמשיס אחריס שידווחו, למקוס מרכזי אחד, עד כמה הס מרוציס מהדפים, מהמוצרים והשירותיס האחרים שהם מקבליס בכל אחד מהאתרים ב-60/. מנהל המוניטין יהיה סוג של דוח צרכנים עליון בעידן המחשוב ברשת. הדפסה רוב המשתמשים אותם ראיינתי דיווחו כי הס מדפיסים כמות רבה של חומר מה-60//. ה-60/ היתה אמורה למנוע את הצורך בהדפסת מידע לצורך שמירתו בארכיון פיסי, אך הניסיון המר לימד את המשתמשים שהם אינם יכולים לסמוך על היכולת שלהס לשחזר את המידע אס הס יזדקקו לו מאוחר יותר. לעיתיס, השרת המרוחק לא יפעל, לפעמים מפעיל המערכת הסיר את הדף, ולעיתיס המשתמשים פשוט אינס מסוגלים למצוא את הדף בשנית. ההעדפה להדפיס גוברת גם כשיש למשתמש מערכת תיוק דפים עס קלסרים או תיקיות עבור כל המידע הקשור לפרויקט מסוים. קריאת הטקסט ממסכי המחשב איטית ולא נעימה, ומשוס כך המשתמשים נוהגיס להדפיס מסמכים ארוכיס, כדי לקרוא אותס במצב לא מקוון (6חו 0%). הס גם מדפיסים לעיתים דפים, כדי לתת אותס לקוראיס אחרים (לדוגמה, בפגישות או סמינרים). כשמסכי המחשב ישתפרו בנושא, בוודאי שהצורך בהדפסה יפחת, אך בשניס הקרובות ימשיכו רוב המשתמשיס להדפיס מידע מבוסס 60\. משמעות העניין בעיצוב פ6\ היא שיש לספק גרסאות הדפסה לכל מסמך ארוך. דפדפני פ6/ משפריס את יכולת ההדפסה שלהס באיטיות, אך אי אפשר לסמוך על יצרני הדפדפנים שייצרו יכולת הדפסה טובה, משוס שהאינטרס הראשי שלהם הוא מידע מקוון (6חו 1חס). לדוגמה, רוב הדפדפניס משתמשים באותו עליך להגביל כל דף 0550106 לגודל הדפסה שיתאים הן לדפי 4 והן לגיליונות בגודל "1" סוג וגודל גופן לתצוגה מקוונת והדפסה, למרות שידוע לכל המומחיס בנושא ששתי המדיות הללו דורשות סוגי גופניס שונים. כמו כן, סידור המסמך ייראה לרוב אחרת : סידוריס בצורת טור אחד (חוחט!ס6 6ופַח51) טוביס לגלילה קלה יותר בתצוגה מקוונת, ואילו בדף רגיל עדיף להשתמש בסידור של שני טורים (כמו בעיתון). אני ממליץ ליצור שתי גרסאות של כל מסמך 60) ארוך. גירסה אחת תתוכנן במיוחד עבור תצוגה על גבי המסמך. היא תחולק בצורה מתאימה לקבצים רביס המשתמשיס בקישורי טקסט רבים ובגיליון סגנון המיועד למסך. בגירסה נוספת, המסמך כולו יהיה בתוך קוב אחד עס סידור המיועד להדפסה. נכון לעכשיו, המשתמשים נאלציס להוריד את גרסת ההדפסה ידנית, אך כולי תקווה שיצרני הדפדפניס יתחילו להטמיע בקרוב את התקן לציון גרסאות מסמך חלופיות. חלופה שכואת היא גרסת ההדפסה, ולא ייק לכלול את הקוד המתאיס בחלק ה-גפו של גרסאות ההדפסה של המסמך. הנה הקוד הדרוש לכך: "זחזס"= 6013 "6זהח66!ה"=|6ז אחו|> <"5+50710% 20 / חה0וס68ו!ק קה "=6כ "65.05ס0שוח"=+סזות דפדפנים ישנים פשוט יתעלמו מציון חלופות הדפסה, אך הדפדפניס העתידיים יזהו את הקוד ויבינו שכל פקודת הדפסה צריכה להתבצע עס הקוב החלופי ולא עס הגירסה המוצגת על המסך. קוב ההדפסה פרק 2: עיצוב דף 95 6 עיצוב ממשק באינטרנט יהיה, קרוב לוודאי, בפורמט כגון +051560ק או =סס. חשוב מאוד להגדיר כל קובצ שכזה כקובצ המיועד להדפסה בלבד, ועליך לוודא תמיד שאתה תומך בהס בעזרת קישור לאותו התוכן ב- !31 המיועד להצגת המידע בצורה מקוון עבור המשתמשיס שרוציס לסייר או לחפש חלק קטן של המסמך. קבצי 00505010 אף פעם אינס מיועדיס לקריאה מקוונת. תוכנות הצגת קבצי ה-+00515610 טובות לבדיקת טבעו של המסמך, כדי להחליט אס כדאי להדפיס אותו, אך אין להעביר את המשתמשים דרך החוויה המפרכת של בזבוז זמן מיותר עם ז05%500ק מקוון. 005550 ו-]סץ הן שפות תיאור דפיס המציינות כיצד הטקסט אמור להיראות בדיוק כשהוא מודפס. לתיאוריס אלה אין את הגמישות ואת היכולת להבחין בין פלטפורמות הנחוצות לתצוגה ואינטראקטיביות מקוונת. לדוגמה, סידור של שני טורים ב-*סק ייראה מושלס כשהוא יודפס אך קשה יהיה לקרוא אותו ממסך ש מידותיו קטנות פיסית מהדף עליו המסמך אמור להיות מודפס. סיבה נוספת לקושי היא שבפורמט 0 הטקסט על המסך נראה מעט מטושטש (85ו₪81ח1), בעוד שבהדפסה מתקבלת תוצאה חדה וברורה. כאשר מדובר בטקסט בלבד, מידותיו של קוב =0ץ הן סבירות וניתן להשתמש ברזולוציה נמוכה של 72001 ליצירת הקובף, כך שייראה פחות או יותר על המסך ויודפס בצורה טובה. כאשר משולבות תמונות מסך או גרפיקה אחרת במסמכים, נדרשת רזולוציה גבוהה יותר ((ק3000 לפחות) בעת הכנת הקובצ, דבר המגדיל את נפח הקוב באופן משמעותי ביותר. המשמעות כלפי המשתמש היא בזמן הורדה, למרות שאת התמונות הוא עדיין יתקשה לראות, אבל בהדפסה הוא ייראה משהו סביר יותר. לידיעתך, קוב פס הנשלח להכנה לדפוס הוא בעל רזולוציה של וק26000 !! אחד הפתרונות לנושא ההדפסה יכול להיות, בשלב זה, יצירת קישור לגרסת 1אד של אותו תוכן המיועדת להדפסה. גירסה זו תהחיה נקיה מכל מסגרת (אם קיימת) ומלחצנים שאין להם מקוס בגרסת ההדפסה (כמו לחצן קסד 0+ 286%). אני חוזר: אל תענה את המשתמשיס שלך בפרסוס מסמכיס חשוביס בפורמט 00555010 בלבד. קשר תמיד את הדפים לגרסת ואד לקריאה מקוונת. כל קוב שמיועד להדפסה חייב להיות מסוגל להתאים את עצמו לשני סוגי הדפים הנפוצים ביותר: 4 (7 2977 א וח210) ו-ז66 ] ("11 א "8.5). לשס כך, רוחב הדף חייב להתאים לגודל 44 (וח210) ואורכו חייב להתאים לגודל ]1606 (חזוח11"=279) - אלו הן המידות הקטנות ביותר משני הגדלים. מומל להשאיר שולייס של לפחות חצי אינצ' (חזוח0.5"=13) בכל צידי הדף כדי להבטיח שהוא יודפס טוב בכל סוגי המדפסות וכדי לסייע בהעתקתו. לכן, רוחב ההדפסה הוא החוח210 שהם "8.25 פחות חצי אינצי. מכל צד קבלנו רוחב של "7.25 (18.5 סיימ). אורך ההדפסה התחיל בגודל "11 ופחות חצי אינצי מכל צד וקבלנו אורך של "10 (25.4 סיימ). בשוליים של אינצי אחד (מומלצ יותר), שטח ההדפסה יהיה "6.25 (15.9 סיימ) על "9 (22.9 סיימ). מסקנה מטרת עיצוב הדף היא פשטות (שוסו|וחו5). נדיר שהמשתמשים יגיעו לאתר במטרה להנות מהעיצוב שלו. לחילופין, הס מעדיפיס להתמקד בתוכן (עליו אדון בפרק הבא). חשוב גס להבטיח כי עיצובי הדף יפעלו על טווח רחב של פלטפורמות (חומרה), מערכות הפעלה ודפדפנים, כולל מערכות ישנות (ץ0|00חח66? ץ6086!). אני ממליצ לוודא שכל הדפים יעבדו טוב על כל גרסאות הדפדפניס שהוכרזו בשנתייס האחרונות ועל גרסאות בנות שנתיים של כל התוספים (5ח1-פָטוק). בנוסף, ודא כי עיצוב הדף עובד במסכיס קטנים, וומני התגובה שלו נמוכיס כשהגישה אליו היא על ידי מודס אנלוגי. חלק מהגולשים עשויים לטעון כי מגבלות אלו כופות נוקשות מסוימת על המעצבים, מונעת מהס להנות מהגימיקיס הטכנולוגייס החדישיס ביותר וכי רק ל-10% מהמשתמשים יש תוכנה וחומרה ישנות. גם אס הדבר נכון, עדיין לא כדאי, מבחינה עסקית, להבריח עשרה אחוצים מכמות הלקוחות הפוטנציאלייס שכבר הגיעו לאתר. פרק 2: עיצוב דף ‏ 97 עיצוב תובן אחרי הכל, המשתמשים מבקרים באתר שלך בגלל התוכן שבו. כל השאר הוא רק רקע. העיצוב נמצא שם כדי לאפשר לגולשים להגיע לתוכן. אפשר להשוות זאת לאדם שהולך לראות הופעה בתיאטרון: יוצרי ההצגה רוצים שכשהוא ייצא מהאולם, הוא יאמר "כמה נפלא המחזה" ולא "כמה נפלאות היו התלבושות". פרק 3: עיצוב תוכן 99 כמובן שעיצוב טוב של התלבושות תורס רבות להנאה מההצגה ועוזר ליוצר ולבמאי להעביר את החיזיון שלהס לבמה. אך בסופו של דבר, המחזה הוא הדבר החשוב. מחקרי שימושיות (שווו0589) מראיס שהמשתמשיס ממוקדיס בתוכן האתר. כשהם מגיעיס לדף חדש, הס סורקיס את חלק התוכן שבדף, מחפשים כותרות ונקודות אחרות, בהן תוסבר מהות הדף. רק לאחר מכן, אס הס מחליטיס שהתוכן אינו מעניין אותס, הם יסרקו את אזור הניווט ויחפשו קישורים/מידע להמשך החיפוש. התוכן הוא הראשון בחשיבותו. כתיבה ל-60/צ בכתיבה ל-פ6/ש, אינך משפיע רק על התוכן, אלא גם על ניסיוןו המשתמש משוס שהמשתמשיס מסתכלים קודס כל על הכותרות והטקסט. למרות שחשוב לכתוב נכון מבחינה דקדוקית, חשוב גס להציג את התוכן בצורה שתמשוך את הקוראים. ערכו של עורך מה יקרה אם תהיה הפרה של ההנחיות לכתיבת כותרת לידיעה בדף ראשי באינטראנט? בחברה המעסיקה 10,000 עובדים, עלות כותרת גרועה בדף ראשי של אתר אינטראנט היא קרוב ל-%5000. סכום זה גבוה בהרבה מעלות שכירת עורך טוב שישכתב את הכותרת לפני פרסומה. איך הגעתי ל- %10,000 ?!? ביססתי את ההערכה שלי על ההנחות הבאות: > כל עובד מבזבז חמש שניות למעלה מהדרוש כדי לפענח את הכותרת, משום שהיא איננה מובנת מספיק. % הכותרת הגרועה גורמת ל-10% מהעובדים ללחוץ עליה, אפילו אם תוכן הכתבה חסר ערך עבורם. 4% המשתמשים קוראים את הכתבה במשך כשלושים שניות בממוצע לפני שהם מחליטים שהיא חסרת ערך ולפני שהם עוברים הלאה. % לחברה יש 10,000 עובדים שמשתמשים באינטראנט. % עלות העסקת עובד היא %50 לשעה (שים לב כי עלות העסקת עובד גבוהה בהרבה מגובה המשכורת שלו, וחישוב העלות מתבסס לא רק על ההטבות והתקורה אלא גם על תרומת העובד לחברה בסופו של דבר. לפיכך, עובד שמרוויח %25 לשעה עולה לחברה לרוב %50 לשעה. זהו חישוב מתאים למציאת עלות הזמן האבוד). דוגמה קטנה זו מציגה גם את העקרונות הבסיסיים לבחינת נושאי עלות-ביצועים. עליך לצפות את מגוון הדרכים בהן העיצוב עלול לגרום למשתמשים לאבד זמן (או להימנע מרכישות, אם מדובר בעיצוב אתר מסחר אלקטרוני) ולהכפיל זאת בכמות היחסית של המשתמשים שייתקלו בבעיה, וכן במספר הכולל של המשתמשים ובעלות זמנם (או הרכישות שלהם, במקרה של מסחר אלקטרוני). 0 עיצוב ממשק באינטרנט שלוש ההנחיות הראשיות לכתיבה ל-60//: % תמצת. אל תכתוב יותר מ-50% מכמות הטקסט שהיית משתמש בה במאמר מודפס. > כתוב בצורה שתקל על סריקת החומר. אל תדרוש מהמשתמשיס לקרוא בלוקיס ארוכיס ורציפיס של טקסט, אלא השתמש בפסקאות קצרות, כותרות משנה ורשימות תבליטיס (9ז15 1 81!6%60). % השתמש בקישורי טקסט כדי לחלק מידע ארוך לכמה דפים. הנחיה רביעית היא יותר חלק מהתהליך, או כלל ניהולי: שכור לעצמך עורכי ס6/. כדי ליצור תוכן טוב יש צורך בצוות מסור היודע כיצד לכתוב עבור ה-60/ וכיצד להתאיס את קטעי התוכן לפורמט הנדרש על ידי סטנדרט העיצוב שלך. קצר את הטקסט מחקר מראה שקריאה ממסך מחשב איטית ב-25% מקריאה מדף נייר. גס משתמשים שאינם מודעיס למחקר הזה אומריס לרוב שהס לא מרגישים בנוח כשהס קוראיס טקסט מקוון. כתוצאה מכך, הס נוטיס לא לקרוא כמות גדולה של טקסט ממסכי מחשב. לכן עליך להפחית את כמות הטקסט ב-50%, ולא רק ב-25%, משוס שזה לא רק עניין של מהירות קריאה אלא גם עניין של הרגשה. ידו גם שמשתמשים אינס אוהביס לגלול דפיס (להשתמש בפס הגלילה האנכי): אוהי סיבה נוספת לשמירה על דפים קצרים. תכונות ה-60/ למרות שהטקסט ב-0פ\ צריך להיות קצר, אין זאת אומרת שהוא צריך להיות "חסר אישיות". מחקרי שימושיות מראים כי המשתמשים מעריכים מידה מסוימת של הומור ונקיטת עמדה בדפי 60). שים לב ש"נקיטת עמדה" אין פרושה לצעוק או להתלונן בפני הקוראים, או להתייחס אליהם כאל אספסוף פרימיטיבי. הגולשים מעריכים הימצאות קול צלול, בעל פרספקטיבה ואישיות. כותבים צעירים וזועמים כותבים האחד עבור השני. מרבית הגולשים אינם אוהבים זאת. למשתמשים יש סלידה ברורה מכל דבר שמרמז על שיווק. ה-טפ/ היא מדיום מצוין שמעודד את השימוש בעובדות יחד עם קישורים המיועדים לגיליונות נתונים ומספרים מפורטים כגיבוי. גרף המכירות שעשוי לעבוד מצויין בפרסומות טלוויזיה או במודעות בעיתונים, עשוי להיכשל בעת הצגתו באינטרנט. כשהמשתמשים רואים דפים המלאים בהרבה קשקושים במקום עובדות, האמון שהם נותנים באתר צונח מייד. הכמות הנכונה היא: לא יותר מדי ולא פחות מדי. פרק 3: עיצוב תוכן 101 א6פסםם? סאןק פשאשא 0085 מאסה 5זסחסם 8 5!חפו|הק 5 ]80108 | < 70 0 בי ם!חן] זס!פח! ₪ 8!הזסקזס 6 |60 6 זז פ5'ז1בם 10 טוסץ 8 חסס|פ ץ| הת ס8זפם 10 שאו ב'ן .סופת ץוח 8ח1 10 850058 ח! 5118 5וח1 80 ס|08/8 פלפ)/ .9118 הסוזהוחזסזח! 81-7813180 8ז63 זסז 8681/80 פ פע 515 808ז חן 8|מ80ם 000 41 ץ|318 חואסזס3 פץס|מרחם זפוהם 8 וח 58ז8/ןם 3 -- 85וזזחס6 100 ץ|18הואסזססהּ 18 יס ץרו 10 הסו5ו "חר 60 בח 85זבח5 ז3חז תסווה וטמסם ץומַחסז51 פזבּ בש ההושם!זסעצ 8|מספם זסז פזון| זס ווה זסאסנוך טאו ץ| 0850 חה צו|3ה0185510זס , 885עמרחם זטוס סז חר 60 ]795000 58/06 אםן|0 181 03085 8ח1 חן 588 |ו'טסץ פב 3850085 ההוחטור 3 חזוצ וסץ 8םויסזם 10 6878 881זם ח8א18 טפ .5118 זטס זס אספח6 10 טסץ פזויחו | זפחס 8 . זזאב חואו הסז 59 זפפז63 זנוסץ פהבּחבּרח 10 טסץ פאוס||3 131 וסס1 פוהט|פ/צ זוסץ הו18חורח 10 טסץ פאוס||3 1031 החזסז 8רהט85ז פחו|-חס חג -- 8זט198 פטטוחט ּ 8 /ח טס .זפץ פחם 10 קט זסז הת918ץ5 זטס חס 188 הזטוטס!זזטס זס 8ה895ז 808 108 35 85וזחטח ססמם +תפההעיס|מרחם סז זו אחו! חב הח צֶחבּ 31 הזס86ז זטפצ זסץ 18 חר 0 בח | ה58870 .ץוא ו 18 5| 03138358 זו .ם|סבּ|ופּובּ 18 8 085 8ז 0ח51871 זטס סז צו801זו0 851זפזחו [188 018358 5ה0 85 זס 15חפ הר 60 ווח טסץ ]| .חפחס 5118 זטם זופו טסץ פמסת | זז סע אהד .>חו!| "1880036 5118 ז8פז63" פחז בחופט פט חזואו הזפחז 8זבּח5 10 88 0387 חן| 851ז8זחו זטפץ זפשסמרחם א והטח סטמ ובּטבם חב 5| זפובם סש 0816 ,/עעש/ש 07 זןא3ם הזו "וכ 1123 5 טעע ו ?םאט 5זהוו ? ופה ווהטת ו!6 זה56 6181160 הצ 166 5 סוט וז זוז ז החו-סו ודוהה 5דאם/עם 5ו5אחם זאו !הו חאו זאםווזקט ומעסם [וההססחס אמהחטה 55 זאםווזקט ומעסם [וההססחס זו5 המשאה ו כותרת "ברוכים הבאים" (6וח6!60/)) בתחילת דף 60/ עלולה להתפס כאזהרה. המשתמשים אף פעם לא רוצים לקרוא הודעות שמחות אבל גם חסרות תועלת כמו זו. תרשים זה מציג דף שנוצר עבור גולשים המחפשים עבודה. למרבית ה"פליאה", בדיקות העלו כי דורשי העבודה לחצו מיידית על לחצן ?6!סבוופּצה 5שהח/ בלי לקרוא את הודעת קבלת הפנים. 2 עיצוב ממשק באינטרנט הפעל תמיד בודק שגיאות איות. שגיאות כתיב גורמות למבוכה, כמו בהבטחה של אתר 156001805 (בשורה השנייה מלמטה): 306000 5071065% 6ח% פַחועְבק 5 + שבתרגום חופשי המשמעות היא: לתת תשומת לב מירבית לפרטים. בודק שגיאות לא יאתר טעויות המוצגות בפיסקה השנייה (שורה חמישית מלמטה), שאמורה להיות "586 0 הְחבּ" (במקום "86ח5 6 0ַח3ּ"), או השימוש השגוי במקף בשורה האחרונה של פריט התבליט לאחר המילה ששווהּטף (איזו איכות ?!?). 015600//825.0071./ש/ע/ע 55 ץ6אחיונוד ל ו חו ופחהדוהק "וטסץ 5ש "60751081- בעיית אמינות המסך תיפתר בעתיד, משוס שכבר הומצאו מסכים עס יכולת הפרדה של וק3000 והרגשת הקריאה באמצעותס דומה לקריאה מנייר. מסכיס איכותיים אלה עדיין יקריס מדי (המסכיםס האיכותייס שנמצאיס בשימוש מסחרי הס בעלי יכולת הפרדה של ו00 110), אך הם יהיו זמיניס עבור מחשבים איכותייס בסביבות שנת 2002 והשימוש הנפוץ בהס יחל כחמש שניסם לאחר מכן. עריכה כל דפי ה-60/ חייביס לעבור לפחות בדיקת איות. מילים שגויות הן מקור למבוכה ועלולות להאט את המשתמשים, לבלבל אותם, וכמובן, לפגוע באמינות האתר. רבות מהשגיאות לא יימצאו על ידי בודקי האיות והדקדוק הקיימים כיום, ולכן מומלצ לקרוא בקפדנות דפים, ולחפש טעויות דקדוק ומיליס שאמנס קיימות במילון, אך הן לא מה שהכותב התכוון אליו (למשל, רועה במקוס רואה). -הַח 0 )טח הוח 5 וס חם צ|8ז טוסץ הפצ .55פחופגוט זופר + הזב סַהותוססבזוחבו 68 05 זפ8םו5חסס 5זפותמס5גוס גוס חב בחוחטססבטחברח + הפבזגום 8סבסו|מותסס , 0050 8 +ם 1788 8 חבס טסץ התב זטוסץ 5ב . החוחוב חב 553 ,5455505 , 5פחו|ו3₪+ חו הפר 850 צחו זס(ב3ח 3 3%8 60 שפח >'חסאו טסצ . הפסטטוספוט . 0873 בַתתנססב)טוחבו צז88 ססחו 850085 פטוסוספזם זטוסץ זטסם 60 ַפפח ס'חסצו גוס בב ץ ח6סטקוחסט ,חפ 60 בהוהחוספט החפ עטו|וםו5 8500 סההוססבּ )הברח ||בּ 35508 פאו 5חבפחח צְפאחוטד 3 5038 ₪08 חב 805פח זופרם חפה 0 5זפ 1560 וטס הסוא ]6058 אזסאו 8עש . ]0000 %פסס : סחואוס!|ט+ 68 הטוסחו 3 הסוח , החבּזטסזם פצופתפחפזמוחסס 0ם %קפסחסס חס 58בחם זפ ההטוסזרס לספ[סזם זטוסץ הפפזפטם ||ואו 8 8066 ח8ו 605[סזק % חב |ו0853 60 הס ח0-5ב 500855 פרם הַחועְבּם , פומספק צְפ8א הסושל צץ|058! חואזם ו , חסספומתחסס סץ 0 0055 |בהסםוטב3 סח 35 -עטו|בטם 50 %הפחסטווהוהוחסט זגום סחוו!!חוט פרק 3: עיצוב תוכן 103 4 עיצוב ממשק באינטרנט צריך לעשות יותר מאשר קריאה חוזרת, ולהעסיק עורכים מקצועיים שיעברו על הטקסט בדפיס שלהם. עורך טוב יוכל לא רק לתקן שגיאות רבות שהבדיקות האוטומטיות פסחו עליהן, אלא הוא יכול גם לשפר את הטקסט במקריס של שפה קלוקלת. החשוב מכל, העורכים נוטיס לקצצ בכתיבה. כותביסם רבים - ואני בהחלט ביניהם - נוטיס לאהוב את המיליס של עצמסם, ולהשתמש ברבות מהן כדי להביע את עמדתס. אפילו כשמדובר בחומר מודפס, עורך טוב יכול לנפות טקסט גרוע ולהוציא ממנו פניניס. כשמדובר ב-ס6/ו, יש להתיר את אינסטינקט הצייד של העורכים, ולתת להס לחסל מילים מיותרות. סריקה קשה מאוד לקרוא טקסט על מסך המחשב, ונראה שההתנסות בחיבור מקוון הביאה למידה מסוימת של חוסר סבלנות. בשל כך נוטיס המשתמשיס שלא לקרוא שטפי טקסט במלואם, אלא לסרוק טקסט (0ח1חח568), לגלות מילות מפתח, משפטים ופסקאות מעניינות, ולדלג על חלקי הטקסט שאינס מענייניס אותס. במחקר שערכתי יחד עם 65אזסו! חחסנ, גילינו ש-79% מהמשתמשים בניסוי שערכנו סרקו תמיד כל דף חדש שהגיעו אליו. רק בודדיס קראו את הדפים מילה במילה. הטבלה הבאה מציגה חמש דרכים שונות לכתיבת אותו תוכן ב-60/ עבור אתר תיירות בנברסקה (ראה בדף הבא). 65אז10 חחסנ ואני בחנו את השימושיות של חמש האפשרויות. הטבלה מראה בכמה אחוזים עדיפה כל גירסה על פני הגירסה המקורית. הרפרוף (ַחוחזחווא5), שמחליף את הקריאה המלאה הוא עובדה ב-טפ), והוא חוזק על ידי מחקרי שימושיות רביס מספור. הכותבים עבור ה-60/ חייביס לקבל את העובדה הזו ולכתוב בצורה שתקל על הסריקה: > כתבות המכילות שתיים, או אפילו שלוש רמות כותרות (כותרת דף ראשית ועוד כותרות משנה - וכותרות משנה של כותרות המשנה במקומות המתאימיס). כותרות מקוננות יכולות גס להתאיס למשתמשים עם מגבלות ראייה שמשתמשים בקוראי מסך. גרסת אתר כתיבה שיווקית טקסט תמציתי כחצי מכמות המילים שבטקסט המקורי נוח לסריקה משתמש באותו הטקסט שבקטע המקורי בסידור נוח לסריקה שפה אובייקטיבית משתמש בשפה נייטרלית במקום בשפה של קידום מכירות (פרט לכך, הטקסט זהה לטקסט המקורי) גירסה משולבת משתמש בכל שלושת השיפורים של סגנון הכתיבה: טקסט תמציתי, סידור נוח לסריקה, ושפה אובייקטיבית פסקת דוגמה 606 ץ||ה הסוסה ח6שחו הזוצ ₪160 15 85%8זססא .6 /6/67 260016 )0 05או0ז6 06| אוהזס +8ח+ 5הס6הזבּ 5 זה|טקסק 05% 6+ 01 5016 ,1996 חן[ .1911 זטסחזו 5 ,,(15/6075/ 355,000) 376 5%8%6 הספחו00סג +זס= 6ס/ 6 10006 וסטוה ,(132,166) +חסההטחסוא |ההסטבּא אטום ,((86,598) 06ח63706 , (100,000) הוהט6פוו1 .8 אזבק [63ו0ספורן סוט 0חה , (60,002) ז6סחסוק 6וזובזק 606 01 ותטספט זתטס5 . (28,446) 7878 |15%07168 5%8%6 ₪306 ווום 6058 חן 007860005 060ח806-265% 6+ )0 או5 ,1996 חך חס 80] 810% 5605 ,אק 56906 הספחו0 0 +זס= שפצ ,1156 8 אזהק |15607168 5%8%6 10006 זסטזוה ,%הסוחטחסוו 0חה ,זססחסוק 6ווהזק 6+ + ה ט6פט זהטס5 ,86ה63706 אזהק |415607168] 5%8%6 ח6ח₪3 ||₪1 סוהוטט 666 ץ||ה הסוסה ח%6חו הזוצ ₪160 15 85%8זססא ,7 /6/67 260016 )0 05או0ז6 06ז8] צוהזס +8ח+ 5הס6הזבּ 5 זה ]טקסכ 05% 6+ 01 506 ,1996 חן .191 +טסחסוש בובו (5ז0םו15ט 355,000) אז8ק 56806 הספחופסם +זס-] > (132,166) זחסוחטחס1! |החסבּא טוט 560085 > ההט86ט1] 8 %ז8ק |15%0168 55866 1/0006 זסטזה > (100,000) (86,598) 08706006 > (60,002) זסס6חסוק 6וזוהזק 6ח+ ]0 ותטספטו זהנס5 % (28,446) א%ז8ק |1156068] 55866 ₪36 |וום סו8)וום > 6+ )0 50706 ,1996 ח1 .5חס0ֶ800780 |678ש56 85ח 85%68זספאא 6 55006 ה50חו₪00 +זס= 6 וצו 18665 151560/-5%סוח +חסוח חס |החסס3א 810 5605 ,(5זסזופוצ 355,000) והט6פט1)] 8 אק [4150768 55866 10086 זססזה ,(132,166) 6+ +0 ההט6פטו זת50 ,(86,598) 96ח6376 , (100,000) 6 ח6חע₪ |וום ס|8וטם חב (60,002) זס6חסוק 6הזובזק ]115%07168| 7376 )28,446( . :1 060785688 חן 3665 151660ש-05%ח 66 01 או5 ,1996 חך %זק 55860 הספחופס 0% > +חסחהטחסוי! |החסטה ₪10 5600 %% רהט56ט1] .8 אזבק [115007163] 5%68%6 10086 זסטז > 36 % זססחסוק 6הוהזק הל 01 ההט6פטוי! זה50 %% אזבק |168ז1560 50006 הסחמה !₪1 סובווטם %%> שיפור בשימושיות (יחסית לטקסט המקורי) % שיפור (זהו הטקסט המקורי) % שיפור % שיפור % שיפור % שיפור פרק 3: עיצוב תוכן | 105 4% השתמש בכותרות בעלות משמעות במקוס בכותרות י'נחמדות'י. על ידי קריאת הכותרת המשתמש יכול לדעת מהו נושא הדף או הסעיף, בלי לקרוא את כל הטקסט. לדוגמה, ב-ץ08סד 054! המודפס היתה כותרת - "ששח 5'החעט ס!זסע 60זוצו %6||5 6חחספסצודיי. כותרת נחמדה, אך חסרת ערך ב-פ6/. הגירסה האינטרנטית של הכותרת, היתה '0זסצו 60זוצו 6ז 0+ ושח פחוסחוום". אני הייתי מעדיף: "03065 סוחסה '5!ב+זסק 60/ זס1 פאוסח פחסו0ם". רשימות תבליט (115%65 801!6060) ורכיבי עיצוב דומיס שובריס את אחידות פסקאות הטקסט. > השתמש בהארה (פַחטְתִפווחף]) ובהדגשה, כדי שמילים חשובות יתפסו את עין המשתמש. טקסט צבעוני יכול לשמש להדגשה גם כן, וקישורי טקסט מנחים יופיעו תמיד בכחול עם קו תחתון. יש לבחור בהארה או צבעי רקע שיופרדו מצבעי הקישורים, אחרת המשתמשים יתבלבלו וינסו ללחוצ על המילים המוארות במחשבה שמילים אלו הן קישורים. יש להיזהר בשימוש בקו תחתון כאמצעי להדגשה, מכיון שהמשתמשים עשויים לפרש אותו כקישור ויתאכזבו אם הדבר לא יתאפשר. מדוע המשתמשים סורקים? סריקה באתר נקראת פַחוחח568, חַחוהחוחוא5 וגם 06ח8-0!8-זה. יש צורך במחקר נוסף כדי לדעת בוודאות מדוע 79% ממשתמשי ה-60/ סורקים את הטקסט במקום לקרוא אותו, אך הנה כמה סיבות משוערות: % הקריאה ממסך המחשב מעייפת את העיניים. %> הקריאה ממסך מחשב איטית בכ-25% מקריאת דף נייר. לא פלא שהגולשים מנסים לצמצם את מספר המילים הנקראות. סיבה זו מסבירה את התנהגות המשתמשים. הם יקראו יותר במסכים איכותיים יותר (עם ההפרדה הגבוהה יותר). ה-60/ היא מדיום בו כל משתמש חש שהוא חייב להתקדם הלאה וללחוץ על דברים. הגולשים רוצים להרגיש פעילים כשהם ב-60/ והפעילות מתבטאת בלחיצה שלהם בעכבר. כל דף חייב להתחרות על תשומת לב המשתמש במאות מליוני דפים אחרים. המשתמשים אינם יודעים אם הדף הנוכחי הוא זה שנחוץ להם או שאולי יש דף טוב יותר. בנוסף, הם לא מוכנים להתחייב להשקעת הזמן בקריאת הדף בתקווה שהוא יהיה שימושי. למעשה, רוב הדפים אינם שווים את זמנו של המשתמש, ולכן הניסיון מעודד אותם להסתמך על מיומנויות איתור מידע. במקום לבלות זמן רב בדף יחיד, המשתמשים עוברים בין דפים רבים ומנסים למצוא את המקטעים המעניינים בכל אחד מהם. קצב החיים המודרני קדחתני ולגולשים אין זמן להשקיע בחיפוש אחר המידע הנחוץ להם. משתמש שמקבל ביום 70 הודעות דואר אלקטרוני ו-50 הודעות קוליות לטלפון הנייד, כנראה יאלץ לוותר על המידע אם המידע לא יצוץ לפניו. 6 עיצוב ממשק באינטרנט ?טס 276 566560סק עשסו] ||וא 8עו%3%ח85זקפז 2+זפר בח .15סה1 8+ אוסחא ם+ טופץ בא 2דוסוו | ב 587085 ח0ו80%+סזם |בתפוזקם גוס חס חהסולבחחס+חו ה+ואצ גוס פטוצסזוק | ו קוה ,זפ+הטסס 8+ חובחח זטום +ס פחס 15 סחווח +ם פסבּפכ חואו |העבּז% טפץ 8זט5 הַחוא)בּו ָּ ₪ |החסו+קס 858ח+ 5זטם 2זזפו .5.₪ 8+ חו ,הספבפז פוח+ זם= .פתזפסחסס וס סחב 055]| זפחובּחָב3ּ גוספץ +ספזסזכ ||ואו זפעוב צ הַהַבּחחבּ0 1055 :5פסוע587 5ועסז +תפוחפ!מק5 פסהבזטפח1 ץזו!ו130 ,בס 2+זפר בח ס+ פהַבּוחבּם חב פסחבזט5ח1 080%ו400 |3ח750פ0 סחב חסוזספ+סזכ עזו|וסב!| +חפותפ|מקו5 083% |3+חפוססב ,88%5ח8ם |בסוספו 075 הּהַבז89ע00 ₪015 |בּחספ5זפס זטוסץ 45% .5הַחוהַחסופם |בּחספזפק זנוסץ זסז הסוזספ+סזם חב ,5זהפחפם .5975 858ח+ +טוסטב הטולבה חס+חו פזסוח זס+ 8צוז%3ה858ז00ה 2חפ הט 076 06 8+ ספחו|080 פע'טפץ סחב זבּס 2צ+זפר 3 הזו +חפםוססבּ חב פטבּח גוסץ +1 טסץ 80358 חס ספ+םזס (עשכ 1) זעוב ההַבּוחבּ0 1055 |בּהססק0 חפ 8+ 005108 , טס 80זפעסס פסחבּזטפחו סזב3ס %ו80זס זגוסץ +ההטוסח+ ביני זטסץ ז368 8|טוז0900 זטוסץ זס? טספץ פפזנוטוחופז צץוחס 03705 וחספ * .35 פסחבּזטפחו חאים בוב" 80+חפוטוססם +וחחטגו5 טוסץ 855|חו עֶבּכ +'חסם 03705 פוחם50 * . החחו+ 50801880 3 הוחפוצו פ!וום זובקפז "זפזח וספץ צֶט חוב+זפס 3 חב זפהחס| 35%| +3ח+ 5|ב+חפז זפטסס +'חסט פוזס50 * הסחפק .ץז ז03 חובּזזפם זפטסם +'חסם 508 * הז0ס2.6שה ,שש כל משתמש ס6\ שיראה את הדף הזה יחשוב שחברת 62 מציעה שלושה סוגים של ביטוח: זו 8806 1055, 06ח8ט5ח1 4661060% |8ח50ז6ק |- 806זסעס 26605 [החס5זטק. הגולשים פשוט קוראים את הטקסט הצבעוני, ואינם קוראים את מקטעי גוף הטקסט. כל אחד שהיה לו זמן מספיק כדי לקרוא את הדף מילה במילה יגלה שלחברת 670 יש סוג ביטוח נוסף: 56% 06חה8זטפח1 עטוווטהו ! (אתה מוזמן לנסות ולגלות את הביטוח הזה. הוא מסתתר בפיסקה השנייה, שורה 4). רק מעטים יקראו את הדף מהתחלה ועד הסוף, מילה במילה. שים לב גם שכותרת הדף מפרה את עקרון התיאור הפשוט של תוכן הדף. עדיף בהרבה להשתמש בכותרת כגו| "60861806 6סח8זטפח1 |הּחסטקס" במקום הכותרת "?טסץ 6זה 606060סזק סח" ולהפחית את הגודל היחסי של האזור המוקדש להצהרה שהמידע נוגע למוצרים/שירותים הניתנים בארצות הברית. לבסוף, מומלץ שלא להמחיש מוצר/שירות אמריקאי בעזרת תמונת בית האופרה של סידני... (שזה ככל הידוע לי ביבשת אוסטרליה). פרק 3: עיצוב תוכן 107 8 עיצוב ממשק באינטרנט (בעמוד הבא) מטרת דף קטגוריות מוצרים באתר 18% כגון זה היא לאפשר למשתמשים להימנע מצפייה בחלק מהמוצרים. אנשי השיווק יתחלחלו מהצהרה זו, אך אם תניח שלמשתמשים יש זמן לקרוא את כל פרטי המוצרים שלך, תתאכזב מאוד. אתר שלא מסייע למשתמשים לצמצם את תשומת הלב שלהם למעט מוצרים רלוונטיים ייראה מבלבל ולא מספיק מסייע. במקום לבזבז שעות בניווט בין מוצרים לא קשורים, רבים מהמשתמשים יוותרו על העניין ויוציאו את כספם על אתר אחר. הקישור והכותרת של כל מוצר משולבים על ידי מספר המוצר. דבר זה טוב לגולשים שמכירים לעומק את סדרת המוצרים והם יודעים מה הם מחפשים. לדוגמה, 570 ח8קאחוחד ולא 390 ההקאהוחד. המשתמשים הבקיאים פחות לא יכולים להיעזר במספרי המוצרים. הם חייבים להסתמך על כותרות קטגוריית המשנה בסרגלים הצבעוניים לרוחב המסך, וכן על תיאורי המוצר שליד כל תמונה. כותרות קטגורית המשנה מכילות תיאור סביר, למרות שלא ברור מה ההבדל בין "6|ספ+וסקהט!(" ל-אססס6>סא-וחווא". איזה מבין השניים קטן יותר? איזה כדאי לרכוש על פי צרכי? בדומה לכך, מהו ההבדל בין "6ט|8/ 6ח0-חז-!1" |- "סח טסו 600 |החספזסק"? שימושיות הדף תשתפר אם קטגוריות המשנה יובנו יותר ויסודרו לפי רעיון מובן כלשהו. לדוגמה, ניתן לסדר את המוצרים כך שהקטן ביותר יהיה בראש הרשימה, ואחריו יבואו מחשבים גדולים יותר בסדר עולה. תקוותו האחרונה של המשתמש - תיאורי המוצר - חסרי תועלת גם הם (בנוסף לכך שהם נכתבו בגופן קטן כל כך עד שקשה מאוד לקרוא אותם). לאחר שאתה יודע שדגם 240 הוא אסססס6שסא -וחווי!, אינך זקוק לכך שיגידו לך שוב "6666 ח60 512260 |!₪ הפוצו אססס66סח-וחווח סחד". ודוגמה נוספת: מה ההבדל בין "סחו טק 60 6!וטסרח 66חהוזס]זסק 6וחסטאם=" (בדגם 770) לבין "שו|ופה+וסס סחהּ 66חה ו סוז6ק 01 06ח08|3 |1068 6חך" (דגם 660)? 6 ₪ ₪ וס +זסקקט5 |ם|ססח5 יו 8 ז ספת | 5ח0נוש!50 | 561085 | פוסטטפז? | 465 ₪ | וה6זה56 | עטם סו עבצ | כ וז ו [ הגו | 0900088 : וו 00 20 בח3ּ אחורוץ 0+ 366|כן 06661 .ב 0 אתוחד סז ק ויר 0 וחווד א 0 וה אחוד א צם 10 וס 1 5313006 |483! פחד 8 306 2610 6 הז -; [סטטטם 3 סק 3 6סה3הזסח6ק וק סט 5 פעצם1] זווסך |הטפוצ זווס ד |הטפוצ /-!₪/--5 5 5 סק אזז!(! וז ₪' צזבּזטו | 6+ 01 ח0ו3ז8ח8ףָ פה שח ד ומנ וט ₪ 0 85068 פ|ומסוש! וווסד והטפו 5 ספסם בז ךרי 0 וה חווד שא פחס-ח!-|!3 , 3918 1010 ב וווסד |הטפוצ ו ו השרוו זע 16500%סא.ח:וו 0 וה חווד הא -101 הזו אס 50 0+6ח-וחווח פד חח 00 5126 ד הפוצ פחו קוח ס-) 5%פחופט ||וח5 |ההספזסק 5 ו וה אווזווד ₪ 56 | ה:הוווד ₪ 10 " זז 501011005 286 050 0 00 016 5 0וחפפָ חן 5 8!ן וח א זו סד |הטפוצ 58 866וח = וו :5 5חופטום ||3 וח5 זווסך |הטפוצ :1 01890 :אס 8'5ח/ 17 וס חוור 5014 זו + 6.00.00 ./ע/ע/ע 55 חופנ |3 5 ץ .| שב = וס 0016 ץ 6 ₪ ושוז 2ו516] חובח6' זס פזבטובם ו[ הטסוק 318 5 6 5 פוווס םחו 81010501 = ו + ו ד וחו|נו3/ בוב 6 ץ חס 00 5 ץ 5 405118 0160 58]6 | |108 !| ששגטוזש פרק 3: עיצוב תוכן 109 קה|וק5הוג1] הוס[ |1!6%= 603%6 6הש%ץ0] 06 6!60ץ% 60 הזט:6א 0 ה0%|0ז00ז00 א0ז%6< 5] 624356 8 0616 = 458 =))65 )5 שוחפצס ב | הגו 50306206 8 פחד ש סוט !סע 7 זט 6 וי =*צז אסוזג6וןלת. בח + 1 1301 8.006 7 קחומופטק ‏ /* קחופוופוק הסט בוספג||0 | וחטוהוחס-) 6/6 בוסםח | סוסא | 6 ז6וחסספט) 5חסוב6|קק4 1/6736 6 אז .46 ,1045 דה 16 6 ץצ 1997 דרו16קץק 60 0 700.60ו50ח/8רח ./ע/ע/ע דיאגרמות פשוטות כמו זו שבדף פַחוזקפ5חו3! משפרות את יכולת הסריקה. הן מספקות מיקוד לעיני המשתמש בזמן שהוא עובר (סורק) על הדף. דיאגרמות ברורות ונקיות כמו זו יכולות לתאר במהירות שטף מידע, ולהעביר למשתמש מבנה מסוים. המשתמשים רוצים לרוב ללחוץ על הדיאגרמות כדי לקבל מידע נוסף אודות רכיב ספציפי, ולכן רצוי לקשר את הדיאגרמות שלך לדפי משנה נפרדים לכל רכיב. 0 עיצוב ממשק באינטרנט יש שגיאות תכנותיות רבות ב-60) שאפילו לא גורמות ליצירת הודעת שגיאה, אלא פשוט משאירות את המשתמש בהמתנה או מציגות מסך ריק. לפניכם אחת מהודעות השגיאה הנוראות ביותר שראיתי ב-60/). הודעות שגיאה יש לכתוב תמיד בשפה פשוטה, ועליהן לא לחשוף את ה"כביסה המלוכלכת" של המערכת. המושיע היחיד בדף זה הוא ההצעה מה לעשות. על הודעות השגיאה להיות תמיד יעילות, ולסייע למשתמשים להתגבר על הבעיה במקום רק להצביע על קיומה. 60 .6565 50000./ע/ש/ץ ?3 זהחו/ 880 50681 ז587/9 56080 ...₪0 סד 1860 טוסץ זב3ּח/צ .309 1 0ח8 5860705 צו6ז 8 זו | 8 פגוסועפז ס) חווט שפה ברורה משמשי ססצו לא רוציס לבובו את זמנס בקריאה או בעיון בחומר רב, ולכן חשוב לפתוח כל דף במסקנה - ייהשורה התחתונהיי. הצג בפניהס את החומר החשוב ביותר, תוך שימוש במבנה דמוי פירמידה הפוכה. המשתמשים יידעו כמעט מייד במה הדף עוסק ובמה הוא יכול להועיל להס. פעמיס רבות, משתמשים, שסורקיםס טקסט, יקראו רק את המשפט הראשון של כל פיסקה. משום כך, משפט זה צריך להיות קצר וקולע לפי הכלל יירעיון אחד בכל פיסקהיי. אם תנסה לכסות כמה נושאיס בפיסקה אחת, רביס מהמשתמשים לא יגיעו לרעיון השני, אס הראשון לא יגרוס להס לעצור בומן סריקת הדף. בנוסף, השתמש במבניסם פשוטיס של משפטים. כתיבה מורכבת קשה לקריאה, וקשה עוד יותר לקריאה מקוונת. הגבל את השימוש בדימויים, במיוחד בכותרות. המשתמשיסם עלוליס להתייחס לדבריס כמות שהם (כפשוטס), למרות שהיו לך כוונות אחרות. אפשר להשתמש בהומור ב-פ6/ו, אך בזהירות. המשתמשים סורקים את הטקסט, ולכן הס עשוייס שלא להבתין בנימה הומוריסטית או צינית, והס יתייחסו להלצותיך ברצינות (ולפעמיס ברצינות יתרה). בנוסף, המשתמשים מונעים על ידי מטרה מסוימת עד כדי כך שהס יעדיפו לרוב יירק את העובדות, בבקשהיי, בלי לבזבז זמן מיותר. 5 6)1655א6וד 65חו!זוה +65/ש500 ו851.60₪שוח501.ששו פרק 3: עיצוב תוכן ‏ 111 (בעמוד הבא) דף זה מציג כתבה ארוכה שחולקה לשני חלקים. בסוף החלק הראשון, בתחתית הדף, יש קישור קטן בשם "טח חס" (המשך) המעביר לחלק השני, לדף נוסף. קישור זה אינו מומלץ משום שאין למשתמש דרך לדעת למה עליו לצפות בהמשך. לחילופין, ניתן לספק למשתמש תצוגה מוקדמת קצרה של שורה אחת מהחלק השני, כדי לעודד אותו להמשיך. העיצוב הטוב ביותר יכיל תקציר קצר, שהוא קישור לדף השני, המתאר את הרעיון בשורה אחת. בנוסף, אותו תקציר יכול להכיל קישורים לטיעונים אחרים הקשורים בנושא או לדוגמאות מעמיקות. שים לב גם לצורה בה הציטוטים מוסיפים לעיצוב עניין חזותי ומסייעים למשתמשים לסרוק את הדף כדי לגלות את החלקים המעניינים אותם בכתבה. 2 עיצוב ממשק באינטרנט הס רוציס לקבל את המידע שחיפשו ולצאת מהר ככל האפשר. יחד עס זאת, המשתמשיס חשיס הרבה פעמים שאתרי ה-פ6/ מתייחסים לעצמס ברצינות יתרה ולעיתיס הס משעממים. משום כך, תוכל להוסיף בזהירות מידה מסוימת של הומור. אך הימנע ממשחקי מילים או יימשפטי מחצ ידועיםיי, משוס שהס לא טוביס למשתמשים בינלאומייס שלא מתמצאיסם בדקויות השפה שלך (יימה 17 מה כמהזיי זו בדיחה ישראלית, מבית היוצר של הגשש החיוור. המשפט יי!טסץ זס+ קְט0ס5 סאזיי מעלה חיוך על מי שראה את הפרק 821 50 6חד בסדרה 06|6חו56 אבל לא אומר דבר למרבית אזרתי העולס). חלוקת דפים קצר את הטקסט אך בלי להקריב לשם כך את עומק התוכן. עשה ואת על ידי חלוקה של המידע לכמה צמתיס שמחובריס בקישורי טקסט. אפשר ליצור מבנה שבו כל דף קצר, ועדיין המרחב הכללי יכיל מידע רב יותר ממה שאפשר להשיג בכתבה מודפסת. ניתן לחלק מידע רקע מפורט וארוך לדפי משנה. באותה הצורה, ניתן לספק מידע המיועד לקבוצה קטנה מבין המשתמשים על ידי קישור, ללא הענשת הקוראיסם שאינס מעונייניס בו. אין להשתמש בקישורי טקסט כדי לחלק כתבה ארוכה וליניארית לכמה דפים. הורדה של כמה מקטעיס תגרוס להאטת הקריאה ותקשה על ההדפסה. מבנה קישורי טקסט נכון אינו בצורת 'יהמשך בדף 2', אלא על ידי חלוקת המידע למקטעיס עקבייס שכל אחד מהס מתמקד בנושא מסויס. העיקרון המנחה הוא שצריך לאפשר למשתמשיס לבחור את הנושאיס המענייניס אותס בלבד, ולעיין רק בדפים אלה. במילים אחרות, מבנה קישור הטקסט צריך להיות מבוסס על ניתוח תגובות הקהל. בנוסף, יש לכתוב כל דף קישור טקסט על פי רעיון ה'יפירמידה ההפוכה'י אותו לומדיס בבתי ספר לעיתונאות. התחל במסקנה קצרה, כך שהמשתמשיס יוכלו להבין את נושא הדף גס אס הס לא קראו אותו כלל. לאחר מכן, הוסף מידע בהדרגה. יש לעשות זּאת בצורה שהמשתמש יוכל לעצור את הקריאה בכל צמן שהוא, ועדיין להיות אחרי חלקי המידע החשוביס. 16156 43600 וז חש הט הוחסס אע ?6560 זנוסוץ 5 זבחר 0 !| ט'וסוץן ששו 01 זחוסק 3 001 זטוסץ 15חטגו 0% 0. 4/5 ? חהת5 0 6553 זנוסוץן = . ו601ק5ו6ק 86 10 פווץ/ והָחט! 60801 5חסוחוקס 6011003 651 זנוס זט 005106786 ]1 ק6] 16358 .503000 8ח1, זסק5 6קץ1 חב 5נחסט 200, 1 זפטחט . !| 601[פו5 108 ח! "אספק3ס5" לחסס .5/עסח ,/שעשע/ץ << 85+ 8 | 6 00001008 6 50016 )!ו עְב/ו סד :65חסחק בבס 7 .15 עפ 46560 00ו/13. עם 5 סק 03%3 03%+ 01480 80ץ שזס5% 0016 .₪55 %ה868ז ג לט 85ע8600א5 שד .3+ 50 ||פש !50 %סח פטבת 033 50-68|]80 ז|פח+ , 366065 ||3- ץָ5 .750680 5880080 3 חו-16 חש ₪5 הסח ז3!ט]|68 ץ|[הט5ט--85הסתק וח 3 8 0[ש500--!3רח8 חב הַהוא3+ ,ְהַחוְסָבּק 8א!| 5הססקס ץח אסחא 1 אחותף 1 .!|פ 536 ||3 בַחוס0ב %סח 6 'שְפת+ ,51 ,366 )ה 6ה+ 165 חב שְח0ח%6|]50 + הס 3זהַפ+ח! 76 הו 8ש8|!8ם 30 1 5 הַחס| 35 0 5366 %סח || 85 הסח 4363 6פ ,,הַחטטקרסס !08 |3 600682 טַחסז/ו 8ח+ רחסז+ 08517080 זב שְפה+ 5 085!60080 ח88כ הטבח 080|685 856ח+ || ,ז3+ 50 6 שץ|פבפסזק 4'ץְפהד ,הס-300 3%3 | 3 הש 85ה0ה8|82+ שזסרח 308 ,86| ₪58 שזסרת שזפ שש שְפח+ + ,|5₪6685510 5 הזהם הלוש %85טוקרח 60 35 8510080 6 תג אחז פ5פא6ו55פ ,חס 30080 380|]0165 632 פ6וסט 6 אוד 60 8 פשפת4 ח! הסו5 הפא .0051 %חפזב %6+3685ח! זפ%טקרח 0 שכ טרח +0 0שו085 %08 טהב ]ופ 53 5ח+ לטפ ,856 .בחואחח+ זפ+וקרח 60 חס 53580 0008 2887 5! 530785+ 3% חס הבה זפ ה3%ץ 68+368ח! 3%600זהַ%ה! חב 880ח 105675 .הַ0ט]א-+3ח ח3 8הסת66|]52-)3ת 15 סט %98 חן 85!] 4578768/ פחד זפ 8הסת82|ך ,%661368ח1 ח6וח ,6!פ!זזסה 8ז3 %693685הו 6% פזטטף ח63 שְטספסח שח 15 68 6>!| 59701685 56ש 0+ שפת 0+ שיסח 1555 הסטרח , הַחוב ז8ר0%סחב 0+ ||63 3 0ז3זס+ 5 ו חס ט!50 8תף 5| 05 5סח!ו/ +8ח% שֶ53 0+ %סח 5 פוחד 5 3% %8+366ח! 5 3 346+ 0+ 3%6!קסזקק3 %סח % ₪58 300 0801685 ק0865%%0 ח5068-םהָזב] זס+ 28!וחסקס ,080168 8+ זם||3 5 8 .78]05ח3 ה5077887-||הרח5 זס+ ל 28|רח וסקס 60 %5ח זט רל 516 שוסרה 8ה+ .60313656715065 5086/06 65 זס+ 368+פ6ח1 + 8|ר 3 א חב 15 8ח8]8000+ 8+ 03% רח/613 8!קס6ק 90708 50 שם 3%80]טרח5 06 ב|טסח5 593% עסו|ופ 53 66פק 3% 8ח% קט שוכ טסץ וצ635 65 ,|| זפ4 .65100875 ,]0 8ז3 טסץ חב ,זפפרחטח 8ת% ח! השחטק 8פזח+ 8+ +00 ,₪!זס שש | 8+ ח! 535 08% פזפש 6 עָ|חס +1 הַחוחזט ד .635 ש|ט₪ 5| 30566 695 קט בַחוא6וק ע|חס ,56905 0% 6ז3 %ה3660 זוטסץ 50 "חו הַחומֶטָס|" חב 089166 6+ חס 8+ קש הַחו%סוק +0 ח0סו3₪ 5!קרח!5 98 עפ 80ח5!]קר 6600ב 5 פחס+ |₪13 8+ חב ", 8רח₪ %ססם" סח 5| פופהך 58%בהבת חבש ( 0 8// 0+ זב|לו3ק חן ח3) 5זפ+טקרח 00 .שזפח+ 35 ]ב שרח-קט 8+ רהס הַחהוה8%רח50 חב 5]! ץ|68/ח86 שחסחק 08 + %5חה8 רת זוז אה 550א 05585 16% 6 ,ר5/5%5 הז 55 ש|קקט5 ב|טסת5 :ןח זאו 538 8ה+ 3% "פחס+ 8 /ו" שחץ 35 שָא|1פ3/|שז + |פשם| |0/3 85!!קקט5 8חסת8|]50+ השוודה ,חפ זאו ו 5 דוד 05 אהד ו ד-].1 הו .0065 ]א ו 8 ,5% .3680 ]טרח ץ||3600 שז3 5ופפוחטת זפרטה 8ח* 35 ,2016%) פרחם רהז חב הז53] 0+ טזבת ?7 וטסץ + הלערה 8+ %הש5 06 50'5] ,סטם זפ רחטח 3 ח! הַהוהשהטק %ב+ זפפש 58ש-%0-ץ885 חב 15 8 1]ט0ח5 03%+ %81+368ח1 סח 5! 8זפר+ חב ,26על 60 זבה זב שְ8ה+ ,0ח5860 שחס עָ|חס 398 טס שוחו 3 155 טסץ + 55פתפטוחזס+ הַחס| 3 38 סך ,פטס 5%3 ח3 קט הַחבּה :60168 5 05ספסוח!! 8 ח! 066/68 |163כע% 3 רחס ||68 ₪15%3066 5 5וחד :מו 12 ח! פקץ+ ס% ופפט 8+ 85זוטס0פז 5 | 300 ז%8ח1 .8רח הַחהס| 3 3485 3 8 רה 50 רחס 37088 הפע זב | .65614 03385 11 . מז 339 0 1995-97 8) בס ).5 א הב +חסו1 [משר שפח חופנ פן מו יו יי 0חהו1630 3'5ו6 חח +ח6ות+65שח! 6הו!ח0 ו * ץצ בב טוח קפטס פרק 3: עיצוב תוכן 113 7 % 5 808 5'ז5ה: 5555[ ו וו ו ₪ 86)))) ה 1660 זס] 50866 זטסצ זט 8 מממ א6! ז5זסם |סהו ₪61 ו 7 21 וט ץימ סא סו זו 6 הוח פע 230 פחד ?ופ 0 +וסושסזם ]6חז6זחו זו ובוזס)ו= ,51 זפם 18550 6 :1-05 268%זסת סח 208% תת +20 ו 7 5 ו 80000 | עפ עפת1זטם .15ח 136% זפ 'חסט עפחד ה 11| 108 חס טאפ פע 85 פעצום 080 10 01058 85 פם הת תות 8זוח/ חסו1ט501 אזסשאט | זפזס/א 01108 חס 80ז8 סז זםזזם הבוגת ,88%שו51 | "| .חפ הסוס אזסשתפ זם 88ץומחתפ חב .9815 חן 18885וס 55| 18 10 סו סז ו 030 561 ע|[זת 8 0ו6ס3 45 ב [/8/ץ פחז סוס הפסאם 500 זפחזטזח! פחס 35 .5זטזטוסז זם הרת 8 וז ס|אזפווה 8 פחסחם 18 | זו פוט |" :1 תזטס 57901 "אזסעו ח010 68ח3551518 01780107 חב 153008380 +שתזסות! .₪0108018 08 8‏ ,פא חס זר | 08 ות זפ הורת8ז 509 8 35וזו 8 80 85 003 5ז510!הורח ב 131 עחה מו סס 8ח1 :2 5 ופ 5ו6!3 1851015סזם 01 מגופזם פחושיפזם 8 .(85585ז0ְ0בּ בוה בבק 8 880 8 86ש/חטפ ]149 .8 0 ]גוס 15% 31 זהחזטזח! 18 פחוחוגום || !!הוחזסת 2 8 פס שח ס6 (1פ 4 הסוקוחהפזס פוטחו5 3 וחפוז פ'וחד חטז עץ030 3 5')| 1פחזטזח| פזווחם פח1 זסז רת518צ5 הַהו855זהבּ 0 388 חן 51885 50010 01 581185 3 808 35 181 חפ מחזס בח הוה הסט מחו|08ח03 .פתוחסוח %פז 0351 שחו 20 ]85 895.1 הו זפ!סם זס פחסווווחז 6011861 10 טחווופ = .5188ורח / |] 6 החמ טש :97 17 וצ 5 צח3 קרח 60 8ח 1‏ ה8זסא חפצם .חס 6085 ]! .83560 5'א 88 18 0 301 טוח זוחחוו | 8ר860ם 10 880זם זופחץ ח! .6ווסטום סט סז פחועז 4 .5ח|6!3 581058 הח| הוח 378 5פשוזנו6פאם |טצ] , 85זוהחסווווות .6131005 05ו0ז8ח3ס פוטזס 5 סח | חב "פזס." ", התסס." פחו8 הסט 8ח1זס ות פזפחאים ההורחו6!3 פא 1 8 חו בַהוהחטז ₪8 10 580 0מסג5 פזפשו צְפח1 הסוחצא "1פת." | ו 38 5ח0ו301 |808| חב 8515זסזם 85016 3 25 זפטזז סוופנום | 005 סוט החורחבּח 818 31187 חג. ‏ זפחזפזח! פח1 זפיים | סט פחטזספ 1 518 ם8\ש פ'[פ4] 80זטוזפז ע[36108 4|6ז9זוה |ו68 581068 ות וז זפ הזחה . רח5!זסזז 1 זם סץ6 זט וחזסז !ור 3 חן הפע 8 פחד .בחוזס5 5וח1 זוופשב3ּ| 3 80וח ,8013ק החו6|3 5'|פצ! סזח| הטו3 5110 8שחן חב 3180 וו 5ב זהפותחה קפס 0 .85 חח הו סט זפים |ם ץח 60 עס סחסרח 0858/85 וו וח .58 8ח1 סזח! טח ספ] 5| 8סזסז 185% |18ח85|08זם בּ 60 .0065 6ח3./ע/ש/ץ 4 עיצוב ממשק באינטרנט (בעמוד הקודם) לאתר אזסה6חה יש דוגמה כמעט מושלמת לשימוש נכון בקישורי טקסט. דף הבית מכיל סיכומים באורך פיסקה אחת מכל כתבה עם קישור לכתבה ארוכה יותר, כמו זו המוצגת כאן. למעשה, יש לדף הראשי שתי רמות פירוט לכל כתבה: כותרת קצרה, שלאחריה סיכום באורך פיסקה אחת. דפי הכתבה מכילים לרוב התייחסות קצרה וקשורה לכל נושא, והם מתאימים פחות או יותר לחלון יחיד במסך גדול. כתבות קצרות אלו מכילות קישורי טקסט לכתבות ארוכות בהרבה שנמצאות במקום אחר, באתר :2086 ובחלקים אחרים של ה-60/. בדף זה, שים לב גם ללחצן: "סא=זא ג סד צ₪סז5 פד |זהא:" לחיצה על לחצן זה תעביר את המשתמש לדף חדש עם שדות, בהם יוכל להקליד את כתובת הדואר האלקטרוני של החבר יחד עם הערה קצרה. הכתבה תישלח אוטומטית על ידי שרת א חה, יחד עם הסבר קצר כיצד לעשות מנוי לשירות שמודיע על כתבות עתידיות. הגבל את השימוש בקישורים לדף עצמו ]דח מספקת סוג מיוחד של קישור בתוך הדף עצמו. קישורים בדף עצמו (5אחו! 6סְ8ס-חוושו/)) עשויים להיראות כפתרון לבעיית דפים ארוכים, אך יש להם בעיות שימושיות משלהם, ויש להימנע מהם במידת האפשר. בעיית השימושיות החמורה ביותר של קישורים בדף עצמו היא שהמשתמשים מצפים מהקישורים לקחת אותם לדף אחר. לרוב, המשתמשים לא מבינים שהם קפצו באותו דף, ולכן קישורים אלה עלולים לגרום לבלבול, במיוחד כשהמשתמש לוחץ על לחצן 836% ונשאר עדיין באותו הדף. בנסיונות השימושיות שערכתי על משתמשי ס6) התגלה שמעט מאוד מהמשתמשים גללו את הדף. רק כ-10% מהם גללו את הדף מעבר למידע שנראה בחלון. לדעתי, הניסיוןו הרע של המשתמשים ב-60/ אילצ אותס לגלול את המסך במידה מסוימת. יוצאי הדופן היחידים של תגלית זו היו המשתמשים שהגיעו לדף יעד עס כתבה שעניינה אותס או חשובה לעבודתם - או הס היו כן מוכניס לגלול. עס זאת, בדפי ניווט, ברור היה שהמשתמשים יבחרו מתוך האפשרויות הגלויות. אפילו אס הם מוכנים לגלול, רביס מהמשתמשיס בוחריס מתוך האפשרויות הגלויות, אס הס נתקלים באפשרות קורצת. שתי המסקנות העיקריות מגילוי זה הן: לשמור על דפיס קצרים, ולוודא שהקישוריס החשובים ביותר יהיו גלוייס, ללא צורך בגלילה, ברוב המסכים. דפים ארוכים שצריך לגלול אינס טוביס למשתמשים, משום שכך הם לא רואיס את כל האפשרויות הזמינות בעת ובעונה אחת. תמיד יהיו חלקי דף נגלל נסתרים, ולכן המשתמשים ייאלצו לבחור את הפעולה הבאה שלהס מבלי שיוכלו להשוות אותה עס כל האפשרויות האחרות. בענייני שימושיות, הגדלת עומס הזיכרון של המשתמש גרועה תמיד, והיא מגדילה את הסיכוי לטעות. דפי היעד שרובס תוכן ויש להס פחות אפשרויות ניווט, פגיעיס פחות מגלילה מאשר דפי ניווט. אחרי שהמשתמש הגיע לדף יעד, המחקריס מראיס שהוא יגלול ובתנאי שמצא את מה שחיפש ומה שגלוי קורצ לו. עס ואת, המשתמשים נוטים שלא לגלול דפים ארוכיס מאוד. כפי שהזכרתי קודם לכן, יש לקצר טקסטים שמיועדים ל-ט6/ו. פרק 3: עיצוב תוכן | 115 העיצוב המקורי של מהדורת יוני 1996 של המגזין ובוח 5!8%6 היתה בגובה 4 פיקסלים, ודרשה ממשתמש בעל מסך קטן לגלול ארבעה חלונות (התרשים בדף זה). אחרי חודשיים, 5|8%6 שינו את הדף הראשי, כך שיהיה בגובה 1516 פיקסלים. לבסוף, בפברואר 1997, הם הפיקו את הדף הראשי השימושי הראשון בגובה 793 פיקסלים (תרשים בעמוד 118). דף אחרון זה גלוי במלואו במסך בגודל בינוני, ומאפשר אפילו למשתמשים בעלי מסכים קטנים לראות את רוב הקישורים החשובים ללא צורך בגלילה, משום שכל הכתבות הראשיות נמצאות בתוך 550 הפיקסלים העליונים של הדף. לרוע המזל, העיצוב של שנת 9 חזר למצב גלילה ארוך (גובה של 1,450 פיקסלים), כפי שמוצג בתרשים הימני שבעמוד 117. 215 הפיקסלים התחתונים הכילו סרגל ניווט תחתון סטנדרטי של א5!ו! שרוב קוראי 5/3806 מתעלמים ממנו, ולכן הגובה הממשי של הדף הוא למעשה 1,235 פיקסלים. שים לב, כמובן, שספירת הפיקסלים מתייחסת לגודל הדף במחשב שלי יחד עם הגופנים אותם התקנתי. המספרים המדויקים ישתנו מאוד בתצורות אחרות. עצם העניין אינו המספר המדויק של הפיקסלים, אלא אם יש למשתמשים בעלי מסכים בינוניים וקטנים סיכוי להשתמש באתר. 6 עיצוב ממשק באינטרנט שקן? צאת 2 ו 16 ב = פתנטפתטוסכ] פַמנטפ-משוסכ. רי [פטות -0 6 29 8 8אסודפס מטסץ הפסופאס6 02 על 891984 1 וחוכ דא זל הממ סל וס ופט שנס 18,304 .11.5 זס הממ ד - 6 סג > = בב שמחה ₪ טס נ[18דזםט - . ן 03 5" מסות1 ַממנמד. בייל 2 שן ו 10. 600066 0] 00 8 6 560008 ח| 26% > וס אוסג" מ ל תהתה1 10055 ו תוס וי מו ו - בצ / / סו עובשל גו תת 1 מססק "0500005 7 0/00100105) סנזז סולד" ו 1567 0 6 0 15 טסט שו 110 160 עד .וט ו שו 3 9 מא אע טנ יד בנ 5 .8 6 סט 8006 6 ו .5 15031 5 \ ותנו 3 8 9 |10 11 12 84 העיצוב המקורי: גובה 2,154 פיקסלים וס > 0065 | = ה6צ24/56 | = פסק!6! | * מההסמט 9 ,27 זפווףוו ששו 0 צאסוה; 8108 087168 8 סוה 5 זנ 601816 513165 זט 9 8 זו עפ :וו 1 חסן+זסטה ₪065 ?וז ק5+0 0 018 זנוס צר ה 8 0 דד [8 ו 08 8 פפחזבם הפ 58 יחא 8 ח"י וד 8 |108חו01961ז 15 זאבו6זם1 116 בס 6זזנ1 5 קַברקזי שוכ || פחַח3 .11 קָז7761:9 1001 זול 5 ץצ ידו 6זג]1> .ב 1 , זטבוז:41 זו 1 . 89%[ר 6זפוסקוסט 15 , זטבוזכנה וס םך 6ד|3סף וט .5 שהחוג ₪ 2ו םסק" 91 על חפקזני ד = כ הי / 1 0 6 זו ?16 אינק ז'ם411 5!ב6זג 116 זפבור זס , 6)באנסו קַב66/1: צזויס1 10027'5 פזם פוט 5160 .ב 06 .6% בחד פסכחטם 01 חן 8נו= 415 599 פציבם | .13 926 קָעָטוכּי 2 בסנם11 ב69קסעום 16] ]0 >מנסב , בנוובסָ261 טבזפיוטוופ6עוו2 1186 זס1 8 10065 ז1 ב הו חבז 3 זנ ץ||3 פז +ת ה וזפ! 8חו138|5/ 5ב ור 5 זזש וו וס 568 חפצ טוח פ דופ ורדובי .7 5% פפוצסוה ‏ .15 3 14 וחזסזוח! חו ח43 3 1.06 006--5ו5ץ|3 חב 34 -/יך >זסבטי 1101 א >בתנזג1וג 66 וחטזח5 ₪ה058ם צפ ב שוו1 2 ₪1 190% ו 55 זאבז76 191267 8בווס6 ב .במוו+ 118-055 0 קַג[ש)טווה ז1ָור סוק בוט ₪ 5% 03 .5 3385 עפ ופא וספ- 60 טסוט 17 ספצ .16 בד קת עוסע צג4סד ז6ג)ג6שי כ6קר 163 המופ זו סע המופ 2 ?0 עד 169110 16060 פזור ‏ זגגרקד 2 פא 0057 15 *5%א עדוסבּתהסזסרום .1 %זד ג 6אנ [ תה 5 6ז3 דד קבגננג ד 4עפבטגת זוע :ו .11210177 011120156 91'5ו1 !1.6 מ - 24 25 5 1 20 שופרו םדו 5 חס רו 5 חפ !וסם מחכן | 416 כל |ו3ח-₪ שב 0 סח ,= 37 51 זחחק סז וס ,85|סוח3 ₪ ז3 ]5 זבבּק 34 5137 ₪5 1 חוס!. . החנחט1 3087 ₪5 זג 1 זט [ח-6 עפ 086 ₪ זחָ | הַחופעוסתם וטס זסז טפטותסחב = הּהָ! סז 5טוק , פזסזופהזח טס . 0150155100 ח| 5315 זטחזטן [561נו זסתזס 34 , וט .0.5 6350088 . ספוחטן ספוחטוח סז דחו 0 ות 58 60 .5/816./ע/ע/ץ העיצוב השימושי ביותר (1997): גובה 793 פיקסלים. 8 עיצוב ממשק באינטרנט דוגמה גרועה מהמגזין 6וחוד. דף זה בגובה 1,577 פיקסלים דורש ממשתמש עם מסך קטן -== 60012 == 2 .סא 149 .סט 1997 ,13 צהגטווהת חי ז ופ וו 3% וח חן טהטוסזב סהוטוחסם 5! 63695 טחב ,סחטוח עחובז 3 165 חו 03590 5ב אש 506סזסוו! הפח/ .5בס 135% 85צס| 38 .טאפ 1 פטוט לגלול שלושה או ארבעה ב סט שח ,זב טץ ץ93 סו חו ,ססואס!! אפ( פטוסזפטםטם!ה. בב חפו!|ג בק ,09591 פוש חו זו 308ז 60 580 טחבּ 911 פהספזסק 0% 8 .85030308 לח טוחטוחח חס זססבּ |ו3ן זס סוס חזוח וובם ספ חלונ ות, כשהוא רק 1 מתוך 5 סא 00 538 חש החסז) סאס--₪06865 הח פם5 ספזתט. סחםפפאו טר פטםזטנוסגוט!ה החסיח טצוזם חס חס ספטן-- הוח טחו!וביט. 508זסק 3 %חטנוסם פח ז8סב. | .593008 60 ספסזסווא הפסוה פת 2 דפים של הכתבה המלאה 3 סו ב הת מס)סס. סה 50 בס פת ספזנוד 50 8ח50זסק 6380000 3 ,964 630085 בזפזזב3 0 660,000 ב ,6נא (במק רה זה מוצג דף מספר 6 | 803058 5080 5וחסס5טס 3 חן 66 0חוסםחו קנ 80080 בס 959 8 וזהפת 3 0ב ,503003705 חסו55ח6 וסקחו +פפרח ז'חה|גוסס ו 5 8 3597 " צְמָחטם החטם" פחש 35 האוסחא פובספם לבח בסדרה). זוהי דוגמה טובה .53 פוט סטחו 4) .08 583% 3 הַחוזה פע לסח 15 63585 , 0זסספז 5וחל 8סוק85ס לכ ךר שלש פוך טקסט שנכתב טסץ 3 5סס! זז 46] (?חווח 56 כ וסססחנ סט שו 15 :ב חחוחסג. חפחאו 50 0085 פח אגום ,הַחוד8ס0ח500ו 15 הסוחצו ,3|65+ פח הפתשו 5 . קנ ₪!אסגום 1) . סחהפסהסס5ו0 ץ וסוס 5 הסוחשו ,בחוצוח 5'פת בגירסה ה מ ודפס ת, כמו שהוא חכ 55עְ3ּאי31 סח 5 ,0חזבפ| פצבּח 5זפתסם טחה זפהססו פוה %חו|-חוב חס 3 הסוא פצוזם אזב3ם 3 ססחו פחזנם 4 (. זה קוטס סט 5 .3085 0זכסב 885 | חס 35 הפס 085ו|5 הח פסחט+ (5 45), הישר לאינטרנט - 5 00 8 005 גו 500 סח סב מהסוחט ווה הוה הסט זטחג חפט 5ב פזג סט פה + החחסת 395 פשוט לא עובד. וסט 6 60 8090 אפ לס 5| חב ,5זבפץ זנוס) הבח טזסוח ,חססְחַחוח35/ 368 הַהסחסז) אטום 3 ספחו 6ווגו 8‏ זפוחוחגו5 5וחס ומח חסו||ווח %40 זטוססב 5%סס |!ואי 3 5030 0 .6 .50 40,000 5בּת סו חסו!וצבם סט החסס זר פזב. 56 סטוה 8 303055 ההווחסס1 3 6א!! טום 3 סחואססן| ,5חחבפם זו 35|טטוסס הפ!סץספז חב 01355 + 850% 3 35 הו 35030 זפ חפט הסהפזפ!חסט 868 זסמזסס 8 ססחן 86 בס פַחַבּזבּ זבס-30 68ב ב ססחו פהַחואו5 63095 השבכ 15 5165 סספוםן ופטח 3 68|| , זפחזסס טרס ח1 . פטופווות זו הד" .60 3 35 פצסזט 8 036 פ|טסזפצחסס הַח563טו! 0 סוס ₪ 35 535 חח ",ַהוחובּ:חססחפ טו|טטם זס? עוחובוח 15 חפוווובם .553175 01 88|5| זנום] וסט 90715 הסססטרספחסס 235% עבשו פוח שרח חו סַחואזסי זב 5ח3וסוהת650 פפזרס ,זנוסה 58 פסוס5ט סומוחץ01 רש 0 אופוצ 65 הסוא !3 הס טספ זסס-הטוסזף 0287 טאו חַח050ן30 ,חספְחַחוח35// 1.368 55סזסב פחובסחטסון בחוזפצסס עְב1מ015 ח836-50788 ב וחזס ||ואו 636 5זסטוחטוח . חו-40. חום סוחסיטסטוט חב ספף ||'טסץ טופוצ טסץ תפחש" .||בי פזסחט חב טסץ 35" .5חוב!מאפ פח ",5פסחפזפזפזם זוסץ הטוא 0סססחט זבּסקםב ||ואי 5פזנססום פפוזסץב] זנוסץ ,החססז עב הזב אוסם ז8חב/צ פז'טסץ פוצסוח זס אוסח5 /ד 3 זס 68!! גוסץ סופטווח טר רטוצו הַחסובּ !ואי | וחב ,85סוסחס זגוסעי הזז החבפ| ||ואו הזפל5ץ5 סח . ההוהססב /י 50 1505 5גוסואפזם זנוסץ וחסזו 85זגססום זם סו5 והז ה זטוחטהוסז וח זגו זב||החו5 בח זם ובמב וחפחל צבח ס6 000058 חבס וסץ זסוח הסחי זם? ,5חו!ססונום עהסזבזסות הבח סס פצבת !0/8 .5פחם !81 5 ,)הוח 6385 1168 ".החססז 3 סט 0085 הספזסם חס הבתל 000ווחטחו | 3 וחב חט ‏ הַה030ח350) צזפ !וא זה חש 06 5אוסח5 63585 ,חסו!וצהכ זפסחפס פחל ססחו סחוצסון פהַחב 008 הפסססאו 80 זב הססוהוחהו ב . ץזבּזטו| תש פם. 1) .3|סםטוס 8 ססחן 31580 8ט 0ם הַחסוהּאי , זססו 8חז פצסטה | םח 3 8+ ער !58 זט חב חס ההז 5וחס 0085 :זפטחסאי הח חסס ע חפ פץבבּחו זס ?553025 והטספטוח 0ם לחכ פּזְבּהַפ|פז 8 500% סט !083 5א%ססם-8זבז %זםץ אופא ב ספזוח 5ב ה (?סו סז 3 חס" .ספ 5 הַהו830ז +הפזזנוס 45 . וח זם? עזבּזטו 3 , צְחמְבזסָסום חו|3ז5 אופח 08 %ססס 1" ,535 פח ", !153 סף סוס 3] 5סוהחוחנו5 ח8צ58 ,זב סב ס--180ו48] סטב אססם ץ8ח5ו0 38| הז חב 8355 >סום צם %ססם הַחותפפחובּסהטוסוח. 5 ". !סח 5000087 פסב!!ה שש ב סחב [8|!5// אחבז %ה08ו85זם בוחה '85ח631 .1 לפפחזם ,5'הַהוצז1 תס ,5'תססה מוווחק 1 ח3? 3 150 8 הזב 5!פעסח 8סוזס 3+ פחחס-!31 15 סוט , 5'וח3ל5זסט!3 טוצהס =אז [ פד ,₪8 8 חן זה 6300 פד 553003705 ץסט|ססת50 ץם וו 8ם ||וא הזססז ץטזבפח ג .06308 59037308 ה חב 63050 505 8 0008 8 30 ; חו|סקחחהט 5טוסחזסח8 חב ,חווט ₪ הסטוסם 60 83| עוגמץס( עם 85טטבפו!|סס 585מזטפ עסו סט 35 פחו|סמוחבט 3 חס הַהוסחטוסם 8045 פה סחב וז 35 הס טב הפטהסס |ססכ טס טח רש 5| 58נוסח 68 זט בכ 6ספ|מוחסס עוחס טח 5 86000ז |ססם מב| 588% ג . וחבט ע!וחחב? פחש זפטחו 8 זס00סטס חב סטחו 0355 הסטסזרט 685בח5 ||בעי 3 חס 8" ,5חזב אי חב 5זבסםס3פז ב זבטום 500000 החד בפזב הסה 38| 8 חס וסט פה פסחו5 ,הזפר חו סם וטע שבחצו זם בס 5 ,00585 החססז |ססם שחש סט זסס 68 35 ".08פח| 588 חבס 3% הסוס זפ חן ההחסט פה 0085 .זפלחטטבּ! חו זפצם 85|מטסג .535 סח ",ב טחוופו הטושו 5פהחספהס5" ?ססות זססט 608 535 סחוי פס חב ,80% טרס סט סוס זהטחב או פא 5'פ סנוט ,טזבגום פרם 63 סט 5פו 63005 . 0פ6סס| 15 פטחפ 8 8305| ₪ 50 .856368 508 1 סב 01535 3 60 זב סט ₪153 הוחססטט צְ803החס5 ||ואו וח 5טהסחפים ססח! 5זט2סט!!טום ספב עבּאו חטהחטרח רש 46 . 5083 סוס 5500080 טחב עְזב50ם חב .355308 מ 5פצסזם לברט פזוחטַבּטם ב 65 ,זצפ/וסח 3 זו ה5וםססח5 החואסס| סוסצב 6 פופה 5 63095 , עוטבאזםוחסה 5'טזבטם 8 לסב טב פה , סהסטסח5 םס 5פסטחווח פזסוח 18% חס הפסה 58 |בזנססטטותטזב |בזנסבּח חב פזסספטוב טרס 58סחס 830905 חאו זפ הסנוכ אוסח 5ו ב סחוופוא סנוט ,ספוזזבח זסם פה פזסופם ",00 0ף שבח סל סַחוסט 5! פזפזסחסס 800580 פחד" .ו חם סחוזטחו ספסוחסזבּ 8 אוסח סטב חזפסתסס 508 הַה55פזקאפ ,535 פח .5 5368 לטות == 6.012 סש .0170061 08 ./ש/ע/ע פרק 3: עיצוב תוכן 119 556 0חו31ז0נן0 ₪3105 6חד דוו 15006066 ובווו= רסאופ עכ ,זפ ה6רשסרח 8וח רסושו זפאו 86 680ז|ה 56 .56וסָ0|סח6ץ5כ 8 סם 5605 85/ו 8065 ,806 5ח0856706 8ור ההס זפחחוט סם קט וח |ו68 סוטסאעצ טסץ 876 86" . 6ח6500 ס'חהסוטוסעו 6 8ח8 ההסס60ם .החסס6סח! ₪6 [06 067080060 66חס 506 "?הַחוסס "?חַחואחוחם 6ז' טס" 86% 60 טסח5 6ח ",סַחואחוחס וז" 6" .]6706 5810 6 ", סַהןאחורם חח'1 ,רחסו ,65" "?חַחואחורם 160 667 וס 4 וטול וום ב ב - 0 פָחוסף 6ז'וסץ" :זפ זס+ הסופטו6חסס 5'זסו6פחטס6 6חוד ו 6 ,(,ן סם 056ו[80 86[ 060067 סי .6פס| סם פשחן= ומד ".וח 680 סס סַחועדם 56 סח 66'5רס 6וותוח .טע 6סנוחוסקת ח66ם ס'חסח 1 .חסון|66ז 01 ההחס? או6ח 8 רסושו קט 6806 1" ,585 08065 ",0806 הסחוח חז" 0 רו 1 .חס %ססם 8 סַחואפם סטסרטושו 5'ם, ||8 65 סם 066060 1 סוס ,06ַזףָ 0000 פַחספט 0 קסס 6רם חורםווו 8060! 1 .80680 76806 80 80 חח טסח6 אוסחא 1 0608056 6855 רספרח סס 0 0606ח66 חו ער 5060ו|65080 86רד .רח68 06 םסקה ח8 חס הספת 6רט חו 6|קס6ק ".סרח ץחה |608ז סם 660ח 6'חסוס 1 שרח הְרחָטפס וו 1 זטוסקסיוס בה עובו 880 86 6רח חס ||8ר] רס חאוסס ס6צון [וום" ז6ח||8 ₪ 50646 085570886 5875 ",68 6זסתסרוק 50 4 חפרט ,סַהוהזסרח ₪6 חן אןפ |סחגו ז6אסכ צ8ום 6'0" 0פוסקה 1500055 800 0681855 86 רתוח ספחו חשח 508% 0ם 487870 םוט 28065 ,1975 ח1 ". 8005 רח6רספרח 8 רבחו 507%-סחסוו 68||60 מו 6 חקו סס6 6רם ח6ו|ה הזו 6/8 חס הז 46 חן 67 הז|₪8 5166 ד6גדו60-דדםאחטם סויפ - - - 2 2 : 1 2 : : : ה : 1 5 וו וו הווה חזסס .080170061 ./ש/ע/ע עורכי סוחוד הבינו כנראה ששפיכת הטקסט כמו שהוא מהעיתון המודפס לסדרה של דפי ווזד לא עושה דף תוכן טוב באינטרנט. לזכותם ייאמר שהם סיפקו סדרת דפים חלופית עם תוכן מקוצץ, וכן קישורים לתוכן מולטימדיה שמנצל את היכולות המיוחדות של האינטרנט והמחשב. אישית, הייתי מעדיף יותר קישורים על פני הוספת טקסט. ניתן היה לקחת חלקים גדולים יותר של הכתבה המקורית ולהפוך אותם ליעד משני של קישורים, אליהם היו עוברים קוראים שחיפשו נושא מיוחד מתוך הנושאים שנידונו כאן בקצרה. 0 עיצוב ממשק באינטרנט : | 6 ₪016 ₪006[ עזפסו||רח 5'הס6|סס48 סטספ8 680 טַחוצפ 8 0691560 58065 ,חחח זסוחטון חו 5078060|65 080 6סן סצ8? 8 ,₪154 01 הסופזפע זססנוקרס6 חססחורח0ס סחחסעו פו וס פס הסוחו חו 6הח .655ח51ש2 זב 500 08 ח! %סח 00/6 [טפש 06 08% חס 88%85 5 ,22 ל5שַחָט4 ,ששו סַחוא עָזזב | :0 +0 ל85+טסס סובטת 860 6 או 6085 8 160]-וזחת :08065 חן סזס= ץזח6ר ?0 סססחק 6חד 6 חוורח6] סם 567/65 0706 6 800 800806 50סססווי! 5 080685 5 .50000655 0% 0800675 פָחואוסו|8 צט קט 60סקוופ סזס= ‏ ו 6 סם 566) 5'ח8ס|5 60| חו ץ ספטסחו ססט8 6ם +0 כוח680675| ,17 וו :וו 6 ,6170 כ חן 6|טלסח0 8ווף 8וו] 6 סזס= עוחפות פתשדוםה-1(55א פהס- שהחפת חחזסס .080170061 ./ש/ע/ע פרק 3: עיצוב תוכן 121 8שוזח! עס 055518 11306 66 א566) ]0 ||3= חב ₪156 16 :ואג ,065זפ₪-+05ק 5 חו 45ע הוחהט!60 5וח1 החסחט ,96' 01 שחוזק5 106 חו !3 600ן560 ה 60חו ע!316רחוזוו זו ,ַהוח6+חו!ח6 חג ,וטס 5 !60 1015 01 ז65₪1ז 106 פהעש ]| . סחסכקכבּח פחוחז חו33 61 שחו זסוחנוח 01 567056 16751000 ה8ווח-0ס חוור סחחה 5'סח8= זח8 | ה855|וה| ?רסו סז שסזסז זטסץ 063% ע : 3 8 חו החווח חהוסטווסט-308 ח 58 וד ₪5ו! זז וזח עפ 2055818 18388 בבדי ןיז בב ב : זנ 800 טטר זופר זם זטסץ 63%קפ 5 37 חו החווח :7 5 ד חז0ס0.6סו/ש סמ .שש 2 עיצוב ממשק באינטרנט (בעמוד הקודם) אם יש לך כתבה ארוכה, הרי שהעצה הטובה ביותר היא לשכתבה ולקצר אותה, או לחתוך אותה וליצור קישורים לדפי תוכן משניים, גם הם קטנים בהיקף התכנים שבהם. אם עליך לשמור, מסיבה מסוימת, על מבנה ליניארי, עדיף לוותר ולהציג את הכתבה כולה בדף אחד. למרות שהמשתמשים אינם אוהבים לגלול, הם אוהבים פחות להמתין לטעינת הדף הבא בזמן שהם באמצע קריאת הכתבה. דוגמה זו, מתוך אתר 66זו/ס₪, מראה מה לא לעשות, כלומר, לא לתת לגולשים חלקים קטנטנים של הסיפור, כל חלק בדף נפרד. דפים אלה מסומנים בגאווה בעזרת המספרים "1" ו-"2", כאילו שלמשתמשים אכפת לדעת זאת. אם מדובר ביחידה ליניארית, אל תוסיף עומס ניווט מיותר רק כדי להציג את ספירת הדפים. עדיף לקשר לכתבה הקודמת אודות 6705 5%סק. כותרות דפים כתיבה ל-60/ היא כתיבה שנועדה להימצא ולהיקרא. המשתמשים אוהבים מנועי חיפוש, גם כדי לנווט בתוך אתר וגס כדי לנווט את דרכס באינטרנט. האתר שלך קייס במנועי חיפוש רק בצורת כותרת הדף שלך המוצגת בדף תוצאות החיפוש. בשפת !31 ניתן להגדיר כותרת לכל דף ודף בעזרת התגית <₪6>. חשוב לכתוב כותרות טובות לדפיס משוס שכותרות אלו משמשות במקריס רביס כמקור ההתייחסות הראשי לדפים. כותרות הדפים משמשות גס בתפריטי ניווט רבים, כגון רשימות סימניה (8/071805= /87%וח200%) ורשימות היסטוריה. לכן כה חשוב שהכותרת תכיל מספיק מילים, כדי לעמוד בפני עצמה, ולהיות בעלת משמעות כשהיא נקראת בתפריט או ברשימת חיפוש. מצד שני, כותרות ארוכות מאטות את המשתמשים, ולכן מומלא לכתוב כותרות בעלות שתי מיליס עד שש מילים. הדפים הראשיים יכולים להכיל אפילו כותרת של מילה אחת (כמו לדוגמה, ''סו6אם'י). כותרת דף היא פיסת תוכן, ועליה להיות מובנת לחלוטין. לרשותך 40-60 תוויס כדי להסביר לגולשיס מה ימצאו בדף שלך. אס הכותרת לא תבהיר במה הדף עוסק, המשתמשים לעולס לא יגיעו אליו. יש בורך בכותרות שונות עבור דפיס נפרדים. לא נעיס לבקר, נניח, בשבעה דפיס עס אותה הכותרת, ולאחר מכן לנסות לחזור לדף מסויס מתוך רשימת ההיסטוריה. בנוסף, אם המשתמש ינסה להוסיף יותר מדף אחד של האתר לרשימת הסימניות שלו, תיווצר בעיית שימושיות, משוס שתפריט הסימניות יכיל רשומות זהות שיובילו לדפים שוניס (אותה כותרת עס !₪1 שונים). נקודה אחרונה היא לשפר את הכותרות עבור סריקה מהירה. לשם כך, העבר את המונחיס האינפורמטיבייס לאזור תחילת הכותרת וכן מומלצ להתחיל אותה במילה שתתאיס לצורכי המשתמש כשהוא סורק תפריט או רשימת כותרות. השגיאה הקלאסית היא להשתמש בכותרת כגון ''ץח8קוח00/ו ס% 6החסס6|6/יי. תמיד עדיף לקרוא לדף 'יץחהקוחס6עו'יי. לשיפור יכולת הסריקה, השמט את מילות החיבור האנגליות ג, חג, ו-16 מתחילת הכותרת. חשוב לעשות כך משוס שחלק מרשימות הכותרות המתקבלות מסודרות לפי האלף- בית. הכותרות לא צריכות לשמור על חוקי הדקדוק. עליהן להיות בסגנון כרזות של לוח מודעות. פרק 3: עיצוב תוכן 123 אם אתה יוצר רשימות מתוכן שכתבו אנשים אחרים, מומלץ (ברוב המקרים) לשכתב את הכותרות שלהם. 4 עיצוב ממשק באינטרנט כתיבת כותרות הדרישות לכתיבת כותרות מקוונות שונות לגמרי מהדרישות לכתיבת כותרות מודפסות, משוס שהשימוש בהן שונה. שני ההבדליס העיקריים בין שני סוגי הכותרות הסםס: + כותרות מקוונות מוצגות לרוב מחוץ להקשרן: כחלק מרשימת כתבות, ברשימת תוצאות מנוע חיפוש, או בתפריט סימניות של דפדפן או עזר ניווט אחר. חלק מהמצביס הללו נמצאיס רחוק מההקשר המקורי. תוצאות מנוע חיפוש יכולות להתייחס לכל נושא אקראי, ולכן המשתמשיס לא יוכלו להשתמש בחומר רקע שיעזור לפרש את הכותרת. 6% אפילו כשהכותרת מוצגת עס תוכן שקשור אליה, הקושי בקריאה מקוונת והכמות הקטנה של מידע שניתן לראות בהרף עין מקשה על המשתמש ללמוד מספיק מהנתונים המקיפים אותה. בדפוס, יש לכותרת קשר הדוק לתמונות, כותרות משנה, ולגוף הכתבה, וניתן לפרש את כולס במבט אחד. במצב מקוון, תהיה כמות קטנה בהרבה של חומר בחלון, ואפילו המידע הזה יהיה קשה ונוח פחות לקריאה. בסריקת רשימת כתבות בדף ראשי או בדף עיתונות, המשתמשים נוהגיס להביט רק בכותרות המוארות ולדלג על מרבית הסיכומיס. כתוצאה מהבדליס אלו, טקסט הכותרת חייב לעמוד בפני עצמו ולהיות הגיוני, כששאר התוכן אינו זמין. כמובן שהמשתמשים יכוליס ללחו על הכותרת כדי לקבל את הכתבה המלאה, אך אס הס עסוקים מדי, הס לא יוכלו לעשות זאת עס כל כותרת שהס רואיס ב-60/. אני בופה שבקרוב המשתמשים יתחילו אפילו למחוק הודעות דואר אלקטרוני בלי לקרוא אותן, אס שורת הנושא לא תהיה מובנת להם. אס אתה יוצר רשימות מתוכן שכתבו אנשיס אחרים, מומלצ (ברוב המקריס) לשכתב את הכותרות שלהס. מעטיס הם אלה שמביניס את אומנות הכתיבה המקוונת שתעבוד טוב בכל מקוס ב-60/. לפיכך, כדי לתת שירות טוב יותר למשתמשים שלך, עליך לעשות את העבודה בעצמך. ההנתיות העיקריות לכתיבת כותרות עבור ה-פ6/ הן: % כתוב בשפה פשוטה: בלי משחקי מילים, ובלי כותרות י'חמודות'י או ''*מתוחכמות'"י. *> הסבר בבירור במה הכתבה עוסקת במונחים שנוגעיס למשתמש. פיסת התוכן (ח6סחסססקס!!ן) צריכה להיות תמצית קצרה במיוחד של התוכן הגדול אליה הוא שייכת. 6% הימנע מעקיצות (5ז16856) שמיועדות לגרוס לגולשיס ללחו על הכותרת, כדי לגלות במה הכתבה עוסקת. המשתמשים אינם מעוניינים להמתין לטעינת דפיס, אלא אס הס יודעיס בבירור מה הס ישיגו מכך. בדפוס, הסקרנות יכולה לגרוס לקוראיס להעביר את הדף או להתחיל לקרוא כתבה. במצב מקוון, זה פשוט מצריך טרחה רבה מדי מצידם. > דלג על קידומות אנגליות כגון ג, חה, ו-6חד בנושאיס של הודעות אלקטרוניות וכותרות דפים (אך כלול אותן בכותרות המשולבות בתוך דפים). תוכן הכותרת צריך להיות נוח לסריקה. בדרך כלל רשימות מסודרות בסדר אלפביתי, ולכן לא כדאי שהתוכן שלך יופיע תחת האות יידיי בתוך בלגן מבלבל יחד עס דפיס רביס שמתחילים במילה ''סחדיי. *> ודא שהמילה הראשונה חשובה ומכילה מידע, שיציב את הדף במיקוס טוב יותר ברשימות אלפבתיות ויקל על הסריקה. לדוגמה, התחל בשס החברה, אישיות או רעיון המתואר בכתבה. % אל תתחיל את כל כותרות הדפים באותה המילה, משוס שיהיה קשה להבדיל ביניהן בזמן סריקת רשימת קישורים. העבר את הטקסט הקבוע (אם קייס) לסוף השורה. קריאות (ע/ופ/60.!) אס המשתמשים אינס יכוליס לקרוא את הטקסט, כל השאר - עיצוב, מהירות ותוכן - חסר תועלת. ישנס כמה כללים בסיסיים שיש לשמור עליהס בכל אתרי ה-69/ כדי להבטיח את יכולת קריאת הטקסט: > השתמש בניגוד חזק בין צבעי הטקסט לצבעי הרקע. לקריאות הטובה ביותר יש צורך בטקסט שחור על רקע לבן (טקסט חיובי - )%א6ד 6עטופסק). טקסט לבן על רקע שחור (טקסט שלילי - %%ך 6ע6080א) טוב כמעט באותה המידה. יחס הניגוד שבטקסט שלילי כמעט והה לגה שבטקסט חיובי, אך סכמת הצבעיסם ההפוכיס פרק 3: עיצוב תוכן | 125 מסיחה את דעתם של הגולשים ומאטה במקצת את קצב הקריאה שלהם. הקריאות (שוופו60 1) סובלת יותר מסכמות צבעים שהופכות את הטקסט לבהיר יותר משחור טהור, במיוחד אס הרקע כהה יותר מלבן טהור. למשל, טקסט ורוד על רקע ירוק, זה שילוב לא טוב: יש מעט מדי (בעמוד הבא) קשה לקרוא טקסט עם ניגוד צבעים חלש, במיוחד אם הוא גם קטן וכתוב באותיות נטויות (9|165ז1) כמו ההסבר הראשי שבדף זה. האפשרות לחפש סוחרם שתופהם מוש4 ניגוד, ולקוראיס עיוורי צבעיס ירוק ואדוס אין מסוים נחמדה, אך על שוס אפשרות לקרוא אותן. הערפ לפק שם וצר 4 השתמש ברקע עם צבע פשוט, או במרקמי צבע קריא לבני אנוש בנוסף רקע עדינים מאוד. גרפיקת רקע פוגעת ביכולת למספר הדגם. המשתמש לאתר את השורות בין האותיות ולזהות צורות מיליס. 4% השתמש בגופנים גדולים מספיק שיאפשרו לגולשיס לקרוא את הטקסט, אפילו אס יש להס מגבלת ראייה. את הגופניס הקטניס יש לשמור להערות שולייס (פסְסחזס0) ולהודעות מסוג אחריות/פרטלות (5ז8ח0156!81 |1608) שלא כל המשתמשיס אמורים לקרוא. > ודא שהטקסט יציב. קשה מאוד לקרוא טקסט נע, מהבהב, או כוה שמשנה את גודלו. יש ליישר כמעט את כל הטקסט לצד ימין (טקסט עברי) או לצד שמאל (טקסט לועז. כשיש לעין נקודה קבועה להתחלת הסריקה, המשתמשים יכוליס לקרוא מהר יותר ממצביס בהס הס נתקלים בטקסט ממורכז, או כזה שמיושר בכיוון ההפוך לכיוון הקריאה. כמובן שניתן למרכז טקסט או ליישר אותו הפוך (אנגלית לימין ועברית לשמאל) כדי להשיג אפקט מסוים, אך לא כדאי לעשות זאת עס בלוקיס של טקסט. בדומה לכך, קל הרבה יותר לסרוק רשימות, כשהמילה הראשונה של כל רכיב מיושרת נכון באותה השורה. למסכי המחשב של היוס יש יכולת הפרדה נמוכה (יחסית), ולכן קל יותר לקרוא טקסט בגופני 5805-5061 כגון 670808/. אין מספיק פיקסלים כדי לפענח את הפרטים הקטניס הדרושיס לגופני זז56 בגופן בגודל 10 נקודות. כמו כן, רוב הגולשיס מעדיפיס לקרוא גופני ]561 (דוגמה: ת4408664) ולכן נוצר פרדוקס מסוים. נושא הקריאות (ש1וטו60 1) צריך לנצח כשמדובר בטקסט קטן מאוד (כגון טקסט בגודל 9 נקודות או פחות). טקסט קטן כוּה צריך להיות מסוג 585-561 (דוגמה: ם3408660). אפשר להשתמש בגופן ]56 עבור טקסט גדול יותר אס הוא יתאים לטופוגרפיית האתר. הדבר האחרון שנוגע להנחיית קריאות (שוופו160) הוא להימנע משימוש באותיות לועזיות גדולות (60:675] |₪וק68) בכל הטקסט. יכולת הקריאה של המשתמשים יורדת בכ-10% בקריאת פיסקה שכתובה באותיות גדולות, משוס שקשה לעין לזהות את צורות המיליס והאותיות בתצוגה האחידה ודמויית הבלוק של טקסט באותיות גדולות. אל תעשה זאת. 6 עיצוב ממשק באינטרנט |[ וס זסגו סז ו₪ ץ 50 736078 13% 75ו₪)/2זבת/ 6/5 15,000 ופיס ףשסחתז 5837 |)/שו ומסכסס. )1 מס5 פחך . שסץ 0937 500785 6 ₪ מש פססט םסח 26: ]7 :זוז ופססות א 268/75 פחווחכ) 26חוסווזטות עַהס5 01 151 3 508 10 פופו אסווס 06| פזס!5 6 101086% 1 שווסוו ₪ 08 4 פחז ח0 | ₪ פחז ח0 | >זסצ1ה | הוחפרו 1 מב 56 | אססת! זסטססו | 508708 שחו 50 | 165ח0ז861ום צחסםפ ₪937 . 56/60 5זַתִהָו3 |4/ . סח| 05וח0תז266] 50 1899 זַתִפַהעֶקס0 56/.500/.001.//ע/ע וננ ממממממממממממ 6 | )₪ 106310 51018 ₪16 1186 סז 6 20 ]5-01 זווסץ ₪161 8 018 60 3008655 ווסץ זו 5 ,316 161ו0ז 3 וס וו 1 סה 161ו סז עבתו וול .1016 פזהסקקה 1 6 061618 ]0 16ווהו]6 זווסץ ץזוטסחו 10 ₪1טהזוווו ו/56106 זו 510165 סו זב ]שו זו 268 6/316החרו זווסץ 8 6וו0וק פוום עָדוב6 זהום עוו3163ו110ו3 |[|וש 063101 1 0 3165 ו161ה56 16 הששו 5 181 51016 3 ות וו זווסץ פרק 3: עיצוב תוכן 127 ג 1 | צ63|!!67 68 36 זטסע זב 018 80 8+ זבפת 003% 26% 6 ו דיר דוו :6 פפוו 106 ח5 פטו 8+ אחות+ או סור פ 6 ער ו 6+ אסא שש 6ח+ 4וום ו ספת ת80] הס ה| 8 הוה8ז5ון| | | הוחז 27:00 66% | 010 68130 :ו 5 118160 60 .0סו/ש) סמ .שש 8 עיצוב ממשק באינטרנט כ 5ס!|3-] 365 כ 7 הז לי חס ח366!] 5בח 16] 6זו 6 6 ה , ]הח חתפו 9913 8 5 וסט .611076 6 33 פאוסזב ז0 ז6צווף פוח 46610 / 0 > 5/ופ)! 44/5 זסאיסכ ז0 30156 00 0 סה 3 80 זט 60 390 וח 80/8 פת1 וס :עסו סז 5 65 חח 0 009 2870 908 ג .6זוז 1 16 ]30 6000 הַחוו186 15 זה ץ8ה6085 א חחס) זפסת חזוצצ זטוחפו ?וח 6 סט 663 +6! סש 08 : 6 6 שַהוטוסחו , עור |בּזמָום פחוש 01108 בק ₪ . 55660 5ַחִפָח |4/ . סח! בזומָום טפחו 1894-97 ₪9 אל תשתמש במרקמי רקע עמוסים כמו זה של אתר 0זוסת. הקריאה ממסכי המחשב איטית מספיק גם ללא ההפרעה ליכולת המשתמש לזהות מילים ואותיות במהירות. מומלץ להימנע ממרקמי רקע, או להשתמש בצבע יחיד שמנוגד מאוד לצבע הטקסט. אם אינך יכול להימנע משימוש ברקע בעל מרקם, השתמש לפחות במרקם עדין במקום מרקם שיקשה על הקורא לראות מה נמצא בדף. תצוגת דוגמאות מסך (507667050%5) פעמים רבות משתמשים בדוגמאות מסך של אתר בתיעוד שלו, בכתבה בעיתון ובהקשרים רבים אחרים. לרוב מומלץ לחתוך את חלקי הדפדפן מהתמונה. עליך להתמקד בתשומת הלב של הקורא לעיצוב הדף, ולא לגרסת הדפדפן בה השתמשת לעיבוד הדוגמה. אם אתה משאיר את הדפדפן בדוגמה, או אם ישנם רכיבים אחרים של המסך המציגים את כתובת ה-081 של הדף המדובר, חשוב לוודא כי זה זהה לזה שנצפה על ידי המשתמשים. פירוש הדבר שעליך ליצור דוגמאות מסך מתוך הגרסאות הפעילות של האתר ולא מתוך שרת הפיתוח הפנימי שלך. אם תופיע כתובת !חש פנימית בתחום דוגמת המסך, תוכל לתקן את הבעיה בעורך גרפי. תיעוד מקוון תמיד עדיף לעצב ממשקי משתמש קלים ללמידה שלא דורשים תיעוד, ואסור שברירת המחדל תהיה שחובה לקרוא את דפי העזרה, כדי לנווט את דרכס. ברוב המקריס, משתמשי האינטרנט כה חסרי סבלנות עד שהס לא יהיו מוכניס לקרוא תיעוד מקוון. לא נהוג שהגלישה באתר תלווה בספרי הפעלה. למרות זאת, לעיתיס המשתמשים חייבים לפנות למידע מסייע. משתמשי אינטראנט משתמשיס באותס הדפיס פעס אחר פעם, ולכן הס ירצו להקדיש זמן כדי לדעת איך להשתמש בהם בצורה יעילה. פעולות מורכבות או מתותחכמות (למשל שימוש במנוע חיפוש) עשויות לדרוש גס הן מדריכיס או עזרה מקוונת. משתמשי האקסטראנט 8080 אם) הס כאלה שנבחרו מתוך שותפיך העסקיים (לקוחות וספקים), ולכן יש להם רצון ללמוד איך להשתמש בעיצוב האקסטראנט שלך בצורה הטובה ביותר. רשתות האקסטראנט, עס כל הכבוד לרצון המשתמש ללמוד, דומות יותר לאינטראנט 60ח8ח1) מאשר לאינטרנט (667060ח1), בה המשתמשיס גולשיס בחופשיות, ואינס רוציס לבזבו ומן על למידת אופן השימוש באתריס מסוימים, משוס שישנס כל כך הרבה אתריס כאלה. עיצוב אקסטראנט יכול להקיף קצת יותר יישומיס בהס המשתמשים עשוייס להודקק לדפי עזרה או לחומריס מודפסים, כגון: מדריכים, תקציריס וטבלאות עור. כמובן שכל מידע שנמצא בחומר מודפס צריך להיות זמין גס בגירסה מקוונת, משוס שמשתמשים רבים יעדיפו לוותר על התיעוד המודפס, או שהוא לא יימצא בשעת הצורך והתיעוד המקוון יהיה מקור המידע הזמין היחיד. למרות שכמה יישומי פ6/ עשויים לכלול עזרה מקוונת ותיעוד, חשוב לוּכור את החוק הראשון של נילסן אודות ספרי הפעלת מחשבים : המשתמשיס לא יקראו את התיעוד מרצונס החופש:י. למעשה, הפעם היחידה שהמשתמשים נוגעים במדריך היא כשהם בצרה ואינס יכוליסם להשתמש במערכת. ברוב אתרי ה-פ6//, משמעות הדבר היא שהמשתמש נזרק מהאתר ולא ישוב אליו לעולס. ביישומי 60/ יוקרתייס וברשתות אינטראנט ואקסטראנט, המשתמשים עשויים לרצות לעבור לקישור טקסט המוביל לדף עזרה, ולקרוא את המינימוס ההכרתי לצורך השלמת המשימה. פרק 3: עיצוב תוכן 129 = השאו ו --. + שק ₪ 5 ב ו ורא 05146 = ?חה0 סוס הטסץ פסופאו ספקקהחד סאו 56 ]1 .פחפה פסהספם "וס 370 0חב55 ר| | ₪650165 פח1 צֶ!ק15 טוחה | **םב/ש פרם | ה6יו598 0ףַב6063+ "4:57 666" ב<<ו0 שש סַהַב00163 חן 003+ בהססף בח סד ופוד 1 זטסץ חס 7856 פורם ₪65 סח צהסטך הזפנעאזות חופן :5אַחהוח6קס טסן זסו פץ03 30 זס1 188 , 97 || שפחת 563ו63]ם ,85% 8 בבּסוחאיסס :₪55 וחב חסב | ,ב8ם1 זס1 8סו5 זסזחו 55370 563וש63|ב חב חטז 60 בּסוחסז8|פ ד 5'חוב3ם5 :דסא ,215-230 6873 ,הַז8ם ;ה13-150 ,058 ,סו ,6088088 :65וההוחט5 5סופחכ) צ₪3 - 5זפחהאבק :5001 חפטוום 80חם0ו5 חוצ ₪ 638 בוצחד אופטוום פחד צְבּום שו פצפזס ?55סט זטוםץ חבּרם זפ ב 5 טסץ פזג :דהפ ונס 50 |ססס זפרסס ₪ חב הזפזעהדוה צם שפהםעצסק 5שז51 55שווד דנפנע + 303 * שסטחוש 5108 * 0185פזו0 050368'5+ח1 * 6645038 * 5655 8 שו 100% 5 08 55866.6 0575 + פפחבצ * 3005 8%( + 14615 שרד + |בהסטבהזפ6ח1 0.08%+זו 3 0 * םפש הד * ה5!50% 8%ח657ח1 * 3085 סב !וטו י 4800ב 533 * 1513 853 * שְחִבּקר 60 הוחו הד * אהו1231 * 6 טב חס5 * הה8+578068.60זם 8 / * 8100 * פזפ תע סת עצ שפוחו והדן016 ספאה הווקוה והדנם01 ,אזא!! והדנם1כ] אס פאה /וד-507 55864 הזפנע הדוה מאך5!! :הדפ1ל הדות 5 פה סד 585 000, 627 חס סחטפ: פהּחָבּ0 חפוו|וחח 31 :אפטחו פע 855חזב| הר סף 55פססב גוסץ פפצום בס5ושבּסות 8 פן 16 , 5מנוםז 5אופח 86ח058 14,000 סז 85 !סב תסוו|ורח זגום+ חב , (5 בח 55סח 1,158,000) . 8803 זפ 5פחט חסוווווח 31 זפצם ץ!ח0-%<6ד . 6!0!] . 5508366 . וח 00 . כו = - [1503 . 56דוכוט5 0ח1 שַחו5ט-ו5ע2 . !000% 7115 עטם . שיוב 500 ב5%ו ב+|ת שקסיוטם הדוטו"וסצ! . !בי 5נוה. :5/0565 יוסידווות 55תשוז || .ח00007300 %חה8רהפוט0ם |83ט₪1 1997 ₪ אתִהַשְססס ו 8/18/5186 ./עעש/ץ דף החיפוש של 5%₪ו/58|ה מציע עזרה מסוג "סוחוד-ח56-1גונ" (בדיוק בזמן) מתחת לשדה הקלט של הטקסט ונותן לפמשתמשים טיפ אודות תחביר החיפוש של המנוע. למרות תצוגת הדף המפוזרת, קרוב לוודאי שהמשתמשים יבחינו בטיפ אם הם מעונינים ללמוד כיצד לבצע חיפושים מתקדמים, משום שהטיפ הוצב בדיוק בנקודה עליה המשתמש יביט, כשהוא יחפש דרך ללמוד את תחביר החיפוש. הניסוח של טיפ זה מלוקק מדי לטעמי וקרוב לוודאי שהוא יבלבל את המשתמש יותר משהוא יסייע לו. כללית, מומלץ להשתמש בדוגמאות רציניות ולא בדוגמאות הומוריסטיות בניסיון לסייע למשתמשים להבין כיצד להחיל את הפתרון על הבעיה שלהם עצמם. בעיה נוספת בעיצוב זה היא שלחצן העזרה (כ!6) נמצא רחוק מהטיפ. כדאי להציב קישור טקסט המצהיר על משהו כגון "טיפים נוספים" מתחת לטיפ עצמו. יש רכיבי עיצוב רבים אחרים בדף זה, ולכן משתמשים רבים לא יראו את לחצן העזרה, והם לא יבינו שהם יכולים לקבל עזרה נוספת מעבר לטיפ. 0 עיצוב ממשק באינטרנט התקנת תוספים אוטומטית מפתה לחשוב שבעיית התוספים (פח1-פָטוק) נפתרה על ידי היכולת של הדפדפן להוריד ולהתקין אוטומטית כל תוכנה נדרשת. אין הדבר כך. עדיין יש את זמן ההשהיה של ההורדה, המשתמשים צריכים לקרוא בעיון מה הם מורידים ומאיזה אתר. אז עולות וצפות השאלות על וירוסים, סוסים טרויאנים גם "כמה נפח זה תופס?" ו- "האם יש להפעיל את המחשב מחדש, לאחר התקנה, כי אז צריך לשמור את כל המסמכים הפתוחים!". ומעל לכל, המשתמשים אינם אוהבים הפרעות בגלישה בצורת המתנה להורדה בלתי צפויה. בנוסף, יש תמיד את הסיכון בכך שההתקנה הזו ץו=-6חד-ח0ס תגרום לקריסת המחשב. אם האתר שלך אחראי לקריסת המחשב, אתה יכול לשכוח מהמשתמש. כתיבת תיעוד דורשת מיומנות מיוחדת, ואני ממליצ שתשכור כתב טכני מקצועי כדי לכתוב את דפי העזרה, התיעוד המקוון, וכל ההוראות המודפסות. בפרויקטים גדולים יותר, יש לצרף את הכתב הטכני לצוות מההתחלה, משוס שתכנון התיעוד צריך להשתלב בכל שלבי העיצוב. בפרויקטים קטנים יותר ניתן למסור את עבודת הכתיבה לקבלן חיצוני. הנה כמה כללים הבסיסיים לתיעוד מקוון: 6% המשתמשים פוניס לתיעוד רק כשיש להם בעיה מסוימת, ולכן חשוב לאפשר חיפוש בדפים אלה. % יש להוסיף דוגמאות רבות לתיעוד מקוון: למשתמשים קל הרבה יותר ללכת אחרי דוגמאות ולהתאיס אותן למקרה שלהם, מאשר להחליט מה עליהס לעשות מקריאת תיאור כללי. % יש לארגן את ההוראות בצורת משימות, ולהדגיש כיצד לעשות דבריס צעד אחר צעד. לא כדאי להוסיף מידע אודות הרקע של הבעיה משוס שממילא המשתמשים ידלגו עליו. *> למרות הכלל הקודם, אפשר לספק מודל קצר המתאר את המערכת, ולכלול תרשים שמסביר כיצד החלקים השונים פועלים יחדיו. *% יש להשתמש בקישורי טקסט למילון מונחים שיסביר רעיונות מסובכים או מונחיס שקשוריס למערכת. > כמו בכל דבר אחר ב-65/: היה תמציתי. אינני יכול לחשוב על דרך להדגיש מספיק את הצורך בדוגמאות. כל משתמש שראיינו אי פעס בנושא תיעוד מחשב דרש יותר דוגמאות. מולטימדיה המולטימדיה צוברת פופולריות ב-60/ ומוצאת ביטוי בטכנולוגיות רבות התומכות בהנפשה, וידאו וקול כדי לתמוך במדיה המסורתית של טקסט ותמונות. מדיה חדשה זו מציעה יותר אפשרויות עיצוב, אך היא דורשת משמעת חזקה יותר. שימוש לא מבוקר במולטימדיה יביא לממשק משתמש שיבלבל את המשתמשיסם ויקשה עליהס להבין את המידע. לא כל דף 65/ חייב להפציצ את המשתמש בכמות עצומה של מראה ותנועה. פרק 3: עיצוב תוכן 131 (בעמוד הבא) ה-החט1056! חהוזסזחטח שבכתובת והט6פט1]/אט.6ה. ה!ף. וצו מספק כמה סרטוני וידאו שמחוברים לתערוכה אודות הרומאים בסקוטלנד. שים לב כיצד יש לכל קישור וידאו ציון אורכו וכן חישוב זמן ההורדה הדרוש (באיזה סוג חיבור? קקק, א150, או כבלים?). הייתי מוסיף גם את גודל הקובץ ביחידות ₪8. התצוגות הממוזערות של הסצנות מתוך הסרטונים עוזרת להחליט אם יש למשתמש עניין בכל סרטון. חספחחסנ 5וזח6, מאוניברסיטת גלזגו, חקר ילדים בני 12-13 על ידי שימוש בגרסאות שונות של אתר המוזיאון, ושאל את דעתם על זמני ההורדה. התשובה השכיחה ביותר היתה "לא משביע רצון", כשהם ראו דף שסיפק רק את רשימת כותרות הסרטונים (כלומר, "לבישת חליפה רומית" ו"בגדים רומיים"), אך התגובה השתנתה ל- "מצוין" כשהם השתמשו בדף כמו זה, המציג גם מידע מקדים על כל סרטון. לפיכך, אפילו בזמני התגובה הזהים, המשתמשים אהבו יותר את האתר, כשקיבלו תמיכה טובה יותר בבחירת הסרטונים המעניינים אותם. ה-65/ איטית כל כך עד שאינך יכול פשוט לתת לגולשים לחקור את האתר שלך ללא שתנחה אותם כיצד להיזהר מהמכשולים שבדרך. מולטימדיה בצד הלקוח לעיצוב המולטימדיה בצד הלקוח יש עוד כמה מגבלות זמן תגובה שיש להתחשב בהן: % כדי שהמשתמש יקבל תחושה שהוא שולט ישירות על האובייקטים במסך, נדרש זמן תגובה של עשירית שנייה. לפיכך, הזמן מרגע שהמשתמש מקליד אות במקלדת או מזיז את העכבר עד שהאפקט הרצוי קורה, חייב להיות מהיר יותר מעשירית שנייה, כשהמטרה היא לאפשר למשתמש לשלוט באובייקט מסך (לדוגמה, לסובב דמות תלת-מימדית או לראות חלונות צצים בזמן מעבר על מפת תמונה (כַהּ8סאַבח1). אם לא נדרשת תחושת קשר פיסי בין פעולת המשתמשים לתוצאה על המסך, ניתן לקבל זמני תגובה של שנייה אחת. כל תגובה איטית מזו תגרום למשתמש להרגיש שהוא ממתין למחשב במקום לפעול בחופשיות עם הנתונים. לכן, לדוגמה, קפיצה לדף חדש או חישוב מחדש של גיליון אלקטרוני חייב לקחת לא יותר משנייה אחת. כשזמני התגובה עוברים את השנייה הזו, המשתמשים משנים את התנהגותם כלפי המערכת והם משתמשים בה בצורה מוגבלת יותר (לדוגמה, הם לא ינסו את אותו מספר האפשרויות או יעברו לאותו מספר הדפים). 2 עיצוב ממשק באינטרנט צו0פ8ה]) 01 ץזופזסצות11 ותטספט]/ מהחטותטות . 5חסספפטף החואוס!ום? בר זפ יפב חב 5מווס ספפול פ5פר0 זס פוקטופס 3 35 אספ! 3 פצב ?7 פס ||63 5זפום|50 5חב רסא 00 6בח// .1 % ?רוס זופרש 85 הברס 00 פזפח/ .2 9 9% ?סב או חב 503 + ב 5ספחו ,5ב םס ,58 5 הב רסח סם בח .3 % ?5078 ||ב עו פהוהסטחג פרט 3085 חב 5500 חו פחצווסס סאעוס הפוח או הפפ שוספם .4 % 30 085108 השצסר5 15 פחזס ההוהחגח קוו פד . אחו| 8% פקץח בר 58!805 15 סט סס פצבּח םצץ ווה 8 35 80צ150!3 15 חח ב בם!|חאוס פר , 'בש!' ס חח 508 53885 ספהו חסבּם . פסם מווס בר חס חהססטוט ‏ 50 פר חַח58!800 צם הַחובם! פויסוח 3 550 חבס גוס . ה88ז0ס50 פר₪ + וחסססט הפוא טוסץ א זפ סחב 58!805 .זב 60010 480556308 קוסע חוכ 5חבּו- ₪ קט 55בזם עפרט 35 5!ומטכ וססח56 זב חש בוטב חזפטוחו6 חופנ שר כס 6ו15 ב חס 5|3/85 חב 583075 , 5זפום|50 הב וחסח 5בּ הח15רח (5805 22 רשהַח8! מווס) "ונוסוחזוה רבוח ₪ 5 שו סו עחאו חב זםו|ס50 הברח0ף ב + זטטוסותזב בח ]|ה5זטוסץ זס1 588 בזס5% חב ב|פוח5 15 5פבטופחו 150מ . פשסספאם 50 (5805 50 רססח8! מוו₪) 5 הווח ₪ אס חב 15 פוה ב חא 588 . חחו085 הַחַ650זססחו חב ₪35 07855 הבחסם ה 30 סז 3 1580 30185| הבּוחסח בר (5805 34 הסַחפ! מוום) %.8.80/ס./ש/ש/ש פרק 3: עיצוב תוכן | 133 המתנה להתפתחות התוכנה לא משנה באיזה טכנולוגיות מולטימדיה (או וידאו) אתה משתמש, תמיד כדאי להישאר לפחות שנה אחת אחרי ההתפתחויות האחרונות בתוכנות הנגינה. נכון להיום, יש צורך בלפחות שנה אחת לפני שהתוכנות הזמינות יהיו מספיק בשימוש ויהיה בטוח לסמוך עליהן. הגבל את עצמך לקידוד קבצים לפורמטים שיעבדו גם עם תוכנה ישנה, משום שרוב המשתמשים שלך לא שדרגו עדיין לתוכנות מעודכנות. אם המשתמש ייאלץ להוריד תוסף חדש או להתקין תוכנה חדשה כדי לצפות באתר שלך, רוב הסיכויים שהוא יעזוב. במקום לדרוש מהמשתמשים להתקין תוכנה מיוחדת כדי להיכנס לאתר שלך, מומלץ לספק תצוגה מוקדמת של תוכן המולטימדיה, אליה ניתן להגיע בעזרת דפדפן פשוט וישן בלבד (שתי גרסאות אחורה). אחרי שהמשתמשים יראו את התצוגה המוקדמת, הם ירצו יותר להשקיע את זמנם ומרצם (ולהסתכן בקריסת המחשב) כדי להשיג את התוכנה הנחוצה. אם אין להם מושג טוב מה הם יקבלו, מדוע שהם יטרחו לעשות זאת? 4 עיצוב ממשק באינטרנט זמן תגובה רביס מרכיבי המולטימדיה גדולים, וזמן ההורדה שלהם ברוחבי הפס הזמיניס לרוב המשתמשים ארוך להחריד. משוס כך מומלצ לציין את סוג וגודל הקוב בסוגרייס אחרי הקישור שמוביל אליו, אס מדובר בקובצ שזמן ההורדה שלו ברוחב פס נפוץ הוא למעלה מ-10 שניות. אס אינך יודע מהו רוחב הפס של רוב המשתמשים, עליך לערוך סקר כדי לגלות ואת, משוס שמידע זה חשוב גם לנושאי עיצוב אחרים. נכון להיום, יש לרוב המשתמשים חיבורי 005א56, כלומר יש להוסיף התראה לכל קוב שגדול מ- 8א50. למשתמשים עסקיים יש לרוב רוחב פס גדול יותר, אך עדיין עליך לסמן קבציס שגדוליס מ- 200%8. בנוסף, הקפד לציין את אורך הסרטון, וכן את סוג הקוב אס אתה משתמש בפורמט לא סטנדרטי. לפני שהמשתמשים יחליטו להשקיע בהורדת מולטימדיה ארוכה, הס צריכיס לדעת לאן הס הולכים. הס לא ילחצו על משהו רק בגלל שהוא זמין. יש יותר מדי דבריס כאלה ב-60/ו. לכן עליך לספק תצוגה מקדימה של כל פריטי המולטימדיה בדפי )₪419 פשוטיס. במקרה שמדובר בסרטוני וידאו, נהוג לכלול תמונת סטילס אחת או שתיים. בנוסף, בין אס מדובר בוידאו ובין אם זה קוב קול, צרף סיכוס קצר ובו תיאור של מה שהמשתמש יראה או ישמע. תמונות יש לצמצס את כמות הגרפיקה בדפי פ6) בשל זמני ההורדה הארוכים שהם דורשים. גרפיקה מוגזמת חייבת להיעלם, כולל כל עותקי הטקסט שהומרו לקבצי תמונה (פרט לכותרות שמשולבות כל כך טוב עס גרפיקה עסקית, עד שהן חייבות להיות חלק מקובצ התמונה עצמו). אפילו במצב הזה, המשתמשים ירצו לראות את תמונות המוצריס שהם יקנו, משוס שהם לא יכולים לגעת ולהרגיש אותס בדרך אחרת. בדף ביוגרפיה, מומלץ גס לכלול את תמונת האישיות או טקסט שמתמקד בה. ישנס מקריס בהסם האימרה ייתמונה שווה אלף מיליס"י מתאימה עד כדי כך שהיא מבטלת (בעמוד הבא) תמונת המוצר העיקרית של הווקמן נראית בסדר, למרות שכדאי לתמוך בה בעזרת קישור לצילום מוגדל של המוצר - אולי אפילו לתמונות מכמה זוויות, כולל מבט טוב יותר על האוזניות. טור התמונות הממוזערות חסר תועלת בהכוונת המשתמשים לדגמים נוספים. אינך יכול לדעת מה ההבדלים בין המוצרים הללו רק מצפייה בתמונות. כדי להוסיף חטא על פשע, אתה יכול לראות את מחירי המוצרים החלופיים רק אם תעביר את סמן העכבר על פני הטור. השוואת המחירים קשה בהרבה כשניתן לראות רק מחיר אחד בזמן נתון, והמשתמשים נאלצים לבזבז את זמנם בהזזת העכבר על פני הדף: זה לא מתאים ל-60/). שתי בעיות נוספות בדף זה: % השימוש בניגוד נמוך בין צבע טקסט (אפור בהיר) לצבע הרקע (לבן). % תיאור המוצר וההדגשה על השיווק, במקום לספק סיכום קצר המראה איך הלקוחות יכולים להשתמש בו. את האימרה ייתמונה מצריכה ומן הורדה של אלפיים מילים'י. הדרך לפתור את הסתירה בין שתי ההנחיות הללו היא לנצל את תכונות קישורי הטקסט של ה-טפ/ש. דפיס ברמה עליונה צריכיס לצמצס את מספר הדוגמאות משוס שהמשתמש עדיין לא הביע עניין בפריט מסויס אותו יש לתאר. לאחר שהמשתמש עבר לקישורים המובילים לדפיס ספציפיים יותר, אתה יכול להוסיף יותר תמונות. דף מוצר ברמה עליונה צריך להכיל לרוב תמונה קטנה של המוצר, אך רובו צריך להישאר טקסט וטבלאות. אס המשתמש באמת מעוניין במוצר, הוא יעבור מדף המוצר לקישוריס שמכילים תמונות נוספות, ויהיה גס מוכן יילסבוליי את וּמן ההורדה (המתנה). על תמונות אלו להיות גדולות מספיק כדי להכיל את כל הפרטים שיעזרו להחליט על רכישת המוצר. הקטנת התמונה הדרך המסורתית להפקת גרסאות קטנות של תמונות היא ליצור תמונות ממוזערות (5!וחטוחטחד) בתוכנת גרפיקה על ידי שימוש בפקודת שינוי הגודל (665226). לרוע המזל, אס יש פרטיס רביס בתמונה, הס ייעלמו בשלב ההקטנה ולא ניתן יהיה לזהות אותס. בשיטת 8חוסססז6 (גזירת חלק מתמונה) נשמריס הפרטיס שבתוך שטח התצוגה החדש, אך זה נעשה במחיר הפסד תוכן התמונה הכללי. אני ממליצ לשלב בין 9חומקסז6 ל-פַחו|568 בטכניקה שקראתי לה בשס הקטנת תמונה תוך שמירה על המשמעות (חסו60060ז 806ח! 80660 0ח₪6!6/8766-6). לדוגמה, כדי לקבל תמונה ממוזערת בגודל 10% מהתמונה המקורית, חתוך (ססז6) את התמונה ל-32% מגודלה המקורי ולאחר מכן השתמש ב-4ַחו|508 כדי להקטין את התוצאה ל-32% מגודלה. התמונה המקורית תהיה בגודל 0.32=0.1א0.32 מהמקור. פרק 3: עיצוב תוכן | 135 חס שק ו 7 סו0ו, +| 0 זסטטוםס |וסטוססזכ | צ 6% זפ עה!|ם שההההא!הש 0855811%8/שהוה10 !17118 +----816:80% (6חה ו | ₪ :5 !8ח0ו₪500/1 1 א =- ו 155 |. 90 . 5( "0 8 ּ ₪9 ₪ ₪ ₪0 קזפוח הזה 88ס!זם !|8 וח0ס./15.56/.500/./ש/ע/ע 6 עיצוב ממשק באינטרנט סזסשי 4 שתס ...1.0081/005 סזס)5 וס |ו0ז56 6% ₪ ה הזכ 131651 סוזסעו [03ז סת1 מו סעוו טס סנזסע זסץ ואס שח|טתפחו= ז319 | = ,וס עטום ב 1 וז -חכ) 9907 8 חח 00 8 זו ₪ ו4%652-> 5 7 זס068! ₪ 0 זסו5 8001080 >-- 5% *% 3 .וע 5 סץפוח 56 !הזו 68|שנחסש זז 516080 וח1/ חב 6 038556116-526₪ ב ]סח 6018 השועו /ח6ח3פ 62160060 >חטוסח 20. (/ח6זהפ "3" 1) 116 הַחוחטז 561חק חסוז513 24 ( 99 16) חסוז900 156סח 8 פועיפוסם בחועו8ח/1ח0/3ח10 1351 18% 3/0308 1806 6756 סו 5516 6ה50 835509 הּהָשען חסוזו5סק "ח50 6שסכח0" חחוש 590501 סו5טחח סוז3וחסזובּ 505 3 סז קט (45) 5 אחבופ קט הַח50 1 -[301/ 4130086 וח5!ח3ת₪₪5 חווט חסאאו5 230]) זחבז45/|בססו 1 1 סז וח סז / (ששח/] ז/ עבוק צאּוקפום 100 והווהום שוחט!ס/ 0וז3רחסזו/) 5 4/1 (וח5516 זפזווחו] 916060 830000085 5 || 5חסו52001!081 סו וסוס 9 שודוסיה ₪ 9/8 ו 0% 6 . = 8 31111[7+ ,631ת6316 4 0-0 2 ... 4036 קת001 %סק 22866-זסק3ק 80116 511 85/100.607./ש/ע/ע שני איורי המחשה שעיצבתי עבור אתר הסרט "58716" של |חו822ח8סד 66טזם, אותו הוא עשה עבור 160555 חט5. שתי ההדגמות מבוססות על אותה תמונת הסטילס שנלקחה מהסרט. התמונה הקטנה מקושרת לתמונה גדולה יותר. בדיקות המשתמשים שערכתי העלו שהגולשים תמיד לחצו על התמונה כדי לקבל מידע נוסף אודות הרכיבים השונים שבה. פרק 3: עיצוב תוכן 137 "וו ו וק וווזה 8ווה].. לעיתים, לא ניתן לכלול תמונה בגודל מלא בדף הראשי של האתר. הנה דוגמת סטילס מתוך הסרט "ו" 8 עיצוב ממשק באינטרנט ווק ו 18וז.. | ו וזה ףווהז 4 וק שתי הגישות המסורתיות להקטנת תמונות הן חיתוך (פחוקקסז6, משמאל) ושינוי גודל (פַחו|568, מימין). לרוע המזל, חיתוך מביא לאיבוד תוכן, במיוחד אם התמונות נחתכות לגודל קטן, ומזעור מוביל לאיבוד נתונים ומקשה על המשתמש לראות במה עוסקת התמונה. פרק 3: עיצוב תוכן 139 טכניקת הקטנת התמונה תוך שמירה על המשמעות, משמרת הן את הקונטקסט והן את הפרטים, אפילו כשהתמונה קטנה מאוד. בדוגמאות אלו, וסט | ווח חצי מההקטנה הושגה זוז 5ז ₪ על ידי חיתוך התמונה (תוך שמירת מרכז הפעולה במרכז שטח התצוגה שהתקבל, והחצי השני מוזער. יי 6 ו 0 עיצוב ממשק באינטרנט הניסיון הראשון שעשיתי ליצור מצגת שתספר את הסרט "536" של חט5. עיצוב זה לא טוב, משום שהוא דורש גלילה כדי לראות את הסצנה השלמה ומשום שתמונות הסטילס גדולות מדי ודורשות זמן הורדה ארוך. בבדיקות שימושיות, מצאתי גם שהמשתמשים לא רוצים לקרוא סיכומי תסריט כמו אלה שמוצמדים לתמונות. ידוע שהגולשים לא רוצים לקרוא טקסט ארוך ב-60/, ודבר זה נכון גם לרכיבי הטקסט של עיצובי מולטימדיה. 5 ]0 803141 186 01 [הו₪1661 .5 ווח!11 11656 חזוש 0065 08%+ א500/0017:36 186 10 סיופח אסוו6 3 5חחוזס5 , או ,|ב עו זפת ,5זס8זוכ +₪ טזבסם חס 60 הס00בח58פזכ בוספחחם!טוח 5'פווגוך זם+ת 3 3% )קפסב 5גוסוץפזם 3 פסחו5 ||פאו |58 ססח |!ואצ זב 5'פו|גו? ברס פוחוב!ס 8] .זפח חס 8פ5המזטפ .0חוזס5 08ל חו ז503סס5 3 הסחטוב| לסהחבּס גוס .13180 זבּס זבּ|וחופ רז 3 ה58370 60 זפסטומחחסס מסססב3! זפ 585גו פו|טול ‏ 58וכז5 ורש הסוצו 80ב .זב סט ץ8 80 סח 3 585 קססקב| פח) איסח פססא ,506 חס חס 0358 הסטהותזס!חו 8 זס? 8350 8 חוב!מאם 6בחל 85|סודזבּ חב צ8|8ז |בזפ/50 5חח וגו ,5בּ0ב0353 פרם חן זז 593707085 !]3063 חספב זטסטומוחסס זם] .חבס פטוסוצפזם חס זס 53|85 הַחהסהוסמם₪153 זפ ז9ס5!סט סד . בתסזעו פזפצו הסמ 355 5וח 6בחס פחוב !םאפ טחב פאוו₪ פסםטוחחפסחו פוווב 8זפח או ה88ז50 3ו80 טטר טוט פס 50 מססכב3! זפח החסי? זפצס הססבזס)חו 5סחחחט 508 , פחחובוס ץְססםץז9ץ8 צֶם ח588 8ם חבס סו שחש פחוב|קאפ ₪36 ץז0ס5 זב מ5אופח 3 סחטס? 35 מסססב! 5'פו|גו ,5פצוחסזב 5אופח פוט חן זס 3 3 080078 156ן 8!83580ז חפפם בח 15 :בס פטוסוצפזם פחס זס 53|85 הַחהסהוסמם153 .0315 הַחועטוט 5500 ץ3 690 טס !קספ 0300580 3% 8אבטסת ב פרק 3: עיצוב תוכן 141 1)חוז166!] וווססווַוב3ּ₪0 6 107 676 <6ו!) + 6חד שזפחאו) 5זססספזוום +ם 0370 8 60 הס ב5ח58בזכ בוטפותס|טוח 3 בחוצום 5 פווטונ 8 35 הַחהופסמסזם 15 508 . (|פס סרפ ה הוחפסב זב 5זםטותפוח פר₪ +ם 58 , או ,בצח זפ . הסופוצום זפח צם 0850080 זבּס 3 הַתהתטססבזטחבו א ב55 צְחב מוחסס [|58 ססח |ווע זבּס 5'פו|ט? 35 5חובום חב הַחהספפו ברס הבהחטם 558 3 5סַחוזס5 מססמ3! ז8ח 585גו פווטנ .13180 זבּס זב|וחחו5 3 35 %קותפ:סב פטוסוצפזם 3 פסחו5פ |ופ/וי 1500875 חב 5005 פר₪ חס 0358 הססבותזםזחו 68סוח8ז 3 ה58370 60 זבסטמותסס 3 5 וזכ 18 + 53!85 בַהםהום0 01530 פר זם+ ה8350 פס 35/ו פאבּטסרחבּם חב 500.60 ./שעעעץ 2 עיצוב ממשק באינטרנט (בעמוד הקודם) עיצוב טוב יותר של מצגת סיפור עבור אותו סרטון הוידאו. כאן, התמונות המוקטנות דורשות פחות שטח, ומאפשרות הצבת שתי תמונות בכל שורה. ניתן לצפות בעיצוב שהתקבל ללא גלילה במסכים גדולים. שים לב גם לאפשרות להשמיע את ערוץ הקול שמתלווה לתמונות. משתמשים רבים מעדיפים לצפות במצגת התמונות ולשמוע את הקול, כדי לקבל תחושה של צפייה בסרטון המקורי. הנפשה לתנועה של דמויות יש השפעה רבת עוצמה על מנגנוני הקליטה האנושית. זהו אינסטינקט הישרדות מהזמניס בהם היה צורך עליון לחיוהר מחיות טרף. כיוס, לא אורבת לנו סכנה מחיות הטרף, אך כל דבר שינוע בתחוס הראייה של בן אנוש עדיין יסב את מירב תשומת ליבו: קשה מאוד להתרכז בקריאת טקסט שנמצא במרכז דף מסויס אם יש באותו דף לוגו מסתובב בפינה. להנפשה (חסוחוחה) יש מקוס בעיצוב ל-ס6/צ, ושימוש נכון בה מתואר בהמשך סעיף זה, אך באופן כללי מומלצ להשתמש בה כמה שפחות. שאל את עצמך אס אתה יכול להעביר את הרעיון שלך גס ללא הנפשה. אס התשובה היא כן, חסל את ההנפשה. בנוסף, לעולס אל תיצור הנפשה שחוזרת על עצמה. תן לה לפעול כמה פעמים ועצור אותה לאחר מכן. משתמשיס מעטים סבוריס שההנפשות יימדליקות", או שהן מציינות שנעשתה עבודה רבה בעיצוב האתר. רוב המשתמשים טועניס שההנפשה מטרידה אותם. כמעט כל המשתמשים לא סובלים טקסטים בתנועה (066ז18!) או טקסטיס בתנועת גלילה. רצוי שלא יהיה מידע חשוב בטקסט נגלל משוס שתמיד יהיה חלק מהטקסט מחוצ לגבולות המסך. לראשונה, נעשה שימוש בטקסט בתנועה במסכיס באולמות המסחר בבורסה בארהייב בגלל מגבלות טכניות שמקורן בתקשורת צרת פס (צרה מאוד). ההנפשה (חסוז8וח) טובה לשבע מטרות, שכל אחת מתוארת בפירוט רב יותר בהמשך: הקניית תחושת רצף במעברים. ציון מימדיס במעברים. הדגמה של שינוי על ציר הזמן. ריבוב התצוגה. העשרת מצגות גרפיות. המחשת מבניס תלת-מימדיים (כ3). 6 % 6 6 6 9 % משיכת תשומת לב. פרק 3: עיצוב תוכן 143 4 12075 607 5% 1836 807% 3% 7 5578 -:5ו1 % 8316 17386 8070 500 3 12086 7566 3% 10005 8070 7 15,116 1209> 5 0% 9075 7 7 13606 120865 80% ]וה 8|8|5ק / 0 -- א בצדן דצה מתטהההטתמם 7 ₪0 06 7-2 7] משטטמססטמם בנ וריצדום 690 ₪5 495 7" 9822> 0% 555 6 450 8336> 8% 405 = 320 = 61,20% 48.35% 340 ₪] 2 5138%> 400% 250 = 200 = 37786%> + 245 = 200" 370% 2% 90% 13,60> 13,60% מ [וזה1 פהז6קכ0 8 ]18 6185קס 4 ]וזה] 15ט!|ה8 8 וו ₪018 6 זוז פ|פווה₪ 5 / 6611815 8זם רחש 36 פווףופוות מצב נדיר של שימוש יעיל ב-מְַ38/56. כשהמשתמש נע על פני רשימת המחירים, המושבים המתאימים מוארים בתרשים התיאטרון. זהו אפקט הנפשה פשוט, שמציין חזותית את החיבור בין מה שקורה בשני חלקי המסך. 4 עיצוב ממשק באינטרנט רצף במעברים כשיש למשהו שני מצבים או יותר, קל יהיה למשתמשיס להבין את המעבר בין המצביס הללו אס המעברים יונפשו במקוס שהס יתרחשו מיידית. מעבר מונפש מאפשר למשתמש למפות את חלקי המשנה השוניס בעזרת מערכת תפיסתית (|08ז660ז6ק) במקוס לערב את המערכת ההכרתית (6ע0וחף60) ובכך להפחית את עומס המיפוי. דוגמה טובה לכך היא הוכחת משפט פיתגורס (82+02=62) על ידי הנפשת התנועה של מגוון משולשיס ומרובעיס להדגמת הטיעון ששני אזוריס הס באותו הגודל (/3740/ 80 30 ]| 8-8 ס6. 4600005 עשצ/ /:כת). ציון מימדים במעברים לעיתים, ניתן להשתמש בתנועות מונפשות מנוגדות, כדי להציג תנועה קדימה ואחורה לאורך ציר כלשהו. לדוגמה, ניתן להציג דפדוף בסדרה של עצמים על ידי תנועה מונפשת של דפדוף קדימה משמאל לימין ודפדוף אחורה מימין לשמאל (בעברית). ניתן להשתמש באפקטים מונפשים נוספיס כדי להמחיש את הצעד הבא, או מה יקרה אם. לדוגמה, ניתן להציג מעבר לקישור טקסט להערה תחתונה (ססחססס=) בעזרת הנפשת יילמטהיי, וכן ניתן להמחיש מעבר לסדרת אובייקטיס על ידי הנפשה של ייפרח נפתת'י. אחת הדוגמאות השכיחות היא לעשות תקריב (ח01ס2) לאובייקט עליו מצביע המשתמש. כך יכול המשתמש להבחין שהאובייקט עליו הוא מצביע ייגדוליי יותר משאר האובייקטיס. באותה גישה, מיושמות אנימציות נוספות המתרחשות בעת המעבר על האובייקט (זפצ60פטסואחס), כגון: תזוזה, רקע, צליל ולמעשה כל ייטריקיי שימשוך את העין. יש לשמור על אחידות הביצוע. אס החלטת 'ילהקפיציי את האובייקט חמישה פיקסלים למעלה ושבעה פיקסליס לימין - עשה ואת לכל האובייקטים. הדגמת שינוי לאורך זמן ההנפשה היא תצוגה שתלויה בזמן, ולכן היא מספקת מיפוי אחד-לאחד של תופעה שמשתנה לאורך זמן. לדוגמה, אפשר להדגיס את תהליך כריתת יערות הגשס או החור באוזון על ידי הצגת מפה מונפשת שהתצוגה בה משתנה לאורך ומן. פרק 3: עיצוב תוכן | 145 תופעות לא רצויות בהנפשה לפני שהבאנרים (5ז68חח28) יעלמו לנצח, הם הספיקו להביא עימם מכת מוות לטכניקת עיצוב שימושית אחת. בניסיון להשיג פופולריות בדירוג לפי מספר לחיצות, המפרסמים הנפישו את הגרפיקה בפרסומות בצורה מסיבית בעזרת הבהובים ותנועות מיותרות. להנפשות אלו אין שום יתרון שימושיות כלפי המשתמש ומשתמשים בה פשוט כדי לנסות למשוך את תשומת לב המשתמש לדבר לא קשור ושהמשתמש לא רוצה להביט בו. המשתמשים הבינו זאת והם מדלגים על רכיבי עיצוב שנעים תוך אמונה שהם כנראה חסרי תועלת. עצוב אבל נכון. לרוב, הגולשים יביטו פחות ברכיבי עיצוב ככל שהם ינועו יותר. בנוסף, מתחילה להתמסד הנחיית עיצוב יציבה שאומרת שאין לכלול כל רכיב ממשק שנראה כמו סרגל פרסומת (זפחח88) משום שהמשתמשים יתעלמו ממנו. 6 עיצוב ממשק באינטרנט ריבוב תצוגה אפשר להשתמש בהנפשה גם כדי להציג כמה אובייקטי מידע באותו המרחב. דוגמה טיפוסית היא מפת תמונה (10806₪880) בצד הלקות, עס הסבריס שצציס כשהמשתמש מעביר את הסמן על אזוריס באותה מפה. ניתן גס לסמן את האזורים הפעילים על ידי הארה, או להקיף אותס בדוגמת 'ינמליס צועדות'י. כמו תמיד, האובייקטיס צריכים לנוע רק במקומות המתאימים, לדוגמה, כשהסמן נמצא על התמונה או על אזור בתמונה (תלוי בהקשר). העשרת מצגות גרפיות קל יותר להמחיש חזותית סוגיס מסוימים של מידע בעזרת תנועה מאשר בעזרת תמונה קבועה. הנפשה יכולה להעלות את רמת ההבנה של סמל. כמובן שיש להנפיש סמל רק כשהמשתמש מביע בו עניין מיוחד (לדוגמה, על ידי הנחת סמן העכבר עליו או על ידי צפייה בו למשך יותר משנייה, אס ניתן לעקוב אחרי תנועת העין). אס כל הסמלים יונפשו כל הזמן, אז תוסח דעתו של המשתמש מהפעולה המקורית. המחשת מבנים תלת-מימדיים מסך המחשב הוא דו-מימדי, ולכן המשתמשים אינס יכוליס לקבל המחשה מלאה של מבנה תלת-מימדי בהדגמה אחת, לא משנה כמה היא עוצבה טוב. אפשר להשתמש בהנפשה כדי להדגיש את טבעס התלת-מימדי של עצמים, ולהקל על המשתמשים לראות את המבנה המרחתבי שלהם. אפשר להניע עצמיס תלת-מימדיים על פי פקודות המשתמש, אך עדיף שהמעצב יחליט מראש כיצד להנפיש את התנועה בצורה שתמחיש את הבנת העצס טוב ככל שאפשר. ניתן להפעיל הנפשה מתוכננת זו על ידי כך שהמשתמש יציב את הסמן על העצם, ובכך המשתמש יצטרך להבין כיצד לטפל בעצם, דבר שקשה לעשות בעזרת התקן פיקוד דו-מימדי כמו העכבר, שנמצא ברוב המחשבים. למעשה, אף פעם לא נגיע לשליטה תלת-מימדית בתפוצה גדולה, עד שיעמדו לרשותנו התקני שליטה תלת-מימדיים אמיתיים. שתי דרכים שונות להמחשת כלי המחיקה שבעזרתו מסירים פיקסלים ביישומים גרפיים. הסמל הוא של מחק, כפי שמוצג בצד שמאל, אך במחקרי המשתמשים שערכתי גיליתי לעיתים שהגולשים חושבים שסמל זה הוא כלי לשרטוט תיבות תלת-מימדיות. ניתן להשתמש לחילופין בסמל מונפש כפי שמוצג בתרשים. כשהסמל מונפש, המחק נע על גבי הרקע והפיקסלים נמחקים. ההנפשה ממחישה את פעולת הכלי ותורמת להבנת תפקידו. משיכת תשומת לב בעזרת הנפשה ניתן לשלוט במודעות החזותית של המשתמש. אס המטרה היא למשוך את תשומת ליבו לרכיב יחיד מתוך כמה או כדי להבליט מידע מעודכן, הרי שכדאי להשתמש לשם כך בהנפשה. יש להציג את הטקסט בעזרת הנפשה חד-פעמית (לדוגמה, טקסט שגולש מצד אחד, גדל מהאות הראשונה והלאה, או גדל כולו) ולעולס לא בעזרת הנפשה שחוזרת על עצמה, משוס שקשה יותר לקרוא טקסט נע מאשר טקסט נייח. יש למשוך את המשתמש לטקסט החדש בעזרת ההנפשה ההתחלתית, ולאחר מכן לאפשר לו לקרוא את הטקסט ללא הסחת דעת נוספת. בהתחלה, נראה שאפשר לנמק כל שימוש בהנפשה במסווה של יימשיכת תשומת לביי. ההבחנה בין משיכת תשומת לב מקובלת למוגזמת נקבעת לפי הערך שהיא תוסיף להבנת המשתמש המצוי. נתח את הפעולה מנקודת מבטו של המשתמש הממוצע, כדי לדעת אס ההנפשה תסייע לו לבצע משימה טיפוסית, או כזו שמתבצעת בתדירות גבוהה, בכך שמשהו יופיע לפניו. במיליס אחרות, לא מקובל להציב חמש מודעות שצועקות ייהסתכל עלייי. זה יועיל למפרסם, לא למשתמש. דוגמה להנפשה עס ערך למשתמש היא אתר אישי המכיל תמונת כיתת תיכון עס קישור למשהו כגון ייראה את תמונת כיתת התיכון שלייי. אס המשתמש יפעיל את הקישור, או מספיק שיניח את העכבר עליו, יתווסף עיגול ו/או חצ שמצביע על כותב האתר בתמונה. כדוגמה נוספת, ניתן לקחת דף המכיל חומר רב, שבו יש פריט חדש או חשוב. במקרה כזה, אפשר למשוך את תשומת הלב של המשתמש לאותו הפריט בעזרת הנפשה חד-פעמית. פרק 3: עיצוב תוכן 147 עָסעזוט5 זס) 616% עָסעוט5 זס) 616% עָסעוט5 זס) 616% 00 6ע/ 3 שו 6זם / וזה עוסהח 50.60 50.60 וס6.הט5 צְסַעַזט5 זסו 6% 6עסזקוחו כן61ה שזסת א6ו!6 86 0+ 6 5 חש 500.00 ./שעעעץ קשה להחליט אם השימוש בהנפשה בלחצן זה הוא מתאים, אך בהתחלה חשבתי שהוא טוב. עיצוב הלחצנים שלנו כלל שלוש שורות טקסט בלבד ורק השורה האמצעית הונפשה, ובכך היא אפשרה למשתמשים לקרוא את הטקסט החשוב בשתי השורות החיצוניות. הניסיון הראשון שלנו (שורה עליונה) השתמש באפקט גלילה בשורה האמצעית, אך נאלצנו לנטוש את הרעיון כתוצאה מעוינות המשתמשים. כחצי ממשתמשי הניסוי שלנו גילו תגובות סרקסטיות כלפי הטקסט הנגלל ומשתמש אחד התעלם ממנו משום שהוא חשב שמדובר בפרסומת. הניסיון השני (שורה אמצעית) השתמש בהנפשה עדינה מאוד ולא יצר רגשות דחייה, אך בעיצוב הסופי יצרנו לחצן לא מונפש (שורה תחתונה). מטרת הלחצן היא למשוך את המשתמשים לבצע סקר באתר. בתחילה חשבנו שההנפשה נחוצה, משום שהלחצן לא היה חלק אינטגרלי מעיצוב הדף, ולא היה לו מקום הגיוני, משום שהוא היה זמני. בניתוח הסופי, ההנפשה גרמה לרגשות שליליים אצל המשתמשים, ולכן לא השתמשנו בה. החלטנו על לחצן סטטי שלמרות שהוא לא זז, הוא עדיין נתן תחושת דינמיות בעיצוב הגרפי שלו וכן משך את המשתמש לפעילות בעזרת הטקסט שהוא הכיל. כך הצלחנו לגרום להשתתפות בסקר. 8 עיצוב ממשק באינטרנט כמובן שלרוב, יש לעצב את הדף כך שהתוכן החשוב שבו יהיה למעלה - ומשוס כך רוב הדפים לא יזדקקו לסוג כזה של הנפשה - אך לעיתיס המבנה הלוגי של המידע מכתיב סידור מסוים. במקרים אחרים, מידע אודות העדפות המשתמש או נושאים שמענייניס אותו, יאפשר להניח ביתר ביסוס שמידע מסוים הינו חשוב והדרך היחידה למשוך את תשומת לב המשתמש היא הנפשה. וידאו בשל מגבלות רוחב פס, יש להקטין עד למינימוס את השימוש בווידאו ב-65/. בסופו של דבר, השימוש בווידאו יתרחב מאוד, אך בשניס הקרובות רוב קבצי הווידאו יהיו קצריס ויציגו את תוכנס בשטחי תצוגה קטניס, באיכות תמונה נמוכה ובקצביס (₪8%65 6וח8ז=) נמוכים. במגבלות אלו, הווידאו חייב לשמש לרוב כתומך בטקסט ובתמונות יותר מאשר להיות התוכן הממשי של האתר. נכון להיוס, הווידאו טוב עבור: *> קידום תוכניות טלוויויה, סרטים או מדיה אחרת שלא קשורה למחשב ושיש לה מסורת של תצוגות מקדימות (5ז18|!8) בפרסוס. % מתן אפשרות למשתמשים להתרשם מאישיות הדובר. לרוע המזל, רוב מנהלי החברות מקריניס פחות אישיות מאשר, נניח, קפטן עְאוסחה38 מהסדרה א6זד ז509, ולכן לא יהיה זה רעיון טוב להציג ראש מדבר, אלא אס סרטון הווידאו באמת מוסיף לחוויית המשתמש. כשהגולשיס רואיס וידאו, הס חושביס אוטומטית על ייטלוויויהיי וכל מי שלא מסוגל יילעבור מסך'י טוב יתפרש כבלתי מובן. % הצגת דברים נעים, כגון סרטון מתוך מופע בלט. מצגות סוח6כ של מוצרים ממשייס מתאימות גס הן לווידאו. גס הדגמות תוכנה מוצגות לרוב טוב יותר בעזרת סדרה של תצוגות וידאו, שבעזרתן יכול הלקוח הפוטנציאלי לבדוק לעומק את התכונות שבה. הבעיה העיקרית, כרגע, ברוב קטעי הווידאו באינטרנט היא שהערך ההפקתי שלהם נמוך מדי (צולס במצלמה ביתית, לא עבר עריכה כנדרש וכדומה). מחקרי משתמשיס הראו שהגולשים מצפים למוצרים פרק 3: עיצוב תוכן | 149 (בעמוד הבא) כותרות משנה מסורתיות נראות טוב במסך וידאו בגודל מלא (הנה תמונת סטילס מתוך הסרט "6זו5%87" של חברת חש56. כמעט ולא ניתן לקרוא את כותרות המשנה כשהווידאו מוקטן לגודל השידור באינטרנט (תמונה שמאלית). ניתן להשיג איכות קריאה גבוהה בהרבה על ידי הצבת כותרות המשנה בתיבה נפרדת, והגדלתן במיוחד עבור תצוגה במחשב (תמונה ימנית). תוספת הטקסט על גבי פס שחור לא תגדיל באופן משמעותי את גודל הקובץ מכיון שהשטח השחור הוא בעל שיעור דחיסה גבוה. 0 עיצוב ממשק באינטרנט באיכות שידור בכל פעס שהם נתקלים בווידאו, ולכן הס חסרי סבלנות כשהאיכות אינה עומדת בציפיות. בווידאו (ובקטעי קול מדובביס) יש לקחת בחשבון גס את בעיית השפה, וכן את בעיית המשתמשיס עס מגבלות השמיעה. בנקודה ואת לטקסט הכתוב יש יתרון על פני הווידאו. הגולשיס יוכלו אולי להבין טקסט שנכתב בשפה זרה, משוס שיש להס זמן לקרוא אותו במהירות שלהם, ומפני שהס יכוליס לחפש כל מילה לא מובנת במילון. בנוסף, קשה לעיתים להבין מיליס מדוברות, במיוחד אס הדובר לא מקפיד על המילים, יש לו מבטא, הוא מדבר על רקע קולות אחריס שמסיחים את הדעת, או שהוא פשוט מדבר מהר מדי. קול באיכות גרועה עשוי להוסיף לבעיות הבנת הטקסט המדובר, ולכן מומל להשתמש בציוד הקלטה איכותי ו/או במיקרופון מתאיס לצורך הקלטת דיבוב. הפתרון הקלאסי לבעיות אלו הוא הוספת כותרות תרגוס (5000065), אך כפי שמוצג בתרשימים, הכותרות הללו מסיחות את הדעת ב-60/ש. שטפי וידאו מול הורדת קבצי וידאו איכות הווידאו בזומן אמיתי (507608₪05 1060/) גרועה מאוד, ולכן מומלצ לאפשר הורדה של גרסת הווידאו באיכות הגבוהה. אם יש לווידאו ערך, למשתמשים לא אכפת יהיה להמתין, נניח, חמש דקות כדי להוריד סרטון באורך דקה בו הס יכולים לראות משהו מועיל. יש משהו מרגיע בנגינת הסרטון. לא צריך לעשות כלוס פרט לישיבה וצפייה בסרטון. חוסר הפעילות הזו מתנגשת עס חוויית המשתמש הבסיסית ב-60/ו, שבה הוא זה ששולט בפעולות והוא זה שמחליט לאן ללכת. לפיכך, יש ליצור סרטוני וידאו וקול שמשך ההשמעה שלהם הוא פחות מדקה. נדיר שהמשתמש ייאלץ לשבת בלי לעשות כלוס, ולצפות במשהו למעלה מזמן זה. לדוגמה, במקוס לספק הרצאה שלמה ב-60/, שאורכה 30 דקות, בקול או בווידאו, ספק קבצי טקסט עס תעתיק ההרצאה. במידת האפשר, ערוך את התעתיק, והפוך אותו למשהו קריא יותר ממה שיש ברוב ההרצאות. שוש ס)ה! קקפפיוום זא 1!5 טעה 19 ] ז6 116 ששה 1/91'5 עשפ[ 0]מ! ק6פעש5 פרק 3: עיצוב תוכן 151 אני מקווה שבעתיד יהיה רוחב פס שמספיק לווידאו באיכות גבוהה. עד שעניין רוחב הפס יהיה שולי, ניתן לחסוך בזמן הורדה על ידי שידור כותרות התרגום כטקסט 5011 (או 6 ), ולהעביר אותן לתיבת הטקסט במחשב הלקוח: זוהי פעולה שמתאימה בדיוק ליישומון 60ומסה). ניתן גם לתת למשתמש את האפשרות לבחור את שפת כותרות המשנה, על ידי בחירת העדפות באמצעות טופס או תפריט. 5-ו ב המויב וס הט והוז חב ]זו 6 הכה הפוחה לאחר מכן, תמוך בטקסט בעזרת כמה תמונות של הדובר והקהל, וכן בקטעי וידאו באיכות גבוהה של כל דבר חזותי שקשור לעניין. לבסוף, אתה יכול להציג את הדובר ואת רוח הדברים על ידי קישור לקטע קול בן דקה של הרגעיס החשוביס ביותר. כדי לשמר את תחושת השליטה של המשתמש, אפילו בזמן הצגת מולטימדיה, נסה לחלק מצגות ארוכות לפרקים קצריסם שניתן לבחור את הרצוי מתוכם דרך תפריט. אס אתה ממיר, לדוגמה, תוכנית חדשות מהטלוויזיה ל-60//, אל תהפוך אותה לשטף וידאו מלא באורך 60 דקות שהמשתמש אינו יכול לשלוט עליו. במקוס זאת, צור חלק נפרד עבור כל כתבה. לאחר מכן, הכן דף פ6\ סטנדרטי ובו רשימת הכתבות עם סיכוס קצר ותמונה ממוזערת אחת מתוך החלק החזותי המעניין ביותר. אפשר למשתמשיס לעבור לכתבות מסוימות מדף זה. ה ד | דד ו ו 2 עיצוב ממשק באינטרנט > 7 0 5 'וססווס וד 35 ות שחך | טמא ]| >אחן - |[ המומווומעטה 506601 6חד : 8 קה חסוזה 66 16 טזונטוום 18 חס6וחשצ חן ה50886 3 01 פותפחז 8 חס זו5ח!ו 8ח011 5008 הפפטט 3 פסחפוזפקאם פחז חב בהחטפצ 18 סז 88| ₪8 ח63 131 ה ספוא 4 שוחוזוה זק ס זכ 6!סו!ו 6ו!1 וו6)ה/ קה ה10ו1ה61ח6) 16 פהוףסוזם ס+ 8|מספכ זפטחטסץ זס הבח 85הוזפו 50 5בּאעצ +ו 0פס0פ|/וסחהאסב הפפט פחד - חס הַחוחז83! חה+זסצ פסחפותפמאם פוטבּטובּע פטבּח בוטסס פזפסום זופח+ בחהבּ+5זפטחט חפפטול) פח? וחסז הסוסבּזוקפחו צְ0-03+-ץ03 הסטוח אופזם 508 80|בהשפז הפח+ טחבּ רס 6 וה זהעצע 01 16101165 עם ספחוחפבחגו ץ|זהבּחחוסק - בע חב פסה 530 +ם פפסותפוח פד 8ך .508800 5'חסזבּחסו] 8+ +ם פוחפחה+ ב פזפאו - זבפץ פוח+ פחהסו+בּזסותפוהוחסס %חובּמָבּ חסוזסב +הפספז אוב53 סחע 85סזם? תפולחם 8+ 0+ 8זטוטח+ סוב ס5ובּ חפפטס סז זוה 6ז 10 עה 21110 ה :65!זה 6 66חוזק זז + +חפתסוח ב" 35 שב טחצזום 50% 5'חס5 זפח +ם 8א0סמ5 הפפטס החד . 5+חפהפטפוחסב בחב אזסאו סוופטם 5וח פ+ 8+ טטח+ סוב 508 ". פטחכ בחב 55פחוממבּת %ש.סס.ח./ש/עעע נאום המלכה באתר של רשת אז1 הבריטית מחולק לנושאים הזמינים בקלות מדף זה. הצופים אינם חייבים לצפות בכל התוכנית כמו בצפייה בטלוויזיה, למרות שאלה שרוצים לראות את הנאום המלא יכולים לבחור בכך. השאלה אם זה מכובד להציג פרסומות מעל לראש המלכה היא כבר נושא לדיון אחר... פרק 3: עיצוב תוכן | 153 4 עיצוב ממשק באינטרנט קול היתרון הגדול בקול הוא בכך שהקול מהווה ערוצ נפרד מהתצוגה. ניתן להשתמש בדיבור כדי להעיר הערות או לסייע, ללא פגיעה במידע שמוצג על המסך. ניתן להשתמש בקול גס כדי לספק תחושה של מקוס או מצב רוח, כמו שנעשה בצורה מושלמת במשחק %ץוא. קול שמיועד להעברת מצב רוח צריך להגיע יחד עס קולות רקע חלשים, כדי לא להתחרות במידע הראשי על תשומת לב המשתמש. השימוש הברור ביותר בקול הוא כנראה מוסיקה. בכל פעס שעליך ליידע את המשתמש אודות מוסיקה מסוימת, הרבה יותר הגיוני לנגן אותה, מאשר להראות את התוויס שלה, או לתאר אותה במיליס. לדוגמה, אם אתה מנסה למכור מקומות לאופרה '568|8 18'י, הדבר הטבעי ביותר לו הלקוחות מצפיס הוא לשמוע קטע מהאופרה. למעשה, קטעי הקול עדיפים על קטעי הווידאו של אותה האופרה משוס שקשה להרשים את הלקוחות באמצעות וידאו, וגם זמן ההורדה שלו ארוך. שימוש נוסף בקול כולל הקלטות קול של הדובר (הקול יכול להחליף את הווידאו במקרה זה). היתרונות כולליס קבציס קטניס יותר, הפקה קלה והעובדה שאנשיס נשמעים לרוב טוב, אפילו אס הס יילא עוברים מסך'י. הנאוס מתאים גם כדי ללמד את המשתמשים איך לבטא מילים מסוימות, כפי שנעשה באתר היין הצרפתי. פעס היה נהוג לקנות יין מעולה וזול מיקביס שקשה היה לבטא את שמס (משוס שאף אחד לא העיז לשאול עליהסם בחנויות או מסעדות). עניין וה חלף מהעולסם בעידן האינטרנט. ניתן להשתמש באפקטיס קוליים שאינס דיבור כמימד נוסף בממשק המשתמש, כדי להודיע לו על אירועיס ברקע. לדוגמה, אפשר לציין מידע חדש על ידי קול של עיתון שנופל על הרצפה, והתקדמות הורדת קובצ על ידי קול של מיס שנמזגיס לכוס זכוכית, המתמלאת בהדרגה. עס זאת, סוגי קולות הרקע הללו צריכים להיות שקטים ועליהס לא להפריע. בנוסף, תמיד חייבת להיות למשתמש אפשרות לכבות אותס. ידוע שקול באיכות טובה משפר את חוויית המשתמש במידה ניכרת, ולכן כדאי להשקיע בהפקות קול בכל פעם שאתה משתמש בפורמט שונה מטקסט פשוט ו- ואדה סטנדרטי, אתה מסתכן בכך שמשתמשים עם מוגבלות מסוימת לא יוכלו להשתמש באתר שלך. מקצועיות. הדוגמה הקלאסית לכך היא מחקר שנעשה אודות משחקי וידאו, בו המשתמשים טענו שהגרפיקה השתפרה כשאיכות הקול השתפרה, גס כשהגרפיקה לא השתנתה כלל בין שתי הגרסאות. אפשר לעשות שימוש בצליל הקשה חלש המתלווה ללחיצה על לחצן, ומדגיש את הלחיצה של המשתמש על הלחצן. גם שימוש בקולות מנוגדיס בזמן תנועה בכיווניס שוניס במרחב ניווט, הוא נפוא. סיוע למשתמשים מוגבלים בשימוש בתוכן מולטימדיה בכל פעס שאתה משתמש בפורמט שונה מטקסט פשוט ו- !אד סטנדרטי, אתה מסתכן בכך שמשתמשיס עס מוגבלות מסוימת לא יוכלו להשתמש באתר שלך. זוהי סיבה נוספת להגביל את השימוש במולטימדיה רק למקריס בהס היא מוסיפה ערך לאתר. אפשר לתמוך במשתמשים כבדי שמיעה על ידי שימוש בכותרות תרגוס בקטעי וידאו ותעתיקי מצגות קול. חלופות טקסטואליות מעין אלו גס הופכות את המידע לנגיש יותר על ידי מנועי חיפוש ומקלות על התרגום. קשה יותר לתמוך במשתמשים בעלי מגבלות ראייה. הגישה המסורתית להפיכת תמונות לנגישות עבורס היא לייצר תיאור טקסטואלי אותו ניתן להקריא בקול על ידי דפדפן קולי, אך בקטעי וידאו עלול הדבר להתנגש עס ערוצ הקול של הסרטון. חפס/, שהיא תחנת 085 בבוסטון, ממליצה על השימוש ב-5שם (567/166 1060/ 6שק6501כ - שירות תיאור וידאו) בצורת תיאור עלילה שמשולב בהפסקות שבערוצ הקול הראשי, עבור אלה שאינס יכוליס לראות את התמונות. זה עשוי לעבוד טוב בחלק מהסרטונים, אך במקריס אחריס יהיה צורך בחלופה טקסטואלית אחרת לגמרי, שתשלב את המידע שבערוצי הקול ותצוגת הווידאו. במקרה של משתמשים עם מגבלות ראייה חלקיות, אפשר להציע פשוט תמונת וידאו גדולה או נקיה יותר (גס אס זמן ההורדה של סרטון כזה יהיה ארוך יותר). או, שתוכל לספק מצגת שקפים עס תמונות סטילס נקיות כחלופה למצגת תמונה נעה. פרק 3: עיצוב תוכן | 155 6 עיצוב ממשק באינטרנט גרפיקה תלת-מימדית כמעט תמיד מומלצ להשתמש בגרפיקה דו-מימדית במקוס בגרפיקה תלת-מימדית, משוס שהגולשיס אינס צפרדעיס. אס החיינו צפרדעיס והחיו לנו עינייס שנמצאות בצידי הראש, וה היה נראה אחרת לגמרי. אך אנו בני אנוש והעיניים שלנו נמצאות בקדמת הפניס ומסתכלות ישר. האבולוציה טיפחה את האדס החושב כך שיוכל להתמצא במישור (שני מימדים) ולא בחלל (שלושה מימדיסם). האס נהג טוב (פ2) הוא גס טייס (כ3) טוב! לא בהכרח. השימוש בגרפיקה תלת-מימדית במחשב מוסיפה מספר קשיים : > המסך והעכבר הס התקנים דו-מימדיים, ולכן לא יהיה תלת-מימד אמיתי, אלא אם כן נחבר לראשנו ציוד מוזר ונעשה שימוש בעכבר שאינו מונח על השולחן (אלא מוחזק באוויר). > קשה לשלוט על מרחב תלת-מימדי בעזרת הטכניקות הנפוצות, משוס שהן תוכננו לשליטה דו-מימדית (גרירה וגלילה, לדוגמה). %%> על המשתמשים לשים לב לניווט בתצוגה התלת-מימדית בנוסף למודל הניווט הבסיסי. עס התוספת של מימד נוסף נוספו גס פקדים נוספיס לתנועה, לסיבוב וכן הלאה. כל הדבריס הללו מפריעים למשתמש במשימה הראשית שלו. רמת ההפרדה הגרועה של המסכים אינה מאפשרת להעביר אובייקטים מרוחקים ברמת פירוט מספיקה כדי לזהות אותם. כל טקסט שברקע אינו קריא. > לרוב, התוכנה הדרושה עבור תלת-מימד אינה סטנדרטית, מועדת לקריסה ודורשת הורדה נוספת (שהמשתמשים לא ירצו להמתין לה). שימוש גרוע בתלת-מימד רוב מרחבי המידע המופשטים עובדים גרוע בתלת-מימד משוס שהם אינם פיסיים. אם כבר מעליס את הנושא, יש להס לפחות 100 מימדים, ולכן המחשה ויזואלית של מרחב מידע בתלת-מימד משמעה הזנחת 97 מימדיס במקוס 98. והו שיפור שמצדיק את תוספת המורכבות של הממשק. הניווט בחלל (כגוןו אתר אינטרנט) מבלבל לרוב בתלת-מימד, וברוב המקריס המשתמשים הולכים בו לאיבוד. הניווט התלת-מימדי עשוי להיראות טוב ב- סוח6כ, אך שס אינך מנווט בעצמך בחלל, ואינך חייב לּכור מה נמצא מאחוריך או לדאוג לאובייקטיס מרוחקיס שמתחבאיס מאחורי אובייקטיס קרובים (יוצר ה- סוח6פ יודע היכן כל דבר נמצא. החוק הראשון ביצירת סוח6ס: לעולס אל תנסה להשתמש במערכת כדי לעשות משהו. לחילופין, פשוט התקדס בעזרת תסריט ידוע מראש, שאינו נוגע בשוס דבר שיכול לגרוס לקריסה). בנוסף, הימנע מגימיקים וירטואליס שקשוריס למציאות ומדמיס אותה (למשל, קניון וירטואלי). אחת מהסיבות העיקריות מטרת העיצוב ב-66/ היא להיות טובה מהמציאות. המצדיקות שימוש אס אתה מבקש מהמשתמשים יילהסתובב בקניון בתלת-מימד היא שזה בא אתה מציב את הממשק שלך בדרך להשגת מטרתס. במקום טקסט מסתובב. בעולס הפיסי, עליך להסתובב בין החנויות. ב-60/), כמובן, השימוש בצבעים עם אתה עובר ישירות ליעד שלך תוך שימוש באמצעי ניגוד חלש לא עוזר, כפי ניווט שמתאימים לצרכי המשתמש (בהנחה, כמובן, שנעשה כאן בכותרות שארכיטקטורת המידע טובה). 0 6 ינכ 0 | 5-5330ט4 | 55306-פט4 | 55506-פט4 | 66004-פט8 | 57700-פט4 5ח!] | 5סחחסזם | 65 וז | 094 פב | 065 898 | 494 ₪ שחס5 5 ץד | .6ה1 860700165|₪ שְח50 1999 ₪ 500.00 ./56.//ע/עע פרק 3: עיצוב תוכן 157 8 צואם זאטס 54 סאו? פא 63 יק / אוד ואו | "הו 3320 7 או שא ממ 8061085/5.0077/כן./ש/ע/ע 8 עיצוב ממשק באינטרנט 5 זפאגק "וס 49 ו עה שקקאק 0 ₪9 2 = ל ה = | | 5 זפאגוק וטסע + ח+חו ליי א ופפ מבט על שכונה ב- 6503515הוב3!ק םה זאהס או0נ/או8ס: 5 050505805 פצפה ןפג( זפאגו|ת זטס צ + +חו + . 3 . א צר %/ ו 4 +01 << - . ₪ ו 7 0 שו בו = 5 | ן ב = ו 4 5 | 0% >- א 8061085/5.0077/כן./ש/ע/ע מבט על בלוק בניינים ב- 6503515 3|ק מעבר דרך 6008515ח8|ק מתי להשתמש בתלת-מימד מנקודת מבט של האי כולו (עמ' 158) דרך "מבט על" השימוש בתלת-מימד יכול להתאיס כשאתה זקוק קרוב של בלוק םעמ לאובייקטים פיסיים חזותיים, שיש להבין אותם כמו ל שהם. הנה כמה דוגמאות לכך: להגיע למגזין 6מְס6ק. זהו *%> מנתחים שמתכנניס היכן לבצע חתך בחולה. גוף הק וי ור ה החולה הוא תלת-מימדי, ולמיקום הגידול יש באמת יש לך תחושה שאם מיקוס תלת-מימדי שקל יותר להבין אותו מתוך תפנה לאחור, מודל תלת-מימדי, מאשר מצילום רנטגן ה-65וחוד 61655פַח 105 יהיה דו-מימדי מאחוריך? חשוב יותר: האם זה יישאר לך בזיכרון? % מהנדסי יציקה שמתכנניםס תבנית יציקה למפעל פלסטיק, ומעונייניס לראות איך הנוזל זורס ומתפשט בתבנית. % חוקרים בתחום הכימיה שמנסים להבין צורת מולקולה. % תכנון סידור ביתן בתערוכה. לעיתים, אובייקטיס פיסיים נראיס טוב יותר בשני מימדים. מערכת עזרה שמסבירה כיצד להחליף דיסק קשיח בתוך המחשב תהיה טובה יותר אס יהיה בה שרטוט סכמטי מהנקודה המדויקת שמצביעה על המקום הנכון. לתילופין, ניתן להשתמש בווידאו המציג טכנאי שמסיר את הדיסק הישן ומכניס חדש. פרק 3: עיצוב תוכן | 159 כלכלת תשומת הלב ה-60/ פועלת בשיטת כלכלת תשומת הלב (ץוחסח0ס6= הסשח6אה), בה המטבע הנהוג הוא זמן משתמש. על מה הם מביטים? לאן הם יחליטו ללכת? האם הם מתכוונים לחזור בפעם אחרת? במדיה המסורתית, שאלות אלו נענו לרוב בכך שהמשתמש יישאר. אם הוא קורא מגזין, מחיר השגת מגזין אחר גבוה יחסית, הן במובנים של כסף והן במונחים של זמן. באותה המידה, היתרון הצפוי מהשגת מגזין אחר נמוך יחסית, משום שהמשתמש כבר מנוי על המגזינים שמעניינים אותו. ה-65/ משנה לגמרי את המשוואה הזו: מחיר השגת אתר 60/ אחר נמוך מאוד, והיתרון הצפוי מהשארות באתר הנוכחי לא גבוה במיוחד. העקרונות השונים מובילים לדגשים שונים בכלכלת תשומת הלב. תוכן 60/ חייב לספק יתרונות מיידיים למשתמשים, או שהם יעבירו את זמנם באתרים אחרים. 0 עיצוב ממשק באינטרנט הווידאו הוא דו-מימדי, בהשוואה לתמונות, אך הוא משתמש בקול כדי להבהיר את הפעולות (לדוגמה, קליק כאשר הדיסק נכנס נכון לתוך התושבת). הקול מהווה מימד נוסף שלא מעמיס על הניווט משום שהוא מסונכרן לווידאו. לפני שאתה עובר משני מימדיםס לשלושה מימדים, נסה לפשט את הבעיה, ובדוק אותה על תצוגות דו-מימדיות, כולל סידור ייסיפוריי של טבלאות שונות. לבסוף, יישומי בידור וכמה ממשקי לימוד יכוליס לנצל את היתרון בהנאה ובטבעו של המימד השלישי, כפי שהוכח כבר על ידי משחקי פעולה רבים מספור. שיס לב שהשימוש בתלת-מימד טוב במשחקים, משוס שהמשתמש אינו מעוניין להשיג מטרה כלשהי מלבד הנאה. כמובן שיש לתכנן ממשק טוב יותר מזה שיש במשחק אסספ אס המטרה היא לחסל את הרעיס במהירות האפשרית. אס המשחק היה דו-מימדי, הוא היה נגמר תוך כמה שניות בניצחון הרעיס כל פעם. למרות שעיצוב דו-מימדי אינו מתאים כלל למשחקים, ילדי מרותקים שעות ארוכות למשחק פוקימון דו-מימדי ברזולוציה נמוכה, בצבעיס חיוורים ובקולות מצוייצים. מסקנה התוכן הוא במוקד תשומת הלב של המשתמשים. הוא הסיבה לכך שהם עובריס למצב מקוון, והוא הדבר הראשון שהס רואיס כשהס טועניס דף חדש. תוכן איכותי הוא אחד משני הנושאיס החשובים ביותר בשימושיות ב-69/, והנושא השני הוא השאלה אס המשתמשים מסוגליס למצוא את הדף שהסם מחפשיס (וזהו נושא הפרק הבא: עיצוב אתר). ב-60/, משמעות המונח ייתוכן איכותייי שונה מאותו המונח במדיה מסורתית. איכויות ההפקה חשובות פחות. כמובן שיש הערכה לכתיבה טובה ותמונות יפות, אך אלו כבר אינס הדבריס שמאפייניס את האיכות. במקוס זאת, השאלה הנפוצה שהמשתמש שואל כשהוא בוחן תוכן היא יימה יצא לי מזהזיי ו-"איך זה יעזור לי לפתור את הבעיה שליניי. משתמשי ה-פ6/ מונעיס על ידי מטרות ומתגליס כחסרי סבלנות. שני מאפיינים אלה מחייבים שהתוכן יהיה מעוצב כך שהוא ייתן תשובות מהירות ויהיה שימושי למשתמש. פרק 3: עיצוב תוכן 161 עיצוב האתר לעיתים, עיצוב הדף מקבל את מרבית תשומת הלב. בסופו של דבר, בדפדפנים של היום, ניתן לצפות רק בדף אחד בזמן נתון. האתר עצמו לעולם לא יוצג במלואו על המסך. אך מזווית השימושיות, עיצוב האתר מהווה אתגר גדול יותר, ולרוב הוא חשוב יותר מאשר עיצוב דף בודד בתוכו. פרק 4: עיצוב האתר 163 (בעמוד הבא) חשבתי שתופעת שלטי "ח0 0005076 זס0ח(" המרתיעים נעלמה בסביבות שנת 1995, לאחר שהובהר שכל אתרי ה-80/ נמצאים תמיד בבנייה. אך לרוע המזל, שלטים אלה ממשיכים להופיע בצורות מתוחכמות יותר. אל תספר למשתמשים מה אין לך. זה יגרום להם מפח נפש. אל תפרסם אתר 80/ חצי גמור, הרחק אותו מעיני המשתמשים עד שהוא יהיה מספיק שימושי בשבילם. אפשר לצרף כתבה קצרה שתדון בתוכניות עתידיות או באטרקציות מתוכננות, אך שער הכניסה הראשי לאתר צריך להתמקד במה שהמשתמש יכול לעשות כאן ועכשיו. 4 עיצוב ממשק באינטרנט ברוב המקרים, לאחר שהמשתמשים הגיעו לדף, הס יכוליס להבין מה עליהס לעשות בו. אס הס יקדישו לכך מעט ומן (למשתמשים, בדרך כלל, אין זמן וגס אין רצון ללמוד את הדף לעומק, ולכן יש הרבה בעיות שימושיות (שווופ58ט) גס ברמת הדף הבודד), אך המשימה הקשה היא להביא את המשתמש לדף. במחקר שנערך על ידי (0סס5 60ז38 ועמיתיו, המשתמשים התחילו את הסיור שלהס בדף הראשי וקיבלו משימות פשוטות. הס הצליחו למצוא את הדף הנכון רק ב-42% מהמקריס. במחקר אחר שערכתי יחד עס זפוט >זגוי!, אחוז ההצלחה היה נמוך עוד יותר: רק 26% מהמשתמשים הצליחו לבצע משימה קצת יותר מורכבת (במחקר שלנו, המשימה היתה למצוא הצעות עבודה ולהגיש מועמדות). הסיבה לאחוזי ההצלחה הנמוכיס במחקר שלנו ביחס למחקר הראשון אינה קשורה לכך שבחרנו באתריס עס עיצוב גרוע במיוחד. להיפך, חיפשנו אתריםס של חברות גדולות ומכובדות. ההבדל באחוזי ההצלחה נובע ממורכבות המשימה. 42% ההצלחה היו התוצאה הממוצעת לגבי טווח של משימות בהן המשתמשיס התבקשו למצוא תשובות לשאלות ספציפיות הנוגעות לאתר 60/ו. במיליס אחרות, אלו משימות שקשורות לדבר שה-60/ מיועדת לו. בניגוד לכך, 26% ההצלחה היו הממוצע כשהמשתמשים ביצעו סדרה של צעדים, כדי להשלים את משימת איתור הצעות העבודה והגשת המועמדות. אס המשתמש דילג או לא ביצע אחד מהשלביס במשימה, הוא לא היה מסוגל להשליסם אותה. בסופו של דבר, אינך יכול להגיש מועמדות לעבודה אס לא מצאת את הדרישה, וכן אין תועלת באיתור הצעת עבודה אס טופס המועמדות מסובך מדי. הבעיה נעוצה בכך שיכולת השימושיות של ה-60/ יורדת ברגע שאנחנו מסיטיס את המשתמשים מהדף הראשי וגורמיס להס להתתיל לנווט או לפתור בעיות. ה-69/ עוצבה כסביבה לקריאת דפים, ורמת השימושיות שלה לא השתפרה באותו הקצב בה המשתמשיסם נאלציס להתמודד עס רמות סיבוך הולכות וגוברות. לפיכך, יש לעצב את האתר כך שיהיה בראש ובראשונה פשוט, ויכיל כמה שפחות הסחות דעת וכמה שיותר ארכיטקטורת מידע ברורה וכלי ניווט מתאימים. וכ 3 37 ]0 שחוא 5זחטוז || .מזס60 חזז53 1999 5 130 80ז80|510ז פזבּ סטס! חזטז53 8ח1 טח3 תזטופם .600080 חז8ם צסווסק עסבּשוזק 581/77.60 ./ע/עעץ 06 6מא שה 6חץ 6!וחצו 085!|סח 58 זס+ 60580 5| סזס5% 6|ססג פחד סחו|חס 06 866רח 60 ץ ח1!06 אזסצו 85| חח|הרח-זס)וסרחסס ח|808 086% 8רחסס 0|]6856 .זפעם הפר ז0ז8כ 8זסז5 6|ססג .6ז0ל5 40016 06 הסטסזחץ זססזס זווסץ 808וס 50 5 עזהטחפנ 6 8+ 0+ שרח פעפח ||58 טסץ ,6ופ8צו סז זחפצו ז'חסם טסץ + ח68 סחאו 058||97 6|מסג |68ס! 8 סחוסופוע צם +תשח 0 זפפץ אופח ,0 65 0ף ספה טסץ ||8 הפוצו וסץ צץ|מסשפ חס 60086% 50 זחפאו סח8 זפסזס זוטסץ 60ס8|ס צ880ז|8 סצ'טסץ + ,558005 6 ,10 ?+ 08 51076.800/6.001 פרק 4: עיצוב האתר 165 מה החברה הזו עושה? הפשטות טובה, אך הדף הראשי צריך להכיל מידע כלשהו. הדף הראשי הדף הראשי הוא דף הדגל של האתר (ושל החברה או הבעלים שמאחוריו), ולכן עליו להיות מעוצב בשונה מהדפים האחרים. כמובן שהדף הראשי והדפים הפנימיים צריכים להיות באותו הסגנון, אך ישנס הבדליס ביניהם. לדוגמה, הדף הראשי לא צריך להכיל לחצן סוחס (דף הבית/עמוד ראשי), משוס שלא נעיס ללחוצ על לחצן שמקשר בחזרה לאותו הדף. בנוסף, לדף הראשי צריך להיות לרוב לוגו גדול יותר ומיקוס מרכזי של שס החברה או שס האתר. המטרה הראשונה של כל דף ראשי היא לענות על השאלות : ייהיכן אני נמצאזי + "ימה האתר הזה עושה?" שאלות אלו דורשות גירסה גדולה וישירה של השס. התשובה לא צריכה להיות הצהרה עס מילים גבוהות (ייאסטרטגיות'י) אותן רואיס לעיתיס באתרי ממשל, אלא העיצוב עצמו צריך לתת אותה ולהסביר איך האתר יכול לשרת את המשתמש החדש. למשתמש חדש, התשובה לשאלה יימה אתר זה עושהזיי עשויה להיות הפונקציה החשובה ביותר של הדף הראשי, אך לרוב המשתמשיסם האחרים, הפונקציה החשובה ביותר של הדף הראשי היא לשמש כנקודת כניסה לסכמת הניווט של האתר. לרוב, סכמת הניווט תהיה במבנה של תוכן ענייניס היררכי (כמו של ספר), אך בהתחשב בארכיטקטורת המידע, יכולות להופיע צורות שונות של נקודות כניסה. ו ו 0 זסוזס!כא= +סהוט)ח! הפו ס/שסוע 0051 5 החסס.ססס5.שועשושו וזוס6.+50סו6/וח.שרשעו החסז] 080/העס0 10 חס 6% 5000.6070 ./שעעעץ 6 עיצוב ממשק באינטרנט חסו1סט0סזוח! חה - 0סז50 2 | וחוזס!ח| 1998 2 ש6וע₪ והטחחה 1997 2 5 6000 והטחחה 1997 2 חסוזהותזסזח! ז6510ערו 2 65 50700 2 חסוז הח סזה! פעוהסזה .2 5 זוע 00 2 9 ,24 5%ש6ש , צְַ65083טח ב זי !רו ס6!6 עו :וי וחסס. 6608005 ו הו 636 3 0056 ו פחץ הח |!וא טוסץ פיופחצו 15 זפחב!ק עץ"ום זה בן 7 זס] 0065507185 חה 031187165 10 1181 65והה קוח סכ חהש טסץ 50 8180 15 5118 הסבם . 55!פזוועש החוח:ץיוס טפן סחסח וב !60 .סז צגוט 0+ עְחה סש ב 5₪ססהש ץ!ו5ב פן סק 6070!855 6000%+סצ/ קסזכה | שוףוחו וטס הזוע . טחו!חס קסח5 0+ צ635 1% 6>בוח 6 /ון 1681/85 1 ₪ |[0+ ז118ס 51185 השועש סרא |!!'טוסץ ,רה8ז5ץ5 טחוזהין 4 6 | 508180 הזח ,הַחוזסטיוס פחז!חס 8יוט 50 ,+וסם 5 וסוס +5ווסן 6 הַחוזהיז הז ,והפח+ ₪פקקסה5 1851 העבה פצו זסה וס .5 שסו!סק חיוטזפז/ צזחהידוה שש וופח+ זהח/ע טחה ,והפה+ פטהנן ו ו צֶבּ צצ-סשד 5 פקוו ץחה הסט עָט הטיו 59 זס זם ,צז0ף +08 3 חם אס!!ס 5%[ ,הסיוה59 יוטוסץ חוחָפם םס צוחופת החוס+ ה0ז 56 8+ הזוע ץחה קוחס6 0 הסוב 5 5 נוחה 1107185 |581 צָהה קוחסס "וטוסץ 5ססכן | 0 חס 5%806! ₪ם 0+ 8א!! טוסץ ט!טסעש 157סטסו 55פופיוועש וס אסוום הפחד ?81חב!0 ע"ום זה פן 7 11166 ב6ב1/ו 181161 זב 6כקם טק ות 0 עקר 8 סד 110% וניכ בה וידי יי ה1) 53/0675 501660 ב [678 61/6%) = אזסעש)6ח 5'ז516הוהטסצו 6חד 51315.607 5267 זו 2 שד 2 ב 60 .0/0/8066 03 ./ע/עעע הרושם הראשון מהדף הראשי הזה הוא שזה עשוי להיות אתר לרכישת קפה או הורדה חופשית של תוכנות, כשלמעשה זהו אתר שמוכר סוללות. בדף אין אפילו תמונה אחת של סוללה, והמילה "עְזסא8" אינה מודגשת בשום מקום. שם האתר נחמד ובולט ומתאים לאתר שעוסק בסוללות, ולכן העיצוב אינו נורא כל כך. בנוסף, קל לאתר את קטגוריות הניווט והן מסודרות בסדר לוגי. אך מדוע לבזבז שטח על פס צבעוני עליון שמכיל את התאריך הנוכחי? באתר שמתעדכן ללא הפסקה, יש יתרון מסוים בשורה תחתונה שמציגה את תאריך העדכון האחרון. אף אחד לא יעשה שימוש בתאריך הנוכחי. פרק 4: עיצוב האתר 167 (בעמוד הבא) באתר זה יש יותר מדי פריטים מיותרים ("זבל"), במיוחד אם נתחשב בעובדה שאנו רואים כאן רק את החצי העליון. אך הדף עדיין טוב משום שרוב המשתמשים יימשכו מיידית לחלק האינטראקטיבי של הדף (טופס), שם הם יכולים להקליד את המידע אודות הטיול שלהם ולעבור ישירות לרשימת טיסות זמינות. 8 עיצוב ממשק באינטרנט לדוגמה, גולשיס שמבקריס באתר נסיעות ירצו לרוב לבצע הזמנת כרטיס טיסה, ולכן אפשר להתייחס לכניסה לרשימת ערים מהן מתבצעות המראות ונחיתות כנקודת כניסה עליונה טובה לאתר כזה. הדף הראשי הוא גס המקוס לחדשות (5או₪6) ולהצעות שיווקיות (פחסוזסוחסזק |506688) שאתה רוצה להביא לידיעת המבקרים. אך זכור שרוב הגולשיס מגיעיס לאתר שלך כדי להשיג משהו ספציפי. נדיר שהם יגיעו אליו, סתס כך, רק כדי לבדוק את המוצריס שאתה מעוניין להציע למכירה. לפיכך, יש להגביל את שטח החדשות ולהשאיר חלק גדול של הדף בשביל אמצעי הניווט - פרט, כמובן, לאתריס שעוסקיס בעיקר בחדשות. באתריס כאלה, המשתמשים נכנסים לרוב לאתר כדי לראות מה חדש, בלי להתעניין בכתבה מסוימת מראש. גם באתרי חדשות, עדיין חשוב לאכור שחלק מהמשתמשים יגיעו אליהם כדי לאתר כתבות ספציפיות או אירועיס עכשוויים. לעיתיס קרובות הס ירצו למצוא כתבות קודמות שכבר נעלמו מהדף הראשי. יכולת הניווט נשארת בעדיפות גבוהה בכל מקרה. רוב הדפיס הראשיים וקוקיסם ליכולת חיפוש בולטת, משוס שרביס מהמשתמשים רגילים למנועי החיפוש, והס אינס רוציס להתחיל לנווט באתר כדי להגיע ליעד הרצוי. באתריס בהס החיפוש מהווה מנגנון גישה ראשי, כדאי לכלול תיבת חיפוש בראש הדף הראשי. באתריס אחרים ניתן להסתפק בקישור פשוט (אך ברור) לדף חיפוש. בסיכומו של דבר, על הדף הראשי להציע שלוש תכונות: 1. מדריך של אזורי התוכן הראשיים באתר (ניווט). 2. סיכום החדשות או הצעות השיווק החשובות ביותר. 3. אפשרות חיפוש. כשהדבר נעשה כהלכה, המדריך והחדשות יוכלו לסייע למשתמש לדעת במה האתר עוסק. הסתכל תמיד על הדף הראשי מזווית המשתמש, שאל את עצמך 'ימה האתר הזה יכול לעשות בשביליניי וזכור את השס והלוגו. שְחוסקוח5 םםח- .16 אוו ו 26%) וה3.00ו60קא= | טשה | שחו | מקאחו | האחהםה8מוצסוטוה | 0שובבנמה | בנג | הב 0 סז 50 2 5צ זה ה ה וה00] 2 4658]7/8 פוה ג 200% זסז קסחפ ךְ 5 1 158 7ש80] :זסחו"] 6 זה קוזזויחווסת 9 זווס עצזד שחזוד כ(" שטוו ההוזהקסס חזסז1 פַחו68%. 1 ופט | ]5 בחוחסטם] 8 | 5 5 8 פ1סמב 5 63500 ו צ)וח3 = 8 |8/8זך שחזוד כ( סו ההותזוגוסת סז 8חוס) ך 8חשם] 8 | ₪ 1 .18765 0080 מוזוסחגוסז 8016 10 60וחזו! ו 5680 פוחדך ... פחסווטס 568108 6זטו | 5 פהחן ]וס 0086 ?ע6וסחז זווסץ זס1 051 6ו!1 611100 ווסץ 6 זת :6 והקהוס: 6 וה] .088 !מס 51 סרח זטוס חס בוטח פזבּ 5זפהסן5ס זפתום +הח1 1 ההז צא או 5זזחט! עו *) זם ,8580/80 880החסזטס זטסץ פזשט זס אוסו/ .5מוז הפחחפום 6 עו 3 5 זז |1138 זטסץ 00318 סו זזה 30601 החפ .080388 חב 5|הוזזב +חטוח חס 518105 פזטחוח-8ה10-1-קט ₪88 סזח| וחטוו= .0185 1801118 זטוסץ 10 13785 אוס! חס 818 עו פע 88 3 868[/8ה 36 ד פזבּ = .185 זסץ קרח חב 366015 זפץח חפט פיז זטסץ א86זד שחו פב פווות אסוזהאוזפפסם פספאהשזג5; 1 65 זסחווח חס סזחו +8165| 106 טחו-] 5ח0ו8ח6511 |6/י8 1 +68 זט זסרווס ּ חסו8ז 8 +0פ|פט + 108 תפז 1ם זטסן "360 ג :עוה1] ,6166 זסו] סחזה 8חז בחסו3 61 ספוות 5ז הוה זאפהה 60 פהפא |פצהאז מז 080ז זר 5 זאפח זטסץ ההוש טוט זבּ|טססם ז5סרח פחז הזור 8 סח 3 חבט זב הטסש בוח 0 [הפסזפם 30 סז פע מש חב 399 זסז 13185 צבּעו-8ח 0 מ וז 3 5800 10317 פחסט ‏ פזפחז חפפם 88301005 פזסוו ו0ס.6006078 ./ע/ע/ע פרק 4: עיצוב האתר .חפ סז סף ב 1 5 | 6 % סו סט 5010166 01166 9 חס 816טטט אסוטט 8 ₪680 6 10 65זוו)158 עצפח 685/61 ההוהחפום טוש סקוו 611510161 ץזוזו560 חפ צספעוזק * 6 870 01 * 11661 65| . עשיסח חוסצ * .5זו! 24 |/08 חס 15ח016 " 561 6ח1 חס שצשצ] * 58 .5.(!-ווסו1 818 2/1517 חן 5165 זגוס 058 צח8חז267) , 80808 ו ו 2365 בייוי שי שר יי פרהסו 3 פהוצָטט < יוטסץ )ועו .. 22 / / 109 2 91 - גוחה עלנום שוש" (. שזסרח זנוס שחו=) !פפסחוק מְהוקְקות5 צס ₪ זאסס א א |פטוזם 65% סשכ חזוו והז 356 חוטש 6חג שחת ש6וטפזם = 4 עבשו 6351651 סחד 0 8 !6|טפחז זפק 2,99+ 35 ווס| 5 !0365 פט!3/ און= תוי 5306 * וסשם 3 +חפז ס+ ₪ 506 5 | 15155 = הד 0000055 | 555 ןפת עושא | 1--501 |[ צסם60 | אסדד60ת | 5/שם1ע5א פטס | ₪05 ה60.א61 10 6 60|פעצ וז 10 065 כועכ 3,700 זסעס וםש סא ה זוז 10 העש 51651 סווד ופ הו סוקופ ה ח! ח7ו5 ?זסא45 הַהווחטזפ | 3 6610 6זה 5|הזוז36 סע ז5זו:] זווסצ טוסץ ]1 ?00887 |3ו5086 3 חסואו סַהוםטסח5 ( 16 שהוחחסה . ( 008 שהווחפה. 3 חסז 0008 0987 |3ו5080 3 פצב סח , !ובחחפ זס %ה8 58 30/8 , הססטוסס סרח 685 ". והפטספה" אסווס חב אוסופם סו ,350 רסו 03760855 פר ססחו 6 הבחססבּ 8|טו58חם 6חפ||פסאם פזסות 588 05 פס סטב הסט ב הטיח סחובּחפסוופו | 830 סחב הפצט5 . הוחס בחב |וח0 בום פחד חו 6 115 01 עווזסוו 1 | והפפספת א 3 , הוחחסה ?17 008% |508013 3 פצבּח ס'חסם ( 05 חופת ו חש סט בוטר אסו|₪ ?תפוח ב עֶם ספחטזפת אד |מפאת זז 5סשס 3 ספזח זו | ע ?58טוסת זנוסץ חו זסלססט 3 הזפתל 15 "בסחפם!!!פלח!" פזסוח 68% בחהב 5005 56זו 5 טח 50פזם | הסחסה 0085 זגום חו ל'הפתהוב+ פסחט 1 -- 61181 סעכ עוסע . 05חוח68בּאום . ח0ם80!|ם6 |1-2-3 35 ,835 35 165 חססב ו סם חב או וסץ 05 8 אס 7-1 (980 330 0 הַחהוממ0ח5 5378) ווס5ז6שווה 5 5 6זסווופוו :1617/16 ?וד 53/0 סוו/ע : 0 סחב 8'ו|-|83 5'פזחד פססוום חס אוסחא גוס אסם!ובּחח זטסץ חו פצוחב |ו'צְפחד .2 הססבזוס5חו 8*ון|-|8פז סם ,ו|פעל ?ץאסגון 88 1 סס" זס הפר 688 .0355 3 ₪ס 2 חורסושו + 5000855 ₪18 בהוחפט טסץ ח03 "?אחטם בצ |אספשו || ב ץְספוחסס לס 18 5 פויסוח ₪8 הבח , , פס זםת . ה'וסותחפוה 1 הפוסו זטוסץ 85%ד ?וחסז+ 0 ו ב 50 לת 0 3 זנום 880 , 5000 פטופחו 4 0 זטום שואי 10 ובוח 08 חו אב החפרם מס הטוע עום!עופסחו פצו5ט|סאם 5 פומבּסספהַזס!ח/ .ה750ז09ח 85/ זסספזום בזסותהפוח סח 5 עד 38 הַהוהססבוח !חווד עו וס 6 ז610 65ו10 צוסועס ז "אפח זנוסץ 0 סטם אזסם855%וום 608 פאבד 5% סשס אופח זטם הסוצו 58בחסזגום פשם עה 20651 6 הזו :110106 0105 הזוח סו הח !החהּזטסזם פצחזס זטוסץ 0 85סום/ב? זטס ה0150360 עו|בפוטום ||'פ/ ?65סום טס פזסות סחבּ > [שוסח שש חבו5 . צְסחס₪ צזפצם אסטחו ")| 5 ז0 זווס ?7 צע0)] 10 11666 הוווסה 8 סטוסטב פזסוח עוסחא כס טחב שש [פזופר] 6%ו| ?55078 החסס או|-480] 090 0416 | | 6וסו₪ וז | ₪6 6הוחוסה 2 ( ₪6 6הווחסה בחו סף מ[בח5 ב שו 85אב וחסס. או[חספצ] 2 >'חסם טסץ הפחשו חפעם , פאו| וסץ פפוצסות 1 8 6!058 חב פחחסח סו פאבד + פוץסו 80ס3 חנו לפסוח פוש חן סז טהואסט! זב סע סהח/ו אוסחא בחהב בוטכ 008 58גובּס' ‏ 5אוססחוצו | ]8!והחטך סחב צפהסס|6 050708 ,1998 עס ה סוה 6016 וו .הפס 68 אססז סח 1830 .3 וחב 0322|8 קטמם! סש .00% ./ע/ע/ץ באיזה אתר אנו נמצאים? ברור, מעל לכל ספק, שאנחנו ב-אוו-6%. שנית, מהי מטרת האתר? ברור שזהו אתר שמשכיר סרטי סצפ. אך אם תסתכל על החלק העליון של הדף ותוריד את המבט למרכזו (כמו שרוב המשתמשים עושים), אתה עשוי לחשוב שזהו אתר שעוסק במאמרים על סרטים. רכיב העיצוב הבולט ביותר הוא ללא ספק תיבת הקלדת הטקסט שמסומנת בשם "וח6066" ומיועדת רק למשתמשים שברשותם קופון מיוחד. הוראות הקלדת הקופון לוקחות יותר מדי שטח בדף הראשי. היה פשוט יותר לספק קישור לדף מיוחד שם התהליך היה מוסבר טוב יותר. בנוסף, שדה החיפוש (וססחותאו!]) קצת נעלם אל תוך סרגל החיפוש, למרות שהוא יותר חשוב למשתמשים מאשר הקופון. עם זאת, הבעיה הגדולה יותר באתר היא השטח הקטן שהוקצה למדריך התוכן יחסית להצעות המיוחדות. אין ייצוג טוב לתוכן האמיתי של האתר (3,700 מוצרים). העיצוב מקבל נקודת בונוס על אזור ה-"1-2-3": תוכן פשוט וקל לסריקה שמסכם את תהליך ביצוע העסקים באתר. 0 עיצוב ממשק באינטרנט שני אתרי התעופה (בעמודים הבאים) מציגים שתי גישות שונות לעיצוב דף ראשי. אתר פסחווזוה 60אח מתמקד בגישה קלה למרכיבים (קטגוריות) הרבים שבאתר, ואילו ןזוה ח68וזסוחה מתמקד בגישה קלה לשני מרכיבים חשובים: כניסה לחשבון הנוסע המתמיד ואיתור טיסה זמינה בין שתי ערים. הגישה של פסחווזוה 0סזוח היא המועדפת, אם שימוש הגולשים באתר מתחלק בצורה שווה בין המרכיבים השונים. הדף הראשי מבהיר מה ניתן לעשות באתר, למרות שה"קיצורים" לא ברורים ואינם מדגישים את המרכיבים החשובים שבאתר. השימוש בשתי רמות של קטגוריות משחרר את המשתמשים מהצורך לסרוק את כל המרכיבים. אני הייתי מעדיף להשתמש אפילו בשלוש רמות של קטגוריות במקום שתיים: לדעתי, האפשרויות "6567/8005" (הזמנות מקום) ו-"פטוק 6386ו]" (תוכנית הנוסע המתמיד) צריכות להשתלב לקטגוריה אחת ברמה עליונה, משום ששתיהן מתייחסות לטיולים ולנתונים של משתמשים ספציפיים. שתי הקטגוריות הנותרות מכילות מידע כללי אודות טיסות והחברה. הגישה של 68חו!ז1 חפסוזסחחה מצמצמת את תצוגת תכונות האתר לתפריט נגלל (טחסח חצוסס-ווט₪) שקשה לנווט בו: המשתמשים אינם יכולים לצפות בכל האפשרויות (כמו באתר השני) משום שהם יכולים לפתוח תפריט אחד בלבד בכל זמן נתון. בנוסף לכך, רבים מהתפריטים ארוכים עד כדי כך שיש לגלול אותם, כלומר, המשתמשים לא יכולים לראות אפילו את רשימת האפשרויות המלאה במבט יחיד. לפיכך, הגישה של פשחווזו חהסוזסחה טובה רק אם שתי האפשרויות (כניסה לחשבון נוסע מתמיד ו-איתור טיסה זמינה בין ערים) הן אלו שחשובות ביותר למשתמש. שים לב, שני האתרים משלבים בהצלחה מידע אודות החברה יחד עם יכולות מסחר אלקטרוני. אין ניגוד באתר שמשרת את שתי הפונקציות הללו כל זמן שהמשתמשים יכולים למצוא במהירות את הקישורים לרכישת המוצרים. 5חו!זוה 60אוח שוגה כאן במידה מסוימת, למרות שהיא הציבה את קטגורית ההזמנות (05ח0ו₪6567/80) בתחילת סכמת הניווט שלה. פרק 4: עיצוב האתר ‏ 171 | 60 ]|* 5 ססואים!זס ל הסוח 50661815 6זה-- )שוחו ווהשה] זס+ 015600%5 [3 508 !ב חס|ה ,נו!ט!טח0ו רחסז) חב 60 |פעב 6םב בב פזב 60703 0ח3 ושב1 חס 01/68 .12 561 רח552%6 |פחט .5|ו06%3 פוסרח זס+ אח!!] פר+ 4 65טטטסטזק אחש בח חח עוס1:51] 5% פוטס 1 פווחסם 4,000 חזהם 60%ו+ קווש חהטסזץ 15% זטוסץ 356 תסוטק 0 פעוםספז חב הח3|.60 לב 5ב 5 | ץזב 5 8ַהַ53!ו₪ | 50305 סחטום | 5פזב=-₪ | |פצבזד הזבשום טסץ חפתש 55!ורח 0105 ִהַב5|:] ,חח חס |פעבל זטוסץ 5%5!קרחסס .50005 60אח!! וס 655ז5%2 ב66וחנו + כ ו ₪ עָה3כו 60 וטס + אסקקט 8/.001ש./שעש/ץ 2 עיצוב ממשק באינטרנט ]- 2 זוה 106 חן בבנבו וי %חפ הו3+%ח5 5 00סת רחטוזס קרח= 5% תבו נ ו | 35 פטס ב 5 ₪5 וז ו !הצנזווהּ חהסקט 5 560% 3 35 +וסקזות סזח1 מִהַבּבָהָבּ5 5 ו טס תפז 5" 5 חק ופזס- רַחוַּס.30%8|5/1ן 5 סבו זב רת רחנ5 שִהַב 8:5 5 001560 3 315 םחלב ם ו 100% | 607%306 5 8 סוסה ה 65 זווזה6-] הז0. והו שא סוה זסזוז! זסוזה ז360151 5 חסולקרת 55 |פטב ד טבש ז35%+ הלוש הַח3|0 ,פופה 5 מה 8!5 זטוסץ 0+ %55בקט ז80015%8? 60 שסת חז63/ [%ח 3060 בושל 6+ יח וטס זפבחט ,8|5358ץ 6567/8005 [פשבץ ד הזב אית 58 הסזב 56 1:00%= מו 5וד הַחוא36ק 35 5 35 ס6טסת 5 |3 5280 5 5 אוד 5 |פשבד חול חח 60 66וחו 3635 / )חנו = 1וסטזוהּ 106 21 5ב ל+זסקזות 0+ח1 פִהַבּבָהָבּ5 08 8517855 מ75 0 5 וח 550 5 63726% ₪50 5 |3 5260 !סףָ ס% פרחוד בטוזס | הסוב 8 88.6077./ש/ע/ץ 5 ₪ 185 8 6 סק נו ו כ 2 *פ6הדאהצפהה אפסא: <ופה דר 60.ג/ה. סז 8 60| הווהב ורות הוזסס. ה אס 5שפא פ5'צםפסד 6 סב עבשה ה 0ב763ום |ו3ּ] 6 חבסהופוחה 28 ס] 500 זםא חופטם 65% זו סח6ם סד 6 והססו|6/ וב601ק5 8 : 5060186 36 6/ %ח6יוט6 "0+ חופס1 63 ד 60 88.60 ה חס 65687 | 087 ח56%6 5 פאה 35501655 56 ד163|; 6 6>אטזז בּקפם ( 6008 ז0 פוחבּח צָזו6) צֶזו₪1 שזטז] הקפם ך ] ך ₪ 6 חחזטזפת ( 6008 ]0 שוחבח [ז61) ₪11 |בטדז זה ]-3 | | 58 שאנ 5605 אפנץ 4 אס 5'דם חצ ך סמומחם| [פשיםדד -6₪3 .6 0/801005 856 +ח6"חוס ונוסץ אוסחוסיו חב |פטבּיו+ וטס חהוק ך ב -6₪0 .6651 000305356 סע +0 %טוס 05% 06+ 08% ך 05 -6 .065 87ח+0 ח3 0%326ח₪0%/3 ,עב זס+ סיופח קסת5 | 55 8 פותפזטסזק - | 5 30 5חבזפסיוק ,%5סטובס"וק - חה3סרו6חה >הוח+עופשם ך סקז -6₪0 .06 3 65הוהטד+וסקקס 037667 ,6163565 55סזק אוס פרק 4: עיצוב האתר 6אזאאהוק ופצהחד וחסס. ג א61ס| הזחה ות 3 ו₪] אום 9-ו 8 015 צון פּ 5-ו פּ 5 בדו הזוס פּ ץוח 536 - א הָהזחה ונ ופ אנט ?17 ה ספפת ?1 הטסץ ד60אס? ?7 אטסץ 65אההס 6 13 4 עיצוב ממשק באינטרנט מה צריך להיות רוחב הדף? השאלה הנפוצה ביותר בכל סמינרי ה-פ6/ שאני עורך היא יילאיזה רוחב מסך עלי לבצע את העיצובניי. המשתתפים רוצים לרוב לדעת אם היעד הוא 640 או 0 פיקסלים. התשובה הסטנדרטית שלי היא שאין לעצב עבור שום רוחב סטנדרטי. כדאי יותר ליצור סידורי דפיס שיפעלו על פני טווח רחב של גדלי חלונות. לא זו בלבד שלמשתמשים יש גדלי מסך שוניס שפועליס ברמות הפרדה שונות, הס לא תמיד מגדיליס את חלון הדפדוף עד למקסימוס, כדי לנצל את כל שטח המסך. אתה לא אמור לדרוש מאותס המשתמשים בעלי המסכיס הקטנים לגלול את החלון אופקית, כדי להשתמש בדף הראשי שלך (מספיק שיש גלילה אנכית), ויש לאפשר למשתמשים בעלי מסכים גדוליס להנות מהשקעתם. למרות זאת, רביס מעיצובי הדפיס הראשיים כן מיועדים לגודל ספציפי, ואס תבחר בגישה זו, מומלצ לא לעצב דפיס ברוחב של למעלה מ-600 פיקסלים, פרט למקרה של עיצוב לאינטראנט, שס ידוע שלמשתמשים יש מסכים גדולים. השימוש ב-600 פיקסליס במקוס 640 חשוב, משוס שבכל המסכיס נתפסיס כמה מהפיקסלים על ידי שולי חלון הדפדפן. לפיכך, תוכן הדף לא יכול לתפוס רוחב המסך מלא. רוחב הדף הראשי בשניס הראשונות של ה-65/, הדפיס הראשיים נטו להיות גדוליס יותר ויותר, ככל שהמעצבים הכניסו יותר אפשרויות, והשתמשו בכמות עצומה של גרפיקה. בהזדמנויות שונות בעבר, סקרתי את ה-ט6/), וחישבתי את רוחב הדפיס הראשיים. הנה התוצאות : באפריל 1995: | 525 פיקסליס בינואר 199%6: | 568 פיקסליס באוגוסט 1996: 598 פיקסליס במאי 1997 : 6 פיקסליס בשניס 1998 ו-1999, כמה דפים ראשיים התרחבו עד ל-775 פיקסלים (להתאיס למסך ברוחב 800 פיקסלים), אך לרוב הס נשארו בגבולות 600 פיקסלים. כיוס, נדיר לראות דפים ראשייס צריס (למשל ברוחב 0 פיקסלים), למרות שחלק מהאתריס מכיליס עיצוביס שאין להס רוחב מוגדר. בעיקרון, מומלצ לאמצ סוג זה של דף ראשי שאינו תלוי ברמת ההפרדה, ומסוגל להתאיס את עצמו לכל רוחב. אס הדבר לא ניתן, יש להתחשב בכך שמשתמשים רבים עדיין ישתמשו בשניס הקרובות בהפרדה של 640 פיקסליס. 1 ידיי | ץד פ'עפאזט ד :886 פוחד ₪. )00195-59703( ככ 2 יצ ש |5ססחסוהותפסשצ דחם .וח.ק 9:14 :03%60קט 1.35% ]6 0.25 38165 1865ה3 66 ווה 16 5116100618 :ז10וו566סזוק זווה! 10 עזווווט הו ע0ה6 זוה ז6צעסוט81!6ווחת 6010 6-5)העזק כ ס%סגוע ו שד - 900 עמא ‏ 0007 :38165 81505 106 0 הדוס 650706 פיזאןנס!סכן פנו] הז וספ תפסונ יסד ההדזסל-1זס5 [500ובוז וס סכזז סו 0 65זבוד 1 סוו01) 10686 106 601 .66%/ש5/שסח ,/עעשעץ פאחו 1 זסעס:)0כעו1 העש ]ו הסו5פו1 :046 זטוסו 41 15 ע00ב5פבם מב . ז. 17 אופם פתיך +גוס %עט/ו 15ב[ 135 118 .5מבא[בם 8+ עס1 .1 עס זגוס 6הזס זוזע5 עזו:) הוחסווהואס 110[ ב םה 5זעפקא0 193102 19131 6 13 סקפ ע501153578סכ 01 08מ149סמ1 5 0105 71001815 סבב 8150708 מו מס 56% זסטע) 6]ה8ח ב )+ 1836 59551025 +0113 פמ![מס 16 7 1פ8מפקי +0 83%ע160וס 5 0 :5 זה 20973110 זיופם 3 81500785 הפוסו .9 5זעסק5 קנב סעפקגופ ,5198% + .5 עס +סם פענגופ פע'ץפמיך 8 התב , תמוק 19[ 13895 108קיעספ ספזיד ת. 5 עבק 0111 01 +גוס , עטקב סווסזוזס זטסצ- 6 א זה * 0 1 5 על ע"וסע שיו פ'וווסץ 1211 6פגו-18ו01 060356 60 6 ]םפוג[ סז עב563 6ב עס 03115 זקויוס העות 6 0חוה6 | 1[ מזסית זוסנק 6[ :03805 ל . 5.0.1 מססם זב 116026503 < ק0ןסמווס טי 0 ב ל ח3) 3095 =דופ פד 5:30 4 בי ה פיד ו יו א 0ופוע6]6ך 6 +חסטוסע ]* פד ומנ | | עוסח 1 ;0ספוזסמגום 17 6טס סז 860גו סע ".סז ,זה 16108 -- זסחודוס] ]0 נטסשוע 0067 סהוממוותק ,110005 ןוסוס 16505 הת דזסטטפחוס 50 5 סמ ₪ | מס אתר 68/66 מנסה להתאים את עצמו לשני רוחבי המסך הנפוצים: ברוחב 800 פיקסלים, ניתן לראות הכל (כפי שמוצג כאן). ברוחב 640 פיקסלים, ניתן עדיין לראות את החלק הראשי של הדף ורק הטור הימני ביותר יהיה מוסתר. אפילו הלוגו של האתר מתוכנן כך שהוא ייראה בשתי המידות. זהו אמנם עיצוב חכם, אך אני ממליך שלא לאמץ את הגישה הזו. משתמשים בעלי מסכי 640 פיקסלים ירצו לדעת מה הם מפסידים ולרוב הם ייאלצו לגלול אופקית - אחת מהטכניקות השנואות ביותר בדפדפן 60//. בנוסף, למשתמשים בגדלי מסך שונים תהיה בעיה, לדוגמה, כשהם משתמשים ב-/דס6/ (שרוחב המסך שלו קטן מ-640 פיקסלים), או אפילו כשהם משתמשים במסך גדול של מחשב אישי, שבו פתוחים כמה חלונות בגודל של כ-700 פיקסלים (דבר שיגרום לחיתוך אמצע הטור הימני בדף זה). פרק 4: עיצוב האתר 175 אחד מהשימושים הטובים המעטים במסכי הפתיחה הוא עבור אתרים שצריכים לסנן משתמשים, ולהזהיר מבקרים מסוימים מפני התוכן שנמצא בדף הראשי הממשי. 0800615.6070-אשסג,/ע/ש/ש 6 עיצוב ממשק באינטרנט חסל את מסכי הפתיחה תיארתי את הדף הראשי כאילו הוא הדבר הראשון שהמשתמש רואה כשהוא נכנס לאתר, וזה מה שצריך לקרות. לרוע המזל, ישנס אתריס שמציגיס מסכי פתיחה (5ח50766 ח50185) מיותריס לחלוטין ובזבזּנייס, שפשוט מאיטיס את המשתמש כשהוא מנסה להגיע לדף הראשי. התיאוריה שעומדת מאחורי מסכי הפתיחה היא שהס יכולים יילהכין את הבמה'' לדף הראשי, על ידי הצגת הודעת ברכה כלשהי, או פשוט שם ולוגו בנפרד, בלי שרכיבי הניווט בדף הראשי יסיחו את דעתו של המשתמש. במציאות, מסכיס אלה מטרידים, והמשתמשים נוהגיס להיפטר מהס במהירות האפשרית. מומלצ לעצב דף ראשי ובו הודעה קצרה על והות האתר, תצוגת ידיעות שימושיות ומדריך מידע. ניתן להשתמש בתוכן עצמו כדי לספר למשתמשים היכן הס נמצאים ובמה האתר עוסק. .65 וזה ] 5116 )]וו1והּ 01 ההסו+סוו1)סזנן 6+ חן 5661311265 5זסהוחהנ-%אכ 0+ 60 )ווה 5זוב+ 60 [ַהּ3+611ו 536 4 הוצוסוו0+ 6ווד )ווו!והּ צוסוט 0+ סה 6+הוזנקסזקקה 01 +0 6זה ,עְזזווח ע 01160601 6זהּ ווסע זו 6 56ה6וק וה66!ו 15 שהוצוסוט 561 6זסו!צו ה6זהּ הזה הו ס6ע:ז] זס +60+6₪ .]סח .6 א6!:6 5166 56% 000ק ב זס1 שַהואסס! ז16ו5 3 6זבּ טוסץ זו 5 89 חספ סח ואוסו|סז 8 הו 98| 15 זפ ה-א ב ב ו /- א וו דא = דפו.ו זט מדוע לאלץ משתמשים להסתכל קודם על מסך הפתיחה? חלק מהמשתמשים עשויים להתייאש ולוותר על האתר כבר כאן. מעטים הם הגולשים שמעוניינים להפוך את חוויית האינטרנט שלהם למסע מסתורי, בו עליהם לתהות מה השלב 2 / / הבא בדרכם, במקום לקבל הסבר לאן הם הגיעו. 700000 066 00 7//0000064 266 7000066000" = 4% שוט 10/01 11/0 700 000% 70606 26006 720006 1/8 8 1168 יי עזט]]0 )| שטס)) 05 19016 ו 7700006609 06 7/0004 0/0/2660 וחסס.ע/06 .//עעע פרק 4: עיצוב האתר 177 8 עיצוב ממשק באינטרנט הדף הראשי מול דפים פנימיים רכיב העיצוב הבולט ביותר בדף הראשי צריך להיות שס החברה או האתר. השם לא חייב להיות דווקא רכיב העיצוב הגדול ביותר, אך עליו להיות לפחות בפינה השמאלית העליונה (אנגלית) של המסך, או במקוס אחר שקל למצוא. בנוסף, יש לחזור על שס האתר בכל הדפים הפנימייס, משוס שהמשתמשים עשוייס להיכנס לאתר דרך כל דף בו, ולא רק דרך הדף הראשי. גולשים שמגיעים ממנועי חיפוש, או כאלה שהגיעו דרך קישוריס מאתריס אחרים, זקוקיס לדרך פשוטה לדעת מהו האתר שאליו הס הגיעו. עס זאת, הדפיס הפנימיים צריכיס להתמקד יותר בתוכן מסויס, ופחות בהצהרות קבלת פנים או תיאור כללי של האתר. יש לשמור את שתי המטרות האחרונות לדף הראשי. ישנו קונפליקט בין הצורך להתאיס את האתר לגולשיס שייכנסו מכל דף שהוא, לבין הצורך להגביל מידע כללי ועזרי ניווט עליוניס לדף הראשי בלבד. הפתרון לבעיה וו נובע מהתדירות בה אתה מצפה מהגולשיס להיכנס לאתר בדפים פנימיים, וכמה האתר שלך ידוע. אס רוב המשתמשים יוהו מייד את האתר שלך, אל תציף אותס בעובדות מיותרות בדפיס הפנימייס. במקוס וּאת, ספק קישור יחיד לדף הראשי מכל דף פנימי. אני ממליצ להציב את הקישור הזה בפינה העליונה השמאלית (אנגלית) של המסך, שהיא גס המקוס המועדף להציב בו את שס האתר ו/או הלוגו שלו. כמובן שבאתריס בשפות כמו עברית, למשל, יש להשתמש למטרה זו בפינה הימנית עליונה של המסך. העניין החשוב כאן הוא להפוך את הדף הראשי לנקודת ציון, שניתן להגיע אליה בלחיצה אחת מכל דף פנימי באתר, ללא קשר לנקודת הכניסה של המשתמש לאתר. בכל הדפים הפנימיים, יש לאפשר לחיצה על הלוגו ולקשר אותו לדף הראשי. לרוע המזל, לא כל המשתמשים מביניס את השימוש בלוגו כקישור לדף הראשי, וייקח עוד ומן מה עד שתפיסה זו תמוסד. לכן, בשניס הקרובות, יש צורך בקישור מפורש בשס 'סוחסויי (דף הבית / ראשי) בכל דף. לאתריס פחות מפורסמים מומלצ לספק קצת יותר מידע כללי בכל דף. באתריס אלה, יש לקבוע לוגו או שס גדולים יותר מאשר באתריס מפורסמים. 5 הזש סזק 3%65ו]0) תוכניות שותפים עסקיים (פוחפזטסזק 866וו) הן דרך לשלם עבור תנועה נכנסת. אם אתר מקשר לאתר 8, אתר 8 ישלם סכום קטן עבור כל מי שישתמש בקישור. ברוב התוכניות של היום, התשלום מבוצע רק אם המשתמש קנה משהו באתר היעד, אך כעקרון ניתן לבנות מערך עמלות, ולשלם יותר עבור משתמשים שבאמת רכשו משהו, ופחות עבור משתמשים שרק ביקרו באתר, אך לא קנו כלום (בהנחה שהם ישובו אליו לאחר מכן ויקנו משהו). קישור לעומק (פַחואחו.1 ק66ס) אסטרטגיה מוטעית היא לאל את המשתמשיס להיכנס לאתר מהדף הראשי. אסטרטגיה חלופית, בשס קישור לעומק (ַחואח1] ק66), מאפשרת לאתרים אחריס להפנות את המשתמשים למקוס המדויק באתר שמעניין אותס. אתר פ6\ הוא כמו בית בעל אלף דלתות: יש דרכיס רבות להיכנס אליו. זהו אכן מקוס מסביר פנים. כשישנה דלת ראשית אחת בלבד וכל נקודות הכניסה האחרות נעולות, המשתמשים יגיעו אל הדף הראשי, ללא הבנה כיצד האתר שלך מסייע למטרותיהם, או מהן נקודות היציאה. דבר וה נכון משוס שהדף הראשי לעולס לא יוכל להיות ספציפי או מועיל לבעיה מסוימת ולהוות את הדף הממשי המתאר את המוצר או עונה על השאלה. ווהי נקודה לרעתך. בנוסף, אתה מכריח משתמשים ללמוד את שיטת הניווט שלך ואת היישיגעונותיי הקטניס של האתר שלך, לפני שהם יכוליםס להגיע למקוס אליו הס רצו להגיע. זוהי נקודה שנייה לרעתך. האס הלקוחות החדשיסם יישארו אתך בשלב והז כנראה שלא. עליך לעודד קישוריס לעומק, שהס בבסיס ובמהות המסחר האלקטרוני. פרק 4: עיצוב האתר 179 (בעמוד הבא) דימוי זה לערוץ טלוויזיה לשם ניווט - נחמד - אך חסר תועלת. במקום להציג "שלג" כשהמשתמש נכנס לאתר, כדאי הרבה יותר להציג סיכום של מה שאפשר לעשות באתר. למרות שהשימוש בערוצים ממוספרים לבחירת אפשרויות מתאים לדימוי, התועלת השימושית שלו נמוכה מאוד. אי אפשר לחזות לאן מוליך כל מספר, וקשה לזכור לאן לחזור אם רוצים לעבור בחזרה למידע שכבר נצפה. מספרי הערוצים אינם טובים גם למקלטי הטלוויזיה הממשיים ומשתמשים בהם רק משום שתחנות הטלוויזיה השקיעו כמות עצומה של כסף בניסיון להפוך דבר כל כך לא אישי לסמל שלהן. 0 עיצוב ממשק באינטרנט סביבה וירטואלית - דימויים השימוש בדימויים (015ח6%80!!) מוגזס לעיתים בעיצוב ב-60). דימוי זה הניסיון ליצור סביבה וירטואלית עבור המשתמש, המדמה איזו שהיא סביבה שהמשתמש מכיר. החולשה הגדולה ביותר של הדימויים היא שנראה שהס מאלצים את המעצבים להיות מתותכמים מדי, ולדחוף את האתר לכיווניס שהס אולי משעשעיס ומתאימיס בהקשר של הדימוי, אך הס מזניחיסם את המטרות האמיתיות של המשתמשיסם. המשתמשים לא חיים בעולס של דימוייס (עולס וירטואלי). הס חייס בעולס האמיתי (0זס/ |568). בשל כך, עדיף לתאר מילולית כל רכיב ממשק ואת הפונקציה שלו, במקוס להתאיס את הכל לדימוי יחיד. בכל ואת, ניתן להשתמש בדימוי (ז0ח16%90/) משתי סיבות. ראשית, הדימוי מספק מסגרת אחידה לעיצוב, שתיתן תחושה של יותר מאשר פריטיס נפרדים. שנית, הדימוי יכול לעודד למידה, על ידי כך שהוא ימשוך את המשתמשים להשתמש בידע שכבר יש להם על הייחוס בעולס האמיתי. לדוגמה, שימוש בדימוי ייעגלת קניות" באתרי מסחר אלקטרוני גורס למשתמשיסם להבין מיידית את הפונקציה הבסיסית. אפשר לשיס מוצריס בעגלת הקניות, שס הס נשמרים עד לביצוע הרכישה. אתה יכול לשים כמה מוצרים באותה עגלה, אתה יכול להסיר ממנה מוצרים כל זמן שעדיין לא שילמת עבורס ואתה יכול לקחת את העגלה לקופה. דוגמת עגלת הקניות מאירה גס את החסרונות שבדימוי. ידע מוקדם אודות המערכת בעולס האמיתי עשוי לסמן למשתמשים שהדרך לרכישת חמישה עותקיס של פריט מסויס היא לחזור על פעולת הנחת פריט יחיד בעגלה חמש פעמים (במילים אחרות, אס רוציס לרכוש חמישה פריטים יש ללחוצ חמש פעמים על הלחצן ייהוסף לסליי!). בנוסף, הדרך להסיר פריטיס מהעגלה תהיה להציב אותס בחזרה על המדף. בניגוד לכך, רוב עגלות הקניות של אתרי המסחר האלקטרוני מאפשרות למשתמשים לערוך את מספר הפריטיס (הכמות) שהס רוציס לרכוש, וכן להסיר פריט לא רצוי על ידי רכישת אפס עותקים. הפעולה האחרונה מהווה בעיית שימושיות ידועה, ולרוב היא אינה מבוצעת כהלכה (מה זה לרכוש אפס מוצריס! האס יש לוה הקבלה בעולס האמיתי?!!) זו וטו 8 יַ / / יַּ ו יַּ 7 : ה ששמכך ממא ₪ 60 06 זו |( וס / : , 1 ו 0 6 : זם דג ? סב ג 0 סו חסו1פו0561 0 : 1 4 ּ יַּ 7 י - י | פומואם קוו ס 08/00/60 63./ע/ע/ע פרק 4: עיצוב האתר 181 8 / ו רחסס .8/ע1/5 ./ש/ע/ע 2 עיצוב ממשק באינטרנט בדו | גצ 68 אטו = שר ' ביא 5) סחווזו/ טזגין | מודד עיצוב שנת 1995 של פסחו!זוג 5066 היה מורכב מהרבה מאוד דימויים והוא החזיק מעמד עד אמצע 9פ9', אז הוחלף בעיצוב מילולי הרבה יותר. למרות שהעיצוב הישן ניסה לתת תחושת דלפק נסיעות, העיצוב החדש נראה יותר כמו אתר של חברת תעופה. מנקודת המבט של השימושיות, קל יותר לבצע פעולות עם העיצוב החדש. העיצוב הישן מדגיש בבירור את אחד מחסרונותיו של הדימוי: פעמים רבות הוא אינו מספיק כדי לכסות את כל תכונות המערכת ההכרחיות. במקרה זה, המעצבים רצו לכלול הודעה מיושב ראש החברה (לרוב זהו רעיון רע, אך נקבל אותו למען הדוגמה) והם היו צריכים להתאים את עצמם על ידי תליית תמונתו על הקיר. זהו עיצוב שמתאים לקונסוליה הסינית... ווקות | ו | וק | ה 5 0<או חהם.ום/ה חד /צ5 דט80ב 8 8 אצ ה/ש8 8 דהפקט ווהא-5 "ואססעפפאץ ע09 80₪אצ5 ג 5 5010/6851 8זההשועחב טסץ 1888 |וואצ 85| זס 599 עוסצן בח ,5וטס. 1 +5 ,16880ח0 ,אוחפסח; ,8835 35 | חזסז .חסזפטסר] וו ידוו 5 11| 0383 ח' אסוו > .8518008 ח8|8/8 בה פוטס | 51 ח888ם בעָ03 30 זסז 85זבז 330 5זפחם ז85אותושוסם ‏ * 31 286870081 עם ע8 חב פחווחכ |פ8זד 104811855 58התפזטוס חפ חהום טסץ מפחעצ ]61801 פמזב ופ ₪81 פ|פטסט חזפם * 8 .5118 800880 ויח זטום טחוז3 טוח סופת זסז ונפטח| פוום פחז וו * רחסס .8/ע7/5 ./ש/ע/ע פרק 4: עיצוב האתר 183 5 צ )₪62 > א[ *כזא מז זזצ ]וא >רזז כ6ז זואכ):> ם/ 3587 855ח[₪05 ₪385 ... 4865ב וחפם [ פס | [ם503₪ם |[ 5ובסחבּ ] 66 5 5 +%+46זוחפם שא ]דד אוכ) 5115 55צו15 8 >עז מע טצוצוו זבסוא וחד הא ₪ ו רו רו זטוסז זא וח זב | חססוטוחא8 ז0 פזנסט? בר ... פסופ ספ זגום החסופול זם+ גופץ אהבּחד 8 |בטוע 83485 בר הַההפסחם פזב טס . צְסַם|סהחהספס .8 ו הסו55!וחטב סחב ,זובּ= פסבּזד 0 ח135 הזור 8 זס 58 שר חו לקפסחסס אופח צ|9ס8|מחזסס 3 החטב טוט טבּחו 5 5חהפרח8 30 חב 6פצזבותפם הסטסזרם 5871085 פוחם-831 הסוע |בטחוץ רס בהוטחפוט ,308 |בחססבּהחפסחו זס1 ספהחפסחו 50058 3 %0 580חפסו| חפט 335 בח עה תטוסס 830 חו 18085 בוחם-|83ז ]₪ 58 פה זפחבק צטחהטס6 סם סס זפ אוסם פרש םוחזסצצ 68 ההטסזבּ 5585פחופגום פפצום 5זפתבם ץ"טהטס6 )₪ אזםאאספח פוחד החסז? סטב זס טב !1 חב 85 0ס5וס , זט 0וח5 , פזפז טסב וטוחבות רחוצ פוחס-|83ז חו 55פחופט . הסיטב !0 8וחַחו5 בּ הבגר בר ההוב צט ,881] אטח בר 60 ספההפסחו פר זם צֶהַפ|סחח690 פר₪ ה8א63 פצבּח פע 5החם|ט סז ₪15 50!/85 348% 8 . בסזפ סט | הססבתחפסחו זסז 808553 50 הסטחהפשוססחו סחוצום ,55פחופגום ₪085 6 פזפחצו עהחהטסס צזפצם חו 530%85ח858זקפז הבחטת הַחוצבּח צט .8+ הבחר 3 חב צְהַסחח90ס 355( - םפש ... לפסוח פה עפרם סהחשו 5585פחופט 5 דימויים גיאוגרפיים כמעט תמיד גרועים, פרט למקרים בהם מתעסקים עם גיאוגרפיה. בדוגמה זו, אנו רואים את מגרש הירידים ובנייני המרכזים המסחריים הווירטואליים. בתרשים הבא, עברנו לקומה השלישית של המרכז המסחרי, היכן שנמצאים משרדי חברות הנסיעות. 4 עיצוב ממשק באינטרנט י ו 1 / ו הווספוזה וד ? בחוסטזד .נְחומם) סח |החסוהּחזפוחו 1םופזחוה בח8 - 588 .(חכה פהונטוסח .378008 6|8 ( 0510 .0015100 | חב פהַבּזסום . 5.1 008%8ז6 ל 5 חבז ד הפוה תזפזח! .ה.5 ,ה1661ה/ 160 ספות ל "םוחה" 5סספתהזז |3ה810ה ₪ח3 |התסהחזפוחו 008 .00-0|65וז | 388 3!875ז-80ו= הח 0080|8|!515. .69780 |בּוחהם זס 08780 8 +01 0815005! | 38 תסמטטז15 4 הפס ,08180!85 ,5וט :80008 חפ 10:38 .המסזט= 01 ||8 10 ,2 וח 1 24 .510785 78828 0887 זס 510185 8828 .58 זטסץ 5 הוזהווווה ל . 5 518005 8 300808 08 0|05/חפס 866 סחזסו] טצעל חסו151ת03ז0 051035 טזפצ . .5 , זווזהוזפוזה זד ל. בח זוה ,08 צעם הסמפחבּז1 |בּחסוזהּחזפזח| .זפ 8ח1 זפשם || 580085 ]וב] .588 10 ז₪00 08068 308% 6910085 ."הסווטטו8151 | בח3 הבהשסום" ,ההַבּזסום 31 68חהזטפח| 6ווווזס סטוחו < 5815 358 רת : |אז סוד חם דוו 5חסוז88זט סב :ס|ק קורפ ה וח זס1והו[) פווד ץ. זו 1 (160) זווסוס זז 50 ל טחוספוו51 זווסטה טווווועופעם < צוה!ס זה ל 8 זסז פאחן 1 |טזפפט ז |וט 15 3ו6300 [וחטרחוח 0 00-6ז63 רשי יק בשוח 8ם סס סחבּאו גוםץ א 855ז00ב |ובח-8 זטסץ זפסחם 8 פור 0 0080ב פזב 85וחב מחסס שופח חפחאו | |ו8ח-8 זה הסט | (בח-ם צאדאטסם אטטצ או אשדה ד45]פב ג שם סד דוגצו טטצ או >> 3586 אפוום << 5 וז 2 מערכת הניווט כוללת קישורים לקומה השנייה והרביעית, אך לא ניתן לנחש מה נמצא שם. קומות אלו מכילות שירותים עסקיים וחברות תוכנה, אך מדוע הם הוצבו ליד חברות נסיעות ולא, נניח, ל וו "ווהי סיק 0 פ ו פפ > [ אסא וצ:ךק (-נ/-נ/--- מסזופו4ואו 85 סד יו ( ו 3 ליד חברות טלקומוניקציה (שנמצאות בקומה ה-17)? בנוסף, המעבר בין התוכנה לחברות טלקומוניקציה קשה: "עלייה" מהקומה הרביעית לקומה ה-17. לפחות אפשר לעשות קצת כושר... (עם האצבע הימנית, כמובן). פרק 4: עיצוב האתר חברות 15 ?7 800% זבהע ץ5זפצסז)ה60 84 ' . . . ' . י ' :תסזהוק0 וח₪00 ה66ז6י הח50ז6 30 866 6 אה 6והשחך וחסס.80000/ס/ ./עעעעע בשנת 1995, חברת התקליטורים זסְפַבּץְס השתמשה בציור של עץ כדימוי להצגת מבנה ממשק הניווט שלה. למרות שהעיצוב נחמד ונראה שהוא מתקבל על הדעת, זו אינה דרך טובה לשימוש בשטח המסך הזמין, ולא מבנה מתאים למידע. מדוע יש כמה דברים על אותו הענף? 6 עיצוב ממשק באינטרנט !06הו ב , 67615 קתוותסססנו 33 פהפצס )קיפ אס | זאמש אוסן | ו | הפדפאסו צ4ו | | > אטפפה פהסד5 | 085[ 553868 6 לפגוגום. וכ := זאסקט ה6אא55 פס[ ד טסן 240,379 זטס 583700 |שוסח 5פסוחטזסםקס 8 4 דבכ0ק !סח 8605 5םזם טפן +ם פחספוו|ותת הבא ||סם 66'5/ פוחד פמק 6 הסח [8ה50ז6ק 3 ₪085 ?37 פסן 3 ק|פת 3 חס 10398 - 65 -) 5 פפסְפףָ 6 0 35 סו זפ - 65 ר) 664 ו13] +ה6!ג7 ו566חסויז 05 563767. ל הסט +ה6!גד הוח סז וזש שח ד פו/י .ק|8ח 00850'5 [5003 29 3 306ת 'ח40 1 -) 1 אחוחף 1 %טפ פִחָבק פוחסת .06 868ה [3ה50ז6ק 3 0886 6'ה180 -) הָק 6החסת | טפס 5 !0 פטסוטפזום ונ ו / 1/ ל 5 ₪ 515 | ח03ס טסץ ,פחַבּם ז3ס5חס ען] ה28ו|בחספ5זפם ב הטוע זץסס חב 858ז זנוםץ 50078 ,5טסן א%סב 8 65 | ז88ז03 בחואוסזם זטס הפוצ לסהתחסס בחב , 5ז ו 5% 55 8ז8ח 6116 , עסוהטוווחסס על 0050786ק9 - 2 ַ 5 הפוס | 1 05 ל > ו יק 0/5100 66 , 1% פס 80פח גוסץ 30108 זפפזבּס החד 5 !801311 זטסץ ז6פח= !פא |3 םב הסח קרש דה צבם|טההספך ו טפט רבפ 8 | טפ | הרהה שן %חטסחפטפטח1 3 חסן1855סזוס 8 5 5]6 1460 855 ע528613|0 6305 60 -510חסר ./ע/ע/עץ נסה לדמיין את הפוטנציאל בדימוי של ממלכת המפלצות: מאורת המפלצת (טיפים לחיפוש עבודה), שאריות (הצעות עבודה שנמצאות במערכת זמן מה), בית רדוף רוחות (מעסיקים בבעיה) והמפלצת של אגם לוך נס (הצעות עבודה מעבר לים). אם נתחשב בשם האתר (חסס.זסזפחסוא), הרי שהוא מהווה דוגמה מרשימה לריסון בכך שהוא מגביל את עצמו לציור הומוריסטי שנותן לאתר מעט אישיות. תמיד אפשר להתווכח על השאלה אם שם כמו "זסספחסוא" (מפלצת) טוב לאתר שלא עוסק במפלצות, אך מעל לכל ספק הוא שם שקל לזכור והוא עוזר לאתר לבלוט בתוך ים השמות הצפוף כגון ה687067780, 37667060 6, |00000078 68 ז סח , 70606 68, 06חה037607/6, 4ב 87007, 6876675106, 6זטפסקאם68706, 06ח8 ה6א 66 , ו6876670, ק0ח6376675, וגם ז6חססנ, ו4טסנ וכן הלאה. פרק 4: עיצוב האתר 187 מינוח חלופי 5צהס סוזם, ארכיטקט מידע בחברת 37866008 65007606, ביצע בדיקות שימושיות של מונחי עגלות קנייה בשנת 9. בעיצוב הטיוטה, הן נקראו "560 פַחהוקקסח5" (מזחלת קנייה) משום שהאתר, שמכר מוצרי ספורט לחורף, רצה לבלוט ולהימנע משימוש במינוח סטנדרטי. התוצאה? מחצית המשתמשים לא הבינו את רעיון המזחלת. היתר טענו שהבינו את המשמעות, משום שהמזחלת הוצבה במיקום בו ציפו לראות עגלת קניות. הם ידעו שכדי לרכוש פריט היה עליהם להוסיף משהו למשהו אחר, והדבר ההגיוני היחיד שעמד לרשותם היה המזחלת. הלקח: אל תנסה להתחכם ולהשתמש במונחים חדשים בזמן שכבר ישנם מונחים סטנדרטיים שידועים לגולשים. 8 עיצוב ממשק באינטרנט עגלות קנייה כממשק סטנדרטי עגלות הקנייה נפוצות כל כך באתרי מסחר אלקטרוני, עד שהן הפכו מדימוי לממשק סטנדרטי. כיוס, כשהמשתמשים נתקלים בעגלת קניות באתר הס לא משוויס אותה לעגלה בסופרמרקט פיסי, אלא הס חושבים על כל אתרי ה-טפ/ האחרים בהס הס ראו עגלת קניות. לאחר שמשהו נמצא בשימוש מסיבי מספיק, הוא הופך למוסכמה בממשק, והגולשיס פשוט יודעיםס למה לצפות. תהליך הסטנדרטיזציה של עגלות הקנייה טוב ורע. היתרונות נעוציס בעקביות. עקביות היא כלי למידה ויותר חזקה מדימוייס. למעשה, המשתמש לא צריך ללמוד כלום, כל ומן שרכיבי הממשק מתנהגים בדיוק כמו שהמשתמש רגיל אליהם. יחד עס זאת, עגלות הקנייה לא מתאימות כממשק ליישומיס רבים, אך הרגלי המשתמשיס מאלציס את מעצבי האתריס להשתמש בהן. ניווט ה-60/ היא מערכת ניווט: הפעולה הבסיסית של המשתמש היא ללחוצ על קישורי טקסט, כדי לנוע במרחב מידע ענק המכיל מליוני דפים. השטח עצוס, ולכן הניווט קשה. יש צורך לספק למשתמשים תמיכה בניווט מעבר לקישורי הטקסט הפשוטיס. על ממשקי הניווט לסייע למשתמשים לענות על שלוש שאלות הניווט העקרוניות הבאות: > היכן אני נמצאז > מהיכן הגעתיז % לאן אני יכול להמשיך מכאןז היכן אני נמצא? שאלת הניווט החשובה ביותר היא כנראה י'היכן אני נמצא!יי, משוס שאין למשתמשים סיכוי להבין את מבנה האתר אס הס לא מביניס היכן הס נמצאים. אם אינך יודע איפה אתה, אין לך יכולת לפרש את משמעות הקישור שעברת אליו. יש להציג את המיקוס הנוכחי של המשתמש בשתי רמות נפרדות : 6% יחסית ל-60/ באופן כללי. > יחסית למבנה האתר. עליך לכלול את זיהוי אתר בכל אחד מהדפים, משוס שכל דף הוא חלק מה- פ6/. כל דפי ה-פ6/ דומים מאוד אחד לשני מנקודת המבט של המשתמש: יש בהס קישוריס וטכניקות הפעלה אחרות, הס יורדיס (באיטיות) מהאינטרנט, ויש להס סידור דומה. דמיון זה טוב למעשה, משוס שהוא מאפשר למשתמש להשתמש באותו הידע במרבית האתרים. מחקרי השימושיות שערכתי הראו שהמשתמשים מתלוננים באופן חריג כשאתר מסויס מנסה להשתמש בממשקי ניווט ששוניס בהרבה מאלה שהם רגיליס לראות ברוב האתריס. המשתמשים נוטים לצפות בלא יותר מארבעה עד חמישה דפים בכל פעם, בכל אתר נתון. החסרון הפוטנציאלי בכך הוא שהס לא ידעו באיזה אתר הס נמצאים, אלא אס תיידע אותם. לפיכך, הכלל הראשון בעיצוב הניווט הוא לכלול את הלוגו (או מזהה אחר של האתר) בכל דף. יש למקס את הלוגו בנקודה קבועה (מומלצ בפינה השמאלית עליונה אס האתר לועזי, או ימנית עליונה אס האתר בעברית), ולהפוך אותו לקישור טקסט לדף הראשי, כדי לאפשר למשתמשים לעבור לדף הראשי מכל דף באתר. תמיכה בניווט בדפדפנים כמינימום, דפדפני ה-60/ חייבים להציע תמיכה טובה יותר בניווט מבני (חסחְהטוע3 60זטל6ט-50). עליהם להציע תכונות כגון עליה רמה אחת מעלה, או כניסה לרמות נוספות של ארכיטקטורת המידע מהדף הנוכחי, וכן תכונות להצגת הקשר בין הדפים בהם המשתמש כבר היה. יש להציג תכונות מיוחדות למעבר לרכיבים הקודמים והבאים ברצף האובייקטים (זה שונה מלחצן 886% שנמצא בדפדפנים, לחצן זה אינו עובד לאובייקט השכן, אלא רק לאובייקט הקודם). בנוסף, יש להבחין בין קישורים שמובילים למקומות באתר הנוכחי, לבין קישורים שמובילים למקום אחר באינטרנט. מומלץ לשלב בין הידע בצד הלקוח של מה שהמשתמש עושה, לבין הידע בצד השרת של מבנה האתר. מפת אתר פעילה עשויה להאיר את המיקום הנוכחי של המשתמש, וכן להציג את הנתיב בו הוא עובר באתר. וכמובן, ניתן לשלב את החיפוש במפת האתר הזו, ולהציג את האזורים הראשיים של האתרים שמתאימים לשאילתה הנוכחית שלו. יש לשלב מנועי חיפוש שפועלים על האינטרנט בתוך הדפדפן, כדי לאפשר חיפושים שמוגבלים לאתרים שהמשתמש מחבב או לדפים ספציפיים שהמשתמש כבר ביקר בהם. באיזו תדירות אתה מנסה למצוא משהו שאתה יודע שראית ב-60\? אם רק יכולת לספר זאת למנוע החיפוש, בעיית האיתור היתה קלה הרבה יותר (כל משתמש ממוצע ראה לרוב לא פחות מכמה אלפי, ואולי אפילו כמה מליוני דפים מתוך מליארדי הדפים הקיימים). פרק 4: עיצוב האתר 189 וו 5 ₪ 0 וצ 5 5-5 6 ₪ ₪ 0 0 צ 5 5 והרו ה ( ( - 1 פר 53051 סד" זטום ]0 805פח הַחוְחַ8558וז שפח זס+ להפווסווהרחסס |הגסטוח א" ". 15600875 ",שוזם חב 5385 66| |פססום דט דה 6ופו||ה |פססום ד דה - הפס 166 6 - ההפססחם 87600 8008 רח6סרון 0-03 | 5 0 ₪ ולקה ] ה)זב | >ה0עג] 36 ל 6% = ח00ו1ב+ת0606 | 75ח6ת0) | זגשת6)ג) [ 668 וח 0 0ש535 | ת56376 | %חו53571 | 58791665 5066 שו | 61 | הס גחו טכ | 55 חח 60 | ז03ח03!8 ] - (085ועח55 דפ דה ) -. ( 5ט סד דוהאו ) -- ( 5580 - ופ ) -. (פמסו זהזה). ]₪ 601 .00 ./ע/ע/ץ דף זה עושה עבודה טובה בתשובה לשאלה "היכן אני נמצא?", בשלוש רמות: % אתה באתר דא8דה, כמצוין על ידי הלוגו שבפינה השמאלית עליונה, המקשר לדף הראשי (כדאי היה למחוק את הסמל הכפול בפינה הימנית תחתונה, שהוא גם בצבע הלא נכון). > בתוך אתר 81ז4, אתה בחלק שעוסק בשירותי 6זסווח585/60. > בתוך סעיף שירותי 66וסוחוחס6ע55, אתה בדף שעוסק בשיווק שירותי התקשרות גלובליים (0ח60א137] ססחםו!|/ |הססוס). המעבר הטבעי של עין המשתמש מלמעלה מסייע בהבנת הקשר ההיררכי בין שלוש רמות המיקום. לרוע המזל, סרגל הסמלים שנמצא לקראת סוף הדף לא מדגיש את מיקומו הנוכחי של המשתמש. הסמל "6%" צריך להיות גדול יותר, ובצבע אחר, ועליו לבלוט, או לציין בדרך חזותית אחרת שהוא מציין את הבחירה הנוכחית מתוך הרשימה. ונקודה נוספת למחשבה: איך יידע המשתמש שאלה ראשי תיבות של 66000אזבו ססחפווןה |הפסו? זאת ועוד: ראה את הסמל שמייצג את הדף. הסמל נמצא בחלקו השמאלי העליון ובו נראה איש שנושא את כדור הארץ שכיוון תנועתו לימין. ואילו הסמל המייצג את האתר בסרגל הסמלים נראה דומה, אבל הכיוון הוא עכשיו לשמאל. מבלבל אהה?!! דבר מבלבל נוסף הוא שני לחצני החיפוש (למעשה, ישנם שלושה לחצני חיפוש אם נתחשב בעותק הטקסטואלי של סרגל הסמלים, אך רוב המשתמשים התרגלו להתייחס לרשימת הסמלים ולרשימה הטקסטואלית כאל שתי רשימות זהות. 0 עיצוב ממשק באינטרנט המיקוס היחסי במבנה האתר ניתן לרוב על ידי הצגת חלקים ממבנה האתר והארת מיקוס הדף הנוכתי. חשוב גס לכלול כותרת ראשית ברורה של הדף שמציינת את שמו או את התוכן העיקרי שלו. לבסוף, כותרת הדף בהגדרת כותרת ה- !ויד צריכה להכיל שס משמעותי לכל דף נפרד, כך שהמשתמשים יוכלו לאתר אותו בקלות מתפריט הסימניות (0%08765סם) שלהס במידה והכניסו אותו לשס. מהיכן הגעתי? טכנולוגיית ה-65/ הסטנדרטית היא חסרת גבולות, ולכן קשה למעצבי הדפים לענות ישירות על השאלה יימהיכן הגעתיזיי, משוס שהאתר אינו מסוגל לשתחזר 65, או לאתר בצורה אחרת את המקוס ממנו המשתמש הגיע. למצלנו, ישנס כמה מנגנוני ניווט יעילים בדפדפני ה-60) הנוכחייםס שעוזרים לענות על שאלה זו. הלחצן 886% יחזיר את המשתמש לדף הקודם, רשימת ההיסטוריה כוללת רשימה של הדפיס האחרוניס בהס ביקר, וקישורי טקסט נראיס אחרת, אם הם מצביעים על מקוס שהמשתמש כבר ביקר בו. אני ממליצץ לא לשנות את צבעי הקישוריס הסטנדרטיים, משוס שהמשתמשים יבינו רק את הצבעיס המוסכמים. בחנתי אתריס רבים בהם צבעי הקישורים לא היו סטנדרטיים, והמשתמשים! הס לא ידעו באיזה קישוריס הס כבר ביקרו. הידיעה איוּה קישור מעביר לדף שכבר נצפה שימושית משתי סיבות: היא מסייעת למשתמשים ללמוד את מבנה האתר, והיא מונעת מהם לבזבצ וזמן במעבר לאותס הדפים שוב ושוב. לאן אני יכול להמשיך מכאן? התשובה לשאלה זו מגיעה מאפשרויות הניווט הגלויות ומכל הקישוריס האחריס שבדף. בנוסף, בהנחה שהמשתמש הבין את מבנה האתר, קרוב לוודאי שהוא כבר יודע על מקומות אחריס שאינס גלוייס כרגע. אין אפשרות להראות את כל היעדיס הזמיניס בכל הדפים, ולכן ברור שמבנה טוב של אתר יכול להקל על מתן התשובה לשאלה י'לאן אני יכול להמשיך מכאןנ'י. פרק 4: עיצוב האתר ‏ 191 5 ץוח 60 זט ,ץזו6 545חַ3א ח! 10060 ו63ז 0ט!665 זטס זטט 6 סחטסזבּ חזסז? חו 5ס! סחה[פז! ,חוופטכ וחסז1 :6!זסעש .]הסוח חו וחז3? עְזו03 3 סז 6 זסט !60 6/ חס 6ז631וח גרח וח ס6 חב ההּחז ז6זז06 ז6חזסזח| 6חז וח 65ו חר 60 שהגוח .א6|וחס6 01666 6פַחו5 3 חו 6חז חס פַחועו 1 זו העט ₪5 זח 130 35 6 חר 60 סז 1865 חהּחז שזסוח 6!זזו! חזוע 10685 'ח5] .רח63ז0 3 חב וה6 סח ב הז60/8.60וחסוטסח ./ע/עעץ (בעמוד הבא) הנה דוגמה נחמדה להדגשת מיקום המשתמש באתר. שים לב כיצד השימוש בצבעי קישורים סטנדרטיים בקישורי הדפים השכנים מקלה על המשתמש לראות היכן הוא כבר ביקר. בדוגמה זו, המשתמש כבר ביקר בדף "חסט6טססיטחז" ובאזור "סו|סזסק". 2 עיצוב ממשק באינטרנט ?7 סל פַחוקסח 6ז'טסץ זבּחצו זהּחז 6 ה] 6013וח 68 ח0ו065 3 ||63 נוסץ סם )החש ?| | 65 61ח'ז%0ח1 66 68!5 )+ + , צר --- [0! ס6ש 06655זק ‏ 511 (למעלה) ציון עדין למיקומו הנוכחי של המשתמש. במקום שסרגל הניווט עצמו ידגיש את האזור הנוכחי, עושה זאת במקומו תמונה נחמדה בצורת דג. אבל התמונה רחוקה, לטעמי, מהסרגל, וגם המשתמש יצטרך "ללמוד" שתמונת הדג קשורה למיקומו הנוכחי. חץ היה נראה יותר מובן. טָחוחסו15 א סוד גוא סו ות [190[1108 ס811811סונ פסנס תק1 זי[ספסננגוס 191012 /ר ,16 טג 8ת1ק8במ1 10 1168 8 1111611025 +6ק סגו סתס 96גו2608 ?זיב ,80586105 "11 61בקש" ,116פבנגווגת 111061 81 זזסת +9סקיקגופ 1ב ק1גת 50086105 111686 צ5אדאה מצנס)-קתס1 ע18גוס1דנפכן 8 10 פתס1וגו[0פ +0 108 ןתנ 5ת108110תגובת במ סט הבהנודו 8 16 סוט 10 100תנ8זד סק 11181 887 161'8 ,16כן גנט עס סנסזז 8 8116 מ סז 6)מנסנךנסט 100ת16נס-080 1168111 פע6פגו ע161[ 10 6פגו ס) עסב 6182ב[ תפס 6 0 1001 ,6 עגוס 10 116186[0788 +ת6בנס עס [661 81216 8 1166 פקת111 קת1פגו תס1פ1קיתס )קזב ס/ 6 בנססת8111ט 8 ,סט תףבמגובן סז1ו תס 6ב עס [118ן109 סקגום 8 ,611 191-810 8810 8 עס 080164 עס 0618ב ק ת1ק1תנפקנס 88 ק 8 בדנ 6ב 16במ1פ 8 +פגו[ 8 קת1סתסעס1סנ-89כונ-) ,8116 "11 +8ב[זד" 816במ11[גו עגוס 1 1181 8 ב[11זז [סבם ב[686 01 8סנגו1081 +תסעסב1ת1 סז פגו 1680 1ב[ק1בת 661 [כנכן 1116 עכת 815סק בנצנס1-ק 10 1 6 011018 [6הסבת 1091181[ 126 181 6גו[טתסט 167 תסט 8180 11[ק1בת 6זז פגום 1 ,16במ1בת ס) סנגוזסגרנופ 8 85 בנדנס)-511011 1116 ת1 [16סבמ ק דנב 1116 קת1פגו 8 11 8סונט ,601 [סתכן 1116 01 886 גכ קרנ8תנס11גו[סקיס 0817 ,. דנ 6 כ 161כבמ91 6ב[1 סעפב[זד נס81111811 .1 1111181 8 6ב סססט 10 6במ11 עסקיס 18 תנ6כנס סז זגום ,סנגו1גת 116 +016סעכן 10 8018 6ם זסת +ק1גת ס/ - .131001 ב06פ 11 8686ב תפס המחל מסוזסטטסטמן ר] 8מופת ך] [הוהפו5דו ף] ות ספזפום ךר פופ ה פפפ 065 10300 אטהאם צמסד ,. ?שפח 5'ופחי ך] 43 :1 , סְחַ108ח6 1 41 50116 , 286086 . וי 350 56900 508 ך] מה 3 % 54-46076 1 ו ח החסס. 010018/801010‏ ]הזסס. סופ שושיוי וקו . 6517/66 5זְחִהָ |51. . מגופיזם עיפסד 1997 זחהויקס> 1ח0ס0/0.0 .שש פרק 4: עיצוב האתר 193 0 0 מצד 4 הס ו48] פוום והוז מ10פפם | זסזחוזק 3567 ] ] זסוקס6 |[פופום 100א 76ח66אזס/ אסזסא< | ופוט / שפמפאפחה , = | ר ץטם סד וטו 0 (09) ח3ח) 1.695 -----. .6 .וק 600 א 600 | חס 0ט!₪650 )חוזק .6% וחקק 8 556660 )הק 0 ₪ 8.50 526 ז6ק3= .אב 59 | עְחָס|סהת80ך +חוזק 6|ס 600003 א 6קעד ח0ו09|!3 68 6 או16/תס 6 +606סק 5 3% ח) 06!זק 3 3/6ח 06ט04זק 656חד 0 0 100 זפ והוז 3 ההוטט!סחו , זפוקסס 3 חו וחפוו ופץ פַחות1עזפ החור 316 טסץ 6ט0סזק ובזופום 4582 =זוחפס 6 זטו אסזפא 58 0ח3 680165 צ46] 0 "6 |ז 357 / זםופס0 133 3)0102 שזוחפס 6 זפש אסזסא , 7 0 זְ]חזק 3591 / זםופססו ץזופוב) 350 | ופזוָום זסוופקטס * 9 הַחועְ60 ופזומָום * וזוום 0100 8זח06 א זסא אסזס)ג א 0 זחז6פ)ח | 358 ] / זם ופט הָמוזחוזק וחסק 8 * 0 12 )חוזטנוססם אסזפ); | שו זפ 0085 10 > ו 38 250-5881 * - !4 ז5ב.! 395 6ז1ח68 6 זט אסזטו , 0 פח0-ח! סח 080|8 זהזחוזק * ץז חפזזה/\ זהב' ב * בח!חוז 055100 !1 וס 4 0 ו זאטייפ. 8" -= 18 ח0ו3 10| +66זק 608148 |וגו 11308 56 על חבז 3/3 8 חבט טס 60181 00 00% ,ץע תפריטים נגללים כמו "חסְטְהּטוטגּ 5166" בתרשים זה, גורמים לבעיות שימושיות רבות, כי שהמשתמשים לא יכולים לראות את סדרת האפשרויות המלאה בלי לנקוט בפעולה מפורשת. אני מעדיף ליצור סדרה קטנה של אפשרויות ניווט מקיפות שניתן להציג אותן כל הזמן. בעיה נוספת באתר זה היא המיקום הקטן מאוד והלא שגרתי של שם החברה. דף מוצר זה מהווה דוגמה מעניינת לניווט מקומי בצורת קישורי "ראה בנוסף" למוצרים דומים, תחת הכותרת "6זּקוח0ס6 >סוט0" (השוואה מהירה). יותר מדי פעמים, כלי הניווט ב-65/ פועלים מתוך הנחה שהמשתמשים יעברו ישירות ליעד המדויק שהם זקוקים לו. למעשה, המשתמשים יגיעו לרוב למשהו שמתאים בערך, אך לא בדיוק. אם אין באתר כלי ניווט מקומיים למוצרים דומים, אין למשתמשים ברירה אלא להתחיל מהתחלה ולקוות לתוצאות טובות יותר בפעם הבאה. תכונת 6ז3קוח60 016% בדוגמה זו היתה טובה יותר לו היו מצוינים לא רק הקישור, אלא גם ההבדלים בין המוצרים. במילים אחרות, סייע למשתמש להבין מדוע ותחת איזה נסיבות הוא עשוי להתעניין במוצרים האחרים. כלילת המחיר מספקת מימד שכזה (אם אינך יכול להרשות לעצמך לרכוש את המוצר הנוכחי, קל למצוא אחד זול יותר), אך לא ברור מה ההבדלים העיקריים האחרים בין המוצרים. כנראה כדאי לבחור במדפסת אחת אם אתה זקוק לצבע, או לבחור באחרת אם אתה מדפיס עותקים רבים בכל יום, אך בעיצוב הנוכחי, המשתמש לא יודע ולא מקבל סיוע בהחלטה לאן ללכת אם הוא רוצה לעזוב את הדף הנוכחי. 4 עיצוב ממשק באינטרנט ישנס שלושה סוגיס של קישורי טקסט שניתן להשתמש בהס בדף: % קישורים מוטבעים (11065 5060060) הס הטקסט המסורתי עם הקו התחתון שמציין שיש 'יחומר נוסף'' בנושא מעבר למה שמתואר בגוף הטקסט. > קישורים מבניים (5א118 !גזטפז6טז5%) הס קישורים שמצביעיס בצורה שיטתית על רמות אחרות של מבנה האתר, וכן על ייהוריסיי או ייילדיםיי בהיררכיה. חשוב שיהיו קישוריס מבנייס זהיס, כדי שהמשתמש יידע לאיוה אפשרויות ניווט לצפות. כמובן שהיעדיס המדויקיס עליהס הקישורים יצביעו ישתנו מדף לדף. לפיכך, עדיף לרוב להשתמש במנחי קישוריס (5זסח6ח אחו1), שנותניס שס ליעדיס הספציפיים, כדי לציין את היחס המבני הכללי בין הדף הנוכחי ודף היעד. לדוגמה, עדיף ליצור קישור בשס ץ!והח3: שטססזק 066סו סז יי מאשר קישור בשס ייק |66] 6חסיי (רמה אחת למעלה). > קישורים אסוציטיביים (%5ח11 6ש455061811) מיועדים לתת למשתמשים רמזי ייראה בנוסףיי אודות דפיס שעשויים לעניין אותס משוס שהס דומים או קשורים לדף הנוכחי. לרוב, עדיף לייצג קישורים על ידי טקסט עס קו תחתון, לשמור על צבע סטנדרטי כחול (6טום) בקישוריס שעדיין לא נצפו, וצבע סגול (פ!טזטט) עבור אלה שכן נצפו. כולס לומדיס להתרגל לכך מהיוס הראשון ב-60/, ואין שוס ספק בכך שטקסט עם קו תחתון משמעו יילתצ כאןיי. הקו התחתון משויך כיוס לכדאיות ללחו עליו, ולכן לא מומלצ להציב קו תחתון מתחת לטקסט שלא ניתן ללחוצ עליו. בעיות השימושיות מיוחסות גם הן לקישוריס שאינס נראיס בצורת טקסט עס קו תחתון פשוט. יש להשתמש בתפריטים נגללים וגרפיקה למטרות ניווט בלבד ולהיוהר בשימוש בהס, משוס שהס לא מתנהגיס בצורה הסטנדרטית של טקסט עס קו תחתון. הס לא הופכיס לסגוליס למשל, אס הס מקשריס למקומות שהמשתמש כבר ביקר בהם. פרק 4: עיצוב האתר 195 סוכ רהעוכ) +ח6רהסטנשסוש] 1/6 +חסרהפטסו/] סוקרהץוכ) 6חד בו מ 2 הההההנ] 200 69| טח זט58ס זה גז5 ל טי ז פצוה'0 95טףוקהע!0 050 65|||?) אאאאאאאאמררן ,)הצ 8 8 9 1 טזס.6/קותץ/ס./ע/עעע אחד מעזרי הניווט ההכי לא שימושיים שראיתי ב-60/. למשתמש חמש אפשרויות ברורות, אך אין לדעת מה תוכן אפשרויות אלו בלי להעביר את העכבר על כל אחד מהלחצנים. ייתכן ש-66וח 60 6וקוחץו0 רוצים להבטיח שהגולשים חסרי הכושר יאמנו את אצבעותיהם על ידי הזזת העכבר. ממשק ניווט חייב להציג את כל החלופות הזמינות בעת ובעונה אחת כדי שהמשתמשים יוכלו לקבל החלטה שמבוססת על ידע - איזו אפשרות תספק את צרכיהם בצורה הטובה ביותר. לא זו בלבד שצריך להזיז את העכבר כדי לראות את האפשרויות, גם נדרש לזכור את האפשרויות שכבר נצפו בזמן קבלת ההחלטה במה לבחור, כי כשהמשתמש שם את הסמן על אפשרות 1 הוא לא יודע מה יש ב- 2, וכאשר הוא שם את הסמן ב- 2, הוא צריך לזכור מה היה רשום ב- 1. הקש האחרון בעיצוב של אתר סוקוחץו0 מגיע בצורת הלוח שבחלק השמאלי של המסך. לוח זה אמור לאפשר למשתמשים גישה מהירה לאפשרויות הניווט הראשיות במסכים הבאים, אך הוא טוב רק אם הם זוכרים שמשמעות ריבוע כחול (מספר 2) היא "ח6!טח6 |0168". זה לא בדיוק שיוך צבע טבעי, ולכן המשתמשים ייאלצו להשקיע כמה שעות בלמידת מבנה האתר כדי להכניס את טבלת הצבעים לזיכרון ארוך הטווח, אם ירצו להשתמש בו בצורה יעילה. מה שאנו כבר יודעים אודות ה-60) הוא שאף אחד לא נאמן מספיק לאתר מסוים עד כדי כך שהוא יסכים לעבור סדנת אימונים מיוחדת כדי להשתמש בו. 6 עיצוב ממשק באינטרנט 6וסוכרהעוכ) +חסרהסטנשסוש] 1/6 +חסרהפטסו/! סוקרהעוכ) 6חד בחולן ממ 2 וו 200 [ 9 סאאסאא | | || | משמממע ב תתו ו ]הט 9 לא ז פצוה'8 65שףוהץ!0 א188 8%||ווץא | סוכ רהעוכ) +חסרהסטנשסוש] 1/6 +חסרהסעטסו/! סוקרהץוכ) 6חד בו מ ד ות 00 [ 98 סאאסאא | | || | ₪ממממע רב תתו ו ₪ 9 יי צבי וו ו מסוג ק ופ כ זפצות'0 65טףוקהץ!0 168 8%|||צא | ו טזס.6/קרחץ/ס./ע/ע/ע פרק 4: עיצוב האתר 197 לחצן המנכ"ל אחד מהסימנים הקלאסיים לניהול גרוע של אתר 60/ הוא כשהדף הראשי מכיל לחצן עבור המנכ"ל ועבור כל אחד מסגני הנשיא הבכירים בחברה. זכור, אתה לא מעצב עבור המנכ"ל או סגני הנשיא. אתה מעצב עבור המשתמשים. לפיכך, לא יהיה זה מעשה בלתי מקובל, אם לא תוכל ליידע את המנכ"ל וסגניו היכן הלחצן "שלהם" נמצא בדף הראשי. 8 עיצוב ממשק באינטרנט מבנה האתר לא משנה באיזה עיצוב תבחר לאתר שלך, עליו להכיל מוטיב נפוץ שקיים בכל צורת ניווט: עליו להמחיש את מיקומו הנוכחי של המשתמש ומקומות חלופייס שמתייחסים למבנה מרחב המידע. אם המבנה גרוע, אף צורת ניווט לא תוכל להציל אותו. ארכיטקטורת מידע גרועה מובילה תמיד לשימושיות גרועה. לרוב האתריס יש מבנה היררכי בעל רמות מידע שעולות הדרגתית ברמת הפירוט. לאתריס אחרים יש מבנה טבלאי בו הדפיס מסווגיס יחסית למספר תכונות או פרמטרים. לדוגמה, ניתן לעצב את דפי האירועיס באתר המשחקים האולימפיים לפי סווג של סוג הספורט, הנתונים שלהם ומיקומס. המשתמשים יוכלו לראות את כל הדפיס שקשוריס לסוג ספורט מסוים, או לאירועיס בעיר מסוימת. מבנה ליניארי הגיוני. שני הכללים החשוביס ביותר במבנה האתר הם : 1. קודס כל שלאתר יהיה מבנה ברור. 2. המשתמש יוכל לזהות היכן הוא נמצא באותו מבנה. קביעת מבנה אתר היא פעולה שנראית ברורה, אך הרבה אתריס קמיס ללא מבנה מתוכנן, ובסופו של דבר הס הופכיסם לתוהו ובוהו בדמות אוסף תיקיות אקראיות בחלקיס שוניס שלהם, שאין ביניהן שוס קשר. טעות נפוצה שנייה היא לגרוס לכך שמבנה האתר ישקף את מבנה הארגון שלך במקום שייבנה מזווית המשתמש. המשתמשים לא צריכים להתעניין בצורת הארגון של החברה, ולכן הס לא אמוריס לנחש את המבנה הארגוני שלה ממבנה האתר. אכן, קל יותר לחלק את האחריות על האתר למחלקות ומדוריס לפי שרשרת הניהול והתקציב הקיימות, אך דבר וה הוא יתרון פנימי לארגון בלבד ולא למשתמש. מבנה האתר צריך להיקבע על ידי המשימות שהמשתמשים ירצו לבצע באתר, אפילו אס משמעות הדבר תהיה דף מידע משותף לשתי מחלקות שונות לחלוטין. לרוב, יש לחלק מידע ממחלקה אחת לשני חלקיס באתר או יותר, ויש לנהל רביס מאתרי המשנה על ידי שיתוף בין מחלקות שונות. [|66 | [|66 - 08 5880 ו 1 [ 08866 | ? 0 מחופפוח5 1 - 0 בחו!!ו8 הז 0 !חופםוח5 1!505 68יו= 5 186% 666108 טסץ ,ס4 4 !ז86זס שז6ש6 חס פַהוקקות5 ,6זסוח זס 00|65 7 667ץס טפץ הפחש 5 שלוזסוזק 68 3 666106ץ טפץ !הזח קט פסנזק עשם 1 86 398 6 פסְחבּזבּטףָ 05 הַחו35 ת6ץטק זס) 6|פ303||3 665זק 6 וטס ח! זו טספ3 פזסוח ₪636 .סיס 5 פטס || ז0 (003730586 סחופם ה ו 0011108165 116 זו 7% 3 306 6671163665 3106 זט טס יס .וףָ שְב03חזופ זס טֶב03!סת טסת*ושי שק )6 וףָ 06 פטוףָ ח63 1 חוא 35 שיסחא 60 פַחוטבת 5 6 ע1 0/1300 17160 וטס 165 סרח 651 ו 5108 חיוהם זט סק פע מח8ש66ז= וטס זטס 60 678005 55078 65טוףָ !615 50ש6 חַָחושְטפ ש|סח6טף6ז 6.60 פ/שסש0 ./עעשעץ :חוסק או5 בבן וי בחואסבזד 00 | 3685ו₪10 | 63 בחהוטטסח5 | 5עפא | אסטם 50 | הסז583 | פחפם ** 0001815 ** :זם1 ספשסיום :סז |בזח6 ח| 450/ 1-17ה] 5 הַחווחססק צואה 5 15 ₪351 6ח1 ח| 26163566 !ששו 681800 זח6'"ו"וט6 ח1 85וד 753 650 | 651-700 | 701-750 | 3 בסוזם החטבה בוד עטם 0 ה '[הוה6' ,10 זוז 0 6 "[ה1ח36]' .פחהוזהחזוהם 101 ]006 00 2 '[ה461]' פעסאווסו 12 ז6הזס 0 ₪013 '[ה1ה6' 1941 זז 0+ 2 '[ה1ח36!' עסווה/ 6ו!1 חו פעְהם 2 זפהזס 0 06 '[ה161]' 61הזוזס:) שאה 6עע זה6צ פווד :2010 זז 0 אש '[ה1ה6' 6088// 1/2 9 ז6זס 0 ה 16711" ...זוז ז5ה | זווסטה ז6זס 0 ה '[הוו%6]' שה | 1106 סטסטה ז6הזס 0 76 *[ה1ה36' 8166 01 056866 ז06ז0 00 2 '[ה601+]' זסעסק 6זו!ספטם ז6הזס 0 813ק "1611" ,0616616 261 :ה זווזווס/ 66 ז6טזס 0 013 "16181" 1!5ה<) 6 זווזה₪ הסווע/ :ה זווזה6/ 266 ז6ז 0 ה '[ה161]' ה50א6ה!. הסוז6ת ז6 זז 0+ 2 '[ה461]' 6עס.] 10 06160160 ז6זס 0 ה "13611" הסוז6ווה ז6זס 00 2 "[ה1ח16' 661צו5 עז .א זהק זסחה זפטזס 0 ה "611" ה6וזסחזה זוה ז6זס 0 6 'וה!ה6' ,ה זוה זפזס 0 ה '[ה1ה36' 06 66זס] זוה זסזס 0 הא 'וה1ה46]' קאה וה=טאסעע אן = וה זסזס 0 ה '[ה1ח6' חפו|ה זפטזס 0 ה '[ה1וו6:]' 3 חסוות זסזס מבנה מידע ליניארי הוא לרוב סימן אזהרה לשימושיות גרועה, משום שה-60/ אינה ליניארית מטבעה. המשתמשים לא רוצים לעבור בנפרד דרך כל רכיב באתר. בדוגמה זו, קשה לתאר משתמש שיסרוק רשימה של 753 סרטים בסדר אלפביתי. עדיף לספק סדרת חלופית של עקרונות מבניים, הכוללת דרך למיין את הסרטים על פי איכותם (לפי הביקורות) ודרך לסנן סוגי סרטים מסוימים (לפי שפה ואורך, למשל). במקרה זה רשימה אלפביתית היא פתרון מצוין. הייתי מחליף את רשימת הקישורים המספרית (51-100, 1-50 וכך הלאה) ברשימת קישורים אלפביתית 0-0, 3-6 וכך הלאה) מכיון שלקוח אינו מחפש את הסרט מספר 451 ברשימה, אלא את הסרט המתחיל באות 6. פרק 4: עיצוב האתר 199 0 עיצוב ממשק באינטרנט (בעמוד הבא) באפריל 1998 זס)חס)] 5616066 ח508וזח0 סחדך ערך ניסיון בתכנון מבנה אתר וממשק ניווט, ששיקפו את הגירסה המודפסת של העיתון. המשתמשים עברו דרך גרסאות פשוטות של תמונות הדפים הממשיים של העיתון היומי, ויכלו ללחוץ על תמונת הכתבות, כדי לקבל את הטקסט המלא שמוצג בחלק הימני של החלון. הבעיה העיקרית בעיצוב הזה היא שהניווט בו איטי להחריד. כל אחד מצילומי הדפים המוקטנים הוא בגודל של כ- 8א60, וזמן ההורדה שלו הוא כ-20 שניות במודם 28.8. ידוע לנו שעשר שניות הן זמן התגובה המירבי לקבלת דפי 60/, לפני שהמשתמש מתקומם. ניווט משופר דורש זמני תגובה קצרים יותר. הניווט בין הדפים נעשה על ידי תפריט שאין בו דבר פרט למספרי עמודים. המשתמשים אינם יודעים באיזה עמוד נמצאת כל הכתבה, ולכן עליהם לנחש ולעבור אקראית לדפים. היה עדיף בהרבה לספק תפריט של כותרות אזורים או כותרות ראשיות. לדוגמה, יש יותר משמעות במעבר ל-"ח56600 ₪000" מאשר ל-"14 6ְאָבק", בהנחה שהכתבות שעוסקות במזון נמצאות בעמוד 14. מספרי הדפים טובים לגירסה המודפסת, שבה המשתמשים מדפדפים במוצר פיסי, אך ב-60/, הכל נמצא במרחק שווה (לחיצת עכבר). לפיכך, נדיר שמבנה האתר צריך להיות ליניארי. יתרה מזאת, עיצוב זססוחסוי! לא איפשר למשתמשים לקבל מבט כללי מהיר על החדשות העדכניות וגם לא הסב את תשומת ליבם לחלקים בעיתון שעשויים לעניין אותם. זוהי מערכת ניווט ליניארית טהורה, שהפכה לכמעט חסרת תועלת בשיטה האיטית של "הפיכת דפים". בזמן צפייה בעמוד, לא ניתן לקרוא כותרות, אזורים, כותרות משנה, או כל אחד מהמרכיבים הקצרים אך חשובים של עיצוב כתבה, שעוזרים לקוראים להחליט מה לקרוא. לאחר שהמשתמש הצליח למצוא כתבה מעניינת, העיצוב נכשל שוב משום שרק חצי מהחלון זמין להצגת הכתבה הממשית, ובכך נדרשת יותר גלילה מהרגיל, וקשה לסרוק את הטקסט. בנוסף, השימוש ב-365?= מקשה לסמן כתבות מעניינות, או לשלוח הודעה ובה כתובות !חש של כתבות מומלצות לחברים (שיטה מצוינת להגדלת השימוש באתר ס6/ על ידי ניצול קשרים חברתיים). ד ד 86 אסווס הסהאסא פסאפו50 3% 4 הס 55 סד + 4 ה זומפהטסצ 1005 8016206 ₪](5| 600005 פאפפע 2 185% 0 5 868 ) 8 ,2 וז סה , צה ספמטווד - אסזפסם 3 8ח+ הַה68/6ץק +0 6%וד פד 53 01 1631 116 101 צדפזמתתנ0?) 00 ה--. - צאססם ]0-כ 5 ו | 606 7267 , 30076 וא 58 פשםת1ם7680 |[וטע 615 ]תד קדמת 8 זנק כו 65ב 3ת6ק 8 610310 תסםאבת 110 שו . 1071113116 8/1 0611 שב1כותנ8 זגוט ב שָגוכתב681ת .66183 0[טלטת6 266תפזנוקבתסט 11036 זנוסס8 שַתט(1מז1 בת'ך 3 קפכתט 181831 16 , סנ טנק ות8 , ותנוס5 ,151 תוגאד המלספכ שַתס.1 בתנו30 1106 . 61383 6212-0011 116 ת676 עס סאפ כזתט 166ת6%8 ססוגת , עַ1שַת1ת כננו5 , הנ .16802153 360181 פעכ1י1 . ס16י תס .קת 110תנר , ונח אב 68183 ס[טעטת6 011 -כ21) 5 1 .811% תסובת %סכ1 כ% אַתמז₪6 6נ'עשתד סק עפ קדממיפת 5בנגתטכתק צנום 1 כ 1153 6 תנתמ 0שבם 36 נוכבנ ג תפקה .31153 1פהתפזת1 01 3 ת38נוס1 5 365 183 8קנתתמזב 3 .6018 ס[טקלסתת קש 0כ31 5 ,ו בנ ננובתג שגד תת שתטבמו ממ | 120156 ]הווה 1 גת 6ב 0ט6ס 6 , 61806זת1 113 66קבתפקוס . שת תוס קי[נובשי וחס6 .65070001 ./ע/ע/ץ לא הייתי ממליץ על העיצוב לאף עיתון, ובצורה אירונית הוא לא מתאים במיוחד ל-זסזוחסוז. רוב הדפים שבו מכילים לא יותר מכתבה אחת או שתיים. לפיכך, סידור הדף נותן מעט מאוד רמזים על הקשר בין כתבות או מאפייני כתבות מסוימים. לעיתונים אחרים יש סידור מורכב יותר בו המיקום היחסי של הכתבות בדף מספק יותר מידע. פרק 4: עיצוב האתר 201 כדוגמה למבנה היררכי, ניתן לחלק אתר חברה לקטגוריות רמה עליונה, כגון מידע אודות מוצריס, הצעות עבודה ומידע למשקיעיס. הדף הראשי הוא הרמה העליונה בהיררכיה, ולכן קטגוריות ראשיות אלו מהוות את הרמה השנייה במבנה. המידע אודות המוצריס יכול להתחלק אף הוא למשפחות מוצריסם (הרמה השלישית במבנה), וכל משפחת מוצריס יכולה להתחלק למידע אודות מוצריס מסוימיס (רמה רביעית). לבסוף, ניתן ליצור לכל מוצר דפי מפרט, תמחור ואפשרויות הגדרה, כתבות על לקוחות מרוציס ומידע אודות שירות (רמה חמישית במבנה). חשוב על דף שיש בו אפשרויות תמחור והגדרה של מוצר 061/1006%ט5. דף זה שייך לחמש הרמות של היררכיית מבנה האתר: 1. אתר ה-פ6/ של החברה (בניגוד לאתר אחר). 2. קטגוריית ''סטססזפיי (בניגוד לדבריס אחרים כגון הצעות עבודה). 3. משפחת מוצרי 0066וש. = המוצר 006ו//ז6ק50. 5. תמחור והגדרה. החשיבות ביצירת מבנה שמתרכז במשתמש בפרויקט מסחר אלקטרוני שעבדתי בו, טיוטת הדף הראשי הכילה שלוש דרכים להגיע למוצר: פונקציית חיפוש אחת ושתי סכמות ניווט, כששתיהן הוצגו כרשימת אפשרויות פשוטה. סכמת ניווט אחת היתה בנויה לפי נקודת המבט של רוב המשתמשים על האתר. הסכמה השנייה נבנתה על פי הדרך בה רוב חברי הצוות של היצרן הכירו את קווי המוצרים שלהם. התוצאות מבדיקות השימושיות הראו שההצלחה היתה 80% כשהמשתמשים השתמשו בסכמת הניווט שנבנתה עבורם, ורק 9% הצלחה בשיטת הניווט הפנימית של החברה. הלקח: סכמת הניווט השנייה הוסרה מהאתר, למרות שדבר זה היה למורת רוחם של חברי הפרויקט. לסכמה השנייה היו יתרונות רק עבור אותם אנשים שידעו לעבוד איתה נכון, אך היא הובילה את רוב המשתמשים לבעיות, ולכן היא גרמה יותר נזק מאשר תועלת. ההשוואה בין 80% הצלחה ל- 9% הצלחה מובילה למסקנה שהשימוש בארכיטקטורת מידע שבנויה על פי צרכי המשתמש, טובה פי תשע בערך מבחינת השימושיות שלה מארכיטקטורת מידע שבנויה על פי צרכים פנימיים. כמובן שההבדל המדויק בין שתי הגישות משתנה מפרויקט לפרויקט, אך לרוב הוא גדול. אני לא מתכוון רק לכמה הבדלים באחוזים. אני מתכוון להבדל בין הצלחה לכישלון של כל מי שמנסה למכור משהו ב-65/. 2 עיצוב ממשק באינטרנט אני מעדיף להציג את כל חמש הרמות בממשק הניווט, משוס שהן כולן מסייעות למשתמש להבין את מיקומו הנוכתי. טוב יותר לתכנן את האתר שיציג גם אפשרויות חלופיות ברמה אחת או יותר. חלופות אלו מסבירות למשתמשים לא רק את מה שהס רואיסם, אלא איך ניתן לפרש את המידע יחסית לאפשרויות אחרות באתר. בנוסף, כמובן, רשימות חלופיות מקלות על המשתמשים לעבור ישירות לאחת האפשרויות החלופיות אס היא מתאימה יותר לצרכי המשתמש. בדוגמה שלי, הוספת רשימת החלופות לרמה הרביעית של מבנה האתר תראה למשתמש שמשפחת מוצרי 86%ָ0ו מכילה את המוצריס 086%5!\וחוו! (-108660135516/ בנוסף למוצר 006%ו//ז6קט5. אס המשתמש מעוניין ב-006%ו/וחווז, הוא יכול לעבור ישירות לדף המוצר המתאים, ולנווט משס לדף התמחור וההגדרות המתאים לו. רוחב מול עומק כיום, עיצוב הניווט הנפוצ ביותר הוא לכלול רשימה של כל הרמות העליונות באתר, לרוב בצורת פס אנכי שבחלק השמאלי (אנגלית) של הדף, כפי שנעשה בעיצוב המקורי של חח ס5.6א6ח (בעמוד הבא). היתרון בעיצוב ה הוא שהמשתמשים מקבליס תזכורת קבועה על כל השירותיס הזמיניס באתר. דבר וה שימושי במיוחד עבור משתמשיס שלא נכנסיס לאתר דרך הדף הראשי, אלא מגיעיס ישירות לדף שנמצא אי שס בתוכו. למרות שזה יתרון, לדעתי מוגזס להקדיש 20% משטח דף פנימי לאפשרויות רמה עליונה, שניתן לגשת אליהן מהדף הראשי במחיר לחיצה אחת נוספת. הפס הצבעוני משרת מטרה כפולה כמנגנון סימן היכר לאתר, ומקל על המשתמשים לזהות שהס באתר המסוים הזה. הפס הוא גם סוג של לוגו שעוזר למשתמשים לזהות את מיקומם ב-ס6/. בעוד שלאתר חסס.8ו6ח יש עיצוב ניווט שמדגיש את הרוחב, סרגל הניווט ב- וחסס.זו6פט מדגיש לחלוטין את העומק. הוא מציג את הנתיב ההיררכי המלא מהדף הראשי דרך כל הרמות ועד לדף הנוכחי. לפיכך, המשתמשיסם מקבלים תחושה מלאה של מיקומס הנוכחי יחסית למבנה האתר, והס יכוליס לעבור פרק 4: עיצוב האתר 203 מערכת הניווט בעיצוב המקורי של וחסס.5וו6ח כללה שלושה רכיבים: רשימת יעדים ברמה העליונה בצד השמאלי, רשימת כתבות עדכניות בצד הימני, ורשימה של כתבות קשורות בתחתית. ריבוי ההתייחסויות יעיל, ומאפשר למשתמשים למצוא כתבות שהם חיפשו מלכתחילה. אני פחות מרוצה מהשטח הגדול שהוקצה לקישורים לחדשות עדכניות ולא קשורות. הייתי מעדיף להציב את רשימת הכתבות הקשורות בראש הטור הימני, משום שזה יגדיל את הסיכוי שהמשתמשים יראו אותה. אם המשתמש הביע מספיק עניין בנושא הכתבה הנוכחית, עד כדי כך שהוא בחר בה מתוך תוכן העניינים, סביר להניח שהמשתמש יהיה מעוניין גם בקריאת חלק מהכתבות הקשורות. דבר זה נכון אפילו במקרה של משתמשים שלא מעוניינים מספיק בפרטי הכתבה המסוימת, ולכן הם לעולם לא יגללו את הדף עד סופו. 4 עיצוב ממשק באינטרנט בג 1 65למ8| | 1080610 73 הת ו [ 50050008 ] 8 9 וזו ה 60 00 ו ו 1 ד .חק 6:55 1997 ,26 010961 ו סוד 8 0 5החוחחסח זגוס? || זם פהסטה ותזהחסס פחד ופ ]פע הסו55ו תח בטוח ורס !9073 (3ח3לחס-8) פחזטום 30זחס6 .ח58 צְם צְ03סל סט | 653 ח! 55ט31 6 וופון .= חב התסתכ8|ל קחחב/יפז סט עְסחפָּבּ פס 5לחב/ו סחשצ םס 37835 |בזז זס] 3695ז "סוז50 |ב5זפוווחט" פחווחס + הסט ₪18 * 801 ]6 36165 | 0/8 8 5 6 חחו 7060/55 5. וה 8 5310 פחזטם , 003 36| 55080| 503098 3 ח 8 ז0 |העיסזםם3 580308 80אסס|ם הסמל 5ב 66 השוא "86 חזטסתסס" | ₪ 58טבספם 5טפחווחסת + > 108 |10 9 9 6 שוש | חם חססופסם 5'טזה תתא חבו!!!ו הותזסח חב וזוהתס וצ 303000 5תסופוסזםן ופטח ,50108 |ה5זפצוחט 0 זז וו 00 !טל |873 180 5 זה ץ 135% ו 3 0015ח50 08 ושיסזם סל 801180 | 00 פוס ב + החסח0 ספסחבוטב תסואו 885זב |הזנוז חב הוחססחו-אוס ,503085 /ם 510501280 15 חסוח וי 5871085 8% חב 30 ,85 הסט ,זתפותזפזיסט |3ז1808 רס 85 סט 05 בטוח טרח 800|ס ה 0 56 831וום > ג תבו 5'תסו55תתחסס 6תפזזטס תס ,5חזטם סל הַחוטזסססת. ב זט לחת זפ ץסט 08 זט להפסזפם 75 סטום 5ב | זסתמָות + 80| !גוס 5חזהוס טח הסוח ,55095 חס ות , 2 מא סל 585תסזכן זה החפ 6 ההַטסרלום . 7305 הסח | 065/00 ספ 6410 ה 5 ,587108 630|8 חב פהסחם |הסס! זם? אום| 365 ודד 8 > 8 חס הפאזס/ 8 ,6פחגוסט 09083 005 8 ו ץ43] פות? 86שסזמס3 35 הרט חבום בבר , שא . " חב 830875| |חסו855זהחסט רטושו החואזםצ וחב 1" 0 ו 10 5חזטסתסס 01858 8501+8ז סל טזהתחפ% חופנ וט 5070 1" .50305081 טל חו 530 פחזטם 8 ₪3 8855זְהַח60 ]0 להפסח הז לס 35 או סו תס סז 830 הט 58108 |ב5זפוווחט פרם 1ם הזנססנרס5 5 פווק5 25-75 4 .3095ז הסחמ זפחטות "309308 חנ 4 |₪0 חו |וגצפזם 3 ד8 > ]0/8 13685 ח8 זט * 0 מסחווג! 60 6ח| וטספ > 65 1306 3 8865טא 50 + 5 הסמ 5 עְבח 8 תסטו50 חס 0פסבסוטחו פחזטם ץוחו להפוטתפוחה |11פ 5 הססבמטזסטב חב [ 0 5 = ₪שזם 35 הוחא ,(8-43563) 5חפכס5 פד חספ 7 588 סח[ זפ רפה הותזה 88% ס> 00 6% 8 > .58708 |58ז8ץח ס6 פסנוטושחסס ₪|נוסח5 5זפטויסזם 5 003 8001185 50| לחפוםתפחב 505805 החך פחסחם 60 הַָזבחס 300855 בסטחוו-זט 3 עה 8 סל 15085 150 הַתמסהתחסט זם! 85וחה מתחסס 5זטס תפס חססוא5 סס|פס בוש 0 538 פר0 לתמטס? ע!8558ססט5 ץ'ספטוטחו פחווחס החד בופ עְטחפטָבּ רל תפח/ו זהפץ פורל זפווזבם פתסופוצסזם 58108 87531 ץוח חס 5חַחוז הפ של חַחוסזסססה. ,035580 לסת 5| להפהחםתטוחה פוח ]1 0% סל 80 הזר 135 50| 5087805 ,5פסזו50 5ווח הח 3 8זונספז חסוחש , הסט ההותחסת וס 3 זו הסט זס) סש 58308 מב וטס 588 3 ,8 000087 חס זט 058ס רטוש הַחס!3 ,הסט התוסח 5'טזה החפ 8 פחם ]0 503 זם )פוחס ,|פעויסק |בחסוון זב ;חסופוויום טוחב 5 לתסותהסטס 8 8 זט תס 800 ]018 , תססח-- סטסתסזוו 3 , וח5%3חד בוזס|6 חב ;ות 60 8סזפוחוחס חס 3זס 60 ססואם! אי 018 זט זטותפוז יב יי וח 188186 7 ,8 0610561 86צטזפמג 665הוחזפח 00 * 7 ,2 0010561 8165] אוט| שאוס 66ח|חטת 00] * 7 30 0561 16ק56 |שחטה 3087 חס(ופחגש חן 0ס] * 7 ,6 טפט 61 חש 60!308] 0) 366 חח66 00'5] * 7 ,27 3 40000 6 10 61|ח0 00] * 7 ,7 43( 081 ז0) 560106 |8153/וחט חס פוט 00 * זז המוז |ג. ה ,דפס 1995-97 ₪ %ח8ושטס. 607 .5/שסח ./ש/עעץ ו 8וווזסס פופו! רוזחי לשו 106 0 ב םה 8 ו נמ ן 5 זספווס שאטאס ואפ םסא זם אהו יי 8 וס זט העיצוב המחודש של וחסס.5שש6ח משנת 1999 טוב יותר מהעיצוב המקורי מכמה סיבות: הפס השמאלי של הרמה העליונה נעלם, ומשום כך מוקצה יותר שטח לכתבה עצמה. בתחתית הכתבה יש עזרה בצורת קישור "%א%ח60 חו צזס5% 566" שמעביר לכתבות קשורות. בנוסף, אם המשתמש קורא כתבה ישנה, קישור זה כולל רשימות של כתבות חדשות יותר. |05 | 6 ב " 3 ה ₪ ספ 62 566 106 65% 01106 5107 ב הויו ו ופ 509 * ה 0 הדור * 510051091 61חז6זח! 011 הוכן5 0+ והסזז5זסו מסחפצוסצש עסזד ₪ החסט.פשופצ! דצ ,זפוחש/ ₪13 ד .חס 6:25 ,1999 ,24 ופטטטות. בו (0950 חס 08פו ווה 6110 61 | זו זהוו1 1008 660 הווסווה הו ז851 זא הוהו61 6 זסז5 זווסהודוהק6ם 6והקר 0 הזזה א הרוס ור זו וחדוה וע זהו51 5 סוה זס זור חו ומפופ פחופן סו 1הזפ ות הס זסז851ז0! אופח 115 חו 0358 חו חסוו!וחז 0 1 51פח! !ואו זפ 913 5980-0850 פד סז5טזס א . 65505ח5ט0 63130 חב [פחזסזח| יח קהחס6 1 זפס 188 ואו תושו 38וטופפטופ 5 5 ||ואו טוח או 301131 0 אהת סח ,מ9ו0ופפנו5 אופח פתז ח| 5188 סרח 3 חאום ואר זוא וא 35 הס התסזו5זס! ח| 5138 מוהסחווח 3 פצפת וווא הזב 1 הזוחו 6ת1 חו חסווווו. סז חר 59 108 ח! סטנמד בדו חוסן רת טוח 501 חו811ספ, ו וס סז ! הסוח 5115 50 יפות 3 ם |!ואו ₪98 8ה11ס פתואוסזטונוס ופזח 8ה1זס חס. 5118 ה ".51078 506 51 טומ "!סו" פ-פ1-הסס50 תו 35 6מפנוט 1310085ה950 1 5 508900 8 טווסח פת1 עם 085ח5 1 זו חסווווחז 20 8 ס5 זפחם וו 607 ספ התסז5זסצ 5 חטטסזתו 5085 זס זו 200,000 עוחס זפזוס 1 58/6 התסזו05זס א .58/6 רתס 16 זמור .56 488 זט 5 תפצ זה 015 01 7 פוה 781 חפט תוזא01 ססם. ט חוחחטז שח קט 8 10 זס51 פת 015פסאס פ 510 5ח30/0זסקס 6 ופ !הפשו חסווורז 517 3 החש 15 תוחאו רתסא = כ 1999,1:01 .26 8 | 581 5 .5/18 תו פוסהזסז 10 חו8סם וו = 15 9 מא חזסס .הסט טזסה שתז חס 68195 חס זפ 30 הסט = | 1 סוסא בד 3 2 31250 וח 5 סחווחס תו 810חוהחס 10 5חהו עה פהתס6 דד זפתזס פזחו 5זפהחס!5טוס תפנום ס1 5118 508 אופת 15 8ש ווואר חאום 10 608 ".5810 86 חס קנ = שמח עס 6 [סמהעט עט > 8 תס 8 5 סח 9-5100ח0 3805 ו וטו 055 פמ ה סו 190 008 3 1805 וחוזס וז | תק חפט תתחפה 10 מַחו01ס. א פווד ו 50516 | ח3 35 סט 501 מ או וד טס דסא 1308105 8 8 5118 סחווחס שד .5חסו31זפמס עו081 חצוס 01/85 68106 ו ו חס הס!וטטו₪151 3 חפ ואו 55חופטט 18/08 חטוווד 8200 עוו סז 81 5865 6818100 65108100 916518085 00 .8אוס| , 105 ה 1 0טז! 67 1101 6זסוא וז 3515/20 5שוסגום. 005 50 0165 וו 3 וו הזבמ 0115 31 ת1 הס 50118 סט ||ואי סופ 0151 חספ חס תסו 1 פטוסתווה. ות 90 .5810 זפאח ,51078 הזסזו5מזסצ! 3 10 טסט חזנופז 10 סוה ספ וא 6זחחס1פטס טס 0-60 1051 !חנ 1081 וח 510195 וחמ חס 5 טזסא סז חו 318 5/8 18 חס ענו עח1 5 חזפ!! חס 13 53185 3 עס 10 שח |[אי זפ רחס51טוס הס החסזו5 זט ו 8 0 8 9 שפאווח 01056 1316015 ו ]חפ ו ו 1 18 מס | 5105 1081 ת1 10 ספ 60 הח 9015 חמ 9ת1 5300 לשו םה 8 197 50 1855פ סח ו סס רו 3 מ 10 תס 5 ה 3ת תוס זו" 80% וז פוא 89/0 :31915 ה. 8 עו 60 0-60 5" זה 6061 סז ה תו 07 כ 86 5זס01פזט 01 081 5'חזסס.וזס51זס%! חופן ו סש 001189. ו ואו פ[5חסו918 13116 5'רחזח [חפרת51 יחו 16 ההסז1 017875 הח 510 זסג! הווא 808 815 רתח סחסם. ו זפופח 51085 סאות פת1 חסוחאי מפנוסזת1 801 התס6.נתפעסד פת1 סאווחט , פחות1 חס זס: .25 "ה" פעסד 8 016 876 01050 317680 6 הסוס תוא ₪091 תו 5818 06 ,תס חח 3 096פו5 עס 7 180 הו 1 חח 3 85 הזסס הזמ 51 זסצ! ותה 018191 החחזו 11501 06 096ווסם צוסח זס) פמוח וס 8 51 33 ו 8-1 -א םת תו 815 10 חס תפות ות חפה 181 581 וז 8 וחס 1591 95פז1 109781 1 ₪ שווסאו שחנ פזנזתפי פח1 ,60 5ט51עסיד החסז11נו10ו3] הז 868056 זטם ‏ פוט פתו חר ה זט 51 5וזסו5 01 זט 868058 חח 178619 008 הזסזו05זוז חל .680005 וז 808 ו 073110 58185 111001 8 85ח 118111 ב 570100 זפהתפופטס ס1 מסווחפ/ו8 פור 8 855ח/פטם 018100 81חז9וח! 07 חפ 10 הזופ זט ו הפו סט ואו ו רחסו 1850 לת 1031 5חס9 51 תוס חח 0 118 תס שו סד" חטטוסחפ 78פז ו אחות1 ו". 5810 עפוזשס. 58/5 חס 131 ו 07 60-01 עפ חס .1998 סו ח! סו 40 115 שת | החזו5זסר 018 011 8706 פע 011510 58185 111801 85 קמוס 118 85ת ע[תפזחטס חאו 36 0 א פד טסו 01015 000 97 ח81 9 5 צר 500 7 ה 85ווז ווסע וו אוש טש פווס. וס 1001 זס)חוזון זס) אסזר) ו ₪ 10 510 118 11 0 8 18 ופנא 61 שמ] חס 85ח5 ומ ופסכ פהחסרז ,05 "ה" פצפד * 8 פטט ז510פח! חזוו+ 1185 0015 .60515 80/ חס 05595| פ1פסם 05 "ה" פעסד * 8 וזא 5118 58195 191 318זס ם] 05 "ה" פצמד * דא5505ודהפטםא ב זו 8551 זט !|| החוש ה זו "19 וח 0ופאוסא ה חש זסוחס| בי 00003 36 05 4 * + עפ 500 > ץמא | הס עצפ א צז! | פעופון 00 295] | 5פו1 פעצסח זנוסץ 5 חפב | עצפו פוש פחוכ: :פחסוזקס פאופות ב 5507 6ח 01 65% 116 566 ב ה 9 | :005: זפסחזש!! | וס8וחסם. זו חס זנוס/] = > ססות זפ פותסס - 50| חפ סחוי - [05ב! טפש 3 טחו= .0 שופ 3 טחו= - 5וסטטסזם 81651 - 8795 0. 8 > 0/7 91 טסו 8 081 - פסס!. חספ . ₪/19! 6189 - סחוט!וטם 9990- פצסד וטספ ה - 508108 - 0805!ח00 6199 - פעוטצ! 905 ד- פחס!וטטא. מספיד - סט 1006 :50700605 ד 0 |ווחם 86ז6 - 5זפ!1פפופ! פפזם - ההבזססזם סופווה ידש 0 חוסצ. ו | 30010098 10 0 | ופט זו 06 או ד הזוס סוס ץבש .6580/86 ופ ווה .סח דאס 1995-99 9 ומטווצססס. הווה 607 .5/ששח ./שעע/ץ פרק 4: עיצוב האתר 205 לכל דף ברמה עליונה יותר בלחיצה אחת. סכמת הניווט הזו נקראת לרוב 85חזוטז6806זפ (פירורי עוגה) כמו באגדה 'יעמי ותמייי. לרשימת ניווט בצורת ייפירורי עוגהיי (המדגישה את עומק האתר) יש יתרון בכך שהיא פשוטה מאוד, היא דורשת שטח מינימלי בדף ובכך היא משאירה את רוב הפיקסליס היקריס לתצוגת תוכן. בסופו של דבר, התוכן הוא העיקר, ומחקרי השימושיות שלי מראיס שהמשתמשים נוטיס להתעלס מאפשרויות ניווט, ומסתכלים ישירות על גוף הדף כשהם מגיעים לדף סרגל הניווט שבאתר וחסס.ז/56 מציג את המיקום הנוכחי של המשתמש יחסית למבנה ההיררכי של תוכן האתר. שים לב כמה קל חדש. שיטת פירורי העוגה יעילה רק עבור לקרוא את מיקום הדף במבנה ארכיטקטורת נתוניס היררכית, משוס שהיא דורשת ההיררכי של האתר. קל יותר רמות מקוננות ממש כמו עצ התיקיות בסייר ליצור את הדוגמה הזו מאשר 5וססחו/צ. אך עבור מבניס כאלה, רשימת כל הרמות לפענח את כתובות ה- !חש העליונות עוזרת למשתמשים להבין, ועוזרת ושמות התיקיות בשדה למשתמשים לעבור במהירות מהדף (לצאת מהדף) אס הכתובת של הדפדפן. הוא לא מתאיס להסם. 4 5 82 558 35 8 ]₪₪ 00 שָז9800 | %חוזק 5 8 הב ד בי 4" 6 ס] 0% [הת+ח. "3 רתרחנו5 .חסו+60ק5ח/ ס15+1"ווסת / 5"ו6ק3ק / החסס. +561. ורורשי/ '/ : ק++ת 4 : ח%10+1/003 ָ 3 חחח 5 165006 ה0 152660 עשו!5391! ל-- הסוב ט|3ש= 4500506] ל- 55535 חב 03065 ל- 0)םו50ט 5 ה0וז5266ה1 צ0ו!531!! +0 עו ההוחטפ הַחוהח חס 53580 ||8 876 +8ח+ 8005 +0 58% 8 זס+ הבח 06880 6 15 הפ600ספח!ו שוןופ53ט הַחו0חו 8% וה 15 הס 60םפ5חו עשו|ופ58ט , ץ||הסוםץ ד , 61808+חו 587 8 50865ח! 5זסזה ט|ה יס 56/6 6ח+ 6א!| 155685 8007655 8150 8%0005רח 5016 תהַטסתץ ,,חאַו085 6ת+ חו 5ות6!פסזק שו|ופ58ט חס 6ס5חו צח13] . רת5%8ץ5 8 ח6 חב +0 עו|ופ58ש ||הזפצס 6ח+ הח3 פות6!|פסזם עשו|ופ58ש שח+ ז+ס % 36 08%+ 075 50601808 613086לחו 587 + הס 60 ספחו 6+ 0+ 8758[/85+ ח8! 8%0005רח 6+ חו ץז63 81+080ק 8 ח3ס הס ס6ספ5חו 5+ הַהוה68רח ,6% %80ח8 רת6!קרחו ה68ם צ]808558ח . 0|6ץ60+ו] הַחרז88הוחַח6 עשו|ופ53ט 53 00% 8+ חו 8005 8+ + 830 חס 030875 8+ 568 , הס בח םחו פיזסרת וס . (5ח50 ₪ ץ8!ו/% התס) | 655005 1050600 !5 הַחובּת 85ץ|פחו 38 8000 |החחזס+חו 05%רח 6+ 5 הסוזהט!]ה ע6 156 טסו * 531 115080פ85%3 5וס||0+ %+ח8רת8|6 6טחַ13]0 ח630 זופתזפתאו 6הַסטן 5%5ו]8018ק5 ("5005וזטפח" %38) 85|םוסחחוק 8 65070806 0+ 3580 376 60+075ש5חו 6+ תסוחאו חו +הה וב 3 5| הסוזהוהו651 156 16 8 ץ)||8סוםעף) 05ח67+ 6 3+ הבטף חו 5ח0ו085 (8זסרח זם) פס + עזו|ופ53ט 0/6ב|פ" (08ח1033ו6ק ז56ט 3 8%6!רחו5 0+ 6טפססזק 80]ו06%3 צחוסו|ק6% פזסרת 3 565ש תשטסיות+א!הש 6טסוהטסם שחץ )+ הַחו)ספחס , 8חַ18|0 8+ תהַטסזה+ ק5%8 ה630 85 855ססזק הַחוצ!50-ות6!פסזם 5'ז56ט %פח 8+ 0+ 880] 0+ 855780 6 חה0 %ח%6חסס ץ'זסרתפרח ₪ח3 608|5 595 8660 |טרחו5 חסחסה 80%זזסס 56.60 ./ש/עעץ 6 עיצוב ממשק באינטרנט (בעמוד הבא) שני יישומים שונים של שיטת פירורי עוגה (05ו6806707ט) באתר +ח 0065 ! (עיצובי השנים 7 ו-1999). אף אחד מהעיצובים הללו אינו מושלם. העיצוב הישן (העליון) ברור יותר, וקל להבין באמצעותו את הקשר בין הרכיבים השונים. הצבת הסימן < בין כל שם מסמלת היררכיה או רצף בין הרכיבים. בניגוד לכך, בעיצוב החדש (התחתון) הרכיבים מופרדים על ידי סימן מינוס (-). לסימן מינוס אין שום קשר להיררכיה. להיפך. הנתיב דומה מדי לרשימה פשוטה של חלופות חסרות מבנה. לרוע המזל, העיצוב הישן לא כלל את רשימת כל רמות הניווט, והוא השמיט את הרמות העליונות, שהיו נגישות בלחיצה על הסמל המשולש הפונה שמאלה (שנראה מטושטש במידת מה). לעיצוב החדש יש יתרון בכך שהוא מכיל רשימה של כל הרמות בהיררכיית הניווט שנמצאות מעל למיקום הנוכחי, מהרמה העליונה (0וזס)) ועד לשם הדף הנוכחי (שווו0ה5). כמובן שזו טעות להפוך את שם הדף הנוכחי לקישור טקסט. לעולם אל תכלול קישור שמצביע ישירות על המיקום הנוכחי של המשתמש. עיצוב 100508 (בעמוד הבא) משלב עומק ורוחב על ידי הצגת הרבה רמות היררכיית ניווט (עומק) ורשימת כל האפשרויות החלופיות לכל רמה (רוחב). החיסרון הבולט בגישה זו הוא שהיא דורשת שטח מסך גדול. משוס כך, תצוגה משולבת של עומק ורוחב תתאים יותר למצגות דינמיות שנטשו את ה- וד הפשוטה. ניתן להשתמש ב- |ודח 6ווחהחץכ כדי לשלב תצוגה קבועה של כל הרמות (עומק), יחד עס חלופות צצות (רוחב) בכל רמה נתונה, כאשר הסמן נמצא על שם הרמה. דוגמה אחרונה לכך היא תבנית הדף של 5 הנופ (עמוד 212-213), שמספקת עומק ניווט הן ברמות הגבוהות של מבנה האתר והן ברמות הנמוכות שלו. העומק ברמות העליונות מוצג בראש הדף ומכיל רשימה של כל הקטגוריות ברמה העליונה שבאתר. העומק ברמות התחתונות מוצג בצד השמאלי יחד עס קישוריס לכל התוכן ברמת הדף הנוכחי, כולל כמה קישוריס אסוציטיבייס לחומר מסוג 8150 566'י. לבסוף, העיצוב מספק מידה מסוימת של עומק על ידי ביוו שמות חלק (אך לא כל) מרמות המבנה מעל לדף הנוכתי. אני ממליץ להשתמש בערכה משוכללת זו של מנגנוני ניווט רק באתרים גדוליס עס תוכן לא אחיד (נכון להיוס, הייתי מגדיר אתרים ייגדולים מאודיי רק אתריס שמכיליס 10,000 דפים ומעלה). באתרים שיש בהס פחות דפים קל יותר לנווט בעזרת עיצוב ניווט פשוט יותר. מומלצ להשתמש בשיטות פשוטות לניווט, אפילו באתריס הגדוליס ביותר אס התוכן שלהם כל כך אחיד עד שהמשתמשים יוכלו להבין את מבנה הנתונים. לדוגמה, אתר שמכיל תיקיס פיננסייס של כל החברות הציבוריות בארצות הברית יכול להשתמש במבנה פשוט כדי לתמוך בניווט בין מאות אלפי מסמכים, משוס שלכל המסמכים הללו יש את אותן התכונות. לרוע המזל, כמה אתריס משלבים כמות גדולה של חומר לא אחיד, ונקלעיס למבנה מורכב שמצריך תמיכת ניווט מסיבית. לרוב, והו המקרה בחברות גדולות שיש להן כמה קווי מוצריס שמיועדיס ללקוחות שוניס. פרק 4: עיצוב האתר 207 = 078008|!26ק = | ב 06 פח!קקסח 6 זההָה! 8 חאיסד זטסצ ץצ שזפת 0168 ץצ 6ח] ז6זח= 0 | א ו כ ו רירמן וצגס פד 0/0/00 פיי 56 !סח !6116 עס 5600513665 /" ץפח ₪ ד < ה6ו065 5088 ₪985 21% < 965 06 6 6חז6סח1 < 61חז6סח1 ₪ 5 סט 00 4 הו , אום|עפזכ +ה3ס5חו פבט|סחו 5בזו בת . פאוסבחו זסז 8007 8זב אופפי 1355 , ווחפ 8 ?אל 3 0ס להא סס עסו|וםבּ 8ל חב 8050 5ז30|8/0: ב 6חו|ח0ס 0 5 דצ דא חול זסץ פוב 501 בַהוס5 %פחפסח1 פחם + הסופזפץ |בחם צְב0-עווחד 5% הבח 188 סו 300-400 ,גה 645 ₪885 .21% חם1ז בחב ,אט/פת ,5החבּופ5 .58 5805806 50/0/86 5 טב ב !האס 8ב וסוכ , פַהַבּ>סבכ טחסובם ‏ דר הס 35 608 + 67835075 . 5ז0סו80 חב 5זסלו8צחס6 | |ד + פַהַחבּ זופרם +ס פחסופיופצ 2 ודו + 8008!|איסחא סא . 5פחועש זם+ סובופ חפט ספסחפוזס 865נסם , פב אופסות . 1308וססחו סכעס ופיוס!םא= פורס זם+ ספזווספז ואדת 06 ברחב ,הרפהב חברח %ספ[סזוכן ,זפ אספחס |5081 הסוא וסוט 5וט-35 230|8ו56007ו6 .0+ 5/7 הו זס= . הס50ספ0-ססוובּ 5128 הבו טחב בזוב2וש+ 5308 החבּ פוט 11605060 חו 80008!אוסחא | !ד סח הסוא הס 083 8סו5 3|85חם סהפההפזוצחם 6ץשוזפץיע . 27808) 0508חסו₪ הטוע ב|ט ב 60 . 5הססביופקס מפזט-בחב3ּ-סבּוט | | 05ח145 ₪] ו[הטחחה סא 5 6806₪ הַח10 הז וח פתז 81 6 חותפ 5ת0ו59ש96ו 3085 אופוופץ 800|8 :חו תסזהפם - ח0ו085 ם80// פזס₪ - ה0ו5פם 66ו5 טפעש - 8%5ח68ח1 - בהסטטר 60 - בהוסצצ שסו|וטב53 6316 115 חו 5118 3 זוהזםט5 10 פזפת אסווס - > | ווחסטם כוזוח חשו065 56!] ]0 ₪858 1095 חבס 5ז0ח0ו0985 טפש אוסח סטסטב 18% חס פטוטום ק5608- צְט-5050 סחפ||פסא= 5ז0סן15/ |31 ס6 8|ט3008551 חב 8|ט153ו פזסוח פזב בר 85סו5 טפצו פאבּוח צזו|1!5801 0+ 000168 50ס6ווא חס 60 880ח 08510875 ברו םס 806115%ח0 חב צופוחפשס פשופחהססאם "0 5סחטסחסס +0 5318 58נחםק , פ|ט53גו עו פסופ פפאו ב הַחואבּח חו . תטבח צזו!1!581 פפצ ]0 51005 צ|0688 ח8צ58% בח 8 םו5חסס הפחש 0'5ם 6'חסט 60 פרם 5פחוסטס סוםגס5 הווש זם זפווו₪ פטס 050008 5 48050308 חם 80זנם בפת .55פססזם 08510 פרם חו שווום 53 ספשי 60 .00/57078/1/ ,/ע/שעץ 8 עיצוב ממשק באינטרנט . . . . . ה + זה 5 )0ס! 5 30 | חואו 630 078011 חח 10 פזפח אוו 338 | הוכות סאהז 9.9% ו 3% חס וסנו חס שיפו! והההו5 00 !ו 5080 8 6וחס] 4 1 עפ סזס!כקאם ףסחחכסח1 .₪ 5ססומחחס בסהבּחו= 8 55פחו5ם הסוס בסט0ם ₪ פסחפזסזפה 5 ₪ 500180 בו0פ] 8 >הפוחחובפסחם 0% ₪ פ|מספס 5 ₪ ההומטסח5 5מססבסב/י ₪ |פצביוד מססבפזספח ₪ פדוסםפ טח ₪ סוטטס סו ₪ הסובפ ספגום ₪ ץ!וחחבּ= , פוחס > 111)? ו | 4 | טס +₪ 10005 וטס זס+ 5זםףטוסרתס רחסש. 0363 - 1005 = 678008!!26ק 005% ו ה0ז568 8 6וה0ס1] > וזה ה! 5פא חאיסד זטסצ ץצ סזפה א6ו!0 צ 6] סח ן כ ! +יפפד/0/0/ פיי וו6ם: !סח 6|6008 עֶם 5000513665 ּ 1 ע קט שזסוקא= וד ₪ פמוה 5 "975 0חו890 3 900 | = פטחססח1 ₪ 5ססטטות טס זפרס ₪ ואדה | 85הו5/₪3032או5/49אססם סממטם ₪ |ופפ/עטם ססחבחות ₪ 855חו5ם בב 5 056// ₪ 2855 | 05ז-שוס5/4וםוצפם 5 וס בסו ₪ ססחטזטס בב נמ 5 זב וס 5 8 50080 ו בחווחס הַחוסם | בן₪00] ₪ > הפוחהובםובסחם אפשחס ה פמו|מ סמטבסומטוחוחס ב פרם 8 זפחזססה1 | 77 3% ₪ פ|מסטס 5 61 5 5ופום ₪ פחחסו ור סַחוחבפ50 + חסופפס פסום טפע ץז = 6385 ספסוע/זפסטומוחסם 5 בב / ₪ |העבזד 5םד סוגום. הטטב סומוחה ססופ הססבסטטם 0 ₪ טספ 5 63005 םפש 08 חס 55פחו5טם שדם ₪ בוספוחסוטו] 5 ₪ פפוטטסן 5 ספטוע 013557001 פוט 10 05 ₪ 5אזסאוסטצ] סו ₪ הבס 5סםד בופוחם!ט! חן 608 פסופחז חן 608 פסופחז 8 0 100 - 880080%= - 50/00808 - במוקססת5 - 5פהוכפְחָפא - 4805 - משסד וטס - 96908 ססוום .₪ ץ!והחבּ= , פחחסרן - 0909 1 וסט 60 .00/5778/1/ ,/עעעעץ עיצוב שנת 1997 של ז00%658] מציג ארבע רמות של תוכן האתר. עיצוב זה נקרא 6/6ח15=. מצגת זו מספקת יותר פרטים ברמות שקרובות לסוג העניין הנוכחי של המשתמש. בדוגמה זו, הייתי מעוניין בכלי ד לעיצוב סש , ולחיצה על אפשרות זו נתנה לי רשימת כלים. אך התצוגה מספקת עומק נוסף על ידי כך שהיא גם מציגה את סוגי כלי העיצוב האחרים ל-60או המתוארים באתר. עליה רמה אחת למעלה תיקח אותנו רחוק יותר מאזור העניין הנוכחי של המשתמש, ולכן היא מכילה פחות עומק. העמודה השלישית מציינת שיש מידע נוסף אודות הנושאים שקשורים לאינטרנט, אך נושאים אלה לא מתוארים באותה רמת פירוט כמו כלי העיצוב ל-60/. עליה שלב אחד למעלה, אל העמודה השלישית, תגלה רשימה של נושאים אחרים שקשורים במחשבים, אך רמה זו מתוארת בצורה הכללית ביותר. פרק 4: עיצוב האתר 209 131)6וכּ> סו חס 67!פה!ב עה !54/1 53.88% וה ה זוטסץ ו | , -- ...ו 5/4 4 ספת ג 8 סונפ מ עגוסץ] תמח זו 0ס! [ הסזה56 | | סע 116 611 זה56 - ז הו , הסן855זסרח0 סופנום 5 ₪ 1085 1 פחן1 חס פפפחופטם 5חופסז ה הזב א חבז בחוח3 170 סוטווה 895 | פחו|ח 0 חס ב 5 ₪ פזסוונם אוו ו שוח6זה וסוות 5 ו זפ טח פחז זס" 55 ₪ וסווא 5 | ₪5 חשטת זא ההטספ 5 8 טחוס ו 385 ווח 10 הט - 1 ו וח עם ו 3 013557001 פחז חו ו 5מפופסווטטק פד בו פרחוזוטוו! 35 שח 65רחב)! חבז עטם ונוק 51 חוחחנג, 5110 5 | ספת 35% ח0ו5 ספצי פזסוו מ0ו85כ 8וום מפשעצ ?ו! 011 זה 56 6 זסרח ₪666 | חח סע מ81ח |וושי 8071015 58870 ופען | חב ופאסס | זטס ... או06!0 6 זסוו! 1וההוו5א00 | ₪9 8 זטםץ ח| 5ז8 םועז 58/68 81חז19ח! זמ 00 - 063101 1 ספ 5זפרחוזס 858ח1 הזו 491 פחז התטסזב עב זטסץ חז88 ]1 - 001085 5זפהחוטפם פא 108 חס 885 חן חב ספטו סופט3 בחן - ₪13 עֶם 5893168 5 ווה 60111001 [613166] 1 פח1 חס 318רח |3ו1ח18סכ 3 1881 - הח08 ופפ 5 ע :1 5 70 הפח1 פזסרח ח! ה6ז588 זטסץ 28ו|1/068 אס או ורחבו ,185חה 105 | השחס ,בוח בהוחבּוום 08 ,01500ח3ת ח8 60 .00/5778/1/ ,/עעעעץ עיצוב שנת 1999 של צזאוח5אסס | מספק תצוגה בשלוש רמות תוכן 0ח6סחסס 01 6/6|5| 66זח+ +0 שוסוצ 6ץ6ח₪85). הרמה העליונה ביותר לא מוצגת כלל, והרמה השנייה מוצגת רק על ידי הכותרת "+6ח6זח1". אין אפשרות לדעת שקטגוריית הרמה העליונה הנוכחית היא "פחטטקוחס6", או מה הקטגוריות שברמה השנייה בתוך פַחטטקוח0ס6. אני מעדיף את העיצוב של שנת 1997 (ללא קשר לכך, מדוע להציג פרסומת מסוג "%7 30 5094 0105 03708105 6וחהּח-0חהזם" בלי לספר לנו איזה סוגי מוצרים נמכרים? אני לא יכול לתאר לעצמי הרבה גולשים שיימשכו להבטחה שמשהו לא ידוע עולה %7). 0 עיצוב ממשק באינטרנט [רח0זאח! זווסם | זזסקק 50 [68ו6טד 58 18% 5'ז הר פּ 8 0 זאסס 2 | | 1 | 05 | [ | 6 מ הוכקסוו5 8 הסזה50 50 00 הזד | 0 א ה | 1 ו ד ו ו 6% - 5 - צְטססח וד -* 8 35 !56376 וררוס+ארו! 0 0 5 החו|וחס 0חו880! 5'ם!זסצי 01108 צחברח עם הט 5 עְהַ0ו0חח186 רסוחו כד |ההס1ח! 8ח1 3001 53 10 פצבּח שפח זעי 1830 סז פזפח 6116 .581088 - .8חו8ַח= 588700 ם ב 6 עב ספחסחוב.1 8 צט!. השתסחש3 1 . סח| , 65 זו ו1ח9/ 60ז!/ : זפהחבּץ ![ססחב* : זפחצבּץ 5 61פן+/ח!) :חס וַבסס.] פחחסו] 5 861וח() :חסוובּסס.] פחחסו החסס. )כים וסיח שרארוצ//: כחות 5 .54 4 108 . 13 !ס3ח5 : זפחצובּץ חס !)סקז 070506/ : זפתחבּץ 5 61ן1וח!! :חסוצסס0.] פוחסו 5 4861/ח!) :חס 3סס.] פוחס] החסס. כ3ח5!//: סקאת 17700 תמיכת ניווט בשיטת ₪566 באתר ווחסשאח1. הגרפיקה בראש הדף מציינת בבירור שאנחנו מביטים במוצר מנוע החיפוש של החברה (וכי שאר המוצרים הם ז6צז56 8)66זד ו- 6חופחם פַחוסקסח5). בסדרה זו של דפי מוצר, אנחנו מביטים כרגע על ה-זפְחזזהּק, וישנה דרך פשוטה לעבור לחמשת הדפים האחרים אודות מוצר זה 0%000, ססח3ץ, וחסס.קְהח5, אפו וקישור נוסף - 58 0+ 8/6 ש6ח+ +החעו 680 %0 שזסח >6ו61). פרק 4: עיצוב האתר ‏ 211 8 זז 1 עַפַס|0הה166 ה00ו630ט50,+וסקקט5 3 הסוז3הז0)ה! 5זשקס|8ע08 ה₪6563]0 ₪ וז 5 60 ₪ 5 ₪ יי בח!ואזוסעש+6 6חה 6זהעוזובו צ!והחז3] ק0+65% צטם-* תאסה .7 5 אע5 55868 כ3ז0ז63ז6 4000 דזה-+01 יהט5 הס|וז8ז5א:ס/ -שוו : 1 פזא:זא6)0 צצ6ועי0ע0 00061 5 ₪ 78000015 הַחואזסע616 חא פזבּע0ז3רן בַחואזסעש46%] 6ח/ 501316 005ו631ו1כק 0ח 5חסו1ט)50 5 0ח 130615 נוי וז סע 6 סז ובו בי 8 1885 סק ה0ו5+8%אזסאי 30 זס₪768% 4000 8ז₪1% חטופ 5פת 5 8 1785ב .הַח1זוקח60 15081 ₪ח0-8ח1ח 107 פסחם וס וטק / פס רום סו 163 5066 6% 6סזק 51163 ק0+65% 5 0 560 .6855016סחום 218 וגו .1105 חס 18ק ו וו 6 1 1108018 !וח ק 1-ה ₪ 0 115 50880- ףות ₪ 5חסו )50 ק0ז56טם .5-ה 0001878180 9 5 ₪ 55בזק בואט 1 1 1איםחהם- הוה 5 5חסוזסוחסז ק0ז856 5 זפ קב ק6ז וח קר סז 8 ו 7 1% ו בח קט בוו 8 5 5 , הווחה ,הַוהַחו [8168ר , הסוז8 0 זגו תף 0851 , 8081515 , הַהווהטסרח 5 ו ז||63 ס+סחש 5606 0 5 סע 5 5 חצ5 8חז01 6 60-הו 3/10"03516 26ו[הטפוצ ,חח הס 11-80 18010185 80/87086 01 ופחָרופרח 1015 ₪811 פע הזז .)6808011 בחה ופ איסם 01 [1878 אופח 8 10 11 1888 5הסו6518%סצו 1858 85 פסוזם 8 8% 05ותקהוף 788115116 ,1851 01187 5ח0ו5181אסצי 34000 .6 ווח 500.00 ./ש/עעץ עיצוב הדף הסטנדרטי של חט5 מוטבע בתוך תבנית ניווט בצורת ] יחד עם תמיכת ניווט משוכללת. אפשר ללמוד מהיישום השונה של אמצעי הניווט בשתי גרסאות העיצוב השונות. עיצוב שנת 1998 של מערכת הניווט סיפק כמה רמות היררכיה. האפשרויות ברמה הגבוהה ביותר הופיעו למעלה, המיקום הנוכחי צוין בעזרת שתי רמות קינון בסרגל האופקי השני, ואפשרויות הרמות הנמוכות יותר ניתנות בצד. תיבת החיפוש מוצגת מתחת ללוגו: מקום בולט, אך במשך הזמן, נטו שלא להשתמש בו באתרים. 2 עיצוב ממשק באינטרנט , 7 ₪ 66וזהו!קכןת 56וזק ז6זח= 1 עָה₪ חוו5 < 665חהו!קקה הסוזההזס]ח| < 6 זהן6זהו] < פחהסווו!50 8 615וו06ז < 6חוסון טוח 1 צ3 חטם * ולקה ז5|פקק]דא 1 "צהל 50 000 בוא % זס - 8זז סז 60 זה סע 3 5 880185 ] - 5 - 0 88וקזטוחם - בו וי וזח - וחד - חסוז3 רז סזח! סז 635 ז0ז5חורזב 10 835 ,₪58 59910 % פחפוטו50 יפ - זס? הסוט!50 66ח3!|כקק3 !1668 6הוד .5טסז א ]סע 960156 פצל. ו פסה פזוח/ - 0 זפאים] חב שושוז6טטסזם הפצסזמוח! % החּח-חו-החפת 0% ]| 87סחפוזפקאם ספ חסוז 3 חב הסוז3ז1והורחט3 173|280ח66 זסז בחואספ! טסץ פזה סח 85זוספז 8סחבו|מש3 88מפ1חם 1 ₪86 חכ "אזסאו-חה-פטום" פחד .זפתחט סת 01 זפאוסכן 108 החוזוטק 18 538 8ח1 31 פ|וחאר 3885זטקטו זס הסו81ז51והוחזטב ]חפוס 1" זס ץזו|ופ038 פטףוחט 8ח1 81ף טפץ ,1031 זט 106 חכ) .0854100 זטסץ חס זפעז990 פחז ץחה החסז1 הס58551 8הוזטקוחסס זנופץ 300855 ץ!זח13פחו 10 ץזו|ופה 108 -- "8900 88 טסץ פזפחעל צ|85801 -- קטסזףָאזסעצ זטסץ חו פסחפו|מטבּ חוכ ]1158 פסחפּו|מ3 8ח1 01 קט 388 15 פז01פ]ות סז 86וזקזםזחט 1 עבת חטש פחך זז זז פד . צֶחָ0!0חח180 285% 01 ה , 50 זפ/50 86קזפוחט 3 5 פסחהּו!טק3 88ומז18חט 1 3 חטש 8ח1 , אזסאזטו] הפטוזם 588 8ח1 זסז פסחבּווסטבּ - 5ח0ו081ו1ס30 [11168ז855-0חו8ט8 5 זחפוהתסזויחט קטסזטאזסצי 88וזקז1ח6 זטסץ זסז 1888 01 3 המוז , 61975 ||68 ,הר 33 זפה0ז9ט0 ההופטוסחו - ההזמ 8809 זבצפה חב -- = חב , 98085 |[הוסחהּחח , זהסוהחזפייסף .6א!ן] 0+ ע685 ,15161ח!רח30 0+ 685 ,56 0+ צ85 ]הט רההסזושתש הפחו|מוחו5 ץ!881זט 8 461 נוסץ , פפסחפו|מק3 86וזמזה1ח6 1 צֶת חטש וו 60515 18 ]טסו החוז קר 00 ז50/8-)חפו|ס 01 0608815 8ח1 פזטחס 131 -- 085108 וטס זפים [0ז1ח60 ז818זט חו₪3 ח63 טסץ 50 .פוחפווס 131 החוחוה1חו וח ץז 56 ||ו51 8|וחא , 00515 סקקט5 חב , 5808 , ספהתשזטוס ההוסטספז צץ|זחה סחותטופ חס 5חסו081ו]מקה 300885 ח08 שסץ ,1801 ח| .פחסוזבסו|פשה 1801118 זנוסץ הַחופפ8ססב3ּ וז 00 7 !50 8ח1 ההותחטז 5'זו זפתזסה/ -- זפ/ת58 הסוז3סווססה צחהּ חסוז1 316 858-ה ס|סחה180 133 זס , ד%] וס טח , הפ המתפזוית= 500.60 ./ע/ע/ץ עיצוב שנת 1999 פשוט יותר מבחינת הגרפיקה וזמן ההורדה. אפשרויות הרמה העליונה עברו לתפריט נגלל (טח6וח הצשוסס-קסזכ), למרות שהרמות העליונות ביותר עדיין מוצגות למעלה. המיקום הנוכחי מצוין בשיטת פירורי עוגה (05וחטו6806זם), והיתרון בכך הוא שניתן לראות את כל הרמות (דבר זה טוב במיוחד במקרה של כתבה שמקוננת עמוק בתוכן כמו זו שבתרשים), אך החסרון שבו הוא שהנתיב לא מציג את החלופות השכנות. לבסוף, אפשרויות הרמה הנמוכה ביותר עדיין מוצגות בצד. תיבת החיפוש עברה לפינה הימנית עליונה: מיקום זה הפך לסטנדרט. פרק 4: עיצוב האתר 213 )0 )א ₪ > ש 2 4 507.00 ./שעעעץ 4 עיצוב ממשק באינטרנט ססואם! שום)! חן פזט8פסחום ([ ו הח חח 051 ח 65/01 3 ק| תס / 0 6 35 // וקסטת ). חזבפו... ווהַחַ5חֶחָ זטב53סחום סוס זבפץ תפוו|ורת-150 3 0150048780 סח 0!ם-זבפץ- 88זרף פחס סוסב הפה |פזסות 055| חב ... סס|אפ1 אופא חו זפ 01500 סחום 36555| פר6 סטוסטב פטס בח ...15ו055+ חזום סטוסטבּ ₪3 ובא | ל 6001077070 1301316813 * 66 ופסטס 5/6655 60 676ת הזס וט המשתמש שולט בניווט בעיצוב ממשק משתמש מסורתי, המעצב קבע מתי ולאן המשתמש יעבור. אפשר לחסוס אפשרויות תפריט שלא מתאימות למצב הנוכתי, וניתן להציג תיבת דו-שיח שמשתלטת על המחשב עד שהמשתמש ילחץ על הלחצן שבתוך אותה תיבת דו-שיח. ב-6/), לעומת זּאת, המשתמש שולט בניווט שלו בדפים. המשתמשים יכוליס ללכת בנתיביס שהמעצב לא תכנן. לדוגמה, הס יכולים לעבור ממנוע חיפוש ישירות אל תוך תוכו של האתר, מבלי שיעברו דרך הדף הראשי. המשתמשים שולטים גס בתפריט הסימניות שלהם ויכולים להגיע ישירות לדפיס בהס ביקרו בעבר. מעצבי 60/ חייביס להתאים את עצמס ולתמוך בצורת ניווט שנשלטת על ידי המשתמש. לעיתים ניתן לאל משתמשים לעבור בנתיב מסויס ולמנוע מהס קישור לדפיס אחריס. אתריס שעושים כך מעניקיס תחושה צורמת של שליטה על המשתמש. עדיף לתכנן את העיצוב כך שייתן חופש תנועה ויכולות ניווט גמישות התומכות בדרכיס רבות לתנועה באתר. כיוס, המשתמש שולט בעכבר ואין מה לעשות נגד זה. המשתמש רגיל לממשק יישוס מסורתי. למרות שמערכת חלונות מאפשרת מעבר בין יישומים וכן להפוך כמה יישומיס לפעיליס בו-ומנית, המשתמש נמצא עקרונית ייבתוך'י יישוס יחיד בכל ומן נתון, 0 ]ואסכ ודד חסטב!וסם סב זסושופו פד ו או מו מו ו א או מו מו + ]סה |בואת ו מו אוו מו 00 00% ,ץע +חוזם סוחד 00 סז ובו זס | 0% ןו | וב | | | זפסב .אבו שופ 0 א 8.00 0 א 8.50 0 א 8.50 0 א 8.50 א 0 א 8.50 0 א 8.50 4 וחוזם וחקק 5 זס|00 וחקק 2 את וחקק 8 זס|00 וחק 34 חקק 8 ץוחס חקק 7 זס|00 וחקק 2 חקק 8 וחס חחקק 8 ץוחס חקק 8 ץוחס " ה0סו8הו8] פזום שחוזמוז פמו)תו 120360 8805 108 881 10 08910086 פזה 5751815 תסוזסחטוו]|ורת טוחה פזפזחוז 0856105 אסזפא חפה התסזושחם 58780 8 חו פזספט 01 קטפזם ||8חח5 8 זם 8זספנ |הטםושוטחו 6 0 עצס!] צֶ8א 0ח3 פתסוזסחט זופת1 חס 03580 15סטטסז 10858 8זהקהס0 בחב עצפו 10 180|8 פוח1 1258 1 מסוזסחט ץזהווזס 108 חס 03580 193185 עְבא 5 צְ3|ספום ץ|זחפזזטס 180|8 פד .85זט1931 זופח1 חס 08580 15סטטסזם 0110858 85זט1981 פא 588 סך .(החוזחוזס ..8) פזסטטפזם 10858 58 008 70 .אוס|8ט 1805 חסו1סחט זטס1 8ח1 זס פחס אסוום , פתפוזסחט |החסוזוט0ב3ּ -8ז ||ואו 180|8 108 חב 8זט1981 8 אסו|ם , (פסוזם .8.0) 85זט1931 0110858 פחם 10 בחוםזסססבּ .₪818 8זסרח זט 1סטסזס |הטטושוטחו ח8 ₪8|801 .חספ 8 5688108 600 מהזחוזק וז חס וש !ספת ופנ 1 800 א 800 ו 41 800 א 800 ורי 0 א 1200 שת וק 0 א 1200 | וק 0 א 1800 6הח! תו וס התה א 800 פטזד וק 800 ץוחס 1 800 א 800 ו 1 800 א 800 | וק 800 א 800 צוחס א ופ 800 א 800 ץוחס ה וק 800 א 800 צוחס ₪ % פסוזם 22.20 20.20 0.20 00.0 "0 00 00 2 6 וס 0 0%ז6א חח 6 )זוז 000 610% ונ 8 וז טס סק 90% וצ ]| פ3500 118ח6 סאוט/ סז 8-ו ז םת 68 זז 000 610% וק 0 60118 180 0/ 610% וז זש35 | / זם !ופ 00 |בוופוס הנ 2 601% 0160/ סז ו זש35 | / זם | 00 |בוופוס צנ המשתמשים דורשים תמיד דרכים קלות להשוואת מוצרים או פריטים אחרים שמתוארים באתר. קשה למשתמשים לקבל תמונה כללית של השטח ולהבין לאן עליהם לעבור, כשהמידע מוגבל לדפי מוצר נפרדים. ישנה דרך טובה לפתור את הבעיה הזו בצורת טבלת השוואה, שמפחיתה את זמן הניווט, ומאפשרת למשתמשים לעבור ישירות למוצר או כמה מוצרים שהם באמת מעוניינים בהם. פרק 4: עיצוב האתר 25 קפ ו .פחוזוהּשט 15 ז63 זטסץ 86 ח 66150 זטסץ חו= צסא זה 5 6] וח 60 זטוסצ |ו88 8 6 זג סזח) 31 פא 6 יוסהזסחת = = -4 | 540 /צ1י₪ 2000 -1616665] 1999 סז)ח| 8 5או₪619 41 ח5603 זססם 3-00 5430 ₪602 >= 3 56030 זפ|068 4 שחות 3 סק ה! חח לתףָורח טפץ הסוסה וחזס+ה! 65תףוותפָות זס!פ6 5וח ד 4 ס6ההּחו= 6 זט ה| ₪ 08 ה0ו9615ם חסוז8ויו0]ח1 [8'ו89ח6 !1 2000 139 3 [8008ז 08 ה5663 ח5603 שד 03 5 5 5 + 58 החט4] 5 5 0336/50 חַח 5830 ו540 120 [8 0 אווזם 5-2 פס 3 חב יז חח 3 לי 83 צְח3 87 ץ|פ255670 )0 חופָוזכ וז 0+ 0+ קספו 0+ 0+ 8 ]63 70 5+ 638 חס0וזבּה|ז55כ ץָההטסהססם [8ט=] 0 635% 3% 965 4.3 56080 4-00 2430 2/6606085-8602 1999 קז -4 ו 540 ע8/910/ 2000 508 5050 930/00 ץפק 65// 0/3/01 מזסרת %תמססק ₪ 00+ 580804. בָקח 18 טק 19 8 עסו פָקות 24 פָקותח 26 8 שב תפות 5ח5]|ףָ 18.5 5ח5]|ּףָ 21.1 037360 אחב ד |פטת 9 5 +53 5 5 5 068 ]-חה ב בו הָב5זוה 5186-זפטוזם 5 5 %ף53ז/0 5168-ז8ש0ַה3558ק -+8סץ 0/ 0000/0760 . 3/7935 96-5108ת23556 לו 6מתסס 685 658 ד 8 035580066 598 ח! 0/3080 26 00% / 500000 568%5 +63 בַח150 ₪ .0/5360 28 650 3/7983 08 855/ח₪ 6 5 [000%0 חס 6 בד סל ל 0 ₪ פיק חספ 5 [סישסותסס 6/8000 צו ד פתוץ 3 33/0 ססט3 2 57808 ת300ס-ואוס) 3 חס פתותתוק5 ₪ ו סק 69/06 בָת0 600 שס 273065 5 סז 5 5346 01]4 0 סז 3% ]001 68ב 56ח1 5 5 5 5635 07114 1ח300306.00 ./ע/ש/ץ 6 עיצוב ממשק באינטרנט (בעמוד הקודם) טבלאות השוואה דינמיות הן דרך מצוינת לשפר את שליטת המשתמש במרחב מידע מורכב וגדול. המשתמשים יכולים לקבל רשימה רציפה שכוללת רק את המכוניות שהם מעוניינים לרכוש, והאתר יכול אפילו להדגיש את ההבדלים החשובים ביותר או תכונות שהמשתמש צריך לשים לב אליהן בזמן ההשוואה. אני לא הייתי מדגיש תכונה כמו כריות אוויר בצד הנוסע אם הייתי משווה בין שתי מכוניות שתכונה זו קיימת בשתיהן. ורק הפקודות ומוסכמות האינטראקציה פעילות באותו הזמן. המשתמשיס משקיעים זמן רב בכל יישוס ללימוד התכונות והעיצוב שלו. ב-60)), המשתמשים עובריסם בין אתריס בקצב מסחרר, והגבולות בין העיצוביס השוניס (האתרים) מיטשטשים. נדיר שהמשתמשים יבלו למעלה מכמה דקות בכל אתר נתון, ואפשרויות הניווט שלהס לוקחות אותס הרבה פעמים מאתר לאתר באמצעות קישורים. בשל תנועה מתמדת זו, המשתמשיס חשים שהס משתמשים ב-60/ כמכלול אחד גדול ולא באתריס ספציפיים. המשתמשים אינס מעונייניס לקרוא ספרי הדרכה או מסמכי עזרה שקשורים לאתריס מסוימים, אלא הס דורשיס יכולת להשתמש באתר תוך שימוש בנוהגי ה-65) שהס למדו כחלק מהניסיון שלהס בשימוש באתרים. במחקרי שימושיות, המשתמשים מתלונניס בחריפות בכל פעס שהס נחשפים לאתריס שבהס דרכים לא שגרתיות לביצוע פעולות. במיליס אחרות, ל-ט6או, כמכלול אחד גדול, יש סגנון משלה, וכל אתר מפורש יחסית לחוקיס הכלליים. גס ממשקי 60/1 מסורתייס הם, כמובן, חלק מהתמונה הכללית, ומומל לשמור על הנחיות סגנון העיצוב של היצרן, משוס שבתחרות בין עיצוב פרטי ועיצוב גלובלי, העיצוב הגלובלי מנצח. תוכל לקרוא בספר 1: עיצוב ממשק משתמש בסביבת פ/צסשחו/צ בהוצאת הוד עמי. יחד עם זאת, עדיין לא קייס מדריך סגנון עיצוב כללי ל-60) שמכתיב כיצד המעצבים צריכים להשתמש באפשרויות הממשק שעומדות לרשותם, כדי ליצור אתריס שיתאימו לסגנון הכללי. אני תומך נלהב ברעיון של יצירת סדרה גלובלית של כללי עיצוב רשמיים ב-80\ (כמו שיש ל- 11670508! בסביבת פאוססחו/), אך כל ומן שאין דבר כזה, העצה שלי למעצבי פ6/ היא לעצב את האתריס במטרה להתאים את עצמס לסביבה, ותוך הבנה שהאתר שהס מעצבים אינו מרכז היקוס של המשתמש. המשתמש עובר בין אתרים, ועלינו להקל עליו את השימוש בכל אתר אליו הוא מגיע. עזור למשתמשים לטפל בכמות גדולה של מידע הניווט ב-69\ הוא אתגר בשל הצורך בטיפול במליארדי פריטי מידע. נכון להיוס, יש ב-טפצו יירקיי כמליארד דפים, אך בשנת 2005 יהיו בה 10 מליארד פרק 4: עיצוב האתר 217 עיצוב בריא מול עיצוב מתפתח בממשקי 601, היתה לנו הנוחות בשלבי מחקר ופיתוח ראשוניים ואיטיים בחברות מובילות. שנים רבות עברו מאז שהומצאו החלונות, התפריטים והסמלים, ועוד יותר שנים עברו עד שנבנו יישומים שבהם נעשה שימוש ברחבי העולם (06ו0, 15, 5, 5וססחו/ ואחרים). נעשו מחקרים רבים על ידי מומחי ממשקי משתמש אחראים כגון אלה שב-466ק אסזסא ו-1חו822חס ד 87066 ב-6|מקה. כתוצאה מכך, נדחו רעיונות גרועים ורעיונות טובים קודדו להנחיות, לפני שה-601 הופץ לכל משתמשי המחשב. תהליך יצירת מדריך 6201 התרחש תוך תיאום קפדני שבו הרעיונות הטובים ביותר השתלבו אחד בשני כדי ליצור תוצאה כוללת נעימה ושמישה. בניגוד לכך, ה-60/ מתפתחת אפילו בזמן קריאת שורות אלו. מתבצעים בה ניסיונות שכולנו משמשים בהם כשפני ניסוי - ולא כמו שצריך היה להיות במעבדות שימושיות מאובזרות, בהן תהליך העבודה ניצפה ומוקלט. התוצאה היא עיצוב שנובע יותר מההתפתחות הכללית, שבה הרעיונות באים והולכים. בסופו של דבר, רעיונות העיצוב הטובים ביותר ישרדו והרעיונות הגרועים יידחו, משום שהמשתמשים ינטשו את האתרים שאינם מעוצבים היטב. 8 עיצוב ממשק באינטרנט דפים מקווניס שניתן להגיע אליהס מכל התקן שמחובר לאינטרנט. ממשקי המשתמש הנוכתייס פשוט לא מתאימיס להתמודדות עס כמויות מידע כל כך גדולות. כמעט כל ממשקי המשתמש שקיימיס כיוס הס העתק של ממשק המשתמש של המקינטוש משנת 1984 (שגס הוא היה העתק קרוב של תוצאות מחקר בחברת 86 אסזפא מסוף שנות ה-70 ותחילת שנות ה-80). ייעוד המקינטוש היה לטפל בכמה מסמכים שמשתמש יחיד יוצר ומאחסן בדיסק שלו. אפילו המחקר של 886 כוון ברובו לאוטומציית משרד, בה המטרה הראשית היתה לתמוך בקבוצת עבודה ובכמה אלפי מסמכים. ב-ט6/, בניגוד לכך, יש שיתוף סביבת מידע בין מליוני משתמשים (ובקרוב מאות מליוני משתמשים) שבה נמצאיס הרבה יותר מסמכים. דפדפני ה-60/ הס יישומיס בסגנון תבניות ממשק המשתמש הנפוצות, ולכן הס אינס מתאימיס למשימת הסיור ב-65/. חשוב, לדוגמה, איך תפריט נגלל (אפילו כוה שמכיל תת תפריטים) הוא דוגמה גרועה לארגון סימניות המשתמש. שינוי השס מ-"65ז3 800% ל-''665וטסטהּ-'י לא משפר את המגבלות העקרוניות שלו. התוכנה העכשווית חלשה במיוחד במתן מענה לבעיות הניווט ב-פ6/ש, ומשמעות הדבר היא שעל המעצביס לעקוף את הבעיה על ידי כתיבת תוכן ט6/. הבעיות בניווט במרחב נתוניס במימדי ה-פ6/ כל כך קשות לפתרון עד שאנו זקוקיס לכל העזרה שנוכל לקבל, הן משיפורים בתוכנה והן מתוכן מעוצב טוב יותר. בתחילת ימיה, ה-טששו נשלטה על ידי קישורי טקסט פשוטים: כולס הצביעו על כולס ללא מבנה. למעשה, לרוב נכללו רשימות ארוכות מאוד של קישוריס מומלציס ללא הסבר מדוע הקישוריס אמורים לעניין את המשתמש. ההנחה היתה שה-ספוצ כל כך מעניינת והמשתמשים כל כך סקרניס, עד שהם יבדקו את כל הקישורים, ויהיו אסירי תודה על קישוריס נוספיס שהם יקבלו. במשך הזמן, הרשימות הארוכות של קישוריס מומלציס - התקצרו. כיוס, יש הערכה מחודשת לערך הקישורים הנבחרים : קישורים שמוסיפים ערך, קישוריס שנבחרו בקפדנות על ידי העורך שהחליט שהס הטובים ביותר והמתאימיס ביותר לקהל הקוראיס שלו. | בו ו ו שסוופ סיט 13 פזסטפסחי זאו 8 > הט ו ]1 = 5!הווהסוח [ההסוטפז >( = הַהואיפועזופוהו +( = 8וזו|פחפם . 5 והוז חח = זה0ח0!ב6 ]הפע +( ₪ פזט!וטס ספסזסווח 87 0ח63!8 הַחוש390 )הפיו חפוס + 500185 פטםזפטסטט|ם 0 א 8 25 פחגוך 5זפפהוטַח= זטוסץ ||3ח8 08358 , פסחפצם הפר זם פחס סב 5 חסועו 886 סד הזב גוסץ חצפ הסוח עו 68 3סוטחו 8358]| , פסחבצטב חו 5גו סף הות5פז 8 |וואו 0301030985 חווט . חט5פז זטוסץ חס חו 85580זפסחו רסחו |בטוחו זם? 885 בר 60 זוז 580סב6חסס 601 050ש/ח ./ע/ע/ץ שורת הלחצנים העליונה מופיעה על פני האתר כולו ומספקת תחושה ברורה של זיהוי האתר יחסית לשאר ה-60/, וכן דרך קלה למעבר לדף הראשי ולדף החיפוש. אני הייתי מעדיף להציב את הקישור לדף החיפוש במקום בולט יותר, משום שהוא הולך לאיבוד במידה מסוימת בין סדרת הלחצנים החשובים פחות. הבעיה האמיתית בדף זה היא סרגל הניווט ברמה השנייה, שמבלבל מאוד. סידור חמש האפשרויות תחת המילה "חסטפחזס)ח1" גורמת להן להיראות כאילו למרחב המידע המקומי יש שני ערוצים, כאשר לכל אחד יש רצף דפים לוגי משלו. הדף הנוכחי מואר (טוב מאוד), אך מוזר שהוא בא אחרי "6זש|ט6 ספסזסווא" ולא אחרי "סחושוסועזסחו", משום שהוא נוגע ללוח זמני הראיונות. כללית, יש להשתמש בסידור בצורת תרשים זרימה רק כשמרחב המידע אכן מסודר כרצף. הקישור ס+ 46%פ, הוא עזר ניווט חשוב שמאפשר למשתמש לעלות רמה אחת למעלה בקלות, אך משפט המפתח "פ6חוחטזוסקקס זה6והץסוקוח6" נראה כתוהו ובוהו כיתובי שאינו מתאים לשאר האתר, ולכן קשה לקרוא את המילה השנייה בחשיבותה בדף, "%חסוקסוקוח6" (המילה החשובה ביותר באתר היא שמו - 04פסזסוו - למרות שאין צורך לכתוב אותה פעמיים בסרגל הניווט). הדף מחמיץ הזדמנות לשרת את הקהל שלו טוב יותר: קישור לדף הראש' של פזסחוַפַחם חהוחס/ )0 506166 היה שימושי מאוד למשתתף חדש שהיה רוצה להשתתף בפגישות ש-0%פסזסו₪א עורכת. העניין האחרון הוא העובדה שצילמתי את האתר שלושה ימים אחרי שהתקיים מפגש של פזססחופַחם ההוחס/ +0 /50616%. יש לקבוע נהלים להסרה מיידית של דפים ישנים. פרק 4: עיצוב האתר 219 5 +הסזפ 5+ 8א!| 5107185 פזסה בהן9 חפ!ז1 3 0+ 5107 115 |95731 צזס+5 5|ת+ %הוזק 94 צזס+5 1015 0+ 836%א|בד 30051 (?03+7+ 0365 /%) ב |אב 900 | :הדוא סאו=וחם 8זפמוחססם * 008 זה סז8זסום - 00018085 ח0ו081ו600501 0 מש 0615זב ך ה80סזסווו! ב - 0015 0ח5סו /80 5 :51018 פחו!ח0 ח8 הפס 89-07 מסטסזוך ספצש 8ח1 פוט 7 - מחוופאזפו! פזפוווחה ||8חחם 85'5סזסח6חה 81 - 0נסטח! זטס'ץ חו צזה ומוחטם 20% 5: 5 ]8 18558'58 אס צהפסד :5%םפהסואת 5 80 000-3187 +פט ב 5 60 .0065 6ח3 ,שש ב 6 וו עס סספחג ₪ 61| זפזסם 8 27 0057 , ג סו 5 60/, ז6ז3/)-200-זפט זו |ה!זסזון)= ,20151 46556 אוו 281 <2 7308 0+ 80 36505 5105 ספ/ 85 8חחוז זז .פע 1 תצסץ 10 פחוחס6 15 055ם צות 5 01/5 01| 3 חן חב .180ז5זסס0 זטס 3688זם עווהנסבּ הס 85!וחז 3,000 פחו8ם פאו| פחהותזסא .הַחוחז הססט בּ 318 זסזסס ספ 300 85585ח|8טם ||8חח5 ז0 פחפוווורח פזהּ פזפחד זופח1 8א|| צפת ך .עפ 538 פח1 >הות1 סחצצ פזטפתפזס8 וח 5 פחסו -- '|וחחפ' החוש בחור ז'חסם צפת ד .8 הט תהמפטחו .עֶהו0851 זו8ח11ם [סזוחס6 ח! פז'עפחז צֶ3 01108 התהפזם עפח1 חותז | ?הוח | זהחאאי איסחא טפ זטם זופת 85 1800ס תאסה אוסחכ 6 זם הס הסקגוחה זס 050 פחז 8 פחסוח 3 51| זפ טתס! סח פז'ץפח1 עֶב3ם החד .68ח858זם בח 85וטס!סתח 180 ופצ . בחואיסו|ס1 |העפ! זטם ||8ח5 3 חזוא 8 08 10 זפ/ים ח8ח1 ז835[8 ]| פאה 5בחוזפחם זסטטסזם אופת אזםא 18 | 0 חפצם ||ואו 85|ח קרח 60 פוחסם .8זסו9זפטצס שו 10 8זפח +סח רח'| | חס הרבח זטטסץ ]טס טחה -- טסץ זסז חס 85001685ז פזסרח 8אחו! פצ] -- 51|| פשו51 3 חאה ח3 טפצ 510780 זְ1ב/%-5-300[ פח1 פעְבּ/ פזבּ פזפח זטם .2 פַהַבַּק :1 50318 5 החפ 8 3 הפתסחטבּ] 51טון הזס6. 3ח38 :6-15 הוס-זו-וות 8 078818 /]8851 בחב ץ!סוטם סז 5118 ספ צחבּ החוופהחט 0 [ת3י8|8ז 615טסזס תזואי חס 8ַחוממ0ח5 בפקווסזפטס החזה פח1 10 0 פזפחאום 5118 .88 זסז -- הסחפוטטב זופחז 3 החסז1 018 הח סזם 10 +הבּעצ ע8ח1 פזסטטסזם 58ססח6 ,9118 0₪ו085 5118 3 016% 15חה ת6זפרח 1,000 זפ/ים זס 8ַ5ַּבּמ₪313 הזז תסוחסכ זופח1 זסז ]ופצ חתפת -- פא|ו| צ8ח1 8ז3|מוחפז ,8ח|6855סזם הסוסה 5ח13 פה ך .פוזזהּ 10 68805סזם 58|8 8 ||3 8ז3 6085 58/08 ז8 65100 טחה בחומסוחפ .סרח זם1 01168 .15חה תסזפרח פחז צם 0 עיצוב ממשק באינטרנט וב[ / עָו03 זנוסץ 061 ו 5 שהחפוזם 5 5 5 ספ הס 0ז6!]וא 4חוסקסה5 5 10 פד ה ב ו | הווח וח ס) 3% סופת סוחס )ו 168 זס)ה!זנן וסוס 6 030 )הסוח 0+ חן ו 01 בוה בבן ב !|הוזוס 9% (בעמוד הקודם) אתר א סח של ₪675% 36556 מציב את הקישורים לכתבות ארוכות יותר בטור הימני. הטור השמאלי מוקדש לניווט באתר, והוא מתאים למה שנהוג לעשות. המשתמשים יחקרו לרוב את הטור השמאלי במלואו (אלא אם הם מעוניינים לאתר במכוון חלק אחר של האתר). אך הקישורים שבצד ימין מהווים עבור 9%ז86 דרך מצוינת להמליץ על כתבות שקשורות לנושא הנוכחי. ניווט עתידי עלינו להפסיק לחשוב שהאחריות על הניווט מוטלת על הדפדפן או השרת בלבד. במקום זאת, האחריות צריכה ליפול במשותף על הלקוח, השרת ומשאבים משותפים כגון שרתי ץאסזק. לכן, לדוגמה, הייתי מצפה מהשרת לשלוח הגדרת מפתח אתר ב- |ואא ללקוח, כדי שהדפדפן יוכל לשלבה יחד עם מפות אזורים אחרים של ה-85/, בהם המשתמש נוהג לבקר, וליצור מפת ניווט עבור אותו משתמש מסוים. ניתן להוסיף נתונים למפה זו משרת ץאסזק שעוקב אחרי הדפים או האתרים שהמשתמש ביקר בהם בעבר. דמיין לעצמך מפה של מקומות אליהם תוכל לעבור, מקומות שצבעם מקודד על פי רמת העניין שלך בהם. מפות אתרים (5/66!1805) הופכות במידה מסוימת לקלישאה. כל המשתמשים אומרים שהם רוציס אותן, וידוע לנו מתוך מחקרי קישורי טקסט שדיאגרמות כלליות מסייעות למשתמשיס לאתר את המידע המבוקש מהר יותר, ולכן אינני מתנגד למפות אתריס. אך לא נראה שהמפות הנוכחיות מסייעות למשתמשים במידה רבה. לדוגמה, חסרה להן התכונה שקיימת בכל מדריך של קניון מסחרי: מציין יאתה נמצא כאןיי. אתריס רביס מעצבים את מפות האתר שלהם כרשימה פשוטה של כל מה שיש להם. אפשר להשתמש במפה דינמית שמציינת את הדף ממנו המשתמש הגיע, ושיש בה דרכים להארת מידע מעניין לאוכלוסיות משתמשים מסוימות. הפחתת עומס הניווט כמובן שלא ניתן לייצג כל פריט מידע יחיד בממשס ניווט (בהנחה שישנם יותר מדי כאלה). במקום זאת, העיצובים חייבים להשתמש במגוון שיטות כדי להפחית את העומס. הנה כמה שיטות שימושיות: > קיבו4 (חסְחּחָפזפָה, הצגת יחידה אחת שמייצגת אוסף יחידות קטנות יותר). ניתן לעשות זאת בקלות בתוך אתר (אכן, רעיון הייאתריי הוא רמה שימושית של קיבוצ אתרי משנה). אך קשה יותר לקבצ נתוניס על פני כמה אתריס. > סיכום (חס80?וזהוחוחט5, דרכים לייצג קבוצת נתונים גדולה על ידי כמות נתוניס קטנה יותר). דוגמאות לכך כוללות שימוש בתמונות מוקטנות, שמייצגות תמונות בגודל מלא ותקציר של מסמכים מלאים. אנו וקוקים לדרכים לסכם אוספים גדוליס של פריטי נתוניס. 6% סינון (9חוזסט!ו=, הסרת כמות גדולה של חומר מיותר). סינון שיתופי (6חְפזסטגּו|60), ומסנניס איכותייס הס כליס שימושיים למדי (לדוגמה, הצג רק את הנתוניס שמשתמשיס אחריס התעניינו בהס). > חיתוך (חסט68חטזד). חתוך הכל פרט לחלקים הראשונייס של המידע, ואפשר לחיצה על קישור ייעוד... יי כדי להגיע לחלקיס האחרים. % ייצוג מבוסס דוגמאות. במקוס להראות את הכל, הצג כמה דוגמאות מייצגות, והוסף כיתוב כגון יישנס עוד כמה מליוני פריטים כאלה'י. פרק 4: עיצוב האתר ‏ 221 הימנע מניווט תלת-מימדי כל כמה חודשים, העיתונות הטכנית מדווחת על טכנולוגיית ניווט תלת-מימדית (35) חדשה, בה הניווט נעשה על ידי "טיסה" במרחב התלת-מימדי. רוב המערכות הללו פוגעות במשתמשים יותר ממה שהן מסייעות לו, מכמה סיבות: > הניווט במרחב תלת-מימדי לא טבעי לבני האנוש. הרבה יותר קל ללמוד לנוע על שטח (ק2) מאשר בחלל (כ3). % התקני הקלט והפלט הם דו-מימדיים (לרוב מדובר בעכבר ומסך), ולכן הממשקים שמתיימרים להיות תלת-מימדיים הם למעשה מעין הקרנה ולא התקנים תלת-מימדיים אמיתיים, ולכן השליטה באמצעותם לא טבעית ומגושמת. % למרחב המידע יש הרבה מאוד מימדים, ולכן אין סיבה הגיונית לכך שמעבר לשלושה מימדים יהיה טבעי יותר מאשר שני מימדים. % מידע רב נסתר כאשר על המשתמש לטוס/לעוף דרך מרחב תלת-מימדי, ולכן למעשה קשה יותר לקבל מבט כללי (שהוא המטרה העיקרית של עזרי הניווט). % אף לא אחד מאותם הממשקים התלת-מימדיים מתייחס להתפתחויות בממשק המשתמש עד לרמה שבה המשתמשים יוכלו לבצע משימות ניווט שכיחות מהר יותר מאשר בעיצוב דו-מימדי פשוט יותר. עיצובים אלה עשויים להיראות טוב מאוד במצגות הדגמה, אך לא נראה שהם יסייעו למשתמשים אמיתיים לבצע משימות אמיתיות. השורה התחתונה היא שתלת-מימד אינו מטה קסם שמסלק את בעיות הניווט. אפילו אם מישהו ייצור ממשק תלת-מימדי שכן יפעל כשורה, הוא עדיין יעמוד מול הבעיות העקרוניות של סידור המידע בצורה שתהיה הגיונית למשתמשים, ותתאים למה שהם ירצו לעשות. אתרי משנה הגולשיס זקוקים למבנה כדי להבין את מרחבי המידע הרביס והמגווניס בהס הס מנווטיס. הטבע הבסיסי של ה-65/ אינו תומך בשוס מבנה מעבר לדף הבודד, המהווה את יחידת המידע המוכרת. כמובן שהדפים הבודדים אינס מספיקים כדי ליצור מנגנון מבני, ומימיה הראשוניס של ה-ספו, אני תומך בנתינת דגש על האתר כיחידת מבנה עקרונית נוספת. לחיצה יחידה יכולה להעביר את המשתמש לצד השני של היקום, ולכן כל דף צריך לספק למשתמשיס תחושה של מקוס וליידע אותם היכן הס נחתו. ההכרה המפורשת באתר כמנגנון מבני חשובה גס עבור השימושיות ב-65/, אך רוב האתריס גדוליס מדי מכדי שייכללו במסגרת יחידה מבנית אחת. ניתן לארגן מידע רב בצורה היררכית, וכן ניתן להוסיף ייצוג מפורש של ההיררכיה ברמה העליונה של הדף, כדי לספק הקשר נוסף ואפשרויות ניווט. לדוגמה, אתר האינרטאנט של חברת 81460 הדמיונית עשוי 2 עיצוב ממשק באינטרנט להכיל רשימת היררכיה מקוננת שמובילה לדף הראשי של המשרד בשטוקהולם: <- חסו₪60 הה68קסזטם <- 58165 <- 1060/60 6 והו !5606000 <- ה606שו5 כל אחד מהרכיביס ברשימה ההיררכית צריך להיות קישור לדף העליון של אותה רמה בהיררכיה. שיס לב ששס הרמה הנמוכה ביותר (כאן, 0866 וח|0חא5006) לא צריך להיות קישור כשהוא מוצג בדף הראשי של אותה הרמה. עם זאת, יש להפוך אפילו את השס ברמה הנמוכה ביותר לפעיל, כשהוא ברשימה היררכית שלא במסגרת אותו דף תוכן. במקרה של מרחבי נתוניס שלא ניתן לבנות אותס בקלות בצורה היררכית, ניתן להיעזר באתר המשנה כמנגנון מבני נוסף. ניתן להשתמש באתרי משנה גם במרחבי מידע היררכיים, כדי להדגיש רמה מסוימת בהיררכיה, שמשמשת כמזהה לאתר המשנה. המילה אתר משנה (5005160) מתייחסת לאוסף דפי 0 בתוך אתר גדול יותר שיש לו סגנון קבוע ומנגנון ניווט משותף. אוסף דפים זה יכול להיות מרחב שטוח, או שיכול להיות לו מבנה פנימי מסוים, אך בכל מקרה צריך להיות לאתר המשנה דף יחיד שניתן להגדיר אותו כדף הראשי. לכל אחד מהדפיס שבתוך אתר המשנה צריך להיות קישור שמצביע בחזרה לדף הראשי של אתר המשנה וכן קישור לדף הראשי של האתר כולו. בנוסף, יש ליצור אפשרויות ניווט גלובליות עבור אתר המשנה (לדוגמה, הדף הראשי של האתר וחיפוש על פני האתר כולו) בנוסף לאפשרויות הניווט המקומיות שלו. אתרי משנה הס דרך לטפל במורכבות של אתריס גדולים שמכילים אלפי ואפילו מאות אלפי דפים. על ידי מתן מבנה מקומי יותר לפינה מסוימת במרחב במידע, אתר המשנה יכול לסייע למשתמשים להרגיש בנוח בחלק האתר שחשוב להם. בנוסף, אתר גדול מכיל לרוב מידע הטרוגני שלא ניתן לדחוס אותו לתוך מבנה סטנדרטי יחיד, ולכן היכולת ליצור אתרי משנה בעלי מראה ותחושה שוניס יכולה במידה מסוימת להעניק חוויית משתמש טובה יותר. אתר משנה הוא סביבה ביתית לקבוצת משתמשיס מסוימת או לסוג שימוש ספציפי בתוך אתר גדול וכללי יותר. פרק 4: עיצוב האתר 223 אל תחפש ב-60// מסיבות לא ידועות, אתרי 0 רבים חשים מחויבות להציע למשתמשים אפשרות לבחור בין חיפוש באתר לבין חיפוש באינטרנט כולו. זהו רעיון גרוע. הגולשים יודעים היכן למצוא מנוע חיפוש שפועל על כלל ה-60/. אתרים אלה הם הפופולריים ביותר ב-60). אין צורך להעמיס על הממשק שלך באפשרות נוספת שהתועלת בה מזערית. 4 עיצוב ממשק באינטרנט ישנו מתח מסויס בין רצון המעצב של אתר המשנה לענות על כל הצרכים הספציפיים של מידע מקומי מול הרצון לשמור על עקביות באתר כולו. אתרי המשנה צריכים, ללא ספק, להקפיד לא להפוך לאתרים עצמאיים בלי קשר לאתר ההורה, שהס למעשה חלק ממנו והוא מספק להס הקשר ועושר. דוגמה טובה לאתר משנה היא 065%ז60ח3 של ד 20. 65%סזסו6חה מספק למומחה המחשביס הידוע ז8675 36556 במה לדיוניס באירועים האחרוניס בנושא המחשוב והמלצה על קישורים למידע נוסף שנמצא בשאר חלקי אתר 15צ8ס-)21. אתר המשנה 5%זסח6חה משתמש בנימה אנושית כקו מנחה למרחב מידע מרשים, והוא הוסיף לאתר ערך על ידי שימוש בקישוריס שמחזקיס את הביקורת. יכולות חיפוש מחקרי השימושיות שערכתי מראיסם כי קצת יותר מ- 50% מהמשתמשיס עושיס שימוש באפשרויות החיפוש, 20% מהמשתמשים עושיס שימוש בעיקר בקישוריס ולשאר אין העדפה לשיטה מסוימת. המשתמשיס שמעדיפים אפשרויות חיפוש יעברו לרוב ישירות ללחצן החיפוש כשהם נכנסיס לאתר 60 ). הס לא מעונייניס לראות את שאר האתר. יש להס משימה והס רוציםס למצוא מידע מסויס מהר ככל האפשר. בניגוד לכך, המשתמשים שמעדיפים קישורים יעברו לקישורים שבאתר. למרות שהס רוצים למצוא מידע מסוים, הס ינסו תחילה להשיג אותו על ידי מעבר לקישוריס קורציס מהדף הראשי. משתמשיס אלה ישתמשו באפשרויות החיפוש רק כשהם יתייאשו לגמרי מהקישורים. המשתמשיס שאין להם העדפה קבועה עובריס בין אפשרויות החיפוש לקישוריס, לפי מה שנראה מבטיח ביותר. למרות החשיבות העליונה של אפשרויות החיפוש, עיצוב ה-65/ צריך עדיין להתבסס על מבנה ברור ותמיכת ניווט. כל הדפיס חייבים לציין בבירור חיכן הס נמצאיס בתוך סכמת האתר הגדולה. ראשית, יש צורך לתמוך במשתמשיס שאינס אוהביס לחפש או באלה ששייכים לקבוצה המעורבת. שנית, המשתמשים שמנסים את אפשרויות החיפוש כדי להגיע לדף מסוים עדיין צריכים מבנה כדי להבין את טבעו של הדף יחסית לשאר האתר. הס זקוקים גס מיקרו ניווט בנוסף לתנועה על פני האתר כולו, המשתמשים זקוקים גם ליכולת תנועה בתוך אזור מקומי באתר. הם צריכים אפילו להיות מסוגלים לנוע בין הדפים שמרכיבים "חבילה" יחידה, כגון כתבה שמכילה סרגלים צדדיים או דף מוצר. לניווט כדי לנוע באתר ולעבור לדפיס שבסביבת הדף הנוכחי, אותו מצאו על ידי חיפוש. נדיר שדף יחיד מכיל את כל התשובות, ולכן המשתמשים ירצו לרוב לראות דפיס שקשורים לנושא. יש לתת אפשרות לחיפוש מכל דף באתר. משתמשי החיפוש ילחצו לרוב על לחצן חיפוש כבר בדף הראשי, אך משתמשים אחרים עשוייס לשוטט באתר עד שהס ילכו לאיבוד. ברגע שדבר זה קורה, הס לא אמוריס לחפש את אפשרות החיפוש, עליה להיות בדף הנוכתי שלהם. משמעות הדבר היא שיש להציב את אפשרות החיפוש בכל דף, משוס שלא ניתן לחזות מתי המשתמשים יוותרו על הניווט ויחפשו את לחצן החיפוש. לעיתים, אזורים מיוחדיס של האתר עקביים מספיק ונבדליס משאר האתר, ולכן הגיוני להציע חיפוש על שטח מצומצס באתר המשנה בלבד. כללית, יש להיוּהר מחיפושים מצומצמים, משוס שמחקרינו הראו שהמשתמשיסם לא מביניס לרוב את מבנה האתרים ואתרי המשנה. הרבה פעמיס, המשתמשים מאמיניס שהתשובה נמצאת באתר משנה לא נכון, ולכן הס לעולס לא ימצאו אותה על ידי חיפוש מצומצס. בפעמים אחרות, המשתמשיסם לא מביניס היכן הס נמצאיס ומהו טווח החיפוש, ולכן הס עשוייס להאמין שהס מבצעים חיפוש על האתר כולו או באתר משנה שונה מאשר זה שהם נמצאים בו. יש לנסות להימנע משילוב אפשרות חיפוש מצומצמת באתר. אס אכן יש באתר אתרי משנה שזקוקיס לחיפוש מצומצם, יש להקפיד על כך שכל דפי החיפוש המצומצס יעשו שני דברים : % עליהס לציין במפורש שהחיפוש מצומצם. ניתן לציין ואת בראש דף החיפוש ודף התוצאות. *> כלול קישור לדף שבו ניתן לבצע חיפוש באתר כולו. שוב, קישור וה צריך להימצא הן בדף החיפוש והן בדף התוצאות. בדף התוצאות, יש לקודד אותו כקישור עס כיתוב כגון יילא מצאת את מה שחיפשת! נסה להרחיב את החיפוש באתר כולויי. מעבר לקישור זה צריך להפעיל את אפשרות החיפוש הכוללת במבנה שאילתה והה לוה של החיפוש המצומצם, ועליו להעביר את המשתמש ישירות לדף התוצאות של החיפוש הרחב. פרק 4: עיצוב האתר 225 ה50סתת 5 פזומא | סא | זהסקקטפ | אסתה5ב | >זסטמסתק | זוספסחטוהי 1 חהסוו8 0000 08014ז6!!₪! ,050/ח8וחז/8ת6 536 וו 7 ווום זוסם הזוס 6ח+ הַחו5ש 116]65ז 6ח8 50686785 ₪1!]'5 חהַטסיוחה+ ה6'ו568 ח68 טסצ ₪080 סחד .10| 5חחזגוום6 0-05 זחשתחםאוסםוח= 6 5חרחו|0 62 85ה50 500 62 6אבך || ₪9 ה 5 זפרז ס = | ?ספו] לחוב על ופ סה ₪5]וופפו הסיו3 58 צחבּוח אופר] = 5אחו) 10 ו ו זסעז56 א06ח! * 830 בוב * +הטות"ו : 566 > ||ום |ובחח-5 * 7 ,29 שז3 130 ,ל5078503/ 2% 135% 0 ]בב ] .80עז85ז %5חטוז || ,הסטבוסקזס6 10508 1997 ₪ וחסס.050%ז0/רח .//עע/ע במבט ראשון, נראה מוזר לבנות אתר משנה במיוחד עבור הנאומים של ביל גייטס, אך אם נתחשב בכמות המעריצים הגדולה שלו (וכן ביריבים), סביר להניח שמשתמשים רבים יהיו מעוניינים למצוא ציטוטים שלו. אפשרות החיפוש באתר המשנה מעוצבת היטב מרוב הבחינות: ברור שהיא מבצעת חיפוש על אתר משנה, ואתר המשנה מעוצב היטב. אינני סבור שהמשתמשים ינסו להשתמש בדף זה כשהם יחפשו פתרון לבאגים שבתוכנות חדשות (אבל, הם כנראה יהיו מעוניינים לשאול אותו מה בדבר אותם באגים...). יש רק שתי בעיות הנוגעות לאתר: צריך להיות קישור מפורש לחיפוש באתר המלא של 0% תיבת ההקלדה צריכה להיות רחבה יותר כדי לעודד את המשתמשים להקליד יותר מונחים. סרגל הניווט העליון אכן מכיל לחצן חיפוש כללי, אך אם נתחשב בפעמים הרבות שהמילה "ח6ז568" מופיעה בדף, הייתי מעדיף קישור מפורש בתוך תוכן הדף עצמו. משתמשים מעטים יביטו מעל לסרגל "63005 !811" הצבעוני. 6 עיצוב ממשק באינטרנט חיפוש כללי ברירת המחדל של מנוע החיפוש צריכה להיות חיפוש באתר כולו. המשתמשים לא תמיד יבינו באיזה חלק של האתר הם נמצאים, ולכן אם ברירת המחדל של החיפוש תוגבל לאתר המשנה הנוכחי בלבד, הם עשויים לחשוב בטעות שהם חיפשו באתר כולו או אפילו שהם חיפוש באתר משנה שונה. חיפוש מתקדם יש להימנע מחיפוש בוליאני (סאג ,06 ,סא) משוס שהניסיון מראה שהמשתמשים אינם יכולים להשתמש בו כראוי. חקרנו קבוצות משתמשיסם רבות שקיבלו משימות כגון: יש לך את חיות המחמד הבאות : > חתולים ‏ > כלבים מצא מידע אודות החיות שלך. כמעט כל המשתמשים הקלידו את השאילתה הבאה: 5 א 6805 במחקריס שלנו, המשתמשים לא מצאו לרוב כלום על ידי שימוש בשאילתה הזו, משוס שאתר הניסיון שלנו לא כלל דפים שהתייחסו לשני סוגי החיות. כשהופיעה הודעת "לא נמצאו דפיסיי, רוב המשתמשיס הגיעו למסקנה שאין מידע זמין אודות החיות הללו. אפילו מתכנתיס מנוסיס ישתמשו לרוב בשאילתה השגויה. השוני העיקרי הוא שכשאיש מחשבים מנוסה נתקל בתוצאת החיפוש הריקה, הוא יסיק לרוב שעליו להשתמש ב-08 במקוס סאג. לרוע המזל, רוב המשתמשים אינם מנוסים בניסות מחודש של השאילתות. ווהי הסיבה שבגללה אני ממליצ על שימוש מינימלי בחיפוש מצומצם, ולא להשתמש בחיפוש בוליאני בממשק החיפוש הראשי. חיפוש מתקדם הוא דבר טוב, אס הוא מוצע בדף נפרד מהחיפוש הפשוט. דף החיפוש המתקדם יכול לספק מגוון אפשרויות נוצצות, כגון חיפושיס בוליאנים, חיפושיס מצומצמים ומגוון חיפושיס על פי פרמטרים מיוחדים (לדוגמה, דפים שנוספו או השתנו אחרי תאריך מסויס). חשוב להשתמש בשס מזהה, כגון ייחיפוש מתקדסיי, כדי להבריח ממנו את המשתמשים הלא מנוסים. החיפוש הוא אחד מהמקריס המעטיס בהם אני ממליצ על עיצוב צורת התנהגות המשתמש באמצעות הפחדה. באופן כללי, המחשביס טובים למעבר על רשימות ארוכות של חומר וזכירה אס ישנן מיליס חלופיות אותן יש לחפש. המשתמשים גרועיס בכך, ולכן ברור מה על מערכת חיפוש מעוצבת היטב לעשות. המערכת צריכה לבצע בדיקות איות (הן על שאילתות המשתמש והן על מונחי המסמך), ולהציע מיליס נרדפות. פרק 4: עיצוב האתר 227 5 +50301 - עֶ"ז3י101 1 201507031 - 2 ססם'וט!ש5חת עפ6תבעק סה 1951( 5008 ) 2 1/ : ₪ 5 ץזבזט! | 60001808 600 צזבּזטו | ובהס5זפק ₪ /% 6 חווכן סצזג |[5181ו1 :זסן צזבּזטו| ו בהספזפם 55סזסב הסז593 )0 פס|ופפה 2 |סע 600% שפח ו6קס|6ט06 6ובע5010 2.6 פוובּ|ס50 6 8 5 8]0צ26 ו5516₪ ששסטחועצש א 50181715 8-] חס כַחו30 ₪3 ברחב סחווו553ח1 שי :1 ח5680 יוטסץ פצסיוםחחו פד 5זסצצו להפזטאום צזד 9 צז'1ם1 1 11818 60 58!805 סגו , 05זסאו הרח53 ברס צזד % 5וד ...583 הפסחב טב פזסוח 3 עד 4 עפפתבעץ שאה 5%5811ת+]| 583708 5וד צזבּזטו | 8068ו0זפ6 6 צזבּזטו | ובהספזפק ₪ 5אחִהָוז || 106 ,05ח5+6ש0705ו1 הט5 1997 אתִהַשְקס0 0 0065.5₪0.001 (בתמונה למעלה) ממשק התיעוד מבוסס ה-60/ של 800%2ז6ו/ופחה של חברת חט5 משתמש בחיפוש מצומצם: כל משתמש יכול להגדיר ספריה אישית מתוך רשימה של חלקי מרחב המידע הגדול שלרוב מעניין אותו. כברירת מחדל, החיפוש משתמש בספריה זו כטווח החיפוש. בדוגמה זו, נמצאה רק תוצאה אחת (לא מזהירה) לשאילתת המשתמש. מתחת לרשימת תוצאות החיפוש יש הצעות לשיפור החיפוש. ניסינו מיקומים שונים של הוראות אלו, וגילינו שצורה זו היא הטובה ביותר. כשהמשתמשים מגיעים לחלק זה של האתר, הם מדורבנים לקרוא אודות דרכים לשיפור החיפוש. ללא הנחיות אלו, משתמשים רבים לא היו מנסים לבצע חיפוש על הספריה המלאה וכך לעולם לא היו מוצאים מידע שלא נכלל בטווח החיפוש הראשוני שלהם. (בעמוד הבא) כדי להגיע לדף זה, משתמש 2אסספ8ז6/א5ח/ חזר על החיפוש, אך הפעם הוא קבע את טווח החיפוש לספריה המלאה (עז8זט! | 6ז6!קוח60). הפעם הוא מצא הרבה יותר תוצאות, כולל תוצאות טובות, מתוך אוסף ז1507800ח01ח0)/ ה5/5%6. מסתבר שהבעיה שהמשתמש רצה לקרוא עליה (התקנת מדפסות) נחשבת על ידי מעצבי התיעוד למשימת ניהול מערכת. סדרת התיעוד המקוון היא מרחב מידע בעל מבנה מסוים, ולכן רשימת תוצאות החיפוש יכולה להציג את התוצאות בהקשר, שמבהיר למשתמש כי רוב התוצאות הטובות יותר נמצאות באוסף חר 0 וה5%6ץ5. השימוש בסמלי ספרים (וכן בשם של התיעוד המקוון) הוא דימוי לספרים כדי לציין שזוהי "ספריה אישית". כללית, דימויי הספרים אינם הדבר המתאים ביותר לקישורי טקסט, אך זהו מונח שמתאים למרחב המידע המסוים הזה, שבנוי כך שכל המידע אודות נושא מסוים מוכנס לתוך "ספר". 8 עיצוב ממשק באינטרנט 0065.50/0 00 5 0 - ע10131 1 00701016 + 2-ו עשת בע פווה 15|( 500 ] 6% | ן ₪ 5 צזבּזטו | 858!קח60 ₪9 צזבּזטו | וחספזפס 6 6 חוכ גוג [15181 :זס+ צזבּזם!| !הסט 55סזסב ה0ז583 )0 פסוטופפה 1 |סע ה60!!66₪0 -07ב5וחווח 0 וח566צ5 2.6 !50 .6 8 ח0ם1הו151חווחז 55161 55 בהסחחום טחוטב חב 5חס=ת טחוסבּחבּו | 58 ופפחחום סז סהוהחבוםס זססחחס אס 480 3 טחופטפה 5 >חחם 3 מש חס 50 8 567"5!] 'ז8+0-ו151ח1וח +חס-=] 5סחס= ||553ח1 פד 8 חסםו5חהיז ד א.2 0+ א.1 50!8715 בסבזפזוס חבז 15 בוט פוחד אופם 5 הווח 5565 חב 05875 107 הססבותזוסזח1 הססופחבוד | סהסחחחס 5 0-6 5 0 5 סססס כוסות 6 הסוח וט 0 פהו!ה0 שַה!66855ת .4 סחסחחחס 6 05 ההסחחם הַהוהַהַב3ח6 5 סזב 5070 זםו5 הפוהטססם בחווו553ח1 - 2 |סעצ 6500%ש5ח ו6ק6|0ע06 6"ובּעש50 2.6 פוובּ|ס5 6 8 5 ק8!0ע26 ו516₪צ5 ושסטח!/ש א 50|8715 ₪- 5חסת הַחוְסַ3ח₪3 בחב סחווו5%3ח1 - 600 5 6ב עש0-ובּ] חנו5 חס 2.6 פוזבּ|ס50 6 130 08ח₪9)96 +5ד 2.1 5 דעהטפ א 5 חזסם 500685% 0 פרק 4: עיצוב האתר 229 5 הזס6.חש .שש כשמנוע החיפוש של חס ספפד סו ות 5 5 9% 5 |י פווד] 5 אסוטם ו 0 ,86150 5! זסחזה זס 310085 80801 סח פזבּ פזפח1 ץזזסס זט חפ 8ז'טסץ זחא סז 6|058 08 3 1031 85ווז 13 בחח ו פע .זז הפחפ>!וטטק 5 ]0001008 :80ח5!וסט 318 ]6 מזפמב3ּ= 1 ה88ופו טסאגּב 0 וס | 9505 ה58876 ₪006 5 ו עדו עס זזהו! 6 וע :וז 6!טה!והעיה . 161 זס [0ו65156[1: חן א%ס8|0ם 01501380 8זבהּ 13 - 1 5 580 חב [חוז-1ם-וס 1 התטסז 3150 08 | סחומוס6מחם= חב שוסצן = | 5וחזס1 || | | פסוזם ו 8 2 10 !2651561 :הו ה58376 ער 6-50 6הושחם צָזווו9ה05 | .1 פזטוסח 24 חותזואי 105ח5 106%-חו 70 :פסוזם זט 1 ]3 פזסרח 1880 זס אססט 5וחז עטם * 65 ,8 287065 אינו מוצא תוצאות, הוא מבצע בדיקת איות על שאילתת המשתמש. במקרה זה, המשתמש יכול לשגות באיות השם (דבר שנעשה בתדירות די גבוהה) ועדיין למצוא את הספר. ערך החיפוש היה 38600 ולא 0ס. שים לב גם שתיקון שגיאות זה מטפל גם במקרים בהם המשתמש כתב את השם נכון, אך האתר גילה שגיאות בבסיס הנתונים שלו עצמו. דף תוצאות החיפוש על דף תוצאות החיפוש לספק רשימה ממוינת של תוצאות, כאשר התוצאות הטובות ביותר מופיעות בראשה. חלק ממנועי החיפוש מעניקים ציוניס לתוצאות החיפוש ומציגים אותם ליד התוצאות, אך המשתמשים אינסם מביניס כיצד ציוניס אלה מחושבים, ולכן הס חסרי משמעות. כל זמן שהתוצאות הטובות ביותר נמצאות בראש הרשימה, המשתמשים יכוליסם להתחיל לסרוק בקלות את הרשימה מלמעלה, ולראות אוטומטית את רוב התוצאות החשובות בהתחלה ללא בזבוז ומן על ניסיון לפרש את ציוני החיפוש. רשימת תוצאות החיפוש אמורה למנוע הצגה כפולה של אותו הדף. נפוצ לראות את דף ברירת המחדל שבמדריך מופיע כמה פעמים עם שינוי קטן בכתובת ה- 01 שלו. בשרתיס רבים, שלוש כתובות ה-1ש הבאות יפנו לאותו הדף: זה החסס. סס1. אואואו/ /: קת ]הס /רחסס. סס1. אואואו/ /: סת |החזח. 3/0 סס. סס?. וצו /: קת 0 עיצוב ממשק באינטרנט (בעמוד הבא) אתר 18 משלב מבט כללי מבני לתוך דפי תוצאות החיפוש. כשהמשתמש מבצע חיפוש על המונח "חזום", הוא מקבל דפים העוסקים הן בציפורים כחיות והן בציפורים כחיות מחמד (וכן דפים אודות דינוזאורים). ההבדל בדגש בין הדפים השונים ברור גם כשהמשתמש נמצא עדיין ברשימת תוצאות החיפוש, ובכך נמנע בזבוז הזמן במעבר לחלק מהדפים רק כדי לקרוא בהם מידע אודות נושא שאינו קשור לעניין. למרות שכתובות אלו שונות מבחינה עקרונית (כלומר, הן יכולות להצביע על דפים שוניס בנסיבות אחרות), יש להתייחס אליהן ולהציג אותן ככתובת אחת בלבד ברשימת תוצאות החיפוש. המשתמשים יתבלבלו אס הם ילחצו על קישוריס שוניס ויקבלו את אותה התוצאה. מערכות החיפוש אמורות לזהות במפורש את האיכות ואת הרלוונטיות בומן סידור תוצאות החיפוש. לדוגמה, אס יש לאתר קוב ₪40 אודות מונחי השאילתות של המשתמש, דף ה-0= צריך להופיע בראש דף התוצאות, אפילו אס דפיס אחרים קיבלו ניקוד רלוונטיות גבוה יותר. בסופו של דבר, לרוב ה-40= כתוב באיכות גבוהה, תוך דגש על מתן תשובות לשאלות המשתמש. בנוסף, ניתן לבנות בסיס נתוניס של דירוג איכות עבור כל הדפיס שבאתר, יחסית לכל אחד ממונחי החיפוש הפופולריים. לדוגמה, בכל פעסם שהמשתמש עובר לקישור מדף תוצאות חיפוש, הוא יישאל עד כמה הדף מתאיס לשאילתה שלו, והמערכת תשמור את דירוגי המשתמשיס ותשתמש בהם כדי לעצב אישית את רשימות התוצאות בעתיד. עד עתה, יחידת החיתוך של החיפוש ב-ט6/ היתה הדף. במיליס אחרות, פלט החיפוש הוא רשימת דפיס שמתאימים לשאילתת המשתמש. לרוע המצל, רוב רשימות הדפים הללו אינן מציינות את הקשר בין הדפיס שנמצאו. עדיף לבנות את תוצאות החיפוש יחסית למבנה האתר. לדוגמה, אס נמצאו דפיס רביס בתוך אתר משנה יחיד, אולי עדיף לרכז את כל התוצאות הללו לרשומה אחת בדף התוצאות. לעיתים, הגיוני אפילו לחלק את התוצאות ליחידות שגדולות מהדפים. לדוגמה, מנגנון חיפוש של אתר המכיל אתרי משנה שוניס רביס יכול להשתמש באתרי המשנה כיחידות חיתוך, ולהציג את אתרי המשנה עצמס כמתאימיס לשאילתת המשתמש. לאחר מכן, המשתמש יוכל לבצע חיפוש באתרי המשנה עצמם. תיאורי דפים ומילות מפתח חלק ממנועי החיפוש הגלובליים באינטרנט מציגיס את הסיכום שנכתב על ידי יוצר האתר, במקוס ליצור טקסט סיכוס משלהם. עקרונית, אני מסכיס עס גישה זו משוס שבני האנוש עדיין טוביס ממחשביס בהחלטה מהו תוכן דף מסויס ובכתיבת טקסט קריא. פרק 4: עיצוב האתר ‏ 231 חס ש 5 0+ זט6 שד 0 זו 66% 0 % . . " , / 0 39 עבג ]| 2 21) 2-2 04 0400-00-22 ₪ וובוא 0 5 16% זזטם ו 5 9 כופוו 80006 605|005ו זס3568700.1. סם שְתפאו טוסץ 6וקסם 6ר חו-פפץיד ה נצגכן וו (00)5שץ6> 6 חס סַתות56870 :505 7 סמטס- 88608.0 ./ע/ע/ץ 2 עעיצוב ממשק באינטרנט השתמש בתיבת חיפוש רחבה רוב מנועי החיפוש מספקים תוצאות מדויקות יותר כשהמשתמש מקליד יותר מילים בשאילתה, אך המשתמשים עדיין נוטים להקליד שאילתות קצרות למדי. ייתכן שחלק מהאשמה נעוץ בעיצוב מנוע החיפוש. חסזףזהּא ופפט3 ו-ח26ח8ז-] 1500167 מאוניברסיטת שטוקהולם ערכו ניסוי קטן בו סטודנטים השתמשו באותו אתר 80/ עם שני סוגי תיבות הקלדת טקסט של מנוע החיפוש. בממוצע, הסטודנטים הקלידו 2.8 מילים לשאילתה, כשהשתמשו בגרסת האתר עם תיבת הטקסט הקטנה יותר, אך כשהם השתמשו בעיצוב שכלל תיבת טקסט גדולה בהרבה, ממוצע השאילתות עלה ל-3.4 מילים לשאילתה. תוצאה זו הגיונית מזווית השימושיות משתי סיבות. ראשית, המשתמשים אינם אוהבים להקליד משהו שהם אינם יכולים לראות אותו, ולכן הם לא ירצו להקליד טקסט מעבר למספר התווים הגלויים בכל זמן נתון בשדה הטקסט. לכן, גם אם שדה הטקסט ניתן לגלילה, הגולשים נוטים שלא להקליד שאילתות ארוכות מעבר ליכולת תצוגת השדה. שנית, גודל תיבת השאילתה עצמה קובע חלק מהציפיות שנוגעות לגודל מחרוזת החיפוש. תמצית הטקסט נמצאת בתגית 608 כשהכותרת שלה מכילה את השס ''חסטקוז0656י. מבנה הסיכומיס הוא: =%ח6ח60 "חס ס]6="0656וחבח 668 > <"806ק 5וחז 01 +ח6ח60 6 01 ץ הר הטפ 8 15 פוחד" ההחלטה על אורך תקציר הדף עבור תוצאות מנוע החיפוש היא פשרה בין רצון לספק זווית טובה של היעדיסם האפשריים לבין הרצון לספק מידע על ערכת החלופות המלאה. סיכומיס ארוכיס טוביס בכך שהס מאפשריס למשתמשים להעריך כל דף לגופו, אך האורך מקשה על המשתמש להשוות את היעדיס ללא גלילה מסיבית. כמעט בכל המקרים, יש צורך בצורה מסוימת של תקציר, משוס שכותרות הדף אינן מספיקות למשתמשים לנחש במה עוסקיס הדפים. תקצירי הדפים צריכים להיות קצרים. רוב מנועי החיפוש מציגים רק את 150 או 200 התוויס הראשוניס של טקסט התיאור, ולכן מומל שלא לעבור גבול זה. אפילו כשאתה משתמש במנוע חיפוש משלך, עדיין כדאי לשמור על תקצירים קצרים, משוס שהמשתמשים נוטים לסרוק את התקצירים ולא לקרוא אותס במלואם. בנוסף לתיאורים, נהוג להוסיף גס רשימת מילות מפתח בתגית 618 שבכותרת הדף. לרוב, מילות המפתח אינן מוצגות ברשימת תוצאות החיפוש, אלא משתמשיס בהן רק כדי לקבוע את הדירוג היחסי של הדפיס המתקבליס: ההנחה היא שהדף עוסק בעיקר במונחיס שכלולים ברשימת מילות המפתח שלו. רשימת מילות המפתח צריכה לכלול הן מונחיס פשוטים (כגון ''פטפ'י) וכן מונחים מעורביס (''5ום ז6א6-066!סטס0'י) משוס שהרבה פעמיס המשתמשים מחפשים מונחים שמשלבים כמה מילים. במחקרים על שיטות חיפוש שקדמו ל-60/, מצאנו להפתעתנו, שמשתמשים הקלידו שאילתות בנות מילה אחת. לדוגמה, במחקר על מערכת תיעוד מקוון מסורתית, ₪06 חַ16808! ואני מצאנו ש-81% משאילתות המשתמשים הורכבו ממילה בודדת. ייתכן שהכמות העצומה של המידע ב-60/ אילצה את המשתמשים לדייק בשאילתות שלהם. בכל מקרה, שאילתות בנות מילה יחידה כבר אינן נפוצות כפי שהיו בעבר. בשנת 7, ניתחתי 2,261 שאילתות שהתבצעו במנוע החיפוש 00 / ו-24,743 שאילתות מאתר וחסס.חטפ.צואואו. בשני המקרים, גיליתי שכמות השאילתות בנות שתי מילים היתה גדולה בהרבה משאילתות ארוכות יותר. פרק 4: עיצוב האתר 233 חן ו ו 8% 5 1 "56 [סחס1>סתיוס6 תד "| 66 8! )טוחוו סכ עו שפור 8 עם 310085 40 מ[פד .וצצש צש [5וחד 1166 6זסו] 258 |בחססב חחפסח1 וס 13085 5סח1 58 סהוחסו5פס 8396 [5וחד 1166 פזפון] רוכב זססום ה58!ופו טסא13 8096 [5וחד 1168 פזפוא] (אססם) סההפפהוסחם ץשפו|וט053 7996 [5וחד 1166 פזסון] ...199 56ב 1800% 5 ח58|פו₪ טסא13) עפו|וט053 |הססבּחפסח1 759% ו 0ש. ץצ הסו-10ו םס /ט. עש צש צש [5וחד 1168 פזפזי]] 13005 חן ז25 |בהססבּרהפסח1 :אססם 8296 [5וחד 66ו1 פזסוא] 108 עסחבּצ] 7896 [5וחד 1168 פזפון] 068065 + 8|טבך 7896 [5וחד 1168 8זסוא] 5אססם :צסגשח כ ומסצ 759% [5וד 1166 678ו] (הסו5זפץ סחם!) פותש5פח 305 צסחבּצ] 7296 [5וחד 1166 פזפון] 4016 .1 צסחבצ זסץ בּפוע 6ורח008ב63ה 7296 ו 0ס.ץ !וש ה[. שוש צש [5וד 1166 16ס1ן] 3085ב 1 סח 057 |בהססבחחפסח1 8296 .אש 2 הט5אצעע [5וחד 1168 פזסוא] 870158 א ו :13085 םסח 05 |בהסםבהחפסח1 :.1 הש5!פוא :אס 8096 [5וחד 1168 8זסון] (1989-1990 ,21 בתחטופע') הספו|טם 51661 : הססספו|ס6 759% 60 הפ שנעעע [5וחד 1166 8שפון] ערסבזססום ה58|פוצ טס136 8096 05.00 וה 5. שעש וע [5וחד 1168 פזסו] 5 וצ 1.35% |בהססב ח65ח1 אספסחב | 8096 [5וחד 1168 8זו₪] 5סחס0ט 5טות 01560 |בהסםסבההטסח1 אסםטחב | 7696 61.60 ה 66. צש צשציע [5וחד 1168 פזפוין] 05100 1001308 זם05 8096 וו סח צשעשצע [5וחד 1168 8ס] וב הורח5 הססבּט|בצם בחב הסופפם עצעשעש : 5ששפח פסוחסצ] 7996 51.60 6 סוק 50. עש צשצע [5וחד 1168 ₪1676] 08ב ובס 05 |בּסוחמבּזט 7896 ו 6.60!וסששו. עה 0ז61ח [5וחד 1166 פזסו] אבצש פרם זם עצפוצב אססם 5'בםצעצו 7896 1.0 סש זט ס]. צע צש צע [5וח ד 1166 1616 כו חההובפהוטחם שסו!ו253 - 65ססם - 65סטוטסזס בהופצש החטםת 7796 .516 שוש צש [5וחד 1166 6ז₪16] בופםח/ 7696 הזס6. ה20?ה הזה מש ושוע [5וחד 1168 8סו₪] בוהחפפחוסחם עסו|ום053 7696 16 2 [5וחד 1166 פזפסון] עזבזום| | ]ה 7696 [ח0ס.0/76א6 ./ע/ע/ץ האתרים הם יחידת היררכיה חשובה ב-ספ6שו, ולכן קיבוץ תוצאות החיפוש על פי האתרים להן הם שייכים, מהווה דרך טובה לסיוע למשתמש לחלק את התוצאות מבין כמות הדפים העצומה שבתוצאות החיפוש שלהם. בדוגמה זו, הייתי שם את תוצאות החיפוש של הוחסס.ץ680-ז-0!זסצט. וצו מעל חסס.ו6פט.אוצו, משום שנראה שחשוב יותר שתהיה תוספת של 50% בדפים הנוגעים לשאילתה מאשר דפים שקיבלו ציון של 82 או 83 בדירוג החיפוש. 4 עיצוב ממשק באינטרנט 5סססטה | ספח5 | 305ס!|חשסם | ₪85 | 5שפוצפם ד :שומ זם 5118 8 אסוק ₪ וס הסוח ם: 0 66% וב]/)[י4/ !סח חוסצ 5זסזוחסוח הסח 21 :0ס- ך=20 5-6 ןודי 563 פחו1ת | 56800 6 5זסאחסחז הסחז ₪ "5יו0)והס[ ההז 21" "וס] 65ַחָבּ0 70%891 פופו ז5סו₪ 10 קסד פו זפס 65 0[ח= 875 0ס5ש0 00 זט 96300 5 תא [ 60 ] 5זסווחסוח הסחו ₪ 0% ח0) פזסות טפ |63וחהח66ד פאחו | 101 70861 8 זטטסזק :8זסזוחסוופ 8 ]סז פופַחב3ּק 1ב|= > 5זזוחסוו זסז טפסופ 5 3 זסז פסהם % 5זווחסוו צטום 10 יסרפ 35 131 צטם 10 שוטר > 1 זסן 16 8חו032 ₪3 זפוטו טרס ה6ז3 0606 שת 21 זסז ומס חב פפחזבּם המזבּפם * 8 6 8 5 סט סז בחוזק 0 700 + 001065 זסטטכחק * פחוקבּטטן 0 [08-31-99 , 5זסטססחם] 3% ]2150 |פחבק 83| = [08-31-99 , 5זסטטסם] ‏ 10! תס ה6ח!- 20/21 הסוטוס 85 -חטום [08-31-98 , 5זסטשסחק] 101!ח סו ה 6ח!-3 17/1 מסוט!ס 5-חטורו [08-09-99 , 5זסטטסתק] /21181/1) 318 רח! [08-08-99 , פצסטטסחם] 0135 215] 211181 0₪5זפח 0 [07-31-99 , פזסטשסחק] 101!ח סו ה 6הו-3 17/1 וטו 85ז-חטורו ...651115 ] 0165 61וו! זו 6 זסות 8ַחוסקקסופ שח 10 שסר] = 5חסוזסו4/ = וחסס.זפפקסת65זטפוחסט [צזטאחטוא] 10 81 ה6חו-21 * [00015ח הסוז3?ה656חק] 5 110 ה טר 4 הוהח3 310-565 תסחן 21 0851 5'וח6בּווה * [פוסאחטוא] (5126 318 רח! 18ם עיפוי "20 טרח בההוהח553-סוט3 ה6חן 21 851ם ב'וח6בּווח * 36105 זטעשיסם זז סקורחו1טס 3 הפחט1 ,0850080 5זסזוחסרח 68חה וספ הסחו-17 2 [5זסזוחטו] [פזסאחטאן 15 10| הטרח 21 62001 18ח8ו|68 הס1ש6חוזם * [צוסטוחטו] 5 10ו טרח 21 50005 מ₪563|טוח 50 * ...6511115 ז [הוקןקסו!5 6 זסות ב 6 חבט - ?...! סם שופ = 5בטפ - 5פוד = ופהחבתם !פופ -1997-06 , פהבשנחבון] ? | 5 ₪00 555] 5| ער 3 השח זסזו מס זפזטם 60 3 צטם | בוטסח5 צחצעצ : 60 .2006./עעשעץ שיטת הקיבוץ מתאימה גם לחיפושים בתוך אתר יחיד, למרות שהמנגנון המבני צריך להיות שונה. לדוגמה, ניתן לסדר את מבנה התוצאות על פי אתרי משנה או על פי קטגוריות, כפי שנעשה בדוגמה זו מתוך אתר 201%6%. שים לב גם לשימוש בקישורי קיצורי דרך לאזורים החשובים ביותר של האתר שמתאימים לשאילתת המשתמש. אני פחות אוהב את תיבת החיפוש שמופיעה בפרסומת. למרות שברור מעל לכל ספק שמדובר במודעה, תיבה זו עדיין מטרידה מאוד את המשתמש. פרק 4: עיצוב האתר 235 0 1 106 05606%/ה1 5+ = ב ששכאוסענ= ו 3 וי ממוווות..ה 25 בר 5 = מ 5 צָזו|5891ש זכ1 58370080 טספ 51865 1 - 10 0% 1 10 10 פמ 168 ו | 6חז|ח0) 8006581167 5פחיו | 0'5]וסעש 6]טסצזהה65חיוהם > 605 600 0 %אפח 5ותוחט5 4:86 | 23,981 ]0 10 - 1 51:65 צסצו50 165ו0זהיוס םב | זו|01 1158 צפצזו5 1994 ג :5פחססבזסטב | עסווום153 צפעזט5 305 | שו|ום053 55535 בחב >זפקבם החסס.סופ5ט .. (3700 ₪858 5הסבּסוחטותרח60 |881) פזס₪8|!6 :ההסחאו זס פחחט סב הססבווו21 ה50!פוא טס>13 צט (28.96 56ן5) |וחלת.5/₪56|355ז ב כ /רח 60 5616 שוש //: קת - 6699 םש סח יוס) צזו!1!581 זהטס56וסם 0 הַחוחחו0₪5) הפשויסזחזם טר 5'טפ// פרם זס+ הסס|ס5 ץוח פס 5 הַההפפחוסַחש עטוווט53גו )חגוסספוס זבפץ זפ חפווווט 50+ +0 55585 עפוססטטסזזוכן סופצב סט (835ץ סז חו 5פַהָב0 6פחב-סחו חפווווט (6.96 5156) | |החלח.ע5ו|1 3 5 %ה01560 65 /5 קב כ /רח 60 .1561 שושש/ /: קת 6596 צזו!ו11580 0500%ו6וואת 38 פוחסר] ס5סיסון סו 5830 הַבָבּש פרחסר] עטווו530 בבש פוחסר] 80%בססוא סטוסטת 5 שי שסזום עסו|ופ153ו פחד ?קגופז6 שסו|ום053 ס5ס"סוןא טרס 5| 6ב 5הסספפטך) 25680 צסהפטססית .. חו זט (8.96 5156) | רחלח.37+/51/5 3 5 / הח 60 ,50% סזשורח //: קת 6599 5וססספוום |בטפופ ץז 50/0865 הַחוצסיוקחו1 "וס] ח0068110= [6068היום בס ופוח || ₪ 53 30 08597 85830 הספסב א ,1 .ד 15 הססץבכ החסד סחב בובא חופנ 5 444 8זסס||₪8 החסס. החזטו. ה50סב אוסב זוב %[ 1-914-784-7612+ ה5! 10532 ץא , פהסחסאובּת ... 423-1112 ₪ , 6חב (48.36 58ו5) | חסת.ץ50 .0375/16 /05(ח6881 0 /5 69 5106 הז החס ב 9 קה 6596 8% 1861166 הו 50661:075ה1 צזו!115801 | מויוס-] 01 6!קהוהּאם חת ו|ו53 |בחזזס= + 8|קחב3א= ה 0056375706 010885 ד5 0 הופפססזם 35' 01 צחהב מוחס6 זספהוסח= שטסו|ופ58 הח 030 צחהה0רח60 הזב אב ק-8|אום 35 פסססב'זום חו 5הססספספחז ... הזב סב ס-00|אופון (9.76 5156) החלת עפ הָס 5%ססחו /5הַחו5 6 סזק /195ח6 /51060 חס רחסב .שוש /: קת - 6599 ו שח הַחו!א 508 צזו!1!5801 [החסוז28וחבּטיוכ וס ת06510 ציוהּיופו | ובזוטוס הסוב 10 + הפרחלוב 8 (602₪05) 500618 חב שסו[סם , 5הססב2וחבּטזכ , המופ ספווום 5חסססב <וחִבּחָזכ חו החרפ ד הסוב /ז10ח1 חס 370 ₪58 זס? 8097 חב 6סח8ו50 זפסטוקוח60 חב (60.86 56ו5) |חלח.3/65070055 16%ח* הח סם .[ב+וסכ .שוש /: קת 6599 סש .0566%/ח./ע/ע/ע שים לב כיצד דפים עם תיאורים שכתבו אותם בני אנוש מקלים מאוד על המשתמש לקבוע אם הדף מעניין אותו. השווה, לדוגמה, את התוצאה הראשונה עם השנייה: התוצאה הראשונה מיוצגת על ידי סיכום הדף שמיוצר אוטומטית על ידי 0566%/ח1, והתשובה השנייה מיוצגת על ידי סיכום אמיתי. שים לב גם, בדף הזה, כיצד מנוע החיפוש מנסה לזהות כמה משפטים חלופיים שיכולים להיות שימושיים לניסוח מחדש של השאילתה. ביצעתי חיפוש על המילה "שוווס58ט" ולכן קרוב לוודאי שההצעה לבצע חיפוש על "4866ז6שחו זפ" תסייע לאתר דפים שלא ניתן היה לאתר אותם על ידי החיפוש הראשוני. כמובן שלמערכת יש יכולת מוגבלת למצוא חלופות מתאימות, כפי שניתן לראות מההצעה השנייה, "66017018 ח! 5000065ח! 56/6066 זס)טקוחס)" (למרות שישנו מוסד כזה שאכן מבצע מחקרי שימושיות, ישנן שאילתות חלופיות טובות בהרבה מהצעה זו). 6 עיצוב ממשק באינטרנט ראה מה הגולשים מחפשים כמה ממנועי החיפוש הראשיים באינטרנט מציעים שירות הצגת דוגמאות אקראיות של שאילתות שהוקלדו על ידי משתמשים אחרים. מעניין מאוד להקדיש כמה דקות כדי לצפות בדרך בה הגולשים מנסחים את השאילתות שלהם, ולנסות לנחש מה הם מנסים למצוא. החיפושים מספקים מידע ממקור ראשון אודות רצון הגולשים (שירות זס|אוהז6 60 / בו השתמשתי כדי לאסוף את הסטטיסטיקה שבפרק זה נמצא בכתובת /רח60. ]אוה וס ססצו/ /: קת 0-ו ). בנוסף לצפייה בגולשים שביצעו חיפושים באינטרנט, עליך ללמוד גם את רשומות החיפוש של מנוע החיפוש באתר שלך. כל המונחים שמופיעים בתדירות גבוהה ברשומות האתר שלך הם מידע רב ערך שאם תעבד ותנתח אותו, תוכל לדעת מה המשתמשים חיפשו ולא מצאו. התפלגות כמות המונחים בהם השתמשו בשאילתות חיפוש, במערכות מסורתיות שקדמו ל- טפ/ ובשני מנועי חיפוש. חיפוש קודם | זס!/ש606:3/% והס6.הט5. טע ל-60/צ מילה 1% 1% 1% 2 מילים 1% 5% 2% 3 מילים 4% 1% 1% 4 מילים 1% 6% 5% 5 מילים ומעלה 0% 5% 2% למרות ששפע הנתוניס שבאינטרנט היה אמור לעודד שאילתות ארוכות יותר, רוב השאילתות הן עדיין בנות מילה או שתיים. שאילתות קצרות למדי אלו מהוות למעלה מ-75% מכמות השאילתות שנבדקו בדוגמה שלי. הלקח עבור מעצבי ה-פ6/ הוא שעליהס להתמקד בהצבת מילות מפתח שמתארות טוב את הדף בתוך תגיות ה-688ח, משוס שרוב המשתמשיס ימצאו את האתר על ידי חיפוש מילת מפתח. בנוסף, עליך להוסיף מילות מפתח לכל המילים הנרדפות שבנושא. הוסף מילות מפתח חלופיות עבור כל מונח בו משתמשיס המתחרים שלך כדי להתייחס לסוג המוצר אותו אתה מוכר. לדוגמה, דף שעוסק בדיסקיס קשיחים צריך להכיל את ראשי התיבות 50גס כמילת מפתח משוס שלקוחות 18% מסורתייס רבים רגיליס לקרוא לדיסקים קשיחיס בשס 50גס (26/1665 5107806 266655 66%זום - התקני אחסון ישירים). מצער שהגולשיס נוטיס להשתמש בחיפושיס קצרים, מכיון שמנועי החיפוש טוביס יותר במציאת הדפיס הרלוונטייס ככל שיש להס יותר מידע אודות צרכי המשתמש. לרוב, הדרך לספק יותר מידע אודות הצרכים שלך כוללת ציון מונחי חיפוש נוספים, כולל מיליס נרדפות או משפטיס חלופייס. קשה לעשות את זה, והגולשיס גרועיס במציאת מילים נרדפות. בנוסף, כמובן, העצלנות הטבעית מעודדת את המשתמשיס להקליד כמה שפחות נתונים. בגלל בעיות אלו, מנועי החיפוש חייביס לקחת יותר אחריות, ולאפשר למשתמשים לשפר את החיפושיס שלהס. פרק 4: עיצוב האתר 237 (בעמוד הבא) לדעתי, ל-0566%+ח1 יש את הממשק הקל ביותר להרחבת יכולת החיפוש של המשתמש על ידי מונחים קשורים. מנוע החיפוש בוחר במספר מונחים קטן, ובשל כך רב הסיכוי שהמשתמש יקדיש זמן כדי לקרוא אותם, ולהחליט אם הם מהווים חלופות חיפוש שימושיות. בנוסף, החזרה על החיפוש עם המונח החדש היא עניין פשוט שדורש לחיצה על המונח הרצוי. לרוע המזל, הפרסומת (של 61560) גורמת למרחק גדול ולהפרעה מזיקה בין מונח החיפוש של המשתמש ("שו!ו580ט טפאו") ובין הנושאים הקשורים שמוצעים (פ65וקסד 46|3%60). משתמשים רבים יתעלמו כנראה מהנושאים הקשורים משום שהם "מתחבאים" בסבך החלק העליון והשמאלי של הדף. שילוב אתרים ומנועי חיפוש עיצוב תוצאות החיפוש כשהמשתמש עובר לקישור מרשימת תוצאות חיפוש, יש להציג את הדף לפי תוכן החיפוש שלו. לשם כך, יש להשתמש במערכת ניהול מסמכים שמסוגלת לבנות דפים דינמייס שמשניס את תוכנס לפי החיפוש הספציפי של המשתמש. עקרונית, דפי התוצאה צריכים להתאיס את עצמס לחיפוש המשתמש בכל מצב, אך מעשית ניתן לעשות ואת רק עבור חיפושיס של מנוע החיפוש באתר עצמו. משתמשים שמגיעיס ממנועי חיפוש כללייס באינטרנט כגון 0566%+ח1 יקבלו כנראה דפים סטטיים בגלל חוסר השללוב בין האתר ומנוע החיפוש. הדרך הנפוצה ביותר לשפר את דף תוצאות החיפוש היא להאיר את כל המקומות בהס מופיע המונח שאותו המשתמש חיפש. בכך, המשתמשים יכוליס לסרוק את הדף מהר יותר ולמצוא את חלקי הדף שמתאריס את הנושא שמעניין אותם. על ידי סיוע למשתמשים למצוא את מונחי החיפוש שלהס בדף שלך, הס יכוליס להבין מהר יותר מדוע מנוע החיפוש כלל את הדף ברשימת התוצאות, וכן אס השימוש במונחי החיפוש שבדף קשור לצרכיהס. קל לשלב אתרים בצורה הדוקה יותר עם מנועי חיפוש. אם מנוע חיפוש ישתמש בשיטה סטנדרטית לקידוד מונחי שאילתת המשתמש, רבים מהאתרים יעשו את המאמץ להציג דפים מתוכנתים שמאירים את המונח שבשאילתה. מנועי חיפוש אמורים גם להיות מסוגלים להציג תוצאות חיפוש במבנה טוב יותר, אם הם יורידו קבצי הגדרת מפת אתר (5₪06%80) וישתמשו בהם כדי להמחשת המבנה של כל מרחב נתונים באתר. אם, לדוגמה, אתר נתון מכיל חמישה דפים שמתאימים לשאילתה, וארבע מתוך חמש התוצאות נמצאות בסדרת דפים שקשורים אחד לשני, על רשימת תוצאות החיפוש להציג שתי תוצאות עבור האתר. הקבוצה בת ארבעת הדפים אמורה להיות מיוצגת על ידי התייחסות יחידה לדף המרכזי או לדף החשוב ביותר (יחד עם סמל שמציין כי התוצאה מייצגת קבוצת דפים). 8 עיצוב ממשק באינטרנט פלט -:שטכוווס וב 105668 [ דחאמה -מבוטהואגטוט התה הבקה ממה הר קרשו "הרי קר ויוי "] 5 5 מ 5898700 85ַחַ3/ איס||פעצ 1 3די צזו|ום58ש פפ/% זס) 58370080 טס 81185 1 - 10 + 5 6חכ) חו |א סז 0 סוס 05 6160780 ה 1 5 6ופת א6!:0 בב 8 / 6 5 6/8866 5 00ו085 בסו5 ספע פשסססה : 5 חחח הבה טח פאזב 5 05| 29197 ,3.5 הסופופע 005 8ו1ספ 8 5 ת85|0ק |ב15% 50885 ץפשו|פ0 5|פפד 3 866067%650ומחע 5 (5666) כ םשש 8|סחצעע 8+ הסזב3 59 62 5655 7858 ע!חם הסזב 55 6 5פחופטם ₪ 8|מססס 55/5 , 5 ספיספ 0 %אפח 55 08 | 4,661,025 1-10 5065 בת / 3- : . 4 בסחפזטוסה 5% 7 611 81 הוטו05קוהש5 עזו!1 ₪58 6 עש זס] 18685 :סצוח6יות 151 1 חצ | זבספטעחן 6פספס)חז גווס םרחץ5 עסו|ום153 ם8// זם+ 0835 פצוחסזם 156 1 וסרטפ או 5פשוחסזם 156 | אשת 6 3 16 ,וחד (800. 050ם. 605 חסס5חו) 8הסס5ח1 רסוא 97 071 35 = :08050185 צַחה קחזסס ... ][ 0368 ] :ץם 5080 8553085 400ם0- 14:01:17 (10.36 58ן5) |60ת.0009/ 85/65 שוח6ז3 /חַזס רחסב .שש //! קת 10096 שח , טפעש 80 והטופסק ה צ5 צזו!ו1!58 פפעש "אהו | הַחו1155א" 6חז חס וסקס טפצ/ |בףחהפהסחס ופ תזפםץר :אהו | הַחו55ו₪ פד :35 בפתפווטטום 5 5וחם זס הסופזפץ זפוחחבּם חת ,55 ,13085 סח . (1996) .5 ,החטח5 ההבּהההואסגום . טפ/ החד ₪ הסז7ב3 ₪858 ששוווטב53 ... ,סחנפ ,פַחִוקבּהַ₪3 קטפז6 401 הפסחם .חן , פע 1055305 (47.46 5[56) |חשח +0קפז-]רח /אח!|-חַחהו155ח /פ ה סרח51 .36 ,השקס,1רח>//: קת 10096 : "/ ו יר ו ו וקו ץ5 11580111 פפצ "אחו 1 0ַחו1155 0 ₪ מטסז6 401 ה5חם בחד הטוע הס00ב 3550 חו הטופסםוחץ5 ג ססס! 60 ₪61 ם|מססס סח 5 "וְ םר 00- חב הח + | חזגום? חב חחפסח1 פר0 + 1558 |863ק5 |ובח- סחום ... שווום053 בוספחזפםער :אחו! סַחו55ו₪ פחד 5ססספזוס |003| (6.06 56ו5) /אח!]|-הַח|155/פ תסרה|!5 /4ש.30 ,השקס.רחא//:קת 10095 581 פפצ חס הוחט!60 5'ח56!וצ] 130 :אספדוסות . שוווםה05 םפש חן 155085 סחפזזט6 :אסט8|ב פחד אסטל8|ה תסס.6ו158 זחוסַח= 8 ח5וטםחה פום א50חגופ , פופו 3360 צט הטוספ צ|הסהסות-1ח58₪ ... 308 085 סחב 50050008 חבס טסץ שופ (5.5% 59|28) | /א3!800 /ר 60 .5616 אישש//! קת 10096 וחסס .0566%/ח./ע/ע/ע פרק 4: עיצוב האתר 239 5636 הדוד טרא 05146 וח גוס , 5זס או טר 1 צאזא ההוהוב3פחסס 5סתפותנוסס הססבּוח 5בזסשצ פזסוח זם סוס הפוצו פפחפטם :פזד . "ץזו|ופה58ש פ6עש" זם ע7ו!₪5801+ פפצע ,8.0 , ץזפטם 1000580 פזסות 3 הַחופט צֶט 85065 זפספט סוום53 :ע'ופטף יוטפץ 8ח6₪ סז 05וקסז הַחועשם!!ם+ פהז 01 זטם 5טיוסעש 18 8 010086א8 / פנטוסהד +11 501 טש ,5 00ו85 , הססבּטוב = , בוטפהחםוט ,₪358 , במ שססספזם , פםוטסח1 , 5 הפותפסחבררם , 5סהבוההסזוצחה= .%חפו|6 , 5וחזסיחבוס ] 8 א 15 א צזו|8 הז חט-] א 15801 א הומהפט ם ם 5סבחטה ב ץ ץשוובּחסטסח ]ץז םץ שווופהפט ם םז החוםעטסססזם ב רם |בסוחסבּזם ב םם הסספסוומטבּ 1 ך] זפ ם ם חס ם] םז ששם ם ספגוססז םב ם חחופפט ם םק פמט ם ם החסה הז םם הַחוחמופפה ךז בם 6 א חוד שא ההז 52 6 | ו זב 50 ה ]ץז בַחספפ ם ]ץז חססבזפסחו ב ךז פמזספט ם ם הַחחפהוהַחה ב ךז אסם ם אהמם ם שפסם םה שוווטבוופז ב הז טספשם םה פצטוחטס ב הז אפסם ם פסוטפה ם הז הבטה ם ךז עטוווטבחובּסהובּח ב ךז פזסאבו םע הז פסווחסחספָזה ךם ךם זפטומחסט ם תץ | סוחזסחספַזה ב םרז בי , , | ; | 5ח ה הת א הזוה 2 0 5שפפחועע א 5 א 5חפופסהבחחה [] [] | פסהםתתםזושחם ]רת 5ויסטחואי ב ם 5זפמסופפה םם םם החפ ם םם חססבקו|בטפוצ ב 1 | פהססבסוומטב כם םם זפמס|פפט ם ם סופזמהו ב ץז גוצם ה 950 ם תם ץְססוס טספ ם םם 8זסטט ם ם |בנסזוי בז 1 | עטוווםטבּםותסס 1 [] | 5פוסס|סססוספה בם [ם הסופזפץ ךז ם] %חפההתםזוצחם 1 ךז אספסזסוח הז םם %הפהמסופצפה ךז ם] הפהווו ם טפ ם ם בחסבּזפמס ה [ם פחסופזפי םת שוובּפז ם ם 5 ה 5זטמט ב הז 1/ '/ 1'/ , ז וטוא שא בב שא 6פעזסזסזוק שא ב א בוספחטוטה ד ך] 8 הק פמששסססזם ם תץ פוטונסחו ב ץז החהסוסטב [ם] ך] ססטוטסזם ם תם זט םש תץם %חבו|מחסס ם [ם הצססבּזסלחו ב ם]ז שטוווטואפה םב ץז פשסבּזטטו ב םז זהופהפ ם ם יבטלה ב םם חן א 05| א 5 א הסוסה ט|הע א %חפוט ב ם פחזסטבום ] ם]ז פזפחטופטה הז םם הססבּטובּצם ךז םז ובּחססבופז ב ךז חזסטבום ד ךז 5זפוחותבּזטַסזם 1 רם החסבּטובּצם ב םץז זה ם ם אוחט ם םז זהחטופפה ם ם 5חססהבטובצם ם] תם] 5טטטטהט ם םת חפפ!בוח ב רם 8 ו ה סספוזטפת ם םם פזםם: ם ם טסאבנ ם [ם וספם ם פזססהטובצם ב] םז סטסס ם ם 518.60 8/)9./ע/עעע נראה ש-8|68/15%88 מציף את המשתמש ביותר מדי אפשרויות ומונחים חלופיים. משתמשים מנוסים עשויים להעריך את הרשימה המקיפה של מונחי החיפוש החלופיים, אך רוב המשתמשים ייבהלו ממה שיכול לשמש כאפשרות שימושית לניסוח מחדש של השאילתות שלהם. אני הייתי מעדיף עיצוב שבו יהיו פחות אפשרויות. עם זאת, יש לאפשר למשתמש גישה לטבלה ענקית זו באמצעות קישור "ח50810 +וסקאם". 0 עיצוב ממשק באינטרנט 6 668700 85 | 563708 | (6ז568 ז6ש0ק - [6צ1]8 - 0₪0165 51068 - 608% - [שהת08ה אַ1] * 65חָ₪8 שס!!6צ - וחָטם צצ 8798 הואר זוסח זטסץ זסז 5סס! שוסצו 0 5 6 ב יי[ !480 015 8 ה10] 8חם זס) 678 1:66 ו 6% 56915 605000100 ה [618וח+טת ךר + ה ך] ב ₪ ב סע 51901 כו 300 סז ד בו ₪ הי ךז 555 ך ₪ זו 6 נופעע עו טסו עוחס פפוווד שפור .31085 1011064 01 10 סד [5וחד 1166 שזסוין] | כ 16181 ד10] :5ז6ט0סיוק :500080 8996 החס. סזס- םרח 3 טס סנוט סז חסט. 50. וכסח : ₪ + .6סטטסזם 65 + 2.0 הסופזפ 8508080 1 ההחט|סס 1995 0005008 ססחבּפום ער ח1.. :עו א : כ ) 0308 ₪15 60 אחו| 8358ום ,5166 וטסץ סז 5 60 הַחואחו! חס בַהוחחב!ם פז'טספצ [5וחד 1166 שזסו] | ...חואיוס/ש :( ו1אד1] ) פַהַהּטהַח3ּ | קטא'והּוא זאס דוס קערו 8796 |החסר. כ זב 1 כ אזב וז שי שי טגוכן/סזס. 3צצ. אאא :סח : ₪ 8 60 035580 5 אחו! חס הַהוהובחסס הּהַבּ0 פרם + | |חנ פס ,אחו! ב חם 65סווס זפ ב הפר :עז3 תרוו + 8ס חב סח סט 08085 הטטב תפוח 50 3.2 ואד 36 הפחד .. |( 8085080 פר6 וטואו הַחס|בּ 5887 (5875שסזט 80או) פסְחפהב זפפגו | אזר + 3508055 הוב53פס טחב (5פחַב03 טפצו) פסהפהטסס ואד [+וחד 1166 פזסזין] 506015 51]6 הַהו685680 8796 החסר, 6350308 5= דצ טוספ. טח רחח. סהחבן//:קחח : ₪ 35 חב 5זסרסגוב ספא סַחושיסו|ב זס+ הפוחב ספות 3 15 (055) 508805 5018 בַחו0ב03563 :עיז3 ורוו 5סחפרססם) !דר זו סף 5185 3-30 חבס 5סחסנם .800 , פזסוסט , 65חס+ הַהוטופחו 56185 סבב פס .508805 5018 |בהספזפם חאום זופרס פצ3 צבח 5זפט3פז הווחי [>וחד 1166 שזסוין] 506015 6]צ51 הַחהו6085680 סז 00106 8796 ]055 הזז סש | ח| הסח וכסח : ₪ חה .88 חס ספטן הַחוהַחבּתס צט פפַהָבּ0 טפצ + 805זטחטוח + פסחבּזב םב פרם פהַחהבּח> . :עז3 ורוו 0350300 חב , 78065 8|8- 058000 , 0[35585- 05800 , 05ס58!80 + 5סחוא פגוסחחבּל 68 ס6 הסססטטסיטחו זט [%וחד 1166 פזסזין] 506015 51]6 הַהו685680 8796 |החס).-00824ה/1/03ס=נ/אט.סב. טוחם. וספן//: חח : ₪ "055/%א6ס"=םק יד ז555ם 571= ושח >א1 1> <6ם וה >פחם<= ודזז> <סגשר> < ואדרן> :עיוההתותחום .50!8//: מסח"=-שחת || צ|88ז טוסץ זרת 006 3 10 ז3|וחזו5 15הפרתגוססם ז0 51!! 3 זחבּשצ גופץ הפחא "פוחד שאו | סזסות" חס אסווס [5ומד 1(68 פזסו] עָזהיום! | 061 09115 8 - 601.08 8796 |וחס. 5 טס וְחַס/ עשי זב 501 טגום/ מס וספ.סורח. ו ו סתפם- אאא :סח :₪ -זם- ; ('85ט!ב /", 'זס', צְבּזזבּ', חבּ', ססז')רתבּזבם<- זפ : ע"וה ורוו ה זס+ פט!ב חר 5805 >וחד ;(['5פטובּצ', +ס','ץְבחבּ', חב ]<=5פט|בּ-, סס)'<=פהבּח-)חבּזבם<-ץפטס% .5ב פזסוח זט חס 60 'סם+' זפ6פוחבּ זב טפההבּח 5 + 56!] ₪7 108 3 3005 פוחד ;(['פפטובּצ','פזסת', מפעץ' ]<=85ט|בּ-, סס)'<=פהבּח-)סחפמטבּ<-ץזפטם% 33 80חחבּח ברס 0 60/6.60 ./ע/ע/ץ 6% מספק אף הוא דרך להוסיף מילים נרדפות. בדוגמה זו, יהיה זה יעיל לחפש מונח כגון "655" אם המשתמש מתעניין ב-'666ח5 50/16 פַח/685080". יתרה מזאת, כל תוצאת חיפוש מכילה קישור "פוחד 1166 6זסוי!" שמבצע חיפוש של דפים דומים לזה שהמשתמש רצה. עקרונית, עדיף להציב לחצן מסוג "פוחד 6א1] 6זסו! שחו" בדפי היעד עצמם, אך דבר זה דורש שילוב בין האתר למנוע החיפוש. בתרשים זה, יש שימוש בצבע רקע עדין למדי שמאחד את אפשרויות החיפוש הזמינות ומפריד אותן מהשאר, ובכך התצוגה הופכת לעמוסה פחות מאשר ב- 0566%ח1 או ב- 8. הצבת הרמז אודות משמעות הלחצנים "5וח+ 6א!! 6זסוח" בתוך מרכז רשימת תוצאות החיפוש (ולאחר התוצאה החמישית) היא גישה עיצובית לא שגרתית, אך נראה שהיא טובה: עין המשתמש קולטת את השינוי בצבע הרקע ובסידור, והצבעים התואמים גורמים לאחידות הרמז עם אזור החיפוש הראשי בראש הדף. פרק 4: עיצוב האתר 241 ר60.ד וש )אי + )ואה פתםדקא 60 | זאםאצווה דתםזואם | |ם/אחד הד )ואש 6א|קקסמם. ץם!ווס | שופ 8 45% ?7 [ 2011/5001 6ו!1 016 זוע טסוו :5%66ה ווסצ .06 651 1116 10 61 הסזזווכ :5% 166 16 .5הסו651 טהוצשסו101 6ו!1 10 זסצעפוזה 1116 צוסוו₪ | +חפוח טס |בססז5וח .5.₪ 8+ 830 1 ח3ם פזפח/ ? ך 30/5 סד סומסץ זבּ/ש |וצו₪ 8+ זטוסטבּ חזב>| 1 חבש פזפח/ ו ? 5 30/5 סד 7 [ך > חלח/+ זס+ פסושגטב חח 1 חבש בזפת/ 5 סוסס+ עץזם415% הב סתפוחה 8ח+ 0+ תסוזסטוטסז+חו חב חח 1 חבש בזפח/ ו ? | אסום וסקס סו 358 ] ו [ח]!158] ]טסט8 166/65 85% ?זס1 בחואסס! טס 876 ]8 מע [ססחפּחו = ]וס 80 186/65 25% :5 !6 זה56 ו!ווס זו!1 5או! 11656 וזווס1 150ה סעהוו | + 000000 6/5 01 6 88₪] זפואובוס טסוו 5פחסופח פ ₪ [. 00/55 186 = הס ה 007855 30/5 זו ואס פחד] צעם 16085 10 5 4 000000 שמוששםוסם] 8 עם 810085 6 ו 0000004 ששתם ספ)א] 6 ?ץסו|סק |03זו0ם 8885 45% פח+ 15 זבחצ 9 .16 166665 45% 1996-1999 9 .1 65 1660 51 0 145נמ גד 266 517 אנט 217 151 כ1 כב ופד אנ בצה 014) 0. 2.51% , בבוד 251. ששכ זוז . מס 6 56017 0417 קדצ סכנ 5בנהתמ 011 211. 66/65.6077[א35./ע/ע/ע 2 עעיצוב ממשק באינטרנט 1/5 ] | עסט| סַחו189 חח'! | הז 58 הוחַ300) ך 6 5 0111500 47 1-10 (5ח6/53) %5ח!|536% זס) 56376085 53 86 3 חס פַחוא6ו|0 7 פח 6ז ו 6םח! 1 40 3% 5 7₪ט8%1550 פחך מו ..זפם ותה צסצ] חס 6ַ"01פ5צ911 6ב הפזפשו|פ 200655 6ַ'זטפ5ע 09 פחד.. ...1 תסמה ספחבזד 200655 שַ"ו0טפ5ץ9171 ברח זם 65בּזם . צְפצזט5... (36) 80ח30 /5/0300סוטוחאפ/ציסם. סם!, טפאוס| |הח1%]. 200705503 . ב/5זוטומאפ/שסף. סס!. ספצציםן 5 81150077 >פהַּהָבּטְחַחִב3ּ | זפרס ...הו 28017655 שַו₪טפ5צ911 ברד 2800655 שַזוטפ5צ801 פחד.. ... חַזז0פ087175 5הַהַבּנוחַחב3 | זפרס 0 חן 200655 6ַ"ו0פ5צ2971).. (16) 80ח630 |חס. 8 5/0300/441סוטוחא8//איסם. סם!, טפצויס| 5 |0811/5007 פחד :ספג פה ...5'ח|ססח! | ]ס 5הססמהס5הבזד 2067855 ₪656 פחד.. ... (29) פחוח-עחפשוס חן 061-655 שַיזטפ5צ ₪8 פרם 0 פזבּ 5ההַבּחו 58פחד.. (36) 630080 |חטה. ה5/0300/007-3סוטוחאם/ציסם. ססו. טפצוס| סז 5/08%5הַחוט ב פז/נוסם. בוחופזוצ. פסבו|וצ. הס5ופ פן - ... 300875? זטוס סַהָבּ 5ז83ץ ח58/8 סחב 8זסס5 וטס :55=אהספה 556 דד65 שה ה.. (26) 0080ב 6 ח|ססחו] חבּרובּזטה צם 4007555 הַזוַטט08%1/5 פחדך 3 ... ח58%8 חב 8זסס5זטום=" ח|ססחו | והבּהבזםה עם 268855 6ַוַטט5ע81 פה (26) 63080 |החסח. סט 5 0 073/08 09 553 ו ב חב ובחו. 5 5 ₪ 500ע8%0 :58 - ... החד זס? 380 קפזק 18% 2007855 6ַ"זטפ5ע81 הפחד הוססחו ן... (56) 630080 הסח 0085/0905 3116/5008/ 3/0 35--/|ח. סח ספ וטוט 5 ,|00ם5ע0811 5'ח|ססחו 1 - ...8 חס 1863 ,19 זפטותפצסצ הפצום ,200-655 656 5'חוססחו ... ...חב 8ז500 זטסת 58 , בוחה ץץ5 חכ , חַיזפ 85 זבפח ב|פחפוסבּם 8ח חס 1863... %) סב |החסה. הזו 5 שפח הוחו 1 רחסס. || רתופ עיר. הזופ עשופ טון דחס6.6/סססם./ע/שעע מנועי חיפוש שמפענחים שפה טבעית מקבלים הרבה תשומת לב, אך לרוב הם אינם טובים מבחינת השימושיות. המשתמש צריך להתאמץ יותר כדי לנסח שאלה שלמה, והגולשים מעדיפים להקליד מספר קטן של מילות מפתח. בנוסף, מנועי החיפוש אינם מסוגלים להבין ממש את השפה האנושית, ולכן הם מטעים את הגולשים כשהם מעמידים פנים שיש להם את היכולת הזו. בדוגמה זו, השאלה שנשאלה בשפה הטבעית "?007655 חַזַט0600/50 6ו) סססזצו סחע" במנוע 65 הביאה לקבלת תוצאות רבות שמתייחסות למסמך אך לא לחיבור. די ברור שניתן למצוא את התשובה לשאלה על ידי בדיקת אחד הקישורים, אך קל יותר פשוט להקליד את מילות המפתח הקשורות "4007655 8טט5ץ66" במנוע החיפוש 6008!6 משום שהתשובה מתקבלת ישירות בשתי התוצאות הראשונות. 6008!6 מציג את הטקסט המלא של הכתובת בתוצאה הראשונה שמתקבלת, משום שהוא אינו יודע שאנו מעוניינים ספציפית במקור. פרק 4: עיצוב האתר 243 6 0ו407701001511:31100 57510770 - 2אססם'וםש5חת 69מ עפ פא 56811ה:] ( 56370 ] 1 = ₪3 א 5 ץזבזט! | |הס5זפק ₪9 0%סם פוחד 6 /: עבר - וז 10 5הסופוחו)6 59010 3 פטוצםזם טוסץ 865! לבח 535% הַחהוססַחס חב 5 אזם/וספח זטוסץ חס 5זפסחוזכ פס זם+ 5הסטוח398 הַחוח553015= זטוסץ ||3 07 8975ב זב 3550 חבס טסץ , 8!מהח באפ זםת .55 זס+ להפוהתסזוצחם סחחזם 8008 פזסות 0 5זססחחזכ + ₪355 3 0888 חבס גוסץ זם ,80בסם] 5 זפסחחזם 3 פזפח שו חח 55 מ|פח 60 5זפסחחזם 5'פסו5 . 808555 לחכ זס+ החטוסזבחזוס 135585% פר פבוויסיזם ץחס 585 טסץ 865! |ססס הוח ג 8!וחע , 5 הס 08 הכ פרם זם ||ב3 585 טסץ 865! חב וחטש 1284515 פחדך פחט 5ס5ו| |סססהווח0ג וטועש 586 5הכםוחחפכ 6חחוק .יוסזחויוק 3 וס זם |5%81ח1 טסץ תפחש החפר זם הוחס5 . סטש הוחחסג. רסוא הסטוחו08 08 35510 חבס טסץ זפהספראו 55 חב 5הססוחו8ב סחוזם |00פחורח30. רטוע 586 5הססוחחפכ סחוחס ?םזחווחנת הזוצש ז] 58% טסל ח68 חסוזוחו061 זחויוק 5 החחבּת זפסחחחק 5 085070 זבסחוזק 5 אסם זפסחחק 5 8םץש זבסחוזק בחה הרכש 1234512 בר הבר עסו|בהסהסחגת 855! חסושו סטם ,5פצ 5סתפסחסס 8וו= 0065.50/0 00 התיעוד המקוון ומבוסס ה-65/ של 2א0ספז6שופחה 5'חטס, מאיר את מונחי השאילתה של המשתמש ("!|5₪9חו" |-"זססחוזכ"), כדי להקל על המשתמש לסרוק את הדפים הארוכים למדי, ולמצוא את הסעיף שמעניין אותו. תחתית הדף מכילה ראשי פרקים של נושאים קשורים באותו האזור של מרחב הנתונים. העיגולים האדומים מיועדים לציין את הקשר הצפוי של כל דף יחסית לשאילתת החיפוש הנוכחית של המשתמש. 4 עיצוב ממשק באינטרנט 0065.50/0 00 זססחחם 6ש4 זטסץ זם? 00| ם/ 0+ ₪3 +6/112/6+בב5/ +5/ ברס חן אסס| ,זפסחהחם 06 ב פצבּח טפצ זז ו8סוח תב 0+ ב₪ז9+%/112/ סזה5/ ד₪5/ ₪6 4 + 5 צ6א רפת 5 1עסת 0 שת סנות בץ-ץ%%פת ספת פת-7900"כת. והעס6סנות %עסש6פת %פת שת אספת 5 תטע6פת גת-79001'כת. ספת צ6%פת ו . 38 א הַחהופספזם בר חו הפבטוסחו 15 שש זס? עזס8זום פורם חו ץשחם החד שוכןס ד %+6א₪ 8 הרוסו3ו115%וח40 וה5?5%6 הו 5סוק0+ ור 33 00חח₪8550 בחב מש סַחואס30ם 5 הַהסחחס חוטב חב (עשוחופצכ)) אזסאוספ4 וטס חס 5זפפחחום סהוהחבּוס 585 זססחחזם 0+ סהוהחבּוס (.: 5זססחחק זם? פהסטוחמפכ הַהו580 | ₪ פמץד זפסחחזם 3 5980000 פמעד 6085 ₪8 3 הַח800פו59 55055 בססוחפח רסוצע סחואזסצעצ 05 הרוב 3|5 הוחופ ד חוטב חב 0% "0 60016015 +0 8!פהד וו 4 פ5מלתחוז ||4 .106 ,816055%605 הט5 1997 %ת0ש0 00 פרק 4: עיצוב האתר - - 25 עיצוב וחטש 6 |-8670675 וחוד אמר כי לו היה יודע שה-ט6/ תהיה פופולרית כל כך, הוא היה מהרהר שנית במציאת חלופה לחלק הלוכסן של כתובת ה- |₪, שמטרידה במיוחד במקריס בהם יש להעביר כתובות כאלו בשיחת טלפון. עקרונית, כתובות אש הן קוד שמיועד לקריאה על ידי המחשב, ולא צריך להיות לו שוס קשר לעיצוב ממשק המשתמש. במציאות, יש אמת בעובדה שכתובות ₪1 נחשפות למשתמשים במובנים רבים של שימוש ב-ט6/, ולכן עלינו להחשיב אותן כנושא שקשור לעיצוב. אס נתחשב בפופולריות הרבה של ה-65/ש, אין צורך להקריא את חלק יי//:קאח'יי של ה-0₪1 כשמעביריס אותה בשיחת טלפון או כשכולליס אותה בפרסומת בטלוויויה. רוב החברות פשוט מתייחסות לאתרי ה-69/ שלהס כ-וחסס. ץחהקוהסס.צאוו במקוס /ההסס. חק והס6. צצאוצצ/ / :סח (התחביר הנכון). שמות חובּוחסס מעורבים כיצד ליצור חוהוחסס שמתייחס לאתר פ6\ ששמו מכיל כמה מילים? לדוגמה, האתר של ח6!56ו! 28600 יכול להיקרא ח60.ח16!56ח00ס86[, וחסס. ח56ו6וח-00ס>8ן ועוד שילובים רבים נוספים של שתי המילים (תו הקו התחתון אינו חוקי בשמות חוףוחסכ, אך מותר להשתמש במקף). ניתן ליצור שמות מעורבים על ידי שימוש בנקודות (כלומר, 0ס6.ח16!56ח.8%00[) רק אם החברה היא בעלת ה- חוגּחחסס העיקרי (במקרה זה, וחסס.ח6!56וח, שכבר תפוס על ידי חברת הדירוג ח1656א). בנוסף, אם אתה הוא בעל שם ה- חוהוחסכ העיקרי, מדוע שתיצור שם משנה ארוך ומורכב יותר עבור אתר ה-69/ שלך? אני ממליץ להשתמש בקידומת הסטנדרטית ".צושואו" כקידומת לאתרי ס6/ משום שקידומת זו מציינת שמדובר באתר 60/ ולא במשהו אחר (בעבר, היה צורך גם בהוספת הקידומת "//:קח" להבהיר שמדובר באתר 0 , אך רק הדקדקנים שבינינו עדיין עושים זאת). לפיכך, שלוש האפשרויות לבחירה הן: % הצמד את המילים: וחסס.ח16!56חסס136 4% השתמש בקיצור: חסס6.חספוסוחן 4% השתמש במקף: וחסס.ח6!56וח-0ס6ה18 רוב האתרים ב-65/ מעדיפים את האפשרות הראשונה. הצמד את המילים יחד ליצירת "מילת אינטרנט" חדשה עבור ה- חופוחסכ. מבחינת השימושיות, העובדה שרוב בעלי האתרים האחרים עושים משהו מסוים היא סיבה מספיקה להצטרף, משום שהמטרה היא לעשות את מה שהמשתמשים מצפים לו. הקיצורים טובים כתחליף לשלוש מילים או יותר' או כשתוצאות הצמדת שתי מילים יחד תהיה ארוכה מדי ו/או קשה לאיות. המלצתי העיקרית היא להצמיד את המילים אם מדובר בשתי מילים קצרות מספיק וקלות לאיות. עליך להימנע משימוש במקפים משום שהגולשים נוטים לשכוח אותם או להחליף אותם בקווים תחתונים, ונדיר לראות אותם בשימוש (לכן הם מהווים בעיית שימושיות). למשל, ה- חוגוחססם הרשמי של אתר הוצאת הוד-עמי הוא |ו.60.וח0-8סח.שטצצו אך מכיון שהתברר שלקוחות רושמים |ו.60.ווחהססח.צוצוצו (בלי מקף) נרכש שם חוהוחסכ זה עבורם, ובוצעה הפניה ממנו לאתר ההוצאה. 6 עיצוב ממשק באינטרנט למרות שהמדקדקים מגנים את צורת הייצוג הזו, היא נראית לי מושלמת, במיוחד משוס שכמעט כל הדפדפנים מוסיפים את הגדרת הפרוטוקול החסרה \:קח) לתחילת הכתובת ואת הלוכסן בסופה. ה-68/ הפכה לנפוצה כל כך עד שידוע שכל דבר שמתחלל ב-אואואו ומסתייס ב-וחסס. הוא אתר 60/ (בישראל, כאמור, הסיומת היא בדרך כלל וו.60. אבל יש גם וו.ז6ח.). אני ממליצ להפוך הן את הכתובת וחס6.ץח8קוח0ס6 והן את וחסס.שְחהקוהס6.צצושו לשמות נרדפיס של שרת ה-60/ שלך. כיוסם, רוב המשתמשים כולליםס את הקידומת .שואיי כשהס מקלידים כתובות |חש, אך לעיתים הס שוכחים לעשות ואת. בנוסף, כשהכתובות מוקראות בטלפון, נעיס יותר להימנע מהקידומת 'י.שושויי שקשה לבטא אותה. המרכיב החשוב ביותר של ה-081 הוא שס המחשב (חווחסכ - השס שמופיע מייד אחרי הקידומת //:קאח). אס המשתמשים יזכרו את שס המחשב שלך, הס יוכלו לפחות להגיע לדף הראשי שלך, בתקווה שאפשרויות הניווט והחיפוש מספיקות כדי לסייע להס למצוא את הדף לו הס זקוקים, גם אם אין להס את המשך הכתובת. רוב החברות מנסות להשיג לעצמן חווחסכ שיהיה תואס לשס החברה, ואני הייתי ממליצ בחוס לכל מי שפותח חברה חדשה לבחור בשס שזמין לא רק כסימן רשוס אלא גס כ- חוהּחחסס באינטרנט. חוהוחסכ ארוך, מסובך ומורכב יעלה לבעל חברה בהרבה לקוחות אבודים. שמות חוהוחסכ טובים שוויס בערכם למיקוס נדלייני טוב כמו בקניון איילון ברמת גן או קניוו רמת-אביב. ציין כתובות 1 מלאות בקוד ‏ !אדוו אני ממליץ להשתמש בתחביר מלא של כתובות !חש בקישורי הטקסט שבקוד |דה. עדיף לכלול את הלוכסן הסוגר בכל כתובת 081 שמצביעה על קובץ ברירת המחדל בתיקיה. רוב שרתי ה-65/ מסוגלים להתמודד עם לוכסנים חסרים, אך תכונה זו דורשת לרוב מהשרת להפנות את דרישת הדפדפן מהגירסה המקוצרת לגירסה הנכונה, ובכך להוסיף זמן מיותר להשהיית זמן התגובה. לפיכך, אם תרצה להגיע אל טור אספ+זפ|ה שלי, עליך להקליד את כתובת ה-|חש כ: אסטץז3!6/ וחסס.516%גו. ואו / : כקסזת או כך: 360% ה15616.60. ששו אם אתה רוצה לכלול קישור טקסט לטור באחד מדפי ה-69/ שלך, יש ליצור קוד !אדו כגון: <8> א00ז0! 5 'ח56!וסו4] ססאה[<"/אסט 36 / וחסס.86גו. אואוו// :קש ה"=61זה 8> פרק 4: עיצוב האתר 247 ניחוש כתובת ואש בועידת 05וא ופסוףוס שנערכה לא מזמן, נשאל ילד בכיתה ה' כיצד הוא מוצא דברים באינטרנט. תשובתו היתה "אני מנסה. אני מקליד שמות דברים שאני אוהב ומוסיף להם את הסיומת 'וחסס.'". רוב המבוגרים עושים את אותו הדבר. למעשה, מדהים לראות כיצד הם מנחשים כתובת !₪ בבדיקות. 8 עיצוב ממשק באינטרנט מחקרי השימושיות שלנו הראו שהמשתמשים מסתמכים על קריאת |ח כשהם מנסים לפענח את מבנה האתר, או את התוצאות האפשריות של מעבר לקישור. היה עדיף אילו היו לדפדפניס דרכיס טובות יותר להציג מפורשות את מבנה האתר, ולתת תצוגה מוקדמת של יעדי הקישורים, אך נכון לעכשיו הס אינס עושיס ּאת. משוס כך, המשתמשים נאלצים לפענח את הכתובות בלי להבין את החוקיס. ידוע לנו שהמשתמשים מנסיס להבין את כתובות ה-81, ולכן אנו מחויביס להפוך את הכתובות למובנות. כל שמות התיקיות צריכים להיות קריאיס לבני אנוש, ויש להרכיב אותן ממילה או מצירוף מיליסם המסבירות את משמעות מבנה האתר. בנוסף, מבנה האתר שלך אמור לתמוך במחיקת חלק מה- 81( למקרה שהמשתמשים מוחקים חלק מהכתובת בתקווה לקבל דף תצוגה כללית במיקוס גבוה יותר בהיררכיית האתר. כמובן, עדיף שהמשתמשים יוכלו לנווט במבנה האתר שלך על ידי שימוש בלחצני הניווט שתיצור, אך אנו יודעיס שרבים מהס משתמשים בייחיתוך'י כתובות ₪1 כקיצור דרך: משתמשים מעין אלה אמוריס לקבל תוצאות סבירות (לרוב, אהו דף תוכן שמפרט את המידע הזמין ברמת ההיררכיה הנוכחית). ביוס מן הימיס, הדפדפניס, השרתים ומערכות ה-ץאסז יכללו כולס בודקי איות, אך נכון להיוס המשתמשים נידוניס למפח נפש אס הס לא מקלידיס כל תו בדיוק כפי שהוא אמור להופיע בכתובת ה- |אש. מעצבי ט6/ יכוליס להפחית את תדירות המפגש של הגולשיס עס הודעת 404 6חטס? זסח 6!ו₪ הנוראית על ידי כך שהם יבחרו בכתובות א( שקל לאיית אותן. הכלליס לכתובות ₪1 קלות לאיות הסם: % בחר ב-₪1 קצר ככל האפשר (ככל שה- ₪1 ארוך יותר, יש יותר סיכוי לטעויות). %%> השתמש כמה שיותר במילים שלקוחות מהשפה הטבעית הנפוצה, משוס שהמשתמשים ידעו לרוב כיצד לאיית את המילים הללו. > השתמש רק באותיות קטנות. אם תשתמש בתערובת של אותיות גדולות וקטנות, מובטח שחלק מהמשתמשים ישכחו חלק מהאותיות הגדולות ויקבלו הודעות שגיאה (תלוי בשרת). באופו כללי, אסור לסמוך על ההבדל בין אותיות היזהר מ-0 ו-0 מסוכן להשתמש בספרה 0 (אפס) ובאות האנגלית 0 בכתובות 081 משום שהמשתמשים נוטים לבלבל בין השתיים. האות הקטנה 0 פחות בעייתית. אם עליך להשתמש ב-0 או ב-0 בכתובת ‏ |חש, עליך ליצור שם נרדף (85ו|4) לאותה הכתובת עם התו השגוי, שתפנה לכתובת הנכונה. למשל, אם אתה שומר לעצמך שם מחשב כגון וחסס.0אסט, עליך לרכוש גם את השם הח0סס0.6א0ספ ולהעביר את הגולשים ממנו אל הכתובת הנכונה ח 0ס.0אספ. גדולות וקטנות בממשק המשתמש משוסם שהפרדה כזו היא מרשס בטוח לטעויות משתמשים בתדירות גבוהה. העירוב בין אותיות גדולות וקטנות נקרא בשס שגיאות תיאור (זסזו6 החסחקו0050). 6% הימנע במידת האפשר משימוש בתווים מיוחדים (כל דבר שאינו אותיות וספרות). אם יש צורך בקו הפרדה, היצמד לתו בודד לאורך כל ה- |0₪ שלך. השתמש בקו תחתי או במקף, אבל לא בשניהס. כתובות וחטש ארכיוניות הדרך השלישית בחשיבותה בה הגולשים מוצאיס אתרים (אחרי מנועי החיפוש והמלצות בדואר אלקטרוני) היא קישוריס מאתרי 60/ אחרים. בשל כך, עליך לבנות את האתר שלך כך שיהיה קל למשוך אליו קישוריס נכנסיס. התיישנות קישוריס משולה לעסק אבוד, ולכן עליך לוודא שכל ה-₪81 יחיו לנצח, וימשיכו להצביע על הדפיס המתאימיס. אל תזיו דפיס באתר, אלא שמור על אותה כתובת 1 שלהם. כותבי אתרים אחריס מוטרדיס כשהקישוריס שלהס מפסיקים לפעול, או כשהם מצביעים על דבר שונה ממה שהצביעו עליו מלכתחילה, משוס שהדף המקורי הוסר והוחלף בחדש. תוכן שמשתנה על בסיס קבוע מאוחסן פעמים רבות תחת כתובת 1אש זמנית. דוגמאות לכך כוללות את העותק הנוכחי של מגזין ודף ראשי של עיתון יומי. פעמים רבות תרצה לפרסם כתובות ]אש וירטואליות שמצביעות על משהו כגון 'יהדף הראשי של סייברטיימסיי, ייהטור השבועייי, יירשימת מילות מפתח בוועידת 6!זס/ז6חז%6ח1 הבאהיי וכן הלאה. למעשה, המשתמשים מעדיפים לרוב לסמן מצביעיס וירטואלייס אלה משוס שהס מעונייניס לגשת למידע המעודכן ביותר בכל פעס שהס מבקריס באתר. לעיתיס קרובות, תוכן שמכיל נושאיס מעין אלה עשוי להיות מעניין גס בטווח הארוך ויש לאחסן אותו תחת כתובת |א( קבועה בנוסף לכתובת הזמנית, שתשתנה ותצביע על התוכן החדש באופן קבוע. לדוגמה, לפעמיס אני רוצה לקשר את הקוראים של הטור המקוון שלי לכתבות במגזיניס מקווניס, אך כמובן שאינני מעוניין לקשר אותם לטור הנוכחי, אלא לטור מסויס שהופיע בתאריך מסוים. לשתי התפיסות עשוי להיות ₪1 זהה באופן זמני, אך יהיה וה הרבה יותר נוח להשתמש ב- |ח( הקבוע של גרסת הארכיון בקוב ה- וואדו שלי. פרק 4: עיצוב האתר 249 בין אם אתה מארגן מחדש את האתר שלך ובין אם אתה מזיז קבצים מסיבות אחרות, עליך לוודא שכתובות ה- |( הישנות ימשיכו לפעול. יש לשמור כתובות 1ש פעילות לפחות חצי שנה, ומומלץ לשמור אותן אפילו שנתיים ויותר. 0 עיצוב ממשק באינטרנט תהיה זו טרחה מיותרת לעדכן את הקישור בתאריך מאוחר יותר, ורביס מכותבי האתרים שוכחים לעשות זאת. גרוע מכך, בודקי הקישורים לא יגלו לרוב את הטעות משוס שכתובת ה-081 הישנה ממשיכה להיות זמינה, אלא שהיא פשוט מצביעה על תוכן חדש שלא שייך בהכרח לנושא. הדרך המועדפת לטיפול בכתובת !₪1 וירטואליות היא להקצות מראש כתובת |( ארכיונית לדף, וליצור שיטת העברת כתובת קבועה זו לכותבי אתריס שרוציס לקשר אליך. לדוגמה, הכתובת |החזח. |8ז0ש601/+ח6 וש והסס. 00+. אוו / :סח יכולה להיות הכתובת הווירטואלית שמפנה תמיד למהדורה הנוכחית, ואילו |החזח. |0718ו990207/60/ וחסס. 00ס?. אוצצאו/ / :קה יכולה להיות הכתובת הקבועה שמצביעה על מהדורת השביעי לפברואר, 1999. הכתובת הקבועה צריכה להפוך לפעילה ברגע שהדף מופיע, אפילו אס רוב הגולשיס ישתמשו תחילה בכתובת הווירטואלית כדי לגשת למהדורה. הסיבה להפעלת הכתובת הארכיונית בומן שהדף עדיין מופיע בגירסה הווירטואלית היא שאתריס אחריס שירצו לקשר לדף יוכלו לקודד את הכתובת הקבועה בקישוריס שלהם ולשכוח ממנה. עקרונית, ישנן שתי דרכיס להצגת כתובות ₪1 ארכיונית ליוצרי אתריס אחרים. תוכל להוסיף את הכתובת בתחתית הדף. כלומר, 6 || 0806 15חז +0 חס 068| +הסחהוהזסכ %6" "<||58/ > | הסח 60031 990207/ ההסס. סס?. אוצו/ /: כ ח, או שתוכל להשתמש בשיטת הקישור הרגילה והפשוטה ליצירת כתובות 81 ארכיוניות. השימוש בקישור משחרר אותך מהצורך להוסיף שורה בתחתית הדף שלך (דבר טוב כשלעצמו), אך מוסיף טרחה לגולשיס שירצו לקשר אליך (דבר רע מאוד ועלול לעלות בתעבורת גולשים). השתמש בשיטת נתינת שס רק אס היא א) עקבית ו-ב) קלה לגישה על ידי צפייה בדוגמה אחת או שתייס של דפים ישניס וכתובות הארכיון שלהסם. דוגמה טובה לכך יכולה להיות הכנסת התאריך בו פורסס הדף אל תוך כתובת ה- |אש. פרסום ואט כדי לשלב את הנוכחות המקוונת שלך יחד עס הפעילות בעולס האמיתי, דאג לכך שכל מסעות הפרסוס שלך יציגו כתובות 81(! שמצביעות על אתר ה-טפצ שלך. כל מוצר פיסי אמור להגיע גס הוא יחד עס כתובות של דפי המוצר המתאימים. יש להטביע כתובות אלו על המוצר עצמו, או להדביק אותן מאחור. כשכתובת ה-81 הופכת להיות חלק מהמוצר, תוכל להבטיח שהמשתמשים יקבלו שירות בקלות ללא צורך בחיפוש האתר. דבר ה מקל על הלקוחות גס בהמלצה על המוצר שלך למשתמשים חדשים, והוא משפר את הסיכוי שהם יחזרו לאתר שלך כשיגיע הזמן להחליף את המוצר או לרכוש משהו חדש. תמיכה בכתובות וחע ישנות בין אם אתה מארגן מחדש את האתר שלך ובין אס אתה מזיז קבציס מסיבות אחרות, עליך לוודא שכתובות ה-81/ הישנות ימשיכו לפעול. יש לשמור כתובות 1ח( פעילות לפחות חצי שנה, ומומלצ לשמור אותן אפילו שנתיים ויותר. למעשה, בעלי אתריס שביצעו שינוייס מזמן עדיין מדווחיס על גולשיס שמגיעים לכתובות 81 שהשתנו לפני למעלה משנתיים. לכתובות 81 ישנות יש חיים משלהן, והן קיימות ברשימות הסימניה של המשתמשיס ברחבי העולס כולו בתיעוד מודפס, בכתובות דואר אלקטרוני, ובאתרי פ6) אחריס שמקשרים אליהן. למנועי חיפוש לוקח לרוב חצי שנה כדי לעדכן את בסיסי הנתוניס שלהם, ולמחוק או לעדכן את הכתובות הישנות. הדרך המומלצת לטפל בכתובות 81 ישנות היא ליצור הפניה (ח0ו660ז₪601) מהשרת שלך, שתעביר את כל מי שינסה להתחבר לכתובת הישנה אל הכתובת החדשה. פרוטוקול סדדו מציין שני סוגיס של הודעות הפניה: קוד 301 וקוד 302. הפניה מסוג 301 מציינת שהדף עבר באופן קבוע, וזוהי ההודעה המועדפת אם זהו אכן המקרה. דפדפן סביר אמור לעדכן את רשימת הסימניות שלו, אם הוא מקבל הודעת 301 בניסיון להגיע לדף מתוך רשימת הסימניות שלו. בדומה לכך, מנועי החיפוש צריכיס למחוק אוטומטית את כתובות ה-081 הישנות מתוך בסיסי הנתוניס שלהס ולהחליף אותן בכתובות החדשות כשהם מקבלים הודעת 301. קוד 302 מציין שהדף עבר זמנית, ויש להשתמש בקוד וה רק אס ברצונך לשחזר את הכתובת המקורית מאוחר יותר. פרק 4: עיצוב האתר 251 8 ו 5 ז 0 < | | ₪665 < | 60106 67'5ע8 > | +0קקט5 > | 7060065 < | 6ותסה|189 + 510105 60)וה 0 6 ות פס ל .66 [118ת6ז0] זטסץ 06 [[1או ץוק / תה שחוץנות אוסטקטפ 2/7 5 קתוא06[חגו [זהאוס! ק6ו8 וז | (= 7 1185 81 קתוצודו/ .[א)וחסוסק זוסץ | | | טסו "4% .1001 1816 פחסקס 5116 . 9" !ד זסתצ () - ע 6 ) תע פוחסת חס הס ספפשף 3 פטבה טסץ זפששהשח/ל שחץ 15 015 , ק|פח 860ח טסץ פע חפה חב , הטקר סס חז53] ס% 5068 זוטסץ 15 שרחס] |181 .15% ס+ פרחסת 6% 3% חב שְחַ0|0חה66+ 50008 הַח סטש +3665] 6ח+ %טספבּ טסץ פזפתש 15 5וחד .עָ|וְרחב+ זטסץ ח3 טסץ 0+ 5חהב8רח בַחוהז83] 3%85ח %03% 50378 |3ה63%0ש50 בח₪ ||ו 8 0+ פזפה שש 15 5וח ד .8|פבסרתפרה חב הט+ ה0%פ זטוסץ ק66א || 536 אסכ קט5 [163חח66+ 166עז557-||ט 30030 3%8+ 0+ שזץפח/ 15 15ר% הג >חפזט6 רת5%5ש5 ץפח - הבז סזק קות5זפפרתפרח שטףוחט ב +ס דפ |וטוזק 387 8חַ8|וטוזק טסץ 0475 03% - 665!וטוזק ₪9 . ווק 3 .מו וו[ק1ז א1 או ,11!11016 18 הוניך 65 +* סהתקאאזחד * עודקה *- :188|80 * 7 * + ב 61 + ו א דד 00 + ₪1 * הסש.2 .5.06 ./ש/ע/עע התמונה שבתרשים היא מה שמתקבל כשגולשים לכתובת 6וחסח חפ וחסס. הח פ6.1כן. פג. אוואו/ / :קח, כפי שצוין במודעת פרסומת מודפסת של 18% שהופיעה בגיליון נובמבר 1997 של המגזין פדצ8. בהתבסס על הדרך בה החברה נתנה עיצוב חזותי מרשים כדי להשיג שילוב בין החומר המודפס ל-60/, אני מניח שמודעה זו המריצה לקוחות פוטנציאלים לעבור לכתובת ה- |ח(! שצוינה במודעה המודפסת. לרוע המזל, הדף עליו המודעה הצביעה לא היה קשור למוצר שקודם במודעה עצמה. סביר להניח שרוב המשתמשים התייאשו בשלב זה, וקיבלו החלטה שלא ליפול יותר בפח שטומנות להם מודעות 18%. 2 עיצוב ממשק באינטרנט ו ו 5 שחש * | | 8605 < | 60166 5'זשעֶט₪ > | 1וסקקט5 < | 1000665 > | חס |188 + | 510105 60)וחש ווות ג זט זי6)]נוקנת טי ות 3 נוסץ 6 110 10 [חוח6תג וט | וט 01 1181 4 תו ,6עגת .ינמסו[ זנוסץ ז0] ]סק תג 1131 וד "%, רחסו סש וק + 6 * זתהאודז50 * | תהסד)שאזם ואס * פאטזדקס *+ א תד 0 + ₪ * סהקאאזווד + 7 * העזזקה * 805|א18 * + 0ס.7ח0 .05.06 ./ע/ע/עע ייתכן שמשתמש שמעוניין מאוד בעכבר המושך שבמודעה ימשיך לחפש אותו, ויניח שתיאור המוצר יימצא תחת לחצן %85,. התמונה העליונה היא תוצאת הלחיצה על אותו הלחצן. לפחות מניחים לנו לראות את העכבר, למרות שעדיין אין מידע אודותיו. לחיצה על תמונת העכבר הגדול חסרת תועלת: זוהי שגיאת עיצוב איומה, משום שמשתמשים רבים לוחצים על פריטים שמוצגים על המסך. חלק מהמשתמשים עשויים לשים לב שגרפיקת הלחצן "פחסטקס" נראית כמו תמונת העכבר הגדול. עקרונית, המילה "פחסטקס" היא מונח כללי שיכול להביע כל דבר, ולכן זוהי בחירה גרועה במונח כאמצעי ניווט. פרק 4: עיצוב האתר 253 0 סנכ 5 זסהשו0: + 65 * | 600166 55ז6ְעֶט₪ > | 1וסקקט5 > | 065ט6סזק > | 6חס188|3 + | 510105 60)וח0 ונ 16 661 ישוס 2-0 וו :1 ווסו = 181 1 וסונ "7 10 %11]]] סי * 11 א וסוכ * ו ו 0ס .05.06.27 ./ע/עעע הסד)םהזם זואסו * | פאסזדקס * א ד 0 * ₪ * סהקאאזווד + 07 * שודקה *- 180|8086 ?+ (בתמונה למעלה) לדף זה יש סכמת צבעים שלא תואמת את שני הדפים הקודמים, ומשום כך חלק מהמשתמשים עלולים להבין שהם הגיעו לחלק באתר |18% שאינו קשור לנושא. משתמש נמהר יראה את תמונת האופנוע הגדול, וילחץ מיידית על הלחצן 886% כדי לחזור למקום מבטחים. משתמש זהיר יותר יבחין לבסוף באפשרות שמתייחסת לעכבר וילחץ עליה. (בעמוד הבא) דף זה נמצא בכתובת %חוסק!!0ז6/50הסההותפו/ וחסס. וחסו.6ק.פט. שאו /:קשח, וזוהי הכתובת שהיתה אמורה להיות מודפסת בפרסומת המקורית. משתמש שהקליד את ה- | שבמודעה לא יגיע למידע אודות העכבר הנכסף עד אחרי שהוא יעבור ארבעה דפים. משהו טוב בדף: התמונה מרכזית משתמשת נכון בהנפשה כדי להדגים כיצד ניתן להשתמש בעכבר כדי לשלוט בחלון. שים לב, דרך אגב, למשוב הניווט הלא עקבי בסדרת מסכים זו. בשתי התמונות הראשונות, מיקומו הנוכחי של המשתמש מצוין על ידי משולש כלפי מטה בסרגל הניווט, וכן טקסט הלחצן הופך לצהוב. בתמונה השלישית, לא ניתן משוב שבעזרתו המשתמש יידע איך הדף הנוכחי משתלב בתוך מרחב הניווט (גרוע מאוד להשאיר את המשתמשים בלי לדעת היכן הם נמצאים). לבסוף, בתרשים זה, המיקום הנוכחי מצוין על ידי הפיכת המשולש (אפקט עדין מאוד) ללא שינוי צבע טקסט הלחצן. 4 עיצוב ממשק באינטרנט ו צָט8 0) 6זפת+ ‏ + 0 > 5 < 0 * 8סה|א8] + 5 טשטזוה/) וחוס] ]ו6פיוטסץ 66ז-] 6 שחופט זט |50701 ווה +הו0ק|561701 וו0ז50 [זסוהּףָועבּח 5 סט 6הטסזבּ 5 וט 00 סחָזה3! 3060 .6356 כ671ףחו הווש 116 שש וזזצטוסז] | ]וו ,056 *"+ח01 ]|0ז 50 6ח+ ַחה658זק + + חָחו!!פז50 קוא פחַָחו1 "360 זו .0315 |[5010 01 355|85 תח 108 3+65 ח!חח/|₪ חסולסהט1-|101 3 15 058 +ח0|!=01ז50 פחד %ו=!!0ז50 שטף|חט 3 5 , 6פטסח ח! ||0זס5 טסץ 61| +3 ח+ ז3+0 הו ח 54/0%-וח! וח .315 5 !50101 חָ חופט +ט סת+וטו ח1780110 חב "| חטש" 3 ח+וטו +3 ח+ + +'ח 60 :חָתוחזבּ שו .(058ח 34 ,ה ט600 הַחס| ,חק פפטו |[פזסם .הסוח 035160 עח3 +ט סת1וטו 665 3050 6זק5 . 231 - 568 0+ +ח3שש סע +3 חטש ע|8%301 8חו] 0 !]טר מסווססיו1 שרח תו צזוא) 367011 131 10 ודוי 1 ]01 צש כ 1000 סז זווס ] וס שו !וו 20010" ץש 6 6% וו זווס ]וח מו ל סִחָבּ? זאסו1 ||63 .80| סז ע/011601 זס ,81318 זפ1ט םח 60 |563! זטסץ +3 אוסח 53|6 חס . 51018 6ח!|ח6 זטס +ופוע זס 5201 .6% 1-800-426-7235 פחסוזהטו!קקה 6!פוז3קוחס0 97 0160809 4000508 חו 65זאזפקט וחספק * ח3 זסטטכחק , ץחהקוחסס זפתזס |4/ . הסוז3וסס 0 65הותטה וח 855ח851 |3חסוז3 16| 01 1130603765 0ִַח1516חָפח זט 113060375 בחה ]חוסם ||0ח50 4ח3 18 . 010875 01 35 וח 5608 זס 1130603765 56 3 65חבּח 56106 וס 8 וו הזו 0 6008 1 565% 15 5116 וח ד 0 זסנּהָה)] 328 146150 אהס )וק * "ההאודז50 * | הסד)שהנם תואס + פאסזדקס * סתקאאזחד < געודקה *- >הסה|הפך* 1 + א ד תדו * ₪ + 7 * + 0ס.7ח05.06./0 ./ע/עעע פרק 4: עיצוב האתר 255 (בעמוד הבא) ברוב המקרים, הצ'ט היא הדרך הגרועה ביותר להגדלת הקהילה ב-60/. אפילו החזות המשעשעת של הדו-שיח ב-607116008% לא יכול להוסיף לחוסר העניין בצ'ט באינטרנט. לגולשים אין פשוט מה להגיד, ומה שהם אומרים לא תמיד מתאים לקהל מסוים. 6 עיצוב ממשק באינטרנט תוכן שהגיע מהמשתמש כמה ממלומדי המדיה החדשה טועניס שהיכולת להפגיש את הקהל בדיון עס צוות מפעילי אתר 60/ היא אחד מהיתרונות העיקרייס של המדיוס המקוון, בהשוואה לדפוס ושידורי רדיו וטלוויזיה. למרות שמשוב המשתמש חשוב מאוד לשיפור העיצוב וניהול האתר, יש להיזהר מלהתחיל דו-שיח עס משתמשים, אלא אס תוכל להקדיש משאביס משמעותייס לשם כך. אתר קטן שמקבל הערה אחת או שתייס ביוס מסוגל לטפל בכמות הקטנה של התכתובת עס משתמשיס נאמניס ונלהבים. כשמדובר באתריסם גדולים, בהס צופים מליוני גולשיס כל יוס, ופוטנציאל ההודעות היומי מגיע לכמה אלפים, הו עניין אחר לגמרי. אס צוותי האתריס האלה היו מתכווניס לענות על כל ההודעות, הס היו נאלציס לשבות מכל דבר אחר שהס עושיס. במקוס לעודד כמות גדולה של תקשורת דו כיוונית בין הצוות שלך לגולשים, ניתן להזמין אותס לתרוס לקבוצות דיון באתר. תוכן שנוצר על ידי המשתמש פופולרי לרוב, במיוחד אם הוא מקושר לכתבות ספציפיות או לחלקיס של האתר. באתריס מסוימיס יש אזורי דיון כלליים, אך אזוריס אלה נוטיס להפוך לאזורי שיחה חופשית שבה דברים נראיס מבלבליס. לרוב, הדיוניס שיש עליהס פיקוח הס הטוביס ביותר, אך עלות ניהולס גבוהה יותר. ניווט בעזרת יישומון בין אם היישומוניס כתוביס ב-388 או בשפה אחרת, הם מהווים דרך להוספת פונקציונליות מתקדמת לאתר 60/ בכך שהס מאפשריס למשתמשים לעבוד עס תוכנית אמיתית ולא רק עס אוסף קישוריס וטקסט. ניתן לחלק את היישומוניס לשתי קטגוריות קשיחות : %> יישומוניס פונקציונליים. אלה מיני יישומים עצמאיים, עם ריבוי תצוגות (כגון כרטיסיית תיבות דו-שיח). יישומי פונקציונליות מטפליס לרוב בנתוני ייהעולס האמיתייי שקיימים בנפרד מדף ה-ס6/, לדוגמה, ומאפשריסם ללקוחות לנהל דבריס כגון חשבונותיהם, רשימת מלאי וניהול שרת. | פווד 15 שפט/ו אוסא |1שסט ש = ססוא- 516% - סט טסצ רו5זש (בר, | [! ( ₪ =קם/ ו מע14 מפפואטות 5 ד דקאשד וו 2 | )-======[ | | = = 00% 4דדס60 = == וט ככ | =] [-->= ונא 405 [ = / ₪ שרקיר כ 0% 2 == ]= : / בכצטר ו בכ | בכ > ל == 0 6שסו טפ ו 5 608%. 570.00 פרק 4: עיצוב האתר 257 לחיצה כפולה בעקרון, היישומונים צריכים לעמוד בתקני ממשק המשתמש הנוכחיים, ולכן ייתכנו מקרים מצערים בהם יש לתמוך בלחיצה כפולה, נכון לעכשיו. עם זאת, בטווח הארוך, יש לחסל סופית את הלחיצה הכפולה, משום שהיא גורמת למשתמשים מתחילים קשיים רבים, ומשום שהיא מתנגשת עם סגנון ה-60), בו הכל נעשה בלחיצה אחת. הסיבה העיקרית לאפשור לחיצה כפולה היא כדי לאפשר למשתמשים שיש להם עכבר עם לחצן אחד לבצע שתי פעולות. מעצבי הממשקים הגרפיים של היום העתיקו חולשה (לחיצה כפולה) שהיתה צורך של הממשקים שהיו קיימים בזמן בו היו עכברים עם לחצן אחד. בואו נשפר את העתיד. על יישומוני תוכן להיות מודעים במיוחד לעניין הלחיצה הכפולה, משום שהגולשים חושבים שהם תוכן 60\ שבו הכל נעשה בלחיצה אחת. 8 עיצוב ממשק באינטרנט > יישומוני תוכן. יישומוניס אלה משולבים בצורה הדוקה עס תוכן דף 60/. דוגמאות לכך כוללות את פקדי הניווט (מפת אתר פעילה, או שלטי מיתאר שמתרחבים ויוצרים רשימה היררכית), תוכו פעיל (דגס מנוע שיכול להסתובב, להיות מונפש ולקבל טיפול), ופונקציות משניות (ממירי מטבעות). לרוב, הפעלת יישומון תוכן לא תביא לתוצאה מרחיקת לכת, מעבר לשינוי תצוגת הדפים הנוכתיים. יש להציג יישומוני תוכן בתוך חלון הדפדפן בו מוצג הדף שאליו הם שייכים. יישומוני פונקציונליות צריכים לקבל חלון משלהם, שאינו חלון דפדפן, וללא פקדי ניווט פ6) כלשהס. אס יישומוני תוכן מוצגיס בחלון דפדפן, המשתמשיס יתבלבלו בין פעולות היישומון לפעולות הדפדפן. חמור מכך, המשתמשים ילחצו הרבה פעמים על לחצן 6% של הדפדפן, כשירצו לבטל פעולה ביישוס, או לחזור למצב או תצוגה קודמיס. כמובן, דפדוף אחורה בדפדפן יחזיר את המשתמש לדף הקודס וימחק את היישומון. הבעיה נובעת מכך שהרצון לנווט במרחב בעזרת קישורי טקסט חזק מדי, כל זמן שהמשתמש נמצא בתוך חלון דפדפן. המשתמשים פשוט אינם יכוליס להתנתק משימוש בפקודות הדפדפן כדי לנווט, גס כשהם י'אמוריםיי לנווט בתוך היישומון. הפתרון היחיד לכך הוא לפתוח את היישומון בחלון נפרד ללא פקדי דפדפן. לאחר שהיישומון מופיע בחלון נוסף, המשתמשים מפסיקים לחשוב שהם ב-ייסס\יי, ומתחילים לעבוד עם היישומון לפי דרך הפעולה שלו. הפתרון לבעיה זו בטווח הארוך היא להפסיק להשתמש בדפדפנים, ולעבור למערכת ניווט משולבת שמאחדת את הניווט בין מצבי המערכת ופריטי מידע, ומנהלת ממשק ניווט יחיד עבור כל פעולות המשתמש, ללא קשר אם הן מקוונות או מקומיות. אחרי הכל, למשתמשים לא צריך להיות אכפת אס הס מתעסקים בדף 4191 או בסוג נתוניס אחר, או אס הס מתחברים לאינטרנט, לאינטראנט, או לתוכן מקומי בדיסק שלהס עצמם. יישומוני פונקציונליות יכוליס לכלול קישורי טקסט שמחזירים את המשתמש ל-65/). דוגמאות טיפוסיות כוללות דפי עורה ומערכת הזמנות כרטיסי טיסה, שמאפשרת למשתמשים לקרוא מידע נוסף אודות סוגי המטוסים. קישורי טקסט כאלה צריכיס לקחת את המשתמש מחוצ ליישומון הפונקציונליות בחזרה לדפדפן ה-60/ (כשהיישומון נשאר גלוי בחלון הנפרד שלו). יישוס פונקציונליות שמנוהל בחלון או בחלונות משלו צריך להיות מעוצב על פי ההנחיות המסורתיות של עיצוב ממשק גרפי (601), ואילו יישומון תוכן שמוצג בתוך הדף המקורי צריך לשמור על הנחיות העיצוב ב-60/ ועל עקרונות עיצוב טוביס של מידע. פעולות איטיות יישומוניס שמתקשריס לשרת צריכים להציג מחוון התקדמות בומן התקשורת. מחווני ההתקדמות (שנראיס הרבה פעמים כסרגלים מתמלאים) נחוציס לכל ממשק משתמש בכל פעולה שזמן התגובה שלה איטי (למעלה מעשר שניות). היישומוניס שמתחבריס לשרת יסבלו הרבה פעמיס מהשהיות ארוכות בשל מגבלות האינטרנט. משוס כך, חשוב שמחוון ההתקדמות יציג את ההתקדמות הממשית של הפעולה, ואת משך הזמן הצפוי עד להשלמתה. לדוגמה, מחוון ההתקדמות יכול להציג את התקדמות הסריקה בתוך בסיס נתוניס שמבוצע עליו חיפוש, או את רצף הצעדיס שהושלמו (תוך הימנעות משימוש במונחי מערכת בלתי מובנים). מחווניס אלה עשוייס לדרוש קצת מידע מהשרת, על פי דרישת היישומון. יש להוסיף ליישומוניס גס לחצן ביטול, כדי לאפשר למשתמש לבטל פעולות שעשויות לארוך זמן רב. דבר זה חשוב במיוחד כשמדובר בתקשורת עס שרת. פרק 4: עיצוב האתר 259 0 עיצוב ממשק באינטרנט מסקנה מפתה לקוות שפתרון טכנולוגי ייתן מענה לבעיות עיצוב האתר: מנוע חיפוש בשפה טבעית, שמאפשר למשתמשים למצוא את הדף שהס מחפשיס אחרי ניסיון פשוט, או מערכת ניהול המשתמשיס המושלמת שתכפה עבודה לפי תקני עיצוב, כך שכל הדפיס ייראו אחידיס והתחושה בהס תהיה גסם היא אחידה, ללא קשר לאיזו מחלקה הדפים שייכים. כולי תקווה שהטכנולוגיה תשתפר, אך הנושאיס החשוביס ביותר בשימושיות באתרי פ6/ עדיין דורשיס התערבות ידנית. אתר טפ\ לא ייתן תחושת אחידות, אלא אס כל המעצביס והכותביס שלו יסכימו לפעול תוך התחשבות בלקוח. בנוסף, אף חיפוש לא מסוגל למצוא דפים שמתוארים גרוע, או שאין בהס את המידע שהמשתמש מחפש. לארכיטקטורת המידע מתייחסים כיימס שפתיים'י במידה רבה, ואכן, העובדה שבפרויקטיס רביס מביניס שיש לעצב את מבנה מרחב הניווט ולא רק לתת לו להתפתח אקראית, מהווה התקדמות משמעותית. עדיין יש צורך ביותר אתריס שיבססו את ארכיטקטורת המידע שלהם על צרכי הלקוח, במקוס על דרך המחשבה הפנימית של החברה. לאחר שיהיו מספיק אתרים כאלה, וכותבי האתרים ישתפרו בכתיבת קישוריס טובים יותר שתומכים בניווט ובכותרות שמתאימות למנועי חיפוש, יש תקווה שהמשתמשים יוכלו סוף סוף לנווט ב-ס6/צ. כיום, החוויה השלטת של משתמש ה-60/ אומרת כי בממוצע, אתה בדף הלא נכון. משתמשיס כבר מצפיס לבעיות ב-69), והס מצפיס לבזבו את זמנס בצפייה בדפיס לא קשורים לפני שהס ימצאו את הדף שהס חיפשו. כולי תקווה שדבר וה לא ימשך לעד. לאחר שיהיה קל יותר לנווט באתריס הטוביס ביותר, המשתמשים יתמרדו כנגד האתריס שמאלצים אותס לבובו את רוב זמנס על דפיס לא קשוריס. הידעת ? להלן רשימת עשרת כללי העיצוב שישפרו את השימושיות של כמעט כל אתר באינטרנט: 1 2 . הכותרות צריכות להיות מנוסחות בקצרה .10 בכל דף יופיעו השם והלוגו. מנוע חיפוש באתר אס יש למעלה מ- 100 דפים. ובאופן ישיר. עצב את מבנה הדף, כך שיהיה קל למשתמש לקבל החלטה מה לקרוא ומה לא. . אל תשיס את כל המידע בדף אחד. השתמש בקישורים. . בדף המוצר שיס תמונה קטנה עם קישור לתמונה גדולה יותר. . התמונה הקטנה לאו דווקא חייבת לחיות הקטנה של תמונה גדולה יותר. השתמש ב- 6700 ולא רק ב- ₪65126. . השתמש ב- ₪05 |ססד כך שהמשתמש ידע לחיכן הוא עובר, כאשר הוא מציב את הסמן מעל קישור. התחשב במגבלות ראייה ושמיעה. זכור שרוב הזמן המשתמש נמצא באתריס אחרים, ומשם הוא בונה את הציפיות שלו כיצד ה- טפ/ עובדת. לכן, עשה כמו שעושים כולס. מקור: |ח%ח.991003/א00ץז3!6/ וחס561.6. וצצ פרק 4: עיצוב האתר 261 עיצוב עבור האינםראנם העיצוב עבור אינטראנט זהה ברובו לעיצוב אתר ס6/ רגיל באינטרנט. המאפיינים האנושיים הבסיסיים של המשתמשים נשארים זהים, והנושאים העיקריים שקשורים בפעילות הגלישה ב-650/ נשארים זהים גם הם. לפיכך, רוב העצות שתקרא בספר זה טובות הן לאתרים הפנימיים (אינטראנט) והן לאתרים החיצוניים (אינטרנט). פרק 5: עיצוב עבור האינטראנט 263 אתר אינטראנט ואתר אינטרנט הם שני מרחבי מידע שונים, שיש להם שתי מטרות שונות, משתמשים שונים ומגבלות טכניות שונות. הערה: בהמשך הפרק התייחסו לעיתים לאתר אינטרנט כאל אתר חיצוני (שאותו כל העולם יכול לראות) ולאתר אינטראנט בתור אתר פנימי (המכיל מידע פנימי של החברה שיש לשמור על חשאיותו). שים לב למושגים אקסטראנט, אינטרנט ואינטראנט. 4 עיצוב ממשק באינטרנט למרות הנאמר לעיל בהקדמה לפרק זה, יש להתייחס לעיצוב אינטראנט בצורה שונה במקצת מאשר לעיצוב אינטרנט. הסיבה הבסיסית ביותר היא שאתר האינטראנט ואתר האינטרנט הס שני מרחבי מידע שוניסם שיש להס שתי מטרות שונות, משתמשיס שוניס ומגבלות טכניות שונות. מרחבי המידע הללו כה שוניס, ומשוס כך יש צורך בפתרונות שוניס כדי להתאיס את העיצוב של כל אתר על פי הנסיבות. לכן, מצד אחד, מעצבי האינטראנט צריכיס לעבוד על פי ההנחיות הבסיסיות של עיצוב אתרי ספ/ רגילים, אך מצד שני, עליהס לנקוט אמצעי זהירות כדי להבטיח שהעיצוב שמתקבל מותאם במיוחד לכך שהוא יגביר את יעילות העובדים. באתרי אינטרנט, המונת ייעיצוב שמתרכז במשתמשיי מתכוון ל-ייעיצוב שמתרכז בלקות'י. באתרי אינטראנט, המונח מתפרש כ-ייעיצוב שמתרכז בעובד'י. עדיף ליצור עיצובים שוניס לממשקי המשתמש של האינטרנט והאינטראנט, כדי להקל על העובדיס להבין מתי הס רואיס מידע אינטרנטי (זמין לכל העולם) ומתי הם צופים במידע פנימי (שיש לשמור על חשאיותו). כדי להדגיש את ההבדל בין שני מרחבי המידע, אני ממליץ על שימוש בשני סגנונות חזותיים, ובשתי ערכות של תבניות (0!8065ח6ד) עבור אתרי האינטרנט והאינטראנט. כמובן שעל שני הסגנונות להתאים לכללי העיצוב העקרוניים של החברה, אך עליהס לקחת את הכללים העקרוניים הללו, וליישס אותס בשתי דרכים שונות. בעיקרון, האינטראנט והאינטרנט יכוליס להיות מנוהליס על ידי אותה מחלקה, כל זמן שראש המחלקה מבין שיש לנהוג בצורה שונה בכל אחד ממרחבי המידע הללו. למרות הצורך בעיצוביס שוניס, יש יתרון בניהול משותף. ניתן להשתמש בטכנולוגיות ּהות של כתיבה ושרתים כדי לפתח שני אתריסם (למעשה, חברה קטנה עשויה ליהנות מכך שאותו העובד משמש כ-ז6078556/ של שני האתריס). אפשר לשתף את הידע אודות עיצוב ב-60/ וטכנולוגיות שקשורות בה, בין הצוותיס שעובדים על כל אחד מהפרויקטיס הללו אס הס באותו הארגון. בנוסף, ניהול משותף יקל על שיתוף משאבים בין הפרויקטים כדי להתגבר על זמני עומס שלא ניתן להחימנע מהס בפרויקטיס שקשוריס ב-60/. הפרדה בין עיצוב אינטרנט לעיצוב אינטראנט ההבדל הברור ביותר בין האינטראנט לאינטרנט הוא שמשתמשלי האינטראנט הס עובדי חברה, ואילו משתמשי האינטרנט הס לקוחות. משתמשים פנימיים ישתמשו באינטראנט לקבלת כל סוגי המידע השוניס שהס זקוקים לו לשס עבודתם, ואילו משתמשיס חיצוניים מגיעיס לאתר שלך, רק כדי לקבל מידע מוגבל שקשור לעסקיהס עס החברה שלך. בשל השוני במטרות המשתמשים, אתרי האינטראנט של רוב החברות מורכבים מכמות דפים גדולה פי 0 מאתר האינטרנט של החברה. לדוגמה, ל- 116705/5%6₪05] חט5 יש כ-20,000 דפים באתר האינטרנט וכשני מליון דפיס באתר האינטראנט. בנוסף, פרט לחברות קטנות במיוחד, אתר אינטראנט מחולק לרוב על כמה אתרים, שכל אחד מהם מנוהל על ידי מחלקה שונה, ואילו אתר אינטרנט אמור להציג חזית אחידה ללקוחות, ולתת תחושה של אתר יחיד. עיצובי אינטראנט יכוליס להתייחס לכך שהסביבה שבה הם מופיעים פחות מגוונת מאשר עיצובי אינטרנט. באינטרנט, יש למשתמשים דגמי מחשבים שונים, מהירויות חיבור שונות, דפדפנים שונים וגרסאות רבות של אותו דפדפן. אתר אינטרנט אינו יכול לסייע למשתמש בהתקנת שדרוג, ולכן לא מומלצ לדרוש מהמשתמש להיכנס לאתר עס גרסת דפדפן מסוימת, רק כדי לבקר בו. בניגוד לכך, בחברות ניתן לקבוע פלטפורמות אחידות ודפדפן יחיד. יתרה מזאת, לרוב ניתן גס לציין שעל הדפדפן להיות בגירסה מסוימת, או לפחות שעליו להיות בגירסה אחת מתוך שתיים אפשריות. אם יש למשתמש גירסה לא מעודכנת, אפשר לדרוש ממנו להתקשר למרכז התמיכה כדי לקבל את השדרוג לגירסה המתאימה. דבר זה מקובל במקריס שאכן קייס צוות תמיכה זמין שמסוגל לבצע את השדרוג עבור המשתמש. בסביבה הפנימית של האינטראנט יש רמת סטנדרטיזציה גבוהה, ולכן ניתן להשתמש בתכונות דפדפו מתקדמות יותר בעיצוביס אלה, כשנה לפני שניתן להשתמש בהן באינטרנט. לרוב אפשר גס להניח שיש למשתמשים גופניס מסוגים מסוימיס שמותקניס במחשב שלהם, שיש להם איכות מסך מסוימת (לכולס יש לפחות מסך "17 עס רמת צבע פרק 5: עיצוב עבור האינטראנט | 265 6 עיצוב ממשק באינטרנט גבוהה של 16 סיביות), והס יכולים לגשת ליישומים משרדיים מסוימיס בגירסה ידועה. הנחות אלו מקלות על עיצוב ותכנות פעולות אינטראקטיביות, שמראש מיועדות לעבוד במספר פלטפורמות קטן יותר מאשר באינטרנט. לחברות בגודל בינוני עד גדול יש עובד במחלקת מערכות מידע (15), שיודע מהי תצורת המערכת הנפוצה בחברה. עליך להעביר את עיצוב האינטראנט להערכתו של אותו אדם, כדי לוודא שעיצוב ה אכן תואס לא רק לדרישות המערכת הרשמיות, אלא גס למצב בשטח. בנוסף, כדאי לאלה שמעורביסם בפרויקט אינטרנט להתעדכן בתוכניות מחלקת 15 לשדרג את התצורה הסטנדרטית. לרוב, אפשר יהיה בעתיד, לאחר השדרוג, לעשות דבריס שלא ניתן לעשות כרגע, ולכן תוכל להתחיל לתכנן אותס כבר מעכשיו. באתרי אינטרנט, אני תמיד מזחיר נגד עיצוביס עס התמקדות פנימית שמשקפיס את מבנה החברה. בניגוד לכך, אתרי אינטראנט נהניס לרוב מהתמקדות פנימית, משוס שהעובדים כן מעוריס בענייני החברה שלהם, ומשוס שהס רוצים לדעת את המבנה שלה. מתאיס מאוד להשתמש באתרי אינטראנט גס בכמויות גדולות של טרמינולוגיה פנימית ומיליס נרדפות של החברה. אם תעשה זאת באינטרנט תבהיל את הלקוחות, אך העובדיס מבצעיס את עבודתס טוב יותר כשהס משתמשים בטרמינולוגיה המקצועית. שפה מדויקת תסייע להבין בדיוק את פרטי הנושא. כדי לסייע לעובדים חדשים, תמיד טוב לספק קישוריס להסבריס אודות המונחיס הפנימייס של החברה. עיצוב אקסטראנט אקסטראנט (08060ם) היא חלק של האינטראנט 860 ח1) המיועד להעניק הרשאות מיוחדות לגישה לאתרי משנה מסוימים למשתמשים חיצוניים. לרוב, גישה מעין זו ניתנת ליועציס או לקבלניס, שיש להס חוזה עבודה עס החברה והס וקוקים לנתוני חברה מסוימיס ולתוכניות מוצר, ללקוחות שעשויים לבצע הזאמנות משלהם או לבדוק את מצב ההזמנות הקיימות, ולספקיס שרוציס להתמודד על מכרזיס לפריטים, או לעקוב אחרי רמות המלאי של החברה ולתכנן את לוח זמני הייצור שלהם. פרט לדרישות האבטחה, עיצוב האקסטראנט דומה יותר לעיצוב אינטרנט מאשר אינטראנט. פרט לדרישות האבטחה, עיצוב אקסטראנט 60ח₪008) דומה יותר לעיצוב אינטרנט 60חז%0ח1) מאשר אינטראנט (60ח8שח1). האקסטראנט אמורה לדמות את סגנון אתרי האינטרנט, משוס שהלקוחות יעברו בין האתר הציבורי לאתר האקסטראנט הפרטי. אתר האקסטראנט צריך להיות מעוצב בצורה שתציין איכשהו את הבדל הסטטוס בין שני מרחבי המידע, ותבטיח למשתמשי האקסטראנט שהמידע שלהס נשמר בסודיות ואינו מופצ בציבור. שלושת ההבדלים המרכזיים בין האקסטראנט 60חזואם) והאינטראנט 60ח8שח1) הס : % חוסר שליטה על סביבת משתמשי האקסטראנט. הלקוחות והיצרניס השוניס משתמשים בציוד ותוכנה מגווניס בחברות שלהס. % רוחב הפס בין השרת שלך ומשתמשי האקסטראנט קטן יותר, משוס שמנגנון ההעברה הוא האינטרנט. % העובדה שהאקסטראנט שלך לא תהיה לרוב חוויית ה-65) העיקרית של המשתמשים. לרוב, כל לקוח או יצרן מתקשר עס חברות רבות אחרות, והוא ניגש לאתרי אקסטראנט רביס אחרים. בשל השינוייס האלה, אינך יכול להנות מיתרונות העיצוב של האינטראנט, שבה אתה יכול לעצב את האתר עבור דפדפן מסוים, להרתיב את מגבלות רוחב הפס בחופשיות ולהניח שהמשתמשים מבינים את העיצוב, משוס שזהו האתר היחיד שמכיל מידע אודות החברה. ישנס גם הבדליס מסוימים בין האקסטראנט לאתרי 60\ מסורתיים : 4% באקסטראנט יצפו גולשים או קבוצות שכבר יש להן קשר מסויס לחברה, ולכן הס ידעו יותר אודותיך ממבקר ה-68/ הממוצע באתר שלך. 6% האקסטראנט תשמש לביצוע פעולות ספציפיות מוגדרות פעס אחת (לדוגמה, כדי לעקוב אחרי הזמנה), או באופן מחזורי לכמה משימות (כגון מעקב אחרי כמה הזמנות). % האקסטראנט בנוי במודל העסקי, משום שהוא משרת אנשיס שאיתם כבר יש לך קשר עסקי. לפיכך, אין לכלול פרסומות באתרים אלה ואין להכניס בהם חומר שיווקי. כשמישהו מגיע לאתר האקסטראנט שלך, הוא כבר בחר מראש לעשות אתך עסקים. עכשיו זהו הזמן לבצע אותס. פרק 5: עיצוב עבור האינטראנט 267 עחההּקוח0ס6 זטסצ זז (י'ד)פעצנחס |) | 5 ד בא בו הסוזבּהזס+ח1 טהב הַחודוסקפם עוובּס 6ודוס1] %סה בוא ץההקווס6 וטסצ חוכקוח5 הס 3 חהוס*חו בַחואסבּזז 593700308 * 5 זסזטוטו5ום * 5זפסזם הופ|טסזם %680ומוטטפ * 6 ווחה עצוסזה6עשחך צזסהפצח1 עוובם * +וסספז צזס+הפטחו בחפ-ה%חסוא 85%ז13! > מזמסוח צֶם +וסקפם 53|85 * +סטטז זפ ס-פם * רו 36 ]טחהּ ו 5 "בס הַמחטסבזטחבו > 5חסוז105%710 ע|0ח8558 * סם שפח 3 זווחסטם * זְפַהָבּחב 0001 וטס 0+ 3 0₪ח58 ,5תסול5פגוף זס 5חַסוסַ5פּפָהַ5₪ ,5+חפוחוחסס םת עֶחג .80וח3 ם ||ואו 300855 0פ2תסהנובחנ .חס צה6003 זטוסץ זסז 300855 חואו בפזב 80ז00ז85ז ב 5 פוחד אובּ| 18 +0 80%זאם ז55!||ו 8 0+ 6זנוסספסזום 8ט |וואי 300855 280חסרנובּחט חובּ סז 5+קותפזזב .850 5סרטז | .1998-99 5פוטס|סהחספד 0 1ב סחפַצטס6 9 ,1 זט 58000 חס 003050 1.355 8/007.001./ש/ע/ש (למעלה) הדגמת אתר אקסטראנט של חברת 5 ד 0 1ה. אתרי אקסטראנט מכילים כמעט תמיד מידע מסווג, ולכן משתמשים חדשים אינם יכולים לגשת אל הדפים המכילים מידע זה. לפיכך, הגולשים אינם יכולים להעריך שירות זה שניתן על ידי החברה. (בעמוד הבא) עם זאת, על ידי הוספת אזור הדגמה שמכיל נתונים כלליים וסיסמה פשוטה שניתן לתת אותה בחופשיות לכל הגולשים, ניתן להציג כיצד יתבצע השימוש באתר עבור פרויקטים חדשים. 8 עיצוב ממשק באינטרנט ץההק וס זטסץ ז0? הענמ |) | 5 )ד בא בול מסוסבחוס?ח1 בחב החוזזסקפם עוובּם 5 הַמ 0ב?וחבו | 15וסקטז עזם+הפשח1 5 סט הַהוסטוח5 0187 פוחסו ₪731 עֶהִבמו60 גוס םשזחס חס ₪800715 הַהומקוח5 זפה+0 5 ספ הַמואסב/טַמוסטוח5 בוטבּח0ז7ב583 * 5 זסזטוטזפום * אסזדהווח=ס-אז 6אזא6החד פאה 6אזקקזו5 חס 65 ח6רחוכןוח5 *זם וחסה וחסו? הסו0%ה הַחוזוה 4 פוב +חסוקו 40| א ופטיוס 8 לסטהסזכ הו|שח1 .מס 85%ד סזסוו הזבּוהַחז| | 56003 5 פהחוםמוח5 8ז8|קהוססח1 .60 85%ד המוחסץ= סחם| | 55080 0 צעב1א החוסווום ;09018180 5%00% צ5310% סו 673 צְבּ=|| | 51007 טחואסהיוד | 5 סחזס טוה | | 5 זפַהָבּחב 000% וטס 0+ 3 0ח58 ,5חסופפוף זס פחסולפפּהָהַט5 ,5זחפווחסס זסת צֶחה .80וח08 5ם |וואו 300855 280הסת+נובחט . ץוחס עחה3קוח60 זטוסץ זסז 300855 חזואו בפזבּ 95%00180ז ב 5 פוחד . אוב 8+ +0 %80%א8 85%!|₪ 8ח+ 0+ 0180 פ5סזכ 8ם ||ואו 300855 28וסחנובחגו חובּף 0+ 5זקותפ+זב .85 סרח || .1998-99 85וססופהח6פד אס 1ב סהסהחץםס6 9 ,7 זפ 080ס2ן56 חס 80סב קנ 1.35% 8/007.001./ש/ע/ע פרק 5: עיצוב עבור האינטראנט 269 (בעמודים הבאים) בעיצוב המחודש של ס6/חט5, נעשה שימוש בעיצוב מקביל, כדי ליצור מספר גדול של סגנונות חלופיים. עיצובי טיוטה אלה הופיעו באינטראנט ונבחרו על ידי המשתמשים בהצבעה. לרוב, שיטת ההצבעה אינה טובה לעיצוב, אך היה קשה להאמין שהסגנון ישפיע מבחינת השימושיות. לפיכך, החלטנו להגדיל את רמת המעורבות של המשתמשים, ולתת להם תחושה שהם חלק מתהליך העיצוב על ידי עריכת הצבעה. העיצוב הזוכה היה זה עם הסרגל הסגול בהיר בראש הדף ומרקם הרקע החלש בצורת רשת (עמוד 2, למטה). 0 עיצוב ממשק באינטרנט אתה יכול ליצור עיצוב באתר האקסטראנט, שפועל בצורה יותר אינטראקטיבית מאשר האינטרנט, משוס שמשתמשי האקסטראנט ירצו ללמוד את העיצוב שלך. בסופו של דבר, הס קשוריס עס החברה שלך בקשרים עסקיים, והס משתמשים באתר האקסטראנט שלך כדי לסחור אתך או כדי לבצע משימות עסקיות חשובות אחרות. בנוסף, לרוב רק חלק קטן מעובדי השותפיס העסקייס שלך ישתמש בכל יישום אקסטראנט. לדוגמה, משרד המכירות שלהם ישתמש במערכת הרכש שלך, ומחלקת הרכש שלהס תשתמש במערכת הלקוחות שלך. רוב אתרי האקסטראנט מתמחים בצורה זו של עבודה, ולכן המשתמשים כבר יגיעו עס קצת ידע שנוגע לנושאיס של הדפים בהס הס משתמשים. השורה התחתונה, העיצוב והעובד כל השיטות הסטנדרטיות הקשורות לשימושיות חלות על פרויקטי אינטראנט וכן על פרויקטי אינטרנט. הן אפילו קשורות יותר לאינטראנט, משוס שכל שיפור בשימושיות הוא תרומה ישירה לתפוקה השולית של החברה. חלק ממעצבי ה-60/ פועליס על פי ההנחה שיש להס היתר לבזבז את זמן הלקוחות שלהס. אתה לא משלס למשתמשים, ולכן המטרה שלך היא להשאיר אותס באתר שלך כמה זמן שאפשר ולחשוף אותס לכמה שיותר דפים. אינני תומך ברעיון וה משוס שאני מאמין שהלקוחות לא טיפשיס ובסוף הס ישימו לב לדרך שבה נוהגים בהם. בסופו של דבר, המשתמשים יעברו לאתריס אחרים שמתייחסים בכבוד לזמן שלהם, ומאפשריס להס לבצע את מלאכתס מהר יותר ובצורה יעילה יותר. הזמן (והכסף) שמבוזבו על השימוש באתר הוא של המשתמשים, ולא שלך. באתרי אינטרנט ציבוריים, תכונות השימושיות החשובות ביותר הן כנראה יכולת הלמידה ושביעות הרצות הסובייקטיבית. בסופו של דבר, המשתמשים כמעט ואינם נשאריס מספיק ומן באתר מסויס כדי להפוך למשתמשים מנוסים, ולרוב הס ירצו לחזור לאתר רק אס הס חיבבו אותו. השימוש ב-60/ הוא על פי שיקול הדעת הבלעדי של המשתמשים, ולכן עליך לדאוג שהס יהיו שבעי רצון. | 3 1 בי ו 10146 112 0 1 ב 1 // | 0 // ו או6) ?ל 5 065010 // 7 1 ו ו 1 וקה ( 11603316 5 ]0 [6מוויווו1 שמ 7 ( יפי 7 פרק 5: עיצוב עבור האינטראנט ‏ 271 ץש) גו ) ]גוד ו >] וק ששכ .5 טוט 0 לת בשו 6 ]ה 4 0 9 ו0ו00 > וסיוסו1 הש - 1 ו ןמוו ) | עוסוששוות 4-2 % 2 עעיצוב ממשק באינטרנט 4 עיצוב ממשק באינטרנט שביעות הרצון הסובייקטיבית אינה חשובה כשמדובר באינטראנט כפי שהיא חשובה באתרי אינטרנט, משוס שהעובדיס חייבים להשתמש באינטראנט: זה כל מה שעומד לרשותם. עדיין, עדיף ליצור עיצוב משביע רצון, משוס שסגנון האינטראנט הוא הודמנות ליצירת סגנון חברה ולהבעת התייחסות לכל העובדיס. חשוב שהעובדים יבינו שממשק המשתמש של האינטראנט עוצב בקפידה, משוס שהרצון הוא לגרוס להסכמה עס תקני העיצוב שלך. אס המשתמשיס לא אוהבים את העיצוב, הס לא ישתמשו בו בדפיס שלהם, והתוצאה תהיה חוסר אחידות באינטראנט ופגיעה ביעילות העבודה הכללית. בעיצובי אינטראנט, היעילות, יכולת הזיכרון והפחתת השגיאות הופכות לתכונות השימושיות החשובות ביותר. העובדים משתמשים באינטראנט על בסיס יומי, ולכן הס הופכיסם במהרה למשתמשיס מנוסים. יעילות הניווט שלהס באתר ויכולת ביצוע המשימות הן חלק מהמדד של יעילות החברה. בעיצובי אינטראנט עליך להתחשב בנושא היעילות, ולכן מוצדק לרוב, להשקיע הרבה מאמציס בהנדסת השימושיות. לדוגמה, ניקח את ערך העיצוב המחודש שיגרוס להפחתת דקה אחת מהזצמן הממוצע שלוקח לעובד להגיע לחלק חדש באינטראנט. העובדיס מבזבויס לרוב 10 דקות או יותר כשהס מנסיס למצוא דפיס חדשים באינטראנט, ולכן שיפור של דקה הוא מטרת שימושיות צנועה מאוד, וניתן להגיע אליה תוך כמה ימיס בהם יבוצעו עיצוביס מחדש ובדיקות משתמשים. נניח שיש לחברה 1000 עובדים, וכל עובד רוצה להגיע לחלק חדש של האינטראנט פעס בשבוע. העיצוב המחודש יחסוך 1000 דקות עבודה בשבוע (מעט יותר משני ימי עבודה מלאיס). בפרק ומן של שנה, העיצוב החדש יחסוך זמן שווה ערך ל-42% מזמן העבודה של עובד במשרה מלאה. כל ניתוח עלות-תועלת בנושא השימושיות צריך לאמוד את זמן המשתמשיס בהתבסס על עלות התחזקתס המלאה ולא רק על המשכורת שהס מקבלים. עלות ההחוקה המלאה לחברה, שבה איש צוות עובד במשך שעה, אינו רק השכר המשולס לעובד אלא גס עלות הבונוסים, זמן חופשה, שירותי משרד (שטח משרד, ח6065 ס6צחט פ 5 נבחב 5!סס> זְהַהַבּח₪3 | כ 151 588 . פזסוח הסוח החבּ 5 |ב5ו03 חש5 זם+ ו שפח 5וח₪ סטוסטבּ הססבוזס)חו וס הדף הראשי הסופי של עיצוב שנת 1997 של חברת 60 חט5. הסגנון מתבסס על העיצוב שזכה בהצבעה, אך פרטי העיצוב התקבלו מבדיקות שימושיות ועיצוב חוזר, המבטיח תצוגה ברורה וסמלים מובנים. שים לב שלדף זה יש יותר לחצנים מאשר מה שמומלץ לרוב עבור דף אינטרנט. באינטראנט, אתה יכול להרשות לעצמך להרשים משתמשים חדשים, כדי לקבל בסופו של דבר משתמשים מנוסים שיעשו את העבודה בצורה יעילה יותר. פרק 5: עיצוב עבור האינטראנט | 275 עלות ממוצעת מול עלות שולית בעקרון, הזמן המבוזבז על שימוש בממשק משתמש גרוע צריך להיחשב כזמן שולי. לפיכך, הדרך הנכונה בתיאוריה להתחשב בעלות זמן זה אינה העלות הממוצעת של זמן העובדים, אלא העלות השולית של זמנם. לכן יש להשתמש במודל סוחו 6ח/ו 60016 בגישה זו, עליך להעריך מה החברה תרוויח מעובד שמוסיף ערך של שעת עבודה לתפוקה שלו. מעשית, נדיר שניתן לדעת מהם הערכים השוליים, ואפילו להעריך אותם, ולכן נהוג להשתמש בערכים ממוצעים. הדרך הפשוטה ביותר לגזור את עלות העומס הממוצעת של עובד היא לסכם את הוצאות החברה ולחלק את הסכום במספר שעות העבודה שהתבצעו. אתה יכול להחליט אם אתה רוצה להתחשב, נניח, בפגישות צוות כזמן יעיל, אך העניין הוא לא למנות זמן שמבוזבז על סמינרי הכשרה, הפסקות צהריים ופעילויות אחרות שנדרשות אך אינן מביאות תועלת לחברה. 6 עיצוב ממשק באינטרנט חימום וניקיון, מחשבים וכוי), והעלויות הרבות שבהעסקת עובד. למען הפשטות, נניח שהעלות המלאה של העסקת עובד בחברת הדמיונית שלנו היא 580,000 לשנה (יחסית למשכורת המשולמת לו בסך 540,000). בחיסכון של 42% מעלות העסקת עובד, אתה יכול לחסוך סכום שנתי של 533,600 על ידי שיפור יכולת הניווט באינטראנט בדקה אחת לכל דף חדש. אני מעריך שהעבודה על שיפור השימושיות, שתחסוך כ- 533,600 בשנה, תעלה כמה אלפי דולרים (ובטוח שפחות מ- 810,000), ובכך היא מהווה השקעה מצוינת. למעשה, אין פה חיסכון אמיתי מכיון שאין קיטון בהוצאות. גס אס העיצוב החדש יביא לחיסכון של 0 דקות זה יהיה חיסכון על הנייר בלבד. אס בעקבות שינוי העיצוב יפוטר עובד, אז יהיה זה חיסכון אמיתי, אבל זה כנראה לא המקרה. מה שכן יכול להתרחש עקב החיסכון (וגם וה לא ודאי), אס הזמן שנחסך יופנה למאמצי המכירות, אז בהחלט יהיה מקוס לשיפור התוצאות העסקיות, כי ההוצאה קבועה (שכר עבודה). פורטל החברה רשת האינטראנט שלך צריכה להיראות דומה לתשתית המידע של החברה. רשת זו אינה רק דרך להעביר נתוניס משרתים למחשבי העובדים, ומטרתה אינה לתת לעובדיס דרך לדפדף בתפריט המזנון. האינטראנט יכולה לשרת פונקציות עבודה אמיתיות רבות. היא יכולה להפוך לדרך העיקרית בה העובד מתקשר עם אנשים בקבוצות אחרות ולדרך בה הוא יכול למצוא את המידע הדרוש לביצוע עבודתו. חברות גדולות רבות הפכו את ערוצי התקשורת שלהס למסורבלים, וגרמו למשתמשיס להתבודד במחלקות שלהם, ולא לדעת מה קורה במחלקות אחרות. דבר ה מביא לכפילות עבודה, משוס שאף אחד לא יודע אם מישהו כבר עשה עבודה מסוימת, וכן עבודה אחרת מבוזבזת, משוס שהיא נעשתה כדי להשיג מטרה שונה מהמטרה האמיתית (והעובד לא ידע על כך). יעילות החברה משתפרת פלאיס כשהתקשורת ברורה יותר, והאינטראנט יכולה להיות תשתית התקשרות הזו אס - ורק אס - היא תתוכנן כך שהיא תקל על העובדים למצוא את המידע לו הס זקוקיס. האינטראנט יכולה לתמוך בתקשורת מראש החברה כלפי מטה על ידי פרסוס החלטות הנהלה, הצהרות חזון (6ח5%8:0706 חסופו/) ודיוני אסטרטגיה. כשעובד ברמה הנמוכה כותב תוכנית מוצר או הצעת שיווק שבנויה על אסטרטגיה ברמה העליונה, הוא יכול לכלול קישור לגרסת האינטראנט של מסמך האסטרטגיה המתאים, ובכך להקל על משתתפיס אחרים בפרויקט להתוודע לאסטרטגיה זו במידת הצורך. קישוריס מעין אלה יכוליס לשלב הנחיות אסטרטגיות בצורה קרובה יותר למרקס החברה מאשר כל מזכר שהוא. האינטראנט מאפשרת לכולס להתחבר ישירות לגירסה המקורית של הצהרות החזון של נשיא החברה בצורה יעילה יותר מאשר במצב בו הנשיא מציג את החזון בפני שורה של סגניס, שכל אחד מהס מפרש בעצמו את מה שנאמר, ומעביר פירוש זה לאנשי הצוות שלו, שצריכיס להעביר את המידע לצוות שלהם, וכן הלאה. היתרון העיקרי של האינטראנט כתשתית נתוני החברה שוכן בתקשורת הכלל ארגונית. האינטראנט מאפשרת להשיג מידע מארגוניס אחריס בלי להטריח היפטר מדואר אלקטרוני הדואר האלקטרוני הופך להיות גורם מכשיל ליעילות. בחלק מהחברות יש עובדים במשרה מלאה, שכל תפקידם הוא לעבור על תיבת הדואר הנכנס, ולענות לכל ההודעות של אותו היום. העובדים בחברות אלו צריכים לעמול קשה כדי להספיק לעשות עבודות אחרות. הדואר האלקטרוני הפך לנפוץ משום שיש לו יתרונות בכך שהוא מהווה ערוץ תקשורת מעבר לגבולות הזמן והמקום. הוא מהיר וקל לשימוש, וניתן לשלוח אותו בקלות לצד השני של כדור הארץ, בדיוק באותה הצורה בה ניתן לשלוח אותו לשכנך. אתה יכול לשלוח דואר אלקטרוני מתי שתרצה, 24 שעות ביממה, והוא יגיע לנמען בזמן בו הוא יחליט לקרוא את ההודעה. אין יותר צורך להרים טלפון כדי לוודא שההודעה הגיעה. כמות קטנה של דואר אלקטרוני טובה לעסקים, אך כמות גדולה של דואר יכולה להיות קטלנית. אחת מהמטרות העיקריות של רשתות האינטראנט היא להיפטר מדואר אלקטרוני מיותר, כלומר, רוב רשימות התפוצה וכן דואר אלקטרוני שמגיע לכל העובדים. הרבה יותר עדיף למקם את המידע בתיקיית אינטראנט מאורגנת היטב ולהוסיף קישור אליה מהדף הראשי כל זמן שהודעה זו אקטואלית. יש ליצור אינדקס של המידע המאוחסן באינטראנט וכן להקל על החיפוש בו, כך שכל העובדים ידעו כיצד למצוא אותו בשעת הצורך. בניגוד לכך, כל דבר שנשלח בדואר אלקטרוני יוצר לכל עובד טרחה מיותרת - צורך לארגן, ליצור אינדקס ולאחסן את המידע. זהו מאמץ חוזר מיותר. ובנוסף, תוכנות הדואר האלקטרוני אינן טובות בארגון ואחזור נתונים, ולכן העובדים לא יוכלו לרוב לנהל את המידע שהם מקבלים בהודעות הללו. פרק 5: עיצוב עבור האינטראנט 277 לכל הפרויקטים אמור להיות דף אישי עם קישורים לדפי האינטראנט האישיים של העובדים שקשורים בפרויקטים אלה. 8 עיצוב ממשק באינטרנט אף אחד מעובדי הארגון, ולכן העובדים נוטיס ללכת אחרי התחושות שלהם, ולבדוק אס המידע מהמחלקות האחרות יעזור להס. לעומת ואת, אס הדרך היחידה להשיג מידע היא להגיש בקשה או לקבוע פגישה בהתראה של לפחות חודשיים עם מנהל טרוד, שלא מעוניין לעזור לך, תוכל לשער שיעילות הפגישה לא תהיה גדולה. קישורי טקסט מספקיס תמיכה מצוינת לאיתור מידע שנמצא בחברה. אני ממליץ לפתוח דף אישי באינטראנט לכל עובד, עס קישוריס למחלקה שבה הוא עובד, וכן קישוריס לדפי פרויקט, עבור כל הפרויקטיס שהוא קשור אליהם, או שהיה קשור אליהס בשניס האחרונות. חלק גדול מהידע שנמצא בארגונים קייס בצורת קשרים אישיים, ולרוב מישהו יודע שמישהו אחר עשוי להיות האדס הנכון לשאול אותו בנושא מסוים. בכניסה לדף האישי באינטראנט של אותו אדס שיודע את התשובה, ניתן לרוב לאתר את המידע הדרוש, על ידי מעבר לקישוריס במחלקות המתאימות או לפרויקטים המתאימים. בנוסף לקישורים, הדפיס האישייס של העובדיס באינטראנט צריכים להיות מוצגים (עס רוב תוכנם) כדפים אישיים נגישיס לציבור, כולל תמונת האדס ותיאור כללי של הרקע והניסיון שלו. מידע זה יסייע לעובדיס האחריס להתכונן לפגישות, ויאפשר בצורה זו רכישת ידע מקיף יותר מזה שנרכש בתכתובות דואר אלקטרוני ובהודעות של קבוצות דיון. בדומה לכך, לכל הפרויקטיס אמור להיות דף מיוחד עס קישוריס לדפי האינטראנט האישייס של העובדיס שקשורים בפרויקטים אלה. דפי הפרויקט אמורים, כמובן, להכיל קישוריס לכל תוכניות הפרויקט ולדוחות שאינס בסיווג גבוה. רצוי להוסיף גס קישוריס לחומר סודי, אך יש להוסיף הערה שמציינת כי הגישה ניתנת לבעלי הרשאה מתאימה בלבד. האוהרה הזו תמנע מהמשתמשים אכזבה כשינסו לגשת למידע שאין להס גישה אליו. בקרת הגישה המעשית יכולה להתבצע על ידי הגנת סיסמה, או על ידי כל סכמת אימות זמינה ברשת החברה. בנוסף, יש לפתוח דף לכל יחידה ארגונית, שבו יהיו קישורים לדפי העובדיס בקבוצה (כולל הבוס), וכן קישורים ליחידות הארגוניות מעל ומתחת ליחידה הנוכחית בהיררכיה הארגונית של החברה. דפי הקבוצות והמחלקות צריכיס גס הס להכיל קישוריס לדפי הפרויקטים הראשיים שהם מנהלים. כל הקישוריס המצטלביס הללו משרתיס שתי מטרות: הס מקלים על העובדיס במחלקות אחרות במציאת המידע שהס זקוקים לו, בלי לדעת את הדרך המדויקת שבה בנויה המחלקה, והס משפרים את התקשורת בין עובדי המחלקות. תחזוקת האינטראנט הדפיס הרבים והשונים באינטראנט דורשים תחזוקה. דבר זה נכון גס לגבי דפי העובדיס האישיים וגם לדפי הפרויקטים. אם רשת האינטראנט תפגר אחרי ההתקדמות הנוכחית של הפרויקטים, העובדיס יפסיקו לסמוך עליה לצמיתות, והיא תיכשל בתפקידה כתשתית מידע ארגונית. אס זה יקרה, אתה תשוב לימיס האפלים וחסרי התועלת, בהס התקשורת נעשתה על ידי שמועות. יש לראות בתתחזוקת האינטראנט חלק רגיל מהעבודה. אהו חלק העבודה שיבטיח כי האחרים יוכלו לנצל את מה שכבר עשית. לרשתות האינטראנט יש נטייה לגדול מאוד בזמן קצר, משוס שהמחלקות השונות מתחילות להעביר את כל תוכניות הפרויקטיס והדוחות שלהן למצב מקוון. לפיכך, יש צורך עליון במנוע חיפוש משוכלל. מנועי חיפוש באינטראנט מאפשרים לעובדים למצוא דברים, גסם אס אין להס שמ מושג מי בארגון עשוי להיות אחראי על נושא מסוים. כמו באינטרנט, קישורי הטקסט טובים, אך לא מספיקים. יש צורך גם במדריכים וחדשות. שלושת מרכיבי התשתית הגדולים: מדריך, חיפוש וחדשות דף ראשי של שער אינטראנט אמור להכיל שלושה מרכיבים: %> החשוב מכל הוא מדריך ההיררכיה שמציג את מבנה כל תוכן אתר האינטראנט. חלק וה של האינטראנט נקרא לעיתים ''ססחהּצ וחווא'י. ניתן ללמוד רבות מעיצוב אתרים כמו ססח8צ ו-081ח100%5, משוס שהס משקיעים יותר מאמציס בשיפור השימושיות מפרויקטי אינטראנט. אך אין ספק שחובה לבנות את היררכיית הנושאים לפי המבנה המקומי, משוס שעליה לשקף את התוכן והענייו של רשת האינטראנט הספציפית. פרק 5: עיצוב עבור האינטראנט 279 0 עיצוב ממשק באינטרנט 4% שדה חיפוש שמחובר למנוע חיפוש המכיל את אינדקס כל הדפיס שברשת. בניגוד לחיפושי אינטרנט של קבוצה מסוימת, על מנוע חיפוש באינטראנט לשקף את הידע הזמין אודות החשיבות היחסית של אזוריס שוניס ברשת. לדוגמה, הוא יכול לסמל דפים רשמיים בסמל מיוחד. %> חדשות עדכניות אודות החברה ונושאיס שמעניינים את העובדיס. לרוב, הדף הראשי של האינטראנט יכול להחליף עיתוני עובדיסם מסורתיים, שטף הודעות דואר אלקטרוני ומזכריס, שמפחיתיס את היעילות בחברות רבות. איחוד רשימות הידיעות עס ארכיון ומנוע חיפוש טוב מבטיחיס שהעובדיס יוכלו לאחזר מידע כפי שנדרש, ולהשתחרר מהצורך לאחסן ולטפל בעותקיס מקומיים (משימות יקרות מאוד, אס נתחשב ביכולות הניהול הגרועות של תוכנות הדואר האלקטרוני הקיימות כיוס). תקני עיצוב באינטראנט העקביות חשובה לכל ממשקי המשתמשים, אך היא חיונית כשמדובר בשימושיות באינטראנט, משוס שהמשתמשים ידפדפו בכמות גדולה של דפים כל יוס. אס כל הדפים היו מכילים שיטות דומות למציאת כל סוג מידע ולשימוש בקישורים, העובדיס שלך היו יעילים הרבה יותר בשימוש שלהם באינטראנט. יש חשיבות רבה למראה סטנדרטי של מבנה הניווט ובורת התצוגה, כדי לגרוס למשתמשים לבצע את משימתם מהר יותר ולמנוע מהס ללכת לאיבוד. לרוע המזל, דפי ט60/ לא הופכים מעצמס לעקביים. אס תציג לעובדים עיצוב מצוין, לא בטוח עדיין שהס יאמצו אותו בדפיס שלהס עצמם. מנגד, נראה שה-65/ גורמת לרצון ליצור כל דף בצורה שונה עד כמה שניתן, כשהתוצאה הרת אסון לעניין השימושיות. כדי שאתרי האינטראנט ימצו את הפוטנציאל שלהס כתשתית מידע ארגונית, החברה שלך חייבת להגדיר תקן עיצוב יחיד, ולקדס אותו באופן מסיבי בעזרת תוכנית מקיפה. כמובן שבנוסף לכך, כל קורסי ה-65/ בחברה צריכים לכלול הוראות לשימוש נכון בתקן העיצוב של האינטראנט. כפי שצוין בתחילת הפרק, תקני עיצוב האינטראנט צריכיס להיות שוניס מאלה של עיצוב אתרי ה-60/ החיצוניים (האינטרנט). הניסיון מראה שחלק מהמשתמשיס התקשו בהבנת ההבדל בין שני סוגי אתריס אלה, ולכן עליך להסביר זאת בצורה ברורה בכל המצגות והחומר הכתוב. אל תעתיק אלמנטי עיצוב מהאתר החיצוני (אינטרנט) לדפים הפנימיים (אינטראנט). תקן עיצוב האינטראנט צריך לציין לפחות מבנה ניווט עבור מרחב המידע שלך. אני ממליץ על כך שכל דף יכלול לוגו אינטראנט מפורש, כדי להדגיש את הסטטוס הפנימי של הדפים הפנימיים, ולהבחין בינס לבין המידע הזמין לציבור באינטרנט. לוגו וה אמור להיות קישור לדף הראשי של רשת האינטראנט. בנוסף, לכל דף אינטראנט צריך להיות לחצן חיפוש, משום שהחיפוש חשוב באינטראנט כמו שהוא חשוב באינטרנט. הוספת רכיבי עיצוב תלויה בצרכי כל חברה לגופה: חברות גדולות ידרשו יותר תמיכת ניווט מאשר חברות קטנות יותר. תקן עיצוב האינטראנט צריך לכלול גס את המבנה המומלצ, וסידור כל אחד מסוגי הדפים הראשיים. לרוב מדובר בדפי העובדים, דפי מחלקות, דפי פרויקטים ודפי דוחות ומזכרים, שיש להפוך את כולס לזמיניס בצורת תבניות (8%65|סוח6ד). בחברות רבות יש סיכוי שיהיו עוד סוגים של דפיס נפוצים, שגס להס יש לספק תבניות בתקן. התקן אמור להיות זמין באינטראנט עצמו, רצוי בעזרת קישור ישיר מהדף הראשי של רשת האינטראנט. התקן אמור לציין ולהסביר את רכיבי העיצוב הדרושים, המומלצים והאופציונליים, ולתת שפע דוגמאות לכל אחד מהם. הניסיון מראה שהמשתמשיסם סומכים יותר על הדוגמאות מאשר על המפרט הרשמי, כאשר הס משתמשים בתקני העיצוב הללו, ולכן עליך לשיס לב לכל המשמעויות שבדוגמאות שלך. אחרת, אתה עלול לגלות אלפי דפים שנבנו על פי דוגמה אחת מתוך התקן, ובנוייס לא רק לפי העניין שדוגמה זו היתה אמורה להדגיס, אלא גם על פי תכונות פחות רצויות שנמצאות בה. הנחיות לכתיבת תקנים על תקן עיצוב הממשק באינטראנט: *> להכיל דוגמאות רבות, משוס שהמעצבים מעדיפים ללמוד מדוגמאות מאשר מהסברים כתובים. פרק 5: עיצוב עבור האינטראנט 281 ו חשוב ליצור מקום מרכזי שמאחסן את כל רכיבי העיצוב הנפוצים. האתר לא רק ייראה טוב יותר אם הוא יעוצב על ידי מעצבי 60/ מיומנים, הוא גם יהיה עקבי יחסית לעיצוב האינטראנט המקיף, ויתרום למראה ותחושה מקצועיים ועקביים בדפים השונים. תרשים זה מראה את התבליט "\סח" של 60/חט5. שים לב שהוא משתלב מצוין עם רכיבי העיצוב האחרים של האתר המוצגים בפרק זה. 2 עיצוב ממשק באינטרנט > לוודא שהדוגמאות עומדות בתקן מכל הבחינות, ולא רק מהבחינה בה אתה מתכוון להשתמש בהן (המעצביס עלוליס להבין מהן דבריס נוספיס). 6% להכיל רשימות בדיקה (6066655) מלאות ומקיפות ככל האפשר (המעצבים מעדיפים לסרוק רשימה במקוס לקרוא טקסט). לדוגמה, זו יכולה להיות רשימה של כל הרכיבים שחייבים להופיע בכל דף, או רשימת מונחיס מועדפים. % להיבדק על ידי מומחי תקנים בבדיקות תקנים רשמיות, ולקבל ייעוצ במקומות בהס המעצביס מתלבטים בקשר לפירוש התקן (אם אין דרך קלה לפנות בשאלות, כל מעצב ימציא את התשובות בעצמו - תוכל להיות בטוח שכל תשובה תהיה שונה מחברתה). > להיתמך על ידי תוכנית שינוי פעילה. לא מספיק להמתין לשאלות. עליך לחפש פרויקטים ולבקר בהם, כדי לתת להס את חוות דעתך בקשר לעמידה שלהס בתקן, וכדי להעיר (בעדינות) על העיצוב שלהם ולהציע תיקוניס לסטיות מהתקן. להוות תיעוד ייחייי בשליטת מנהל תקנים, שמעדכן את התקן בכל פעם שצ> נושא חדש. 6% להתאים לתקני העיצוב הפופולריים ביותר, או להדגיש במפורש את ההבדלים בין התקן שלך לתקניס האחרים. *> להיעזר בכלי פיתוח ותבניות שמקלות על ההתאמה לתקן, מאשר להטמיע עיצוב לא סטנדרטי. % להכיל אינדקס טוב (ואולי גם מודפס), או יכולת חיפוש טובה שנתמכת על ידי קישורי טקסט לכללי התקן. חלק שחשוב במיוחד בתקני האינטראנט הוא היכולת להגיע לכל אחד בחברה, משוס שלכל מחלקה יש נטיייה להתעלם מהוראות כלליות שמגיעות מהסגל הגבוה. עובדי המחלקה עושיס ואת לרוב בטענה ש-י'אנו שוניס, ואותס מנהלים גבוהיס לא מכיריס את המצב שלנויי. נכון, אך כל המחלקות מיוחדות, והמערכת היתה נראית כתוהו ובוהו אס לכל עובד היתה אפשרות לשנות את ההוראות בגלל נסיבות מיוחדות. לרוב רמת השימושיות הכללית גדלה כשהמערכת עקבית. ישנס מקריס מסוימיס בהס הנסיבות כל כך מיוחדות עד שיש להרשות מידה 7 | 15 זה בעיצוב המחודש של 6₪//חט5 משנת 1997, נטשנו את התקווה לשליטה בעיצוב תוכן הדף העיקרי. בעיקרון, תקן העיצוב באינטראנט אמור לציין רכיבים נוספים רבים, אך הגבלנו את עצמנו לסרגל הכותרת. הכותרת הסטנדרטית של 65/חט5 מורכבת משלושה סרגלי ניווט. הסרגל העליון כולל את הלוגו של 60/חט5, שמשייך את הדף לרשת האינטראנט ולא לדף האינטרנט. ללוגו יש גם שימוש בנוסף, כקישור לדף הראשי של ס6/חט5. הסרגל העליון מכיל גם שם אתר משנה וסמל שמזהה את החלק ב-60/חט5 בו המשתמש נמצא כרגע. השם והסמל מקשרים לדף הראשי של אתר המשנה. סרגל הניווט האמצעי מכיל סדרה משתנה של לחצנים. לחצני שוחסו] 60/חט5 ו-ח6ז568 מופיעים תמיד ומקשרים לדף הראשי של 60/חט5 ולדף החיפוש, בהתאמה. הסיבה להצבת לחצן 6וחסו היא שיותר מדי גולשים לא מבינים שהלוגו הוא גם קישור לדף הראשי. לחצן ח6ז568 מעביר את הגולש למנוע החיפוש הכללי של 65/חט5, אלא אם יש לאתר המשנה הנוכחי מנוע חיפוש מקומי משלו, ובמקרה מעין זה הקישור יוביל אל המנוע המקומי (ואז יש להציב בדף החיפוש המקומי קישור לחיפוש הכללי של סס/חטפ). כתלות בטבעו של אתר המשנה, לחצנים אופציונליים מכילים מפת אתר (לא מוצג) ולחצן שוסח 5הח/. לבסוף, סרגל הניווט המרכזי עשוי לכלול את סמלי הדפדוף (קדימה ואחורה, בצורת חץ לימין וחץ לשמאל בהתאמה) המוצגים בדוגמה זו. לחצני הדפדוף טובים לדפדוף תוכן רציף. סרגל הניווט השלישי הוא מציין תוכן והוא מפרט את רמות ההיררכיה בין הדף הראשי של ס6//חט5 לבין הדף הנוכחי. שמה של כל רמה הוא קישור לדף הראשי שלה. פרק 5: עיצוב עבור האינטראנט 283 אם אתה מפיץ את עיצוב האינטראנט שלך לגורמים חיצוניים שיעשו בו שימוש, חשוב לאפשר לאותם אנשים גישה מלאה לתקן עיצוב האינטראנט והתבניות שלך. 4 עיצוב ממשק באינטרנט מסוימת של חוסר עקביות, אך יש להגביל את המקרים הללו למקריסם עס סיבה טובה מאוד (רוב הסיבות הטובות אינן טובות מספיק). לבסוף, דע כי לתקן עצמו יש ענייני שימושיות. דבר זה נכון בין אס התקן מוטבע כאתר ס6/ אינטראקטיבי עס קישורי טקסט, ובין אס הוא מופיע כמסמך מודפס. לפיכך, יש לנהל את בניית תקן עיצוב יחד עס המעצבים, כדי להבטיח שהס יוכלו להשתמש בו. הפצת עיצוב האינטראנט לגורמים חיצוניים אס אתה מפיץ את עיצוב האינטראנט שלך לגורמיס חיצונייס שיעשו בו שימוש, חשוב לאפשר לאותס אנשיס גישה מלאה לתקן עיצוב האינטראנט והתבניות שלך. הדרך הטובה ביותר לעשות ואת היא ליצור אתר אקסטראנט (060ח0718א6) שמשתמשי העיצוב המורשים יוכלו להיכנס אליו, לקרוא את התקן ולהוריד את הדוגמאות. לחילופין, אתה יכול ליצור גירסה מודפסת של התקן ולתת אותה למעצביס חיצוניים, אך זו אינה הדרך המומלצת. הגירסה המודפסת לא מתעדכנת, לרוב אין בה הדגמות צבעוניות, וקשה לבצע עליה חיפוש (אלא אס אתה משקיע משאבים ליצירת אינדקס מקצועי על ידי מומחה לעניין). לא משנה מה תעשה, הגורמיס עמס אתה עובד צריכים יכולת להוריד את התבניות שלך, ולטעון את הדפיס שהם יצרו. החלפת קבצי המחשבים הללו יכולה להיעשות באמצעות דואר אלקטרוני, אך עדיף להשתמש באקסטראנט. באחד מהפרויקטים שלי, השתמשתי בשירותי גרפיקאי שאיפשר ללקוחות שלו גישה לדיסק הקשיח של המחשב שלו באקסטראנט. לאורך הפרויקט כולו, יכולתי כלקוח לצפות בגירסה הפעילה המעודכנת ביותר של כל הסמליס ללא צורך בהמתנה הכרוחה במשלוח קבציס בדואר האלקטרוני. ניהול גישת ה-65צ של העובדים מחלקות מערכות מידע אחראיות לרוב על תמיכה בגישת משתמש הקצה ל-60//. תמיכה זו קלה בהרבה, אס ניתן ליצור תקן של דפדפן 60/ יחיד בגירסה אחת. אתה יכול לנהל משא ומתן על תנאי רישוי אתר עבור כל תוכנה שאינה חופשית, וצוות התמיכה שלך יודקק לפחות תרגול והתמחות. בנוסף, גרסת דפדפן אחת מקלה על יצירת תוכן אינטראנט. כל הכותבים ידעו באיזו גירסה של | ד 655) ואד להשתמש, תוך ידיעה ברורה שהקוראיס יראו דפיס שנראיס כמעט וּהים למה שהכותב עצמו רואה על המסך. לרוע המזל, לא תמיד ניתן ליצור תקן של דפדפן יחיד בגירסה אחת. לרוב, גרסת הדפדפן המועדפת לא תהיה ומינה עבור כל הפלטפורמות השונות שיש בחברה גדולה, ולכן חלק מהמשתמשים ייאלצו להשתמש בדפדפן אחר, או לפחות בגירסה אחרת. גס אס ניתן להתגבר על כל הענייניס החוקייס או הטכניים, עדיין תהיה קבוצה של משתמשיס עס דפדפנים אחרים. לכל קבוצה שיוצרת תוכן עבור אתר האינטרנט תהיה סיבה טובה להוריד גרסאות בטא של גרסאות חדשות, הרבה לפני שתרגיש נוח מספיק להכניס גרסאות אלו אל מעבר למערכת ה-!|8ו6זו= שלך. אחרי הכל, כל אדם שהמטרה שלו היא לעצב או לתכנןו עבור ה-פ6/ זקוק לניסיון אישי עס טכנולוגיה חדשה, ולכן עליו להפעיל תוכנה שזה עתה יצאה לאור על המחשב שלו, ולהשתמש בה כדי לראות איך נראים דפי טס6/ שיצר. בנוסף, תמיד יהיו משתמשים עס מחשבים ישנים או עס התקנים לא שגרתיים שירצו להתחבר מהבית או ממכשיר סק בזמן שהס נוסעים. למשתמשים רביס מעין אלה לא תהיה ברירה, אלא להשתמש בגרסת דפדפן לא סטנדרטית או בגירסה ישנה מאוד. לפיכך, כל תקן יצטרך לשלב חלק מסויס של אי תאימות, ולאפשר למשתמשיסם לעבוד עס דפדפניס חלופייס. תקני חומרה בנוסף לתוכנה, ישנס גם יתרונות בהגדרת תקן לכמה נושאיס שקשוריס בחומרה. אס אתה יכול להבטיח רוחב פס מינימלי אפילו למשרד המרוחק ביותר, מעצבי האינטראנט שלך יוכלו ליצור יישומיס אינטראקטיביים מתוחכמים ומשוכללים יותר. בנוסף, אס תיפטר מהמסכים הקטנים, ותיצור בחברה תקן מינימלי של מסך גדול יחסית, מעצבי האינטראנט יוכלו לעצב דפיס גדוליס ושימושייס יותר, מאלה שיכלו לעצב עבור מסכיס קטנים. תוספת העלות שברכישת מסכים גדולים יותר תחזיר פרק 5: עיצוב עבור האינטראנט | 285 6 עיצוב ממשק באינטרנט את עצמה במונחים של שיפור היעילות של אותס העובדיס שעבדו עס מסכים קטנים מדי. סביר להניח שתצליח לשפר את היעילות, משוס שהתכונות הבסיסיות המשותפות של כל סוגי המסכיס הללו מאפשרות עיצובי אינטראנט טוביס יותר שיועילו לתפוקת כל עובדי החברה. ביוני 1999, המגזין פחסטקוחס6 06 פרסס מחקר שימושיות שנעשה על מגוון מסכי מחשב, שהראה כי מסכי "19 גורמיס לשיפור של כ-17% ביעילות העובד לעומת מסכי "17. כשהעובד רואה יותר נתוניס במבט אחד, הוא מבצע מהר יותר את כל העבודות שקשורות במחשבים. החיסרון היחיד של מסך גדול הוא שחלק מהמשתמשיס כבר התרגלו לעבודה עס מסכים קטנים, והם מגדילים את חלונות הדפדפן שלהס עד שהוא תופס את המסך כולו. זוהי שיטה גרועה מאוד אס יש ברשות העובד מסך גדול. עדיף לפתוח שני חלונות, אחד ליד השני, באותו השטח. חלון גדול אחד יגרוס לטקסט להיות מוצג בשורות ארוכות מדי לקריאה נוחה. לפיכך, מחלקת ה-15 צריכה לספק לעובדים טיפים כיצד להשתמש בכמה חלונות בו-₪מנית כשהס מקבליס את המסך הגדול שלהם. בנוסף, יצרני דפדפנים צריכיס להגדיר מחדש את משמעות הלחצן ''26וחאהוח'י, כדי לתת לחלון גודל שימושי ולא גודל של מסך מלא. ברירות המחדל של הדפדפן במצב הטוב ביותר, המשתמשים אמורים לכוונן את הגדרות הדפדפן שלהס מערכי ברירת המחדל לערכיס שמתאימיס להם, על פי רמת המומחיות שלהס במחשבים ועל פי הרגלי הגלישה שלהם. אני ממליצ לאפשר למשתמשים לשנות את הגדרות ההעדפות שאתה הגדרת עבורס, משוס שאנשים שונים וקוקיס לדבריס שוניס, אך אני גם ממליצ בחוס לספק למשתמשי הקצה ערכה של הגדרות ברירת מחדל. לרוע המזל, הניסיוו מראה שמשתמשיסם רביסם לעולס לא מכווניס את הגדרות ברירת המחדל של דפדפן ה-65) שלהם. אינני יכול להגיד כמה הודעות דואר אלקטרוני כבר קיבלתי על כך שמשתמשיס מקבליס 'ידפים אפוריסם'י לפני שהתחלתי להגדיר צבע רקע לבן באתר האישי שלי, למרות שרקע אפור היה בייאשמתיי המשתמש עצמו, משוס שהוא לא שינה את הגדרת צבע ברירת המחדל של הדפדפן. כדי לשנות את צבע הרקע ב- 155: בחר בתפריט 6%חוס%ח1 5 > 5פחהסשק0. בכרטיסיה !660613 בחר פיוסוס60. התנהגות המשתמשים צפויה. וכור כי ה-69/ אינה דרך חייס עבור המשתמש הממוצע. רוב הגולשיס רוציס פשוט ללחו על כמה קישורים, ולקרוא כמה דפים - הס אינס רוציס להתעסק בטכנולוגיות ה-60/ עצמן. לדפדפניס יש תיבות הגדרה רבות, עס הרבה הגדרות ץאסזם, 60066 ו- 68606 זרות לחלוטין למשתמש הממוצע (הגדרות שמנהלי ה-15 היו מעדיפים שלא ישונו על ידי המשתמשים). כתוצאה מכך, משתמשים רביס מעולס לא שינו את הגדרות ההעדפות, ולפיכך הס נידונו לעבודה לא נוחה, אלא אס מחלקת 15 תסייע להם. לרוע המלזל, יצרני הדפדפנים מעונייניס לספק את הדפדפניס שלהס עס הגדרות ברירת מחדל שמעודדות התנהגות לא טובה של משתמשים, בצורה שמושכת את הגולשיס הבלתי מנוסיס אל שירותי היצרניס. יש להגדיר את העדפות ברירת המחדל הבאות : > דף הבית שמופיע כברירת מחדל צריך להיות הדף הראשי של אתר האינטראנט שלך. 8חווהוחט6 החסנ מחברת 5אזסש6 |הוחסקס הציג מחקר מעניין שנוגע להגדרות ברירת המחדל של דפדפנים בכינוס 6/)/ע/ (אפריל 1997). בחברות שהוא חקר, 13% מרוחב הפס הכולל של האינטראנט נתפס על ידי גולשיס שהורידו את הדף הראשי של 6056806 בכל פעם שהפעילו את הדפדפן שלהם, משוס שרוב הגולשים לא שינו את הגדרות דף הבית שלהם. ניתן להגדיר את הדפדפן כך שדף הבית יהיה שונה מהדף הראשי של 6 או של אספסזסווא אך הבעיה נשארת והה. המשתמש הממוצע לא צריך לבקר את אתר יצרן הדפדפן שלו, משוס שמחלקת 15 אמורה לטפל בשדרוגים. רוב המשתמשים ירוויחו הרבה יותר מכך שהס יקבלו חשיפה קבועה לדף הראשי הפנימי של החברה שלהס עצמם, בו מופיעות חדשות והודעות לעובדים. 6% הסר קישורים, סימניות, לחצנים, ערוצים והפניות אחרות, שמסיחות את הדעת לתוכן שמסופק על ידי יצרן הדפדפן או על ידי שותפיו העסקיים. אתה יכול להוסיף סדרה של קישוריס לאתריס שמועיליס לחברה שלך אשר נבחרו בקפידה, אך אין צורך לבזאבז את זמנס של פרק 5: עיצוב עבור האינטראנט| 287 8 עיצוב ממשק באינטרנט העובדיס שלך בכך שתאפשר לדפדפן להעביר אותס לאתריס שנכללו בו, רק משוס שספק התוכן שילס כסף ליצרן הדפדפן. 6% הגדר את הגדרות הדואר האלקטרוני של הדפדפן, כך שישתמש בתוכנית הדואר האלקטרוני שמסופקת על ידי מחלקת ה-15 של החברה. בחברות מסוימות, יש טעם להשתמש בתוכנה של יצרן הדפדפן, אך אס אתה מעדיף פתרון אחר לדואר האלקטרוני, המשתמשיס יתבלבלו אם הם ייזרקו אל תוך ממשק משתמש שונה כשילחצו על קישורי :0ש!ו8חח. % יש להגדיר שירות חיפוש יחיד ללחצן ברירת המחדל של החיפוש ב-60/). אס החיפוש באינטראנט שלך מגיע מאחד ממנועי החיפוש הגדוליס של האינטרנט, עליך להגדיר את לחצן החיפוש של הדפדפן ב-60/ כך שישתמש באתר הציבורי של המנוע, כדי לתרוס לקשר בין אתר האינטראנט וחיפושי האינטרנט. אס אותו מנוע החיפוש מבצע חיפושים פנימיים וחיצוניים, רוב הסיכוייס שהמשתמשים ילמדו את תחביר החיפוש שלו וירכשו לעצמם מיומנויות חיפוש טובות יותר. אם אין לך אפשרות חיפוש באינטראנט, או אס החיפוש באינטראנט איננו אחד ממנועי החיפוש של האינטרנט, בחר לך את אחד ממנועי החיפוש של האינטרנט כברירת המחדל לחיפוש. מומלצ מאוד לבחור מנוע חיפוש יחיד ולדבוק בו. אס תאפשר הגדרת ברירת מחדל שמחליפה בין מנועי החיפוש השוניס, המשתמשים לעולם לא ילמדו מהי הדרך הטובה ביותר להשתמש בכל אחד מהמנועים הללו. משתמשים שאינם בקיאים בענייניס טכניים אינס מביניס שתחביר ותכונות החיפוש שוניס בין מערכות המנועיס, ולכן הס יאחדו את רעיונות החיפוש שהס אספו ממנועי חיפוש רבים. התוצאה תהיה הרסנית. ברירות מחדל של מנועי חיפוש אני לא מתכוון להמליצ על מנוע חיפוש מסויס שמיועד לאינטרנט, משוס שמנועי החיפוש משתניס כל הזמן. אלה שטובים היוס יכוליס להפסיד במרוצ על האיכות מול מנועיס אחרים תוך כמה חודשים. עם ואת, ישנה דרך פשוטה למדי לבחירת מנוע חיפוש טוב. כל שעליך לעשות הוא לבחור בכחמש בעיות בדיקות המשתמשים של עיצובי האינטראנט נעשות באותה הדרך בה מתבצעות בדיקות המשתמשים של אתרי ה-60/ החיצוניים. טיפוסיות בהס נתקליס אנשיס בתחוס שלך ולנסח שאילתות קצרות (שתיים עד שלוש מילים) לכל בעיה. הקלד את השאילתות הללו אל כל אחד ממנועי החיפוש המוביליס וצפה בעשרת הקישוריס הראשוניס שיתקבלו. לכל אחד מעשרת הקישוריס הראשונים, תן ציון 0-3: 0 - עבור קישוריס שאינס קשוריס לנושא: 1 - עבור קישוריס שיש בהס תועלת מסוימת. 2 - עבור קישורים יעילים יותר. 3 - עבור קישוריס שימושיים (יחסית לבעיה). סיכוס עשרת הדירוגיס הללו של חמש הבעיות יהווה ציון שייצג את איכות ביצועי מנוע החיפוש. עליך לבדוק ארבע תכונות נוספות מעבר לאיכות החיפוש המוחלטת : 6% מספר השניות מרגע הקלדת כתובת ה-081 של מנוע החיפוש ועד שהדף הראשון הורד במלואו. % חשיבות שדה הקלדת החיפוש בדף החיפוש (חלק ממנועי החיפוש מעמיסים את הדפים שלהם בדברים מיותרים, כדי להסיח את דעת המשתמשיס מהמשימה העיקרית שלהם וללכוד את מבטם - בכך הס גורמים לחוסר יעילות). % מספר השניות מרגע הלחיצה על הלחצן ''ח6ז508יי ועד שדף התוצאות סייס להיטען. 6% ערך צפוי של רשימת תוצאות החיפוש (כלומר, עד כמה ניתן להעריך את איכות כל דף ברשימה מבלי לצפות בו). אס תשלב את חמש ההערכות הללו, תקבל מושג טוב באיזה מנוע חיפוש עליך לבחור. אני הייתי נותן משקל של 50% לאיכות החיפוש, 10% לכל זמן הורדה ראשוני, התבלטות של שדה החיפוש, וזמן התגובה של המנוע. לבסוף, הייתי נותן משקל של % לערך הצפוי של רשימת התוצאות. בדיקות משתמשים באינטראנט בדיקות המשתמשים של עיצובי האינטראנט נעשות באותה הדרך בה מתבצעות בדיקות המשתמשים של אתרי ה-60/ החיצוניים. כללי הבדיקה העיקרייס נשאריס וזהיס: קח משתמשים ייצוגייסם ותן להס לבצע משימות נפוצות. פרק 5: עיצוב עבור האינטראנט 289 ההבדל העיקרי בין סוגי הבדיקות הוא ש'יהמשתמשים הייצוגיים'י אינס הלקוחות שלך אלא עובדי החברה. לפיכך, במקוס להשיג משתמשי בדיקה על ידי פרסוס מודעות וסוכנויות כוח אדס, אתה משיג אותס מתוך החברה עצמה. כדי להשיג משתמשי ניסוי למחקרי אינטראנט אתה יכול פשוט לבקש מעובדי מחלקות שונות להמליץ על משתתפים פוטנציאליים מתוך הקבוצות שלהם, ולפרסם מודעות באינטראנט עצמה או במזנון החברה. ניתן לבצע מחקרים פשוטים יותר על ידי כך שפשוט תפנה לאנשיס במסדרון, ותבקש הערות על דף או על סמל, למרות ששיטה זו אינה מומלצת במחקרים גדולים יותר, משוס שישנה נטייה לפנות לקבוצה יותר הומוגנית של משתמשים. לרוב, מחלקת משאבי אנוש יכולה לשמש כמקור למשתמשים מתחילים בדמות עובדים חדשים, שעדיין לא התוודעו למבנה החברה שלך ולמונחים הייחודיים לה. למרות שהמטרה העיקרית של עיצוב האינטראנט הוא המשתמשים המנוסים, עליך תמיד לכלול עובדיס חדשיס במחקרים של נושאים עקרוניים, כגון עיצוב הניווט והדף הראשי. האינטראנט היא אחת מהדרכיס העיקריות באמצעותן יכולים העובדיס החדשיסם ללמוד אודות אזור העבודה שלהם, ולא כדאי לבלבל אותסם עס מונחיס מוזריס ובלתי מוכריס. לרוע המזל, לא תמיד ניתן לבצע השוואה מול עיצובי אינטראנט של חברות מתחרות, משוס שלא תהיה לך גישה לרשתות האינטראנט של החברות הללו. כתחליף, אתה יכול לראיין עובדיס חדשים ולשאול אותס על הניסיון שלהס בשימוש באינטראנט של חברות אחרות. הרבה פעמיס הס יכוליסם לספק, גם מבלי לפגוע בהסכמי סודיות, רעיונות רביס הקשורים לדברים שהס אהבו או לא אהבו בעיצוב ותכונות רשת האינטראנט של המעסיק הקודם שלהם. עליך להימנע מללחוצ עליהס לגלות פרטיס שיגרמו להס להרגיש שלא בנוח, או שיגרמו להס להרגיש שהס מוסריס סודות חברה של המעסיק הקודם. אם יש לחברה שלך משרדים בארצות אחרות, יש להתחשב גם בנושא השימושיות הבינלאומית, למרות שנושא זה מטריד פחות ברשתות אינטראנט מאשר באינטרנט, משוס שעובדים רבים יתרגלו לתקשר ביניהס בשפה העיקרית של החברה. בנוסף, ייתכן שעובדיס רביס מארצות אחרות ביקרו במטה החברה ונחשפו למאפייני חמדינה המארחת. שני הפתרונות העיקרייס לבעיות השימושיות הבינלאומית הס ליצור דפיס ראשיים ספציפיים לכל מדינה, ולהבטיח שיתוף של משתמשים מארצות אחרות במחקרי השימושיות של עיצוב האינטראנט העיקרי. למידע נוסף על נושאי שימושיות בינלאומיים, פנה לפרק 7, יישימוש בינלאומי: מתן שירות לקהל מרחבי העולס'י. מחקרים בתנאי שדה באופן עקרוני, ניתן לבדוק את נושא השימושיות בשתי דרכיס: בתנאי מעבדה או בתנאי שדה. שתי הדרכיס חשובות, ושתיהן שימושיות עבור כל פרויקט, בין אס הוא מבוסס אינטראנט ובין אס הוא מבוסס אינטרנט. מחקרי השדה חשוביס יותר כשמדובר בשימושיות באינטראנט משוס שנושאי אינטראנט רביס נוגעיס לתמיכה בעבודות ספציפיות ובעובדים. כדי לעצב אתר אינטראנט שבאמת יועיל לעובדים הללו, עליך להבין מה הס עושים, ולתכנן את המערכת כך שתתאים לשטף המשימות שלהס. 0 עיצוב ממשק באינטרנט בעיצוב המחודש של 60/חט5 משנת 1997, שלחנו סדרה של טיוטות לרשימה אקראית של עובדים נבחרים מסביב לעולם. לא נאמר למשתמשים מה פשר הסמלים שהוצגו לפניהם, אלא הם התבקשו במקום זאת לשלוח בחזרה דואר אלקטרוני ובו הפירוש שלהם לכל סמל. השורה העליונה מציגה כמה מהסמלים שבדקנו, והשורה התחתונה מציגה את הסמלים בהם השתמשנו בגירסה הסופית של עיצוב אתר 60/חט5. הסמל השמאלי ביותר היה אמור לייצג את האפשרות "60//חט5 חס ששח פשהחאו", אך רוב המשתמשים חשבו שזהו סמל הפעלה. ברור שהטיל לא ביצע את משימתו, ולכן השתמשנו בעיצוב הסופי בסמל חבילה עטופה בצורת מתנה (שבנוסף לשימוש העיקרי שלה, היא גם יצרה קשר נחמד לרעיון שהשירותים החדשים הם שיפורים משמחים). הסמל האמצעי היה אמור לייצג את שירותי קמפוס החברה, אך רוב המשתמשים חשבו שהוא מייצג את אפשרויות הניווט. בנוסף, המשתמשים התלוננו כי האותיות שבשלטים היו קטנות מדי, וקשה היה לקרוא אותן. כפי שקראת בפרק 3, "עיצוב תוכן", הגולשים משתמשים בדימויים רבים כשהם חושבים על ה-60/, ולכן קשה לצפות שסדרת סמלים תתקבל פשוט כשלטים. בכל מקרה, בעיצוב הסופי השתמשנו בסמל בניין כדי לייצג את ה"קמפוס". מסתבר שהיינו זקוקים לסמל ניווט חדש בעיצוב הסופי משום שהסמל בטיוטה הראשונית, המוצג בצד ימין, לא ביצע את מלאכתו. תווית הדף הראשי של סמל הניווט היתה "65חו! |6%0פש", אך אף אחד לא הצליח להגיע לסמל הנכון ללא הכיתוב. הקישור לא נראה ממש כמו קישור, ויותר מכך, המשתמשים הבינלאומיים לא תמיד שייכו את רעיון המעבר לדפים מועילים לסמל השרשרת (פאחו!). תמיד מסוכן להשתמש בסמלים שעובדים על פי מילים מסוימות בשפה שלך (באנגלית זה %5ח11, בעברית זה קישורים). למזלנו, המחקרים שערכנו הראו לנו שכבר יש לנו סמלי ניווט מצוינים, ולכן שינינו במקצת את סמל הקמפוס הפסול והשתמשנו בו כסמל ניווט בגירסה הסופית. ללא ספק, זהו מזל יוצא דופן. פרק 5: עיצוב עבור האינטראנט ‏ 291 לא מספיק לדאוג שרכיבי העיצוב הנפרדים יובנו, אס התוכן הכללי של הדפיס מגושם, דורש ביצוע שלביס רבים, מקשה או שאינו מאפשר ביצוע דבריס מסוימיס שהעובדים צריכיס לעשות. לרוב, קל הרבה יותר לבצע מחקר שדה בחברה שלך מאשר בחברות אחרות, שס תפריע לעסקים של אחרים, ואתה עלול להיתקל בבעיות סודיות אס תרצה לצפות בדרך שבה המשתמשים עובדים עס הנתוניס שלהם. אני מקווה שיש לך קשרים טוביס בתוך החברה שלך, ותוכל לשכנע בקלות מנהליס שיעילות החברה תגדל אס הס ירשו לך לצפות בצוות העובדיס במשך יום או יומיים. אל תצלם בשטח כמה ממומחי השימושיות אוהבים לצלם את המשתמשים כשהם עורכים מחקרים, אך אני סבור שאין לעשות זאת מכמה סיבות: > צילום איכותי (לא במצלמה ידנית) דורש ציוד (רגליות, כבלי חשמל, תאורה), זמן העמדה ופירוק - דבר המייקר את הפעילות. 4 המצלמה עצמה יכולה להפריע למשתמש וכן ללקוחות המשתמשים שמגיעים למשרד שלו לקבלת סיוע. % לא יהיה לך מנוס מבזבוז זמן ומאמץ נוספים על כיוון ציוד ההקלטה, ולרוב תקבל איכות קול ותמונה גרועות ביותר, אלא אם תבזבז עוד זמן על יצירת תנאי תאורה מתאימים ושימוש במיקרופונים מיוחדים (שמפריעים למשתמש אפילו יותר, ומקשים על ניידות ומעבר לחדר אחר, אם המשתמש מחליט פתאום לעבור למקום אחר). % אם אתה עורך מחקרי שדה מחוץ לחברה שלך (כגון בפרויקט אקסטראנט), קשה לרוב לקבל רשות לצלם בשטח חברה אחרת בלי לערב כמה רמות של גורמי בטחון שיתנו אישור לכך. גם כך קשה להגיע למצב בו העובדים יסכימו שבודקי השימושיות ייכנסו למשרד שלהם, ולכן אין צורך להקשות עוד יותר בנקיטת אמצעים שצוות האבטחה יתנגד להם. היתרון היחיד של הצילום בווידאו הוא היכולת להביא הקלטה חזותית לחברי צוות הפיתוח שלא יכלו להגיע למחקר השדה. ניתן להשיג יתרון זה, ברובו, על ידי צילום תמונות סטילס פשוטות, דבר שקל הרבה יותר לעשות וזול יותר להפיק. בנוסף, מצלמת סטילס מסורתית לא מטרידה בהרבה את העובדים, במיוחד אם אתה משתמש במצלמה דיגיטלית, ומראה להם את התמונות שצילמת לפני שאתה עוזב את המשרד. 2 עיצוב ממשק באינטרנט מחקרי השדה שמבוצעים על האינטראנט נעשיס באותה הצורה שבה מבצעיס כל מחקר שדה: עליך לצפות בעובד בזמן ביצוע עבודתו. בוּמן התצפית, על הצופה לשמור על שקט במשך רוב הזמן. המטרה היא להיות נסתר ככל האפשר, כדי לאפשר למשתמשיס לבצע את העבודה שלהם, ולהשתמש באינטראנט בדרך בה הס רגיליס לעבוד. מדי פעס יש צורך להפריע למשתמש, ולשאול לפשר פעילות מסוימת שהצופה אינו יכול להבין לבדו, אך יש לחימנע ככל האפשר משאלות כאלו. לרוב עדיף לרשוס את השאלה על פתק, ולראות אס ניתן להבין את הפעולה במידה והיא תחזור על עצמה. אס הפעולה לא חזרה, אפשר לשאול את המשתמש בסוף הביקור. לרוב, המשתמשים ירצו לתחקר אותך בנוגע לפרויקט האינטראנט, והם עשויים אפילו לבקש עזרה בנוגע לכמה נושאיס שקשורים בשימוש בעיצוב. בתחילת הביקור עליך לסרב לבקשות כאלו, ולהסביר שהגעת כדי לצפות בדרך העבודה שלהם, כשאין בסביבה מומחה שיכול לענות על השאלות שלהס. לקראת סוף הביקור, אפשר לסייע למשתמשים, הן כדי להביע את תודתך על כך שהרשו לך לשתף אותס במחקר, והן כדי ללמוד יותר אודות הדבריס שהמשתמשים רוציס לעשות, והסיבות שבגללן הס לא יכוליס לעשות דבריס אלה. אחד היתרונות של צפייה במשתמשים בזמן עבודתס הוא שבהרבה מקריס תגלה שהס משתמשיס ברשת האינטראנט בדרכים לא צפויות, שלא חשבת לבדוק אותן בתנאי מעבדה מתוכננים. תגליות לא צפויות מעין אלו הופכות לעיתיס קרובות לגורמיס החשוביס ביותר לעיצוביס המחודשיס התומכים בשימושיס נוספים באינטראנט. פרק 5: עיצוב עבור האינטראנט 293 4 עיצוב ממשק באינטרנט מסקנה בשניס 1995 ו-1996, מוסכם חיה בין מומחי ה-65/ שרשתות האינטראנט היו חשובות בהרבה מאשר אתרי האינטרנט. אין ספור דוברי כינוסים טענו שיירוב הרווחיס יתקבלו מהאינטראנטיי. השאלה אם ההצהרה הזו התגשמה נתונה בספק, אך ברור שבשניס האחרונות המצב בשטח השתנה. ההערכה הגבוהה מדי של האינטרנט הובילה להתמקדות בפרויקטי ט6/ חיצונייס (אינטרנט), ולחוסר מימון ברור של פרויקטי אינטראנט פנימייס. האינטרנט הוא אכן גורס השינוי החשוב ביותר של העסקיס בימיס אלה, אך אין משמעות הדבר שאפשר להזניח את הרשתות הפנימיות. השפעת השימושיות של עיצובי אינטראנט גרועיס מתורגמת ישירות למונחי יעילות החברה, משוס שמשמעות כל בעיות השימושיות היא הפסד יצרנות של העובדיס. העלות של ניווט גרוע באינטראנט גבוהה: בחברה בה 0 עובדים, ההפסד עלול להגיע לפחות ל- 10 מליון דולר בשנה במונחיס של הפסדי יעילות עובדים. בעולם כולו, עלות ההפסד שנגרס כתוצאה משימושיות גרועה באינטראנט יגיע ל-100 מיליארד דולר עד שנת 2001, אלא אם ייבנו מערכות ניווט טובות יותר ותתבצע כפייה של תקני עיצוב פנימי קשיחים יותר. אפילו חברות גדולות במיוחד מפעילות לרוב את רשתות האינטראנט שלהן באמצעות צוות קטן. אני מכיר חברה גדולה אחת בלבד אשר משקיעה מאמציס רביס בקידוס תקני העיצוב של כל הדפיס ברשת האינטראנט שלה. כמעט כל מי שאני מדבר איתו טוען שהוא אינו מצליח לאל את המחלקות השונות לעבוד על פי הנחיות העיצוב. כתוצאה מכך, רוב רשתות האינטראנט בנויות כאוסף מבולגן של מסמכים, ולא ניתן לנווט בהן. אני הראשון להודות שלרוב אתרי ה-65/ החיצונייס יש בעיות שימושיות, אך לפחות לכולס יש סכמות ניווט מסוימות ותקני עיצוב. בימיס אלה, נדיר למצוא דף יתוס שאין לו אפשרויות ניווט באתר טפ/ של חברה גדולה, אך דפים כאלה הס הרוב ברשת האינטראנט של אותה החברה. אס נתחשב בעלות ההפסדים שנגרמיס כתוצאה מחוסר היעילות של העובדים, אני ממלי>: > להקצות צוות מיוחד שיעסוק בתוכן אינטראנט, עיצוב ושימושיות - צוות שיגרוס להעלאת פוטנציאל היעילות של כל עובדי המשרדיס בכמה אחוזים. 6% ליצור תקני ניווט לאינטראנט וערכה מינימלית של מוסכמות עיצוב לכל תוכן האינטראנט. > להדגיש בצורה פעילה את מחויבות המחלקות לעבוד לפי תקני הניווט והעיצוב. פרק 5: עיצוב עבור האינטראנט | 295 אפנטרויות נגינטות למעשתמטטים בעלי מגבלות חוקים ותקנות, וכן פעילות של עמותות וארגונים שונים יוצרים סביבה המודעת גם למשתמשים בעלי מגבלות, מתוך כוונה לאפשר גם להם גישה למערכות מחשב. לעיתים תהיה קיימת אף חובה חוקית לדאוג לכך שרשתות האינטראנט יכילו תכונות שיאפשרו לעובדים בעלי מגבלות, שאינם מסוגלים לעשות את עבודתם ללא גישה לרשת הפנימית של החברה בה הם עובדים. פרק 6: אפשרויות נגישות למשתמשים בעלי מגבלות 297 נכויות שקשורות לגיל לאלה מתוכנו שמתכננים להישאר בחיים עוד כמה שנים יש סיבות אישיות לקידום יכולת הגישה עבור משתמשים בעלי מגבלות, משום שככל שאנו מזדקנים, אנו חווים את המגבלות בעצמנו. ההערכה היא שרק ל-14% מהאנשים שמתחת לגיל 5 יש סוג מסוים של מגבלות, בהשוואה ל-50% מאלה שעברו את גיל 65. למזלנו, חלק גדול מהמגבלות הללו אינן משמעותיות, או שאינן מפריעות בשימוש ב-60/ (לדוגמה, בעיות שמיעה). כדאי מאוד לזכור מה מחכה לנו כשנזדקן. הבה ונעצב עולם שיהיה טוב לכולנו, עכשיו ובעתיד. 8 עיצוב ממשק באינטרנט בנוסף לתקנות התאימות וההגינות האנושית, ישנן כמה סיבות עסקיות גרידא להפיכת האתר לנגיש עבור משתמשים מעלי מגבלות. לרוב, משתמשיס אלה הופכים ללקוחות נאמניס כשהס מגלים יצרן שנותן להס שירות טוב, ומתאיס את עצמו לצרכיהס המיוחדיס. קל יחסית לעצב אתרי ססאצו נגישים, ולכן אם תתחשב בציבור הלקוחות הזה, אשר יגדל באותו הקצב בו האוכלוסייה הרגילה גדלה, תרוויח מכך. יש להגדיר את המונח מגבלה בהקשר ל- ט6/. אי אפשר לקבוע, למשל, שאדס שמשתמש בכסא גלגליס יתקשה בגלישה. למעשה, רביס מהמשתמשים בעלי כסא הגלגליס אינס זקוקיס להתחשבות מיוחדת כשהם גולשיס ב-89/. במקוס ואת, השאלה היא אס למשתמש יש מגבלות שמקשות עליו להשתמש באמצעי הקלט והפלט של מחשב רגיל. אוכלוסיית בעלי המגבלות (תנועה, ראייה, שמיעה) גדולה מכדי שניתן יהיה להתעלס ממנה. הדרך להפיכת ה-ס6/ לנגישה עבור משתמשים עס מגווןו סוגי מגבלות היא עניין פשוט של שימוש ב- | בדרך בה היה ראוי להשתמש בה מלכתחילה: לקודד את המשמעות במקוס את התצוגה. כל זמן שדף מסוים מקודד על פי המשמעות שלו, הדפדפניס החלופיים יכולים להציג את המשמעות הזו בדרכיס מיוחדות שמתאימות ליכולות של אותס משתמשיסם מוגבלים, ובכך לאפשר למשתמשים בעלי מגבלות גישה ל-ט6/צ. לפני שאדון בקשיים שיש למשתמשים בעלי מגבלות בגישה למידע ט6/, אני רוצה לציין שמידע מקוון מקנה יתרונות רביס בהשוואה למידע מודפס. לגולשיס עס בעיות ראייה קל להגדיל את הגופן, והשימוש בהמרות טקסט לקול עבור משתמשיס עווריס טוב בהרבה כשהוא מבוצע על טקסט מקוון, מאשר בטקסט מודפס. 6ץוזוח! עֶזו!ו0ו466655 ס6/צ/ פרק וה מספק מבט כללי על הנושאיס שקושריס בעיצוב נגיש ל-60/. למידע נוסף, פנה להנחיות 41/ (6ע080וח1 /0ו|וסו266655 ספצ - יוזמת הנגישות ל-60/)) שפורסמה על ידי איגוד 36\. ניתן למצוא את ההנחיות הללו ומידע נוסף אודות נגישות ב-60/ בכתובת /0//1זס. 3או. צואואו/ /: קסת. תקן 81/ יגדיר לך מה אתה חייב לעשות. מעשית, יש צורך לתת עדיפות לתאימות סטנדרטית באתריס גדוליס, ולתכנן את יישוס השלביס הבאיס: 1. יש לעצב מחדש את הדף הראשי והדפים שבהם יש תעבורת גולשים גבוהה, כך שיתאימו מיידית לכללי הנגישות החשובים ביותר. הדבר נכון גס עבור כל דף שהכרחי להשלמת רכישה מקוונת, או ביצוע עסקה חשובה אחרת. 2. לאחר מכן, יש לדאוג לכך שבכל הדפיס החדשים ייושמו גם ההנחיות שבעדיפות הגבוהה וגם ההנחיות שבעדיפות הנמוכה. בדיקת ההתאמה להוראות תהיה חלק מתהליך היצירה של הדפים החדשים בארגון. 3. בהמשך, יש לעצב מחדש דפיס שבהס יש תעבורת גולשים בינונית, כך שהם יעמדו בדרישות ההנחיות שבעדיפות הגבוהה. 4. המטרה ארוכת הטווח היא שדפים עס תעבורת גולשיס גבוהה יעוצבו מחדש, כך שהס יתאימו להנחיות הנגישות. בנוסף, יש לדאוג לכך שהדפיס החדשים שנוצרים יעמדו בדרישות כל ההנחיות. את הדפיס עס תעבורת הגולשיס הנמוכה ניתן להשאיר כמות שהם, אלא אס הס קשוריס לנושאיס שמענייניס במיוחד את המשתמשים בעלי המגבלות. טכנולוגיה מסייעת אם יש בחברה שלך עובדים בעלי מגבלות, או אם יש לך קרובי משפחה או חברים בעלי מגבלות שמבקשים ממך סיוע בהתחברות לרשת המקוונת, כדאי לך לבדוק את האפשרות להשיג עבורם טכנולוגיה מסייעת שתתמוך בציוד הקלט/פלט הסטנדרטי שהגיע יחד עם המחשב שלהם. הטכנולוגיה המסייעת שתהיה השימושית ביותר עבור כל משתמש צריכה להסתמך על הנתונים הספציפיים של אותו אדם. בנוסף, הטכנולוגיה משתנה מהר מדי עבורי כדי שאוכל להמליץ כאן על משהו טוב. במקום זאת, אני מציין שישנם פתרונות זמינים רבים, וכן עוד פתרונות בתכנון. אתר 660067 866זד, בכתובת 56.600וש.0866//:קת הוא מקור טוב לקבלת מידע אודות טכנולוגיה מסייעת. באופן ספציפי, ניתן לסייע למשתמשים עיוורים בעזרת קוראי מסך שממירים טקסט לדיבור. לדוגמה, משתמשים עיוורים רבים שבעי רצון מתוכנת 8680067 סחָ3ק סוחסה של |אפ:ז: זהו דפדפן מדבר שמבין ואד ומקריא דפי פ6/ו. אם הסיור ב-65// יהיה אחד השימושים העיקריים שלך, עליך להימנע משימוש בקוראי מסך ישנים שאינם מותאמים ל-60) ומתקשים בקריאת דפי 65/ שאינם מעוצבים טוב. אם אתה מעוניין רק בשימוש ב-פ6/, השג לעצמך דפדפן קורא, משום שניתן לשפר את צורת הצגת הנתונים בהרבה כשהתוכנה מניחה שהיא מטפלת רק בקבצי וואדו. פרק 6: אפשרויות נגישות למשתמשים בעלי מגבלות 299 |החזר!. רחטר] ‏ א6בחו/ חס .זר!פטוסת)-]ס-ספספ.אואואו/ / :ות החסס .5660-01-00 ./ש/ע/ע לגולשים עם בעיות ראייה לא היתה שום אפשרות לגשת לגירסה הראשונה של אתר ה-60/ של הספר +חפ טס ד ז0 50660 6+ ₪3 655ח₪051 שנכתב על ידי ביל גייטס. תמונה זו נותנת מושג על הדרך בה הדף הראשי היה נראה לכל מִי שלא מסוגל להביט בתמונות. לאחר שהאתר קיבל ביקורת מהעיתון רב-התפוצה 65חוד 665 105 סחך, הוא עוצב מחדש ונכללו בו חלקי טקסט זו מתאימים. 0 עיצוב ממשק באינטרנט |התזר].רחכור] שביו הס .זר וסה)-/ס-טשסספ.אואוצו/ / :כוות סדצדואטןאסץץס העטסצ הת .5 הדא 85 צ951 א זאד +פווסחד זס 52680 1708 8 ₪₪8/70888 זסטזס רוסו+8+/ערו! !60/8כן5 8 6שו869ז 80 1999 ,24 הסזגוש עס 58 !וו חזועש 81ח6 060וע 8 חן 851 8 06 סז ,אססם עצשח טחוזוספחו פוה חו +פווסווד זס ספכן5 16 ₪ ₪8/7958 סז פחוסש 15 85/0955" 1/5 ו ]סט 608 שוכ8] 6ו!1 9005505/₪ טומב ווום 18 רו פיזסווחו פַצצח הו . אוסו! 806 ץוה0ח60 |010/08 6 חו 5פשהופטט הח הטע הס +אסה 5 ".ע1/)1 +5הכן 8+ הח 5 ווום- 60 06פ!₪18610חז ששח 115 חן ששטטסטפ סז ץסס!סחו166 5'ץ1008 6טָהפשפ! חטט טסץ 07 55 מחד .708 518715 שזווזו] סד ? 38807 וס שיו דתססטד 5 | אססס 105 חס הסוזהוחזסוחו פזסוח א%ססם 108 פזסזעע | צהעצ 018 !חס 6!וזסש8] זטסץ חוסזו סח זפטזס 820000 אאא 6 סו 8 [00600008 יוג 00 .161710706 > החסס.50660-01-000000./ש/ע/ע פרק 6: אפשרויות נגישות למשתמשים בעלי מגבלות 301 סמל הנגישות ב-60/ ((ססוחץ5 606655( 60/)) של זס+ 06% |החסספּו 8 666510!6. אפשר להשתמש בסמל זה כדי לציין אתרים או דפים בהם נעשה מאמץ לשפר את הגישה עבור משתמשים בעלי מגבלות. ניתן להוריד את הסמל במגוון גדלים מהכתובת - /ההסס. הסל5סם. שוחו / : קת 68 /3065ק חאו |החח.זס ה חזאו|סט וח ץ5 2 עיצוב ממשק באינטרנט אפשרויות נגישות חזותיות המגבלות החמורות ביותר, בהתחשב במצב ה-60/ הנוכחי, קשורות במשתמשים עיווריס ובמשתמשיס עם מגבלות חזותיות אחרות, משוס שרוב דפי ה-60) כוללים פרטיס חזותייס רביס. לדוגמה, נהוג לראות שילוביס של צבעי רקע (סחטסז0א886) וקידמה (0חט0ז60ז0=), אשר משתמשים עיוורי צבעיס כמעט ואינס יכוליס לקרוא. עליך לקבל משוב לפחות ממשתמש עיוור צבעיס של אדום/ירוק, משוס שזהו עיוורון הצבעיס הנפו ביותר. כדי לשפר את הגישה עוד יותר, ודא תמיד כי יש ניגוד חזק בין צבע הרקע לצבע הקידמה, והימנע מתבניות רקע עמוסות המפריעות לקריאה. כל דבר שיפחית את קריאות הטקסט שלך, יטריד מספיק משתמשים לא מוגבלים שכלל אינס אוהביס את רעיון האטת מהירות הקריאה שלהם ב-60//. תמונות רקע (0760א6ד) או צבעיס עדיניס עלוליס להיות הקש האחרון שיוריד את קריאות הדף שלך אל מתחת לסף של מה שמשתמש בעל מגבלה חלקית יכול לקרוא. לעיווריס, או למוגבלי ראייה, קל יחסית לגשת לדפי טקסט משום שניתן להזין את הטקסט לקורא מסך (₪68067 ח56766) שיקרא בקול את הטקסט על ידי זו ח5. דפיס ארוכיס יקשו על משתמש עיוור, יותר מאשר על משתמש רגיל, במציאת חלקיס מענייניס. כדי להקל על הסריקה, מומלצ להדגיש את מבנה הדף באמצעות תגי )₪49 מתאימיס: השתמש ב-<1ח> עבור הכותרת ברמה העליונה, ב-<02> עבור חלקי המידע העיקרייס שבתוך <1ח>, וב-<3> וברמות נמוכות יותר עבור חלקי מידע שבתוך רמה <2ח>. בכך, המשתמש העיוור יוכל לקבל תצוגה מקיפה של מבנה הדף על ידי הקראת קטעי ה-<11> וה-<2ח>, והוא יוכל לדלג במהירות על סעיפים לא מענייניס על ידי כך שיורה לקורא המסך לעבור לכותרת הבאה ברמה נמוכה יותר. בנוסף למשתמשים עיוורים לחלוטין, ישנס משתמשים רביסם המסוגליס לראות, אך ראייתס חלשה. משתמשיס אלה זקוקים לרוב לגופניס גדולים, דבר הקייס כתכונה סטנדרטית ברוב דפדפני ה-65/. כדי לתמוך במשתמשים אלה, לעולם אל תקודד מידע יחד עם גדלי גופניסם קבועיסם, אלא השתמש בגדלים יחסיים. לדוגמה, כשאתה משתמש בגליון סגנון, אל תקבע את ערך מאפיין 5126-%חס+ בגודל קבוע על ידי מספר מסויס של נקודות או פיקסלים. במקוס זאת, קבע אותו כערך באחוזיס מגודל ברירת המחדל של הגופן. במקוס: | 0ק16 :526-0%ח10 רשוס: ;5% :5260-100% בכך הטקסט שלך יגדל או יתכווצ כשהמשתמש יפעיל את פקודת 187061 +א6דיי (הגדל טקסט) או ישאסד זסו|3ח'י (הקטן טקסט), ותצוגת הדף ההתחלתית תתאיס להעדפות המשתמש. תמיכה מלאה במשתמשים בעלי ראייה מוגבלת דורשת שהדפים ייראו בצורה שווה בכל גדלי הגופניס. היישוס אינו תמיד מעשי, ומקובל להשאיר דפיס כך שייראו קצת פחות טוב בגדלי גופניס ענקייס כל עוד סידור הדף הבסיסי יעבוד. אני ממליצ לבחון את הדפיס שלך כאשר גודל ברירת המחדל של הגופן הוא 10, 12 ו-14, כדי להבטיח כי העיצוב מיטבי עבור גדלי הגופניס הנפוציס הללו. לאחר מכן, עליך לבצע בדיקות נוספות עס גדלי ברירת מחדל של גופניס בגודל 18 ו-24 נקודות, כדי לוודא כי העיצוב יעבוד גס בגדלים אלה המיועדים למוגבלי ראייה. יכולת הגישה למוגבלי ראייה חשובה גס למשתמשיס רגילים ללא מגבלות, במקרה בו הס משתמשיםס ב-60/) במצביס המונעיס מהס שימוש בדפדפן חזותי. לדוגמה, גולש המשתמש ב-ט6/ תוך כדי נהיגה אמור להסתכל על הכביש ולהשתמש בדפדפן קולי. מאפייני זוה בנוסף להפיכת הטקסט לקריא, עליך לספק גם שיטה חלופית לייהצגת'י התמונות שלך בפני גולשיס שאינס יכולים לראות אותן. הפתרון העיקרי לכך כיוס הוא להשתמש במאפיין זו. קוד ₪11 טיפוסי בו משתמשיס להכנסת תמונה בדף פ6/ עשוי להיראות בדומה לכך: "200"=%ף "100"= תזסואו "חן פ576="(860 ףַוחו> <"ח6!56ו] 28600 +0 סזסתק"=6הּ משתמשיס שאינס יכוליס לראות את התמונה (עיווריס, או כאלה שכיבו את אפשרות טעינת התמונות בשל בעיות רוחב פס) יראו או ישמעו במקומה את הטקסט החלופי ''ח56ו6וא 28600 +0 סססחפיי. משתמש רואה שכיבה את אפשרות טעינת התמונות יוכל לקבוע על פי הטקסט אם כדאי להמתין לטעינת התמונה. משתמש מוגבל ראייה יוכל לפחות לדעת מה המידע שבה. פרק 6: אפשרויות נגישות למשתמשים בעלי מגבלות 303 7 ,25 צָ1 ,צְה8חט5 5 הפוחב קרח00 ופטצ0 תשש 1- 055 5%3 65/ה! .2 1386 , 5316 שיובּ=] *וסרהרחו5 הז 5יוב!!10 [סצביט יוטוסץ *וס) נַהט000 סיוב הובּהָבּ >שחודוובּ הנטסיוה+ >35%! ר|/ש , 53]6 שיובּ+ *וסרהרח5 +3055] 6+ 6 /5.- ₪530 06 16%31|5 . חס !פופה ץ/0 חב שזפת ||5% זב 26315 ססשטחו1= 135% .015605 90375 55ורח 0ש355ל/ש%טס טח .פיום!סטביוד קסד יוס=] "5שפ קסד חס ץ|חס 3% / [סצהיוד ו[וסיוא הטוש עו בויופ 6+ בחהטסזבּ .ו ס|פטבד "0-ה ש- סיובּ+ "וטו .ח6ק0 576 סח שס] חס 848 16ה8]5070 וטסץ 5| 517166 6 50 שש זס6 הסרה 60 6 456 .5זב+ .טסץ זס+ 5קוש-בחטסז 5823366 |ובח-6 6זב1 בחה שבכ 5'זפה+ב= ה)|/ .65ַבּיום 'ח' ₪35 ,חוח36 סזקקב3 185ה0ר68767 הסחבטבבוף 1308 טסץ 0681 6 0|פטבד חב פ>זפשס!|-0ק .5 פחתס-ס+- סל טס 5הַחוז 5!5%6;שפחי וטוט צֶבּ1י! *וסן עבּטסד ₪ חטו5 .חס סרחסזק חב 6300785+ 5/66 שח חס 03% 0+ קט וטוה 26 שפח זט .1צ: שוחטוות 305 ]|ו3ש3 סח הסטבּהרדוס+ח1 |בצדדות |פשבזד ח! הפרח "1:00%5=" 5ח+ רחס 0% טסץ פטוףָ ח63 5חַסחְבּע8587 ... הסוסה רהזס+ח! |בּטוזזבּ חב 8זט 523 60%ו+ 8ח+ שסח> %'ח00 טסץ % הפטם !זפפוהטת ב הפו הד זס , שסח> 000% טסץ +1 ?טסל סוה שוסח/צ 015% 5001+85% 8+ בח 60 3% טפץ רהס !1316 ₪56 ,%5חוסכ סש ה88ש8%ם (308ח1) .65%() 13 , זפחה+זבק 885%ח וטס דח6/06/1/.60/ 3 ./ע/ע/ע 4 עיצוב ממשק באינטרנט [ססַם. 1 שוסם!פצבּזד] רו [5חססב זפ 5 ]בבוד רו [105878555 ₪ 5הססב הס5פפ] ₪ [אופוש זס פסחוספ] [158ח3 חפזופו|פשיבזד] 5 פסונוחון 1.35% סד שסחס1י! ,0 סד 665ב| 8+ 5%] %'ח00 .6ח6ק5 זטסץ |!1א 686% | זפעס ר₪0%05|357 .6305ב זפרהרחש5 שח טסץ פטום ||'ם/צ 508 חס 56002 5 5 פ8עו5ח קאפחו .00% 500 %+3%65] 6+ ח! (308ח1) 5 ה+חהסרח 715 .835ש50] בשיו סד סם זטסץ 85%5+ 15 + %5ח001 ח|ן 500%55% 5חות+ 685% חס] 8+ +ס 8רח50 פטס 8|פרת 3 חוש 0 זפ%ח5 .₪065 065% 0'5!וסשי 8ח% חו .006 זטוסץ זס+ 55פַחִהָב3ח [ססש +0 58% ₪15 רחבּיוטסיו *וץ]- -+חפטששיו הח חק רתח סש |ופזבקהסה 5%67587'5ק שְ0ח3א טסץ 5החבזחַָסזק 8ץ))-%ח8ש180 שח ||ב +ס .חוהָהוח! ח68 טחסו! *וסצ0 טחוטחבו! 5ח%חסרח 8חהך .טהסא חסוח!) 8ח+ 078+ם זב זפ ם] 15 136% 58 ס+ 0% פַחוחוט+ ח5חוזם 8+ +0 8רחס5 %פחח פ'שְח60]0 %חפעז+ (פַהַבחן) (בעמוד הקודם) הטקסטים שבתגיות 3% גורמים לכך שניתן יהיה להבין את תוכן אתר שוססופפזד גם ללא התמונות. תרשים זה מציג את הדף כאשר אפשרות טעינת התמונות כבויה. משתמש עיוור יוכל גם הוא להשתמש בדף זה אם ייעזר בתוכנה שתקרא את כל מאפייני ה>ג3ּ של תגיות <0וחו>. שים לב לכך שהתמונות ללא כיתובי זוב (עם כיתובי 6פַבחו) גורמות לתחושת איבוד מיקום. אין לך מושג מה אתה לא רואה. בנוסף, דפדפני ה-60/ הנוכחיים לא מבצעים דבר פשוט כמו גלישת מילים (סבזשו סזס/) של כתוביות זוּ, ולכן חלק מהטקסט לא ממש קריא בתצוגת מסך זו, למרות של- ז5120וח%חץ5 לא תהיה בעיה לקרוא אותן. חלק ממומחי השימושיות תומכים ברעיון של תמונות מתוארות (108065 2656060), בהן טקסט תגיות ה-+3 משמש לתאר את מה שמשתמש רגיל מסוגל לראות. לדוגמה, סמל |סטחץ5 66655 ט6/ שמוצג קודס לכן בפרק זה יכול לקבל תיאור כגון ''6|סחץ6א 8 חסואו ספסוף פחואוסוף ה'י, וניתן לתאר את תמונת מחבר הספר כ-'405 5וח חן חח 8 01 ס%סחק 0 |%8500 8 סח והסצו ,0135565 חב זוהח סחסום וסועש 6שיי. לדעתי, התיאוריס הללו לא מביאיס הרבה תועלת באתרי ט6/, אלא אס המשתמש הוא מבקר אומנות. אני אישית מעדיף תיאוריס מסייעיס שמעביריס את משמעות התמונה: מה התמונה מנסה להעביר, ומה יקרה אס אלחצ עליה? אם, לדוגמה, דפי ה-65/ של חברת 2צא יכילו כולס את לוגו החברה בפינה השמאלית-עליונה, עדיף להקליד את הטקסט י'חסחפזסקזס6 2צאיי אל תוך המאפיין זו3 שלו. אס הלוגו מקושר לדף הראשי, ניתן גם להשתמש ב- "ספָהק סוחסח 2ץא"=>ו|4. לא כדאי להשתמש בטקסט כמו "חסט8זסקזס6 2/א )0 080 6="1. עדיף לכתוב ''ספָס| חסטְאזסקזס6 2ץאיי, ולהציב את המילה החשובה ביותר בתחילת הטקסט, אך עדיף כלל לא להזכיר שהתמונה היא לוגו, משוס שהמידע הוה חסר תועלת עבור אדס שלא רואה את התמונה. כל מפות התמונה צריכות להיות בצד הלקוח, ועליהן להשתמש במאפיין ו של התגית <8וחו> ובמאפיין 6 של התגית <8768> עבור כל אחת מאפשרויות הקישור, כדי שמשתמש שאינו מסוגל לראות את התמונה יקבל הקראת תיאור של היעדים בזמן הזוזת הסמן. קיימים עדיין כמה דפדפניס שתומכיס במפת תמונה רק בצד השרת, אך מפת תמונה בצד הלקות היא ללא ספק הדרך הנכונה שיש להשתמש בה בעתיד. משתמשים רואים ייהנו גם הס ממאפיין ה-%/8 או ₪96 שמוצגיס בחלק הנכון של שטח התמונה, אס הס לא רוציס לחכות לטעינת התמונה, ודי ברור שתגית +39 יכולה לתאר את משמעות יעד הקישור בצורה ידידותית הרבה יותר מאשר כתובת . הרבה פעמים, כללי העיצוב שנוצרו כדי לסייע למשתמשים בעלי מגבלות עוזריס גסם לאוכלוסיית המשתמשים כולה. למרות שיש לספק טקסט זו לכל התמונות, יש למעשה כמה תמונות שניתן לתאר אותן בצורה הטובה ביותר ללא טקסט. אס התמונה מיועדת פרק 6: אפשרויות נגישות למשתמשים בעלי מגבלות | 305 טקסט תגיות 3 צריך, ללא ספק, להיות מותאם לשפה המקומית של המשתמש, כפי שמוצג בדוגמה זו של ה-וחט156] 8|306ק |החססבו בטאיוון. משתמשים שמעדיפים גירסה אנגלית צריכים לעבור לגרסת טקסט שונה על ידי מעבר לקישור שנמצא מתחת לתמונה הראשית. לקבלת מידע אודות התאמה בינלאומית למשתמשים מארצות שונות, קרא את הפרק הבא. עו ואט 5 עשז.שסס. חח ./ש/ע/ע 6 עיצוב ממשק באינטרנט 5 1 88% לקישוט בלבד ואין לה שוס משמעות פרט לשיפור מראה האתר, אין סיבה להאט את המשתמשים העיווריס על ידי הקראת הסבר מיותר. לדוגמה, עדיף להשתמש בתגית ""=6| מאשר בתגית "6!וטם 6טו 86ַזבּ!"=זוג3. תמונות חסרות משמעות צריכות להגיע עס מחרוזות זו3 ריקות בכל מקרה (ולא להשמיט את תגיות זו9), משוס שנוכחות מחרוזת +/3 ריקה היא סימן לתוכנת קריאת מסך שניתן לדלג על התמונה. אס אין טקסט זו3 בתגית התמונה, רוב קוראי המסך יודיעו למשתמשיס שמוצגת תמונה לא ידועה, ולקוראיס אין אפשרות לדעת אס התמונה חשובה. מחרוזת +/8 צריכה להכיל טקסט פשוט ואין להכניס לתוכה סימון !אז, למרות שמותר להשתמש בתוויס מיוחדיס כגון 88% (הסימן <). טקסט תגיות זו3ּ צריך להיות קצר וקולע, ולרוב באורך מקסימלי של שמונה עד 10 מילים. דפדפנים מסוימים מציגים את טקסט תגיות זו כתיאור כלי (ס0!סס1), כשהמשתמש מביא את הסמן מעל לתמונה. ואאסוזגא פד > ]0 סו[טטק16 ,הוהצאוה1 ,סכה [אוופות השימוש הנפוץ ביותר לתכונה זו היא לתת שס לסמל, אך ניתן להשתמש בה גס כדי לספק קצת מידע מועיל בטקסט לוּ. לדוגמה, טקסט ה-+ו3 של תמונת הטקסט | א יכול להיות "19 עְּ%] 51066 שוסח"=>|8, במקוס רק "שוסח"=ז81. חשוב לעצב את המחרוזות הללו בצורה שהן עדיין יהיו בעלות משמעות עבור משתמשיס שלא יכולים לראות את התמונה, ומשוס כך חשוב שהטקסט יהיה 19 עְּ] 66ח51 שוסח'י, ולא רק 'י19 ץ13!] 6סחופ5''. לעיתים, יש צורך לכלול מידע מיוחד עבור משתמשיס שאינס יכוליס לראות את התמונות שבדף. לדוגמה, הדף יכול להכיל קישור מיוחד למצגת 00ו₪68!400 שבה יש תיאור מקיף של התמונות. ישנו טריק מעניין לעשות זאת על ידי שילוב המידע כמאפיין זו של טקסט זו3 שמשמש כתיאור תמונה נסתרת (כלומר, תמונת "61 שכל הפיקסליס כלי כדי להוסיף מידע לרכיב שלה שקופים 0ח6ז508ח78)). משתמש שרואה את גרפי בדף יסייע הן התמונות יייראהיי את התמונה הבלתי נראית (כלומר, למשתמשים רואים והן כלום...), ואילו משתמשיס שלא יכולים לראות לעיוורים. תמונות יקבלו את תגית הטקסט שלה. ששפא] 665[ס-וק ה0ו60-65צצש -וסן הַה60טטוום (019סם ו1961 עב4! 6סחו5 16 11 ונה הנד . .7 קדט ,6הנר קוטוקנ 1/6003 1160 5 מס שו[1 קדס קנבו[ 1568 זי[ננוכון ונב קרנ88[3 01 שקונהע [בטנכךל1 6ו[1 שונראוכו[8 פקדש/יננוט :אס פט[1 0+ 18ונטונסכןטנסט 6[ממנו[פ/ר כושוך 1641 01 6330168 הענה (פע6הסט .1171/11 0+ 818ו1נב טטו[קביש מנכצ1) 1ספ[ונכן ט6 8 101 ספ 81811 01 הננ [ונסנ16נה שוננן ]01116614 101 00818 [8נו801 6ו[1 ונה 818ס0 60160[סנכן 6ו[1 ונסס/ו061 פונספבנהקטנסט וננהנו[טונג) 618קהנוכ צנשו[1 הנה 6018[טנכך %ססט 8ו[1 01 8שנטונ6נ110 36 וננמווד סעו1 8ו[1 . 6טונשבנטכףכ6 קלט ונג 6/ת656181נכן16 [[811 שנב ]נוט 1996 הנס שנב 0318 116 . (5מנ6ו1 מנסל1 שמנסט זי[נ63[ט פצכט[!נוה 6ו11) קונרנספונרקונ6 י981[11נו הוונב דקנטפ מכ טבע16וננ 1 1פסט 1108 0816ננ691 ]כ 068 11 זבו[1 זה 01 6910708 [הוננקדנס 10 60פסכןכן פב) 1606910708 8116 101 קונג1סקהנו עעיסט 1כת 068 11 1מו[1 הונב (תנוסק[ טכ קוננפו1נ0/0ה ותב ונטס קנ[ -80 סש . (81168 פוב 68 016660 - רו10ז3-רו6 רו6!כןוחוך (פונס5 :6 זו16א נו101) מנבו[18) .5 18 זדס ,טונכנטונ6הנם .1171/11 הונב 2 3 .1171018 10 הנוכו 16ש[קטונס) ב ססמ6טנוס5. זדת ו ונת . פונננ 01 16בנכיב] 8 18 ונ פנו[' ‏ מנסע] ובנ163 0+ סכמ תכג[[ננ 8 6נב 6צפו11 .1/1 117 וסונ +ונכ₪ נוסקן 1 13168מו ו11חזד 116פטשאו יאוס 118 פהו1 סכ פט[1 1בו[1 6טטוד זי[נב[נוטבדנהכן טג 11 , 1076 1106 1כו שצנו מו שונרקונבו[ט 1177נ18פונ סט 1[ 6נב התב . 111 111 01 פונכנפנס/ר דשנ[631 601נס/יכוס 8(נכ0נ6011 61נ681) > כוכיס 8 מנבו[313) 01 ונכגזנ60 הינט[1 שו[ פג פט[1 ,11016 ]ונוט הננ 600 6ו[1 1'5ב[1 פנו[1 6סונגפ 3-2 .1111/11 קונרנסשיסס נכג601 6ו11 זדנוט [[6עו 88 1ו[קנטוג נוסקד ו( קנוכו11 ,[נ61פנר - (8180310 !021 19811 (זדפ[16 נ0פג10) פסם דנסם הונב 136 ונכפ[113 קיט ,6618ו31 6הד5 ונר 701 117 ע6116 ובחור + שוסבן 6 קנה 01 -מננונ0פווד זיונה פפכונטב 069107 ונ18110ונ686נכן סקבונבחנ 10 זיביגו 6ו[1 +כנוכ₪ 8 ]נוכט[1בקו סנה 6618ו[8 819716 0107 2850) 8 ונס "8פנ)בנסו[!נוה 18נסיגו 6ו[1" 660הונג שנב פצכו[1נוה 6ו[1 -1ו[קבב ג עסיטט וסיט 8 ונס טצנו[ט 6ו[1 6טונכי צכי] . 16נטמסנר 180 ..8618ו[7[69י51 .1171/11 ע10 610161006 6/ת1מהנג![נר 6ו[1 פג פו[1 80 ,601[סנכן 861ו81971691 5 מוננונדנספונס?) 6 116 15 1601 6ננוןט סשימנו[טם 10 60פנו 6מ ונפט 6618ו71681י61 שוכון שוסו[8 5?) ונג 68ננו1531 6ננוספטום זי1ו[ק[8 6ו11 01 68[כןונמ6 זנוט ,88[קנבטנ6 81 קוננ[ סכ ןונגס ונס 652 כנו טנכן ובס נוסקד 1בו[1 887 10 6טגוג 06 ב[נוכועו 11 . 8ו6-59107שבכן ונה 8]נוסזמ1 162000 118 זכ 3601 1/יטונכן 85 ונ 1פנ6וננו 66261 8 68נננוןסע ל[[הנו1ט 6פנו הוססש [ח56/.60./ש/ע/ץ פרק 6: אפשרויות נגישות למשתמשים בעלי מגבלות 307 יש לספק קליפים קוליים לתמלילים, ויש לספק גרסאות וידאו עם כתוביות. 8 עיצוב ממשק באינטרנט מגבלות שמיעה מתחיללת ימי ה-ט6/ו, היא שמה דגש על המדיוס החזותי, ואנו התרגלנו לסממניס החזותיים הללו - בין אס כטקסט או כגרפיקה - כשיטה העיקרית להעברת מידע ברשת. במקרים נדיריס, יש צורך בקול כדי לשפר את הבנת המשתמש. אפקטים קולייםס ב-60/ מיותרים - זהו, לדעתי, אחד מסממני העיצוב הגרוע. כמעט בכל המקרים, רמת השימושיות של האתר נשארת זהה כשמכבים את הקול, אך עס המעבר לשימוש רב יותר במולטימדיה, המצב ישתנה. עליך לעצב את האתר שלך, ללא קשר לשאלת החשיבות של האפקטים הקוליים, תוך התחשבות בקהל המשתמשים בעלי מגבלות השמיעה. יש לספק קליפים קוליים לתמלילים, כמו שיש לספק גרסאות וידאו עס כתוביות. דבר וה יהיה לתועלת המשתמשים שאינם דוברים את השפה, וכן למשתמשים שאין במחשב שלהם ציוד להשמעת קולות. מגבלות דיבור כרגע, לא משנה אס משתמש ט6/ מסוגל לדבר או לא, משוס שכל הקלט שהמחשב מקבל מגיע מהעכבר והמקלדת. ייתכן שצורות שונות של ממשקי משתמש מופעלי דיבור יהפכו לפופולריים יותר בעתיד במקריס בהס השימוש במקלדת מגושם, או פשוט כדי לתמוך במשתמשים שמעדיפים לתת פקודות קוליות מאשר להקליד אותן. כל ומן שקלט הדיבור הוא לא יותר מאשר תמיכה נוחה בקלט המקלדת, ניתן להסתדר ללא תמיכה מיוחדת במשתמשים שלא יכוליס לדבר. בסופו של דבר, משתמשים אלה יכוליס עדיין להשתמש בשיטות התקשורת העיקריות שנעשות על ידי המקלדת. הפגיעה במשתמשים שנהנים מקלט קולי למען הנוחות ולא מתוך צורך אמיתי, קטנה עד אפסית. העניין יהפוך לבעייתי הרבה יותר כשנעבור לממשקיס בהס הדיבור הוא התקן הקלט העיקרי או אפילו היחיד. אני בצופה שרוב מערכות הציט 6080) יעברו למימד קולי בעוד זמן לא רחוק משוס שהדיבור הוא צורת השיחה הטבעית לרוב הגולשים. כל מערכת ציט שמסתמכת על דיבור צריכה להשאיר אפשרות למשתמשים שאינס מסוגליס לדבר להשתתף בשיחה על ידי טקסט מוקלד. בדומה לכך, מוצרי הטלפוניה באינטרנט צריכיס לשלב קול וטקסט, כדי לאפשר לכל צד בשיחה לתקשר בדרך הנוחה לו. למעשה, אפילו אנשיס שאין להס בעיות דיבור יכוליסם ליהנות לפעמיס מערוצ טקסט שתומך בשיחה קולית: כדי להעביר כתובות 81( או סוג אחר של קוד, או כדי לאיית את שמסם. מגבלות מוטוריקה עדינה ותנועה משתמשיס רביס מתקשים בהזזה מדויקת של העכבר, ולעיתיס יש להם גם בעיה ללחו על כמה מקשי מקלדת בו-זמנית. יש לטפל ברוב הנושאיס הללו על ידי שיפור עיצוב הדפדפן, והס אינס אמוריס להטריד את מעצבי הדפיס פרט לעצה שלא לעצב מפות תמונה שיש להצביע על חלקים מהן במדויק. תאר לעצמך שהיית צריך להזיז את העכבר עס הרגל: היה לוקח לך הרבה זמן ללחו על דמות קטנה. מפות התמונה שבצד הלקותח יעבדו טוב אפילו עבור משתמשיסם שלא יכוליס להשתמש כלל בעכבר: הדפדפן יכול לעבור על פני הקישוריס בתגובה לפקודות מקלדת (מקש טַ13). יש להטמיע בדף כל סוג של יישומון שמשתמש בפריטי תקשורת מעבר ל-1א₪1 סטנדרטי כדי לאפשר ביצוע פעולות ללא שימוש בעכבר. תכונות אלו כלולות כחלק מתקן 38/8 ו-א6עט6ה, ולכן זהו פשוט עניין של שילוב נכון של הקוד על פי ההנחיות הרשמיות של 05ח05/506ז₪16 חט5, 50%סזסו1 ויצרני כלים אחרים. מגבלות קוגנטיביות בתחילה, האינטרנט היתה יימגרש המשחקיס'י של גולשים אינטיליגנטיס מאוד שהיו הראשוניס לאמ טכנולוגיה מתקדמת. ככל שה-60/ הופכת למדיוס עממי, יהיו לה יותר משתמשיס בקשת רחבה של השכלה, דעות, מנהגיס ותפיסות וצריך לוודא שהתוכן יהיה מובן לכולס; לתלמיד ביייס יסודי, לסטודנט, למזכירה, לפרופסור באוניברסיטה וגס לאבא שלו. פרק 6: אפשרויות נגישות למשתמשים בעלי מגבלות 309 בנוסף, יש לתמוך במשתמשים שיש להס בעיות קוגנטיביות (למשל, בתפיסה). אנשים אלו עשוייס להיות אינטיליגנטיס מאוד, אך עדיין לסבול מהפרעה מטרידה. לרוע המזל, המחקרים שעוסקיס בממשקי משתמשים כמעט ולא התמקדו במגבלות קוגנטיביות, ולכן ההנחיות לתמיכה במשתמשיס שסובליס מהפרעה זו לא מספיקות, נכון לרגע זה. האנשים שונים וה מזה במיומנויות החשיבה המרחבית וביכולת הזיכרון לטווח הקצר, למשל. תוכניתניס ומעצבים גרפיים נוטיס לקבל תוצאות גבוהות וחריגות במבחני חשיבה מרחבית, ולפיכך הס טובים בחיזוי מבנה אתר 65/. בדומה לכך, לאנשיס צעירים (כולל רוב מעצבי ה-60/) יש יכולת ויכרון טובה לקוד מעורפל, כגון כתובות 081, מאשר לאנשים מבוגרים. אפשר להניח בביטחון שבכל הנוגע לניווט באתר פ6/ לרוב המשתמשים יש קושי גדול יותר מאשר למעצבי האתר. ניווט פשוט יותר מסייע לכל המשתמשים, אך הוא נדרש במיוחד עבור משתמשים שנמצאים בשני קטבים מנוגדיס: אלה שיש להס בעיה לראות את מבנה הנתונים יכולים לקבל סיוע ממעצבי האתר בצורת מפת אתר (80!! 6ו5). הס יקבלו יותר סיוע אס הדפדפן שלהם יעדכן את מפת האתר, ויציג את נתיב הניווט ואת מיקוס הדף הנוכתי. חיפוש ללא איות ניתן להשתמש ברעיונות רבים שמתקבלים ממחקרי אחזור מידע וליישם אותם ב-60\, כדי למנוע או לפחות להפחית את הצורך באיות מדויק בממשקי החיפוש. מנוע חיפוש שאינו דורש רמת איות גבוהה יהיה הדבר העיקרי בסיוע למשתמשים דיסלקטיים וישפר את השימושיות עבור כל הגולשים. דרך הפעולה של חיפוש על פי דמיון (שוזג8!ווחו5) היא לאפשר למשתמש להקליד משהו כמו "5וח+ 6א!| 6זסוח 6ח 616" (וגם "86 66!! 655! 6וח 6עו6"), תוך הצבעה על מסמכים קיימים. היתרון של חיפוש על פי דמיון הוא שלאחר שמצאת משהו שמתאים למה שאתה מחפש, תוכל למצוא עוד דברים כאלה ללא ציון של מונחי החיפוש. עליך למצוא את התוצאה הראשונה בעצמך, אך תוכל להמשיך ממנה לעוד תוצאות אחרות. חיפוש פרמטרי (סושפחחִהּזה3ק) מאפשר למשתמשים לציין את ערכי הפרמטרים השונים. לדוגמה, המשתמש יכול לבצע חיפוש של מוצרים שעולים למעלה מ-%1000 והוצעו למכירה בחודש האחרון. אם האתר תומך בערכה עשירה מספיק של פרמטרים, המשתמשים יוכלו להצר את מרחב החיפוש שלהם בלי להקליד מילה נוספת. במקרים רבים, המשתמשים יכולים לציין את הערכים הרצויים על ידי הזזת סרגלי גלילה, כך שהם לא צריכים ליצור טקסט בעצמם. כמובן שיש לאפשר הזזת סרגלים כאלה גם ללא העכבר כדי לתמוך במשתמשים עם מגבלה מוטורית. 0 עיצוב ממשק באינטרנט למשתמשים דיסלקטים יכולה להיות בעיה בקריאת דפים ארוכים, וניתן לסייע להס על ידי עיצוב תכונות שמקלות על הסריקה תוך שימוש בכותרות, כפי שצוין קודס לכן. בחירת מיליס בעלות תוכן אינפורמטיבי טוב, כגון הנחיות טקסט, תסייע למשתמשים אלה, וכן למשתמשים עיוורים, במציאת קישורים מעניינים (הימנע מלחצני יסזסח אסו[6י). רוב ממשקי המשתמש של מנועי החיפוש דורשיס מהמשתמש להקליד מילות מפתח. פעמים רבות, משתמשים שאינס יודעים לאיית (וכן משתמשיס דוברי שפות אחרות) לא יצליחו למצוא את מה שהס מחפשים, כל זמן שיש צורך בהקלדת המיליס המדויקות. כמינימום, על מנועי החיפוש לכלול בודק איות. אפשרות אחת היא לבדוק איות של כל מונחי החיפוש שלא נמצאו להם תוצאות, ולהציע למשתמש אפשרות ללחו על רשימה של הצעות לתיקון האיות, ולחזור על החיפוש עס המונחים המתוקנים. מסקנה: גישה פרגמטית בכל מה שקשור לנגישות אני מודה שאתרי ה-60/ שעבדתי עליהס אישית לא יישמו תמיד את כל הנחיות הנגישות במלואן. יש לי גישה מעשית לעניין השימושיות ולפעמים אני יימעגל פינות'י במטרה לעמוד בלוחות זמנים, או כדי לספק צרכי עיצוב אחרים. אך עדיין יש הבדל גדול בין עיצוב לא מושלס לבין עיצוב פזיו לחלוטין. גס אס אינך יכול לעצב אתר נגיש לחלוטין, אתה אחראי לכלול כמה שיותר תכונות נגישות. רבות מתכונות אלו, דרך אגב, קלות וזולות מאוד ליישוס. אתה יכול לבדוק חלק גדול מבעיות הנגישות בדרך פשוטה על ידי גלישה לאתר בדפדפן טקסטואלי בלבד. אס האתר נראה טוב ופועל טוב במצב זה, הוא יהיה נגיש בצורה סבירה עבור משתמשים עם סוגים רביס של מגבלות. כדאי גס לבקש מעיוור צבעיס לבדוק את כל הגרפיקה או לפחות לצפות בהן בעצמך בגרסת האתר בגוון אפור (678/569|6). בסופו של דבר, הדרך הטובה ביותר לבצע מחקרי שימושיות היא עם משתמשים שיש להם מגוון מגבלות, אך משוס שיש כל כך הרבה סוגי מגבלות שצריך להתמודד איתן, זוחי אינה עצה מעשית, פרט למקריס בהס מדובר באתר שעוסק ספציפית במשתמשים מוגבלים. פרק 6: אפשרויות נגישות למשתמשים בעלי מגבלות ‏ 311 נוימועש בינלאומי: מתן שירות לקהל מרחבי העולם לא לחינם קוראים לה 60/ 6סו/ 6!זס/. לחיצה אחת יכולה להעביר אותך לאתר בארץ אחרת, וכל עסק יכול למשוך לקוחות ממדינות ברחבי העולם ללא צורך להגיע פיסית למדינות אלו. החשיפה הבינלאומית חסרת התקדים שנוצרה בזכות האינטרנט, מגדילה את אחריות המעצבים להבטחת השימושיות גם עבור לקוחות בינלאומיים. שימוש בינלאומי כבר איננו בבחינת תופעה יוצאת דופן. פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם | 313 רוב חברות המחשבים עושות את מחצית מכמות המכירות שלהן בארצות אחרות, ויש כמה ספריס שפורסמו ואשר יעצו למעצביס ליצור את ממשקי המשתמשיס שלהס בצורה שתתאים לכל מקוס בעולם. בשנת 1997, כ-80% ממשתמשי האינטרנט היו תושבי ארצות הברית וקנדה. בשנת 1999, חלקן של ארצות הברית וקנדה בנתח המשתמשים ירד ל-55%. אני די בטוח שמצב המשתמשים יגיע לחלוקה שווה בין משתמשי צפון אמריקה ושאר חלקי העולס במהלך שנת 2000. השאלה היחידה היא אם זה יקרה בתחילת השנה או בסופה. סביר להניח שהמצב יתהפך עד שנת 2005, כאשר כ-20% מהמשתמשים יהיו תושבי צפון אמריקה ואילו השאר, כ-80%, יהיו משאר חלקי העולם. אני צופה שבשנת 2010 לערך, כמות המשתמשיס באינטרנט תגיע למיליארד, והחלוקה שלהס תהיה כ-200 מליון בצפון אמריקה, 200 מליון באירופה, 0 מליון באסיה ו-100 מליון בשאר רחבי העולסם. (חסו!|ורח 100) 518005 00)וחנ ית (חסוו|ווח 8) 630308 (חסו|וורח 12) והסססחוא הסווח( מ (חסו|!ורח 9) צההרדו6כ) ו (חסוו!וחח 9) 818 חו0ח508 (חסוווורח 5) טצוםז! א (חסוו|ורח 3) 6סח3ּז-] מו (חסוו|ורח 3) מוהסס (חסו!!ורח 3) 05ח8סח)סצ אא (חסוו!ורח 5) 8ו|98גוה (חסו|וורח 15) הבסה ית (חסוווורח 3) 68זס4 הְז500 רת (חסוו|ורח 3) העוב ך 3 (חסו||ורח 3) |ו82זם (חסוו|ורח 14) זסו)2) או התפלגות משתמשי ה-66// בשנת 1999. מקור הנתונים: 6/5ש50 10767061 מש 4 עיצוב ממשק באינטרנט המקרא מתחיל מחלק זה בכיוון השעון ברור שמודעה זו לא פותחה תוך התחשבות במשתמשים בינלאומיים. בכחצי ממדינות העולם, מתג תאורה במצב כמו זה שבמודעה מייצג מתג מופעל. העובדה היא שיש הרבה מאוד הבדלים מהותיים בין המדינות והתרבויות השונות בעולם, וזוהי אחת הסיבות העיקריות לביצוע בדיקות משתמשים בינלאומיות, כמתואר בהמשך פרק זה. למרות שניתן להימנע מבעיות קשות רבות על ידי קריאת מדריך סטנדרטי ליצירת ממשק בינלאומי לתוכנה, ישנם דברים קטנים יותר, למשל: בישראל קוראים לזה 083 6% ובגרמניה 11% 60!3 (וזה לא כתוב באף מדריך). בינלאומיות מול מקומיות בפיתוח מסורתי של תוכנה, יש הבדל בין הבינלאומיות למקומיות. המונח בינלאומיות (ח0ו8!!280חסוזהח%67ח1) מתייחס לעיצוב יחיד שניתן להשתמש בו ברחבי העולם, ומקומיות (ח068|28%0 |) פירושה יצירת גרסת דף מותאמת במיוחד למדינה מסוימת. הבינלאומיות דורשת שימוש בשפה פשוטה יותר, שמשתמשים שאינס דובריס אותה כשפת אס יוכלו להבין, ואילו המרת הדף למקומי לרוב דורשת תרגוס. באינטרנט, כדאי יותר ליצור דפיס בינלאומייס מאשר מקומיים, משוס שברוב המדינות אין מספיק משתמשים כדי להפוך את העניין ברמה המקומית לכדאי. לעיתיס מקצריס את המילה ח2800ווהַחסוהחזס+ח1 ומשתמשיסם בקיצור א118 (האות הראשונה והאחרונה, ואזכור 18 האותיות שביניהן). באותה הצורה, לעיתיס מזכיריס את המילה ח1068|280₪0 על ידי הקיצור א110. אני לא אוהב קיצוריס אלה ולא אשתמש בהם בספר זה. עיצוב בינלאומי רוב ההנחיות לעיצוב בינלאומי באינטרנט דומות לאלו שבעיצוב תוכנה מסורתי: אל תשתמש בסמליםס שמפורשיס על פי שפה מסוימת, אל תשתמש בדימוייס (160800015!) מהשפה שלך וכוי. פרק זה יבחן חלק מהנושאיס הספציפיים ל-60/. משתי בחינות, קל יותר לעצב ממשקי משתמש בינלאומייםס עבור ה-60/ מאשר עיצוב ממשקיס כאלה עבור תוכנות מסורתיות. ראשית, ל- ₪ יש הרבה קודי תוויס בינלאומיים, הבנוייס בתוכה מלכתחילה כחלק מהעובדה שהיא פותחה בשוולא. שנית, דפי 60/ לא מעוצבים על פי סידור 6+/ו51צצ נוקשה, אך הס מאפשרים גלילה והתאמה של כל דף באתר למחשב המשתמש, ולכן קל להמיר את העיצוביס לשפות עם מילים ארוכות, כגון גרמנית. פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם | 315 9 !סוט 9-9 וו צחסד | 810,000 צבפשםה יסיס פ5תססספם תש 15 161 +מפו |פנפו[ 0%נ[2) ,1087 [הוננ עח פחוש אצ חפצט !1 וא - הש 5 5085 - 0%55ש0 5064 - 8505 - 0]355/₪05 - 8305 - 553768 500|8ק - 03085 שפ!!|פצ [!ה-טא ] 18018 חב 5שפ 6 93 ,ד ,85הו13032 ,%5ה8עם %חהפזוט [1-טא ] 5001715 0ח8 ה₪0676800 6 8 זפ טא פחהסתק ,385 הסוכ ,385זפון וק > .1.5 ,₪50!0705 ,85ו הט 8 ...חופפחוְטַחם ,שוהפהס5ה ,שססופום ,05 8 ]5008 5 חח 00 ,5001007 ,לסס!|סספזח%חה 6 0חה צז50610 * ...חפו0ו|₪5 ,%הפרהתפזוטחם ,18מסבס 5ווחטר טוחה 15וה 6 15873 ,1300 ס%סחם , 6 פ+וחסזם [!בּ-טא ] צֶוו0ה60= 0חה 55חו5טם רחש !רחס ,בח 5פטח1 ,55!ה3 רת 00 [!-טא ] 81ח7ו16ח1 חב 175 600 6 ...013 8רח10 , פזב 50 , ושע ,5%חזס6חז חס ₪ חב חח 001!508 ,4-12 ,5055ץפטוחש [!ב-טא ] 1ח6 ווחהו8 וזה 6 .. מסרחטר] ,10516 ,85וש0 ,85חו [60 יהוי . בי סי 1 = = 5 5 ₪ 5 6 5%חזפ%ח1 !ססח בל - ₪108 פפש 08'5 53 - ₪25 זס+ !5חבטו|פפחביץ - | ספחביי שו 5 זםפרב ב // - 603% - %5חפטם 0 8/ 5'צ003ד - 01665 | פ בצ ספח5 !ספחב'ץ - אהו !ספחב3'ו ההסבחבה חבז ₪ .0.6 - ה3קב2 - שה03ת087 - ב6ה3"ה - 037303 5ססהבצ |ההסטבא 5 05 - ה+וס שא אס= | 23|!35 - 00/6309 - ח505%0 - 3500 - %3חב|% 1605 !ססחבּצ ח055חוח35/ - ]5830 - שֶ53 .5 - אזסל ₪ - [טבק 56 = 5|ס קב פ חח [1063 6% 0 0 !3+ - 5זס%טוח 00 - הסטבּרתזס+ה1 שחהבסרת 00 - 5065 וטסיל ב8בטח1 60 שפם 800.60 ./ש/ע/ע התאמת אתר ססח8ץ לגרמנית לא דרשה עיצוב מחדש של ממשק המשתמש כולו. למרות זאת, הגירסה הגרמנית אינה המרה פשוטה, מילה במילה, של הדף המקורי. לדוגמה, קטגוריית הספורט בגירסה הגרמנית מכילה קישור לכדורגל (ווהּפ8טח), שאינו מופיע בגירסה האמריקאית. 6 עיצוב ממשק באינטרנט 66 !ססמאע 9-8 זטב !ססחבצ -) בב מפותטר זופזח1 צי הפרוססככ | ח18ז518 8ח6ש% [ושא6ו1] ה6זח6ווה6בצ 6 6538ב 6 055 ,56087ז5+ו6 / , חש ח6ס/!פום וחד חש 81% 560ח1!556עשוט הצ ₪ [66ו1] 612801 נחט 50011 6 הזח 133 , 8|5ו50 ,||בפקטת ,פס [זפ>סוד] א1זו|סק חט 5188% 6 0% ,5087087 ,אסוסם -7 ה | נחט 518016 6 ץפחב | ,2ו9שח56 ,0559778160 ,00ח6560!3פם [668ו1] הַחטם!החיו6ה!! 6 הפוזח265 , א1051] ,סחו> ,הפהפ5חזם: - ה05!₪] 970115 ו 5000 פסטפרן שש וטפא לשססחובעצ הט !ופט חטש החטטוום * ח8 5360 ,ח8!ש560 , ח8|ט560ת6ס חן הט "וקו 60 9 סב אוחהטרח רה 60 , פב 50 , וע ,5% ההז 0% זוחאש -00815%605 ₪ 53608 ,3556016058 , 8וחם ס5פ!וחס [זשאסו1] יו א החש 658]!56087% % זז 05 , חסוסו| ,6 פשרחש חו16012 נחט 0850000871 % בחטזח ב חזם , ח65וח > חב , חהו2וב פה [668ו1ד] 5608דווע חנ |08ח13 9 בַחט0ו3 ₪556 , 131%5! , הפרחזות וא 6 ז 66 ח6זה ,3% הד ,זו 3 65 1 ?וב !טסב 35 = - הסהפצוסחג סח הפסב-ת , 8וום - בחב|הס5סטופם וסספחבצ וסט ופא | הסרוב 10 הפטופח56 - וקלחו בסו5- פע פזח] 518 חפסטז 50 800.60 ./ש/ע/ע פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם | 317 8 עיצוב ממשק באינטרנט לדוגמה, בעיצובי ממשקי 601 היה כלל לפיו יש להוסיף לשטח תיבות דו-שיח עוד 30% משטח הטקסט, כדי לאפשר את הרחבתו במידה ויהיה צורך להמיר אותו לגרמנית. ב-69/, ניתן לתרגס דפיס לשפות אחרות, והסידור שלהס יתכוונן אוטומטית ויתאיס את עצמו למיליס ארוכות. הנושא החשוב ביותר, שצריך לזכור בעיצוב דפי פ6/ שמיועדים לתרגוס הוא לא ליצור עיצוב מוגזס ועמוס עד כדי כך שהדף לא ייראה טוב, אס חלק מהמילים יזוז למקוס אחר, או אס כמה תאי טבלה יתרחבו. ב-60/ יש עוד עניין חדש יחסית לעיצוב תוכנה מסורתית: האינטרנט מאפשרת פעולות הדדיות בזמן אמת. לדוגמה, ניתן לבצע שיחות עס אנשים ולהציג תוצאות מתחרויות ספורט שונות בזמן אמיתי. תכונות אלו דורשות ממשקי משתמש שמאפשרים לגולשיסם מכל רחבי העולס להשתתף בפעולה בו- זמנית. עס ואת, עליך להיזהר. כשאתה מכרי על אירוע שמתרחש בזמן אמת, אינך יכול פשוט להגיד שהוא יקרה בשעות 30-4:00 :2. ראשית, האס מדובר ב-30 :2 בבוקר או אחר הצהריים: שנית, איך הגולש מתרגם את הזמן שפרסמת לזמן המקומי שלוז נכון שלא נהוג להתחיל אירוע בשעה 3:0 :2 בבוקר, אך אס הזמן המקביל במדינה אחרת הוא 3:0 :11 בבוקר, הדבר נראה הגיוני יותר. כל הזמניס המפורסמים בדף 60/ צריכים - כמינימוס - להבהיר תמיד אס הם ניתניס לפי מערכת שעות |0/וה או לפי מערכת של 24 שעות (במקרה של מערכת |אם/ה, יש להוסיף את צמד האותיות המתאים) וקו האמן שהס מתייחסים אליו. ציוני קווי זמן (כגון דס=) לא מובניס ברחבי העולם, ולכן עליך להודיע לגולשיס מה ההבדל בין הזמן שציינת לזמן זוא הסטנדרטי. משתמשים רבים לא מבינים גס את משמעות המונח ד6, ולכן כדי לשפר את השימושיות יש צורך בתרגוס הזמן לזמניס מקומיים בכמה אתרים עיקריים. לדוגמה, אתה יכול לציין שפגישה מסוימת תתחיל בשעה ה1:000 לפי זמן ניו יורק (5- ד61), שעה 19:00 לפי זמן פריס ו-3:00 ביוס למחרת בטוקיו. איו לפרסס את תאריך האירוע בציון כגון 4/5. האס מדובר בחמישה באפריל או בארבעה במאי! תמיד עדיף לאיית את שס החודש בתאריכים שמופיעים בפורמט קצר, אותס משתמשים רבים עלולים שלא להבין. רשוס 00-ץ18-04 ולא 04/05/00. שינוייס אחרים כולליס ציון סוג מטבע (%1,000 מול 0), סמל או קיצור המטבע, ויחידות מידה (יארדיס מול מטרים). בדיקה בינלאומית בדיקה בינלאומית היא דרך מצוינת להבטיח את שימושיות עיצוב ה-65/ ברחבי העולס. לצורך ביצוע בדיקה בינלאומית, יש לדאוג לכך שהעיצוב שלך ייבחן וינותח על ידי גולשיס מארצות שונות, אשר יציינו אס עלולות להתעורר בעיות בהצגת הדף במדינה שלהם. בניגוד לבדיקות משתמש בינלאומיות (שמתוארות בסוף הפרק), בדיקה בינלאומית בנויה בחלקה מניחושיס, משוס שהיא אינה מערבת משתמשיסם אמיתייס שמבצעיס משימות אמיתיות, אך היא לפחות מביאה לניחושיס מלומדים. עדיף שהבודקיס בבדיקה הבינלאומית יהיו מומחי שימושיות ממגוון ארצות. רוב יועצי השימושיות מבצעיס בדיקות שימושיות כחלק מעבודתם היומיומית, ולכן הס אמורים להיות מנוסיס במתן חוות דעת מעין זו. האם שם ה-חוזגּוווסע חייב להסתיים ב-601. ? השאלה הנפוצה ביותר שאני נשאל בזמן הרצאות ברחבי העולם היא אם כדאי להשיג שם חוהוחסכ עם סיומת וחס6. או להשתמש בסיומת הארץ (כגון 6ט., 59., 66. !ו. וכדומה). לרוע המזל, משתמשים רבים התרגלו לראות בסיומת "חסס." סיום סטנדרטי לאתרי 60/ מסחריים. הרגל זה נובע מהימים בהם החברות האמריקאיות שלטו ב-6\ עד כדי כך שחלק מהדפדפנים הוסיפו, באופן אוטומטי, את הסיומת וח0ס6. לכל שם. עצתי היא, בהתחשב במצב: % אם האתר שלך דובר אנגלית והוא מיועד בבירור למשתמשי העולם כולו, השג לעצמך חוהּוחסכ עם סיומת חסס. . 4 באתרים שמשתמשים בשפות אחרות, השתמש בסיומת מתאימה על פי הארץ. % באתרים שבנויים בעיקר עבור קהל מקומי, שמכסים נושאים מקומיים או מוכרים מוצרים מקומיים, השתמש בסיומת הארץ, ללא קשר לשפה בה אתה משתמש באתר. אני ממליץ להשתמש בסיום המקומי (ןו.60. בישראל) עבור אתרים מקומיים משום שתהיה זו הטעיה להשתמש בסיום "בינלאומי" עבורם. כיום, מתפתחים שירותי מסחר אלקטרוני ושימושים אחרים ב-60/ ברחבי העולם כולו. במצב מעין זה הגולשים מתחילים לצפות לסיומות מקומיות של אתרים מקומיים, והם לא ינסו להקליד את הסיומת וחסס. כדי להגיע לשירות מקומי. היכולת לספק שירות מקומי היא עניין חשוב בשיווק ומכירה, ולכן עדיף להשתמש בסיומת הארץ כדי למשוך גולשים מקומיים, אלא אם בעל האתר רוצה ליצור במכוון אשליה מטעה. פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם | 319 (בעמוד הבא) כל מי שמגיע לאתר זה ממנוע חיפוש, מצפה שהוא יהיה מדריך טיולים כללי לצרפת. משתמשים עם חוש טכני עשויים לבדוק את כתובת ה-081 של האתר ולגלות שהסיומת שלה היא ז6ח., דבר שמעיד על אתר בינלאומי או אמריקאי. למעשה, אתר זה ממוקם באוסטרליה והוא מיועד לסייע לאזרחים אוסטרלים לטייל בצרפת. הבלבול נגרם משתי שגיאות עיצוב: מיקום האתר תחת שם שגוי וחוסר בכותרת כגון "חן ט68זטם פוט ד ה6ח6ז= 88| פטה". 0 עיצוב ממשק באינטרנט בכמה ארצות יש קושי למצוא יועצי שימושיות, אך בצפון אמריקה, רוב ארצות אירופה ובארצות המובילות באסיה יש יועציס רביס כאלה, שניתן ליצור אתס קשר באמצעות קבוצת הדיון טח ו 60 באינטרנט. אס אינך מוצא יועצי שימושיות או שאין לך תקציב כדי לשכור אותם, ניתן גס להשתמש בגולשיס מארצות שונות, שאין להס ידע בשימושיות. משרדי המכירות המקומייס של החברה שלך יכוליס לשמש פעמים רבות כמקור להשגת כוח אדם ומין לבדיקות בינלאומיות, ואתה יכול פשוט לשלוח להס את כתובת ה- ₪1( של עיצוב הטיוטה שלך ולבקש הערות. כשמומחי שימושיות מבצעיס את הבדיקה הבינלאומית, ניתן לשלוח מפרט ממשק משתמש שעדיין לא הגיע לשלב העיצוב. המשוב הבינלאומי שתקבל בשלב מוקדם זה מגדיל את הסיכוי למצוא בעיות עיקריות, בזמן שעלות התיקון שלהן עדיין נמוכה. אס אתה עובד עס בודקים בינלאומיים שאינס מומחים לנושא, מומלצ לרוב לתת להם דוגמת אב טיפוס, משוס שהס עשוייס להתקשות בקבלת תמונה של ממשק המשתמש מתוך מפרט כתוב. אין צורך לדאוג שכל הקישורים יעבדו או שהתמונות יושלמו. להיפך, עדיף לתת לעמיתיך מהארצות האחרות לבדוק גירסה ראשונית של העיצוב. הדברים שמתגלים הרבה פעמיסם בבדיקות בינלאומיות הן שהלוגיקה העסקית שלך שונה לחלוטין מהדרך שבה לקוחות במדינות אחרות עושיס עסקים. עליך לדעת את הדבריס האלה לפני שתשקיע יותר מדי מאמצים ביצירת גישה מסוימת באתר שלך, ולפני שעיצבת את כולו בפרטי פרטיס. אתרים מתורגמים ורב לשוניים הדרך העיקרית להפיכת אתרי ט6/ למקומייס היא לתרגס אותס לשפות הנפוצות ביותר. אתה יכול לראות, על ידי ניתוח קבצי ה-108 של השרת, אם יש קבוצה גדולה של משתמשים מארצות מסוימות. במידה ומתגלה קבוצה כזאת, יש כדאיות בתרגוס האתר לשפה אותה הקבוצה דוברת. עס זאת, אינך יכול לסמוך רק על קבצי ה-108 כדי לבחור באפשרויות התרגוס, משוס שיש בוודאי משתמשיס חס ור הסוז3 וחזס)ח! | פזפחזוב?] חהו|3זופוות חק 8!!30- פוה חו 58ו|508013 סח 0305 |פצבזד חהבו|ב150ום +ם פטחבּז פצופחהפסאם חם . פסחבזת 0ם |פצבי חוסן3ררחסיזרך .35 ו סַחוהחבו0 בבוס 508 חב בסחבזה סטוסט3 הססבההזס)חו |בפחסבּזק פחסוסס . חהסוחַ8ז ץם בסחבּז= פזסומאם 5 |פצבם טוסץ 35 פ|טב!וב ב 85םוססב זם 8החבּז פ/ו5הססאם פרס סס פבוטם ם בסחבז= סחטסזב בסחפת ובעסספום 856[ חב |טס 83 5סו זם+ 5נסרחב+ 15 פסחבּזת , 3035!ו 6 חב הס , 5הוב6חטוסרת סוח8ס5 , 85ח6בפם 4/0/0000 4 , חואו בסו15ו0אם , 0+ 5ס|30 , 5חס5רח סו סס5וח שב חב 0370805 בַחו63 סב פזם , פחפצח ב|טבספטזוםוחט ש22/0 5 .5005 6355 בחזסאוי 4 % : זב 55ִהַנום חב 51185 ,85ז35+ || 3 פסחבּז= 0+ קחז זגוסץ 38 0+ 80זבסוחתסססבּ 5פזר 85%ח 8+ חו זפח זחא , סחהפתפקאט פ|טבּזסוחטו , בוטב ץסןחט ,חגת הַחו8%וח50 35 פסחבז= ,00% זם חובּזל ,003% ,5 ,חבס עט ,5|פזפסח זם .החסץזפעם זם+ ] אס 0005 .035 חן 0108 830ח 5 'טסחבת ב| 8 ח8350 פופו ו 1 | 5 -2%771790/03ד9/-1! מש 60 הוספוא מעוד6 הש דאו אס צם מדו5 פפו ה שש -. בי 78/.0% .3000006 ./ש/ע/ע פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם | 321 אתר שנת 1998 של 5וחץ!0 סחהּחָב3! עשה ניסיון מעניין לשלב שתי שפות רשמיות בדף ראשי יחיד. למרות שהעיצוב מעביר את ההתרגשות והתנועה שבמשחקים, בסופו של דבר הוא מבלבל מדי, בשל כפילות השפות בצורה בה הוא עוצב. עדיף לאפשר לגולשים להציג דף בשפה אחת, ולתת להם אפשרות לבחור שפה אחרת. 8 סא אא כסצ )אצ 8 % 8 ו טזס.6וקוחץ/ס. סח8ס4ח./ע/ע/ע 2 עיצוב ממשק באינטרנט סוכ רהע!כ) +ח6רהו6טנוסוש] 1/6 בהו ו מממ 2 ההתוות] 200 4 | ₪ 6 זפצות'8 85טףוחץ!0 אש18 85ו|וץא רביס שלא מתכווניס להיכנס לאתר שלך עד שהוא יופיע בשפה שלהם. למעשה, אס קבצי ה-108 יספרו לך שארצות מסוימות לא מיוצגות כראוי יחסית לגודלן ומספר משתמשי האינטרנט שלהן, או יחסית לכמות הלקוחות שיש לך באותן הארצות, תוכל להתייחס גס לארצות אלו כמקומות שיש לתרגס עבורס את האתר. בעולס האידיאלי, היית מתרגםס את האתר כולו לכל אחת מהשפות שחשובות לקהל שלך, וכן היית מוסיף תוכן מקומי שמעניין את אותס האנשיס באותן המדינות. אס תעשה כך, כל תרגוס יהפוך בהכרח לאתר עצמאי, ורכיב הממשק המיוחד היחיד לו תודקק יהיה רשימת כל הארצות האחרות בכל אחד מהדפים הראשיים. עס זאת, לרוב החברות אין מספיק משאביס להשלמת התרגומים, ולכן הן נוהגות להשתמש במודל מעורב בו חלק מהדפיסם מתורגמיס וחלקס נשאר בשפה המקורית. גישה זו גורמת להפיכת אתר להיות רב לשוני בתוספת מאמצ קטנה שיכולה לפתוח דלתות גדולות. +חסרהס6טסו/] סוקרהץוכ) 6חד ]דט | 5 0 והזו ו + % שק 0 יוו בב 5 פפו 5 וו ו 0 שש ל 5 0-ו 7 6% ו 0 ,הסקכ) ההז 7 או 01 6ו51 1הו0/06 = א | 5 005 שיי, ... 085א8וק 0) שד סא ץ 1% זסם זב טפע3ו ש5=ן/ים 5078 טהב הורת58 !ב הפוסבפוצחן 2 ' + 2 ₪ - 9 2/9 הדי = אהזוג] ץ 3003 הזוס הוסחטורח 3| פוט 50 סנס א ץ ספזום 18860 ססאטוו ₪ אם וזפו סטחטרח |8 ח8 1581 08 הטוסבּוזסזח! 35 בּזבק 0 חפ פהסחום ץצ 315 חטש 58800008 1 ההזגרזסי1 688תופנום-6 ]113% 6מד ו וו וזו ₪ !ומת 16 סו א + ימינ וק ריני ו 5 וטו >< אסוסההסקהס6 מו < למרות שרוב האתר הזה תורגם, המידע אודות וחטזס= 655חופט5-0 וה-687705 0ח0|8 לא תורגם. לרוב מספיק לציין קישור למידע לא מתורגם על ידי שינוי שפה פשוט כפי שנעשה כאן. לחילופין, ניתן גם להשתמש בסמל קטן שמציין קישורים שמצביעים לחומר בשפה אחרת. דבר זה יתאים במיוחד לקישורים שמוטבעים בתוך דפי טקסט, שם המעבר הפתאומי לשפה אחרת עשוי להיראות לא מתאים. פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם | 323 ה-ותט6פגו1] 81366 |החססבּו בטאיוון משתמש בדף ביניים בו המשתמש נדרש לבחור בשפה הרצויה לו, לפני שהוא נכנס לתוכן האתר. היתרון בגישה זו הוא שאפשרות בחירת השפה מוצגת בבירור, אך המחיר הוא הצורך להעביר את כל המשתמשים דרך דף בחירת שפה מבחינות רבות, ממשק המשתמש הבינלאומי האידיאלי הוא ממשק שזמין למשתמש בשפה המועדפת עליו. בסופו של דבר, בחירת השפה צריכה להיקבע על ידי החלפת מידע בין תוכנת הלקוח לשרת שלך, כדי שהמשתמש יצטרך לציין את השפה המועדפת עליו רק פעם אחת ולתמיד. כיום, החלפת המידע שנוגע לתוכן לא נמצאת בשימוש רחב מספיק כדי שניתן יהיה לסמוך עליה, ולכן אתרי ט6) רביס משתמשים באפשרויות ידניות לבחירת שפה. שלוש הדרכים הנפוצות ליישוס אפשרויות בחירת השפה הן להשתמש בדף ביניים, להוסיף תפריט שפה לדף הראשי, או להוסיף תפריט שפה לכל הדפיס הבאים אחריו. אני מעדיף להשתמש בדף בינייס רק כשקשה להחליט על שפת ברירת המחדל עבור הדף הראשי. בסופו של דבר, אם תבחר בשפת ברירת מחדל טובה, כל מי שיעדיף את השפה הזו יוכל נוסף. להשתמש באתר ללא השהיה. 0+ 6וחסס|6/\. , 4 0% . והט1086] 23|366 [הּחסוזפּא 6חד 5 3 | :ה חה3ּ| זטוסץ אסום 08858 , זסזחם טופ הזסזפם ו ז / 5% 2% "/ : ץצ (16-8) 6 שי יוו ו ו עשז.שסס. סח ./ש/עעע 4 עיצוב ממשק באינטרנט 6 (6) אחָץ 000 376 5008 5/ל6 0% 6+5סת0ש מץוסת₪ 76 560 65פץ 801 , 91056000 23/3008 [בתססב' פד .200 ל סז 5 חסול6טיסס?]שסן 0ש2וץסל0/030% חצ 0016 ₪186 5878168 66 ה תפ טס תפוקת | 0 | | 0605 8נ6פיזסט0) ו 601+]יוס כדאי להשקיע מאמץ נוסף כדי להבטיח שההוראות בבחירת השפה יתורגמו כראוי לכל אחת מהשפות המתאימות. אם דף ראשוני זה מקרין רמה עלובה של עבודה בשפה מסוימת, משתמשים דוברי אותה שפה לא יטרחו להיכנס לאתר, גם אם שאר חלקיו מצוינים. אתה מוזמן לקרוא את הכיתוב באנגלית. 80.60 ,שש פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם בם=/ו מכו/תרכ ובזכו/תו תמכ]מבן מואזכוו-1 -[!!1תפידזוו6 [!יזסעו 178 הו פיזטעיז5 עו1 5עוםח5 הסוזב3-זטקזם.] סב א , עופאו אס נתחשב באיטיות הניווט ב-פ6/, כל מה שיחסוך למשתמשים צפייה בדף מיותר מהווה שיפור גדול בשימושיות האתר. טיעון אחר בזּכות שפת ברירת מחדל בדף הראשי הוא שלרוב, משתמשיס שלא מעדיפיס את השפה הנבחרת עדיין יכולים לקבל מושג מסויס אודות נושא האתר. לפיכך, משתמשים אלה יכוליס לקבל החלטות מלומדות יותר, ולדעת אס הם מעונייניס לבקר באתר ואס הס מוכניס להמתין לטעינתו בשפה שלהסם. אני ממליצ לאפשר בחירה בין השפות על ידי רשימה שמכילה את שס השפה כמילה, ולהשתמש בשפה עצמה כדי לבטא את שמה: לדוגמה, ח9115חם, 5הסחהּז.. הסמל החזותי בו משתמשים לרוב כדי לציין שפה הוא דגל, אך לרוע המזל, דגלים מייצגים מדינות ולא שפות. הבעיה בשימוש בדגלים כסמלי שפות היא שיש כמה שפות שמדוברות במדינות רבות, וכן יש כמה מדינות שמדבריס בהן שפות שונות. לדוגמה, השימוש בדגל ארצות הברית כדי לציין אנגלית ירגיז כנראה את האנגליס (בסופו של דבר, הס המציאו אותה...), וכן ירגיו את הקנדיס ותושבי ארצות אחרות. כמובן ששימוש בדגל קנדי לא יפתור את הבעיה משוס שקנדיס רביס הס דוברי צרפתית. ו . 55 ח"יונוטן! אחבח1 פוןן .1 31 %סם! 10 15חבּעו 1831 5116 שה1 50|8₪61 הסו+טזסקיזטס6 סםא הזה | ₪ ] (2 5541 %ב4%-ב16 צהשקהס) 5ה5%6ץ05+ה1 סש ./.ב=|| =און 225 | א 0, [ 6 זט6טז56 6] ז50 6טמ6צת6ום ₪16 3 וז 0 5 5 סבו 5הססבותזס?ח1 > בשפושוו 85 031315 : פפצטס | פ > הַחִוקַבּהַב₪3 > <> פחצטס ]| בחבזס > טם אטבצב 105 2 5 )תכס- 35סו5ו' ₪5 ותטחכסוטוום , 5חססופססאם 2 05 !]טס 05| > 5 ספ] אוב בסוסם. 2 0007885 08 03505 85 פהפספפווטפטם 4 8 23 85טסטדוסם 2 [50300ם 2 מ05חם 2 5ובפחבית 4 5 42-18 פזובההסספפטס 2 7 !בח 12 6 זטוסן ב 56 סזשוחחזסם שששסו/5073/.00/0076.7/ח שפת ברירת המחדל של מוזיאון ה-וטטס! היא צרפתית (וכי מישהו חשב אחרת ?!), כשבדף הראשי יש אפשרויות ברורות לעבור לאנגלית, ספרדית, פורטוגזית ויפנית. אני הייתי מסיר את האפשרות לבחור בצרפתית משום שאפשרות זו כבר פעילה, היא מבלבלת את המשתמשים ומעמיסה על הממשק. בנוסף, היה עדיף להבליט יותר את אפשרויות בחירת השפה מאשר רכיבים אחרים בדף (אבל בזה הצרפתים הרי לא מעוניינים, נכון?). אם אתה מניח שהמשתמשים אינם יכולים לקרוא את הדף שלך, אין צורך לדרוש מהם לסרוק את כל האפשרויות, כדי למצוא כיצד הם יכולים לשנות את השפה. 6 עיצוב ממשק באינטרנט ₪0 שש 8 . הסט 877 7 תת - 616016 .6ווקותה1 016 71101815502) 6שהנושונה! ה 6100506 86הסו .21016 ז6!! 6)א נ6א|[א ,0650616 2 5116 קם) [זס/ 117 167 מ5|0ז6 1601866 ₪616 מזזד ב ] 008 6%876הק-ז6|8 621997 זחףהעקס זזה ו החסס.כ./ע/ע/ע האם אתה תוהה כיצד המשתמשים הגרמנים מרגישים ביחס להבלטת הדגלים בדף זה? הסיבה לעיצוב הזה היא כנראה משום שאנגלית וצרפתית הן שתי השפות "הרשמיות" של הגביע העולמי, ומשום כך הם גדולים יותר. היה עדיף לציין זאת במפורש, עם שתי כותרות: שפות רשמיות ושפות אחרות. אם הגרמנים היו מוצאים קישור לגירסה גרמנית תחת כותרת משנית, זה היה נותן להם תחושה טובה כלפי השירות הנוסף שהם מקבלים במקום התחושה הרעה שהדגל המוקטן נותן להם. פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם 327 את 3<] אש כו מס ₪א)ו 0 וי 1 0015053 אא 380 ]מהתקסתט. 0 31506 סז 165 -ז0/רו00-50// 6 617 3ּזק5יותסות 97 1 לרוס וחו3]זבק ו ד דוו )491.4 5080247 ] 015ח2816וט ע הסה ופחד | ! טפצ | 6 חסוח!! "061 ה חט]א6ושזח= נחט 51806 הסחטוזא היו חפ| 5שוס ,הסמפח פופ . 2ח8זפ )חס 50 תנחפוספה 6 ||הנאה קם ,הסו5855 ס!ח1 9 בח להפרבזבק 85ח50ו3 מסזנום 6 ... הפהסססס5חז- 5 הסחטוזה 110 8ה156א בּיום חפיוה3 וס ע- הט 6זהסוהטאסס-55 : 5 הפטה טח 950 ד סח פהוהופדך * חפ תוב מסזטם 085 הפטהטטבא בּחפוק % ם ₪65 , חפהסם אב :בספחטזספטטה-קם = 5סחפוחבּוזבק . כב ... ח8ח0 0818030 חטש 155000558 6 "סחיו 6חו50 החש ה קסוטם 50060 נחט חסוזה:ה6ווטאסס לסב זובה טזפטזט0ם זפ פוב מסזטם * הּסזטם 20 הפוטנס5 * הז זט ח08 2 הפהַהטח9ו92ם 6 זו הח 2 350085 מסזום - קכה05 % ... חבז בח הפזחב הפץ|חב אופנוה 6 555% חספ ב>הפותבּבּם הססבּסתפותאסכ סח |ס חס ד חב 00 ח8ו0פ - הסז5 % 255855080% פהססמס הזו הקסיוט= | ַבפ]ווה הזו זספפטחה והש | ובּזח6 הומוסא "וחז | | "5101 זפ פע | דשצוא = דצו 8 3 58 ? אש 297090080 8156065 סז 6 לחאל %/06//06%340/ טיטפ . //: ססות < צאש זו טס .ההקסשס .שש אתר הפרלמנט האירופי משתמש בתפריט יוצא דופן לבחירת שפה. שורה של לחצנים עם קיצורי השפה בני שתי האותיות בפינה הימנית-עליונה של כל דף מעבירה לכל הגרסאות המתורגמות שיש עבור הדף הנוכחי. אם אין דף זמין בשפה מסוימת, תיבת השפה המתאימה אפורה ולא ניתן ללחוץ עליה. סכמת הניווט אינה ברורה מאליה, אך יש בה הגיון אם עושים בה שימוש עקבי. 8 עיצוב ממשק באינטרנט זאו ץ- 00 דאטא גג 015166 0 80 0או0א סא חפץ ₪ םוא ץ 00754 0 אוו 5005 אא ? 00 דא ץ זאג 50005 אא [דדאםו\ 1גג? אג608007 זט דאטואג אלל 0 זו טס ./הקסשס .שש ]חהקסהעם 3-ו 6 1 - ₪ זו ּ% .-' 3% הבור ןו [₪115 ויד ו ב 31310 58 5 נהנסנום 3 הדף הראשי של אתר הפרלמנט האירופי מכיל אפשרויות בחירת שפה בולטות יותר מאשר אלו שבדפים הפנימיים. פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם | 329 לחברת 66א |ששפזד יש את הכמות הגדולה ביותר של שפות שראיתי. השימוש בדגל אנגליה (ולא בדגל בריטניה) כדי לסמל את השפה האנגלית עשוי להיות נכון מבחינה היסטורית, אך הוא אינו שימושי כל כך. בנוסף, שם השפה הפורטוגזית שגוי. האיות הנכון הוא 65טפטצזסס, עם הסימן *. יש חובה לכלול את הסימנים המיוחדים של כל שפה בעיצוב בינלאומי. פעם הבאתי את האתר הזה כדוגמה בשיחה משום שרציתי להעיר על עניין הדגל האנגלי, אך אדם מהקהל, דובר פורטוגזית, העיר את תשומת לבי לשגיאת האיות בשם השפה. כמובן שהגולשים יבחינו בשימוש לא נכון בשפה שלהם, וכמובן שזו טעות עיצוב לעשות כך. 60 .068-/₪36-0ס/ץ שש 30 עיצוב ממשק באינטרנט ניתן להשתמש בסמלים חלופיים שמתאימיס לדימוייס לאומיים. הדבר עשוי להיות משעשע, אך יש להיזהר שלא לפגוע בקהל הגולשים (לדוגמה, לא כל האמריקאיס חובשים כובעי קאובוי). לרוב, עדיף להימנע מסמלים שמיועדים לבחירת שפה, ופשוט לספק רשימת שמות שפות פשוטה. עם זאת, עדיין ניתן להשתמש בדגלים שמתאימיס למיקוס הגיאוגרפי של השירות וקהל היעד שלו. לדוגמה, אתר תיירות שנמצא באירופה אמור להשתמש בדגל בריטי כדי לציין שפה אנגלית, אלא אס הוא מכוון בעיקרו לתיירים אמריקאים, ואילו אתר תיירות אמריקאי אמור להשתמש בדגל ארצות הברית, אלא אס הוא מיועד ברובו לציבור האירופאי. כבר ראיתי מקרה בו השתמשו בדגל האנגלי (צלב אדוס על רקע לבן), אך חייתי ממליצ להימנע מהאפשרות הזו, שנראית נייטראלית למדי, משוס שרק חלק קטן מאלה שאינס גריס בבריטניה יודעיס לוהות את הדגל האנגלי, הסקוטי וכוי. בין אס בחירת השפה הראשונית נעשתה באמצעות דף בינייס ובין אס בדף הראשי, יש תמיד לתת למשתמש את האפשרות לבחור בשפה אחרת בדפיס הבאים. בנ 3[ תספסותש זנוסוץ תג 1161 [סל3דך ב[זס כ יס[ 2 13 3 תס 16%[ ) = = ן] כב |סאגפפם מווספדעשם 5)אההת הפווסאם ררה 4 ןק ואפעחה| 5פאהוהפפפא 5מ6טזחסק ו אפשר את סימון הגרסאות המתורגמות יש להשתמש בכתובות ]חש שונות עבור תרגומים שונים של אותו התוכן, כדי לאפשר למשתמשים לסמן את נקודת הכניסה המתאימה ולעקוף את תהליך בחירת השפה בפעם הבאה שהם יבקרו באתר. הסיבה העיקרית לכך היא שמשתמשים רבים נכנסיס לאתר דרך דפים ברמה נמוכה יותר, ולא דרך הדף הראשי (משוס שהם הגיעו אל האתר דרך מנוע חיפוש, או משוס שעברו לקישור ברשימת הסימניות שלהס או באתר אחר). המשתמשים עשויים לרצות גם לשנות את השפה במידה והס מסוגליס להבין כמה שפות, והס מרגישיס שהתרגוס של דף מסויס בשפה המועדפת עליהם אינו טוב. בעיקרון, ברור שיש להימנע מתרגוס גרוע, אך מעשית לא חייבים לתרגם הכל. ניתן לבחור את השפה הרצויה בדפי הרמה הנמוכה יותר באמצעות תפריט שמכיל את רשימת כל השפות הזמינות, כמו באתר |וקסזטם שהוצג קודם לכן. הסיכוי שהמשתמשים ירצו להחליף את השפה קטן, ולכן עדיף פשוט להציב אפשרות כמו יישנה שפה", ולקשר אותה לדף שמכיל את כל האפשרויות המתאימות. המעטה בכמות השפות מובילה לעיצוב דף נקי וקל יותר לשימוש, דבר שחשוב יותר מאשר הצורך להעביר את המשתמשים לדף אחר במקרים המועטים בהם הס מעונייניס לשנות את השפה. חיפוש רב לשוני החיפוש במרחבי מידע רב לשוניים מציג בעיות שימושיות מיוחדות. אס כל המידע היה מועתק לכל שפה, לא היה צורך בחיפוש ביותר משפה אחת. במקרה הזה, ממשק החיפוש ידע מהי השפה אותה מעדיף המשתמש, ויציג את התוצאות שמתאימות לשפה זו בלבד. לרוע המזל, לא ניתן לרוב לתרגם את כל המסמכים, ולכן אתרים רביס דורשים חיפוש על פני כמה שפות אס המשתמש זקוק לכיסוי מלא של המידע הזמין. נכון לעכשיו, חיפוש רב לשוני דורש מהמשתמש להקליד ידנית את המיליס הנרדפות של מונח החיפוש הרצוי בכל השפות הנדרשות. משימה זו אינה נוחה, והמשתמשים שוכחים לרוב לחפש מונחיס מתורגמים, אפילו אס הס דובריס כמה שפות. עדיף להניח למחשב לבצע חיפושיס רב לשונייס אוטומטיים על ידי הבנת משמעות מונחי החיפוש בכמה שפות. שיטה זו קלה יותר מבעיית התרגוס הטבעי לשפות המקומיות (לדוגמה, לא בטוח שהמונח '*06ז'' יתייחס למוסיקה, אס משתמשיס בו באתר גיאולוגיה), וישנן כמה מערכות ניסיוניות שכבר הוכיחו ביצועיס טוביס בחיפוש רב לשוני. פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם | 331 הבהר בצורה ברורה אם אתה מעוניין לתת שירות רק לשוק המקומי, כדי לא לבזבז את זמנם של הגולשים מארצות אחרות. 2 עיצוב ממשק באינטרנט הבדלים אזוריים לרוב, העובדה שאתרי פ6/ מושכיס אליהס משתמשיס מרחבי העולס מהווה בעיה. אתה עשוי לטעון שבעיה זו דווקא רצויה, אך ישנן חברות מסוימות שלא מעוניינות בעשיית עסקיס בינלאומיים. אם יש לך אתר כזה, הבהר בצורה ברורה אס אתה מעוניין לתת שירות רק לשוק המקומי, כדי לא לבזבז את זמנס של הגולשיס מארצות אחרות. בנוסף, לחברות רבות יש מוצריס שנראיס אחרת כשהס משווקיס בארצות שונות, ולקוח שניגש, לדוגמה, לאתר 2ח06065-86ז16!] עשוי להתאכזב אס יגלה שחלק מהדגמיס לא מיועדים למכירה מחוצ לגרמניה. כדאי לציין את הדגמיס השונים, מחיריס, או נהלי אספקה מכווניס גס לארצות אחרות. חלק מהחברות דורשות מחיר שונה (לרוב גבוה יותר) מקוניס מחוץ לארצן. עדיף שעסקיס בינלאומיים כגון אלה שפועלים ב-60/ יתייחסו לכל הלקוחות במידה שווה, בין אס הס גריס באותה הארצ ובין אס הס לא, אך לא תמיד ניתן לעשות ואת. ייתכן ויש לשנות את מפרט המוצר עקב תקנות מקומיות, וכן הסכמי השיווק הקיימיס עשויים להכתיב מחיר שונה. עדיף לטפל בשינוייס אזוריים באותה הצורה בה מטפלים בשינויי שפה. כלומר, התחל במדינה שמהווה את ברירת המחדל, וספק רשימה של מדינות נוספות בדף הראשי, שהמשתמשים יוכלו לבחור מתוכן. יתרה מזאת, כל דף שמתאר משהו שאינו זהה בארצות השונות צריך להכיל קישור לדף שמאפשר לגולשיס לעבור לאותו הנושא מנקודת הראות של מדינה אחרת. אתרי פ6/ מסוימיס נוטיס להסתיר את ההבדליס האזוריים, על ידי כך שהס מאפשריס למשתמשיס גישה רק לדפיס שמתארים את מפרטי המוצר ומחיריס שמתאימים לאזור בו הס גריס. לעיתיס ניתן לעשות את על ידי בדיקת כתובת ה-ק1 של המשתמש. לפי ה-ק1 של המשתמש ניתן לזהות את שיוכו הגיאוגרפי. משתמש שגולש מגרמניה, לדוגמה, יקבל רק את המחירים בגרמניה, ולא את המחיריס בארצות הברית. אני מעדיף שלא למנוע מהמשתמשיס אפשרות לראות נתוני מחיריס מסוימיס באזוריס אחרים. בסופו של דבר, הגולש הגרמני עשוי לגלוש מתוך מטה חברה גרמנית שנמצא בתהליך הקמת סניף בארצות הברית, ולכן הוא וקוק למחיריס האמריקאיים. בנוסף, כולס יודעים שהמחירים שונים וה מזה ברחבי העולס, ולכן אין ממש צורך להסתיר מהמשתמשים את העובדה הזו. בדיקות משתמש בינלאומיות בשל הנושאיס הרביס שקשוריס בשימושיות בינלאומית, מומלץ לבצע בדיקות שימושיות בינלאומיות עס משתמשיס מכמה ארצות בחלקיס שוניס של כדור הארצ. אין עדיין הנחיות רשמיות מושלמות מספיק, המבטיחות שימושיות בינלאומית מושלמת, ולכן תמיד עדיף לבצע בדיקה בשטח. למזלנו, ה-60 מקלה מאוד על ביצוע בדיקות שימושיות בינלאומיות. כמו בכל סוגי בדיקות המשתמש, שני הנושאיס העיקריים בביצוע בדיקות משתמשים בינלאומיות הס לערב משתמשיס אמיתייס ולתת להס לבצע משימות אמיתיות ללא סיוע מצדך. לרוב אתה יכול לגייס משתמשים לניסיון דרך משרדי החברה המקומיים שבאר הנבדקת, אך חשוב להדגיש בפני אנשי משרדיס אלה שאתה וקוק למשתמשים העושיס שימוש במחשב על בסיס יומי, ולא בלקוחות המיידייס שהמשרד יכול לספק. אס לא תציין צרכיס אלה בבירור, אתה עשוי לקבל תוצאות של משתמשי ניסוי שאינס מייצגים, ולא לזה התכוונת. התגברות על מחסום השפה בין אס אתה מגיע בעצמך לאר> הנבדקת או שאתה מבצע את הניסוי מרחוק, לרוב תהיה לך בעיית שפה. פתרון אחד לבעיה הוא לגייס משתמשים שדובריס את השפה שלך, גס אס הם אינס דוברים אותה בצורה שוטפת. פתרון זה אינו מושלס, אך הוא מעשי, ולרוב הוא הפתרון הקל ביותר ליישוס. הענייו החשוב כאן הוא לוודא שלא תקבל משתמשים לא מייצגים שלמדו, לדוגמה, כמה שניס במכללה בארצך ולפיכך הס התרגלו לביטוייס והמוסכמות המקומיים שלך, אותס אתה מעוניין להסיר מהאתר. ניתן גס לבצע את הבדיקה בשפה המקומית. דבר וה עשוי להתבצע בצורה טובה אס אתה דובר את השפה המקומית ברמה סבירה, אך לרוב יהיה עליך להיעזר פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם | 333 אפשר זמן נוסף לביצוע המשימות משתמשי ארצות אחרות יזדקקו הרבה פעמים לקצת יותר זמן כדי להשלים את משימות הבדיקה בהשוואה למשתמשים מקומיים. לכן, לדוגמה, סדרת משימות שמשתמשים מקומיים יסיימו אותן ב-30 דקות, יבוצעו על ידי משתמשים מארצות אחרות ב-45 דקות. מהי הסיבה לכך? כשבדקנו אתרי מסחר אלקטרוני אמריקאיים, המשתמשים האירופאים נאלצו לפענח את הממשק שנכתב בשפה זרה, ומשום כך הם הזדקקו לתוספת זמן. אפילו אם הם מבינים את המילים, עדיין עליהם ללמוד את תפיסות הניווט שמתאימות לדרך בה האמריקאים עושים עסקים, ולא לדרך בה האירופאים עושים עסקים. בסיכומו של דבר: הוסף % לזמן המתוכנן בכל משימה שאתה נותן למשתמשי ארצות אחרות, על פי תקציב הזמן שלך למחקר מקומי שמכיל את אותן המשימות. 4 עיצוב ממשק באינטרנט במתורגמן. למרות שתוכל לרוב להבין מה מתרחש על המסך (משוס שאתה מכיר טוב את המוצר), הרבה מתוכן הערות המשתמשים יאבד בתרגום. עליך גס להיפגש עס המתורגמנים לפני הפגישה ולהזכיר להס שעליהס לא לסייע למשתמשיס במהלך הבדיקה. בעיית השפה תיפתר אס תסתמך על אנשים מקומייס שיבצעו את המחקר. אתה יכול להיוועצ במומחה שימושיות מקומי או לבקש סיוע מצוות משרד החברה שלך. כנראה שתקבל את הדוחות האיכותייס ביותר ממומחה לשימושיות, אך יש גס יתרונות בשיתוף הצוות המקומי שלך. פרט לכך שיותר זול לעשות ואת, אתה גס תשתף אותס בתהליך פיתוח המוצר, וסביר להניח שהס ילמדו הרבה מהבדיקה עצמה. כמו תמיד, אפשר לקבל מידע נוסף מביצוע מחקר שימושיות במקוס להסתפק בקריאת הדוח, ומידע וה עשוי לסייע לאנשיס בחברה שלך. אס אינך מבצע את הבדיקה בעצמך, בחירת משתמשי הניסוי המתאימיס קריטית במיוחד, משוס שלא תוכל לערוך שינוייס בבדיקה כדי להתאיס אותה למשתמשים, אס הס יהיו שוניס ממה שציפית. כדי להשיג משתמשי ניסוי מתאימים, עליך להדגיש את הצורך בגיוס משתמשיס מייצגיס כבר בתחילת ההתקשרות עס אלה שיבצעו את הבדיקות. למרות שתהיה לך כמות קטנה יותר של נתוניס מאשר במקרה בו אתה מבצע את הבדיקה בעצמך, תגלה שהבדיקות שבוצעו על ידי נציגיס מקומייס הן יעילות למדי. אפילו במקרים בהס הבדיקה נוצרה על ידי נציגי החברה (לרוב אלה מהנדסי תמיכה או אנשי מכירות), ניתן ללמוד הרבה דבריס מקריאת הדוחות שלהם. כל זמן שצוות המשרד נדרש לענות על תשובות שנוגעות לפיתוח מוצר, תהיה להס מוטיבציה גבוהה לעשות עבודה טובה ולכתוב דוחות בדיקה מקיפים. אס הבדיקה מתבצעת על ידי יועצי שימושיות מארצ אחרת, אתה יכול להניח שהם יודעיס את העקרונות הבסיסיים של בדיקות השימושיות, ועדיף לתת להס לבצע את הבדיקה בדרך המוכרת להם. לפיכך, בדיונים עס יועציס אלה עליך להתרכו בהסברת מטרת הבדיקה וטווח משימות הבדיקה. עדיף לתת ליועציס לפתח את המשימות המפורטות, כדי שהן יתאימו לצרכי המדינה הספציפית, למרות שניתן לחסוך כמה שעות חיוב בכך שתיתן להס סדרת משימות בדיקה ראשונית מתוך ערכת הבדיקות שלך. אס צוות המשרד המקומי שלך יוצר את הבדיקה, עליך להניח שהס אינס יודעיס דבר אודות שימושיות ושהבדיקה שלך תהיה בדיקת המשתמש הראשונה שלהם. משום כך, עליך לעצב את הבדיקה ואת משימות הבדיקה בעצמך, ולתת הנחיות מפורטות כיצד לבצע אותה, ואילו נתוניס אתה מצפה לראות בדוח. בכמה מדינות עליך לבצע את הבדיקה? עליך לקבוע כמה ארצות זרות אתה רוצה לכסות בבדיקות השימושיות הבינלאומיות. עדיף לכסות את כל המדינות בהן אתה מבצע מכירות (או כאלו בהן אתה רוצה להרחיב את המכירות). עס זאת, לרוב לא מעשי לעשות זאת אלא אס אתה עובד בחברה קטנה למדי שמייצאת רק למדינה אחת או שתיים. הפתרון הטיפוסי לכך הוא לבחון את השימושיות הבינלאומית בלפחות מדינה אחת או שתיים בכל אזור בחלקיס העיקריים של כדור הארצ. אס יש לך את היכולת להשקיע משאבים בכיסוי מדינה ורה אחת, עדיין עליך לעשות זאת. ניתן להפיק הרבה תועלת מביצוע הצעד הראשון הזה, והידע יועיל בהרבה מעבר למה שתלמד על המדינה הנבדקת. הודה למשתתפי הבדיקה אתה יכול לשמח את משתתפי הבדיקות על ידי כך שתתן להס שי או תשלוס בתמורה להשתתפותס במחקר. נהוג לעשות כך, אך יש לבדוק את גובה התשלוס או רמת השי על פי המנהגים המקומיים, ולכן כדאי לך לדון בנושאיס אלה מראש עס נציגיס של המשרד המקומי שלך. ניתן לקבל גס עצה בנושא מחברות שמתמחות בארגון קבוצות ממוקדות או מחקרי שיווק אחריס (לסוכנות הפרסוס שלך יכול להיות קשר מקומי, או שלמשרד המקומי שלך יכול להחיות כבר קשר משלו). לעיתים, עדיף לגייס משתתפיסם באמצעות חברות גיוס כוח אדם מקצועי ולציין פרופיל משתמש לו אתה וקוק למחקר שלך, משוס שחברות אלו יודעות לרוב הרבה יותר אודות מוצרים פיסיים מאשר מוצרים אינטראקטיביים. פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם | 335 הוסף כמה ימים לביקור שלך אם אתה נוסע בעצמך, ודא שאתה מתחשב בהבדלי השעות (פָ9] 26). עריכת בדיקות משתמשים היא חוויה אינטנסיבית ביותר: עליך לשים לב למשתמש, לממשק המשתמש, למשימות הבדיקה, להערות שלך, לכל צופה נוסף, ולכל ציוד וידאו בו אתה עשוי להשתמש - כל זאת בעת ובעונה אחת. בנוסף, הבדיקה עשויה להתבצע בשפה זרה, שתקשה להתרכז אפילו יותר. אני ממליץ לנצל את היומיים הראשונים של הביקור במשרדי החברה ובדיקת ציוד ותוכנה, כדי לוודא שהבדיקות יעברו בצורה חלקה. 6 עיצוב ממשק באינטרנט שיטות בדיקה כמו בבדיקות שימושיות רגילות, ישנן כמה שיטות לבדיקת השימושיות הבינלאומית. הנה חמש הדרכיס העיקריות ליצירת בדיקת משתמש בינלאומית: 6% בקר במדינה בעצמך. בצע את הבדיקה מרחוק. שכור יועצ שימושיות מקומי שיבצע את הבדיקה עבורך. תן לעובדיס מתוך צוות המשרד המקומי לערוך את הבדיקה, גס אס אינס מאומניס בנושא השימושיות. > תן למשתמשים לבצע בעצמס את הבדיקה ללא פיקוח. 6 9 % בחברות גדולות בלבד, ניתן גס לבנות קבוצות שימושיות נוספות בשווקיס העיקריים של החברה. אפשרות זו היא הטובה ביותר, אך לרוב עלות הביצוע שלה גבוהה ממה שחברה מסוגלת לשלם. בנוסף, גס אס יש לך קבוצות שימושיות מקומיות בשווקים זּרים עיקריים, עדייו כדאי לבצע בדיקות נוספות בכמה מהשווקיס הקטניס יותר - שס תיתקל באותן הבעיות בשנית. בקר במדינה בעצמך מסיבות רבות, הדרך האידיאלית לביצוע הבדיקה היא לבקר במדינה ולבצע את הבדיקה בעצמך. כשתבקר לקוחות מקומיים במגוון מדינות, תקבל רושס חזק יותר מאשר קריאת הדוח המפורט ביותר שקיים. תמיד יהיו פרטיס קטניס אך חשובים שתגלה אס תגיע למקוס. הצפייה בלקוחות בסביבה שלהם מועילה, ולכן אני ממליץ לנסות לבצע את הבדיקה באתר הלקוח עצמו, אך לא תמיד ניתן לעשות זאת. לרוב תזדקק לציוד מיוחד, ולתוכנה שקשה להתקין אותה. בנוסף, תוכל לגשת לנתוניס רק ברשת החברה הפנימית (שהגישה אליה תהיה רק במשרדי החברה שלך). אס אתה מבקר באתרי הלקוח, נסה להשיג אישור להכנסת מצלמת סטילס, ולצלס את תנאי המבניס והעבודה שם. אס תתלה תמונות כאלו על קיר מעבדת הפיתוח שלך, תוכל להזכיר לכל חברי צוות הפרויקט שישנס צרכים שוניס במדינות שונות. אפשרות אחרת שתסייע לך לחסוך בעלויות היא לבצע כמה בדיקות לא רשמיות במהלך ביקוריס שמתוכננים מסיבות אחרות, משוס שאתה יכול להגיע לדף 60/ מכל מקוס שבו אתה יכול להשיג מחשב. לדוגמה, לא מזמן היתה לי פגישה בשוודיה, בומן ששאר הצוות המשיך לעבוד על אתר משנה חדש בקליפורניה. לא זו בלבד שיכולתי לשלוח להס הערות על העיצוב תוך כדי התהליך, ניצלתי את ההזדמנות גם כדי לבדוק את תגובת המקומיים לאתר. אחת מהתוצאות שהתקבלו היתה שהגולשיס לא הבינו את ההבדל בין לחצן חסוטאוחזסזח1 ללחצן חסוז?ח6וחטססכ. בדיקות השימושיות הבינלאומיות מגלות הרבה פעמים בעיות שיכולות להופיע גס אצל משתמשיסם מקומיים. ביצוע בדיקות מרחוק ניתן לבדוק עיצובי פ6/ בינלאומייס מבלי לצאת מפתח ביתך, ולחסוך עלויות מסע רבות. המשתמשיס יכולים לגשת לאינטרנט כמעט מכל מקום, ומשוס כך הס יכוליס לגשת לאתר שלך מבלי שתיאלצ להגיע למדינה שלהם כדי להכין את הבדיקה. אפשרות אחת היא לטלפן למשתמשיס ולבקש מהם לחשוב בקול בומן שהס מנווטיס באתר שלך (או באב טיפוס של הדפיס) מהמחשב שלהם. בהנחה שאתה יכול למצוא משתמשים בארצות אחרות אשר דובריסם את השפה שלך טוב מספיק לראיון טלפוני, שיטה זו מהווה דרך קלה מאוד לביצוע בדיקות בינלאומיות. אני מעדיף להשתמש בשיטת השיחות הטלפוניות במקוס ועידות וידאו, בשל תוספת התקורה שבהשגת ציוד וידאו והפעלת כל הטכנולוגיה הנוספת בזמן שאתה מנסה להסביר למשתמש כיצד להגיע לאתר שלך. תהליך ביצוע הבדיקה המרוחקת דומה לבדיקת משתמש רגילה: אתה מבקש מהמשתמשים לבצע משימה אחת בכל פעס ולחשוב על דרך הביצוע שלה בקול. ניתן להוסיף רשימת משימות לדף ס6\. כל משימה אמורה להופיע בדף נפרד, ולא יחד עם המשימות האחרות, כדי למנוע מצב בו המשתמש קורא מראש את המשימה הבאה. אפשר לסיים כל דף בקישור למשימה הבאה. לחילופין, ניתן לשלוח למשתמשים מכתב בדואר רגיל עס הוראות בדיקה וסדרת משימות. בדרך זו, יש להכניס כל משימה למעטפה נפרדת, ויש להנחות את המשתמשיס שלא פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם | 337 8 עיצוב ממשק באינטרנט לפתוח את מעטפת המשימה הבאה לפני שהסם סיימו את המשימה הנוכחית, משוס שהס אינס אמוריס יילתרגליי ביצוע משימות. בנוסף, יש למספר את המשימות בבירור (משימה 1, משימה 2 וכוי), וכן יש למספר את השורות המודפסות, כדי שניתן יהיה להתייחס אליהן אס יש פרטים לא ברוריס בדף. בעקרון, אתה אמור לעקוב אחר הגישה המרוחקת של המשתמש לשרת ה-פ6\ שלך בזמן אמת, כדי לגלות באיזה דף הוא נמצא, ולהציג את הדף על מסך הדפדפן שלך בומן בו המשתמש צופה בו. נכון לעכשיו, אינני מכיר תוכנה שמקלה על פעולה זו. הרבה יותר נפוצ וגס פשוט לבקש מהמשתמש לציין בדיוק היכן הוא לחצ על המסך, ולנסות לשכפל את התנהגותו. ניתן גס להשתמש בתוכנת עצר, כגון 8 66ז6א, שמציגה את מסך המשתמש. תוכנות עזר אלו מתאימות לבדיקות משתמש מרוחקות, למרות שלעיתים הן עובדות טוב יותר ברשתות אינטראנט או ברשתות מקומיות מאשר באינטרנט. אתה יכול לתקשר עס המשתמש באמצעות קישור קולי כגון טלפון או אינטרנט. למרות ששיחות הטלפון הבינלאומיות יקרות יותר, זוהי עדיין הדרך המועדפת ליצירת קשר קולי לבדיקת המשתמש המרוחקת. תוכנות הטלפוניה באינטרנט עדיין מגושמות ודורשות מהמשתמש להקדיש יותר מאמא להפעלת הערוצ הקולי מאשר לשימוש באתר ה-פפ/ שלך. בנוסף, למשתמשים רבים בארצות אחרות יש חיבורים עס רוחב פס קטן, כך שהערוץ הקולי שתפתח באינטרנט יאט משמעותית את מהירות הגלישה שלהס באתר שלך. אס נתחשב בעלות שיחה בינלאומית, אתה הוא זה שאמור לשלס עבור השיחה, ועליך להבהיר זאת כשאתה יוצר אתו קשר לבחינת אפשרות הבדיקה. מעבדות שימושיות לבדיקות בינלאומיות לעיתים, מבצעיס בדיקות שימושיות במעבדות שימושיות מיוחדות. לרוב, לא ניתן יהיה למצוא מעבדות שימושיות בינלאומיות, משוס שרק חברות המחשבים הגדולות ביותר מחזיקות מעבדות שכאלו. הגישה הפשוטה ביותר להתמודד עס כך היא להסתדר ללא מעבדת השימושיות, ולסמוך רק על ההתרשמות הראשונית, פתקים ודוחות כתוביס. יש לעשות זאת בבדיקות שמבוצעות על ידי עובדי המשרד המרוחק, משוס שאי אפשר לצפות מהס להרכיב ציוד חדש וללמוד כיצד להשתמש בו. ישנס קשייס רביס שקשוריםס בשימוש במעבדות שימושיות בומן ביצוע בדיקות בינלאומיות, ולכן עדיף לרוב לוותר על המעבדה, אפילו במבחניס שאתה עצמך מבצע. לרוב, בעיות השימושיות העיקריות מתגלות בבירור מצפייה פשוטה במשתמש, ובין כה אין צורך לבזבז זמן על צפייה בקלטות וידאו. אני מעדיף, פעמיס רבות, להשתמש בתמונות סטילס במקוס בצילומי וידאו. קל הרבה יותר להפיק תמונות אלו, במיוחד בעזרת מצלמה דיגיטלית שמייצרת קבצי תמונות, אותם ניתן להעביר ישירות לאתר הפנימי שלך יחד עס דוח הבדיקה. התמונות מסבירות את הדוח בצורה ברורה וקלה לזכירה, במיוחד עבור אלה שלא נסעו יחד אתך למדינה המרוחקת. מצד שני, לבדיקות המשתמשים הבינלאומיות יש מאפייניס שמצריכיס הקלטה רשמית בצורה שמופקת במעבדה. ראשית, המשתמש עשוי לדבר בשפה זרה, ולכן יש צורך להציג מחדש את ההקלטה כדי להבין מה הוא אמר. אס יש צורך לקבל תרגוס מלא כדי לדעת בדיוק מה קרה, יש צורך לספק למתרגס הקלטה של הערות המשתמש. שנית, מגבלות פיננסיות קובעות לרוב כי רק חלק קטן מהאנשיס אכן נוסעיס למדינה הגרה כדי לבצע את הבדיקה. לרוב, חברי הצוות האחרים מקבליס הזדמנות לבצע את כל הבדיקות שהם זקוקים להן, ובכך הס מקבלים מושג טוב אודות הדרך בה המשתמשים עושיס שימוש במוצר שלהם. מכיון שרוב חברי הצוות ישתתפו באתר הבדיקות הבינלאומיות, הקלטת וידאו תהיה דרך להעביר את חוויית המשתמש המרוחק טוב יותר מאשר דוח כתוב. אס אתה נעזר ביועצי שימושיות זריס שמבצעים את הבדיקות שלך, ייתכן שתהיה להס מעבדה משלהם או שיש להס קשריס מקומייס שמאפשריס להס לשכור מעבדה בקלות. במקרה מעין זּה, חישובי העלות ישפיעו במידה רבה על ההחלטה אס עליך לדרוש שימוש במעבדת שימושיות עבור הבדיקה. אס אתה מחליט לשלם עבור מעבדה, אני ממליץ לשלם גס עבור עריכת קטעיס נבחריס מההקלטה (שוב, כמובן, כתלות במחיר). מהבחינה המעשית, כנראה שיהיה עליך לצפות בשעות רבות של וידאו, בו המשתמשיס פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם | 339 0 עיצוב ממשק באינטרנט מדבריס בשפה זרה, כשכבר יש לך דוח המכיל את הממצאים העיקרייס. עדיף בהרבה לצפות בקטעיס קצרים יותר של האירועיס הללו שמתייחסיס לתגליות המפתח. בנוסף, אס אתה מקבל הקלטה ערוכה, נהוג לכלול בה תרגוס של השפה והוספת כותרות משנה. ניתן להציג את ההקלטה בצורה זו לאנשי הנהלה ולחברי צוות אחריס בפרויקט. יש להתחשב בכך שההקלטה הערוכה עשויה להגיע בפורמט וידאו אחר מזה בו אתה משתמש במקוס מגוריך. הבעיה הנפוצה היא 41 (רוב חלקי אירופה) מול 56דא (אמריקה ויפן), אך השימוש בשני פורמטים אלה נפוץ מאוד, ולכן רוב הסיכוייס שתעבוד עס מכשיר וידאו שיודע לפענח את שני הפורמטים. אם אין ברשותך מכשיר כזה, אתה יכול להשתמש בשירותי המרת וידאו חיצוניים, כדי להמיר את הקלטת לפורמט המקומי שלך, תמורת סכוס צנוע. מומלצ להשתמש בשירות מקצועי משוס שהשאיפה היא לשמור כמה שיותר מאיכות המקורית של הנתונים, כדי שתוכל לראות מה קורה על המסך. אס אתה נוסע ליעד בעצמך, האפשרויות שעומדות בפניך (פרט לאי שימוש במעבדה) הן לשכור שירותי מעבדה מקומית, או להביא אתך מעבדה ניידת. הנדסת השימושיות הופכת יותר ויותר לחלק שמשולב בתהליך הפיתוח ברחבי העולם, ולכן תמצא, לרוב, חברות שיש להן מעבדות שימושיות. לא תמיד הן תהיינה מתוחכמות, אך יש בהן יתרון בכך שמישהו אחר אחראי על הציוד והוא מבטיח שהציוד הזה יפעל בתנאיס המקומיים. במקרים מעטים, נוהגיס לפרסס את שירותי מעבדות השימושיות הזרות, ולהציע אותן להשכרה בפרסומים שוניס שקשוריס בממשק משתמש או בכנסים. עס זאת נהוג יותר לעשות את עבודת החיפוש לבד ולפנות לחברה ידועה שיש בה (או שאתה סבור שיש בה) מעבדה כזו, ולבקש להשכיר אותה. בנוסף למעבדות שימושיות אמיתיות, אפשר גס לשכור מעבדת קבוצת מיקוד מחברת מחקר שווקים, למרות שבמקרה הזה עליך לדאוג להרכבת המחשב וכן לוודא שהמצלמות מתאימות להקלטת המתרחש על גבי המסך. אם אתה שוכר מעבדה בארצ בה פורמט הווידאו שונה משלך, היא כנראה תהיה מצוידת בתמיכה בפורמט המקומי, ועדיף לשכור גס את ציוד העריכה שלה, אס אתה רוצה להכין את הגירסה הערוכה הסופית (מומלצ מאוד), משוס שאחרת יהיה עליך להמיר כמות גדולה מאוד של קלטות וידאו כשתחזור הביתה. ניתן לבקש מקבוצת ביצוע עצמי של בדיקות ביקורת של משתמשים למצוא מידע מסוים, כל מחקר שניתן להשלימו בלי צורך בעורך ניסוייס ולדווח אם הם הצליחו זמין, ניתן לבצעו מרחוק על ידי מתן הנחיות לעשות זאת וכמה זמן למשתמשים וקבלת דוח תוצאות מהס. לדוגמה, ניתן לקח להם למצוא את לבקש מהמשתמשים למצוא מידע מסוים, ולדווח אס המידע. הצליחו לעשות זאת וכמה זמן לקח להס למצוא את המידע. ניתן לבקש מהמשתמשים גס לגשת לערכת דפי טיוטה, ולכתוב הערות בטקסט חופשי או לדרג את העיצוב בסולם 1-7 מבחינת התחושה והמראה ומבחינת נוחות הניווט. אפשר להעביר את הטפסיס וההוראות על דף, בהודעת דואר אלקטרוני או בדף נפרד. עקרונית, התגובות והדירוגיס יתקבלו בצורה אחראית יותר אס ההנחיות והדות יגיעו באותו המדיוס. אם, לדוגמה, אתה שולח הזמנה להשתתף במחקר על גבי נייר, עדיף לרוב לבקש מהמשתמשיס למלא שאלון על דף, ולמסור אותו בתור הדיווח על ממצאיהס. במידת האפשר, יש לתרגם את ההנחיות וטפסי המשוב לשפת המשתמשים, כדי להגדיל עד למקסימוס את רמת התגובה, ולהפחית את הדעות הקדומות שקיימות כשנעזריס במשתתפים שמדבריס שפה ורה בצורה שוטפת. אס תימנע משאלות פתוחות, ותגביל את עצמך לדירוג על פי סולס ערכיס ולשאלות סגורות אחרות, תוכל לנתח את התוצאות ללא צורך בתרגוס חוזר לשפה שלך. אס תשתמש בגישה זו, מומלצ לחיוהר בתרגוס הנחיות סולס הדירוג (לדוגמה, *מרוצה מאודיי או ייחשתי יעיל למדייי). כדי שההשוואות יהיו והות בכל המדינות, עליך לוודא שהמשתתפים יענו על שאלות והות בדרך זהה. למעשה, הבדלי התרבות עשויים למנוע השוואה זהה, ולגרוס לדירוג סובייקטיבי בחלקיס שוניס בעולס. ישנן תרבויות אסיאתיות רבות בהן האנשיס לא ירגישו נוח לתת דירוג גרוע לאפשרות מסוימת, וכן יש תרבויות בהן לא נהוג להפריז, ואותס אנשיס לא יייסכימו לגמרייי עס הצהרה כגון ייעיצוב משגעיי. כמובן שיש להימנע ממונחים לשוניים וסלנג, כגון פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם | 341 (בעמוד הבא) עריכת מבחן אינטואיציה שקשור לסמלים ב-65/ מאפשר לקבל נתונים מגולשים ברחבי העולם על בסיס שווה. בדוגמה זו, כל המשתמשים צפו באותם הסמלים, אך ניתן ליצור דף חדש עבור כל משתמש, ולקבוע סדר אקראי של סמלים כדי לבצע מחקר קטן יותר או כדי לבדוק חלופות עיצוביות שונות עבור כל רעיון. באופן כללי, אני מעדיף מחקרי אינטואיציה פתוחים, אך הגישה בה משתמשים בדוגמה זו מאפשרת ניתוח קל יותר של הנתונים, במטרה לבדוק לאיזה חלק של העולם יש בעיות מיוחדות עם הסמלים. התיאורים מסומנים באותיות (8, 8 וכן הלאה) בצורה שקצת מתפרצת החוצה. האותיות טובות למשתמשים שרוצים להתייחס לפונקציות ספציפיות בתיבת ההערות, אך הניסיון מראה שמשתמשים מעטים ירצו לבזבז את זמנם על כתיבת הערות חופשיות, ולכן עדיף להציב את האותיות אחרי התיאורים (היכן שהן יבלטו פחות) ולהקטין את הגופן המשמש להצגתן. 2 עיצוב ממשק באינטרנט 'יעיצוב משגעיי, בשאלונים בינלאומיים, גם אס לא מתרגמיס אותס. הדרך הטובה ביותר להשיג משתתפים בבחינה עצמית היא לבחור בקבוצה אקראית של משתמשים במדינות אותן אתה רוצה לחקור, ולשלוח להס בקשה אישית להשתתפות במחקר. ניתן גס פשוט להציב את הבדיקה ב-80\, וליצור אליה קישור מהאתר הראשי שלך או מרשימת תפוצה גדולה של ידיעון המודפס על נייר או שנשלח בדואר אלקטרוני. החיסרון בשיטה זו הוא שלא תוכל לבחור את המשתתפים בעצמך, דבר שיביא לחוסר איזון בתוצאות, מכיון שמי שישתתפו יהיו המשתמשים המנוסים ובעלי המוטיבציה הגדולה יותר. בלי קשר לדרך בה המשתתפים נבחרים, יהיה עליך לקבוע באיוו מדינה הס גרים, כדי שניתן יהיה לקדד את התגובות כראוי. הגישה הפשוטה ביותר היא לחקור מדינה אחת בכל פעס על ידי יצירת קשר עס משתמשיס מאותה מדינה בכל מחקר. לרוב, עדיף לחקור כמה מדינות בבת אחת, משוס שזו הדרך היחידה לאסוף כמות נתוניס מספקת בפרק הזמן שנקבע לשלב הפיתוח. במחקר עולמי, נהוג להוסיף שאלה למשתמש שבודקת את ארי המוצא שלו (או לבחור את אזור המגוריס מתוך תפריט). יש לכלול שאלה פשוטה אודות האזור הגיאוגרפי, אפילו כשאתה רוצה לצמצס את מספר השאלות הדמוגרפיות כדי להפחית את הזמן הדרוש לסיוס הבדיקה, או כדי להפחית את הנושאיס האישיים. אס הבדיקה מתבצעת ב-60/ או שהתשובות מתקבלות בדואר אלקטרוני, אתה יכול לבצע בדיקה של ה-ק1 של המשתמש או של ה-חוהוחסכ. אס הסיומת היא אט., סביר להניח שהמשתמש בריטי. אס הסיומת היא ס[., כנראה שהמשתמש יפני, וכן הלאה. לרוע המזל, שמות המחשביס לא מתייחסיס תמיד ללאוס האמיתי של המשתמש. שמות מחשבים רביס מארצות שונות הס בעלי סיומת וחסס. מסיבות עלות, מהירות גישה, יוקרה, או משוס שהמשתמשיס עובדיסם במשרד מקומי של חברה בינלאומית. אס תבצע חיפוש פשוט על שס המחשב של משתמשים אלה, הס ייראו כאמריקאיס. (2 ]0 2 0806) פסוזק23) 00501 6הָבּק 60/ זס] +65 ד /פו!ופבּהב3ּ5%וססהע 8 סס 06 1:5 . הסססגוט |3פוחמבזם 5 ס6 חַחו0 חס 850 וטס זפטוחטוח 8 זפסחם , פב זפאום| 58 חו הסםוחו089 830 זסת 8 זס ההסססט זפ 68 36 הססגום זפ ט5 פר₪ 58|805 , הוח פז'טפץ הפחצ .זפ יפב 82836 60 חב ,אחבוט ההחס5 350 ,33 15ח וח וח 00 ברס חו (8158 החור ץחב סטוסטב זם) פסוחםבזם פר סטוסטב 5סתפוהרחסס 5גו פצוםָ חבס טס . אוס|פט פחחבּז . ]08 17308 טר + ההסוסט פרם סב 6 > ל 6 ₪ ₪ 5 ם 17 18 19 20 21 2 23 24 25 6 .ו 45חְחָרו ||ה ...₪5 94043-1100 62 שסול חהוב+חטסו ,6טח6ש2 בוב 2550 ,-6ח1 ,5וח5ל5ש05יו16! חט5 1997 %השרוץ 6 חסבּזסבּזבּם 8 5 0 .0 --ן בחב 588000 8 065 ₪ 5סחסחסס הזב סטטמווס 8 035005 .ה ---] פחוחַזבּוח שר חספאססט | זב סטטמווס רס סס סו 5 מחוסם הסה פפחו פרם 5 3 הסמסה 35%| פה 0085 .| -- 58|80000 +0 זס|סס פהַחבּת0 .= 7 ]| ווח 3 83085ז0 .ם 7 -] טחסתט זבּפמקבּ 50|50000 פס ₪3685 .₪ חסססה 35%| 68 פה סבחש .1 | . ְ %חם+ זפסחאוסםעס חו ]| זה סטמווס ₪8 טס ה58|9000 005185 .7/6 = ] סו ובא ח0000ו50 טחל ₪605 .1 -=₪ פת%ף 60 חִמְבּזְטְבּזבּם 8 פחםו|ת .6 - הר 6ב 5פ|מְקבּ 3 חן | | חוחַזבּוח סחטוז. | )חוסם חסחפפחו. טסט 3 5585 . סו -] צֶם 528 סחם? שח בב ₪ 8 זס להפסחו 08 83585סח1 .₪ --ן פוחט חס חְבּזהָבּזבּם 6ב פחו| |ב3הסקחסחת ב 5ה8פח1 .א --- 8% 68 60 חהמְבּזהַבּזבּם 18 פחםו|ג .ם -- שחוסם הסוח 8פחו 8 0 3 פסחחס ₪ ₪5 חוחַ"זבּוח 8 35 הַהַבחו חב 1595 זה הסוח 58חו פחש 6ב אחו! 3 105975 .₪ שחוסם הסמה פפחו %חוסם | 8 זם הסח ל 83585זסטם == | חמבּזחבזהם וסט 3 פחפםס .7 ] ס|סם ח58|8000 פס 13685 ,א 7 | סחפותוססם אופח ב 83695ז0 .7 -] חסופ5חו טפ 30 30|8: 3 505ח1 .ל --= %חוסם צֶם 28ו5 5חס? 08 080783585 .06 - טפחבּת) לְפַהָזֶב 3 585ח1 .58 --- פוחט חס )חוסם חס 58חו פר6 35 (זסתסחבּ טסצ אס פחל פסחו .מה 7 0 55| 8580!|נוט 3 07680685 .2 77] :ו 500.60 ./שעעעץ פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם | 343 4 עיצוב ממשק באינטרנט הדרך המומלצת לעקיפת בעיה זו היא פשוט לבקש מהמשתמש לציין את שם ארצו ולהסביר לו שאתה וקוק למידע זה עבור נתוניס סטטיסטיים. אחרת, האפשרות הטובה ביותר היא להכיר בכך שישנן כמה בעיות בנתוניס שלך ולזכור, בומן פענוח התוצאות, שהתשובות ממחשבים בעלי סיומת וחסס. אינן בהכרת של משתמשים אמריקאיים. כמובן שיכוליס לקרות גם מקרים אחרים (כגון תגובת בעל מחשב עס סיומת . שנמצא בגרמניה ועובד ומנית בצרפת), ולכן יש תמיד לנהוג משנה והירות עס הנתוניס שמתקבלים מניתוח שמות המחשבים. מסקנה המדינות שונות זו מזו, ואנשים ממדינות שונות שוניס אף הס ה מזה. משתמשים מרחבי העולס משתמשיס באתר ה-69/ שלך בצורה שונה. אלה שמעצביס את האתרים שלהם עבור מדינה אחת מבריחיס למעלה ממחצית מהלקוחות הפוטנציאלייס שלהם. ככל שה-80/ הופכת לבינלאומית יותר, יש יותר חשיבות בהענקת תשומת לב לשימושיות בינלאומית. יש בורך בעבודה רבה כדי לעשות זאת בצורה מושלמת. ישנן המון מדינות ברחבי העולס. כשאתה עומד בפני נתוני השקעת המשאביס בבדיקה פוטנציאלית והתאמה של אתר עבור כל התרבויות השונות בעולס, אתה צריך להיאבק בפיתוי לוותר על הבדיקה. נקודת מפתח: אל תתייאש! אל תתכנן יותר מדי. אל תוותר רק משוס שאינך יכול ליישס בפעס הראשונה מחקר שימושיות בינלאומי אידיאלי. ייתכן שיחיה עליך להתחיל במדינה אחת, וייתכן והמשתמשיס יבצעו בעצמס את הבדיקות. הדבר החשוב הוא לעשות את זה. יש הבדל עצוס בין אתר שמעוצב עבור משתמשיס מקומיים בלבד ואתר שמודע לעצס הקיוס של שאר העולם. בסופו של דבר, עניין השימושיות הבינלאומית יהפוך לחובה להצלחת האתריס שבאינטרנט. ככל שהשימוש הכלל עולמי גדל, אתרים יחוסלו אס הם לא יוכלו לספק שירות איכותי למדינות רבות. נכון לעכשיו, יהיה לך יתרון עצוס על רוב האתריס האחריס אס תבצע אפילו בדיקה קטנה של שימושיות בינלאומית. אס לא תתחיל לעולס, הרי לעולס לא תלמד אודות המשתמשיס שלך מרחבי העולס, ובנקודה מסוימת זה יהיה מאוחר מדי להתחיל. משוס כך, התחל עכשיו. פרק 7: שימוש בינלאומי: מתן שירות לקהל מרחבי העולם | 345 תחזית: הקבונ היחיד ב-60// הוא הנטינוי פרק זה עוסק ברובו בעתיד הקרוב של ה-60/, כלומר בחמש השנים הבאות. בתקופה זו, ה-60/ צפויה לגדול פי עשרים, ומשמעות הדבר שתהיה כמות אתרים שגדולה פי עשרים ממה שקיים כרגע באינטרנט (מ-10 מליון אתרים בשנת 1999 ל-200 מליון אתרים בשנת 2005). מספר הדפים יגדל כנראה אף מעבר לכך, משום שהאתרים הקיימים יוסיפו דפים, יחד עם האתרים החדשים שיקומו. לפיכך, אני צופה שה-60/ תגדל מכמות של מיליארד דפים בשנת 1999 ל-50 מיליארד דפים בשנת 2005. פרק 8: תחזית: הקבוע היחיד ב-65// הוא השינוי 247 מספר המשתמשים לא יגדל באותה המידה שבה יגדל מספר האתריס והדפים, משוס שישנן מדינות רבות בהן התשתית מקשה על חיבור רוב האוכלוסיה. מתוך כ-200 מליון משתמשל 60/ בתחילת שנת 2000, אני צופה שנגיע לכ-500 מליון משתמשיס מקווניס באזור שנת 2005. כמות המשתמשיסם תגיע למיליארד באזור שנת 2010. כל מספר מעבר למיליארד משתמשים יגדל בקצב איטי. מיליארד משתמשיסם שחולקים ביניהס את אותה מערכת המחשב הוא נושא חסר תקדים, וה-69/ (הצד הגרפי של רשת האינטרנט) והאינטרנט עצמה ישתנו בצורה קיצונית כשזה יקרה. למעשה, עליהן להשתנות כבר לפני שדבר זה יקרה, משוס שגס כיוס קשה מדי לרוב האנשיס להתחבר לאינטרנט, גס אס ברצונס לעשות ואת. המגמה לטווח רחוק כשאנו חוזיס את השפעת שינויי הטכנולוגיה, שתי השגיאות הנפוצות הן להגזיס בהערכת השינוייס לטווח קצר ולהמעיט בהערכת השינויים לטווח רחוק. האינטרנט קשה ללימוד השימוש באינטרנט משול למשיכת שרשרת ארוכה: אם חוליה אחת נשברת, היא גורמת לשבירת המבנה כולו. משתמשים מנוסים יידעו כיצד להתייחס למגוון החוליות שבשרשרת, למצוא חוליה שבורה ולנסות אסטרטגיות שונות להתמודד אתה. משתמשים שלא מבינים את מבנה השרשרת, פשוט ידעו שהם משכו אותה אך לא השיגו בכך מאומה. הבעיה יכולה להיות נעוצה בתצורת מחשב המשתמש, המודם שלו, קווים עמוסים, ספק האינטרנט, האינטרנט עצמה, אתר ה-60/ המרוחק, או הנחיות מבלבלות ולא ברורות בכל שלב בדרך. אם משהו לא יפעל כשורה, יש למשתמש המתחיל סיכויים קלושים להתגבר על התקלה. בטווח הרחוק, עלינו לבנות מערכות בדיקה עצמית טובות יותר, שיוכלו לספק הודעות שגיאה מסייעות יותר, ולהציע דרכים קלות לתיקון הבעיה. בטווח הקצר, מפתחי פתרונות ס6/ עבור משתמשים לא מנוסים צריכים לשפר את ממשקי המשתמש שלהם, כך שיהיו מושלמים. במחקר שנערך על משתמשים ביתיים בפיטסבורג, נרשמו הדוגמאות הבאות של בעיות שימושיות בהן נתקלו משתמשים חדשים באינטרנט: % "אינני יכול להתחבר" (ח1 109). מקש 06%)] 655 היה פעיל כשהמשתמש הקליד את הסיסמה. המשתמש לא חש בכך משום שהתווים שהוא הקיש לא הוצגו על המסך. > "הדואר האלקטרוני שלי קפא". המשתמש לא התקין את המודם (הוא לא ידע שמודם הוא חלק מחומרת המחשב, ושצריך להתחבר לאינטרנט לפני הפעלת תוכנת הדואר). % "המודם לא מחייג". מישהו אחר השתמש באותו קו טלפון. כל אחת מהבעיות הללו נראית טרוויאלית עבור משתמש מנוסה, אך בעיות אלו הספיקו כדי לעצור את המשתמשים המתחילים שבמחקר מלהתחבר לאינטרנט. למידע נוסף אודות מחקר משתמשים ביתיים בפיטסבורג, פנה לכתובת 6-5 רחש סח .6 חש רחסה /: כסת 8 עיצוב ממשק באינטרנט בטווח הקצר, רביס מהשינוייס שאותסם מומחי הטכנולוגיה רוציס לראות לא יקרו בגלל חוסר היעילות האנושית. יש צורך בזמן רב כדי לגרוס לאנשיס לשנות את דרכיהם, ויש גם צורך בזמן רב כדי לאפשר לפועלים לחפור ברחובות כדי לשדרג את התשתית. שינוייס מהותייס רביס לא קוריס עד שטכנולוגיה מסוימת חודרת לחברה והופכת לנפוצה. לדוגמה, יש הסבורים כי המצאת הרכב גרמה לצמיחת הפרוורים, אך תהליך פיתוח הפרוורים לא יכול היה לקרות באמת, כל וּמן שרק לאחוז קטן מתוך האוכלוסיה היו רכביס. בימיס בהס רק אנשים מעטים יכלו להרשות לעצמם לרכוש רכב, הס השתמשו בו בעיקר כדי לנסוע לטיולי סוף שבוע מחוצ לעיר מגוריהס, או שהס עברו לפרווריס, אך המשיכו לעבוד בעיר. כל זמן שרק לאנשים בודדים היו מכוניות, כל עסק חשוב היה חייב להישאר בתחומי העיר. אך לאחר שלרוב העובדים היו מכוניות, ניידותס גדלה ואיפשרה לעסקיס להתבסס מחוצ למרכזי הערים (אזורי תעשיה בפריפריה לדוגמה: הרצליה, פולג ועוד). האינטרנט היא טכנולוגיית רשת. השפעת הרשת גדלה במְוּקה לעומת גודלה, מכיון שהיא מתארת את מספר אפשרויות החיבור ואת מספר השימושיס ברשת. תופעה זו קרויה לרוב בשס חוק 1606866 (16068]66'5! שה ]), על שס 63/6 פסם, ממציא ה-זסחזסוום. כהשוואה, בואו ניקח טכנולוגיית רשת אחרת : הטלפון. אס היה רק טלפון אחד בכל עיר הוא היה חסר תועלת, ושני טלפוניס כבר טוביםס יותר מאשר פי שניים מטלפון אחד: כעת אתה כבר יכול לנהל שיחה. בתחילת דרכו של הטלפון, השתמשו בו בעלי חברות שהחזיקו קו אחד בבית וקו אחד במשרד: אפילו כשיש רק שני טלפוניס בעיר, ניתן לנהל שיחות חשובות. לאחר מכן, כשכמאה בעלי חברות התקינו טלפוניס בבתיהס ובמשרדי החברות, השימוש בטלפון הוכפל פי 100. בעיר בה היו 200 קווי טלפון, המנהליס לא השתמשו בקוויס רק כדי להתקשר מהבית למשרד, אלא גס המשרדים השתמשו בטלפון כדי להתקשר למשרדיס אחרים. בעלי חברות נוטיס להשתייך לאותס מעגלים חברתיים, וייתכן שהס אפילו החלו להתקשר אל בתי עמיתיהם. כמה שנים לאחר מכן, כשבעיר היו כבר כמה אלפי טלפונים, השימוש במכשירי הטלפון התרחב, וחברות החלו ליצור קשר דו כיווני עס לקוחותיהן. לבסוף, לאחר שכמעט לכולם פרק 8: תחזית: הקבוע היחיד ב-60// הוא השינוי 229 0 עיצוב ממשק באינטרנט כבר היה טלפון, המבנה העסקי והחברתי של החברה השתנה: כיוס, אתה לא מתקשר רק לחברה, אלא לאדס מסויס בתוך החברה. היוס יש שירותי משלוח פיצה, ובני העשרה מבלים שעות בשיחות טלפון. לפני שנפנה לבחון את מגמת ה-60/ בשנים הבאות, אני רוצה לבחון בקצרה כמה השפעות ארוכות טוות של התפשטות ה-68₪/. שינוייס רביס מתוכס לא יקרו בעשוריס הקרובים, וכמה מהם לא יקרו כלל. כמובן שבנוסף לכך, יקרו גם שינוייס לא צפויים שישפיעו על ה-60/ הרבה יותר מהתחציות הנוכחיות. הנה כמה שינוייס שצפוייס לקרות ב-60/: % % % שוק הנדליין יקרוס באזורים יקרים כגון מנהטן ועמק הסיליקון. טכנולוגיית ה-60\ תאפשר לאנשיס לעבוד מכל מקוס, ולשתף משאבים בלי תלות במרחק, אף אחד לא ירצה לשלס עבור בית מחיר שגבוה פי חמישה ממחיר בית באזור צפוף אחר. ערך הנדליין באותם אזורים ירד בכ-80%. חברות גדולות יהפכו למעטפות של היישות הקודמת שלהן, והן תתרכונה בעיקר בהשארת שמן הידוע, בז₪מן שכל העבודה האמיתית תתבצע על ידי קבוצות עבודה וירטואליות ברשתות כלל עולמיות. הדרך היחידה להגיב לקצב המוא של השינוי שמתקבל מכלכלת רשת מלאה, היא לשנות את ניהול החברה ממבנה פיקודי היררכי לשוק רעיונות, כישוריס ופרויקטים, שפועל על רשת פנימית. תקציביס שנתיים וסגני נשיא כבר אינס מתאימים למבנה זה. בסופו של דבר, סטאלין הוכיח שתוכניות שפרוסות על פני חמש שניס ומנוהלות על ידי מפקחים אינן טובות למדינה, אז מדוע שאותו הרעיון יהיה טוב לניהול חברה! התפיסה של קידוס מקצועי ומשרות מלאות תיעלס משוק העבודה ותוחלף על ידי התפיסה של פיתוח מיומנות ובניית רפרטואר. שוק העבודה עצמו יהפוך לגורס קטן מאוד בכלכלה, משוס שרק חמישה אחוזיס מהאוכלוסיה יהיו שכיריס במובן המסורתי. שאר האוכלוסיה תורכב מבעלי חוזיס עצמאלים (0615ח3 ]1 66ז=) שאינס נחשבים לעובדי לקוחותיהם. שירות הדואר יתפרק, משוס שכל ההודעות יעברו בדואר האלקטרוני, וכל משלוחי החבילות ייעשו על ידי נותני שירותיס פרטייס וגמישיס יותר שמהוויס חלק מה-078060א₪ של השולח והנמען. המונח ייללכת לדואריי ישנה את משמעותו, ויתייחס לתעשייה לא שימושית, שעדיין תתקייס במשך כמה שנים נוספות כדי לתת שירות ללקוחות לא מעודכנים. *> הכנסות הממשלה יצנחו למחצית מרמת ההכנסות שלהן יחסית ל-קא6 (התלייג), משוס שרוב היצירתיות בעלת הערך תהיה מקוונת, וקשה יהיה למסות אותה (אס יוטל עליה מס גבוה מדי, השירותים יוכלו לעבור במהירות למדינה ידידותית יותר). עם זאת, דבר זה אינו מהווה בעיה, משוס שה-6%2 יגדל ביותר מפי שנייס בעקבות הגדלת יעילות כלכלת הרשת. ממשק משתמש אנטי-מק ממשק המשתמש הנוגד את זה של המקינטוש הוא תפיסת עיצוב שפותחה על ידי חסס 6 מחברת 5065ץפסזס6ו] חט5 ואנוכי. כל ממשקי המשתמש הקיימים כיום הם פחות או יותר העתקה של הנחיות ממשק המשתמש האנושי שנקבעו עבור עיצוב המקינטוש בשנת 1984. עקרונות אלה פותחו במיוחד עבור מחשב קטן (זיכרון אגמ של 128%8, מסכי שחור לבן זעירים), התקן אחסון זעיר (תקליטון) וללא רשת. לדוגמה, אחד מהעקרונות היה "יציבות מורגשת", שמתאימה לממשק בצורה מושלמת, כל זמן שלא יכול לקרות דבר בלי שהמשתמש ייתן פקודה מפורשת. עקרון נוסף היה לגרום להצגת כל הפריטים והפעולות על המסך: דבר זה טוב כל זמן שהתקליטון שלך מכיל לא יותר מאשר כמה קבצים בודדים, כשכל אחד מהם מקבל סמל משלו. האינטרנט ויכולות המחשוב המודרניות הופכות את רוב הנחות העיצוב בהן השתמשו עבור המקינטוש: כיום יש לנו מחשבים מהירים, מסכים גדולים וצבעוניים, התקני אחסון עצומים (הדיסק הקשיח האישי שלך יכיל טרה בית של נתונים תוך 10 שנים), והכל מקושר ומחובר למליוני (ובסופו של דבר גם מיליארדי) משתמשים ואתרים אחרים. תכונות היציבות והתצוגה המלאה כבר אינן אקטואליות. ז%9ח66 ואני גילינו שהיה הגיון להפוך את עקרונות העיצוב שעומדים מאחורי המקינטוש, ולעשות בדיוק את ההיפך. העיצוב שהתקבל (למרות שעדיין יקר מדי ליצור אותו) מיועד לסייע למשתמשים לנצל את סביבת הרשת במלואה. עקרונות האנטי מק הם: > מתן דגש על נושא השפה. המשתמשים יכולים לבקש דברים על פי שם או על פי תיאורם, גם אם דברים אלה אינם גלויים. > ייצוג פנימי עשיר יותר של פריטי נתונים כגון מסמכים ודפי 69). המערכת מכירה מספר גדול של תכונות עבור מספר גדול של פריטים, כולל ידע אודות היסטוריית העבודה של המשתמש עם הפריטים. > ממשק עם יכולת הבעה טובה יותר. ייצוג חזותי וקולי מפורט של פריטים שנמצאים מאחורי סמלים זהים לכל המסמכים מאותו הסוג. % משתמשים מומחים. שיפור יכולת העבודה ההדדית עם גולשים שיש להם ניסיון רב במחשבים. % שליטה משותפת. מחשבים אחראים על הפעלת הממשק וסוכנים (פַחסְפָ) יכולים לבצע פעולות ללא התערבות אנושית. פרק 8: תחזית: הקבוע היחיד ב-65// הוא השינוי 21 המחשב שאינו נראה עמיתי, חהח וס .ג 0|החסס, כתב ספר שכותרתו היתה: :סוחס 6!פו5ועח1 סחדך 63 פל6טוססזק 0000 עח/ |8ח50ז6ק 636 ,ווה ,א0|6רח60 50 15 זס6טקוח 60 חסוזהווסזח1 סחבּ 6+ 6ז 665ח8ו|ססה חסטט|50 למרות ש-חאוחזס הוא שותפי, אינני מסכים לגמרי עם המסקנה שלו, שקובעת כי מחשבים אישיים כל כך גרועים עד שאין מה לעשות פרט להשלכתם לפח. אני מסכים שהם גרועים. אני פשוט חושב שיש סיכוי לתקן אותם אם תעשיית המחשבים תשים בראש מעיניה את נושא איכות המוצר והשימושיות. בכל מקרה, הספר סק 60 6!ופושח1 סחדך הוא מבוא מצוין לרעיון התקני המידע, והוא קורא לצאת למלחמה על הגברת הפשטות במכשירי אלקטרוניקה נצרכים ובמחשבים. 2 עיצוב ממשק באינטרנט %> מדינת טונגה תהפוך למדינה העשירה בעולם, על ידי כך שהיא תארח אתרים גדוליס ומצליחיס רביס אשר מחובריס לאסיה, צפון אמריקה ואוסטרליה באמצעות חיבוריס אופטיים. אפשרויות השקעה חדשות וכלים פיננסייס חדשיס יצוצו. השקעה בענייניס כגון שיפור פוריות האורז במדינות מתפתחות, למשל. הסיכון מוקטן על ידי נגזרות של הנושא, לדוגמה, ההתבססות על כמות האורז הנצרך על ידי מסעדה גדולה בהונג קונג. חברות ההשקעות ייעלמו, משוס שהמשקיעיס יכוליס לסחור בחלקי מניות ולספק הון בסיכון אפסי ובעלויות מינימליות של ביצוע עיסקה. מערכות מומחים אישיות יוכלו לבנות תיקי השקעות מיוחדים עבור כל אדס, תוך שימוש בתיאורי השקעה מרובי תכונות שנקניס ב-60/ו. אחת מהתכונות החשובות תהיה עדכון מתמיד של דירוג שביעות הרצון של הלקוח, אשר ייאסף על ידי שירותי פ6\ עצמאיים בכל פעס שמישהו רוכש מוצר או שירות. אם כמה גולשים יפסיקו לחבב מוצר מסויס באותו היוס, ערך המניה של החברה המייצרת אותו - יצנח. רוב אנשי המכירות יוחלפו בלקוחות שיפנו לקוחות אחריס למוצריס ושירותיס שהס חיבבו, בתמורה לקבלת עמלה או נקודות נאמנות. גולשיס שנותניס המלצה גרועה יקבלו דירוג שביעות רצון נמוך ולא ייכללו ברשימה בעתיד. למרות שביל גייטס ייפטר מכל הכסף שהוא עשה מכתיבת תוכנות, הוא יהפוך בשנית לאדס העשיר בעולס עקב הרווחיס שיתקבלו מהעסקיס המקווניס שלו. באנציקלופדיות יתייחסו אליו כאל איל הון בתחום המדיה, שעשה את צעדיו הראשוניס בעסקי המחשביס. %> בשל השפע בהתקנים ניידים שמשתמשים במודמים אלחוטיים, אנשים יהיו מקווניס תמיד וניתן יהיה להשיג אותם בכל מקוס. הפרטיות תהפוך למצרך יקר. משתמשים ישלמו תוספת עבור שירותי מיסוך שיאפשרו להס להתחמק מהעולם. היכולת להיות לא נגיש תהפוך לסמל סטטוס. חברות המחשבים יחדלו מלשכפל את ממשקי המשתמש הבסיסיים כדוגמת המקינטוש בתהליכי אתזור מידע וצורות אחרות של ניהול מליוני פריטי מידע. עיצוב אנטי-מק יהפוך למציאות. האמת היא שאיננו יודעיס מה יהיו ההשפעות לטווח רחוק של ט6/ שתחדור לכל מקוס בתחיינו. כללתי כמה תחזיות דרמטיות למדי, בתקווה שהן יסייעו לך לחשוב קצת קדימה ולהתחשב בהן בתכנון עתיד העסק שלך. הדבר הבטוח היחיד הוא שהעסקים לא יישארו כמות שהס במאה ה-21. הקבוע היחידי הוא השינוי. ברוב החברות יש ליקוייס חמורים בתחזית השפעת האינטרנט על עסקיהן. שינוי מואצ משמעו שהעתיד יגיע מהר מכפי שחשבת, ולכן עליך להתחיל לחשוב עליו כבר מעכשיו. התקני מידע הגישה הניידת תהיה הנושא החס השלישי בחשיבותו באינטרנט, אחרי הדואר האלקטרוני והגלישה ב-60/. הגישה לאינטרנט מהתקנים ניידים בעלי מודמים אלחוטייס תהפוך לנפוצה. שימוש נייד יוביל לשירותי אינטרנט חדשנייס רביס שיפעלו תחת הסיסמה 'יכל אחד, בכל מקום, בכל זמן: מחובר". התקן נייד חייב להיות קטן כדי שהמשתמשיס יסכימו לשאת אותו אתס לכל מקום, ולכן על מעצבי ה-60/ לחדול מעיצוב עבור מסך בגודל קבוע. לחילופין, דפי ה-69/ חייביס להתאיס את עצמם ולפעול על גדלי תצוגה שוניס. יש לחסל את השאלות הנפוצות נוסת: 'יהאם עלי לעצב עבור מסך ברוחב 0 פיקסלים או 800 פיקסליםז'י שרטוט מחשב אם אתה רוצה לבחון את חשיבותו של דבר מסוים, כדאי לשרטט שרטוט פשוט שלו. מהם הרכיבים אותם תבחר לכלול בשרטוט, אשר יתנו לצופה בו לקבל את נתוני הפריט? אם נבקש מאנשים לשרטט מחשב, הם ישרטטו לרוב תיבה גדולה (המסך) שמחוברת לשתי תיבות קטנות יותר (המקלדת והעכבר). ייתכן שהם גם ישרטטו תיבה עבור יחידת המחשב עצמה, למרות שאנשים רבים מתעלמים ממנה. בימים אלה, המחשב מזוהה על ידי יחידות הקלט-פלט שלו ולא על ידי יכולתו לבצע חישובים. המילה "מחשב" שגויה, משום שהשימוש במכונה הוא יותר כמקשר מאשר כמחשב. אם היינו מבקשים מאנשים לשרטט "מחשב טיפוסי" בשנות ה-70', בזמן שבו הייתי סטודנט, כנראה שהם היו משרטטים מפלצת ענקית עם כמה ארונות בגודל של חדר הלבשה וכמות גדולה של סרטים מגנטיים שמסתובבים על גלגלים וכן אורות מהבהבים. אני מזכיר את העובדה הזו כדי לתת הוכחה היסטורית שאכן ניתן לשנות את רעיון "המחשב הטיפוסי" בצורה קיצונית (אני צופה שהשינוי בתפיסת המחשב יקרה שוב בקרוב). פרק 8: תחזית: הקבוע היחיד ב-60// הוא השינוי - 353 אם היית רוצה לשרטט "מחשב", זה מה שהיית מצייר: תיבה עם מקלדת ועכבר. התרשים מציג טיוטת פוסטר של 186 אסז6א אשר שורטטה על ידי 60!0 חסוח. אם מישהו יכול לטעון שהוא המציא את הדור הנוכחי של המחשבים, זוהי ללא ספק 6חחס. 4 עיצוב ממשק באינטרנט ותסע+ שתסס 6פטך 6'תב01 פמס6טפתסס .פפפפעטת: שעפזו צסת5 .שסבּסה עססטס 65/7600 שרח סס .אסשא .6ז8כן ./ע/עעע בעתיד הקרוב, מגוון התקני המידע יפרח, במיוחד בדמות מערכות קטנות וניידות (טלפון נייד, חחוהּם, 6 66א6סק). צדס6/צ ה-60/ גרמה ליצירת אחד מהתקני המידע הראשוניס בדמות ה-/דס6/ בשנת 1996. לרוע המזל, ה-עדס6/ לא טובה והיא נחלה אכזבה במונחי מכירות. למעשה, אני חושב שה-/ד60/ היא מוצר מעולה במונחיס של עיצוב ושימושיות. היא מראה באמת כמה קל להתקין מחשב חדש ולהתחבר לאינטרנט עס טירחה מינימלית. אך החיסרון הגדול של המוצר הוא העובדה שהוא משתמש במסך טלוויויה. למסכי טלוויויה יש איכות נמוכה מאוד, יחסית למסכי מחשבים, ולכן לא נעים לבצע פעולות באינטרנט על גבי מסך טלוויזיה פשוט. אני מקווה שבקרוב יופיעו התקני מידע דומיס ל-צדט6/ בעיצוב וביכולת השימושיות שלהם, אך כאלה שמשתמשיס במסך שטוח. הרבה יותר נוח להחציק מסך בצורה שבה מחזיקים מגזין, מאשר לכוון שלט רחוק על טלוויויה, כשמבצעיס פעולות אינטראקטיביות, כגון אלו שמבוצעות ב-60/. וט ייוו ]יה | וסט ץ8 ס | ס ה ה 6 6 + 55 |בסהפותנוחסוח 3 55ח858זקפז סוטטס בר חו פזבח5 ||ואו 5זפההטפחסס באו חס תו .10087086 פר₪ חס הסו05|מא8 הססבּוזס?חו אפ|מהחסס ץ|הותחפ"סאם פסחם 5בּצו סבח/ חס באו סבח// . 8|מחו5 ץז 5הותסספט 81!3018ז צ|0וו50 5פהחסספט בפּטהַבום-זסזום זם 3018 3 60 0פזטוסחב פסחס באו סב חש . !בס צ]858!קהחסס 85 סספם 856600 ץ|גרם הסחבו|ם3 הססהּהחסזתו סז החד .החחבּח פס + צתלזסאו הפתפתפטאם הסח ,גת חס 5זפצו|08 סוטגוך) 8800706 חב הסטבּזם!מאם ספהחסטח1ז זם טר זס החסה הטוי הס בּסוחטרתוחסס פב הסחפותפצחסס זם |בסוחחססס ,085 וםרחסט |הת50זפכ רשוע 3550013080 חח + 08על צחב סוטט הסו/ פתו|חכ בּסוחפחב פאו! ז58אוסזט זם |ב+וסם ,0080 08 חבס 6408 בחבּ החס!ב , 855!מטב3 0ַ58בּם-בּצב1 בחוסטוסחו [ובהח-8 35 חסגו5 פתססבּסו|מםב 6ו35ם הסוא ףוטפט פחד .5אססט פתסה55/0פזטב3 חב זס!סס הסםט!850ז-חוח , פ|וסים תסס- טס 3 חב , לוסב קב בופהחםוט || , 5ב ההוצסות סח ₪35 3 38 זס ה הסח 3 חב גוס חב ססחו 8|ס3זס 5'סוטגוק) סטוום 255 . 8|מחו5 צוטבאזב תפז 15 הססב||בספחך 58/8 8ססוח8ז 3 הסואו הסססבזופסחו הטגוסזחס ]63ב הססצובּ 80|חבּח 15 8158 ההוהסץזפץם . אסב1 הסח + 85כעט || פ|החבּח 60 ספזטטו חסס צץבבפזוב 5 פוטטו) . זְססְבּחַבּזטֶטָבּ +הפסחסס/זפה היםזם .החפ סח 63018 סחב , 51 , 56% בהוטוסחו , 5הסםסההחסס 18800 |בסו5ץחם חו טזסאו 35%| ה 55ח858זספז פוט ,,הַחוכבּחָ3ּ 3 זס 538 בטחב 528 פרם צוהסטוסה הפפ פחח חו פזפה ץחב פהווחס סט פ|מספכ 865! עטו|וםב 03 8|855זושו 165 . החסה 35 5ז58גו זפחהזפסח1 זס+ הטוע סז סם ץ8א 8!855זוו ב , הַחוםעס פזוטספז 503 5הססבּסו|סב זס= .+פ)החסס 8ס8|קוחסס חו 68בזפםס חב .וצזם 15 אחו! 88זבּז)חו פססוחפז בּ 6% שף./ע/שעע הרעיון של עְפָס|סחח66ד זוטט) להתקן מידע בצורת תצוגה שטוחה ניידת. פרק 8: תחזית: הקבוע היחיד ב-65// הוא השינוי 25 עיצוב עבור צדט6/ אם אתה רוצה לעצב אתרי 60/ שמיועדים למשתמשי צדטשו, עליך לעבוד על פי ההנחיות הבאות: 4 אל תשתמש בתמונות גדולות (ברוחב של למעלה מ-544 פיקסלים או בגובה של למעלה מ-376 פיקסלים), אלא אם הן יעבדו טוב עם תכונת ההתאמה האוטומטית של צדס6/\ לשטח התצוגה הזמין. % אל תשתמש במפות תמונה, אלא אם אין מנוס מכך, כמו במקרים של בחירת אתר במפה, והפוך את סרגלי הניווט וסדרות הלחצנים לתמונות נפרדות. % אל תכלול טקסט בתמונות, משום שקשה יהיה לקרוא את התווים על גבי מסך צדס6). % אם אתה חייב לכלול טקסט בתמונה, השתמש בגופן מודגש מסוג 670808 בגודל 16 נקודות או יותר (או בגופן דומה באנגלית). ההנחיה של 16 הנקודות יוצאת מנקודת הנחה שהתמונה קטנה מדי מכדי שניתן יהיה להתאים את גודלה. % אל תשתמש בסידור מרובה טורים (חוחט!60 +אוחזס=-טוטו). התרשים מראה כיצד תצוגת שלושת הטורים של אתר חסס.5צו6ח נראית עלובה על גבי מסך דט6צ (למרות שזהו אחד מהעיצובים החביבים עלי במסך מחשב רגיל). % אם העיצוב שלך דורש כמה טורים, השתמש בלא יותר משניים, וודא שהם יעברו טוב במסך ברוחב 544 פיקסלים. > אם יש לך דף שנגלל על למעלה מארבעה מסכי /דטט6ש, הצג שוב את סרגלי הניווט בתחתית הדף. > חלק את המידע שלך למרחב קישורי טקסט עשיר עם מספר גדול יותר של צמתים קטנים. % במידת האפשר, הקטן כל יחידה כך שהיא תתאים למסך צדט8/ יחיד כדי למנוע צורך בגלילה. בקיצור: כתוב פחות טקסט. (בעמוד הבא) גודל המסך ממש לא משנה. הצפייה באתרי 5 \ על גבי מסך גדול מספיק מאפשרת למשתמש לקבל תצוגה טובה בהרבה של האפשרויות הזמינות, מאשר מה שניתן לראות על גבי מסך טלוויזיה קטן יותר. תמונות מסך אלו מציגות את האתר שלי, 6%פ, על %דס6/ עם העדפות שונות של גדלי טקסט. אם המסך לא היה מסך טלוויזיה איכותי, הגופנים הקטנים ביותר לא היו קריאים עבור רוב הגולשים. השווה את התמונות הללו עם מסך מחשב בגודל "20. ברור שהאתר שלי לא מעוצב טוב עבור משתמשי צדס6\. למרות שקל וברור לקרוא את רכיבי הטקסט הנפרדים, עדיין אתה מאבד את תחושת המבנה של הדף. 6 עיצוב ממשק באינטרנט חסז8 66 | 5 1 אסספ1ז4!0 !ח6זזוט) (22 5 1806ו6)ח! סם ?6687 חטו65 51116 8 6ז500ח6 05ז08ח8זס זפ ,ץז !ט680סע זה6ז515ח60 065/05 זווחו! + חסס סחףּ) 160007 06 חו (עזווו0ו 9900 | 5 0800 5 (22 1פטחָט) אסט1ו4!6 !חסזזוט6 6 51808168 806ח6!וח! סם ?7 וז חו85 ]5 60 3 5078ח6 1808105 זורחו! + חס6 זטם ,עזב3ּ!טסהססצ 0חףּ) וה118800 :08510975 חטו065 ז6ק066 חו (עזווופו5חסק85ז זסז 85חו081וש3) :24150 .155065 .51800806 065170 סחזוזש 20 פחוץזז :ץ5100 0896 08ז6וח60-= [ח56/.60 ./ש/עעץ פרק 8: תחזית: הקבוע היחיד ב-65// הוא השינוי ץ0|0חח166 הסוז8 ה חזסזחו 158016 :וחסס.זוספט 5 ח6!56ו\ סאה( : והסס.זו56ש /60 56 הז 60 זהסחההּ וחזוסק אסם1זוס| 1 6עוחסזה 'פז8סץ 6עו- חוחגו!ס6 ץ|66צו-וס 5'טס86 -סחוסטוסחו , עֶזוווסה5ט ס6/ חס 0חורח68זזס 0ח8 ס6סו 8 חו ששב | 16163|16'5/ 6 6 :חסזהם ... 2580!6)) 5116 5'ח66!פוצ!] טסא3) :וחסס.זו58ש עֶ0!00חח160 הסוזה ו זס?ח! 158016 :חחסס.ווספט 86 5 ח6!56ו 0סא13. :והס6.זו56 חח 00 זהסחהּ סק אסט1ו6| 5'ה). 01 6שוחסזה :615 פעו= 60 חס הוחט!סס ע|אפפצו-וס סחוסטוסחו , עזווו580 0חווח68זז5 0ח3 ספסו 3 68 חן שה 1 0108/16'5/! 6 6/6ו!36 :ח0ז6568ז 60/ 8 60 ]0 05א518ווח ח6) קסד ח0ו085 חח ז60ן[סזכן ספ 6 זסטזסס ]0 8זטווב- ... 580!6)) 5116 5'ח56!פוצ!] טסאב). :וחסס.ו56ש 2357 חסז8 66 | ץ0!0חח160 הסוז8 וה זס!ח! 158016 :וחסס.ווספט 6 5 ה6!560ו1 0 סא13. :והסס.ז561 5 (22 זפטהָטה) אסט1ו6! זחפזווט6 68 018003108 1618086ח| 3+ ?7 חךף09 ו 00 )ווחו! חס )טס ,עְזהּ|טטהססצ 6ח8) וח8800ז] :0895008919 חסו085 ז9ק₪66 חו (עזוווטו5חסק85ז זס) 85חו|3108) :50|/ .185088 .5)8008108 065/00 החוזח/ו ב סן החועץזן :ץְ0טו5 6856 6סזסוחוהסס-= 58 45 ]0 :פחו|חס 8118085 עְטט 6 3 עוחס ,08116088 הַחוו/59 הח 0 !הסחהוח'זוסק אסט1זופ|3 1 ]0 8טוחסזה 'פזהפץ 8עו-] 0פצ חס הוחט!ס6 ע|א66צו-ום :החוסט|סחו , עזוו580ט 83 חי חווחה9ז)5 החה ספסו 86 חן עורה 1 6168|)6:5ו/! 6 8868 :ה0ז8508ז ספ/ 8 90// ]0 986685ווח ח18 קסד חו095 ]וה חההוח 01[סזכן ספ/ 858 816ז0כן60 )0 פזטווב-] טפש 6חז חס 880ז 6|קססכ צוסרן ח6|56/ טסאב3. זטסטג ... 580!8()) 06ו5 5'ח6פ!וסוצ] טס6ב!. :והסס6. 561 56.60 ./ש/עעץ 8 עיצוב ממשק באינטרנט הז 53 | ץְ0!0חח86+ הס 3 רחזוס+ה! 5!5 53 :ה501%.60 6 5 ה 6!5ו 23002 :וחהסס6.זו5 15 (22 זפטְחָט ) א0ם4!871 זחפייוטוס 7 משופס 50186 91303105 1308עסזמ1 סע %'מ0סף זגול , גול הסט +מ1500תסס ב פעגופת6 513183705 ב (51011107 מסקפפיז 0מבּ) בס הספית ‏ פיז מ00512 +ומצון שמוזוינאו ע10 65מ31110611) :4150 .1551108 00918 090 .35 0518 +חטוו סקפ 0305 ענול 0ף קמוקים :500 0356 6סעסבנגמסס- 6 53 ץ1תס ,03067105 קמ50[[1 51605 45 01 :6מ1[מס ע[05510ק , עס) 3560זו ע6פגו 16 פס1ע0ז בל סזוז ג ספ - 5156 6+ מס 0340617185 16[+ 0מ8 0ף 6[פ1פפסק +סם פבּאו +1 5101305 סע 1656+ מ06ז60 06מ01096 סמ 15 עס 3 037 :1 מ1,6590] . ((60ם67סמסס 15 עספגו 16 35 דב] פב .6 0 6357 1% במ המב מ56[60010 זסגוססנק 106 (3) 26031156 0067 116 201 %'מ10 5166 +05 0163 שמ 6 ]0 מס (5) מב 1965 קמוקק1מ5 קוב סס+ 30ם עסמ ץ6נתסלספגוס 16 1131 065011506 קי[63זיו ספ פבּזיו פזסגוסיזק ספפס,] . 600660מ מס 16 פבזוו 17 1131 עגופ ₪6 +סם 8[גוסס 6 5מ00)זק065071 ז0גו0סעק 06131100 מב 0000 :2 6 0גוס+ מב 568 ז'מבּס ץ6במסספגוס 6+ מ6ב[/יו [113מ0990 6 610580 מש8651 +מ%6מס0) . שַמ1עגול 6ע0ס61כ פססגוטסצק .6 (24 זפגוסגום ) ןס 514 0055ב :1110 [ה6י נתסים 10י60ג 11531110 ץ[מס בא 310 51100055 03511700ב 16 ,951605 %0 35690 878 15מ103[קק3 לסן 6ל1ס6ק5סזק מסגאו 26% מב 16 עס 511153516 פבזו 131 קמומסקס ססן ב מה 8" 11% 26031186 11115 15 .5150 6 מס 16 עס1 ע[קקבּ 1 קמ בקנמסס-10 01 פזינבק ע10[ז0 13 ספינסזו ידב זיוס[ 35 50016 8[גוסצו 65שבק 167+ס זפסגמ :50 א%מומ ז'תס 6 ג .51005 01 5017105 ב 606[קנתסס 0ז 130 פעספגו ]1 8 000 סל שגוסמ6 15 קבזיו 6+ מס 566 קמב 150368 ב ס%סיזיו ע[1מ606 1 מב זפינגו1ן 131% .6עגו[1ב] סז עספגו מב 5ב [[פזו פב 5010105 011107 בפגו 11950 מס זעסקפע אוסם 135 13% קַמ11וגועספין-8 01 1117 בּפגו 19 01 פופק1בּמב 31619 תגסע10מ1 ."זי 000090" קס 15160[סגוק 66 גוסץ 11 1638 3% זגו ,591108 זעסקסץ 5176מ0קא6 מב 8 פומ 6 %מגו01500 ב 20% גוסקי ,5116 גת גמסית %תו[ 16 זיוס[[10 0 ה לקו ו ו - [ח56/.60/ ./ש/עעץ פרק 8: תחזית: הקבוע היחיד ב-65// הוא השינוי 60 ל הסה הוחו סק %אסטזופ|ה מס מנננגו[00 ק[868צו-1 136005 01 פק1[סעב ‏ פנהסץ פקיוק :מו גו[0ת1 , 11159 בפגו לאד 3 8ַמומ סי המב 1490 פטס 1 זוב[ 16603[10'5 33 18 36116078 :1659370 לפ 0097 7180 01 005[ב151ג סז קסיד טבמב 801[סצק 85 5 668 בעסקעסס ]0 פעגו[1ב 80 8+ מס 638 6[קספק אוסצ1 ח8!56ו טסא13 וטסטה עםקביעפסות פסבנבּסקקב 10[פגוק 6ב 8זופ1קיץ10מ! פפסצק :מו 0גו[0מ1 , מ116[56 כ ס13% עס פקבפפס חמב פעפקבק מסוזהּק1טבם [העגססגריס5 16 ע6פאוסעס :103 פד קסטעגום 3[ 1110 153 1 סגו 875005 118 01 ב6בפק שג" ב0ג60ק5מ1 11107 53גו מב מ310גו[3ש9 ספועגוסון 17 1153 זגוסכ ב קמומי3 1 6 וס קמוז[גופמסס "גוזגונ)-3-+מ6" , קמ1ז60מ1510ץ ,52860265 :513 0%ת'6זמ1 עס 691 נמפגת 20326 0190ב גוסי) מ3מעס11] מ1116[59 [קגוסץג[ז 080706 חא והז 16%[ , מק0651 7165 זגוסב פקססיס 880 מ8ננננסססת 8 גו 10ב מב מק4051 185 זגוסל ב 011185 015%[ 860 מ6במגמסססת ב 8 פוחד זצוסטה 58 כ ז105מ31 135[ 5166 15 קאד 8 74[1ע610 10 בי [בזעסק 259 ס6צא = שב ו (שה) הסוכן 63 בַהו0ח18סם ו8 ...א ,זפטום פוחוסד .8 , עְווכ) אוחפחק סו .5 פח1 חו 3-2 38 כוהפחסוכוחה חס 8 ₪8ון | 8ח] וה חס 687165 4|זס/\ זג 0) 0 .עַ03ח= ]סוד אתם דאו 1 ו 6-5 יש כ 5 ₪ 5:00 08160 5116 | 1999 ,27 ד5וב(ב ‏ צהסוה- קוד זאסח זוווסץ חס 8 [260178) 988 מ1766828) 8 8 בס 101076 110608 +101015 | |המסטהמזטהך ה ה8חח/8ה2) 39508 |00878 | ** יי חכ |178ח06 ע08-] 58/0 ה508ח90זב) = 80 510088 ]0 68סוזכן 108 חףופאו ופטח יאר 5011 החש 858015 זסחו | 4 ב 18 חס 10005 סהועוסזם 3 חַחו|8ח5/0 ,8105 א 6 0 050 .8161 0011/85 ו שזפפפת : קספ או 5ש55!. = 8 האצוס 65ח=₪ צוסם := וסו דהה סם= דג ושם: מסומוקכ) וס 100 ההחד שחושו.1/ פו ה סנו 5ן66) 168 6ת168תזט11 ---- 85 0 0 1 ו 6ו ה קה 6חז חס 5 אס ו בוד ממ + 60 פס ה ד 5 שג טודיז 5 הוחו 0 58 01 2035%) השס 7 5 פחסא הַחסה]) | 18 0 6881 0פוהסס! 5והח6כ 8ה8סוזטורן ו הסו366699 01 זט ,עְ03= חס טב4355 01 |18ו680 חהווחהחהם ד בחה החסו- זסן |והסכן 6ח+ בַהו685זסחו | >פעואסחג| סוד א 85 החו|סז68 ה1ס50 6אוו5 10 הַהוה6816זח: | תשפאו שופ | 58 |00013-] 6 ס) 680 .וחזסזפ זס[8וח 8 0 החזסו5 8 01 8ע= 6הז הו : 50501 = | ג טסד אל וס 6 וס צְ0ח6!ח6.! א סה 0 68165 6ז0) :1/1 | שתומזא= | מ מ0גז803 80866 שחו פ'הופפטוק ‏ >וס 6 6 חו 6זו= הוח | 50806 זו 355/85 00870 חס אס 7-8 (00א= 10 ץ!|₪6 חס 0861 6ח1 008 0 צ680ז ל חסו)518 | חס5ז8/ ואפד פוה 05חט1 זו 60זוז9ז 6 |ווצצ זו .צְהח- סא סו ₪0 .4 הַחו1הזסקס 6טחו!)חסס 10 6הטס) זסח 6 6 אוו וזא השס פעו יב מננ יר חסוזהו (זִפַצֶ3|ק 62 |68 68זוטש6ם) - ".₪ 5דפאהה ו ו ופ 28 .- 11090.17 | אוסם 1 זג וסט ג מאוז זטסד 96 + + 765.00ח/ןח ./ע/ע/עע 0פצ 16 חס פפוחוד ל 8 פד 0 עיצוב ממשק באינטרנט 00 .065ח/ן ה ./ע/ע/ע 6 6%ו1) ו זפרטבפעש סע ב - 5 07 0 6 % גוא 5 א*אז א 0 :יי ות 5:00 68ובה1ז 586 | 1999 ,27 דפנסנזג דה סנתת קוד +אפח זווסץ חס 8 [2600:3) ₪378 מ1766808) 8 בס 1/1076 110658 18%ו1/1 | |המסםוהחזסוהך 9503 חב|4 הבּהחוב3ה6 8ע58פם |בּזפסב- יי 8+ תחופעו +5טח 5אחבּם |ב7ח8ם שְבּטח= בוב53 = הפחשל 355815 זפח+0 חב 5א5:00% 0% פפסחם אוו בחציסזם 3 הַחוובּחחו5 ,73%85 851ז0+חו חַחוז59% ו אוו בפודובם כס 60 .%פאזב 80185 8ח+ חס פטסס+ 5 58 |בזפ ספ החד :הדססס צז 15505 ל (סה) פזסו העיס ₪5חם עוסם :₪ ו6זדחה סשזה וסה* ו 5חם ד הסוטוחבּחם הַתהו0ח8זס וס 100 חבחד מסונוק כ שוס אוחפחם סס |81+,.1. א ,חפצוהח קמועו 1/ פוז .5 פר0 חו 3-2 .38| ! " 2 168 סז 3 וב מ תוחומה 8מ1ק266?) 126218 6מהסוזגו11 0 חס 5885 טוזס פחַ83 | פ|סו פוטסה נס 60 . המוז 8 0]1 2085 10 | 8+ + 835% בפותסס]| פוחחפק פחבּסוחטת 6 ההז ננ יי עְב03 = חס 83553 +0 |0301%3 חבּוובּחב3ם 6 | שונ10 שו , : , , ב חב בבחסו= זס+ |חפכ 08* הַהופבּפזסחו [טהעיך 777 | ב 85ב בחו|סזב63 הז500 5068 סז הַהוהפזבפזר+ ודוה 60 60 . חזזס+5 זס[בחח 4 ב ה'ו550 בר +ס ₪8 פרם חן : 5050181 פםע" זל וס ונוג 16 01 עטונ16וד6/ך ו 40800 0 608 וס ו ו | י . . 5 6 6 ו וז שוושבת 5ג11 וטו | 5131101 02866 שת1פ / 158188 | זסעו ו סו עו : . >טז אם: 1 8 זו 5'הופפגות הזב סט חם אופזם תד | אד חס 073% %08 +זב3ק09 0+ 830 +סף חסוזבז5 : סח פזבּ 5סחוח זו ספזוספז פם |וואו זווא . עבסח= חסופזס/ אפ בודה 50 60 .%! חַחוזבּזפקס פנגוחוזחסס 0+ בחגוס+ ו 8 פפובטק שופ זו :ם6ממפשס6 פען> 8 חססביפ 45 (87צ8!₪ ₪2 !₪68 0165 ) -- 8 .הויז 20 5דם א הוא מ שְג|ם נמ ך 7 אוסס +108.28 א[צזאדך טופ +15.73- 2758.89 | 5030ב 7 זטסד וו +14.74- 1347.27 500 587 0 ו +3.57- 432.45 | |558ק |99* שטוו סו 200 שוח זפםזס- +11.69- 625.71 ספא 8 במסכים כמו אלה שמשתמשים בהם ב-/ד680/ המשתמשים נאלצים לגלול יותר, כדי לקרוא את החדשות העיקריות בדף הראשי של 65חוד אזסצ צוסא 6חד. עם זאת, סיכומי הכתבות עדיין קצרים מספיק כך שהדף יעבור בצורה סבירה במסך קטן. פרק 8: תחזית: הקבוע היחיד ב-65// הוא השינוי 21 2 עיצוב ממשק באינטרנט מות דפדפני ה-60/צ נקודת מפתח בתכנון המחשבים העתידיים היא הצורך להיפטר מדפדפני פ6/ כקטגוריית יישוס נפרדת. יש שתי סיבות לכך שכדאי להימנע משימוש בדפדפן ט6/ במערכת בתוך כמה שניס : *> באופן עקרוני, לא הגיוני להחזיק דפדפן מיוחד עבור פריטי מידע מסוימים, רק משוס שהס מגיעיס מאתר אחסון מסוים. אין סיבה להתייחס לנתוניסם בצורה שונה משוס שהס מגיעים מהאינטרנט ולא מהדיסק המקומי שלך. תאר לך מה היה קורה לו היינו מתייחסיס אחרת לנתוניס שמאוחסניס על תקליטון מאשר לנתוניס שמאוחסניס בדיסק. מה היה קורה אס היה עליך לפתוח מנהל קבציס נפרד כדי לגשת לתכולת התקליטון! 6% דפדפני פ6) משלבים שתי סדרות תכונות, שאפשר היה לספק אותן בצורה ברורה בהרבה אס היתה ביניהן הפרדה. דפדפני ט6/ מטפליס הן בתצוגת פריטי נתוניס והן בניווט בין פריטי הנתונים. למעשה, לדפדפני ה-ספ\ הנוכחיים יש תמיכה גרועה בניווט, אך הס עושיס כמיטב יכולתס. ניתן לתכנן את הניווט טוב יותר על ידי איחוד הטיפול בכל פריטי המידע, ללא קשר למקוס בו הס נמצאים. לדיסקיס הקשיחיס המקומייס, הרשתות האזוריות המקומיות, רשתות האינטראנט של חברות ולאינטרנט יהיה אותו ממשק משתמש, והמשתמשיס יעברו בין אזורי האחסון השוניס בלי להרגיש בכך. מערכות הפעלה עתידיות יספקו בסיס להצגת יישומוניס שמיועדיס לכל אחד מסוגי הנתוניס אליהס המשתמש ניגש. ללא ספק, |ואז תהיה אחד מהסוגים הללו, ותהיה גישה ומינה למציג דפי |ואדת. הניווט יהפוך למנגנון תמיכה אוניברסלי שיקיף את תוכנת המצגת וכן את כל אחד ממחשבי המשתמש (מחשב אישי, טלפון, חחוהּק). לדוגמה, מנגנון היסטוריה יאפשר למשתמשים לחזור לפריטי מידע בהס הס כבר צפו, ללא קשר לתוכנת התצוגה בה הס השתמשו כדי להציג את הנתוניס הללו, ובין אס המשתמש הגיע למידע באמצעות התקן נייד, מחשב משרדי או התקן המידע הביתי שלו. רשימות ההיסטוריה, הסימניות ורשימות דומות יכללו את פריטי האינטרנט, הודעות דואר אלקטרוני ומסמכי חברה המעורביס יחד על פי התנהגות הגישה של המשתמש לנתוניס השוניס (לכל אדס יש דרך משלו שנותנת לו חוויית משתמש ליניארית משלו, אשר ניתן באמצעותה לבנות את היסטוריית השימוש בנתוניס). בנוסף, יהיו גס כ